從用戶體驗(yàn)，到產(chǎn)品設(shè)計(jì)的四大原則，希望通過這篇文章，能給各位一些啟發(fā)與共鳴。

1.可用性第一定律：別讓用戶思考

關(guān)于可用性的定義：

有用：能否幫助人們完成一些必需的事情？

可學(xué)習(xí)：人們能否明白如何使用它？ 

可記憶：人們每次使用的時(shí)候，是否都需要重新學(xué)習(xí)？ 

有效：它們能完成任務(wù)嗎？ 

：它們是否只需花費(fèi)適當(dāng)?shù)臅r(shí)間和努力就能完成任務(wù)？ 

合乎期望：是人們想要的嗎？ 

令人愉悅：人們使用的時(shí)候覺得有意思甚至很好玩么？

可用性第一定律：別讓用戶思考

1.別讓用戶思考 > 保持一致 > 重要的內(nèi)容要放在兩次點(diǎn)擊之內(nèi) > 采用用戶語言； 

2.用戶在使用產(chǎn)品時(shí)，對(duì)名詞有疑問、按鈕不明確，都會(huì)影響使用，會(huì)猶豫；

原則：如果做不到讓一個(gè)頁(yè)面不言而喻，那么至少應(yīng)該讓它自我解釋；

1.不用用戶思考的頁(yè)面是不言而喻的，如果遇到復(fù)雜頁(yè)面，無法做到不言而喻時(shí)，至少也要讓它自我解釋。 

通過頁(yè)面元素的外觀（如尺寸、顏色以及布局），精心選擇的命名等，創(chuàng)造出接近不言而喻的效果——就是盡量做到自我解釋； 

2.即不能讓用戶對(duì)功能進(jìn)行糾結(jié)，或是使用戶找不到正確的功能位置； 

在用戶使用產(chǎn)品時(shí)產(chǎn)生的每一個(gè)問號(hào)，都會(huì)加重用戶的認(rèn)知負(fù)擔(dān)，把用戶的注意力從完成任務(wù)上拉開，也許干擾很輕微，可一旦累積起來，就會(huì)使用戶產(chǎn)生壓力； 

3.為什么要?jiǎng)?chuàng)建不言而喻的頁(yè)面？

因?yàn)榇蠖鄶?shù)人會(huì)花上比我們想象中少得多的時(shí)間來瀏覽我們?cè)O(shè)計(jì)的網(wǎng)頁(yè)。 

（就像你上淘寶，那種封面做的很爛的，你會(huì)買么？好的體驗(yàn)就跟好看的東西是一個(gè)道理）

如下： 

1.用戶在使用產(chǎn)品時(shí)，經(jīng)常會(huì)對(duì)操作的對(duì)象產(chǎn)生疑問；比如彈框的選擇，頁(yè)面的布局，都會(huì)讓用戶不知道怎么操作，從而導(dǎo)致用戶體驗(yàn)非常差（不信自己去試試，如果沒感覺，就一直試到感覺很差為止，這樣就對(duì)了）。

向用戶解釋輸入框的條件，不要讓用戶猜忌；使頁(yè)面進(jìn)行自我解釋。

2.關(guān)于用戶是如何使用產(chǎn)品的兩個(gè)點(diǎn)

用戶思維：滿意策略

1.用戶不會(huì)去細(xì)讀所有內(nèi)容，而是選擇第一個(gè)看到的感興趣的部分，其余的就放棄了； 
這取決于用戶的時(shí)間以及事件的重要程度，用戶不喜歡深入研究，只要能正常使用就行。 

用戶不是追根究底，而是勉強(qiáng)應(yīng)付

1.這個(gè)產(chǎn)品的其他功能對(duì)用戶來說并不重要，他不會(huì)花費(fèi)太多時(shí)間去研究新產(chǎn)品，只是找到自己能用的，并一直用下去； 

