這篇譯文來自Invision團隊免費提供的系列課程：設(shè)計師如何與開發(fā)者合作莺奸。本系列的第一篇請查看：
設(shè)計師如何與開發(fā)者合作（一）：什么是為開發(fā)而設(shè)計？
從哪里開始:需要詢問開發(fā)者的問題
偉大的設(shè)計能夠在不破壞用戶體驗的情況下駕馭各方面的約束
在響應(yīng)式設(shè)計的世界，約束來自方方面面：從現(xiàn)有用戶的瀏覽習慣到技術(shù)開發(fā)團隊的實力凌盯。
在這一篇徐矩，我們將討論在你開始設(shè)計之前可以咨詢開發(fā)團隊的具體問題，從而確保你們能更好地合作窥淆。
我喜歡關(guān)注開發(fā)者是否習慣于我的交付物，因為這決定了你使用哪款軟件來創(chuàng)建模型忧饭。
我見過太多設(shè)計師（包括我自己）完成設(shè)計后扛伍，被要求回去改為另外一種文件的格式。想想吧词裤，你好不容易完成了最終稿刺洒，充滿士氣地拿去開發(fā)，結(jié)果被打回來要求用另外的文件格式來交付設(shè)計物吼砂。
下面是幾個在開始設(shè)計前需要和開發(fā)團隊溝通的問題：
所有的資產(chǎn)如何準備逆航？
他們是喜歡你把圖切好，把所有的資產(chǎ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è)計的細節(jié)抬闷。
Avocode。它可以讓你從Photoshop和Sketch中導(dǎo)出色彩耕突，圖像資源笤成，字體，文本眷茁，CSS炕泳，大小和尺寸∩掀恚可以解決很多麻煩喊崖。
Invision:非常優(yōu)秀的快速原型工具，你可以在幾分鐘內(nèi)制作可交互的原型雇逞，并且適合團隊使用。
問題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的默認邊距要大。這不是什么好事情珍策。因為這個設(shè)計得重新編碼和配置托启，來解決這個本不應(yīng)該出現(xiàn)的問題。所以在設(shè)計前要明白網(wǎng)頁將使用哪個框架來構(gòu)建攘宙，并且知道它們在設(shè)計軟件中會是什么樣子屯耸。
除了網(wǎng)格系統(tǒng)，很多前端框架都有內(nèi)置的設(shè)計元素蹭劈，像按鈕疗绣，表單這些。如果想要修改這些默認樣式（我也推薦你自定義來適應(yīng)品牌調(diào)性）链方，一定要確保開發(fā)者知道這一點持痰。
基本上每一次我設(shè)計一個帶有特定顏色、寬度的表單是祟蚀，開發(fā)者最后還是使用了框架默認樣式工窍。都是因為我沒有溝通好。
永遠不要指望開發(fā)者注意到了你用了2像素的圓角來精細化按鈕前酿。他們可沒有被培訓說要注意這些患雏。但是他們可以很精準地按照指示行事。所以確保跟他們溝通好罢维。
一些現(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)境匹配的部件键兜，并使用它向你的團隊解釋你想實現(xiàn)的效果凤类，如果開發(fā)者愿意選擇實現(xiàn)它，那是最好不過了普气。但你最好不要直接發(fā)給他們一個代碼壓縮文件谜疤，然后就要求他們“在我們的產(chǎn)品里實現(xiàn)這個效果”。這就像一個客戶給你發(fā)了一堆100px的縮略圖现诀，然后要求你“把它們變成高清大圖”夷磕。這是很自以為是且居高臨下的態(tài)度。
號外：其實瀏覽器也是不平等的坐桩！
好吧，你可能也知道封锉，開發(fā)者們有多痛恨IE瀏覽器绵跷。
值得慶幸的是，整個設(shè)計開發(fā)的氛圍在變好成福。過去折磨開發(fā)者的瀏覽器在迅速縮減碾局。及時微軟已經(jīng)放棄了IE,現(xià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
你可以在這里查看這份清單的詳細版。
如果你發(fā)現(xiàn)你必須支持IE8或者舊版本的Firefox品擎，想想吧埋合，元素的外觀將不受影響，你所有的圓角萄传，陰影和動畫都將消失甚颂。
使用最新功能設(shè)計，同時又保證其在舊瀏覽器上有較好的可用性和視覺效果秀菱，被稱作漸進增強（progressive enhancement)振诬。在你起草時必須考慮到這一層次。
希望這些問題有助于讓你在設(shè)計過程的開端就與開發(fā)者形成良好的溝通衍菱。提前知道有哪些限制能夠幫助你更好地做出設(shè)計決策赶么，并且減輕后期開發(fā)成本。前期準備得越好脊串，項目后期就會越輕松辫呻。
在下一課，我們將學習一些問題和技巧琼锋，幫助你在設(shè)計過程中與開發(fā)者溝通
小結(jié)
我們希望以何種形式交付成果放闺？
-資產(chǎn)如何準備？
-我選擇的設(shè)計軟件會影響開發(fā)人員的工作嗎缕坎？
-最負責最終處理資產(chǎn)怖侦？
-我們要準備說明文檔嗎？
網(wǎng)站是由前端框架構(gòu)建的嗎谜叹？
-如果是匾寝，是哪一個框架？
-這個框架提供的外觀與我希望設(shè)計的外觀一致嗎叉谜？
-設(shè)置畫板時旗吁，尺寸，列數(shù)停局，斷點很钓，對齊等框架細節(jié)如何考慮？
-圖形元素長什么樣董栽？
-有現(xiàn)成的UI Kit可以用嗎码倦？
我需要了解有關(guān)開發(fā)環(huán)境的哪些要點？
-是哪種語言開發(fā)的锭碳？
-如果想要找到合適的部件袁稽，我需要如何設(shè)定搜索條件？
-最后向相關(guān)人員演示你想要的功能擒抛，但不要覺得它就應(yīng)該被開發(fā)出來放在那里推汽。
需要支持哪些瀏覽器补疑？
-基于支持舊版瀏覽器的需要，設(shè)計時有哪些限制歹撒？
-考慮漸進增強
在打開設(shè)計軟件前與開發(fā)團隊有一個良好的溝通莲组。哪些你不能控制的因素會影響到你的設(shè)計？幫助你和你的團隊獲得成功暖夭。
