從哪里開始：需要詢問開發(fā)者的問題

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

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

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

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

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

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

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

所有的資產如何準備？

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

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

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

PSD？

AI、EPS、PDF？

Sketch？

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

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

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

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

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

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

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

一些有用的軟件：

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

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

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

問題2：網(wǎng)頁是用前端框架構建的嗎？

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

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

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

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

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

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

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

一些現(xiàn)在流行的前端框架：

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

…還有許多別的。

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

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

問題3：開發(fā)環(huán)境是由哪些語言和庫構建的？它們有什么限制？

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

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

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

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

你能明白我的意思吧？

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

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

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

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

值得慶幸的是，整個設計開發(fā)的氛圍在變好。過去折磨開發(fā)者的瀏覽器在迅速縮減。及時微軟已經(jīng)放棄了IE,現(xiàn)在出貨的計算機都有全新的，有好的標準，但是知道你需要支持哪些舊版瀏覽器會很大程度上影響你的設計決策。下面是一些就瀏覽器不支持的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. 同時需要調節(jié)部分屬性來適應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

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

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

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

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

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

小結

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

-資產如何準備？

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

-最負責最終處理資產？

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

網(wǎng)站是由前端框架構建的嗎？

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

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

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

-圖形元素長什么樣？

-有現(xiàn)成的UI Kit可以用嗎？

我需要了解有關開發(fā)環(huán)境的哪些要點？

-是哪種語言開發(fā)的？

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

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

需要支持哪些瀏覽器？

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

-考慮漸進增強

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