UI設(shè)計中一致性如何做?看這篇就夠了
編輯導(dǎo)讀:為什么一致性在UI設(shè)計中很重要,設(shè)計師平常掛嘴邊的一致性原則到底是什么?一致性原則如何影響用戶行為?價值在哪里?本文作者從一致性原則的優(yōu)勢出發(fā),對設(shè)計師在處理界面的時候,如何遵循一致性原則這個問題進(jìn)行了探討,與大家分享。
01 一致性原則的優(yōu)勢
我們遵循一致性的原則目的是為了減少用戶認(rèn)知負(fù)荷,用戶能夠輕易上手使用產(chǎn)品,熟悉的導(dǎo)航路徑,熟悉的設(shè)計模式。
我們知道,我們的用戶是忙碌的,沒有耐心,他們不愿意 花更多時間來學(xué)習(xí)使用你的產(chǎn)品。所以我們在做設(shè)計時候,就盡量多遵循常用的UI Patterns,它是什么?是一種常用可用性問題的一種通用解決方案。
但是如果一味遵循常有的Design Patterns,會導(dǎo)致我們界面看起來無創(chuàng)新,那么該什么時候突破這種界限,下面我會簡單舉例說明。
02 影響它的關(guān)鍵要素
顏色、間距、字體大小、圖標(biāo)一致性、規(guī)則一致性、交互操作等,我們在做界面設(shè)計時,如何科學(xué)把控這些?
這里就要告訴大家一個常用的設(shè)計法則“重復(fù)”“節(jié)奏”“韻律”,學(xué)過平面設(shè)計的同學(xué)應(yīng)該知道,這幾個點(diǎn)吧,在平面設(shè)計中運(yùn)用比較多的種設(shè)計方法。
舉一個例子,重復(fù)如何運(yùn)用在UI設(shè)計中?
1. 重復(fù)間距
上兩圖中,我們看可以看出里面設(shè)計采用的間距都是基于8的倍數(shù),并重復(fù)運(yùn)用。有節(jié)奏、有韻律的重復(fù)使用這些間距,可以產(chǎn)生節(jié)奏美。
2. 重復(fù)控件
上圖facebook截圖,按鈕表象層圓角基因一致。如果有大小差異,它們使用參數(shù)化原則去定義圓角,大一點(diǎn)的控件圓角大一些,反之亦然。
3. 布局規(guī)則
上圖是騰訊視頻界面截圖,我們可以看到他們在布局上制定了一些規(guī)則。
比如欄目與欄目之間才有重復(fù)使用相同布局,2×3(指單個欄目擺放視頻數(shù)量),然后接著下面欄目就是1×1,下面又接著2×3,后面欄目將1X1和2X3集合起來,然后重復(fù)使用。
這樣重復(fù)的網(wǎng)格布局,對我們產(chǎn)品有什么好處呢?大家有沒有發(fā)現(xiàn)目前市面上的視頻類和音樂類的產(chǎn)品差不多這樣布局嗎?(這其實(shí)就是外部一致性原則)。
因為用戶已經(jīng)熟悉且掌握這種模式,不再需要重新學(xué)習(xí)。
那么如何在這種同質(zhì)化的產(chǎn)品中脫穎而出呢?布局中可以使用對比,突出核心功能體驗,又如還可以內(nèi)容優(yōu)于同類產(chǎn)品,品牌特征打造,符號運(yùn)用。
03 一致性原則影響著用戶行為
如導(dǎo)航模式;一級導(dǎo)航,二級導(dǎo)航,如果采用常用設(shè)計模式,用戶基本可以很輕松的找到自己想要的內(nèi)容。
再來說下顏色如何影響用戶行為:比如系統(tǒng)里面定義藍(lán)色是可點(diǎn)擊的顏色,那么我們在做設(shè)計是時候就要注意,哪些可點(diǎn)擊,顏色使用是否合理,同類顏色,表達(dá)相同的含義,就不能用在其他意義的元素上。
大原則:相同含義的元素在不同的地方執(zhí)行相同的操作時候,反饋機(jī)制需要一致。
上圖左邊是ios的開關(guān),右邊是materials design 材質(zhì)設(shè)計系統(tǒng)的開關(guān),這兩種開關(guān)大同小異,它符合用戶心理表真,我們?nèi)粘I钪屑依餆糸_關(guān)不就和這個類似嗎?所以在我們設(shè)計這些就可以盡量遵循用戶的心里表真,保持內(nèi)部外部一致性。
再比如在ios系統(tǒng)里面在對應(yīng)列表上左滑動是可以對該列表操作的,那么在安卓里面的列表設(shè)計就需要慎用左滑操作。
總結(jié)
一致性設(shè)計大方向為產(chǎn)品有更杰出的體驗,在保證用戶體驗良好的同時,我們需要與同類產(chǎn)品做出差異化競爭設(shè)計,這就需要我們平時多觀察互聯(lián)網(wǎng)設(shè)計趨勢,國外設(shè)計趨勢,集合自己品牌去打造一套好用的產(chǎn)品。
在產(chǎn)品設(shè)計中我們時刻留意著關(guān)鍵元素的一致性的運(yùn)用,確保產(chǎn)品整體體驗一致。
- 顏色:在使用顏色上需要嚴(yán)格去定義,比如綠色用于正確顏色,紅色用語錯誤顏色,藍(lán)色是可以點(diǎn)擊顏色,這些都是常用的設(shè)計模式。
- 布局/排版:布局遵循最小化設(shè)計原則,導(dǎo)航路徑清晰可見,一級導(dǎo)航和二級導(dǎo)航一定要區(qū)分清楚,二者不可混用,排版布局上盡量遵循格式塔心理學(xué)原理。
- 字體:一個app使用一種字體貫穿整個產(chǎn)品設(shè)計,字體大小運(yùn)用重復(fù)原則,重復(fù)可以使其保持一致性。
- 交互:這里我簡單說下,操作模式,反饋機(jī)制要符合用戶心理表真,常用功能操作流程要和外部環(huán)境保持一致性,比如我點(diǎn)擊界面上藍(lán)色文字這時候就要有正確反饋機(jī)制,而不是出一個彈窗。
- 圖標(biāo):圖標(biāo)一致性我相信大家都懂吧,以前寫了一篇關(guān)于圖標(biāo)規(guī)范的,有興趣的可以去看下,5招輕松打造系統(tǒng)圖標(biāo)規(guī)范。
看完了你掌握了多少?一致性是視覺分析的其中一種關(guān)鍵環(huán)節(jié),再結(jié)合我之前寫的“認(rèn)知負(fù)荷”可以拿自家APP 去分析一下,現(xiàn)有版本有哪些視覺問題,這樣可以鍛煉自己視覺分析能力!
#專欄作家#
Tony,微信公眾號:洞見設(shè)計,人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計師。很樂意幫助年輕設(shè)計師成長,簡歷指導(dǎo),每周分享最有價值的設(shè)計經(jīng)驗,擅長產(chǎn)品體驗設(shè)計,關(guān)注【洞見設(shè)計】后臺回復(fù)“彩蛋”領(lǐng)取設(shè)計資料。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
不錯
不錯