超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

再也不怕做排行等級(jí)類(lèi)的需求了!

2022-12-13    資深UI設(shè)計(jì)者

大家平時(shí)多的界面應(yīng)該都是常規(guī)類(lèi)型的居多,應(yīng)該很少會(huì)接觸到游戲類(lèi)型的界面設(shè)計(jì)吧?哈哈。今天就給大家分享一個(gè)游戲類(lèi)型的排行榜界面,看看是怎么做。和咱平時(shí)的又有什么不同呢?

先來(lái)看看效果:

確實(shí)和普通頁(yè)面還是有很大差異的哈,可以發(fā)現(xiàn)所有的模塊更風(fēng)格化,也蘊(yùn)含了光影細(xì)節(jié)在里面。

這樣一張界面細(xì)節(jié)很多,我們今天主要講講1、2、3名的頭像框怎么做出等級(jí)差異。

1. 明確風(fēng)格

首先我們就要先明確游戲風(fēng)格的界面和普通界面有什么不同,特點(diǎn)有哪些,造型、光影、質(zhì)感等等。

明確了才能動(dòng)手去執(zhí)行。

2. 等級(jí)差異

大家平時(shí)應(yīng)該也會(huì)遇到很多排行類(lèi)的需求,需要做出等級(jí)感。那是如果如何表現(xiàn)等級(jí)差異的呢?我主要是從以下三個(gè)點(diǎn)去推進(jìn),分享給大家:

2.1顏色

·主色:

首先就是三個(gè)等級(jí)的顏色差異

比如第一名最尊貴,我們就可以選用和背景色對(duì)比最強(qiáng)烈的金色去表現(xiàn)。

金色本身也帶有尊貴感。

第二名和第三名的顏色就可以選用背景的類(lèi)似色或者同類(lèi)色比如紫色和藍(lán)色,讓它們?cè)谝曈X(jué)上天然的弱化下去一個(gè)等級(jí)。

·微漸變:

采用微漸變的形式,讓顏色更豐富,不會(huì)顯得很平,同時(shí)靠顏色的變化也能表現(xiàn)出輕微的質(zhì)感。

2.2復(fù)雜度

第二點(diǎn)就是復(fù)雜度了。

這個(gè)很好理解,就是越重要的,在造型上就會(huì)有越多的細(xì)節(jié)和層次。第一名層次細(xì)節(jié)非常豐富,第三名就簡(jiǎn)簡(jiǎn)單單的,從造型上表現(xiàn)出等級(jí)差異感。

2.3大小

比較常規(guī)的一個(gè)方法就是大小差異了,第一名最大,二三名一樣大就可以了。

3.細(xì)節(jié)精致度

明白了原理,怎么把細(xì)節(jié)做到位也是很重要的,我們拿第一名框的造型舉例,說(shuō)說(shuō)是怎么做出復(fù)雜度這么高的造型的。

3.1 重復(fù)

先有一個(gè)基礎(chǔ)圓,然后我們重復(fù)幾個(gè)。這一步很簡(jiǎn)單,很多同學(xué)都會(huì)做。但也有很多同學(xué)到這就做不下去了。重點(diǎn)要學(xué)會(huì)后面怎么做。

3.2 圓的對(duì)比

全是相同的圓就會(huì)顯得很重復(fù),沒(méi)有細(xì)節(jié)。我們可以調(diào)整圓線段的不同粗細(xì)、形式去增加細(xì)節(jié)。

把他們組合到一起看看。

有點(diǎn)那味了,有些同學(xué)做到這一步就不知道該怎么繼續(xù)了,可能會(huì)繼續(xù)加圓,這肯定是不行的。

3.3 豐富基礎(chǔ)形

如果我們繼續(xù)加圓圈可能又會(huì)變得重復(fù)了,這是因?yàn)槲覀兊幕A(chǔ)形單一,所以我們要加入別的基礎(chǔ)性在畫(huà)面里去。

為了方便理解,我們加入一個(gè)比較直觀的形狀正方形看看:

正方形組合又組成很多三角形,造型一下就豐富了很多!所以基礎(chǔ)形狀的多樣性是我們豐富造型很重要的一個(gè)點(diǎn)哦。

本案例就加入了其它相對(duì)更復(fù)雜一些的基礎(chǔ)形,效果會(huì)更細(xì)膩一些,但道理是相同的。

4. 加入點(diǎn)綴和光影

因?yàn)槭怯螒蝻L(fēng)格的,加上一點(diǎn)外發(fā)光更有感覺(jué),再加上一些星星點(diǎn)綴,可以進(jìn)一步提升豐富度。

看下頁(yè)面效果:

等級(jí)差異明顯,造型精致,整體還是比較滿意的。


  藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。 

作者:菜心輕量文    來(lái)源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司                            

分享本文至:

日歷

鏈接

個(gè)人資料

存檔