由于UI設計原則很多而且微妙復雜，再加上自己本身對概念的理解也不是很充分，所以寫這篇博客專門復習一下，因為有很多感覺都是其他原則的一個具體案例，所以詳細程度是不一樣的

---

一、設計原則(UI design principle)

1. Anticipation(前瞻性)?

UI設計的前瞻性體現(xiàn)在預知上面?

這種預知來自于對用戶的歷史使用數(shù)據(jù)的分析或者是開發(fā)者專門進行的用戶使用調(diào)查，通過得到的信息，預知用戶來到界面之后想要做什么

使用人工智能來手機用戶對于界面的習慣和喜好的數(shù)據(jù)，然后利用這些數(shù)據(jù)進行評估，提前預測并回答用戶的需求，可以減少用戶的認知性決定

在具有前瞻性的UI中，用戶并不需要輸入新的信息，只是在元素上更具有選擇上面的前瞻性，從某種意義上來說，是開發(fā)者幫助用戶進行對于選項的篩選，代表用戶進行一定程度上的選擇

能夠體現(xiàn)前瞻性的元素有 ： 彈出框、地理位置、推薦、通知或者提醒等等

EXAMPLE：

1，我們在打開百度地圖的時候，想要選擇路線， 那么地圖可能通過分析你的歷史使用數(shù)據(jù)，自動給你提供Home這個選項，我們就可以直接點選，會更加方便

2. 在QQ音樂里面，會根據(jù)用戶的對于音樂的偏好，來推薦音樂和歌單

前瞻性的作用是 ：

減少認知負荷 ： 認知負荷是指用戶在做某件事情的時候需要付出的心理努力，前瞻性可以通過減少或者消除用戶必須做出的決定的數(shù)量來減少心理努力，用戶越是不需要考慮他們需要做什么來實現(xiàn)他們的目標，就越可能想要去實現(xiàn)它

簡化用戶接口 ： 屏幕上更少的選擇意味著界面的設計會更加干凈，更加直觀

節(jié)省時間 ： 確保用戶能夠更快地找到自己需要的東西或者做出決定

提高轉(zhuǎn)換率 ： 電子商務網(wǎng)站的個性化產(chǎn)品推薦為銷售提供機會，能夠創(chuàng)造更多收入

2. Communication/Feedback

communication的機制就是說，UI會對每個交互的工作進行一個結(jié)果的反饋，這個反饋是可見的，可以理解的， 說的直觀一點其實就是：當用戶進行完一個task，界面會給出一個提示，這個提示有可能是告訴你這個task是否完成，也有可能是用來引導你更接近于完成

常見的例子有 ：按鈕懸停效果、錯誤彈出、確認消息、完成動畫、檢查標記和顏色變化

EXAMPLE：?

1. 在Word文檔里面，我們?nèi)绻胍ミx擇菜單中的哪個功能(格式刷)，當我們把鼠標移到那里的時候，我們會發(fā)現(xiàn)格式刷所在的框顏色變深，這就是一種反饋，告訴你這個框里面的選項是可以點擊的，是可以選擇的

2. 在加載視頻的時候或者是游戲開始之前，可能出現(xiàn)一個進度條動畫，這也是反饋的一種很常見的樣式

3. 還有一種反饋的形式是提供一種real-time的視覺反饋，就比如說，我們看到文本中帶下劃線的藍色字體，我們就知道這是一個超鏈接

3. Consistency(一致性)

一致性就是說UI元素和元素對應的功能符合用戶的認知，也就是說，UI元素和元素功能之間的對應關系應該和已經(jīng)存在的，用戶已經(jīng)學習或者熟悉過的對應關系是一致的

如果這種對應關系在頁面之間是不一樣的，就會造成inconsistent

UI元素包括：

