作為開發人員，大家往往需要建立原型來證明自己的設計思路。其運作效果可能與預期相符，但用戶們驚恐的表情告訴我們其中存在問題，而整個效果演示也將因此變得毫無價值。在今天的文章中，我們將共同了解十項值得牢記的簡單指引與提示。

放松

大家可能聽過下面這句話：“好的設計在成功實現后應該隱于產品之內。只有糟糕的設計才會為用戶所察覺。” - Jared Spool

這一箴言適用于全部設計人員，但特別契合開發者的情況。構建演示的目標在于證明自己的思路，因此用戶需要關注的應當是呈現在其面前的任務，而非“設計”。

***點: 專注于簡單而非華麗，演示的作用并不是要炫技，而是傳達思想。

如果“看起來有些別扭”，則嘗試去掉一切視覺效果并重新回歸基礎藍圖。

不要使用凌亂的色調

糟糕的色彩搭配對于眼睛絕對是種折磨。事實上，色彩的選擇應該成為UI設計中的重要一環，甚至早在著手設計之前就做到心中有數。

這顯然不是我們希望的效果。

如果大家打算構建一套UI，請盡可能簡化設計效果；使用基本形狀、線條與色彩。在布局關系設定之后再添加更多細節，推進調整并最終找到理想的搭配成果。

第二點: 不妨在演示中使用單色設計，利用灰階漸變進行對象區分——除非有明確理由使用色彩來著重突出某些元素。

就算什么也不做，效果也比之前好得多。

第三點: 作為設計共識，盡可能避免使用高飽和度色彩（例如純色或者純白），這樣的效果會讓人們“難以直視”。

第四點: 如果使用黑白搭配，注意使用深灰與淺灰來幫助用戶保護視力。

認真思考如何運用黑色與灰色。正如Ian Storm Taylor在2012年給出的建議：

“陰影并非黑色”

Ian是在藝校課程上做出上述說明的——我也還記得，當初我的老師曾讓學生們從Georges Seurat的《拉格蘭德·加特島上的周日午后》畫作上找出純黑的點。

[[167026]]

答案是，其中根本不存在純黑的點。

第五點: 在為單色設計添加色彩時，注意一次只添加一種顏色。我們添加的每種色彩都可能影響用戶的注意力。不要使用高飽和色，但可以嘗試使用特定范圍內的不同色相，這也是最為安全的色彩選擇辦法。  

不要使用過于復雜的印刷元素

在演示與原型設計當中，請盡可能使用系統內的自帶字體。另外，請注意以下幾點：

第六點: ***不要使用serif（襯線）字體，這類字體的邊緣處理較為復雜，因此并非適合每種場景。

Serif字體往往能夠為設計成果加入個性元素，而且通常能夠讓文本易于閱讀。然而，其在UI設計中很少被用到，特別是在顯示面積有限的情況下。

注意:隨著屏幕分辨率的提升與清晰度的改善，具體取舍可以變得更加靈活。

Roboto & Noto

谷歌在其Android系統中采用了易于閱讀的Droid Sans字體，并在新版本中進一步調整為Roboto and Noto字體。蘋果在自家操作系統中使用的則是Neue Helvetica與San Francisco字體。火狐OS使用Fira Sans。注意到規律了嗎？皆為非serif字體。

第七點: 避免歧義。常見的易于混淆的組合包括O0、aeo、8B、Il1、5S、2Z、6b與9g，因此請認真測試以避免用戶面對顯示內容難以識別的問題。

Fira Sans字體（來自火狐OS）的清晰度就相當不錯。

注意留白

在視覺設計當中注意留白，這種寬敞的空間搭配有助于實現平衡感并降低用戶的閱讀強度。如果UI太過緊湊甚至擁擠，用戶往往會感到不適甚至很難有效處理任務。

在處理大量信息時，緊湊羅列數據往往更符合我們的設計直覺。但參考以下兩幅示例圖片，大家覺得哪幅效果更好？

標題與內容已經擠占了整個頁面

為各單元格及周邊保留合理的空間

第八點: 留白設計往往越多越好，我們可以通過填充、增加邊距、調整表格高度等方式實現留白。

第九點: 請保持間距一致。使用標準單位作為基準，例如以10px為基礎疊加空間。這種方式能夠帶來明確的節奏感與和諧效果。

 非serif字體，單色轉變搭配，充足的空間外加間距一致性。

讓生活更輕松

放心大膽地使用Bootstrap與Foundation等框架。沒錯，也許有人會說它們都是一個模子里印出來的，嚴重缺乏創造力。但對于原型設計而言，它們絕對值得一試。

到這里，我們已經探討了排版、色彩、間距、一致性以及表格等細節，遵循這些建議將讓大家的設計變得簡潔而有力。

第十點: 借鑒已有成果。大家可以直接使用現成的Bootstrap模板、Foundation模板、Material Design Lite、Skeleton、Pure CSS或者UIKit設計成果。另外，請在此基礎上隨意添加自己的風格，同時牢記前面提到的各項原則。

這些框架皆屬于綜合性方案，大家可以任選所需并借此將想法轉化為現實。

總結

今天的文章并非探討設計基礎，而是從概念層面應對原型設計中經常出現的種種問題。如果大家身為開發者并希望向客戶或團隊提交產品構建思路，那么上述原則應該能夠幫助各位回避陷阱并達成目標！

原文標題：10 Remedial Design Pointers for Developers

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】