優秀Web設計的69條設計原則

好的設計能夠幫助企業提升數據,同時還可以提供用戶一個良好的使用體驗。GoodUI 總結了一個長達69條設計原則的清單(不斷增加中),列舉了他們認為非常重要的設計要點。

與以往的一些文章不一樣的是這裡提到的69點其中有一部分 GoodUI 已經通過 AB Test 驗證過可行性。當然分析報告是需要付費的,單篇39美金。

不過今天討論的重點並不是付費報告,而是這69條設計原則。我按照自己的理解將它們翻譯成了中文並配上圖片,希望對大家有所幫助。

本篇文章內容及圖片均來自於GoodUI,如有翻譯不恰當的地方歡迎大家指正。

01 嘗試使用一列的布局替代多列布局

02 給用戶一些小的利益,別看上去那麼赤裸裸

03 合併相似的功能

04 嘗試展示來自用戶的讚揚,而不是自我表揚

05 重複核心行動點

06 統一視覺規範,提升可識別性

07 嘗試使用推薦的口吻,而不是讓用戶感覺面對一台冷冰冰的機器

08 給用戶吃「後悔葯」的機會

09 告訴用戶產品適用的人群,而不是人人都通用

10 將文案寫得更加的直接,而不是一堆廢話

11 增強主行動點的視覺衝擊力,提升它在頁面中的可對比性

12 讓用戶知道你從哪兒來更易於拉近與用戶的關係

13 將表單做的簡單點,確保用戶在抓狂之前能進入下一步

14 盡量將用戶需要選擇的信息展示出來而不是藏起來

15 頁面的排版需要考慮用戶是否會漏掉底部信息

16 如果頁面的底部有需要關注的行動點,別讓文中過多的外鏈帶走了用戶

17 確保用戶知道自己目前的狀態

18 將利益點融合在行動點中,增強用戶的點擊慾望

19 將行動點與當前信息結合起來

20 將簡要的表單合併到頁面中,減少調整頁面帶來的用戶流失

21 適當的增加延遲動效,讓用戶感知到頁面的變化

22 讓新用戶從嘗試產品入手,而不是一來就面對冷冰冰的註冊表單

23 減少使用線框,這會過多的吸引用戶注意力,而且會讓頁面看上去透不過氣

24 給用戶推銷你能給他帶來的利益,而不是功能

25 一定要注意0結果頁面的設計,這也是引導用戶的好地方

26 給用戶選擇退出的權利,特別是郵件訂閱

27 注意界面元素的一致性,降低用戶學習成本

28 給下拉框增加一些預設值,降低用戶填寫成本

29 延續用戶日常的使用習慣,而不是重新創造

30 嘗試告訴用做些事情降低自己的損失,而不是提升收益

31 提升頁面的視覺層次,增強可閱讀性

32 將同類的操作合併在一起,降低用戶的認知成本

33 表單及時校驗,而不是統一提交後在告訴用戶填錯了

34 嘗試將表單輸入變得更加寬容,讓用戶的填寫更加簡單

35 通過時間增強緊迫感

36 提供用戶可預見性的操作,降低用戶的心理成本

37 儘可能的幫助用戶選擇,而不是讓用戶想破腦袋

38 儘可能將操作區域放大,降低用戶操作成本

39 頁面載入速度很重要,儘可能讓用戶感受到你的網站速度很快

40 如果可以,增加鍵盤快捷鍵,提升操作效率

41 嘗試通過對比來讓用戶感知到性價比

42 嘗試對進度條進行「設計」來降低用戶等待的焦慮

43 根據用戶選擇逐步展示信息,降低無效信息對用戶的干擾

44 有時候較小的承諾比「誇海口」會更容易讓用戶信服

45 嘗試將提示信息弱化,減少對用戶操作的干擾

46 盡量通過系統的功能來簡化用戶的操作

47 用文本配合圖標來降低用戶的認知成本

48 用更自然的語言代替冷冰冰的機器

49 放出一些摘要信息來幫助用戶識別是否需要進一步了解

50 在關鍵的頁面增加用戶權益信息,增強用戶進一步操作的信心

51 將價格進行換算,讓用戶感覺這很便宜

52 記得在成功頁面感謝用戶

53 將數字轉化成易於用戶閱讀的形式,而不是冷冰冰的機器語言

54 告訴用戶選擇的權利和自由「誘惑力」

55 嘗試讓語言更具「誘惑力」

56 通過設計引導用戶的注意力

57 通過友好的對比來展示產品,為用戶做決定提供幫助

58 通過任務機制來提升用戶的滿足感

59 讓用戶了解接下來將要發生什麼事情

60 嘗試用更幽默一些的語言文案

61 任何操作之後都要給出反饋,讓用戶知道操作已經生效

62 注意動效的真實使用情況(Amazon 的類目菜單就是一個很好的例子)

63 注意排版的,不要讓信息過於擁擠

64 嘗試用講故事的方式來傳遞信息,增強用戶的代入感

65 盡量給用戶展示真實的信息,不要欺騙

66 隨著用戶的不斷熟悉簡化界面

67 試著用用戶的口吻展示信息

68 在表單中增加一些提示信息,減少錯誤的幾率

69 最後,用簡單的文案傳遞核心關注的信息,少一些廢話

這69條設計原則雖然針對 Web 設計,但有些部分在移動產品設計中同樣有效。翻譯過程只保留了圖片和標題,更多詳細內容可以訪問 GoodUI 官網:

goodui.org/


推薦閱讀:

你幫我看一下,這次的10本設計類書籍厲害嗎? | 美間糧倉
LV、Dior、GUCCI…14家大牌出了狗年限定款,你們對狗有什麼誤解?!
以設計之名,談談不一樣的林肯公園
我想把最冷僻的知識,浪漫地說給你聽 | 軟科普計劃 Vol.1
比圓更圓—視覺感知在UI中的應用

TAG:设计 | 网页设计 |