如下： 
用戶在使用支付寶的功能時(shí)，不可能對(duì)所有功能都進(jìn)行瀏覽并去了解；有一個(gè)能完成自己目的的功能，用戶就滿足了。 

3.學(xué)會(huì)運(yùn)用設(shè)計(jì)習(xí)慣法則

大膽嘗試習(xí)慣用法的運(yùn)用

1.如果你準(zhǔn)備創(chuàng)新，而沒有更好的創(chuàng)新想法，就盡量保留用戶的習(xí)慣用法，慢慢再去替換； 
2.同時(shí)在設(shè)計(jì)頁(yè)面時(shí)，不要打破一致性，除非能讓頁(yè)面更簡(jiǎn)潔； 

如下： 
支付寶網(wǎng)頁(yè)端的優(yōu)化，為了保留用戶的操作習(xí)慣，只是優(yōu)化了首頁(yè)的UI，并沒有對(duì)功能流程頁(yè)面進(jìn)行更改； 

建立有效的視覺層次

1.有效的視覺層次可以對(duì)頁(yè)面的內(nèi)容進(jìn)行組織且區(qū)分優(yōu)先級(jí)，降低用戶的使用壓力； 
2.突出重要部分，整合相同層級(jí)內(nèi)容； 
3.對(duì)同一層級(jí)的內(nèi)容要做相同效果處理； 
4.明顯區(qū)分不同層級(jí)內(nèi)容； 

如下： 
上面明顯是卡信息，下面部分是用戶信息，間距也是一種處理層級(jí)的方式。 

4.幫助用戶去做選擇

讓用戶做選擇時(shí)，不必去思考

1.在用戶需要做選擇時(shí)，不要讓其進(jìn)行思考，只需要提供簡(jiǎn)明的信息提供幫助即可； 
當(dāng)用戶對(duì)頁(yè)面產(chǎn)生“我該如何進(jìn)行選擇”的想法時(shí)，就會(huì)對(duì)產(chǎn)品望而卻步。 

如下： 
需要用戶提供反饋或信息時(shí)，不是讓用戶去輸入，而是去選擇； 
一來用戶輸入的信息不一定準(zhǔn)確； 
二來選擇可以讓用戶更好的總結(jié)； 

5.怎么設(shè)計(jì)產(chǎn)品的提示

簡(jiǎn)化文案，讓用戶看得更輕松

1.在設(shè)計(jì)頁(yè)面的過程中，盡量消減多余的文字，可避免用戶產(chǎn)生疲倦感； 
2.簡(jiǎn)明的信息更能讓用戶從中發(fā)現(xiàn)自己想要關(guān)注的點(diǎn)。 

及時(shí)，要在用戶需要的時(shí)候出現(xiàn)

如下： 
如登錄/注冊(cè)時(shí)的實(shí)時(shí)校驗(yàn)，都要及時(shí)讓用戶知道并方便用戶修改； 

設(shè)置合理的格式，保證一定要讓用戶注意到。

6.導(dǎo)航設(shè)計(jì)

導(dǎo)航法則：明確、簡(jiǎn)單、一致

1.每個(gè)頁(yè)面都必須呈現(xiàn)和導(dǎo)航保持一致的頁(yè)面名稱； 

導(dǎo)航的兩個(gè)主要用途：幫助我們找到想要的任何東西和告訴我們現(xiàn)在身在何處；

1.在網(wǎng)頁(yè)頁(yè)面中必須呈現(xiàn)出回到首頁(yè)的站點(diǎn)ID； 
復(fù)雜的頁(yè)面要帶有“面包屑”或標(biāo)簽等功能，提醒用戶身在何處；面包屑對(duì)于大型網(wǎng)站來說，還是非常必要的； 
如下： 
點(diǎn)擊站點(diǎn)ID知乎，就會(huì)回到首頁(yè)； 

淘寶的面包屑功能做的還是相對(duì)不錯(cuò)的，可根據(jù)用戶的意愿來選擇頁(yè)面，同時(shí)用戶還可以對(duì)其進(jìn)行取消；

