乾貨分享!優秀介面設計技巧(一)

發表於2015-12-20

GoodUI.org 網站提供了近百條介面設計技巧,並且還在不斷更新中。這些技巧非常實用,我打算乘這段空檔期把它們譯完。

本系列譯自GoodUI.org,文章索引

1. 儘量使用單列布局

單列布局能更好地引導使用者自上而下閱讀,而多列布局則會分散使用者的注意力。最好使用有邏輯的敘述來引導使用者,並在文末提供一個呼籲使用者行動的按鈕。

 

2. 提供禮物,不要急著推銷產品

展現友好的姿態,比如給使用者一份精美的小禮品。這種方式建立在互惠基礎上,能有效地獲得使用者好感,並讓你在接下來的活動中更加順利。

 

3. 合併相似功能

在專案過程中,我們很容易建立重複的模組、元素或功能。而通常情況下,模組越多使用者學習成本越高。所以請重構你的頁面,合併相似功能,讓它更精簡。

 

4. 來自使用者的評價好過自吹自擂

使用者好評能有效地提高轉化率。當潛在使用者看到其他使用者討論、贊同你的產品時,更有可能採取行動。所以儘量提供證據,讓這些評論真實可信。

 

5. 重複關鍵操作

這種方法適用於頁面很長或是分頁的情況。我們不希望在一個頁面中反覆出現相同的資訊,但當頁面足夠長的時候這種重複就有必要了。我們可以在頁面頂部放置一個按鈕,然後在頁面底部再放置一個更顯眼的按鈕。當人們到達底部時,會停下來思考下一步應該做什麼,這時候他可以點選底部的按鈕,而不用返回頂部進行操作。

 

6. 區分「可點選」和「被選中」的樣式

一些視覺風格,比如顏色,層次的區分和對比,可以更好地幫助使用者使用產品,讓使用者知道自己處在什麼頁面,可以跳轉到哪些頁面。要達到這樣的效果,你需要將可點選的元素(連結、按鈕)、被選中的元素和普通的文字以相同的規則區分開來。在下面的案例中,我將「可點選」元素統一指定為藍色,「被選中」元素統一指定為黑色,這樣的設計讓使用者更容易學習和使用。

 

7. 給出推薦選項

當有多個選擇時,提供一個推薦項是不錯的做法。一些心理學研究表明,使用者面臨的選擇越多時,越難做出決定。為了克服這個問題,我們可以高亮或強調某個選項,來幫助使用者做出選擇。

 

8. 提供撤銷操作來替代確認提醒

撤銷比確認提醒更符合人類的本能,而且操作起來更順暢平滑。我認為使用者大多數操作都是正確的,只有在極少數情況下才會誤操作,所以在使用者每次操作時都進行確認提醒很不人性化。提供撤銷操作來替代確認提醒,可以讓使用者有一切控制在自己手中的感覺。

 

9. 為明確的目標使用者,而不是全部使用者設計

你的目標是全體使用者,還是某個明確的使用者群體?顯然應該是後者,你需要明確你的產品為誰服務。通過不斷了解目標使用者的需求和標準,你能夠和他們有更多的交流機會,並且為他們提供更優質的服務。這種策略帶來的風險是,你可能會讓自己的功能變得不那麼全面,也縮小了潛在使用者的範圍。但這種做法能贏得目標使用者的信任。

小貼士:喜歡下圖小人的風格麼?去了解下MicroPersonas吧。

 

10. 直截了當,不要優柔寡斷

你可以用不確定的語氣表達,也可以通過很自信的方式表達。如果你的語氣以「可能」、「也許」、「有興趣?」和「要嗎?」等不確定的表述用語結尾,那麼你完全可以把語氣變得堅定點。不過有的時候適當放鬆措詞能給使用者更多思考空間。

 

11. 對比要鮮明

好的介面重點突出,與周圍的元素區分開。突出重點有很多種方式。你可以讓某個元素使用深色調,和其它淺色調元素區分開;還可以為元素增加陰影和漸變來突然對比;最後,你也可以選擇互補色(比如黃色和紫色)來提高對比度。綜合使用以上方法,就能讓重點從其它元素中凸顯。

 

12. 提供個性化介紹

在介紹產品時,增加一些個性化的資訊(比如原產地),會讓使用者覺得產品友好和親近。通常,指明產品在哪裡被製造還能夠讓使用者下意識地認為產品有較好的質量。

 

13. 精簡表單欄位

人類生性懶惰,沒有人喜歡填寫一堆表單。表單中每個欄位都有可能讓使用者放棄填寫。每個人打字速讀不同,在移動裝置上打字更是一件苦差事。儘可能刪除沒必要的欄位,只保留那些有必要的。如果真的有很多資訊要使用者填寫,試著將它們分散在不同頁面,一頁提交後再填寫下一頁。

 

14. 直接放出選項

每一個下拉選單,都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少,那麼最好不用下拉選單,直接把選項列出來讓使用者選擇。下拉選單可以用在那些可預測、不需要學習成本的地方(比如日期、省份等),偶爾還能用在一些需要反覆操作的地方(比如操作選單)。總之,謹慎使用下拉選單,重要選擇最好不要使用下拉選單。

 

15. 暗示頁面還有下文

可滾動的長頁面挺好,但是請注意,如果使用者看到頁面下方一片空白,會認為網頁已經到達底部,哪怕後面有內容也會被忽略。如果你的頁面需要滾動才能看到全部內容,那麼,你需要建立一個視覺模式或節奏,讓使用者可以感知到後面還有內容。

相關文章