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

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

如何提高UI設(shè)計(jì)中畫面層次感

發(fā)布時(shí)間：2024-03-14 15:55:49 瀏覽量：124次

　　很多設(shè)計(jì)師容易犯一個(gè)錯(cuò)：設(shè)計(jì)不明確。設(shè)計(jì)一旦不明確，就容易讓用戶產(chǎn)生疑惑，甚至認(rèn)為出現(xiàn)了bug!我的原則就是，要么不做變化，要做咱就做的徹底一點(diǎn)，明確一點(diǎn)!今天我就針對(duì)如何提高UI設(shè)計(jì)中畫面層次感進(jìn)行簡(jiǎn)單的說明。

　　我從以下方面舉幾個(gè)例子：

　　1.間距

　　2.大小

　　3.樣式

　　4.顏色

　　1.間距

　　當(dāng)信息內(nèi)容需要區(qū)隔的時(shí)候，最常用的兩種方式：

　　一種是加一條細(xì)細(xì)的分割線;

　　另一種是加一條粗粗的分割塊：


　　我們有一次在加分割塊的時(shí)候就出現(xiàn)了一個(gè)小失誤，把分割塊設(shè)定為4pt：


　　這樣會(huì)存在什么問題?

　　會(huì)讓用戶懷疑，這是粗一點(diǎn)的線條?還是細(xì)一點(diǎn)的色塊?

　　所以為了避免這樣情況的發(fā)生，線條就細(xì)點(diǎn)0.5pt，色塊就粗點(diǎn)10pt(反正稍微大一點(diǎn)就行)，明確一點(diǎn)：


　　再比如之前有一個(gè)小案例，大概的信息是這樣排版的：


　　不細(xì)看也沒啥大問題，但是仔細(xì)觀察就會(huì)發(fā)現(xiàn)，在間距方面有一定的優(yōu)化空間。圖上有六條信息，實(shí)際是三組，如果間距不做徹底，就會(huì)讓人感覺是獨(dú)立的六組，但如果把間距做的徹底一點(diǎn)：


　　這樣就可以很明確看出，這是三組信息，而不僅僅只是六條信息。

　　所以要么就不分組，既然分了，就分的徹底一點(diǎn)!

　　2.大小

　　界面內(nèi)信息有很多，這么多信息，有些需要強(qiáng)調(diào)，有些可以弱化。

　　很簡(jiǎn)答一個(gè)例子，有時(shí)候大字后面需要跟一個(gè)小字，如果你沒區(qū)分開就是這樣的效果：


　　這樣就很不明確，到底是做了大小變化?還是出現(xiàn)了bug?

　　所以盡量把二者區(qū)分開，比如大小對(duì)比、顏色區(qū)分、粗細(xì)變化：


　　這樣就可以很明確!

　　3.樣式

　　前短時(shí)間有位讀者朋友發(fā)我一組圖標(biāo)，圖標(biāo)源自追波，我覺得整體做的還可以，但是有一個(gè)樣式上的小細(xì)節(jié)可以優(yōu)化下。

　　整體圖標(biāo)樣式都是有厚度的，但是郵件這個(gè)圖標(biāo)看起來就有些猶豫，想表達(dá)厚度，但是又沒表達(dá)清楚：


　　圖標(biāo)源自追波

　　所以可以讓厚度的寬度加大，并且把側(cè)面的顏色和正面區(qū)分開，這樣就可以把厚度更明確的表達(dá)出來。

　　再比如之前做過一個(gè)引導(dǎo)頁，如何提高UI設(shè)計(jì)中畫面層次感https://www.aaa-cg.com.cn/ui/2726.html需要做一個(gè)影帶，最開始做的是這樣的：


　　不知道的還以為是個(gè)手表帶，所以必須要仔細(xì)觀察影帶的特征，并將其明確的表達(dá)出來，比如兩邊的孔是方形的，整體材質(zhì)要軟一下等等：


　　這樣表達(dá)才明確，用戶才不會(huì)困惑!

　　4.顏色

　　下面兩組顏色：


　　左面這組可以很好的突出一個(gè)顏色，而右面這組就很難突出某一個(gè)顏色。

　　在界面設(shè)計(jì)中，有很多場(chǎng)景下，會(huì)有多個(gè)按鈕，我們需要強(qiáng)調(diào)其中一個(gè)，就需要采用這種徹底的對(duì)比方式：


　　而不是讓人模凌兩可，分不清主次的方式：


　　明確一點(diǎn)，用戶就不困惑了。

　　我們?cè)賮硪粋€(gè)例子!

　　其實(shí)工作上有很多優(yōu)化需求都是基于“明確”這個(gè)點(diǎn)展開的，前一陣子做的一個(gè)排行榜獎(jiǎng)牌標(biāo)識(shí)的優(yōu)化，我們看看原來的樣式，就是因?yàn)轭伾珜?duì)比度不夠，產(chǎn)生數(shù)字看不清的情況：


　　在這樣的背景下，我們就可以拉大顏色對(duì)比度，讓數(shù)字更清晰、更明確：


　　這就是基于“明確“這個(gè)點(diǎn)，進(jìn)行的需求優(yōu)化。

　　總結(jié)

　　今天講的都是做設(shè)計(jì)不夠明確的小案例，也是很多朋友容易忽略的問題。

　　ios有一條設(shè)計(jì)原則就是清晰，清晰的本質(zhì)就是做的足夠徹底，該強(qiáng)調(diào)的強(qiáng)調(diào)，該弱化的弱化，比如他們超級(jí)醒目的大標(biāo)題：


　　當(dāng)我們能把設(shè)計(jì)做的足夠明確、足夠有節(jié)奏感的時(shí)候，就可以減少一定的稚嫩，使設(shè)計(jì)更穩(wěn)更成熟!

　　希望能給大家?guī)硪恍﹩l(fā)! 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)給我點(diǎn)個(gè)關(guān)注，我之后還會(huì)發(fā)包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。

UI設(shè)計(jì)中踩過的坑

UI設(shè)計(jì)中的篩選控件指南

UI設(shè)計(jì)中標(biāo)簽欄總結(jié)

UI設(shè)計(jì)色彩趨勢(shì)總結(jié)

超全面UI基礎(chǔ)設(shè)計(jì)規(guī)范

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定