用戶使用網(wǎng)站的兩件事：瀏覽和搜索，盡管不同網(wǎng)站側(cè)重不同，但最好同時(shí)呈現(xiàn)給用戶

如下： 
新聞一般主要查看實(shí)時(shí)的消息，看過就過了，但是騰訊依然給出搜索框，讓用戶去搜索之前的新聞； 

7.主頁(yè)的重要性

主頁(yè)在最初的幾秒會(huì)讓用戶決定是否去使用這個(gè)產(chǎn)品

1.對(duì)于展示在首頁(yè)的信息，必須明確且簡(jiǎn)潔； 
2.簡(jiǎn)單來說就是，當(dāng)用戶看到首頁(yè)，就該清楚這個(gè)產(chǎn)品的核心是什么。 
     2.1 這是什么網(wǎng)站？ 
     2.2 網(wǎng)站上有些什么？ 
     2.3 我能在這里做什么？ 
     2.4 為什么我要在這個(gè)網(wǎng)站，而不是別的？ 

8.聽聽別人的看法

不要無謂的跟其他職位的人員爭(zhēng)執(zhí)，從體驗(yàn)觸發(fā)

1.每個(gè)人都有自己的信仰，不要試圖去說服別人接受產(chǎn)品功能；而要用數(shù)據(jù)說話。 

9.可用性測(cè)試

測(cè)試流程： 
簡(jiǎn)單介紹測(cè)試如何進(jìn)行（約4分鐘） 
了解測(cè)試者，比如他們是不是計(jì)算機(jī)高手，有沒有玩過類似網(wǎng)站（約2分鐘） 
主頁(yè)觀光，觀察用戶在主頁(yè)看到了什么，如何操作（約3分鐘） 
任務(wù)測(cè)試，這是測(cè)試的核心部分，讓測(cè)試者執(zhí)行一些列任務(wù)，并觀察他們遇到的問題（約35分鐘） 

可用性測(cè)試可以發(fā)現(xiàn)產(chǎn)品的弊端

1.每個(gè)月都應(yīng)該對(duì)產(chǎn)品做一次可用性測(cè)試； 
2.可用性測(cè)試不需要特定的人，任何人都可以，并且要有人進(jìn)行觀察； 
3.測(cè)試的目的不是在于尋找所有的問題，而是找出最重要的 BUG，并進(jìn)行修復(fù)，因?yàn)榈芷诤芏蹋?nbsp;

和團(tuán)隊(duì)進(jìn)行評(píng)審會(huì)議，決定優(yōu)先修復(fù)的 BUG

1.在問題列表中選擇 10 個(gè)最嚴(yán)重的問題（這里的嚴(yán)重視情況而定，可能是影響用戶使用的，也可能是小問題）； 
2.對(duì)這 10 個(gè)問題進(jìn)行優(yōu)先排序； 
3.多用刪除發(fā)，少用加法； 
4.不要太注重用戶對(duì)新功能的需求； 

10.移動(dòng)設(shè)備的到來

產(chǎn)品應(yīng)該加入快樂

管理屏幕空間的挑戰(zhàn)不應(yīng)該以犧牲可用性為代價(jià)； 
提醒等信息，該出現(xiàn)的時(shí)候一定要明確； 
產(chǎn)品應(yīng)該讓用戶產(chǎn)生可用性記憶，讓他們能接受產(chǎn)品。 

11.可用性的價(jià)值

尊重用戶，考慮到產(chǎn)品的各個(gè)因素對(duì)用戶產(chǎn)生的影響

1.不要對(duì)用戶隱藏信息，會(huì)讓用戶感到失望； 
2.想要提高用戶好感，就必須減少操作步驟，并且提供協(xié)助，能更讓用戶感覺到安全感。 
3.不要因?yàn)橛脩舻牟僮鳑]有按照產(chǎn)品設(shè)置的方式而懲罰用戶； 
4.網(wǎng)站看著要專業(yè)，才能抓住用戶的眼球； 
5.不要詢問太多用戶的私人信息； 


