設(shè)計(jì)可用性設(shè)計(jì)原則

? ? ? ?最近拜讀了點(diǎn)石成金這本web和移動(dòng)設(shè)計(jì)的經(jīng)典書,雖然在移動(dòng)互聯(lián)網(wǎng)時(shí)代,web設(shè)計(jì)會(huì)顯得有點(diǎn)過時(shí),但是里面有一些基本的設(shè)計(jì)原則,應(yīng)該是值得所有人借鑒的,就像作者所說:“人類大腦的容量不會(huì)馬上發(fā)生變化,所以這些人類行為研究所得到的成果在很長(zhǎng)時(shí)間內(nèi)都不會(huì)失效,20年前他們遇到的困難,現(xiàn)在同樣如此“。 這些可能是很常識(shí)性的原則,但是大道至簡(jiǎn)。了解這些設(shè)計(jì)原則,并舉出說明,力圖提高自己對(duì)設(shè)計(jì)感覺的把握能力,設(shè)計(jì)小白,勿喜輕噴。

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


老版本12306


新版本12306

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

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


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

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


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


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


此處可以添加咕咚設(shè)備了,好的跑渣知道了


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


微信電話本拔號(hào)功能仿照蘋果系統(tǒng)的撥號(hào)設(shè)計(jì)

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


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

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


上圖中公司名稱,圖片,面試評(píng)分分別加粗,放大,顏色顯示用以突出重要性

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


飛豬APP中免簽落地簽、高星酒店控等放在旅行主題下

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


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

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


網(wǎng)易云音樂把音頻分為知識(shí)技能和商業(yè)財(cái)經(jīng)等模塊


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


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

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


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

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


加粗的標(biāo)題和簡(jiǎn)潔的段落,看起來干凈

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


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

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



某車APP歡迎詞占用了大量空間,好奢侈~

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


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

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


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

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


電商網(wǎng)站除了支持在首頁搜索之外,還支持在店鋪內(nèi)進(jìn)行搜索

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


從淘寶進(jìn)入天貓超市之后的界面,對(duì)于電商APP來講,信息量在大,空間在不夠用,在頂端還是有顯示天貓超市的頁面說明。

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è)試過程

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


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

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


Boss直聘中,對(duì)于公司信息展示,讓用戶評(píng)判是否有用

24.好的設(shè)計(jì)需要減少用戶操作


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


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


支付寶里面,對(duì)于上銀行匯款,在功能中添加了使用幫助,? 對(duì)于常見問題都做了解答
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,765評(píng)論 25 709
  • 用兩張圖告訴你,為什么你的 App 會(huì)卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 13,913評(píng)論 2 59
  • 下面的原則對(duì)于有效的用戶界面的設(shè)計(jì)和實(shí)現(xiàn)都是最基本的,不管是針對(duì)傳統(tǒng)的圖形用戶界面還是針對(duì)任意的可聯(lián)網(wǎng)的智能電子設(shè)...
    arlene112閱讀 2,400評(píng)論 0 16
  • 文/儒行道心 ? 今天我在圖書館正學(xué)習(xí)著,突然朋友小A給我發(fā)來微信: 真無語,大學(xué)第一次逃課,就被老師抓個(gè)正著,也...
    儒行道心閱讀 790評(píng)論 5 2
  • 清明小長(zhǎng)假三天,天氣都比較涼,今天最后半天,眼看著氣溫升高了不少,再不出游,假期就結(jié)束了。 我催促老公吃了午飯趕緊...
    百合小香閱讀 340評(píng)論 1 6

友情鏈接更多精彩內(nèi)容