網(wǎng)站伴隨著互聯(lián)網(wǎng)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，加上使用網(wǎng)絡(luò)的頻繁而變得非常的重要。企業(yè)需要通過(guò)網(wǎng)站呈現(xiàn)產(chǎn)品、服務(wù)、理念、文化，或向大眾提供某種功能服務(wù)。網(wǎng)頁(yè)設(shè)計(jì)必須首先明確設(shè)計(jì)站點(diǎn)的目的和用戶(hù)的需求，從而做出切實(shí)可行的設(shè)計(jì)方案。

　　今天抽空來(lái)說(shuō)說(shuō)大家比較關(guān)心的問(wèn)題，就是所謂的設(shè)計(jì)原則。很多人把設(shè)計(jì)原則都想得很復(fù)雜，還別說(shuō)，它真的挺復(fù)雜，但是對(duì)我來(lái)說(shuō)它就是四點(diǎn)：

　　清晰

　　流暢

　　統(tǒng)一

　　美觀

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

　　清晰

　　何為清晰?對(duì)任何產(chǎn)品而言，界面“清晰”是最為重要的一點(diǎn)。人們必須能夠辨別出它是什么，才能有效地使用你設(shè)計(jì)出來(lái)的產(chǎn)品。而在設(shè)計(jì)的過(guò)程中相信大家經(jīng)常會(huì)被產(chǎn)品的需求搞得蒙圈，最后出來(lái)一個(gè)亂得連自己都會(huì)吐槽的界面。設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)，真正要做的應(yīng)該是去關(guān)心用戶(hù)使用產(chǎn)品的原因，去預(yù)測(cè)并觀察用戶(hù)使用產(chǎn)品時(shí)的行為然后快速做出反饋。

　　產(chǎn)品在設(shè)計(jì)之初就應(yīng)該定位清晰，明確自己的受眾群體，設(shè)計(jì)出符合目標(biāo)用戶(hù)的產(chǎn)品。這樣才能留住用戶(hù)，讓用戶(hù)對(duì)產(chǎn)品更有期待。

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

　　所以要做到產(chǎn)品設(shè)計(jì)清晰，必須讓目標(biāo)用戶(hù)在符合產(chǎn)品條件的基礎(chǔ)上，去正確的理解產(chǎn)品界面。不需要思考就對(duì)界面的設(shè)計(jì)有所了解;或者是讓用戶(hù)通過(guò)產(chǎn)品簡(jiǎn)單的提示或幫助說(shuō)明，就能夠理解產(chǎn)品界面，并進(jìn)行使用。

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

　　流暢

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

　　如何保證流暢性?很簡(jiǎn)單，就是突出產(chǎn)品的核心。

　　我們生活在一個(gè)快速發(fā)展的時(shí)代，做任何事情都容易被打擾，導(dǎo)致過(guò)程中斷。所以想要留住用戶(hù)，必須讓用戶(hù)沒(méi)有負(fù)擔(dān)且?guī)椭脩?hù)快速完成任務(wù)。這樣才能贏得用戶(hù)的尊重。

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

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

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

　　統(tǒng)一

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

　　經(jīng)常有人會(huì)問(wèn)一些關(guān)于界面設(shè)計(jì)的問(wèn)題。而發(fā)出來(lái)的界面很多時(shí)候都是前后不統(tǒng)一，上個(gè)界面的下一步還在左邊，到了下個(gè)頁(yè)面就到了右邊了，問(wèn)他原因就說(shuō)：這個(gè)界面的排版這樣放更好看點(diǎn)。其實(shí)這樣的回答很不專(zhuān)業(yè)。

　　在做產(chǎn)品時(shí)，統(tǒng)一性是非常重要的，它是清晰和流暢的結(jié)果，要求做到自然而然的效果。能夠通過(guò)巧妙的布局，來(lái)降低用戶(hù)的認(rèn)知負(fù)擔(dān)。相信大家都聽(tīng)過(guò)一句話：好的設(shè)計(jì)都是看不見(jiàn)的。這里說(shuō)的不是真的看不見(jiàn)(要真看不見(jiàn)還搞啥)，而是說(shuō)讓用戶(hù)察覺(jué)不到它的存在是多余的。要做到統(tǒng)一不僅要做到均衡的構(gòu)圖，讓畫(huà)面整體具有穩(wěn)定性，還要透出空間感，不會(huì)使得用戶(hù)覺(jué)得在使用的過(guò)程中產(chǎn)生擁擠的念頭。而創(chuàng)新并給用戶(hù)帶來(lái)驚喜就是后話了。

　　美觀

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

　　簡(jiǎn)單來(lái)說(shuō)說(shuō)美觀的幾個(gè)方面:

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

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

　　圖標(biāo)：大家都說(shuō)一個(gè)交互設(shè)計(jì)師的功底是看交互設(shè)計(jì)文檔，那么一個(gè)UI視覺(jué)設(shè)計(jì)師的功底看什么呢?沒(méi)錯(cuò)，就是圖標(biāo)。

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

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

　　總結(jié)

　　設(shè)計(jì)絕不是簡(jiǎn)單的拼合，排列甚至編輯;設(shè)計(jì)是通過(guò)闡明，簡(jiǎn)化、明確、修飾，使之莊嚴(yán)，有說(shuō)服性，甚至帶一點(diǎn)趣味性，來(lái)賦予其價(jià)值及意義。說(shuō)完上面這四個(gè)原則，大家可以聯(lián)系自己的產(chǎn)品去想想是不是這么回事。清晰>流暢>統(tǒng)一>美觀，一個(gè)好的產(chǎn)品一定是按照這個(gè)順序來(lái)設(shè)計(jì)產(chǎn)品的。在做設(shè)計(jì)之前一定要理解需求再下手，如果你的界面已經(jīng)滿(mǎn)足需求，就不要再加入其它元素了，千萬(wàn)不要覺(jué)得頁(yè)面太簡(jiǎn)單東西太少，我就要加入其它東西來(lái)充實(shí)，這樣很傻。

　　如果之前沒(méi)有考慮到這四個(gè)點(diǎn)來(lái)做設(shè)計(jì)，那從現(xiàn)在開(kāi)始好好想想自己應(yīng)該怎么入手。

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