在進行產品設計時，許多人經常會無從下手。很多人會把設計原則想象得非常復雜，但越是本質的東西，越應該是簡單的。在經歷許多紛繁復雜的互聯網產品設計實踐之后，刪繁就簡，我想用四個詞來概述互聯網產品設計的四個原則：清晰、流暢、統一、美。

清晰

什么(me)(me)清晰(xi)？對任何產(chan)(chan)品(pin)(pin)來說，UI“清晰(xi)”是最為(wei)重要也是最為(wei)基礎(chu)的一(yi)點。用戶(hu)必須首先辨(bian)別出它是什么(me)(me)，然(ran)后才能使用你設(she)(she)計(ji)出來的產(chan)(chan)品(pin)(pin)。當然(ran)在(zai)設(she)(she)計(ji)的過(guo)程(cheng)中相信大(da)家經常會被產(chan)(chan)品(pin)(pin)的需(xu)求搞得(de)不知所(suo)措，于是在(zai)懵懵懂懂中搞出一(yi)個(ge)亂七八糟的界(jie)面，草(cao)草(cao)了(le)事。過(guo)分在(zai)意形式設(she)(she)計(ji)時，所(suo)完成的產(chan)(chan)品(pin)(pin)設(she)(she)計(ji)往往模(mo)糊不清，而設(she)(she)計(ji)師(shi)真正要做的應該是去(qu)關心用戶(hu)使用產(chan)(chan)品(pin)(pin)的原因，去(qu)預測并觀察用戶(hu)使用產(chan)(chan)品(pin)(pin)時的行為(wei)然(ran)后做出準確的反饋。產(chan)(chan)品(pin)(pin)在(zai)設(she)(she)計(ji)之初就應該定(ding)位清晰(xi)，明確自己的受眾群體，設(she)(she)計(ji)出符合目標用戶(hu)使用習(xi)慣的產(chan)(chan)品(pin)(pin)。

但是(shi)(shi)(shi)每一種互聯(lian)網(wang)產(chan)(chan)品的(de)需求(qiu)是(shi)(shi)(shi)不同的(de)，受眾群體也(ye)(ye)相(xiang)(xiang)應有所(suo)區別(bie)，所(suo)以(yi)(yi)每個(ge)設(she)(she)計師在(zai)設(she)(she)計產(chan)(chan)品時(shi)都會(hui)糾結怎么(me)把產(chan)(chan)品做(zuo)到清(qing)(qing)晰(xi)。比如拍照應用(yong)(yong)，打開就(jiu)是(shi)(shi)(shi)快門和(he)取景框，用(yong)(yong)戶不用(yong)(yong)過多嘗試便能得心應手，此類工(gong)具應用(yong)(yong)功能直截了當，容易做(zuo)到清(qing)(qing)晰(xi)。而社交類應用(yong)(yong)，如微信，打開界面也(ye)(ye)可以(yi)(yi)很快知道聊天(tian)框和(he)標簽(qian)欄的(de)作(zuo)用(yong)(yong)，此類產(chan)(chan)品說難也(ye)(ye)不難，稍加設(she)(she)計也(ye)(ye)就(jiu)可以(yi)(yi)清(qing)(qing)晰(xi)明了。相(xiang)(xiang)對較難的(de)還是(shi)(shi)(shi)購物類應用(yong)(yong)，這類互聯(lian)網(wang)產(chan)(chan)品往(wang)往(wang)在(zai)簡(jian)單的(de)購物流程中夾帶(dai)了太多希(xi)望提(ti)高(gao)銷量的(de)需求(qiu)，常(chang)常(chang)顯得臃腫不堪。

