世界級圖形設計(jì)大(dà)師(shī)Paul Rand（保羅。蘭德）曾經說過：“設計(jì)絕不是簡單的排列組合與簡單地再編輯，它應當充滿着價值和(hé)意義，去說明(míng)道(dào)理(lǐ)，去删繁就簡，去闡明(míng)演繹，去修飾美化，去贊美褒揚，使其有(yǒu)戲劇(jù)意味，讓人(rén)們信服你(nǐ)所言……”，由此可(kě)見，設計(jì)絕非輕而易舉之事，優秀的設計(jì)更是難上(shàng)加難。

今日小(xiǎo)編偶然發現一篇界面設計(jì)師(shī)Joshua Porter博客當中的一篇文章——《Principles of User Interface Design》，文章中列舉了20大(dà)UI設計(jì)原則，看完之後，覺得(de)挺受啓發，于是試着将其編譯，希望能夠給廣大(dà)設計(jì)師(shī)——特别是剛入門(mén)的初級設計(jì)師(shī)，提供較好的學習機會(huì)。全文編譯如下：

1.清晰度是首要工作(zuò)

清晰度是界面設計(jì)中，第一步也是最重要的工作(zuò)。要想你(nǐ)設計(jì)的界面有(yǒu)效并被人(rén)喜歡，首先必須讓用戶能夠識别出它？讓用戶知道(dào)為(wèi)什麽會(huì)使用它？比如當用戶使用時(shí)，能夠預料到發生(shēng)什麽，并成功的與它交互。有(yǒu)的界面設計(jì)得(de)不是太清晰，雖然能夠滿足用戶一時(shí)的需求，但(dàn)并非長久之計(jì)，而清晰的界面能夠吸引用戶不斷地重複使用。

2.界面是為(wèi)促進交互而存在的

界面的存在，促進了用戶和(hé)我們的世界之間(jiān)的互動。優秀的界面不但(dàn)能夠讓我們做(zuò)事有(yǒu)效率，還(hái)能夠激發、喚起和(hé)加強我們與這個(gè)世界的聯系。

3.保護和(hé)尊重用戶的注意力

我們在閱讀的時(shí)候，總是會(huì)有(yǒu)許多(duō)事物分散我們的注意力，使得(de)我們很(hěn)難集中注意力安靜地閱讀。因此，在進行(xíng)界面設計(jì)的時(shí)候，能夠吸引用戶的注意力是很(hěn)關鍵的，所以千萬不要将你(nǐ)應用的周圍設計(jì)得(de)亂七八糟分散人(rén)的注意力，謹記屏幕整潔能夠吸引注意力的重要性。如果你(nǐ)非要顯示廣告，那(nà)麽請(qǐng)在用戶閱讀完畢之後再顯示。尊重用戶的注意力，不僅讓用戶更快樂，而且你(nǐ)的廣告效果也會(huì)更佳。因此要想設計(jì)好的界面，保護和(hé)尊重用戶的注意力是先決條件。

4.讓界面處在用戶的掌控之中

人(rén)類往往對能夠掌控自己和(hé)周圍的環境感到很(hěn)舒心。不考慮用戶感受的軟件往往會(huì)讓這種舒适感消失，迫使用戶不得(de)不進入計(jì)劃外的交互，這會(huì)讓用戶很(hěn)不舒服。保證界面處在用戶的掌控之中，讓用戶自己決定系統狀态，稍加引導，我想你(nǐ)會(huì)達到你(nǐ)希望的目标。

5.直接操作(zuò)的感覺是最好的

當我們能夠直接操作(zuò)物體(tǐ)時(shí)，用戶的感覺是最棒的，但(dàn)這并不太容易實現，因為(wèi)在界面設計(jì)時(shí)，我們增加的圖标往往并不是必須的，比如我們過多(duō)的使用按鈕、圖形、選項、附件等等其他繁瑣的東西以便我們最終操縱UI元素而不是重要的事情。而最初的目标呢？就是希望簡化而能夠直接操縱……因此在進行(xíng)界面設計(jì)時(shí)，我們要盡可(kě)能多(duō)的了解一些(xiē)人(rén)類自然手勢。理(lǐ)想情況下，界面設計(jì)要簡潔，讓用戶有(yǒu)一個(gè)直接操作(zuò)的感覺。

6.每個(gè)屏幕需要一個(gè)主題

我們設計(jì)的每一個(gè)畫(huà)面都應該有(yǒu)單一的主題，這樣不僅能夠讓用戶使用到它真正的價值，也使得(de)上(shàng)手容易，使用起來(lái)也更方便，在必要的時(shí)候更容易進行(xíng)修改。如果一個(gè)屏幕支持兩個(gè)或兩個(gè)以上(shàng)的主題，立馬會(huì)讓整個(gè)界面看起來(lái)混亂不堪。正如文章應該有(yǒu)一個(gè)單一的主題以及強有(yǒu)力的論點，我們的界面設計(jì)也應該如此，這也是界面存在的理(lǐ)由。

7.勿讓次要動作(zuò)喧賓奪主

