Project Description

全是干貨!UI設計的30條黃金準則!

總的來說,好的UI界面有幾個特征:簡潔、便利、目標明確、人性化。字面上看這幾點貌似很簡單,但是考慮到我們的營銷目標、考慮到內容復雜度,要確確實實達到這個目標卻非常困難。下面列出的這些經驗,一直以來在WeX5應用開發者社群中反復被驗證,簡單實用、極具操作性,WeX5開發工具強烈推薦給所有應用開發者及愛好者!

注:內容轉化率是指用戶瀏覽頁面的時候能被用戶吸收的內容比率。

1. 嘗試使用一列布局代替多列布局

單列布局可以讓你更好地掌控你的內容。

單列布局可以引導你的讀者很自然地從上至下瀏覽內容,而這個瀏覽順序對內容排版的重要性再怎么強調也不過分,可以說所有UI設計都是為了引導用戶的瀏覽和交互。而相反的,多列布局會分散用戶的注意力,使得用戶無法聚焦在你的內容主旨上。最好的做法是以一個敘事的方式來引導用戶,并在文末亮出你的中心主旨以作強調??赡苣銜X得兩側的留白很是浪費,但是請你記?。?strong>少即是多!

01-101-2

2. 合并重復的功能

嘗試合并重復的功能,而不是讓各種重復的功能割裂你的界面。

在開發編輯階段,我們總是有意無意地創建很多具有重復功能的模塊。當你審視你的界面,發現很多具有重復功能的模塊時,這表明你的設計有些過度了。過度的設計不僅降低了應用的性能,還會徒增用戶的學習成本。而這與UI設計的黃金原則:“用戶是傻瓜”格格不入!好好審視你的界面吧,等你把你的界面刪上3~5遍的時候,簡潔好用的界面自然就出來了。

記住,刪除比創造更重要!

03-103-2

3. 重復你的主旨

要讓人記住一樣東西的唯一辦法就是重復重復再重復。

你可能不喜歡《最炫民族風》,但它卻深深地刻在你的腦海里,這就是重復的力量,雖然這是樓下大媽硬塞給你的?;氐経I設計上也一樣,當然你絕對不想在一個視窗里面重復10遍你的主旨。一眼過去都是重復的東西,沒有比這更糟糕的了。但是在邊幅較長的頁面或者多個頁面里,這些重復就顯得非常自然了。你完全可以在文章開頭放入你的主旨,然后在文章末尾重復你的主旨,這種重復對用戶來說是自然而便利的。

要讓你的內容記到用戶腦子里?請善用重復!

05-105-2

4. 明確區分可點擊/可選區域

使用顏色、層次、對比等方式來告訴用戶:我在哪,我能到哪里。

為了明確地將這些信息傳達給用戶,界面中可點擊的按鈕和鏈接、可選的選項要與純文本嚴格區分開來,而且要在頁面中貫徹同樣的風格。例如下面的例子,我選擇使用藍色來標記這些元素時可以被點擊的,而黑色文字來標識不可點擊或者指示當前位置,然后在整個頁面中都貫徹這種做法。這樣用戶根本不用思考就知道他所處的位置,他不會嘗試去點擊黑色的文字,自然也不會有發現點擊無效后的一臉懵逼。

記?。?strong>用戶是傻瓜!你不要期望用戶會去研究你那復雜的界面,他只會點擊右上的關閉,并回贈你一句:SB。

06-1 06-2

PS:上圖只是為了說明該原則,而你肯定已經發現這種界面已經過于復雜了,用力刪吧!

5.?直接給出你的推薦,而不是讓用戶選擇

當展示多個選項的時候,直接給出你的重磅推薦是個更好的做法。

盡管你的推薦還是不能滿足所有用戶,但你要相信:大多數用戶其實不知道他們想要什么。據我統計,90%的現代人都患有一種叫選擇困難的不治之癥,患者們最常用的一個詞就是“隨便”。另外,有些研究表明,可選項越多,最后選錯的概率就越大!所以,使用強調來突出你的推薦吧,不要再讓用戶在無盡的選擇中糾結了!

07-1 07-2

