北京
我们平时常遇到界面优化的问题，不知道怎么提升其界面质量，这里我们分享一个优化界面的案例。
01 Banner的质量
提到页面优化就不知所措的话，我们首先就来优化整个页面的视觉中心——banner，这里分图标与卡片的颜色和投影两步骤达到banner的精致度。
Step 1 图标
我们来分析一下，banner图标结构较为复杂，色彩元素过多，且显得有些油腻，铅笔阴影有点脏，添加的投影饱和度有点高。
我们借助AI工具，生成结构简单明确的icon，色彩采用黑白+绿配色以此突出主题色和高级感，使其风格更为明显。
Step 2 卡片投影与颜色
原版的banner卡片显得浑浊，与背景糊在一起，在整界面并不突出。首先原版添加投影效果没有拉开与背景的距离；其次背景渐变色过渡不明显，导致文字内容不突出。
所以我们将其投影取消，增加banner与背景对比度，修改banner渐变深浅色位置，突出内容。
02 列表
顺着界面就是下方列表的优化问题。原版出现图标风格不统一与卡片排版和状态文字太小问题。
Step 1 图标风格统一
列表图标的颜色太过丰富，风格与整体界面不符合。所以我们换上与底部导航栏同样风格的线面结合的图标，保持风格的统一。
Step 2 卡片排版，状态文字太小
原版的卡片文字排版比较混乱，字体字号过多，状态文字太小。所以我们调整一下字号，文字排版对齐，使其卡片布局平衡稳定。
03 整体布局
局部我们调整完成后，就到整体界面结构的调整。
Step 1 背景色太绿太油腻,变成灰色
背景颜色为浅绿色，视觉上油腻且与内容元素不分明，显得界面不高级。
我们换成常用的浅灰色，与banner和列表层级拉开。头部加上点主题绿色的渐变，头部背景部分下沉，增加空间感。
Step 2 整体页边距过大
原图整体页边距太大，整个内容太过聚焦，缺少内容透气感觉。所以我们缩短整体页面边距，缩短顶部结构。
这样我们就完成了界面优化。
如果觉得做的界面不精致，又不知如何入手的话，我们可以借鉴以上步骤进行界面优化，这样就容易达到想要的效果了。
是不是特别的简单？
来源 | 菜心设计铺（ID：caixinshejipu）
作者 | 菜心设计铺 ; 编辑 | 呼呼大睡
内容仅代表作者独立观点，不代表早读课立场
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
