這篇譯文來自Invision團(tuán)隊免費提供的系列課程：設(shè)計師如何與開發(fā)者合作。本系列的第一篇請查看：
設(shè)計師如何與開發(fā)者合作（一）：什么是為開發(fā)而設(shè)計？
從哪里開始:需要詢問開發(fā)者的問題
偉大的設(shè)計能夠在不破壞用戶體驗的情況下駕馭各方面的約束
在響應(yīng)式設(shè)計的世界，約束來自方方面面：從現(xiàn)有用戶的瀏覽習(xí)慣到技術(shù)開發(fā)團(tuán)隊的實力。
在這一篇，我們將討論在你開始設(shè)計之前可以咨詢開發(fā)團(tuán)隊的具體問題，從而確保你們能更好地合作。
我喜歡關(guān)注開發(fā)者是否習(xí)慣于我的交付物，因為這決定了你使用哪款軟件來創(chuàng)建模型。
我見過太多設(shè)計師（包括我自己）完成設(shè)計后，被要求回去改為另外一種文件的格式。想想吧，你好不容易完成了最終稿，充滿士氣地拿去開發(fā)，結(jié)果被打回來要求用另外的文件格式來交付設(shè)計物。
下面是幾個在開始設(shè)計前需要和開發(fā)團(tuán)隊溝通的問題：
所有的資產(chǎn)如何準(zhǔn)備？
他們是喜歡你把圖切好，把所有的資產(chǎn)放進(jìn)一個有層級的文件夾？
還是說他們希望拿到源文件，然后自己來提取圖像？
如果是后者，他們想哪種源文件？
PSD？
AI,EPS,PDF?
Sketch?
他們的軟件版本和我是否相同？（他們是否能打開這些文件？）
你需要如何組織和命名你的圖層來幫助他們快速找到他們需要的資產(chǎn)？
他們希望你從DW或WYSIWYG編輯器輸出HTML嗎？
如果現(xiàn)在你在用DW直接輸出HTML，一定要問清楚他們這是否是最佳方法。十有八九他們可能不喜歡這種方式。
就我的經(jīng)驗，從圖形用戶界面直接生成的代碼往往缺乏組織且沒法用，這種辦法常常會同時拖累設(shè)計師和開發(fā)者，所以盡量避免通過圖形用戶界面產(chǎn)生代碼。在你使用這種辦法前一定要好好跟開發(fā)者討論一下，
資產(chǎn)需要附帶說明文檔嗎？
你打算如何記錄那些在你遞交的模型中無法直接表示的元素？像顏色代碼，高度/寬度尺寸，字體，字體大小，間距，Alpha值，懸停效果，動畫和其他數(shù)據(jù)點等資料必須定義和記錄，而不是讓開發(fā)人員去猜測這是怎樣實現(xiàn)的。
一些有用的軟件：
Omnigraffle。輕松添加箭頭，符號和其他按鍵，來幫助解釋一個設(shè)計的細(xì)節(jié)。
Avocode。它可以讓你從Photoshop和Sketch中導(dǎo)出色彩，圖像資源，字體，文本，CSS，大小和尺寸?？梢越鉀Q很多麻煩。
Invision:非常優(yōu)秀的快速原型工具，你可以在幾分鐘內(nèi)制作可交互的原型，并且適合團(tuán)隊使用。
問題2：網(wǎng)頁是用前端框架構(gòu)建的嗎？
現(xiàn)在有許多開發(fā)者和設(shè)計師在長期工作中總結(jié)出來的框架。了解它們，并利用它們來修正你的設(shè)計。
許多流行的框架如Bootstrap何the 960 Grid都采用了12行布局。為什么是12行布局？12是最容易被分解的數(shù)字，你可以在此基礎(chǔ)上設(shè)計12,6,4,3,2或者其他等距的行布局，這會讓你更快地做出設(shè)計決策。
根據(jù)這些框架來設(shè)定結(jié)構(gòu)預(yù)先設(shè)定好尺寸。你需要了解你所使用框架的各種屬性：填充值，列寬。分割線寬度，媒介斷點值等等。
我曾經(jīng)在設(shè)計過程中有過中斷，因為我在sketch中設(shè)置的5px邊距比Bootstrap的默認(rèn)邊距要大。這不是什么好事情。因為這個設(shè)計得重新編碼和配置，來解決這個本不應(yīng)該出現(xiàn)的問題。所以在設(shè)計前要明白網(wǎng)頁將使用哪個框架來構(gòu)建，并且知道它們在設(shè)計軟件中會是什么樣子。
除了網(wǎng)格系統(tǒng)，很多前端框架都有內(nèi)置的設(shè)計元素，像按鈕，表單這些。如果想要修改這些默認(rèn)樣式（我也推薦你自定義來適應(yīng)品牌調(diào)性），一定要確保開發(fā)者知道這一點。
基本上每一次我設(shè)計一個帶有特定顏色、寬度的表單是，開發(fā)者最后還是使用了框架默認(rèn)樣式。都是因為我沒有溝通好。
永遠(yuǎn)不要指望開發(fā)者注意到了你用了2像素的圓角來精細(xì)化按鈕。他們可沒有被培訓(xùn)說要注意這些。但是他們可以很精準(zhǔn)地按照指示行事。所以確保跟他們溝通好。
一些現(xiàn)在流行的前端框架：
Bootstrap
Foundation by Zurb
Pure by Yahoo
Skeleton
Semantic UI
...還有許多別的。
在開始設(shè)計之前一定要搞清楚開發(fā)者偏好使用哪個框架。
大多數(shù)框架都配備了模板資源。你可以很容易地找到它們并在ps或sketch中精確地匹配。這方便了所有人，所以盡情使用它們吧！
![]()
問題3：開發(fā)環(huán)境是由哪些語言和庫構(gòu)建的？它們有什么限制？
就算你自己不知道怎么寫代碼，你可以找到一些優(yōu)秀的插件。每個代碼片段都是現(xiàn)成的。它們使得在你的網(wǎng)站上添加功能變得比過去容易很多。美中不足的是，插件不可能適應(yīng)所有的情形。
如果你想為自己的網(wǎng)站找一些已經(jīng)構(gòu)建好的部件，那是很正常的念頭，也很有幫助。但你在這么做這錢，你需要明白使用什么語言來搜索這些部件。
每一個插件或者小部件都是由它們的作者使用特定的編碼語言完成的。很多時候，某個部件的編寫語言與你的網(wǎng)站的開發(fā)環(huán)境是不匹配的。這會讓你的開發(fā)者大為惱火。
一個用Ruby構(gòu)建的天氣應(yīng)用程序不會在PHP上搭建的網(wǎng)頁上運作。一個WordPress插件沒法應(yīng)用在用NET搭建的網(wǎng)站上。角度加載條可以用在Javascript中但不能用在Backbone.js中。
你能明白我的意思吧？
就算你找到了一個跟你的開發(fā)環(huán)境匹配的部件，并使用它向你的團(tuán)隊解釋你想實現(xiàn)的效果，如果開發(fā)者愿意選擇實現(xiàn)它，那是最好不過了。但你最好不要直接發(fā)給他們一個代碼壓縮文件，然后就要求他們“在我們的產(chǎn)品里實現(xiàn)這個效果”。這就像一個客戶給你發(fā)了一堆100px的縮略圖，然后要求你“把它們變成高清大圖”。這是很自以為是且居高臨下的態(tài)度。
號外：其實瀏覽器也是不平等的！
好吧，你可能也知道，開發(fā)者們有多痛恨IE瀏覽器。
值得慶幸的是，整個設(shè)計開發(fā)的氛圍在變好。過去折磨開發(fā)者的瀏覽器在迅速縮減。及時微軟已經(jīng)放棄了IE,現(xiàn)在出貨的計算機都有全新的，有好的標(biāo)準(zhǔn)，但是知道你需要支持哪些舊版瀏覽器會很大程度上影響你的設(shè)計決策。下面是一些就瀏覽器不支持的CSS屬性列表?？纯茨闶欠褡⒁獾搅诉@一趨勢。
Border-radius邊界半徑: IE8
text-shadow文字陰影: IE8, 9, Firefox 2, 3
box-shadow: IE8, Firefox 2, 3
RGBA (color transparency)顏色透明度: ie8
Flexbox (以后會更多r): IE8, 9. 同時需要調(diào)節(jié)部分屬性來適應(yīng)Safari和Firefox的老版本
Multiple backgrounds多重背景: IE8, Firefox 2-3.5
SVG: IE8 (有許多具體的限制)
CSS Animation動畫: IE8, 9, Firefox 2-4, Safari 3.1 - 3.2
CSS 2D transforms (rotation, scale)旋轉(zhuǎn)縮放變化: IE8, Firefox 2, 3
Media Queries媒體查詢: IE8, Firefox 2, 3
你可以在這里查看這份清單的詳細(xì)版。
如果你發(fā)現(xiàn)你必須支持IE8或者舊版本的Firefox，想想吧，元素的外觀將不受影響，你所有的圓角，陰影和動畫都將消失。
使用最新功能設(shè)計，同時又保證其在舊瀏覽器上有較好的可用性和視覺效果，被稱作漸進(jìn)增強（progressive enhancement)。在你起草時必須考慮到這一層次。
希望這些問題有助于讓你在設(shè)計過程的開端就與開發(fā)者形成良好的溝通。提前知道有哪些限制能夠幫助你更好地做出設(shè)計決策，并且減輕后期開發(fā)成本。前期準(zhǔn)備得越好，項目后期就會越輕松。
在下一課，我們將學(xué)習(xí)一些問題和技巧，幫助你在設(shè)計過程中與開發(fā)者溝通
小結(jié)
我們希望以何種形式交付成果？
-資產(chǎn)如何準(zhǔn)備？
-我選擇的設(shè)計軟件會影響開發(fā)人員的工作嗎？
-最負(fù)責(zé)最終處理資產(chǎn)？
-我們要準(zhǔn)備說明文檔嗎？
網(wǎng)站是由前端框架構(gòu)建的嗎？
-如果是，是哪一個框架？
-這個框架提供的外觀與我希望設(shè)計的外觀一致嗎？
-設(shè)置畫板時，尺寸，列數(shù)，斷點，對齊等框架細(xì)節(jié)如何考慮？
-圖形元素長什么樣？
-有現(xiàn)成的UI Kit可以用嗎？
我需要了解有關(guān)開發(fā)環(huán)境的哪些要點？
-是哪種語言開發(fā)的？
-如果想要找到合適的部件，我需要如何設(shè)定搜索條件？
-最后向相關(guān)人員演示你想要的功能，但不要覺得它就應(yīng)該被開發(fā)出來放在那里。
需要支持哪些瀏覽器？
-基于支持舊版瀏覽器的需要，設(shè)計時有哪些限制？
-考慮漸進(jìn)增強
在打開設(shè)計軟件前與開發(fā)團(tuán)隊有一個良好的溝通。哪些你不能控制的因素會影響到你的設(shè)計？幫助你和你的團(tuán)隊獲得成功。