• 符號 ： 用來傳遞信息的圖標
• 代碼 : ?顏色、大小、重量、標記和其他可以表示成數(shù)據(jù)值或者是調(diào)用隱喻的圖形維度
• 單位 ： 用于特定的數(shù)值或者一組相關的屬性
• 格式 ： 文本的格式
• 術(shù)語 ： 在UI中描述對象、類、行為和事件
• 縮寫/快捷方式 ： 在術(shù)語中對功能或者控制詞的描述
• 排版 ： 在每個頁面、菜單、窗口或者臨時序列中的相對位置

inconsistency有兩種類型：

irregularity(不規(guī)律)：不同的元素擁有相同的功能和行為

contradiction(沖突) ： 相同的元素具有多種不同的功能

	irregularity	contradiction
symbol(符號)	在窗口A中，用水滴的圖案來表示查看水資源剩余量，但是在窗口B中用水龍頭的圖案來查看水資源剩余量	在窗口A中，用水滴的圖案來表示水資源的剩余量，但是在窗口B中，同樣用水滴的圖案表示使用的水資源總量
Codes(代碼)	在注冊賬戶的時候，我們有的時候會被要求密碼格式，一旦出錯，就會在下方出現(xiàn)一行字體提示 在窗口A中，字體的顏色是紅色，但是在窗口B中，字體的顏色是橙色	說的離譜一點，在一個交通信號燈模擬軟件中，用橙色來表示禁止通行，但是其實用戶心里面的對應關系是“紅色是禁止通行”
度量單位	在窗口A中，身高使用m為單位顯示的，但是在窗口B中，身高是用cm來表示的	None
數(shù)據(jù)格式	在窗口A中，身高使用x.xxx m來表示 在窗口B中，身高使用x.xxxxx m來表示	對于時間的表示： XX/XX/XX 在一個窗口里面是年月日的排序 在另一個窗口里是日月年的排序
術(shù)語	在窗口A中，確認按鈕上面是“confirm” 在窗口B中，確認按鈕上面是“OK”	在窗口A中，confirm代表對修改的確認，但是在窗口B中，confirm開始一個功能的執(zhí)行
縮寫/快捷方式	在頁面A中，control+ C是復制 在頁面B中，control + M是剪切	在頁面A中， IS表示information system， 在頁面B中， IS表示instruction slide

4. Controlled Autonomy(控制權(quán))

滿足用戶的控制欲也是很重要的，可以通過定期呈現(xiàn)系統(tǒng)的狀態(tài)、直接有效的操作、相似的環(huán)境、即使反饋、可預期的交互和結(jié)果、清晰的路徑來保持用戶的控制

一種很有效的方式就是：永遠允許用戶在界面的所有階段反向操作，也就是回溯

另一種方式是建立有效的導航機制和方便使用的界面，讓用戶不用在頁面上一點點尋找自己想要實現(xiàn)的功能，讓用戶的每一步都會得到預期的反饋，就能滿足這個原則

EXAMPLE：

1. 在編輯Word文檔的時候，如果我們打錯了字或者不小心刪掉了一大段內(nèi)容，我們可以點左上角的撤銷來返回前面的額操作

2.在進入淘寶界面的時候，圖標下面會提前告訴或者提示你這是什么功能，然后你就會得到一個印象，在腦海中形成界面的樣子，然后點擊之后就可以得到符合你預期的某種反饋，也就是有點像在考試之前就知道有什么題型，或者直接知道答案的樣子……

5.efficiency(效率)?

efficiency要求用戶可以在盡可能少的步驟之內(nèi)完成自己想完成的任務，同時也要求在設計中盡可能避免復雜冗余的元素，所以efficiency總是和simplicity有千絲萬縷的聯(lián)系?

simplicity要求在用戶完成任務的過程中盡可能減少用戶的認知負擔

也就是說，efficiency要求盡可能縮減，精化過程，通過“更少”來得到“更多”

首先的一個標準就是：簡單的接口應該對用戶是透明的，應該避免依稀復雜的操作，同時，使用的語言描述也應該比較簡潔清晰

