拆解 2 大实战案例
，细节教设计师用细节重塑 UI 质感 。实操手

一、案例B端页面优化

本次需要优化的握高案例是一个B端页面。

来看看优化前：

再来看看优化后：

来让我们看看具体哪些板块进行了优化吧
。作品总没

板块一 文字

第1步 文字层级

首先，细节我们可以通过字号 、实操手字重和灰度拉开主副标题的案例层级 ：

然后，握高我们也需要将卡片内的优化文字信息通过字号、字重和灰度拉开层级：

第2步 颜色

字体用色原本是作品总没纯黑 ，因为界面的整体走蓝色色调，所以文字颜色也可以有一点蓝色倾向。这样处理后更统一，更高级：

板块二 图标

我们可以把扁平的图标优化为更有质感的3D图标，作为界面的小亮点：

板块三 卡片

配合图标的毛玻璃质感，卡片也可以增加渐变和白色描边，使整体风格更融合
：

板块四 按钮

还有一个菜心老师常用的技巧，就是做出不同的按钮状态 ，可以丰富界面层次。比起全部都是“去使用”的蓝色按钮，加入其他状态的按钮 ，会使界面看起来变化更多一点：

板块五 底板

我们可以加一个光感底纹 ，增加整个页面的透气性：

最后，让我们来看看前后对比吧：

B端可能没有C端那么多花哨的设计元素和优化方向，但考验的是扎实的基本功，你学会了吗？

二  、弹窗优化

第一次听说，弹窗要设计出浪漫感，好像谈恋爱的感觉？

这次要优化的案例是需要浪漫色彩的运营弹窗。来看看优化前的页面 ：

再来看看优化后的页面：

接下来我们看看到底怎么制造这种浪漫的氛围感吧 。

方向一：设计卡片

第1步 把一层卡片变成两层卡片 ，形成丰富的层次：

第2步 使底部的卡片头部异形，增添设计感 ：

第3步 把纯色的卡片的底板改为渐变色 ，并加上文字和图案底纹 ，丰富细节：

方向二
：强化主题

从优化前的弹窗中发现，弹窗的重点是展示情侣合照 ，通过照片能联想到拍照、社交媒体等  ，可以在设计中加入相对应的元素。比如加上一个相机作为装饰，另外还有社交媒体的点在评论转发图标，和标签：

方向三：设计标题

第1步 我们可以将副标题“周末约会”设计成标签和主标题进行组合排版：

第2步 还可以将部分文字改黄色，和相机
、图片颜色做呼应
：

方向四 ：增加氛围感

我们可以在蒙版之上添加光圈和星光元素，增加浪漫的氛围感：

最后，一起来看看优化前后对比吧 ：

作者
：菜心¹

文章推荐：

lpl夏季赛2022赛程积分榜 lpl2022夏季赛积分榜最新

县委书记王静娴调研市政项目培养汲引气候

县政协主席周明河到绿洲街道调研督导结实拓展脱贫攻坚下场后评价工作

河南•平易近权第七届制冷设备博览会宣传报导组工作会议会议召开

小时辰玩的三国游戏有步兵弓箭手叫甚么2025 有步兵弓箭手的游戏盘点

平易近权县2023年春季学期主体班开班

县带领毕庆贺调研督导2023年省市县经历琐细平易近生实事鞭挞落完成象

县带领李君调研督导全国文明都邑、国度卫生县成立工作

怪物猎人世界除夜火药金鱼在哪捕获

诚纳英才 筑梦冷谷——平易近权县构造6家企奇不雅不雅单位介入第六届中国·河南招才引智立异生终除夜会

平易近权县召开“五零”成立工作第三季度点评会

县委书记王静娴调研黄河故道一期水生态治理工作