首頁(yè) >
熱門文章 >
UI設(shè)計(jì) > UI設(shè)計(jì)中高級(jí)感怎么做
UI設(shè)計(jì)中高級(jí)感怎么做
時(shí)間:2020-12-02來(lái)源:m.lb577.com點(diǎn)擊量:次作者:Gella
時(shí)間:2020-12-02點(diǎn)擊量:次作者:Gella
對(duì)于UI設(shè)計(jì)師而言,總會(huì)聽到老板和客戶提“高級(jí)感”這個(gè)詞,想要設(shè)計(jì)出更優(yōu)秀的效果,如何才能提升“高級(jí)感”?
今天AAA教育周老師總結(jié)了幾個(gè)簡(jiǎn)單直觀改善網(wǎng)頁(yè)視覺效果且能提升高級(jí)感的小技巧。年輕人,你可以不講武德隨便用!
1 保持字體一致
在設(shè)計(jì)中盡量減少字體變化,這樣可以使頁(yè)面整體效果看上去更為一致和簡(jiǎn)潔??梢允褂猛蛔煮w的不同字號(hào)和字重進(jìn)行內(nèi)容的區(qū)別。
2改善圖文的對(duì)比度
適當(dāng)調(diào)整圖文之間的對(duì)比度,根據(jù)文本在圖像上的位置,可以選擇有輕微變化的漸變疊加層(比如從上到下或從下到上的漸變),用來(lái)加強(qiáng)圖文對(duì)比。
3盡可能多的提示時(shí)間進(jìn)度
對(duì)于下載、加載、運(yùn)算等一系列需要用戶等待的操作,盡可能多的給予充分的提示,可以使用進(jìn)度條 + 百分比數(shù)字 + icon進(jìn)行顯示,緩解用戶因等待產(chǎn)生的焦慮情緒。
4頁(yè)面統(tǒng)一光源
統(tǒng)一光源會(huì)使頁(yè)面看上去更整體,不統(tǒng)一的光源陰影看上去是一個(gè)小問(wèn)題,卻很容易引起用戶的注意。
5 背景顏色與主體一致
圖片背景的顏色可以從圖片中的主體物上進(jìn)行選擇,能使圖片色調(diào)更加和諧,并使頁(yè)面更有活力。
6 增大功能鍵的有效面積
對(duì)于功能按鍵,盡可能的增大可視面積和點(diǎn)擊面積,標(biāo)簽可以嘗試添加icon,帶有icon的標(biāo)簽會(huì)比純文本標(biāo)簽更易引起用戶注意,更易被點(diǎn)擊。
7 合理選擇文本的對(duì)齊方式
標(biāo)題、小段的文字通常使用居中對(duì)齊,而在大面積的長(zhǎng)篇文本上使用左對(duì)齊。
8 使用色彩和字重來(lái)創(chuàng)造層次結(jié)構(gòu)
使用色彩和字重來(lái)創(chuàng)造層次結(jié)構(gòu),而不是單純的大小對(duì)比。
在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候,最常見的錯(cuò)誤莫過(guò)于過(guò)度依賴字體大小差異來(lái)營(yíng)造對(duì)比。
如果可以的話,你甚至可以采用兩到三種顏色:
主要內(nèi)容采用深色(諸如標(biāo)題,但是不要用純黑)
次要內(nèi)容采用灰色(比如文章發(fā)表日期)
輔助性內(nèi)容采用淺灰色(比如頁(yè)腳中的版權(quán)聲明)
9 按鈕色彩凸顯重要性
在給用戶提供多個(gè)選擇的時(shí)候,可以通過(guò)色彩所傳遞的情緒是積極還是消極的,來(lái)簡(jiǎn)單快速地進(jìn)行設(shè)計(jì)。
10 用字重和明暗來(lái)區(qū)分層級(jí)
尤其是在構(gòu)建文本內(nèi)容的視覺層級(jí)的時(shí)候,可用到的屬性很多,只使用大小差異來(lái)構(gòu)建就顯得過(guò)于單一了。
在很多時(shí)候,可以借助色彩、字重、明暗來(lái)進(jìn)行區(qū)分。我們可以讓更重要的文本更大、字體更粗、色彩更加鮮明,或者使用更深的黑色來(lái)呈現(xiàn)。