提高用戶好感的幾種方式

1.告訴用戶他想知道的信息； 
2.盡量減少步驟； 
3.為用戶提供協(xié)助，如在線客服等； 

12.可訪問性

提高產(chǎn)品的可訪問性

在原有基礎(chǔ)上，提高產(chǎn)品的可訪問性，可以讓用戶更好的體驗(yàn)產(chǎn)品； 
每一次迭代，都要優(yōu)化原有產(chǎn)品的功能，這樣才能讓用戶喜歡上產(chǎn)品。 

13.設(shè)計(jì)正確的產(chǎn)品

所謂的用戶體驗(yàn)，就是考慮用戶的需求來設(shè)計(jì)出正確的產(chǎn)品

不要談?wù)撜f給用戶帶來什么好處，而是了解當(dāng)前公司內(nèi)部的難題，并去解決； 
不要為了試圖去操控用戶，而設(shè)計(jì)一個(gè)「覺得」產(chǎn)品這是「用戶想要的」東西。

14.產(chǎn)品設(shè)計(jì)的四大原則

最后，通過以上內(nèi)容的知悉，再延伸出產(chǎn)品設(shè)計(jì)的四大原則。

設(shè)計(jì)絕不是簡(jiǎn)單的拼合，排列甚至編輯；設(shè)計(jì)是通過闡明，簡(jiǎn)化、明確、修飾，使之莊嚴(yán)，有說服性，甚至帶一點(diǎn)趣味性，來賦予其價(jià)值及意義。

很多人把設(shè)計(jì)原則都想得很復(fù)雜，還別說，它真的挺復(fù)雜，但是對(duì)我來說它就是四點(diǎn)：

•  清晰 ；

•  流暢 ；

•  統(tǒng)一 ；

•  美觀；

重要性也是按這個(gè)順序來排列，那么下面我們一點(diǎn)點(diǎn)來說說。

清晰

何為清晰？對(duì)任何產(chǎn)品而言，界面“清晰”是最為重要的一點(diǎn)。人們必須能夠辨別出它是什么，才能有效地使用你設(shè)計(jì)出來的產(chǎn)品。而在設(shè)計(jì)的過程中相信大家經(jīng)常會(huì)被產(chǎn)品的需求搞得蒙圈，最后出來一個(gè)亂得連自己都會(huì)吐槽的界面。

設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)，真正要做的應(yīng)該是去關(guān)心用戶使用產(chǎn)品的原因，去預(yù)測(cè)并觀察用戶使用產(chǎn)品時(shí)的行為然后快速做出反饋。產(chǎn)品在設(shè)計(jì)之初就應(yīng)該定位清晰，明確自己的受眾群體，設(shè)計(jì)出符合目標(biāo)用戶的產(chǎn)品。這樣才能留住用戶，讓用戶對(duì)產(chǎn)品更有期待。

但是每類應(yīng)用的需求不同，受眾群體也不同，所以每個(gè)設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)都會(huì)糾結(jié)怎么把產(chǎn)品做到清晰。比如攝影產(chǎn)品，打開就是快門和取景框，相信大家都懂得怎么用，這類工具類應(yīng)用很簡(jiǎn)單的就能做到清晰。再說社交類應(yīng)用，微信打開界面大家都能知道聊天框和標(biāo)簽欄的作用，這類產(chǎn)品說難也不難，畢竟同類產(chǎn)品還是很多的。其實(shí)最難做好的，還是購(gòu)物類應(yīng)用，不知道為什么，這類產(chǎn)品總是喜歡把界面元素設(shè)計(jì)得又多又亂才肯罷休，可能是我們的文化背景和生存環(huán)境導(dǎo)致的吧。

