網站伴随著(zhe)互聯網的(de)快(kuài)速發展而快(kuài)速興起，作爲上網的(de)主要依托，加上使用(yòng)網絡的(de)頻(pín)繁而變得(de)非常的(de)重要。企業需要通(tōng)過網站呈現産品、服務、理(lǐ)念、文化(huà)，或向大(dà)衆提供某種功能服務。網頁設計必須首先明(míng)确設計站點的(de)目的(de)和(hé)用(yòng)戶的(de)需求，從而做(zuò)出切實可(kě)行的(de)設計方案。
今天抽空來(lái)說說大(dà)家比較關心的(de)問題，就是所謂的(de)設計原則。很多(duō)人(rén)把設計原則都想得(de)很複雜(zá)，還(hái)别說，它真的(de)挺複雜(zá)，但是對(duì)我來(lái)說它就是四點：
清晰
流暢
統一
美(měi)觀
重要性也(yě)是按這(zhè)個(gè)順序來(lái)排列，那麽下(xià)面我們一點點來(lái)說說。
清晰
何爲清晰?對(duì)任何産品而言，界面“清晰”是最爲重要的(de)一點。人(rén)們必須能夠辨别出它是什(shén)麽，才能有效地使用(yòng)你設計出來(lái)的(de)産品。而在設計的(de)過程中相信大(dà)家經常會被産品的(de)需求搞得(de)蒙圈，最後出來(lái)一個(gè)亂得(de)連自己都會吐槽的(de)界面。設計師在設計産品時(shí)，真正要做(zuò)的(de)應該是去關心用(yòng)戶使用(yòng)産品的(de)原因，去預測并觀察用(yòng)戶使用(yòng)産品時(shí)的(de)行爲然後快(kuài)速做(zuò)出反饋。
産品在設計之初就應該定位清晰，明(míng)确自己的(de)受衆群體，設計出符合目标用(yòng)戶的(de)産品。這(zhè)樣才能留住用(yòng)戶，讓用(yòng)戶對(duì)産品更有期待。
但是每類應用(yòng)的(de)需求不同，受衆群體也(yě)不同，所以每個(gè)設計師在設計産品時(shí)都會糾結怎麽把産品做(zuò)到清晰。比如攝影(yǐng)産品，打開就是快(kuài)門和(hé)取景框，相信大(dà)家都懂(dǒng)得(de)怎麽用(yòng)，這(zhè)類工具類應用(yòng)很簡單的(de)就能做(zuò)到清晰。再說社交類應用(yòng)，微信打開界面大(dà)家都能知道聊天框和(hé)标簽欄的(de)作用(yòng)，這(zhè)類産品說難也(yě)不難，畢竟同類産品還(hái)是很多(duō)的(de)。其實最難做(zuò)好的(de)，還(hái)是購(gòu)物(wù)類應用(yòng)，不知道爲什(shén)麽，這(zhè)類産品總是喜歡把界面元素設計得(de)又多(duō)又亂才肯罷休，可(kě)能是我們的(de)文化(huà)背景和(hé)生存環境導緻的(de)吧。但是話(huà)說回來(lái)，這(zhè)麽多(duō)類應用(yòng)都要根據自己的(de)産品定位來(lái)設計，每個(gè)産品定位的(de)清晰性都是不同的(de)。
所以要做(zuò)到産品設計清晰，必須讓目标用(yòng)戶在符合産品條件的(de)基礎上，去正确的(de)理(lǐ)解産品界面。不需要思考就對(duì)界面的(de)設計有所了(le)解;或者是讓用(yòng)戶通(tōng)過産品簡單的(de)提示或幫助說明(míng)，就能夠理(lǐ)解産品界面，并進行使用(yòng)。
要做(zuò)到這(zhè)點就要讓用(yòng)戶知道自己目前處于什(shén)麽位置，并知道自己能幹什(shén)麽或要幹什(shén)麽。其實這(zhè)些說起來(lái)很簡單，但是要做(zuò)到卻并不容易，所以對(duì)用(yòng)戶的(de)研究必不可(kě)少，讓産品定位精準，明(míng)确目标用(yòng)戶等等，都是非常重要的(de)步驟。這(zhè)也(yě)是爲什(shén)麽清晰是産品設計原則中最重要的(de)原因。如果能做(zuò)到這(zhè)點，即使頁面再多(duō)，也(yě)不會讓用(yòng)戶覺得(de)不知所措。(當然頁面數量還(hái)是有點影(yǐng)響的(de))
流暢
在保證了(le)産品界面清晰的(de)前提下(xià)，界面的(de)流暢性可(kě)以讓用(yòng)戶和(hé)産品之間産生良好的(de)互動。一個(gè)優秀的(de)産品，在用(yòng)戶使用(yòng)的(de)過程中不僅不需要複雜(zá)的(de)學習(xí)就能使用(yòng)，而且還(hái)能高(gāo)效的(de)使用(yòng)。
如何保證流暢性?很簡單，就是突出産品的(de)核心。
我們生活在一個(gè)快(kuài)速發展的(de)時(shí)代，做(zuò)任何事情都容易被打擾，導緻過程中斷。所以想要留住用(yòng)戶，必須讓用(yòng)戶沒有負擔且幫助用(yòng)戶快(kuài)速完成任務。這(zhè)樣才能赢得(de)用(yòng)戶的(de)尊重。
想必所有人(rén)都在網上買過東西，不說遠(yuǎn)的(de)，就說說外賣。每當我們打開一款外賣App看到最多(duō)的(de)永遠(yuǎn)是商家吧?這(zhè)些商家的(de)排序是從距離最近的(de)到距離最遠(yuǎn)的(de)，然後排除無法送達的(de)。其實我想說：用(yòng)戶會關心距離遠(yuǎn)近麽?不要每次讓用(yòng)戶打開你們的(de)App時(shí)都是出現一樣的(de)排序，記住用(yòng)戶點餐時(shí)商家的(de)記錄以及篩選出類似的(de)商家排在前面才是用(yòng)戶關心的(de)。這(zhè)樣不至于每次打開App都要去重新搜索或翻半天記錄或者是找訂單。如果用(yòng)戶記不住商家名稱呢(ne)?如果用(yòng)戶不想點這(zhè)家的(de)但是想點同類的(de)食物(wù)呢(ne)?
保持使用(yòng)流暢的(de)另一個(gè)說法就是高(gāo)效。讓用(yòng)戶快(kuài)速的(de)完成任務，才是App存在的(de)理(lǐ)由。也(yě)不要以爲用(yòng)戶點了(le)下(xià)單就不想删減購(gòu)物(wù)車的(de)東西，留個(gè)路口讓用(yòng)戶删減多(duō)餘的(de)商品而不是返回去重新操作。
流暢不是讓用(yòng)戶别無選擇的(de)去執行你設計的(de)任務，而是引導用(yòng)戶去做(zuò)正确的(de)選擇。不要害怕讓用(yòng)戶掌握一切，也(yě)不要覺得(de)你的(de)設計就是顯而易見，這(zhè)世上從來(lái)沒有顯而易見的(de)事情存在。
統一
讓頁面保持一緻性。很多(duō)設計師在設計産品時(shí)，都會把統一性抛之腦(nǎo)後。統一性在設計過程中至少要做(zuò)到:視覺、交互、結果統一。這(zhè)樣不僅可(kě)以降低用(yòng)戶學習(xí)成本，還(hái)能讓開發節省不少時(shí)間來(lái)做(zuò)那些必要的(de)東西。
經常有人(rén)會問一些關于界面設計的(de)問題。而發出來(lái)的(de)界面很多(duō)時(shí)候都是前後不統一，上個(gè)界面的(de)下(xià)一步還(hái)在左邊，到了(le)下(xià)個(gè)頁面就到了(le)右邊了(le)，問他(tā)原因就說：這(zhè)個(gè)界面的(de)排版這(zhè)樣放更好看點。其實這(zhè)樣的(de)回答(dá)很不專業。
在做(zuò)産品時(shí)，統一性是非常重要的(de)，它是清晰和(hé)流暢的(de)結果，要求做(zuò)到自然而然的(de)效果。能夠通(tōng)過巧妙的(de)布局，來(lái)降低用(yòng)戶的(de)認知負擔。相信大(dà)家都聽(tīng)過一句話(huà)：好的(de)設計都是看不見的(de)。這(zhè)裏說的(de)不是真的(de)看不見(要真看不見還(hái)搞啥)，而是說讓用(yòng)戶察覺不到它的(de)存在是多(duō)餘的(de)。要做(zuò)到統一不僅要做(zuò)到均衡的(de)構圖，讓畫(huà)面整體具有穩定性，還(hái)要透出空間感，不會使得(de)用(yòng)戶覺得(de)在使用(yòng)的(de)過程中産生擁擠的(de)念頭。而創新并給用(yòng)戶帶來(lái)驚喜就是後話(huà)了(le)。
美(měi)觀
其實美(měi)觀沒什(shén)麽好說的(de)，因爲每個(gè)人(rén)對(duì)它認知是不同的(de)。新人(rén)覺得(de)美(měi)觀是把一個(gè)界面做(zuò)到漂亮;而資深設計師就知道美(měi)觀是讓界面的(de)設計無瑕疵，整齊，細節完美(měi)。
簡單來(lái)說說美(měi)觀的(de)幾個(gè)方面:
文字：一個(gè)界面要做(zuò)到信息閱讀流暢，符合人(rén)們閱讀習(xí)慣。
顔色：不要爲了(le)突出設計感，就采用(yòng)誇張的(de)顔色來(lái)設計，有時(shí)候簡單的(de)搭配反而更能體現出産品的(de)功能。
圖标：大(dà)家都說一個(gè)交互設計師的(de)功底是看交互設計文檔，那麽一個(gè)UI視覺設計師的(de)功底看什(shén)麽呢(ne)?沒錯，就是圖标。
布局：有時(shí)候一個(gè)界面的(de)布局好壞不能完全看交互設計師，這(zhè)裏面視覺的(de)設計至關重要，即使做(zuò)得(de)再爛的(de)布局都是可(kě)以通(tōng)過視覺設計師來(lái)逆轉乾坤的(de)(不包括搗亂的(de)那些孩子)。
再提一個(gè)點，動效，當然動效也(yě)屬于美(měi)觀中的(de)一種。近年非常流行動效，很多(duō)設計師沉迷其中，然後在自己的(de)産品中加入各式各樣的(de)動效。其實，動效是是一把雙刃劍，這(zhè)裏也(yě)不詳說了(le)，大(dà)家有需要我可(kě)以單獨出一篇動效的(de)文章(zhāng)。隻要在設計的(de)過程中把控好度，動效是可(kě)以起到美(měi)化(huà)産品的(de)作用(yòng)的(de)。
總結
設計絕不是簡單的(de)拼合，排列甚至編輯;設計是通(tōng)過闡明(míng)，簡化(huà)、明(míng)确、修飾，使之莊嚴，有說服性，甚至帶一點趣味性，來(lái)賦予其價值及意義。說完上面這(zhè)四個(gè)原則，大(dà)家可(kě)以聯系自己的(de)産品去想想是不是這(zhè)麽回事。清晰>流暢>統一>美(měi)觀，一個(gè)好的(de)産品一定是按照(zhào)這(zhè)個(gè)順序來(lái)設計産品的(de)。在做(zuò)設計之前一定要理(lǐ)解需求再下(xià)手，如果你的(de)界面已經滿足需求，就不要再加入其它元素了(le)，千萬不要覺得(de)頁面太簡單東西太少，我就要加入其它東西來(lái)充實，這(zhè)樣很傻。
如果之前沒有考慮到這(zhè)四個(gè)點來(lái)做(zuò)設計，那從現在開始好好想想自己應該怎麽入手。
清晰，理(lǐ)解需求;流暢，明(míng)确用(yòng)戶目标;統一，界面元素保持一緻;美(měi)觀，做(zuò)到簡約而不簡單。
手機關注大(dà)連網龍科技
