界面设计风格不统一?教你这4个实战思路!

一、全文速览图

界面设计风格不统一?教你这4个实战思路!

有时我们发现前后设计的界面不统一,这里有一些视觉统一的小技巧,可以帮我们快速解决这一问题。

下面就是我们的案例原图,首页与个人中心的风格不一致。

界面设计风格不统一?教你这4个实战思路!

优化后效果:

界面设计风格不统一?教你这4个实战思路!

二、风格统一

两个界面的风格不一致的原因是:两页面主视觉分别是插画和质感图标。

界面设计风格不统一?教你这4个实战思路!

所以需要统一主视觉风格,借助AI生成两个质感图标,加入页面,总体风格就统一了。

界面设计风格不统一?教你这4个实战思路!

三、页面颜色一致性

两个页面的颜色不一致,我们以首页的主色来统一两个页面颜色。

界面设计风格不统一?教你这4个实战思路!

首页中渐变色有点显脏,去掉黄色渐变就可以显得通透干净。

界面设计风格不统一?教你这4个实战思路!

两页面的风格基本统一了,那我们可以看看细节问题。

四、签到按钮太小

首页签到部分的按钮有点太小了,容易点击误触;文字也小,识别困难。所以我们进行了加大处理。

界面设计风格不统一?教你这4个实战思路!

五、磨砂毛玻璃质感

我们给首页的签到卡片添加磨砂毛玻璃质感,增加小细节的同时,也让主视觉增加了层次感。

界面设计风格不统一?教你这4个实战思路!

调整结束后,我们来看看最后效果吧。

界面设计风格不统一?教你这4个实战思路!

我们来总结一下界面风格统一的思路吧:

  1. 主视觉风格统一,采用同种设计元素
  2. 页面颜色统一,颜色要干净
  3. 注意防误触和文字识别性
  4. 添加毛玻璃质感,增加层次和细节

学会了,点个赞吧~

收藏
点赞 24

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。