為什么一致性在UI設(shè)計(jì)中很重要,我們平常掛嘴邊的一致性原則到底是什么?一致性原則如何影響用戶行為?價(jià)值在哪里?
今天AAA教育郭老師就帶大家探討我們?cè)谔幚斫缑娴臅r(shí)候,如何遵循一致性原則,該如何去做?
我們遵循一致性的原則目的是為了減少用戶認(rèn)知負(fù)荷,用戶能夠輕易上手使用產(chǎn)品,熟悉的導(dǎo)航路徑,熟悉的設(shè)計(jì)模式。
我們知道,我們的用戶是忙碌的,沒(méi)有耐心,他們不愿意花更多時(shí)間來(lái)學(xué)習(xí)使用你的產(chǎn)品。所以我們?cè)谧鲈O(shè)計(jì)時(shí)候,就盡量多遵循常用的UI Patterns,它是什么?是一種常用可用性問(wèn)題的一種通用解決方案。
但是如果一味遵循常有的Design Patterns,會(huì)導(dǎo)致我們界面看起來(lái)無(wú)創(chuàng)新,那么該什么時(shí)候突破這種界限,下面我會(huì)簡(jiǎn)單舉例說(shuō)明。
影響它的關(guān)鍵要素
顏色、間距、字體大小、圖標(biāo)一致性、規(guī)則一致性、交互操作等,我們?cè)谧鼋缑嬖O(shè)計(jì)時(shí),如何科學(xué)把控這些?
這里就要告訴大家一個(gè)常用的設(shè)計(jì)法則“重復(fù)”“節(jié)奏”“韻律”,學(xué)過(guò)平面設(shè)計(jì)的同學(xué)應(yīng)該知道,這幾個(gè)點(diǎn)吧,在平面設(shè)計(jì)中運(yùn)用比較多的種設(shè)計(jì)方法。
舉一個(gè)例子,重復(fù)如何運(yùn)用在UI設(shè)計(jì)中?
重復(fù)間距
上兩圖中,我們看可以看出里面設(shè)計(jì)采用的間距都是基于8的倍數(shù),并重復(fù)運(yùn)用。有節(jié)奏、有韻律的重復(fù)使用這些間距,可以產(chǎn)生節(jié)奏美。
重復(fù)控件
上圖facebook截圖,按鈕表象層圓角基因一致。如果有大小差異,它們使用參數(shù)化原則去定義圓角,大一點(diǎn)的控件圓角大一些,反之亦然。
布局規(guī)則
上圖是騰訊視頻界面截圖,我們可以看到他們?cè)诓季稚现贫艘恍┮?guī)則。
一致性原則影響著用戶行為
如導(dǎo)航模式;一級(jí)導(dǎo)航,二級(jí)導(dǎo)航,如果采用常用設(shè)計(jì)模式,用戶基本可以很輕松的找到自己想要的內(nèi)容。
再來(lái)說(shuō)下顏色如何影響用戶行為:比如系統(tǒng)里面定義藍(lán)色是可點(diǎn)擊的顏色,那么我們?cè)谧鲈O(shè)計(jì)是時(shí)候就要注意,哪些可點(diǎn)擊,顏色使用是否合理,同類(lèi)顏色,表達(dá)相同的含義,就不能用在其他意義的元素上。
大原則:相同含義的元素在不同的地方執(zhí)行相同的操作時(shí)候,反饋機(jī)制需要一致。
上圖左邊是ios的開(kāi)關(guān),右邊是materials design 材質(zhì)設(shè)計(jì)系統(tǒng)的開(kāi)關(guān),這兩種開(kāi)關(guān)大同小異,它符合用戶心理表真,我們?nèi)粘I钪屑依餆糸_(kāi)關(guān)不就和這個(gè)類(lèi)似嗎?所以在我們?cè)O(shè)計(jì)這些就可以盡量遵循用戶的心里表真,保持內(nèi)部外部一致性。
再比如在ios系統(tǒng)里面在對(duì)應(yīng)列表上左滑動(dòng)是可以對(duì)該列表操作的,那么在安卓里面的列表設(shè)計(jì)就需要慎用左滑操作。
總結(jié)
一致性設(shè)計(jì)大方向?yàn)楫a(chǎn)品有更杰出的體驗(yàn),在保證用戶體驗(yàn)良好的同時(shí),我們需要與同類(lèi)產(chǎn)品做出差異化競(jìng)爭(zhēng)設(shè)計(jì),這就需要我們平時(shí)多觀察互聯(lián)網(wǎng)設(shè)計(jì)趨勢(shì),國(guó)外設(shè)計(jì)趨勢(shì),集合自己品牌去打造一套好用的產(chǎn)品。
在產(chǎn)品設(shè)計(jì)中我們時(shí)刻留意著關(guān)鍵元素的一致性的運(yùn)用,確保產(chǎn)品整體體驗(yàn)一致。
1.顏色:在使用顏色上需要嚴(yán)格去定義,比如綠色用于正確顏色,紅色用語(yǔ)錯(cuò)誤顏色,藍(lán)色是可以點(diǎn)擊顏色,這些都是常用的設(shè)計(jì)模式。
2.布局/排版:布局遵循最小化設(shè)計(jì)原則,導(dǎo)航路徑清晰可見(jiàn),一級(jí)導(dǎo)航和二級(jí)導(dǎo)航一定要區(qū)分清楚,二者不可混用,排版布局上盡量遵循格式塔心理學(xué)原理。
3.字體:一個(gè)app使用一種字體貫穿整個(gè)產(chǎn)品設(shè)計(jì),字體大小運(yùn)用重復(fù)原則,重復(fù)可以使其保持一致性。
4.交互:這里我簡(jiǎn)單說(shuō)下,操作模式,反饋機(jī)制要符合用戶心理表真,常用功能操作流程要和外部環(huán)境保持一致性,比如我點(diǎn)擊界面上藍(lán)色文字這時(shí)候就要有正確反饋機(jī)制,而不是出一個(gè)彈窗。
5.圖標(biāo):圖標(biāo)一致性我相信大家都懂吧,以前寫(xiě)了一篇關(guān)于圖標(biāo)規(guī)范的,有興趣的可以去看下,5招輕松打造系統(tǒng)圖標(biāo)規(guī)范。
因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc