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