但是話說回來，這么多類應(yīng)用都要根據(jù)自己的產(chǎn)品定位來設(shè)計(jì)，每個(gè)產(chǎn)品定位的清晰性都是不同的。所以要做到產(chǎn)品設(shè)計(jì)清晰，必須讓目標(biāo)用戶在符合產(chǎn)品條件的基礎(chǔ)上，去正確的理解產(chǎn)品界面。不需要思考就對(duì)界面的設(shè)計(jì)有所了解；或者是讓用戶通過產(chǎn)品簡(jiǎn)單的提示或幫助說明，就能夠理解產(chǎn)品界面，并進(jìn)行使用。

要做到這點(diǎn)就要讓用戶知道自己目前處于什么位置，并知道自己能干什么或要干什么。其實(shí)這些說起來很簡(jiǎn)單，但是要做到卻并不容易，所以對(duì)用戶的研究必不可少，讓產(chǎn)品定位精準(zhǔn)，明確目標(biāo)用戶等等，都是非常重要的步驟。這也是為什么清晰是產(chǎn)品設(shè)計(jì)原則中最重要的原因。如果能做到這點(diǎn)，即使頁(yè)面再多，也不會(huì)讓用戶覺得不知所措。(當(dāng)然頁(yè)面數(shù)量還是有點(diǎn)影響的)

流暢

在保證了產(chǎn)品界面清晰的前提下，界面的流暢性可以讓用戶和產(chǎn)品之間產(chǎn)生良好的互動(dòng)。一個(gè)優(yōu)秀的產(chǎn)品，在用戶使用的過程中不僅不需要復(fù)雜的學(xué)習(xí)就能使用，而且還能的使用。

如何保證流暢性？很簡(jiǎn)單，就是突出產(chǎn)品的核心。我們生活在一個(gè)快速發(fā)展的時(shí)代，做任何事情都容易被打擾，導(dǎo)致過程中斷。所以想要留住用戶，必須讓用戶沒有負(fù)擔(dān)且?guī)椭脩艨焖偻瓿扇蝿?wù)。這樣才能贏得用戶的尊重。

想必所有人都在網(wǎng)上買過東西，不說遠(yuǎn)的，就說說外賣。每當(dāng)我們打開一款外賣App看到最多的永遠(yuǎn)是商家吧？這些商家的排序是從距離最近的到距離最遠(yuǎn)的，然后排除無法送達(dá)的。其實(shí)我想說:用戶會(huì)關(guān)心距離遠(yuǎn)近么？不要每次讓用戶打開你們的App時(shí)都是出現(xiàn)一樣的排序，記住用戶點(diǎn)餐時(shí)商家的記錄以及篩選出類似的商家排在前面才是用戶關(guān)心的。這樣不至于每次打開App都要去重新搜索或翻半天記錄或者是找訂單。如果用戶記不住商家名稱呢？如果用戶不想點(diǎn)這家的但是想點(diǎn)同類的食物呢？

保持使用流暢的另一個(gè)說法就是。讓用戶快速的完成任務(wù)，才是App存在的理由。也不要以為用戶點(diǎn)了下單就不想刪減購(gòu)物車的東西，留個(gè)路口讓用戶刪減多余的商品而不是返回去重新操作。

流暢不是讓用戶別無選擇的去執(zhí)行你設(shè)計(jì)的任務(wù)，而是引導(dǎo)用戶去做正確的選擇。不要害怕讓用戶掌握一切，也不要覺得你的設(shè)計(jì)就是顯而易見，這世上從來沒有顯而易見的事情存在。

統(tǒng)一

讓頁(yè)面保持一致性。很多設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)，都會(huì)把統(tǒng)一性拋之腦后。統(tǒng)一性在設(shè)計(jì)過程中至少要做到:視覺、交互、結(jié)果統(tǒng)一。這樣不僅可以降低用戶學(xué)習(xí)成本，還能讓開發(fā)節(jié)省不少時(shí)間來做那些必要的東西。