每個(gè)屏幕包含一個(gè)主要動作(zuò)的同時(shí)，可(kě)以有(yǒu)多(duō)個(gè)次要動作(zuò)，但(dàn)盡量不要讓它們喧賓奪主！文章的存在是為(wèi)了讓人(rén)們去閱讀它，并不是讓人(rén)們在Twitter上(shàng)面分享它。所以在設計(jì)界面的時(shí)候，盡量減弱次要動作(zuò)的視(shì)覺沖擊力，或者在主要動作(zuò)完成之後再顯示出來(lái)。

8.自然過渡

界面的交互都是環環相扣的，所以設計(jì)時(shí)，要深思熟慮地考慮到交互的下一步。考慮到下一步的交互是怎樣的，并且通(tōng)過設計(jì)将其實現。這就好比我們的日常談話(huà)，要為(wèi)深入交談提供話(huà)由。當用戶已經完成該做(zuò)的步驟，不要讓他們不知所措，給他們自然而然繼續下去的方法，以達成目标。

9.外觀追随功能（類似于形式追随功能）

人(rén)總是對符合期望的行(xíng)為(wèi)最感舒适。當其他人(rén)、動物、事物或者軟件的行(xíng)為(wèi)始終符合我們的期望時(shí)，我們會(huì)感到與之關系良好。這也是與人(rén)打交道(dào)的設計(jì)應該做(zuò)到的。在實踐中，這意味着用戶隻要看一眼就可(kě)以知道(dào)接下來(lái)将會(huì)有(yǒu)什麽的動作(zuò)發生(shēng)，如果它看上(shàng)去像個(gè)按鈕，那(nà)麽它就應該具備按鈕的功能。設計(jì)師(shī)不應該在基本的交互問題上(shàng)耍小(xiǎo)聰明(míng)，要在更高(gāo)層次的問題上(shàng)發揮創造力。

10.區(qū)分重點

如果屏幕元素各自的功能不同，那(nà)麽它們的外觀也理(lǐ)應不同。反之，如果功能相同或相近，那(nà)麽它們看起來(lái)就應該是一樣的。為(wèi)了保持一緻性，初級設計(jì)師(shī)往往對應該加以區(qū)分的元素采用相同的視(shì)覺處理(lǐ)效果，其實采用不同的視(shì)覺效果才是合适的。

11.強烈的視(shì)覺層次感

如果要讓屏幕的視(shì)覺元素具有(yǒu)清晰的浏覽次序，那(nà)麽應該通(tōng)過強烈的視(shì)覺層次感來(lái)實現。也就是說，如果用戶每次都按照相同的順序浏覽同樣的東西，視(shì)覺層次感不明(míng)顯的話(huà)，用戶不知道(dào)哪裏才是目光應當停留的重點，最終隻會(huì)讓用戶感到一團糟。在不斷變更設計(jì)的情況下，很(hěn)難保持明(míng)确的層次關系，因為(wèi)所有(yǒu)的元素層次關系都是相對的：如果所有(yǒu)的元素都突出顯示，最後就相當于沒有(yǒu)重點可(kě)言。如果要添加一個(gè)需要特别突出的元素，為(wèi)了再次實現明(míng)确的視(shì)覺層級，設計(jì)師(shī)可(kě)能需要重新考慮每一個(gè)元素的視(shì)覺重量。雖然多(duō)數(shù)人(rén)不會(huì)察覺到視(shì)覺層次，但(dàn)這是增強設計(jì)的最簡單的方法。

12.恰當的組織視(shì)覺元素，減輕用戶的認知負荷

正如注明(míng)設計(jì)師(shī)John Maeda在其著作(zuò)《Simplicity》中所言，恰當地組織視(shì)覺元素能夠化繁為(wèi)簡，幫助他人(rén)更加快速簡單地理(lǐ)解你(nǐ)的表達，比如內(nèi)容上(shàng)的包含關系。用方位和(hé)方向上(shàng)的組織可(kě)以自然地表現元素間(jiān)的關系。恰如其分地組織內(nèi)容可(kě)以減輕用戶的認知負荷，他們不必再琢磨元素間(jiān)的關系，因為(wèi)你(nǐ)已經表現出來(lái)了。不要迫使用戶做(zuò)出分辨，而是設計(jì)者用組織表現出來(lái)。不要迫使用戶自己去把問題搞明(míng)白，設計(jì)師(shī)應當直接在

13.色彩不是決定性的因素

物體(tǐ)的色彩會(huì)随光線改變而改變。豔陽高(gāo)照與夕陽西沉時(shí)，我們看到的景物會(huì)有(yǒu)很(hěn)大(dà)反差。換句話(huà)說，色彩很(hěn)容易被環境改變，因此，設計(jì)的時(shí)候不要将色彩視(shì)為(wèi)決定性因素。色彩可(kě)以醒目，作(zuò)為(wèi)引導，但(dàn)不應該是做(zuò)區(qū)别的唯一元素。在長篇閱讀或者長時(shí)間(jiān)面對電(diàn)腦(nǎo)屏幕的情況下，除了要強調的內(nèi)容，應采用相對暗淡或柔和(hé)的背景色。當然，視(shì)讀者而定，也可(kě)采用明(míng)亮的背景色。

