身邊常見的25個(gè)設(shè)計(jì)可用性原則

12 評(píng)論 13179 瀏覽 194 收藏 13 分鐘

《點(diǎn)石成金》說過:“人類大腦的容量不會(huì)馬上發(fā)生變化,所以這些人類行為研究所得到的成果在很長(zhǎng)時(shí)間內(nèi)都不會(huì)失效,20年前他們遇到的困難,現(xiàn)在同樣如此”。分享里面一些常識(shí)性的設(shè)計(jì)原則,了解它們,并結(jié)合身邊的一些設(shè)計(jì)說明,不為其它,只為自己的設(shè)計(jì)Sense。

01

當(dāng)看一個(gè)頁(yè)面時(shí),它應(yīng)該是不言而喻,一目了然,自我解釋的,糟糕的設(shè)計(jì)是大而全,什么都往里面放。

12306改版前后相信大家一眼都能看出,改版之后把最重要的車票查詢放到中心位置,去除了一些無用的展示,整個(gè)界面清爽了很多,用戶進(jìn)來就能鎖定中間車票查詢。

02

永遠(yuǎn)不要讓用戶花時(shí)間去思考某個(gè)東西是否點(diǎn)擊,所以鏈接和按鈕應(yīng)該明顯。

上圖中某行APP中財(cái)富、轉(zhuǎn)賬等按鈕,底色是藍(lán)色,按鈕是白色,第一時(shí)間我考慮這些按鈕是否能點(diǎn)擊,同時(shí)我第一感覺“下午好,XXX”這個(gè)歡迎詞是否也能點(diǎn)擊。

03

命名不要自以為很酷或者自以為很聰明,應(yīng)該是顯而易見的。

某音頻APP有個(gè)功能叫一鍵聽,相對(duì)于旁邊的經(jīng)典必聽、每日必聽,剛看到這個(gè)按鈕的時(shí)候真不知道里面是什么內(nèi)容。

04

如果不能做到讓一個(gè)頁(yè)面不言而喻,那么至少應(yīng)該讓它自我解釋,比如:一些復(fù)雜界面或者新功能,需要做簡(jiǎn)單的解釋說明。

咕咚APP上線了硬件產(chǎn)品后,提示“點(diǎn)擊此處可以添加咕咚裝備了”,好的本跑渣知道了。

05

盡量利用習(xí)慣用法,習(xí)慣用法能讓人瞬間理解,所以應(yīng)該多研究主流產(chǎn)品的設(shè)計(jì),找到用戶的習(xí)慣用法。

微信電話本拔號(hào)功能仿照蘋果系統(tǒng)的撥號(hào)設(shè)計(jì),這是騰訊的強(qiáng)項(xiàng),但毫無違和感。

06

設(shè)計(jì)創(chuàng)新要慎重,因?yàn)榇蟛糠謩?chuàng)新可能是重復(fù)造輪子,如果想要對(duì)已有的習(xí)慣進(jìn)行創(chuàng)新,那么一定要確認(rèn)這是更好的,更實(shí)用的。

大部分APP的首頁(yè)都是搜索+功能塊+banner設(shè)計(jì),當(dāng)設(shè)計(jì)一款新APP的時(shí)候,如果不知道如何布局,可以直接參考,因?yàn)橛脩袅?xí)慣了。

07

越重要的部分越突出,比如:標(biāo)題字體更大,更粗,顏色更特別,旁邊有更多空白。

拉勾APP從出道開始就是很高的設(shè)計(jì)水準(zhǔn),上圖中公司名稱、圖片、面試評(píng)分分別加粗、放大、顏色顯示用以突出重要性。

08

邏輯上相關(guān)的部分也在視覺上相關(guān),比如:可把相近的內(nèi)容分成一組,放在同一個(gè)標(biāo)題之下。

飛豬APP中免簽落地簽、高星酒店控等放在旅行主題下,這種設(shè)計(jì)在APP中比較常見了。

09

邏輯上包含的部分在視覺上進(jìn)行嵌套中。

去哪兒APP首頁(yè)中酒店和包含關(guān)系的特價(jià)酒店、海外酒店用同一種顏色顯示,在視覺中達(dá)到嵌套效果。

10

把頁(yè)面劃分成明確定義的區(qū)域,這樣可以讓用戶很快決定關(guān)注頁(yè)面的哪些區(qū)域,或者跳過哪些區(qū)域。

網(wǎng)易云音樂把音頻分為知識(shí)技能和商業(yè)財(cái)經(jīng)等模塊,這是APP中的塊設(shè)計(jì)(這點(diǎn)太常見了,但是至少知道了為什么這么設(shè)計(jì))。

11

明顯標(biāo)識(shí)可以點(diǎn)擊的地方,可以點(diǎn)擊相當(dāng)于視覺掃描的線索,比如:用戶需要關(guān)注哪些地方可以點(diǎn)擊,用某種形狀、某些位置、某些格式標(biāo)識(shí)。

我們小區(qū)APP中,把開門按鈕設(shè)計(jì)成鑰匙形狀并且顏色上凸顯出來,點(diǎn)擊開門按鈕就可以直接開門。

12

降低視覺躁聲,比如:眼花繚亂、組織不當(dāng)、太過密集等。

APP由于屏幕比較小,擺放內(nèi)容有限,但是當(dāng)web界面有大把面積給到設(shè)計(jì)師充分發(fā)揮的時(shí)候,結(jié)果上面那個(gè)界面讓我有密集恐懼癥。

13

為文本設(shè)置格式,以便掃描,比如:使用標(biāo)題,保持段落簡(jiǎn)短,和使用符號(hào)列表,突出關(guān)鍵詞等。