其次 ： 每個屏幕應該只有一個主要的核心關注區(qū)，也就是只有一個焦點，或者說C位也可以，這就要求我們把主要的動作放在前面和中間，把次要的動作移到更深的位置，或者給他們更輕的視覺重量和適當?shù)呐虐?/p>

最后是clarity，在用戶完成任務的每一步，保證他們只能看到絕對必要的動作

EXAMPLE：

1.在進行一些功能，比如說切換頁面的時候，盡可能用一個動作一個圖標完成，越簡單越好

2.將頁面的名稱，文章的標題放在最顯眼的位置

6.focus(焦點)?

這個principle強調(diào)的是 ：一個華麗的用戶界面遠遠不如一個有用的用戶界面

每一個UI元素都應該有它存在的目的，同時，它能夠?qū)φ麄€產(chǎn)品起到積極的輔助作用，幫助頁面更好地向用戶提供幫助

UI中只能包括對可用性也就是符合efficiency要求的元素，盡量不要使用沒有關聯(lián)的，出挑的顏色，元素或者按鈕，不要在邊框上亂放一些容易分散用戶注意力的元素或者是材料

EXAMPLE：

在網(wǎng)頁提供的文章結(jié)束之后，在最底部顯示廣告

7. Fitt's Law

這個定律的基本內(nèi)容是 ：越大越近的對象越容易交互

從UI設計的角度上，用戶的鼠標從一個點A到達另一個點B的時候， AB之間越近，交互會越輕松，如果想要增大AB之間的距離，那么B的體積應該要隨之增大來保證原來的輕松程度

這個定律同樣可以用來提高efficiency

EXAMPLE：

在淘寶上，或者某些購物網(wǎng)站上，“下單”這個icon總是和商品的圖片等概述信息離得不遠

8. human interface objects?

現(xiàn)在已經(jīng)開發(fā)出了一個巨大的可以重用的人機界面對象庫

人機界面對象就是屏幕上可見的對象和圖標，可以被用戶使用，來進行某種動作或者是功能

9. Latency reduction

APP應該在某種程度上使用多任務處理，讓用戶繼續(xù)工作

就是類似于流水線一樣，一部分沒有影響的程序可以慢慢進行，先讓用戶去下一步

10.learnability?

?learnability 就是說：界面應該容易使用，同時容易記憶，用戶的記憶負擔小

這個原則可以通過讓界面變得更加直觀來實現(xiàn) ： 直觀的意思就是清晰和一致(clear and consistent)，所以這個通常和consistency是共生的

再一種途徑就是，我們可以通過將引導用戶的線索盡可能設置成現(xiàn)實生活中的物體，這樣用戶的學習能力也會增強

11. maintain work product integrity

說白了就是自動保存，保證已經(jīng)存在的狀態(tài)不會因為一些意料之外的事情清空

12. readability

?可讀性其實是clarity(也就是efficiency)的一個衍生，也算是一個必要條件(?)

會影響可讀性的因素有：

背景顏色 ： 背景顏色不要分散用戶的注意力，不要太過刺激出挑

視覺層次 ： 調(diào)整大小，強調(diào)最重要的視覺元素，讓它能夠被用戶先看到，我們把主要的動作放在前面和中間，把次要的動作移到更深的位置，或者給他們更輕的視覺重量和適當?shù)呐虐?/li>

留白 ： 適當留白，強調(diào)重點內(nèi)容

文本 ： 排版

字體大小 ：不同的網(wǎng)站和應用需要的字體大小是不一樣的，必須說給老年人看的就應該字體稍微大一些

13. track state

要讓用戶隨時知道自己進行到了哪一步，可以用標題等來提示，感覺應該是control autonomy里面衍生出來的內(nèi)容

?

?14. visible navigation

功能導航應該放在所有頁面的同一個位置，這也是consistency、anticipation的要求?

總結(jié)

以上是生活随笔為你收集整理的软件工程·UI设计原则专题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。