圖形設計有4個投之四海皆準的基本準則：對比、重復、對齊和近似。它們可以指導你完成引人注目的設計，而我認為它們在設計用戶界面時也很（而且必須）受用。這篇文章將告訴你如何去用。不管怎樣，我喜歡這個縮寫！（crap原意是排泄物，作者有調侃的意思。本文題目直譯也很orz，所以換了個文雅點的說法--譯者著）

對比
在設計的時候要避免看起來類似（與相似定義不同）；如果兩個元素不完全一樣那就該好好的區(qū)分一下。別讓你的標題用12pt的Arial然后正文用10pt的Arial--它們看起來太過類似而不醒目了。你可以用很多辦法來制造對比效果，比如： 不同的字體
不同的字號
顏色和背景
邊框
區(qū)別的對齊方式
空白
我們的眼睛喜歡對比，它幫助我們把所面對的信息進行優(yōu)先級的區(qū)分和分類。那么我們該怎么把對比運用到改善可用性上呢？

強調主要的交互
使用對比來強調最常見或最可能的界面交互并且減少次級選擇的分量。

 
圖1
圖1是一個很好的對比運用。通過減輕Cancel（取消）行為的視覺分量，重心被放到了OK（確認）按鈕上了。這樣使得取消按鈕不那么突出從而不太容易被匆忙間錯誤的點擊到。

高亮重要提示
對比可以被用來高亮需要引起注意的重要提示。例如，當顯示一項錯誤信息時即刻的突出是很重要的，不然用戶可能沒看見他們出了個錯誤繼而以為是什么地方壞掉了。

 
圖2

圖2是使用Ruby On Rails編寫網(wǎng)絡應用時默認的錯誤信息顯示。這個鮮艷的紅盒子跳離出其他的頁面讓用戶毫不懷疑他們需要在繼續(xù)之前修正一些東西。表格內含有錯誤的區(qū)域也被勾了紅框從而增加了與其他可接受區(qū)域的對比。

組內關聯(lián)元素
對比也可以于讓相關元素組合起來而區(qū)分其他元素。

圖3

圖3是WordPress里的發(fā)布控制。注意是如何運用背景顏色的對比把一串存儲、發(fā)布和刪除文章的動作組合起來的。為WordPress的界面設計師使用對比來減少“刪除文章”的視覺分量加分！

重復
重 復視覺元素應貫穿整個設計。重復為原本可能會被視成獨立的事物創(chuàng)造了一致和整齊。在可用性范疇的重復最根本就是簡單的“保持一致性”。如果你在一個地方使 用某種交互來達到特定的目的，確保你重復運用到別的地方以保持內部的一致。如果你的系統(tǒng)里沒有做到內部一致，會給人整個項目是拼接到一起且沒有一個清晰的導引愿景的印象。所以確保開發(fā)系統(tǒng)中不同部分的團隊成員保持聯(lián)系，或者指派某個人負責維持所有界面的一致性是很重要的。

一致性可以改善產(chǎn)品的可學習性。人們非常善于認識他們已經(jīng)見過的事物，而且會有信心的預計他們的行為會導致的結果。利用這一點，可以通過允許他們應用他們已知的事物來加速對整個系統(tǒng)的學習。

一致性并不局限于你的產(chǎn)品之內。重復已有的慣例能達到外部的一致。例如如果你正在寫一個Mac應用，這是在利用現(xiàn)有技術而且在遵循那個平臺的慣例。

谷歌網(wǎng)頁搜索


谷歌地圖搜索


谷歌產(chǎn)品搜索

這些谷歌系列產(chǎn)品中的搜索的界面保持一致可以讓用戶倚靠他們已有的如何使用該系統(tǒng)，它會如何反應的知識。

對齊
對齊可能是4個準則里最顯而易見的了；即按照水平或者垂直的邊線（或中軸線）放置元素。設計里任何一個元素都不該被隨機的放置在頁面里，它應該和頁面其他元素有所聯(lián)系從而創(chuàng)造出一種統(tǒng)一和凝聚感。

對齊可被用作貫穿一項設計中的指導；比如安排從表格中的區(qū)域到每列元素的擺放順序。用戶會很自然的垂直向下瀏覽表格，但如果他們碰到包含不止一個元素的一行時，他們會在繼續(xù)垂直瀏覽之前水平瀏覽。

概括起來，除非你把注意力引到一個特別的元素上（通過加強空間上的對比），務必使你頁面的元素為了保證一個清晰的閱讀順序而進行過整潔的對齊。

圖4

圖4是火狐瀏覽器3里打印的對話框。注意這些左邊一溜下來的標簽是如何右對齊到中間那列冒號，以及控制項是如何左對齊的。這樣創(chuàng)建了標簽和相應控制間的一種聯(lián)系。那列冒號引導眼睛垂直向下瀏覽頁面，而不只一個的控制項出現(xiàn)在同一行引導了你的眼睛進行水平方向的瀏覽。

近似
相關的項目應該彼此接近。相關的控制組合到一起能幫助組織界面。靠到一起的控制項會被視為比彼此距離較遠的更相關。因為相關的項目可以創(chuàng)造出一個單獨的視覺單元，所以你的界面會被視為是好些相關的單元組合在一起而不是含有大量獨立控制的一個滿滿當當?shù)捻撁妗?/P>

圖5

圖5是iTunes界面的左側欄。播放控制被組合在一起可以視為一個獨立的視覺單元。媒體庫、商店還有播放列表這些元素以三個不同的組包含了它們各自的子元素，但是它們看起來和彼此很類似使得這個工具條可以被視為一個相互關聯(lián)的整體。

對比、重復、對齊和相似是改善界面外觀和可用性的美好而簡單的方法。所以下一次當你設計一個用戶界面的時候，找找你能讓它更CRAP的方法！

原文：How to make your user interface CRAP

翻譯：UCD翻譯小組，Torry