經(jīng)常有人會(huì)問一些關(guān)于界面設(shè)計(jì)的問題。而發(fā)出來的界面很多時(shí)候都是前后不統(tǒng)一，上個(gè)界面的下一步還在左邊，到了下個(gè)頁(yè)面就到了右邊了，問他原因就說:這個(gè)界面的排版這樣放更好看點(diǎn)。其實(shí)這樣的回答很不專業(yè)。在做產(chǎn)品時(shí)，統(tǒng)一性是非常重要的，它是清晰和流暢的結(jié)果，要求做到自然而然的效果。能夠通過巧妙的布局，來降低用戶的認(rèn)知負(fù)擔(dān)。

相信大家都聽過一句話:好的設(shè)計(jì)都是看不見的。這里說的不是真的看不見(要真看不見還搞啥)，而是說讓用戶察覺不到它的存在是多余的。要做到統(tǒng)一不僅要做到均衡的構(gòu)圖，讓畫面整體具有穩(wěn)定性，還要透出空間感，不會(huì)使得用戶覺得在使用的過程中產(chǎn)生擁擠的念頭。而創(chuàng)新并給用戶帶來驚喜就是后話了。

美觀

其實(shí)美觀沒什么好說的，因?yàn)槊總€(gè)人對(duì)它認(rèn)知是不同的。新人覺得美觀是把一個(gè)界面做到漂亮；而資深設(shè)計(jì)師就知道美觀是讓界面的設(shè)計(jì)無瑕疵，整齊，細(xì)節(jié)完美。

簡(jiǎn)單來說說美觀的幾個(gè)方面:

1.文字:一個(gè)界面要做到信息閱讀流暢，符合人們閱讀習(xí)慣。

2.顏色:不要為了突出設(shè)計(jì)感，就采用夸張的顏色來設(shè)計(jì)，有時(shí)候簡(jiǎn)單的搭配反而更能體現(xiàn)出產(chǎn)品的功能。

3.圖標(biāo):大家都說一個(gè)交互設(shè)計(jì)師的功底是看交互設(shè)計(jì)文檔，那么一個(gè)UI視覺設(shè)計(jì)師的功底看什么呢？沒錯(cuò)，就是（線性）圖標(biāo)。

4.布局:有時(shí)候一個(gè)界面的布局好壞不能完全看交互設(shè)計(jì)師，這里面視覺的設(shè)計(jì)至關(guān)重要，即使做得再爛的布局都是可以通過視覺設(shè)計(jì)師來逆轉(zhuǎn)乾坤的(不包括搗亂的那些孩子)。

再提一個(gè)點(diǎn)，動(dòng)效，當(dāng)然動(dòng)效也屬于美觀中的一種。近年非常流行動(dòng)效，很多設(shè)計(jì)師沉迷其中，然后在自己的產(chǎn)品中加入各式各樣的動(dòng)效。其實(shí)，動(dòng)效是是一把雙刃劍，這里也不詳說了，大家有需要我可以單獨(dú)出一篇?jiǎng)有У奈恼?。只要在設(shè)計(jì)的過程中把控好度，動(dòng)效是可以起到美化產(chǎn)品的作用的。

總結(jié)

說完上面這四個(gè)原則，大家可以聯(lián)系自己的產(chǎn)品去想想是不是這么回事。清晰>流暢>統(tǒng)一>美觀，一個(gè)好的產(chǎn)品一定是按照這個(gè)順序來設(shè)計(jì)產(chǎn)品的。在做設(shè)計(jì)之前一定要理解需求再下手，如果你的界面已經(jīng)滿足需求，就不要再加入其它元素了，千萬不要覺得頁(yè)面太簡(jiǎn)單東西太少，我就要加入其它東西來充實(shí)，這樣很傻。如果之前沒有考慮到這四個(gè)點(diǎn)來做設(shè)計(jì)，那從現(xiàn)在開始好好想想自己應(yīng)該怎么入手。

清晰，理解需求；流暢，明確用戶目標(biāo)；統(tǒng)一，界面元素保持一致；美觀，做到簡(jiǎn)約而不簡(jiǎn)單。