@王希璽?：這篇譯文來自Invision團隊免費提供的系列課程：設計師如何與開發者合作。本文是第二期，一起來看。

本系列的第一篇請查看：設計師如何與開發者合作（一）：什么是為開發而設計？

從哪里開始：需要詢問開發者的問題

偉大的設計能夠在不破壞用戶體驗的情況下駕馭各方面的約束

在響應式設計的世界，約束來自方方面面：從現有用戶的瀏覽習慣到技術開發團隊的實力。

在這一篇，我們將討論在你開始設計之前可以咨詢開發團隊的具體問題，從而確保你們能更好地合作。

問題1：你希望以何種形式交付成果？

我喜歡關注開發者是否習慣于我的交付物，因為這決定了你使用哪款軟件來創建模型。

我見過太多設計師（包括我自己）完成設計后，被要求回去改為另外一種文件的格式。想想吧，你好不容易完成了最終稿，充滿士氣地拿去開發，結果被打回來要求用另外的文件格式來交付設計物。

下面是幾個在開始設計前需要和開發團隊溝通的問題：

所有的資產如何準備？

他們是喜歡你把圖切好，把所有的資產放進一個有層級的文件夾？

還是說他們希望拿到源文件，然后自己來提取圖像？

如果是后者，他們想哪種源文件？

PSD？

AI、EPS、PDF？

Sketch？

他們的軟件版本和我是否相同？（他們是否能打開這些文件？）

你需要如何組織和命名你的圖層來幫助他們快速找到他們需要的資產？

他們希望你從DW或WYSIWYG編輯器輸出HTML嗎？

如果現在你在用DW直接輸出HTML，一定要問清楚他們這是否是最佳方法。十有八九他們可能不喜歡這種方式。

就我的經驗，從圖形用戶界面直接生成的代碼往往缺乏組織且沒法用，這種辦法常常會同時拖累設計師和開發者，所以盡量避免通過圖形用戶界面產生代碼。在你使用這種辦法前一定要好好跟開發者討論一下

資產需要附帶說明文檔嗎？

你打算如何記錄那些在你遞交的模型中無法直接表示的元素？像顏色代碼，高度/寬度尺寸，字體，字體大小，間距，Alpha值，懸停效果，動畫和其他數據點等資料必須定義和記錄，而不是讓開發人員去猜測這是怎樣實現的。

一些有用的軟件：

Omnigraffle：輕松添加箭頭，符號和其他按鍵，來幫助解釋一個設計的細節。

Avocode：它可以讓你從Photoshop和Sketch中導出色彩，圖像資源，字體，文本，CSS，大小和尺寸。可以解決很多麻煩。

Invision：非常優秀的快速原型工具，你可以在幾分鐘內制作可交互的原型，并且適合團隊使用。

問題2：網頁是用前端框架構建的嗎？

現在有許多開發者和設計師在長期工作中總結出來的框架。了解它們，并利用它們來修正你的設計。

許多流行的框架如Bootstrap何the 960 Grid都采用了12行布局。為什么是12行布局？12是最容易被分解的數字，你可以在此基礎上設計12,6,4,3,2或者其他等距的行布局，這會讓你更快地做出設計決策。

根據這些框架來設定結構預先設定好尺寸。你需要了解你所使用框架的各種屬性：填充值，列寬。分割線寬度，媒介斷點值等等。

我曾經在設計過程中有過中斷，因為我在sketch中設置的5px邊距比Bootstrap的默認邊距要大。這不是什么好事情。因為這個設計得重新編碼和配置，來解決這個本不應該出現的問題。所以在設計前要明白網頁將使用哪個框架來構建，并且知道它們在設計軟件中會是什么樣子。

除了網格系統，很多前端框架都有內置的設計元素，像按鈕，表單這些。如果想要修改這些默認樣式（我也推薦你自定義來適應品牌調性），一定要確保開發者知道這一點。

基本上每一次我設計一個帶有特定顏色、寬度的表單是，開發者最后還是使用了框架默認樣式。都是因為我沒有溝通好。

永遠不要指望開發者注意到了你用了2像素的圓角來精細化按鈕。他們可沒有被培訓說要注意這些。但是他們可以很精準地按照指示行事。所以確保跟他們溝通好。

一些現在流行的前端框架：

• Bootstrap
• Foundation by Zurb
• Pure by Yahoo
• Skeleton
• Semantic UI