6.?使用回撤代替確認選項

想象一下每點擊一個按鈕都彈出一個“請確認是否要xx”的彈窗有多惡心。

相比每個按鈕下都隱藏著一個確認提示,回撤操作可以讓操作更流暢順滑,也更符合人性。而頻繁的確認彈框來質問用戶知不知道這個操作的后果,這簡直是在赤裸裸地嘲諷用戶的智商。況且,如果用戶是錯的,即使你彈窗100遍,他還是會錯的。良好的設計應該是假設用戶的操作是正確的,只有極少數情況才需要確認彈框來防止誤操作。提供一個可回撤的按鈕,已經足夠應對絕大部分情況。

08-1 08-2

7.?多用鮮明對比讓界面易于區分

把你的主旨與周圍的元素區分開來會得到更好的呈現效果。

在現在這種信息爆炸的時代,不要指望用戶會乖乖地通讀你的全文。為了迎合快餐式閱讀,你必須要把你的重點“凸”出來。有各種各樣的辦法可以用來增強區分,你可以用明暗色調來區分,你也可以使用陰影和漸變等手段來豐富界面層次結構,你甚至可以在色相環上選擇互補色(例如黃色與紫色)的方式來增強區分度,突出重點。通過各種加強手段,最后界面就可以將文章主旨和普通元素區分開來,一目了然。

011-1 011-2

記住,重點是要突出的!

8.?保持界面風格一致

保持界面風格一致已經是一個非常經典的原則了。

不同的界面元素會增加用戶的學習成本,過多的元素種類會使得整個界面毫無章法可言。當我們按下一個按鈕或者移動滑塊的時候,我們會學習這個元素的外觀和動作,當我們看到相同的元素時,我們會期待得到相同的結果。如果不能得到相同的結果,那我們就會重新學習這個元素,包括大小、形狀、位置等。另外還有一個著名的論斷:同一個頁面中的顏色不要超過3種!其實說的也是同一回事。

但是,世事無絕對,按照我們上一條規則,界面中某一點的不一致會帶來強烈的反差,這就可以起到很好的強調作用,但是你要記住,強調只能用在一點上,強調100點的后果是什么都強調不了!

027-1 027-2

9.?減少表單

在移動端上,沒有什么事情要比填一大堆表單更讓人抓狂了。

人天生就討厭各種重復性的體力勞動,你的每條表單其實都是在逼迫用戶轉身離開。即使最終用戶填完了表單,在他心中你也早已經是負分了,你后續的服務再優秀也無法填補第一印象的坑。好好琢磨你的表單,把它刪到不能再刪的時候,再刪兩遍,這會讓你的體驗有一個明顯的提升。

請記住另外一個黃金法則:用戶很懶 !

013-1 013-2

10.?暴露你的選項

直接提供你的選項而不是使用下拉菜單。

每一個下拉菜單,都需要用戶的一次額外操作來獲取內容,這顯然與“用戶很懶”相違背。選項不多的時候一定要把選項直接暴露出來,減少用戶操作,而且內容也不會被一個個下拉菜單切割的支離破碎。這里的建議是下拉菜單只用在時間、日歷這種約定俗成的地方,并要給出建議值!什么?你的選項很多,暴露出來太占地方?刪刪刪!不重要的選項統統刪掉。還是那句話:刪除比創造更重要!

014-1 014-2

11. ?保持界面環環相扣而不是平鋪直白

在wex5開發交流群中,大家討論過一個有趣的問題,什么樣的排版會讓用戶很快失去興趣?回答最密集的答案是:大段大段的文字,尤其是對密集恐懼癥患者而言,這樣的界面令人不寒而栗。

據統計,大部分人都有一種看到大段文字就暈的病。滾動的長頁面是不錯,但是我們要適當將其分割成各種小節,將內容做成環環相扣的形式來保持對用戶的吸引力,而且要警惕不要設置過大的空白,否則用戶會因為可能誤認為已到頁面底部而流失。另一個方面,當你寫出了大段文字的時候,就要警惕是否過于啰嗦了。除了界面的精簡,內容的精簡也是必不可少的。一個詞能說明白的事,絕不要用一句話表達!

