UI就是User Interface(用戶界面)，UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。一般我們所說(shuō)的UI設(shè)計(jì)多指UI視覺(jué)設(shè)計(jì)，主要負(fù)責(zé)APP、Web、H5等頁(yè)面的色彩、布局、icon、字體方面的設(shè)計(jì)工作。

以上是摘自百度對(duì)UI設(shè)計(jì)的解釋，我們?cè)谶@里展開(kāi)幾個(gè)問(wèn)題來(lái)繼續(xù)闡述用戶界面設(shè)計(jì)：

1.什么是用戶界面？

2.什么因素能成就一個(gè)偉大的用戶界面？

3.界面設(shè)計(jì)中的主要元素

1.什么是用戶界面設(shè)計(jì)？

用戶界面設(shè)計(jì)并不僅僅考慮“標(biāo)題的大小”、“顏色的搭配”或“一個(gè)按鈕的擺放”，更重要的是考慮頁(yè)面跟用戶的互動(dòng)，這意味著，用戶界面不僅要做出好看的外觀，還要做出好用的產(chǎn)品。

大家不妨用產(chǎn)品的思維去思考用戶界面：

• 一個(gè)特殊的頁(yè)面，是否需要使用按鈕？
• 這個(gè)按鈕需要如何設(shè)計(jì)，才能讓用戶預(yù)先知道點(diǎn)擊之后出現(xiàn)的反饋？
• 如何設(shè)計(jì)界面，才能引導(dǎo)用戶輕松達(dá)到操作目的？

所以： 界面即產(chǎn)品。

2.什么因素能成就一個(gè)偉大的用戶界面？

1. 清晰
   通過(guò)使用文字、流程圖、層級(jí)圖、圖標(biāo)等元素，避免用戶對(duì)界面的模糊認(rèn)識(shí)。清晰的界面不需要使用手冊(cè)，也能確保用戶在使用過(guò)程中減少犯錯(cuò)。

2. 簡(jiǎn)潔
   為了讓界面清晰，可能會(huì)加上浮動(dòng)框說(shuō)明或標(biāo)簽提示，導(dǎo)致界面臃腫，因此要讓界面清晰的同時(shí)考慮界面簡(jiǎn)潔。

3. 熟悉
   用戶在第一次使用界面時(shí)，仍然能發(fā)現(xiàn)某些元素是他們所熟知的。在設(shè)計(jì)中，使用一些現(xiàn)實(shí)生活中公認(rèn)的意象能夠更好地幫助用戶理解。例如現(xiàn)在比較流行的抽屜式導(dǎo)航借鑒的就是現(xiàn)實(shí)中的抽屜，將最主要的信息顯示在界面上，而將非核心的信息隱藏，需要的時(shí)候往右一滑，打開(kāi)抽屜。
   

4. 響應(yīng)性

   • 響應(yīng)速度，一個(gè)良好的界面不應(yīng)該讓人感覺(jué)反應(yīng)遲緩。
   • 信息反饋，界面應(yīng)該提醒用戶發(fā)生了什么，請(qǐng)求是否被成功處理。

5. 一致性
   用戶學(xué)會(huì)了界面中某部分的操作，他很快就能知道如何在其他地方或其他特性上進(jìn)行操作，所以保持界面的一致性可以讓用戶識(shí)別出使用的模式。

6. 美學(xué)性
   有一個(gè)好看的界面會(huì)讓用戶工作起來(lái)很開(kāi)心。

7. 高效性
   一個(gè)偉大的界面應(yīng)當(dāng)通過(guò)快捷菜單或良好的設(shè)計(jì)來(lái)幫助用戶提高工作效率。

8. 容錯(cuò)性
   用戶操作界面的時(shí)候難免會(huì)犯錯(cuò)，是否提供撤銷？刪除的文件能否恢復(fù)？一個(gè)好的界面應(yīng)該為用戶提高犯錯(cuò)后補(bǔ)救的方法。

小結(jié)：每個(gè)特性都相互影響，增加的元素越多，用戶在使用上所花的努力就越大。當(dāng)然，反之亦然；沒(méi)有足夠的幫助和支持，用戶會(huì)茫然不知所措。所以要想設(shè)計(jì)既簡(jiǎn)潔、優(yōu)雅、又清晰、一致的用戶界面，要綜合考量各個(gè)因素的作用。

3.界面設(shè)計(jì)中的主要元素

1.布局和定位
布局規(guī)定了界面中所有可視元素的結(jié)構(gòu)。
通過(guò)元素的距離，可以確定元素之間的層級(jí)和相互關(guān)系。

知乎主頁(yè)頭部的元素通過(guò)距離劃分為logo區(qū)域+導(dǎo)航及搜索區(qū)域+消息及設(shè)置區(qū)域，層級(jí)相同的元素一般可以放在一起展示，增加了頁(yè)面的一致性

2.形狀和尺寸
形狀用來(lái)區(qū)分元素，例如輸入框和按鈕的區(qū)別。
尺寸用來(lái)表示重要性，元素尺寸越大越顯眼，也就越重要。把經(jīng)常使用的按鈕做大，不僅用戶點(diǎn)擊的時(shí)候更容易，同時(shí)提高界面的效率。

一般登錄按鈕尺寸都很大，除了引導(dǎo)下一步操作，還提升了操作的效率。

3.顏色
不同顏色表示不同的意義。例如紅色表示錯(cuò)誤信息，綠色表示操作成功或繼續(xù)下一步的信號(hào)。

• 注意：
  不同文化中顏色的意義不同，得確保用戶能夠識(shí)別界面所選顏色的含義；
  通過(guò)改變形狀和材質(zhì)來(lái)避免紅綠色盲對(duì)顏色認(rèn)知的缺憾。

4.對(duì)比
一個(gè)元素周圍的黑暗或者明亮將會(huì)對(duì)元素在界面上的可用性產(chǎn)生影響。白底黑字高對(duì)比度，易于閱讀。調(diào)低元素的對(duì)比度，可以將它們?nèi)谌氲奖尘爱?dāng)中，使元素的展示主次分明。

5.材質(zhì)
改變?cè)氐牟馁|(zhì)，可以增加用戶對(duì)元素的認(rèn)知，更明白元素本身表達(dá)的含義。