...還有許多別的。

在開始設計之前一定要搞清楚開發者偏好使用哪個框架。

大多數框架都配備了模板資源。你可以很容易地找到它們并在PS或Sketch中精確地匹配。這方便了所有人，所以盡情使用它們吧！

問題3：開發環境是由哪些語言和庫構建的？它們有什么限制？

就算你自己不知道怎么寫代碼，你可以找到一些優秀的插件。每個代碼片段都是現成的。它們使得在你的網站上添加功能變得比過去容易很多。美中不足的是，插件不可能適應所有的情形。

如果你想為自己的網站找一些已經構建好的部件，那是很正常的念頭，也很有幫助。但你在這么做這錢，你需要明白使用什么語言來搜索這些部件。

每一個插件或者小部件都是由它們的作者使用特定的編碼語言完成的。很多時候，某個部件的編寫語言與你的網站的開發環境是不匹配的。這會讓你的開發者大為惱火。

一個用Ruby構建的天氣應用程序不會在PHP上搭建的網頁上運作。一個WordPress插件沒法應用在用NET搭建的網站上。角度加載條可以用在Javascript中但不能用在Backbone.js中。

你能明白我的意思吧？

就算你找到了一個跟你的開發環境匹配的部件，并使用它向你的團隊解釋你想實現的效果，如果開發者愿意選擇實現它，那是最好不過了。但你最好不要直接發給他們一個代碼壓縮文件，然后就要求他們“在我們的產品里實現這個效果”。這就像一個客戶給你發了一堆100px的縮略圖，然后要求你“把它們變成高清大圖”。這是很自以為是且居高臨下的態度。

問題4：我們需要支持哪些瀏覽器？

號外：其實瀏覽器也是不平等的！

好吧，你可能也知道，開發者們有多痛恨IE瀏覽器。

值得慶幸的是，整個設計開發的氛圍在變好。過去折磨開發者的瀏覽器在迅速縮減。及時微軟已經放棄了IE,現在出貨的計算機都有全新的，有好的標準，但是知道你需要支持哪些舊版瀏覽器會很大程度上影響你的設計決策。下面是一些就瀏覽器不支持的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. 同時需要調節部分屬性來適應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)旋轉縮放變化: IE8, Firefox 2, 3
• Media Queries媒體查詢: IE8, Firefox 2, 3

你可以在這里（）查看這份清單的詳細版。

如果你發現你必須支持IE8或者舊版本的Firefox，想想吧，元素的外觀將不受影響，你所有的圓角，陰影和動畫都將消失。

使用最新功能設計，同時又保證其在舊瀏覽器上有較好的可用性和視覺效果，被稱作漸進增強（progressive enhancement)。在你起草時必須考慮到這一層次。

希望這些問題有助于讓你在設計過程的開端就與開發者形成良好的溝通。提前知道有哪些限制能夠幫助你更好地做出設計決策，并且減輕后期開發成本。前期準備得越好，項目后期就會越輕松。

在下一課，我們將學習一些問題和技巧，幫助你在設計過程中與開發者溝通

小結

我們希望以何種形式交付成果？

-資產如何準備？

-我選擇的設計軟件會影響開發人員的工作嗎？

-最負責最終處理資產？

-我們要準備說明文檔嗎？

網站是由前端框架構建的嗎？

-如果是，是哪一個框架？

-這個框架提供的外觀與我希望設計的外觀一致嗎？

-設置畫板時，尺寸，列數，斷點，對齊等框架細節如何考慮？

-圖形元素長什么樣？

-有現成的UI Kit可以用嗎？

我需要了解有關開發環境的哪些要點？

-是哪種語言開發的？

-如果想要找到合適的部件，我需要如何設定搜索條件？

-最后向相關人員演示你想要的功能，但不要覺得它就應該被開發出來放在那里。

需要支持哪些瀏覽器？

-基于支持舊版瀏覽器的需要，設計時有哪些限制？

-考慮漸進增強

在打開設計軟件前與開發團隊有一個良好的溝通。哪些你不能控制的因素會影響到你的設計？幫助你和你的團隊獲得成功。

「交互設計實戰好文」

1. 細節設計：《案例實戰！聊聊交互細節設計的四個小技巧》
2. 按鈕設計：《交互案例實戰！三個按鈕背后由小見大的交互思考》
3. 活動設計：《網易實戰！從一次活動設計聊聊交互設計師的3個階段》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com