加粗的標(biāo)題和簡(jiǎn)潔的段落,看起來干凈(網(wǎng)易的界面從來沒讓我失望過)。

14

必要的幫助和支持,提供簡(jiǎn)短、及時(shí)、不會(huì)錯(cuò)過的幫助和支持。

某車APP進(jìn)入之后,有個(gè)toast提示新的改版功能點(diǎn)。

15

歡迎詞必須消滅,歡迎詞就像閑聊,內(nèi)容無所謂。

某車APP歡迎詞占用了大量空間,并且還顯示了11月15日,星期四?

可是一般手機(jī)都有日歷,浪費(fèi)空間好奢侈~

16

不要忽視導(dǎo)航的用途,導(dǎo)航幫助我們找到想要的任何東西和告訴我們現(xiàn)在身在何處。

除了傳統(tǒng)意義上的類目導(dǎo)航,天貓對(duì)于商品詳情頁(yè),還設(shè)置了頁(yè)面目錄,把過長(zhǎng)的詳情頁(yè)拆分成幾大塊,以卡片的形式展示,方便用戶選擇,這個(gè)有點(diǎn)贊。

17

讓一個(gè)返回主頁(yè)的按鈕始終可見,讓用戶無論迷失到何種地步,都能重新開始。

APP設(shè)計(jì)中,當(dāng)界面下拉很深的時(shí)候,支持點(diǎn)擊返回到頂部,京東有,為什么天貓沒有?

18

喜歡搜索的用戶比喜歡瀏覽的用戶更多,除非界面非常小,否則每個(gè)頁(yè)面都應(yīng)該有一個(gè)搜索框或者搜索頁(yè)面的鏈接。

電商網(wǎng)站除了支持在首頁(yè)搜索之外,還支持在店鋪內(nèi)進(jìn)行搜索,信息量越大,搜索就越重要。

19

每個(gè)頁(yè)面都需要一個(gè)名稱,就像每個(gè)拐角都應(yīng)該有一個(gè)路牌一樣。

從淘寶進(jìn)入天貓超市之后的界面,對(duì)于電商APP來講,界面元素已經(jīng)夠擁擠了,空間再不夠用,在頂端還是有顯示天貓超市的頁(yè)面說明。

20

一個(gè)網(wǎng)站應(yīng)該有一個(gè) 個(gè)性、生動(dòng)、還有點(diǎn)俏皮的口號(hào)。

keep的口號(hào),讓我對(duì)生活充滿的敬畏和期待~。

21

沒有簡(jiǎn)單的正確答案,良好的、一體化的設(shè)計(jì)能滿足需要,也就是說,經(jīng)過仔細(xì)考慮,實(shí)現(xiàn)和測(cè)試的設(shè)計(jì)就是好設(shè)計(jì),如果有爭(zhēng)執(zhí),那么就讓做一個(gè)可用性測(cè)試

找一個(gè)安靜的屋子,安排一次可用性測(cè)試活動(dòng)。

22

讓用戶感受到設(shè)計(jì)過程是花了心思的。

樂刻APP開屏?xí)r顯示樂刻用戶的照片和視頻,讓用戶的參與感更強(qiáng)(上圖用戶正面比背影更帥,這個(gè)我知道)。

23

好的設(shè)計(jì)需要有良好的反饋,促進(jìn)設(shè)計(jì)者能夠不斷的改進(jìn)。

Boss直聘中,對(duì)于公司信息展示,讓用戶評(píng)判是否有用,個(gè)人覺得注冊(cè)資本、法人代表沒啥用,最好加上公司介紹和產(chǎn)品介紹。

24

好的設(shè)計(jì)需要以用戶為中心,最大化的減少用戶操作。

網(wǎng)易云音樂截屏后系統(tǒng)自動(dòng)彈出圖片分享渠道,網(wǎng)易比別人更懂我一步。

25

知道用戶可能有哪些疑問,并且給予解答。

支付寶里面,有個(gè)“上銀匯款”功能,他們可能知道我不知道這個(gè)是啥,在功能中添加了使用幫助, 對(duì)于常見問題都做了解答(結(jié)束了)

 

本文由 @青蛙王子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 尼爾森原則拆稀碎 ?

    來自北京 回復(fù)
    1. 我沒讀過怎么辦 ??

      來自浙江 回復(fù)
  2. 真的一針見血,好文!!

    來自福建 回復(fù)
    1. 信了你的鬼,你個(gè)小可愛

      來自浙江 回復(fù)
  3. 這個(gè)網(wǎng)站在閱讀文章時(shí)也應(yīng)該在其他地方也增加點(diǎn)贊和收藏按鈕,比如文章最上方(登錄后會(huì)自動(dòng)刷新頁(yè)面至網(wǎng)站頂部)或者是在側(cè)邊欄(閱讀過程中想要收藏以后再看),只能拉倒最下方去收藏確實(shí)不太方便,尤其是文章篇幅長(zhǎng)的情況下

    來自江蘇 回復(fù)
    1. 那你最后收藏了么? ??

      來自浙江 回復(fù)
    2. 那是必須滴

      來自江蘇 回復(fù)
  4. 簡(jiǎn)單粗暴的分析

    回復(fù)
    1. 就當(dāng)你在夸我了。

      回復(fù)
    2. 我倒是挺喜歡這種舉這種接地氣例子的文章。吸收效果比大段方法論好多了

      來自北京 回復(fù)
  5. 建行的設(shè)計(jì)真的看得很累,功能也不好找

    回復(fù)
    1. 是的啊,可能是提高門檻,讓我們少花點(diǎn)錢

      回復(fù)