高手是如何做UI界面优化的?来看实战案例!

2025-4-16    lanlanwork

今天来做的这个页面,光是一开始就薅了好久的头发。

这个页面的最初版长这样:

image.png

 

最后调整为这样:

image.png

到底为什么要做这些改动呢?

大概为了以下几点:

  1. 当画面中有很多亮色时,需要有黑色压下去
  2. 彩色里融入无彩色,画面会更好看
  3. 使层次更丰富
  4. 带有透视角度的物体,运动感更强

除了这几大点之外,过程中还有一些细节小点,接下来分享给大家

一、当画面中有很多亮色时,需要有黑色压下去

不知道大家留意过这类的设计风格没有,他们在页面中运用了很多明度较高、饱和度较高、较亮眼的颜色

image.png

为了能压住页面,也都用了一块面积的黑色,不让整个页面显得很轻、很浮。黑色的文字和图标也是起到这样的作用

image.png

当然黑色面积也不一定非得用在按钮上,比如插画、图片上:

image.png

背景里:

image.png

二、彩色里融入无彩色,画面会更好看

Icon 里融入黑色面块:

image.png

背景改成灰色:

image.png

三、使层次更丰富

现在卡片的层次大致分为三层:

image.png

在此基础上,尝试再加一层,让金币从画面中凸出来。

这样使头部卡片更丰富、在页面中更强调:

image.png

这样看着比较合适,我们再把金币的风格跟页面调整统一

image.png

四、带有透视角度的物体,运动感更强

现在的金币是扁平的,不太像金币,更像贴纸,扁平的拍在画面上。

当加入一些侧面,变化就很明显:

  1. 能够丰富金币插画的层次,看着更精致
  2. 也让金币更像是立体的,像在往画面里飞

image.png

最后一点调整

1. 将线条处理为断线:

image.png

2. 调整卡片纹理

卡片纹理依旧用以前的还是有些琐碎了,所以将纹理调整的更整体,再用一些较细的线和元素进行点缀即可!

image.png

3. 标题点缀绿色高亮,丰富页面

image.png

 

本文由原创「菜心设计铺」,欢迎关注作者的微信公众号:「菜心设计铺」

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档