在上期有关设计“精度”的被说不够文章发布后 ，我们收到了大量设计师的精致阶积极反馈 ，很多读者表示通过简单的何提细节调整 ，确实提升了作品的案例视觉品质 。
所以今天 ，设计升个实战我们带着精度优化指南 2.0 来啦 ，被说不够聚焦那些容易被忽略 ，精致阶但能提升视觉效果的何提设计细节 ，快快学起来吧 ！案例
老规矩，设计升个实战上干货 ！被说不够
一、精致阶按钮精度
当你的何提按钮做成这样被客户说“不行 ，这样也太普通 ，案例太随意了” ，你是否没有头绪该如何优化 ？
不慌 ！我们带着精度提升小技巧来了 ，先看看局部优化前后对比图吧
步骤如下 ：
① 造型调整-按钮 ：
首先针对客户说的普通 ，我们就可以尝试把常规的圆形改为圆角矩形 ，并适当调整 icon 在图形内的占比
② 造型调整-icon ：
按钮造型 OK 后 ，再来看看里面的图标，不难发现暂停是 2 个竖线（线性图标） ，挂断则是一个电话（面性图标） ，它俩不统一；所以我们需要对其进行统一，以暂停按钮为主 ，我们来调整挂断按钮
③ 颜色调整 ：
原暂停图标的颜色是灰色 ，而挂断图标又是红色 ，视觉上就会造成暂停“弱于”挂断 ，我们需要调整其明度让 2 个图标整体更加和谐
接着 ，我们修改按钮的颜色 ，只需降低透明度即可
④ 加投影 ：
为了进一步增加按钮的质感 ，我们可以在它的下方加上合适的投影；并根据页面的整体色调 ，进一步调整图标的色相 ，使按钮更好的与页面保持和谐统一 。
这样就调整好了 ，最后再来看看整体的对比效果吧 ：
二、卡片精度
再来看另一个案例，图标用心画了很久 ，但还是草率加个矩形包起来就完事了，导致卡片整体就差点意思
怎么变精致呢 ？先来看看优化部分的对比图：
步骤如下
① 调整容器样式 ：
在整体的排版没有问题的情况下 ，我们可以先将纯色块的容器调整为渐变的形式 ，再加上描边(注意描边也是渐变哦)
② 添加倒影 ：
调整后好了很多 ，但还是略显单薄 ，我们可以给图标加上倒影 ，使画面的层次更加丰富
只需简单的 2 步 ，就能让原本普通的卡片变得有设计感 ，是不是很神奇 。再看看对比效果吧：
卡片精度 2
同样的技巧，我们也可以运用于另一个案例上
步骤如下
① 调整容器样式 ：
原容器是白色降低透明度+描边 ，整体氛围感不足；我们可以看到图标都是红色调的 ，所以大胆一点，我们的容器和描边也可以是红色调的
② 图标添加投影：
容器样式调整完后 ，因为图标是发光的，必然会存在投影 ，我们再加上投影即可；需要注意这里的投影添加方式（记笔记
同样的方法去调整剩下的 2 个内容，整体就优化完成了 ，再来看看对比效果：
卡片精度 3
这是你做的课程卡片 ，客户看了说“不够简洁 ，我想要高级一点的”
怎么改 ？先来看看优化前后的对比图 ：
步骤如下
① 容器调整 ：
原课程卡片使用白色矩形包裹课程图片的形式，我们可以尝试去掉外层的白色 ，将课程图片铺满整个卡片
② 优化文字信息 ：
去掉右上角的时间标签 ，与课程名称上下排列并注意层级关系 ，“去看看”按钮改为用箭头符号表达 ，避免全是文字导致视觉看起来很单一
③ 优化遮罩 ：
调整后整体效果比之前简洁很多，但是图片上的遮罩还是太黑 ，显得不够高级 ，我们可以改为毛玻璃的效果增强卡片的质感
④ 整体再调整：
到这一步基本就差不多了，再整体看一看 ，发现按钮有点粗糙是一个大白块儿 ，那么微微调整一下
最后再来看看优化前后的对比吧 ：
叮 ！知识已到账 。
本次关于“精度”优化的分享到这里就结束啦 ！ 希望大家能从中获得一些启发和灵感 ，让自己的UI设计更加出色和有趣！加油哦 ！
作者：菜心
版权声明：小三房资讯官网｜各地小三房房价、楼盘与选购指南 -x3f.cn ，转载请注明出处：https://www.x3f.cn/html/59a12699814.html