但是(shi)話說回來(lai)，這么(me)多(duo)類應用(yong)都(dou)要根(gen)據自己的(de)(de)(de)產(chan)(chan)品(pin)(pin)定位(wei)來(lai)設計(ji)，每個(ge)產(chan)(chan)品(pin)(pin)定位(wei)的(de)(de)(de)清晰性都(dou)是(shi)不(bu)同的(de)(de)(de)。所(suo)以要做(zuo)到產(chan)(chan)品(pin)(pin)設計(ji)清晰，必須(xu)讓(rang)目標用(yong)戶在符合(he)產(chan)(chan)品(pin)(pin)條件的(de)(de)(de)基礎(chu)上，去(qu)正確的(de)(de)(de)理解產(chan)(chan)品(pin)(pin)界(jie)面。不(bu)需要思考(kao)就對(dui)界(jie)面的(de)(de)(de)設計(ji)有所(suo)了解；或(huo)者(zhe)是(shi)讓(rang)用(yong)戶通過產(chan)(chan)品(pin)(pin)簡單的(de)(de)(de)提示或(huo)幫(bang)助(zhu)說明，就能(neng)夠理解產(chan)(chan)品(pin)(pin)界(jie)面，并進行使用(yong)。

要(yao)(yao)做(zuo)到這(zhe)點就(jiu)要(yao)(yao)讓用(yong)戶(hu)知道(dao)自己目(mu)前處于什(shen)么位(wei)置，并知道(dao)自己能干什(shen)么或(huo)要(yao)(yao)干什(shen)么。其實這(zhe)些說起來很簡單(dan)，但是(shi)(shi)要(yao)(yao)做(zuo)到卻(que)并不(bu)(bu)(bu)容易(yi)，所(suo)(suo)以對用(yong)戶(hu)的(de)(de)研(yan)究必不(bu)(bu)(bu)可(ke)少(shao)，讓產品(pin)定(ding)位(wei)精準(zhun)，明確目(mu)標用(yong)戶(hu)等等，都是(shi)(shi)非(fei)常重(zhong)要(yao)(yao)的(de)(de)步驟。這(zhe)也是(shi)(shi)為什(shen)么清晰(xi)是(shi)(shi)產品(pin)設計原則(ze)中最重(zhong)要(yao)(yao)的(de)(de)原因。如果能做(zuo)到這(zhe)點，即(ji)使頁面再多，也不(bu)(bu)(bu)會讓用(yong)戶(hu)覺得(de)不(bu)(bu)(bu)知所(suo)(suo)措(cuo)。（當然(ran)頁面數量還(huan)是(shi)(shi)有點影響的(de)(de)）

流暢

在保證(zheng)了產品(pin)界(jie)面(mian)清晰(xi)的前(qian)提下，界(jie)面(mian)的流暢(chang)性可以讓用戶(hu)和產品(pin)之間(jian)產生良好的互(hu)動。一個優秀的產品(pin)，在用戶(hu)使(shi)用的過(guo)程中不僅不需要復雜的學習就能使(shi)用，而且還(huan)能高效的使(shi)用。

如何保(bao)證流暢性？很簡(jian)單，就(jiu)是突出產品(pin)的核心。我們(men)生活在一個快(kuai)速發(fa)展的時代，做(zuo)任(ren)何事情都容易被打擾，導致過程中斷(duan)。所以想要留住用(yong)戶，必須讓用(yong)戶沒(mei)有負擔且幫助(zhu)用(yong)戶快(kuai)速完成任(ren)務。這樣才能贏得用(yong)戶的尊重。

想(xiang)必所有人(ren)都(dou)在(zai)網上(shang)買過東西，不(bu)說遠的(de)，就說說外賣。每當我(wo)們打開一款外賣App看到最(zui)(zui)多的(de)永遠是(shi)商(shang)家(jia)吧(ba)？這(zhe)些(xie)商(shang)家(jia)的(de)排序是(shi)從距(ju)離最(zui)(zui)近(jin)的(de)到距(ju)離最(zui)(zui)遠的(de)，然(ran)后排除(chu)無法送達的(de)。其(qi)實我(wo)想(xiang)說:用(yong)(yong)(yong)(yong)戶(hu)會關心(xin)距(ju)離遠近(jin)么？不(bu)要每次讓用(yong)(yong)(yong)(yong)戶(hu)打開你們的(de)App時都(dou)是(shi)出現一樣的(de)排序，記住用(yong)(yong)(yong)(yong)戶(hu)點(dian)餐時商(shang)家(jia)的(de)記錄以(yi)及篩選出類(lei)(lei)似的(de)商(shang)家(jia)排在(zai)前面才(cai)是(shi)用(yong)(yong)(yong)(yong)戶(hu)關心(xin)的(de)。這(zhe)樣不(bu)至于每次打開App都(dou)要去重新搜(sou)索或(huo)翻半天記錄或(huo)者是(shi)找訂單。如果用(yong)(yong)(yong)(yong)戶(hu)記不(bu)住商(shang)家(jia)名稱呢？如果用(yong)(yong)(yong)(yong)戶(hu)不(bu)想(xiang)點(dian)這(zhe)家(jia)的(de)但是(shi)想(xiang)點(dian)同類(lei)(lei)的(de)食(shi)物呢？