015-1 015-2

12.?去掉多余的鏈接

為了滿足各種用戶需求,我們會在頁面上放各種各樣的鏈接。但你要注意的是,用戶點擊了其他鏈接之后就有可能不會回到當前頁面了,假如你的目標是為了讓用戶點擊最下面的主旨的話,這就有可能得不償失了。而且頁面中太多鏈接的話,也會將整體內容弄得支離破碎。

所以還是要控制鏈接的數量,少即是多。

016-1 016-2

13.?將操作的狀態呈現出來

讓用戶知道他干了什么。

現在大多數的界面都會將操作的狀態呈現出來,比如說郵件信息是否已讀、賬單是否已經支付等,這些狀態對于用戶來說非常有必要。用戶可以根據當前狀態來決定后續操作,可以說狀態已經是現代界面中必不可少的內容了。另外,狀態操作中也有一些基本原則,比如說已操作過的呈灰色,未操作的成亮色,操作失敗呈紅色等。方案沒有優劣之分,但一旦確定風格,就要嚴格執行。

017-1 017-2

14.?保持操作上下文的連貫性

直接在元素上進行操作當然是最直觀的,如果不能直接在元素上操作,也要保證操作上下文的連貫性。

比如有時候我們要對表格的數據進行操作,這個時候就操作上下文(重寫,刪除,插入等)就不應該放到表格外部,而應該放在當前行,采用鼠標點擊或者懸浮觸發顯示?;蛘咧苯狱c擊元素進行編輯,點擊其他地方則保存,這種方式就更加符合人性了。當然,比如頁面的前進后退這些普通的操作,就要遵守約定俗成的規則了。

019-1 019-2

15.?展示全部內容而不要額外頁面

當頁面足夠的時候,直接給出表單也是一個不錯的做法。

相比點擊之后彈出表單會節省一個點擊操作,而且流程上也簡化了。而且直接呈現表達也很直白地告訴用戶,表單不多注冊很簡單,花不了多少時間。但是當表單比較多的情況下,就會讓人模糊了當前主題,不適用這條規則。哦對了,你確定你一定要那么多表單嗎?還是那句話,少即是多!

020-1 020-2

16.?平滑展示而不是突兀呈現

用戶界面中經常會有各種元素的呈現、隱藏、移動、關閉和尺寸變化,這個時候給變化一個平滑過渡就顯得非常必要,不但美觀而且讓人感覺自然。但要注意的是,過渡時間不能太長,否則可能會有卡頓的感覺,而且用戶耐心也是有限的,不要挑戰用戶耐心!

021-1 021-2

17.?循序漸進的引導而不是上來就讓用戶注冊

一位wex5開發高手說,當大家都習慣了套路時,你一定要學會另辟蹊徑,這句話真是太正確了!與其一上來就讓用戶注冊,何不使用引導的方式讓用戶在體驗中慢慢完成注冊流程呢?

在這個過程中,我們不但可以展現產品特性,也可以了解用戶需求而提供個性化的服務。一旦用戶了解到產品的價值所在,他們就會很樂意去注冊使用你的產品。這種引導注冊的測量既避免了突兀的注冊體驗,也在體驗中幫助用戶做好了一些基本的個性設置。

022-1 022-2

18.?減少邊框,不要浪費用戶的注意力

邊框很吸引注意力,而且是在與內容爭奪注意力!這可不是我們想要的。

上文提到【多用鮮明對比讓界面易于區分】就可以用到邊框,顯然使用邊框可以將內容分區,使得界面更具條理性,但明顯的線條又會使得界面四分五裂。為了達到劃分版塊但又不轉移用戶注意力的目的,在排版時可以不同版塊通過空白進行分隔,或者用上不同的背景色(淺色為宜,顏色種類控制3種以內),將文字對齊方式進行統一,還有就是為不同區域設置不同的樣式。使用可視化設計工具時,我們經常在界面上創建很多區塊,這些區塊多了就會顯得雜亂無章,所以我們又會到處放些線條來分界。但更好的做法是將區塊對齊,使用空白進行分隔,這樣就可以避免線條造成的干擾了。

