激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計中的一致性原則

發(fā)布時間：2024-03-17 20:56:24 瀏覽量：290次

　　為什么一致性在UI設(shè)計中很重要，我們平常掛嘴邊的一致性原則到底是什么?一致性原則如何影響用戶行為?價值在哪里?

　　今天我就帶大家探討我們在處理界面的時候，如何遵循一致性原則，該如何去做?

　　一致性原則的優(yōu)勢

　　我們遵循一致性的原則目的是為了減少用戶認知負荷，用戶能夠輕易上手使用產(chǎn)品，熟悉的導(dǎo)航路徑，熟悉的設(shè)計模式。

　　我們知道，我們的用戶是忙碌的，沒有耐心，他們不愿意花更多時間來學(xué)習(xí)使用你的產(chǎn)品。所以我們在做設(shè)計時候，就盡量多遵循常用的UI Patterns，它是什么?是一種常用可用性問題的一種通用解決方案。

　　但是如果一味遵循常有的Design Patterns，會導(dǎo)致我們界面看起來無創(chuàng)新，那么該什么時候突破這種界限，下面我會簡單舉例說明。

　　影響它的關(guān)鍵要素

　　顏色、間距、字體大小、圖標一致性、規(guī)則一致性、交互操作等，我們在做界面設(shè)計時，如何科學(xué)把控這些?

　　這里就要告訴大家一個常用的設(shè)計法則“重復(fù)”“節(jié)奏”“韻律”，學(xué)過平面設(shè)計的同學(xué)應(yīng)該知道，這幾個點吧，在平面設(shè)計中運用比較多的種設(shè)計方法。

　　舉一個例子，重復(fù)如何運用在UI設(shè)計中?

　　重復(fù)間距



　　上兩圖中，我們看可以看出里面設(shè)計采用的間距都是基于8的倍數(shù)，并重復(fù)運用。有節(jié)奏、有韻律的重復(fù)使用這些間距，可以產(chǎn)生節(jié)奏美。

　　重復(fù)控件


　　上圖facebook截圖，UI設(shè)計中的一致性原則https://www.aaa-cg.com.cn/ui/2651.html按鈕表象層圓角基因一致。如果有大小差異，它們使用參數(shù)化原則去定義圓角，大一點的控件圓角大一些，反之亦然。

　　布局規(guī)則


　　上圖是騰訊視頻界面截圖，我們可以看到他們在布局上制定了一些規(guī)則。

　　一致性原則影響著用戶行為

　　如導(dǎo)航模式;一級導(dǎo)航，二級導(dǎo)航，如果采用常用設(shè)計模式，用戶基本可以很輕松的找到自己想要的內(nèi)容。

　　再來說下顏色如何影響用戶行為：比如系統(tǒng)里面定義藍色是可點擊的顏色，那么我們在做設(shè)計是時候就要注意，哪些可點擊，顏色使用是否合理，同類顏色，表達相同的含義，就不能用在其他意義的元素上。

　　大原則：相同含義的元素在不同的地方執(zhí)行相同的操作時候，反饋機制需要一致。


　　上圖左邊是ios的開關(guān)，右邊是materials design 材質(zhì)設(shè)計系統(tǒng)的開關(guān)，這兩種開關(guān)大同小異，它符合用戶心理表真，我們?nè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)鍵元素的一致性的運用，確保產(chǎn)品整體體驗一致。

　　1.顏色：在使用顏色上需要嚴格去定義，比如綠色用于正確顏色，紅色用語錯誤顏色，藍色是可以點擊顏色，這些都是常用的設(shè)計模式。

　　2.布局/排版：布局遵循最小化設(shè)計原則，導(dǎo)航路徑清晰可見，一級導(dǎo)航和二級導(dǎo)航一定要區(qū)分清楚，二者不可混用，排版布局上盡量遵循格式塔心理學(xué)原理。

　　3.字體：一個app使用一種字體貫穿整個產(chǎn)品設(shè)計，字體大小運用重復(fù)原則，重復(fù)可以使其保持一致性。

　　4.交互：這里我簡單說下，操作模式，反饋機制要符合用戶心理表真，常用功能操作流程要和外部環(huán)境保持一致性，比如我點擊界面上藍色文字這時候就要有正確反饋機制，而不是出一個彈窗。

　　5.圖標：圖標一致性我相信大家都懂吧，以前寫了一篇關(guān)于圖標規(guī)范的，有興趣的可以去看下，5招輕松打造系統(tǒng)圖標規(guī)范。


扁平化UI設(shè)計干貨

女生適合學(xué)UI設(shè)計嗎

UI設(shè)計中的12個基本動效

UI設(shè)計中的排版設(shè)計技巧

審美不好可以學(xué)習(xí)UI設(shè)計嗎

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定