保(bao)持使用(yong)流暢的(de)(de)(de)另一個說(shuo)法(fa)就(jiu)是高效。讓用(yong)戶快速的(de)(de)(de)完成任務，才是App存在的(de)(de)(de)理由(you)。也不要以為用(yong)戶點了下單就(jiu)不想刪減購物(wu)車的(de)(de)(de)東西，留(liu)個路(lu)口(kou)讓用(yong)戶刪減多余的(de)(de)(de)商(shang)品而(er)不是返回去重新操作(zuo)。

流暢(chang)不(bu)是讓用(yong)戶別無選擇的去(qu)執(zhi)行你設計的任務，而是引導(dao)用(yong)戶去(qu)做正確(que)的選擇。不(bu)要(yao)害怕(pa)讓用(yong)戶掌(zhang)握一(yi)切，也不(bu)要(yao)覺得你的設計就是顯而易見(jian)，這世上從來(lai)沒(mei)有顯而易見(jian)的事情存在。

統一

讓頁面保持一致性(xing)。很多設計(ji)師在(zai)設計(ji)產品時(shi)，都會把(ba)統一性(xing)拋之腦后。統一性(xing)在(zai)設計(ji)過程中至少要做(zuo)到(dao):視覺、交互、結果統一。這樣不僅可以(yi)降低(di)用戶學習成本(ben)，還能讓開(kai)發(fa)節省不少時(shi)間來(lai)做(zuo)那些必要的東西。

經常(chang)有人(ren)會問(wen)一(yi)些關于界(jie)面(mian)設計的(de)(de)(de)(de)(de)問(wen)題。而(er)發出來的(de)(de)(de)(de)(de)界(jie)面(mian)很(hen)多時候都是前后不(bu)統(tong)一(yi)，上(shang)個(ge)界(jie)面(mian)的(de)(de)(de)(de)(de)下一(yi)步(bu)還(huan)在(zai)(zai)左邊(bian)(bian)，到了(le)(le)下個(ge)頁面(mian)就(jiu)(jiu)到了(le)(le)右(you)邊(bian)(bian)了(le)(le)，問(wen)他原(yuan)因(yin)就(jiu)(jiu)說:這個(ge)界(jie)面(mian)的(de)(de)(de)(de)(de)排版這樣放更好(hao)看點。其實這樣的(de)(de)(de)(de)(de)回答很(hen)不(bu)專業。在(zai)(zai)做產品時，統(tong)一(yi)性是非常(chang)重要的(de)(de)(de)(de)(de)，它是清晰和流暢的(de)(de)(de)(de)(de)結果，要求做到自然(ran)而(er)然(ran)的(de)(de)(de)(de)(de)效果。能夠通過巧(qiao)妙的(de)(de)(de)(de)(de)布局，來降低(di)用戶的(de)(de)(de)(de)(de)認知(zhi)負擔。

