產品設計的四大原則
設計絕不是簡單的拼合,排列甚至編輯;設計是通過闡明,簡化、明確、修飾,使之莊嚴,有說服性,甚至帶一點趣味性,來賦予其價值及意義。
今天抽空來說說大家比較關心的問題,就是所謂的設計原則。很多人把設計原則都想得很複雜,還別說,它真的挺複雜,但是對我來說它就是四點:
- 清晰
- 流暢
- 統一
- 美觀
重要性也是按這個順序來排列,那麼下面我們一點點來說說。
清晰
何為清晰?對任何產品而言,界面「清晰」是最為重要的一點。人們必須能夠辨別出它是什麼,才能有效地使用你設計出來的產品。
而在設計的過程中相信大家經常會被產品的需求搞得蒙圈,最後出來一個亂得連自己都會吐槽的界面。設計師在設計產品時,真正要做的應該是去關心用戶使用產品的原因,去預測並觀察用戶使用產品時的行為然後快速做出反饋。
產品在設計之初就應該定位清晰,明確自己的受眾群體,設計出符合目標用戶的產品。這樣才能留住用戶,讓用戶對產品更有期待。
但是每類應用的需求不同,受眾群體也不同,所以每個設計師在設計產品時都會糾結怎麼把產品做到清晰。比如攝影產品,打開就是快門和取景框,相信大家都懂得怎麼用,這類工具類應用很簡單的就能做到清晰。再說社交類應用,微信打開界面大家都能知道聊天框和標籤欄的作用,這類產品說難也不難,畢竟同類產品還是很多的。其實最難做好的,還是購物類應用,不知道為什麼,這類產品總是喜歡把界面元素設計得又多又亂才肯罷休,可能是我們的文化背景和生存環境導致的吧。但是話說回來,這麼多類應用都要根據自己的產品定位來設計,每個產品定位的清晰性都是不同的。
所以要做到產品設計清晰,必須讓目標用戶在符合產品條件的基礎上,去正確的理解產品界面。不需要思考就對界面的設計有所了解;或者是讓用戶通過產品簡單的提示或幫助說明,就能夠理解產品界面,並進行使用。
要做到這點就要讓用戶知道自己目前處於什麼位置,並知道自己能幹什麼或要幹什麼。其實這些說起來很簡單,但是要做到卻並不容易,所以對用戶的研究必不可少,讓產品定位精準,明確目標用戶等等,都是非常重要的步驟。這也是為什麼清晰是產品設計原則中最重要的原因。
如果能做到這點,即使頁面再多,也不會讓用戶覺得不知所措。(當然頁面數量還是有點影響的)
流暢
在保證了產品界面清晰的前提下,界面的流暢性可以讓用戶和產品之間產生良好的互動。
一個優秀的產品,在用戶使用的過程中不僅不需要複雜的學習就能使用,而且還能高效的使用。
如何保證流暢性?很簡單,就是突出產品的核心。
我們生活在一個快速發展的時代,做任何事情都容易被打擾,導致過程中斷。所以想要留住用戶,必須讓用戶沒有負擔且幫助用戶快速完成任務。這樣才能贏得用戶的尊重。
想必所有人都在網上買過東西,不說遠的,就說說外賣。每當我們打開一款外賣App看到最多的永遠是商家吧?這些商家的排序是從距離最近的到距離最遠的,然後排除無法送達的。
其實我想說:用戶會關心距離遠近么?不要每次讓用戶打開你們的App時都是出現一樣的排序,記住用戶點餐時商家的記錄以及篩選出類似的商家排在前面才是用戶關心的。這樣不至於每次打開App都要去重新搜索或翻半天記錄或者是找訂單。如果用戶記不住商家名稱呢?如果用戶不想點這家的但是想點同類的食物呢?
保持使用流暢的另一個說法就是高效。讓用戶快速的完成任務,才是App存在的理由。也不要以為用戶點了下單就不想刪減購物車的東西,留個路口讓用戶刪減多餘的商品而不是返回去重新操作。
流暢不是讓用戶別無選擇的去執行你設計的任務,而是引導用戶去做正確的選擇。不要害怕讓用戶掌握一切,也不要覺得你的設計就是顯而易見,這世上從來沒有顯而易見的事情存在。
統一
讓頁面保持一致性。很多設計師在設計產品時,都會把統一性拋之腦後。統一性在設計過程中至少要做到:視覺、交互、結果統一。這樣不僅可以降低用戶學習成本,還能讓開發節省不少時間來做那些必要的東西。
經常有人會問一些關於界面設計的問題。而發出來的界面很多時候都是前後不統一,上個界面的下一步還在左邊,到了下個頁面就到了右邊了,問他原因就說:這個界面的排版這樣放更好看點。其實這樣的回答很不專業。
在做產品時,統一性是非常重要的,它是清晰和流暢的結果,要求做到自然而然的效果。能夠通過巧妙的布局,來降低用戶的認知負擔。相信大家都聽過一句話:好的設計都是看不見的。
這裡說的不是真的看不見(要真看不見還搞啥),而是說讓用戶察覺不到它的存在是多餘的。要做到統一不僅要做到均衡的構圖,讓畫面整體具有穩定性,還要透出空間感,不會使得用戶覺得在使用的過程中產生擁擠的念頭。而創新並給用戶帶來驚喜就是後話了。
美觀
其實美觀沒什麼好說的,因為每個人對它認知是不同的。新人覺得美觀是把一個界面做到漂亮;而資深設計師就知道美觀是讓界面的設計無瑕疵,整齊,細節完美。
簡單來說說美觀的幾個方面:
1.文字:一個界面要做到信息閱讀流暢,符合人們閱讀習慣。
2.顏色:不要為了突出設計感,就採用誇張的顏色來設計,有時候簡單的搭配反而更能體現出產品的功能。
3.圖標:大家都說一個交互設計師的功底是看交互設計文檔,那麼一個UI視覺設計師的功底看什麼呢?沒錯,就是圖標。
4.布局:有時候一個界面的布局好壞不能完全看交互設計師,這裡面視覺的設計至關重要,即使做得再爛的布局都是可以通過視覺設計師來逆轉乾坤的(不包括搗亂的那些孩子)。
再提一個點,動效,當然動效也屬於美觀中的一種。近年非常流行動效,很多設計師沉迷其中,然後在自己的產品中加入各式各樣的動效。其實,動效是是一把雙刃劍,這裡也不詳說了,大家有需要我可以單獨出一篇動效的文章。只要在設計的過程中把控好度,動效是可以起到美化產品的作用的。
總結
說完上面這四個原則,大家可以聯繫自己的產品去想想是不是這麼回事。
清晰 > 流暢 > 統一 > 美觀,一個好的產品一定是按照這個順序來設計產品的。
在做設計之前一定要理解需求再下手,如果你的界面已經滿足需求,就不要再加入其它元素了,千萬不要覺得頁面太簡單東西太少,我就要加入其它東西來充實,這樣很傻。
如果之前沒有考慮到這四個點來做設計,那從現在開始好好想想自己應該怎麼入手。
清晰,理解需求;
流暢,明確用戶目標;
統一,界面元素保持一致;
美觀,做到簡約而不簡單。
推薦閱讀:
※Portfolio Critique #6 - Facebook by 劉昕雯
※豆瓣 2012 年 5 月的改版的用戶界面設計如何?
※【 可用性原則 】
※談論 AirPods 的時候,我們還可以聊些什麼?
※這個控制項叫:Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