14.循序展現

每個(gè)屏幕隻展現必需的內(nèi)容。如果用戶需要作(zuò)出決定，則展現足夠的信息供其選擇，他們會(huì)到在下一屏找到所需細節。避免過度闡釋或把所有(yǒu)一次展現，如果可(kě)能，将選擇放在下一屏以有(yǒu)步驟地展示信息。這會(huì)使你(nǐ)的界面交互更加清晰。

15.內(nèi)嵌“幫助”選項

在理(lǐ)想的用戶界面，“幫助”選項是不必要出現的，因為(wèi)用戶界面能夠有(yǒu)效地指引用戶學習。類似“下一步”實際上(shàng)就是在上(shàng)下文情境中內(nèi)嵌的“幫助”，并且隻在用戶需要的時(shí)候出現在适當的位置，其他時(shí)候都是隐藏的。

設計(jì)者的任務不是在用戶有(yǒu)需要的地方建立一個(gè)幫助系統，把發現用戶需要的義務推诿給用戶，讓用戶去在幫助系統中尋找他們問題的答(dá)案。而是應該确保用戶知道(dào)如何使用你(nǐ)提供的界面，讓用戶在界面中得(de)到指導并學習。

16.關鍵時(shí)刻：零狀态

用戶對一個(gè)界面的首次體(tǐ)驗是非常重要的，而這常常被設計(jì)師(shī)忽略。為(wèi)了更好的幫助用戶快速适應我們的設計(jì)，設計(jì)應該處于零狀态，也就是什麽都沒有(yǒu)發生(shēng)的狀态。但(dàn)這個(gè)狀态不是一塊空(kōng)白的畫(huà)布，它應該能夠為(wèi)用戶提供方向和(hé)指導，以此來(lái)幫助用戶快速适應設計(jì)。在初始狀态下的互動過程中會(huì)存在一些(xiē)摩擦，一旦用戶了解了各種規則，那(nà)将會(huì)有(yǒu)很(hěn)高(gāo)的機會(huì)獲得(de)成功。

17. 針對現有(yǒu)問題去完善界面

人(rén)們總是尋求各種方案去解決已經存在的問題，而不是潛在的或者未來(lái)的問題。所以，不要為(wèi)假設的問題設計(jì)界面，我們應該觀察現有(yǒu)的行(xíng)為(wèi)和(hé)設計(jì)，解決現存的問題。這确實不是件能夠讓人(rén)興奮的事情，但(dàn)卻是最有(yǒu)價值的事情，因為(wèi)一旦你(nǐ)的用戶界面愈加完善，會(huì)有(yǒu)更多(duō)的用戶願意使用你(nǐ)的界面。

18.優秀的設計(jì)是無形的

優秀的設計(jì)有(yǒu)個(gè)古怪的屬性，它通(tōng)常會(huì)被它的用戶所忽略。其中的一個(gè)原因是這個(gè)設計(jì)非常成功，以至于它的用戶專注于完成自己的目标而忽略了自己面對的界面，用戶順利達成自己的目标後，他們會(huì)很(hěn)滿意地退出界面。但(dàn)是作(zuò)為(wèi)設計(jì)師(shī)，這可(kě)能會(huì)有(yǒu)點不公平，當我們的設計(jì)很(hěn)優秀的時(shí)候，我們不會(huì)受到很(hěn)多(duō)阿谀奉承。當然，優秀的設計(jì)師(shī)不會(huì)去介意這些(xiē)，因為(wèi)他們心裏明(míng)白，滿意的用戶往往都是沉默的。

19.多(duō)領域學習，借鑒其他學科

視(shì)覺、平面設計(jì)、排版、文案、信息結構以及可(kě)視(shì)化，所有(yǒu)的這些(xiē)知識領域都應該是界面設計(jì)應該包含的內(nèi)容，設計(jì)師(shī)對這些(xiē)知識都應該有(yǒu)所涉獵或者比較專長。不要看不起這些(xiē)知識：要從中獲取許多(duō)值得(de)學習的東西，以此來(lái)提高(gāo)你(nǐ)的工作(zuò)能力。設計(jì)師(shī)的眼光要長遠，要能從看似無關的學科中學習，比如出版、編程、裝訂、滑闆、消防甚至空(kōng)手道(dào)。

20.界面的存在必須有(yǒu)所用途

在大(dà)多(duō)數(shù)設計(jì)領域，界面設計(jì)成功的要素就是有(yǒu)用戶使用它。打個(gè)比方，一把漂亮的椅子，雖然精美但(dàn)坐(zuò)着不舒服，那(nà)麽用戶不會(huì)選擇使用它，它也就是失敗的設計(jì)。因此，界面設計(jì)不僅僅是設計(jì)一個(gè)使用環境，還(hái)需要是創造一個(gè)值得(de)使用的藝術(shù)品。界面設計(jì)僅僅能夠滿足其設計(jì)者的虛榮心是不夠的：它必須要有(yǒu)用！

Via Bokardo

（Danice 供雷鋒網專稿，轉載請(qǐng)注明(míng)來(lái)自雷鋒網及作(zuò)者，并鏈回本頁）