2022-12-13 資深UI設(shè)計者
大家平時多的界面應(yīng)該都是常規(guī)類型的居多，應(yīng)該很少會接觸到游戲類型的界面設(shè)計吧？哈哈。今天就給大家分享一個游戲類型的排行榜界面，看看是怎么做。和咱平時的又有什么不同呢？
先來看看效果：
確實和普通頁面還是有很大差異的哈，可以發(fā)現(xiàn)所有的模塊更風(fēng)格化，也蘊(yùn)含了光影細(xì)節(jié)在里面。
這樣一張界面細(xì)節(jié)很多，我們今天主要講講1、2、3名的頭像框怎么做出等級差異。
首先我們就要先明確游戲風(fēng)格的界面和普通界面有什么不同，特點有哪些，造型、光影、質(zhì)感等等。
明確了才能動手去執(zhí)行。
大家平時應(yīng)該也會遇到很多排行類的需求，需要做出等級感。那是如果如何表現(xiàn)等級差異的呢？我主要是從以下三個點去推進(jìn)，分享給大家：
2.1顏色
·主色：
首先就是三個等級的顏色差異
比如第一名最尊貴，我們就可以選用和背景色對比最強(qiáng)烈的金色去表現(xiàn)。
金色本身也帶有尊貴感。
第二名和第三名的顏色就可以選用背景的類似色或者同類色比如紫色和藍(lán)色，讓它們在視覺上天然的弱化下去一個等級。
·微漸變：
采用微漸變的形式，讓顏色更豐富，不會顯得很平，同時靠顏色的變化也能表現(xiàn)出輕微的質(zhì)感。
2.2復(fù)雜度
第二點就是復(fù)雜度了。
這個很好理解，就是越重要的，在造型上就會有越多的細(xì)節(jié)和層次。第一名層次細(xì)節(jié)非常豐富，第三名就簡簡單單的，從造型上表現(xiàn)出等級差異感。
2.3大小
比較常規(guī)的一個方法就是大小差異了，第一名最大，二三名一樣大就可以了。
明白了原理，怎么把細(xì)節(jié)做到位也是很重要的，我們拿第一名框的造型舉例，說說是怎么做出復(fù)雜度這么高的造型的。
3.1 重復(fù)
先有一個基礎(chǔ)圓，然后我們重復(fù)幾個。這一步很簡單，很多同學(xué)都會做。但也有很多同學(xué)到這就做不下去了。重點要學(xué)會后面怎么做。
3.2 圓的對比
全是相同的圓就會顯得很重復(fù)，沒有細(xì)節(jié)。我們可以調(diào)整圓線段的不同粗細(xì)、形式去增加細(xì)節(jié)。
把他們組合到一起看看。
有點那味了，有些同學(xué)做到這一步就不知道該怎么繼續(xù)了，可能會繼續(xù)加圓，這肯定是不行的。
3.3 豐富基礎(chǔ)形
如果我們繼續(xù)加圓圈可能又會變得重復(fù)了，這是因為我們的基礎(chǔ)形單一，所以我們要加入別的基礎(chǔ)性在畫面里去。
為了方便理解，我們加入一個比較直觀的形狀正方形看看：
正方形組合又組成很多三角形，造型一下就豐富了很多！所以基礎(chǔ)形狀的多樣性是我們豐富造型很重要的一個點哦。
本案例就加入了其它相對更復(fù)雜一些的基礎(chǔ)形，效果會更細(xì)膩一些，但道理是相同的。
4. 加入點綴和光影
因為是游戲風(fēng)格的，加上一點外發(fā)光更有感覺，再加上一些星星點綴，可以進(jìn)一步提升豐富度。
看下頁面效果：
等級差異明顯，造型精致，整體還是比較滿意的。
藍(lán)藍(lán)設(shè)計的小編 http://yvirxh.cn