相信大家都聽過一(yi)句話(hua):好的(de)(de)設計都是(shi)(shi)看(kan)不(bu)見的(de)(de)。這里說的(de)(de)不(bu)是(shi)(shi)真的(de)(de)看(kan)不(bu)見（要真看(kan)不(bu)見還(huan)搞啥），而是(shi)(shi)說讓用戶(hu)察覺(jue)不(bu)到(dao)它(ta)的(de)(de)存在是(shi)(shi)多余的(de)(de)。要做到(dao)統一(yi)不(bu)僅要做到(dao)均衡的(de)(de)構(gou)圖，讓畫面整體(ti)具有穩定性，還(huan)要透出空間(jian)感(gan)，不(bu)會使(shi)得(de)用戶(hu)覺(jue)得(de)在使(shi)用的(de)(de)過程中產(chan)生擁擠的(de)(de)念頭。而創新(xin)并給用戶(hu)帶來驚喜就是(shi)(shi)后話(hua)了。

美

其實美(mei)(mei)沒什么好(hao)說的(de)，因(yin)為每個人對它認(ren)知是不同(tong)的(de)。新人覺(jue)得(de)美(mei)(mei)是把一個界面做(zuo)到漂亮；而資深設計師就知道美(mei)(mei)是讓界面的(de)設計無瑕疵，整齊，細節完美(mei)(mei)。

簡單來說(shuo)說(shuo)美觀的幾個方面(mian):

布局：有時候一個界面(mian)的(de)布局好壞不能完全看交(jiao)互設計(ji)(ji)師，這里(li)面(mian)視(shi)覺的(de)設計(ji)(ji)至關重要(yao)，即使做(zuo)得再爛的(de)布局都是可以(yi)通過視(shi)覺設計(ji)(ji)師來(lai)逆轉乾坤的(de)（不包括(kuo)搗亂的(de)那些(xie)孩(hai)子）。

顏(yan)色：不要為了突(tu)出設計感(gan)，就采用夸張(zhang)的顏(yan)色來設計，有時(shi)候簡單的搭配反而更能體現(xian)出產品的功能。

文(wen)字(zi)：一個界面要做到信息閱(yue)讀(du)流暢，符合人們(men)閱(yue)讀(du)習慣(guan)。

圖標：大家都說(shuo)一(yi)個交互設(she)計師的功底(di)是(shi)看交互設(she)計文檔，那(nei)么一(yi)個UI視覺設(she)計師的功底(di)看什么呢？沒錯，就是(shi)（線性）圖標。

再提一(yi)個點，動(dong)(dong)效(xiao)(xiao)，當然動(dong)(dong)效(xiao)(xiao)也(ye)屬于美觀中的一(yi)種。近(jin)年非常流行動(dong)(dong)效(xiao)(xiao)，很多設(she)計師(shi)沉迷(mi)其中，然后在自己的產(chan)品中加入各(ge)式各(ge)樣(yang)的動(dong)(dong)效(xiao)(xiao)。其實，動(dong)(dong)效(xiao)(xiao)是是一(yi)把雙刃(ren)劍，只有在設(she)計的過程中把控(kong)好度(du)，動(dong)(dong)效(xiao)(xiao)才可以起(qi)到美化(hua)產(chan)品的作用的。

總結

說完(wan)上面(mian)這四個原則，大家可(ke)以聯系自己的產品(pin)(pin)(pin)去想想是不(bu)是這么回(hui)事。清晰>流(liu)暢>統一(yi)>美，一(yi)個好(hao)的產品(pin)(pin)(pin)一(yi)定是按照這個順(shun)序來(lai)設(she)計(ji)產品(pin)(pin)(pin)的。在(zai)做(zuo)設(she)計(ji)之前一(yi)定要理解需(xu)求再下手，如果你的界(jie)面(mian)已(yi)經滿足需(xu)求，就(jiu)不(bu)要再加入(ru)其它元素(su)了(le)，千萬不(bu)要覺得(de)頁面(mian)太(tai)簡(jian)單東西太(tai)少，我就(jiu)要加入(ru)其它東西來(lai)充實，這樣很傻。如果之前沒(mei)有(you)考(kao)慮到這四個點來(lai)做(zuo)設(she)計(ji)，那從現在(zai)開始好(hao)好(hao)想想自己應該怎么入(ru)手。

清晰，理解需求；流暢，明確用戶目標；統一，界面元素保持一致；美觀，做到簡約而不簡單。