經(jīng)過眾多Web2.0優(yōu)秀應(yīng)用的熏陶，互聯(lián)網(wǎng)用戶變得越來越挑剔，對易用性的要求越來越高。傳統(tǒng)意義上的“美工”已經(jīng)不能勝任用戶體驗設(shè)計的工作。產(chǎn)品遇到設(shè)計問題時的狀況通常是，工程師花了很大力氣做出來的各種強大功能是用戶不需要的，而用戶的一些簡單的核心需求卻得不到滿足。為了突破產(chǎn)品設(shè)計的瓶頸，有的公司請來了用戶體驗設(shè)計師，建立了自己的用戶體驗設(shè)計團隊，有的公司直接將產(chǎn)品的設(shè)計外包給專業(yè)的用戶體驗設(shè)計團隊。很快產(chǎn)品都有了好的設(shè)計，但是事情好像沒有那么簡單。

我們的信息架構(gòu)師Maklu童鞋最近在推上抱怨：“各種營銷活動的代號直接當(dāng)成業(yè)務(wù)放在了界面里，系統(tǒng)還有各種的錯誤，好設(shè)計頂個錘子，最后出來的還是一個樣子，還是那坨屎?！边@是他參與一個設(shè)計外包項目，并目睹項目上線之后發(fā)出的感概。

在為客戶提供設(shè)計外包服務(wù)的過程中，如何讓我們的設(shè)計更好的被實現(xiàn)，而不會出現(xiàn)白天鵝變丑小鴨的悲劇，是一直是困擾著我們的難題。經(jīng)歷了無數(shù)次的失敗、反思和總結(jié)的循環(huán)之后，我們積累了一些經(jīng)驗和心得，在這里與大家分享。

在設(shè)計落地的過程中，我們遇到的最普遍的問題是設(shè)計師與工程師之間缺乏溝通。設(shè)計師指責(zé)工程師沒有100%的還原設(shè)計，工程師則反擊設(shè)計師“站著說話不腰疼”，設(shè)計圖的效果無法實現(xiàn)或者成本太高。后來就發(fā)展成兩方各自為政、互不信任，最后系統(tǒng)開發(fā)出來完全走樣。為了避免這樣的問題，我們采取的方案是，工程師從一開始就參與到設(shè)計中來，設(shè)計師的每一個階段性成果物都需要跟工程師討論，確認技術(shù)上是否OK、成本是否適中。這樣既能避免產(chǎn)生天馬行空無法落地的設(shè)計，又能加深工程師對設(shè)計圖的理解。

另一個讓我們摳腦殼的問題是，工程師對設(shè)計圖的執(zhí)行力參差不齊。設(shè)計師在制作設(shè)計圖時對留白、字體大小、字體顏色這些細節(jié)都是嚴格控制的，然而大多數(shù)工程師在開發(fā)的時候并不會考慮的那么嚴謹和細致，有的工程師處理元素間的留白靠的是自由發(fā)揮，有的在處理文字時則是“跟著感覺走，差不多就行”，每個人的標準都不一樣，最后的結(jié)果就是同一個系統(tǒng)的頁面有不同的視覺效果，跟設(shè)計圖相比都有差距。為了解決這個問題，我們在設(shè)計成果交付物中引入了視覺規(guī)范文檔。視覺規(guī)范文檔的形式可以是ppt或者psd，里面嚴格規(guī)定了設(shè)計圖中的每一個細節(jié)，包括元素的高寬、留白，字體的大小、顏色等，是指導(dǎo)前端開發(fā)的標準文檔。

視覺規(guī)范

另外，在與客戶的開發(fā)人員合作的過程中，我們發(fā)現(xiàn)前端開發(fā)的效率普遍比較低。問題主要在于前端開發(fā)資源的重用性不高，沒有積累，前端開發(fā)人員之間缺乏協(xié)作和分享。典型的情況是，同一個前端組件在不同的頁面被開發(fā)了兩次，或者前任工程師在離職之后沒有留下文檔造成一些復(fù)雜的組件無法擴展和維護。為了幫助客戶解決這類問題，更順利的實現(xiàn)我們的設(shè)計，我們?yōu)椴煌捻椖拷⒘饲岸薝I組件庫，將項目中重用性高的復(fù)雜組件放到組件庫中，以demo加文檔的形式組織起來，讓前端開發(fā)資源能夠積累和分享。目前我們的UI庫還沒有開放，但是我們正在策劃一個前端UI組件開放平臺，大家可以在上面進行前端開發(fā)的協(xié)作、積累和分享，我們也將把兩年來積累的前端開發(fā)資源開放出來，相信很快就能與大家見面。

UI組件庫

有視覺規(guī)范這樣的起落架減震，有良好的溝通作為降落傘減速，還有前端組件庫這樣的反作用力引擎，這三重保險讓我們的優(yōu)秀設(shè)計在著陸的時候不至于臉蛋先著地，變成Maklu所說的一陀屎。

最后祝福劉曉波。

原文：http://mycolorway.com/blog/2010/10/11/land-design-safely/