023-1 023-2

19. 放寬對用戶輸入的驗證

在獲取用戶數據的時候,比如郵箱電話我們會設置一些限制來獲取正確地數據。但是這些限制應該要人性化,包括格式,大小寫之類的就不應該過度限制,這樣界面才會顯得友好。舉個例子:電話號碼的輸入,用戶會有很多輸入方式,帶括號的,帶破折號的,帶空格的,帶區號和不帶區號的等等。如果你在代碼中來處理這些格式的問題,代價也只是你一個人多寫幾行代碼而已,卻可以減少無數用戶的工作量。另外這些驗證要在用戶輸入的時候提示,而不應該在提交之后報錯,沒有比滿心期待卻換來一個報錯更讓人心碎了。

034-1 034-2

20.?讓用戶選擇,而不是輸入

這已經是用戶界面設計的經典準則了。

這個準則是有心理學依據的,要讓某人回想起某樣東西,從一堆東西里面辨認出來更容易些。辨認一樣東西有大量的輸入,我們只要根據這些輸入去有選擇性回憶即可,而回想則只有一點點的輸入信息,需要從整個大腦遍歷,自然是費力許多。而且從交互角度來說,選擇比填寫操作起來簡單不是一丁點,尤其在移動端,過多的輸入簡直是個災難。

wex5開發工具強烈提示:用戶很懶!

037-1 037-2

21.?使用更大的點擊區域和填寫區域

除了要盡可能盡可能地減少輸入表單之外,交互元素(鏈接、輸入框、按鈕等)如果尺寸做得大一點則操作起來會更方便容易些。根據費特定律,使用像鼠標這樣的外設來點擊需要一些時間,特別是元素比較小的情況下,時間會更多。即使在移動端,交互元素的尺寸也要保證一定大小,因為用戶很有可能在一些復雜的環境使用你的服務,比如地鐵公交等場合,這個時候過小的輸入框簡直比身后大叔的肚腩更令人無語。除了把交互元素做大之外,你還可以只把元素可點擊區域(也就是熱區)增大。這樣的一個典型例子是手機設備上的文本鏈接和導航菜單,它們文字不一定很大但背景是拉伸的,在很寬范圍內點擊都有效。

另外除了要增大交互元素的尺寸之外,元素之間的空間也需要保證。除美觀之外,也可以很好避免觸屏上的誤操作。

038-1 038-2

22.?放出禮品更具有殺傷力

沒有什么能比給你的用戶贈送一份禮品更顯友好了。

從更深層的角度來看,贈送小禮品也是一個獲取用戶忠誠度的有效戰術。人的天性都是愛貪小便宜的(特別是女性用戶),他們從來不會記得你的宣傳口號,但他們會牢牢記得從你這里拿到了一包維達紙巾,還蠻香。而且,這個小禮物還會使得你們以后的活動(無論是推銷產品還是展覽)更加順暢。

02-1 02-2

23.?讓客戶說話而不是王婆賣瓜

想想淘寶吧,反正我買東西從來都是直接跳過商品介紹的而看評價的。

當你的潛在客戶看到其他人對你的服務給予好評時,你的機會就會大大增加。所以,努力提供一些含金量高的客戶評價吧,證明這些評價是真實的,這比你通篇大論夸獎自己效果要好上10000倍。

04-1 04-2

24.?直接表明適用人群

你想把你的服務做成適合所有人還是適合一部分人?但你要知道,實際上,這個世界上根本沒有適合所有人的產品或服務。我相信所有人都明白這個道理,也是按照這個原則去提供自己的服務。但是很不幸的是,在宣傳環節我們卻有意無意地忘掉了這一事實。我們總是害怕范圍過窄而失去了潛在的目標客戶,但卻不知道包羅萬象會讓你看起來毫無專業和權威可言。明確自身服務的適用人群,不斷了解客戶的真實需求,從而不斷改進自身的服務。這種透明的反饋機制,可以使得我們的服務更為專業,才能在目標客戶中樹立威信。

09-1 09-2

25. ?直接果斷,不要唯唯諾諾

