️在近期的项目中，做了一套等级页面，起初页面是这样的。需求方反馈说不够豪华，不够吸引人。
于是又找了很多参考，发现，当主体徽章精致度足够的情况下，用卡片的形式，并不能够很好的展示出徽章的细节。
所以我们可以尝试将徽章像参考那样将其最大化的展现在画面当中，然后用一些简单的辅助元素修饰。
为了更好的表现出等级页面的豪华感，选择沿用了初稿的暗黑模式。并从以下几个方面对等级页面进行了优化
主体物层面
如果只是一个孤零零的徽章放在页面中，画面显得单调不够完整
我们给徽章加上个舞台，使其变得更加饱满。
但发现，这个舞台饱和度过高，质感过强，抢了主体的眼球。而且给人一种“不落地的感觉”，像是悬浮在画面当中。我们回顾参考，不难发现舞台和徽章应用了虚实结合的方式，他们的舞台只起辅助作用，这样会让画面看起来舒服协调。
因此，对舞台做了如下的优化，适当降低舞台的明度，使其与徽章有明暗对比，呈现出虚实结合的感觉。
这样舞台虽不抢主体的眼球了，但舞台层级区分的不明显，而且有些地方还都“糊”在了一起。
根据徽章的光源方向，可以看出主要光源是从上方打下来的。那么舞台的层级就可以以此为修改的着手点。第一层较亮，第二层相对暗下来，第三层最暗的逻辑点做出了以下的修改。
修改后大感觉是对了，但我们还可以通过添加边缘光的方式，使舞台的层级更加丰富细致
在解决了舞台主要问题后，发现舞台是不是可以做“延长”处理，让它延续到下方的图标功能展示页面，这样会让画面更具整体性，而不会像初稿中那样有种割裂感。
️ 背景层面
1 灯光
如上面所说的，知道徽章的主要光源来自上方后，我们可以根据徽章的颜色，选取临近色相加以渐变模糊处理使它成为一束光源，这样不仅会让徽章与环境更加融合，还能让页面更饱满些。
再加上点色相的变化画面会更具氛围感，
2 纹理
丰富页面常见方式之一就是给背景添加纹理
徽章单独放在这里展示，画面略显单薄。我们可以给它加些简单的纹理作为背景，使画面更加丰富有层次。（这里选择应用倾斜的线条，也是为了使其更具指向性，让用户视线更多地聚焦于主体物本身上）。
在此背景纹理切勿饱和度过高，过高的饱和度会影响主体的呈现效果，导致用户视觉无法更多的集中在徽章之上。
修饰元素
1 功能性元素
作为等级页面中最不可缺少的等级转换条，第一版它是这样的
整体的节奏感做的不是很好，主次不明，等级数字重复显得冗杂。
于是第二版选择将需要重点展示的‘当前等级’沿用矩形底衬托数字，相反其余次级信息则用简单的数字展示
为了画面的统一融合性，我们还要考虑到画面当中光源对等级条的影响，于是就变成了“中间亮，两边较暗”的形式。
同时我们还可以将等级条的两头再“暗”一点，这样会让空间多了一些延伸感。
2.装饰性元素
一个完整的画面当然少不了装饰性的元素，如何选取此类元素呢？我们可以根据页面的风格，联想一些与页面相符的元素当作装饰。这里灯光璀璨的舞台让我联想灯球，然后又联想到灯球上闪耀的光像星星一样
于是就有了下面这种页面装饰
但我们发现，同样大小的星星使画面看起来很生硬且同样的元素太多重复性太高。那我们是不是可以加一种灯球光的元素（圆形)和星星一起出现呢？
但发现效果好像不太好，此时我们可以从那方面入手让它们看起来灵动些呢？
对比！善用对比会使画面更加丰富，比如我们常见的大小对比，加进去！
这样层次就多了一点
再来个明暗对比，让闪烁的星星产生一种前后交错的感觉
“噔～”一个还不错的装饰性元素就做好啦，两个简单的对比却让画面很出效果，还不快去试试～
最终等级页面优化如下，是不是还可以？
总结
1.如果主体单独存在时有些单薄，可以添加与其相符的辅助物体丰富画面饱满度
2.丰富背景也是使画面饱满的重要方式之一
3.背景修饰性元素饱和度不宜过高，会影响主体的展示
4.用发散性的思维去选择装饰性元素，当然也别忘了和画面的融合
以上就是等级页面优化的过程啦，希望对你有所帮助
祝你早安，午安，晚安～
本文来自微信公众号“菜心设计铺”（ID：caixinshejipu）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