當你頻繁使用“可能”“大概”“或許”這種詞語的時候,你的不自信就已經暴露無遺。

而自信都是建立在實力之上的,這種模棱兩可的說法也間接說明了你的實力不濟。但過于強硬的說法也另人生厭,所以如何結合這兩種做法就要看你的智慧了。我們通常會在一些原則性的問題上直接表達自己的看法,而一些重要度不高的問題上把主動權交給用戶。

010-1 010-2

26. ?添加個性化標簽

使用一個名字、圖片、產地等方式來介紹你的產品,這具有重要意義。

這可以將溝通帶入特定的環境,同時讓你的產品顯得與眾不同。這與我們與人交往時的自我介紹非常相似,當你在界面中做到這一點的時候,界面就會顯得非常友好。指明你的產品產地同時也是一個宣傳中的小竅門,會讓人感覺產品質量更好。

012-1 012-2

27. ?推銷產品的好處而不是特征

這就是市場。相對產品的特性,用戶更關心這個產品能帶來什么。所以,多列舉產品的好處,多用數據來支撐!然而,當市場上大多數同類產品都這樣的時候,反其道而行之將一堆酷炫的特征拋出來反而更吸引眼球!在這方面真心可以看看錘子手機,人家才不會跟你玩跑分這么low呢。

建議只是建議,要看實際操作,墨守成規要不得。

024-1 024-2

28. ?考慮零數據的設計

界面上經常需要呈現不同數量的數據,從0,1,10,100到10000+等。這里存在個普遍的問題就是:在程序最開始使用的0條數據到過度到有數據之前,該如何進行顯示界面。這也是我們經常忽視了的地方。當程序初始沒有數據時,用戶看到的就是一片空白,此時用戶可能不知道該進行哪些操作。利用好沒有數據的初始界面可以讓用戶學習和熟悉如何使用程序,在程序中創建數據。力臻完美永遠是我們追求的目標,界面設計也不例外。

025-1 025-2

29. ?強調避免損失而不是強調收益

人都喜歡成功,但根據心理學得到的可靠結論,人們一般更頃向于避免失去擁有的東西而不是獲得新的利益。想想也是很合情理:朋友說你明天會賺到500萬,你聽了只會笑笑不說話;而如果朋友告訴你明天你損失500塊,可能你就會緊張地讓他把話說清楚!把這個結論用到產品的設計和推廣中,請告訴用戶們,你的產品可以維護他們的利益、社會地位等,這要比告訴他們你能給他們帶來他新的利益更有效果。想想吧,保險公司是強調我們能拿到多少收益呢?還是強調我們可以避免失去現在擁有的生活質量?

030-1 030-2

30.?給你的服務加上限制條件

這看起來不可思議,但卻屢試不爽!

比如已經用到泛濫的“最后一天含淚甩賣”,在互聯網上換個花樣就是“8月15號前注冊送**天會員”一類的標語。適當的緊迫感是個有效的戰術,他可以促使用戶立即做出決定而不是等上個十天半個月。重要的是這種戰術屢試不爽,因為它暗示了資源的緊缺或者活動的時間有限,今天可以買,但明天可能就無法這么低價了。另一方面,這一戰術也讓用戶感到會錯失一次大好的機會,再一次,應用了人們害怕失去的本性。

另外一個效果奇佳的限制就是滿足**條件才可以獲取服務。是的,這就是饑餓營銷!不要以為饑餓營銷就是限購,你要知道Facebook最開始的限制是要有哈佛的郵箱才能使用,這種限制讓你的服務立馬高大上起來,逼格甩競爭對手何止十條街!可能你會擔心這種限制會減少你的用戶,但事實卻恰恰相反,這只會刺激人們的好奇心和攀比心理。另一方面,這也可以很好地篩選你的核心種子用戶,將精力集中于服務核心種子用戶,這也是初創企業獲勝的法寶。

035-1 035-2

index-icon-weibo index-icon-facebook index-icon-twitter github-1
wen-xin-2
? ?友情鏈接??? | ? ?法律說明? ? ? ? ? 北京起步科技股份有限公司 ??2006-2017 ? ? ? ?京ICP備13007148號