每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
界面不精致，往往是你忽略了这些设计细...
- 经验类型经验/观点原作者：Anton Lovchikov
- 经验属性自译外文
- 经验版权署名-非商业性使用-相同方式共享
6066
48
339
2018-04-24
为什么一个简单的界面，你做出来后总觉得不够精致，很可能是因为你遗漏了一些容易忽略的设计细节。
本文作者通过一个案例，细致入微的教你如何改良你的设计，一起学习起来吧！
我自己读完此文有一个很大的感触：做好设计不能全靠数学的精准实施，很多时候还是要相信自己的眼睛，以心理感知作为判断标准来辅助优化设计，最后的结果对用户来说或许才是最优的。
每当你看到一个界面时，你的大脑其实都在欺骗你。无论你如何努力使事物看起来一致——旁观者的眼睛往往不会同意，因为我们在现实生活中是通过大脑来感知物体的。所以，作为设计师，我们唯一的选择只能是反向「欺骗」用户的大脑（译者注：在视觉上）。在本文中，我将向你展示一个设计组件需要从哪些地方去做改善，一起来看看这个弹窗例子吧。
△ 7处已经做了调整
△ 没有做调整
试着去比较调整前后的视觉感觉。直接对比的话可能很难看出区别，所以我做了一个 GIF 帮助大家进行对比。
一、调整重心
现实世界中的任何物体都会受到重力的影响。意思是，一旦没有支撑就会掉下来。我们的大脑将现实世界的期望自动应用到界面的元素上，并假设屏幕上的任何物体都在「尝试」掉下来。即使当物体完全静止时，我们的大脑仍然认为它会向下移动（物体上方的空间会增加，下面的空间会减少）并对其进行视觉调整。一个完美垂直居中的对象，在实际中看到的时候会偏低。为了使物体在视觉上保持一致，我们必须反补偿重力的「预期」，把物体略微上移。如下图：
物体越大，它就越「重」，从而「下降」得更快。所以我们需要为更大的物体补偿更多，而更小的物体补偿更少。 粉色显示容纳「更小」按钮的容器：
二、调整圆角按钮的边距
将圆形按钮稍稍移动到对其之外也是一个不错的主意。
否则，按钮会被认为略微不对齐，视觉上「向内凹进去了」。同时，如果按钮圆角比较小，则在边缘看起来还是一条直线，这时候就不需要进行视觉补偿了。
三、调整标题边距
同样的原则也适用于标题，特别是较大的标题。 随着字体大小的增大，每个字母的周围空白都变得更加大，并打破了左边界的视觉感知。 为了改变这一点，我做了一个小的负左边距：
当然，将它应用于设计中的每一个标题是很费精力的一件事，因为这需要一个手动调整过程，但是对于更突出的标题（例如，在一个登录页面上）是值得的。
四、调整文本块的右边框
使用左对齐文本时，文本块的右边缘变得「不整齐」，并且文本内容看起来会偏移。 类似于圆形按钮的情况，我将把整个文本块稍微往右边移动，使其视觉居中：
这样，右边缘就更靠近右边隐含的垂直对齐规则。如果我们不这么调整，则会有明显的感知差异：
五、调整颜色
根据填充区域的不同，颜色的感知是不同的。 应用于白色背景上的文本颜色，将比放在同样大块的相同颜色上的文字显得更加亮一些。 相反，如果我们在深色背景上放置彩色文本，颜色看起来会变得更暗。 背景会「吸收」文字颜色，总是让视觉上转向背景颜色。 为了适应这一事实，当我在浅色背景上使用文字时，我把颜色适当调暗一点，而在深色的背景上把颜色适当调亮。
字体尺寸和重量越小，就越需要补偿：
六、调整灰度
这是颜色调整的一个特例。我尝试选用100％黑色并修改其不透明度来建立灰色文字，而不是直接设置颜色值：
这样，当你变暗背景时，你的灰色不会被「看不清」：
半透明黑色有助于实现可读的结果，而无需创建许多不同的样式。 对于较深的背景，半透明白色也是一种选择：
七、调整投影浓度
我使用不同的阴影浓度取决于产生阴影物体的颜色。对于较暗的物体，应使阴影更强烈，而对于较亮的物体，应使阴影更轻薄：
如果没有这个技巧，假设两个阴影都具有相同的不透明度，那么较亮物体的阴影会在较暗物体的阴影旁边看起来更暗：
总结
当然，并非每个项目都需要花费额外的视觉调整时间，但如果您正在开发的界面需要特别重视并且需要脱颖而出，使用上述所有技巧将会带来更加和谐的结果。
原文：https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0
作者：Anton Lovchikov
译者：彩云Sky
本文翻译已获得作者的正式授权
本文由 @彩云Sky 原创发布于公众号：彩云译设计。未经许可，禁止转载。
全部评论：48条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Sorayume
2018-04-28 10:26按现在的发展趋势，设计师不都应该多少懂点开发吗？不懂，行，设计的时候觉得某个效果可能实现不了提前问一下开发同事总可以吧。文中提到的都是非常简单的，我就不信正常的开发会懒得多加这几行代码。还有和设计稿不一样，开发不按标注做的问题，各位难道做项目不验收，设计图出完修改好丢给开发就不管，直接当甩手掌柜的吗。
-
彩云Sky
2018-04-27 14:59没想到大家热议的焦点在于开发愿不愿意实现的问题上，但其实大家可能没有注意到文中有提到“当然，将它应用于设计中的每一个标题是很费精力的一件事，因为这需要一个手动调整过程，但是对于更突出的标题（例如，在一个登录页面上）是值得的。” 就我自己来说，文章说的这些方法在实际中要不要用，是要取决于项目的具体场景，甚至某个具体页面的要求来讨论，比如对于一个登录页面，或者一个需要用户特别关注的界面，做这些的调整是能够体现对产品的用心的。刚好我也做过开发，我曾经开发页面的时候有用z-index属性把效果图贴在网页元素最底层，加上透明度，来与实现效果像素级对比还原（元素固定尺寸时），要做肯定是可以做到的。主要看项目具体需要的开发成本，具体情况具体分析。
-
-
-
有新木
2018-04-26 15:26看到这么多类似的评论忍不住想说句话。所谓匠人精神包含敬业、精益、专注、创新，目前，似乎很多中国职业人不能感同身受，快餐文化的冲击使大家更喜欢追求速成式的获利。个人认为在自己专业上付出耐心并精益求精不是一件值得调侃的事情，科技的发展让多学科人才合作越来越紧密，一个人精益意味着团队也要付出同样甚至更多的心力，设计师和开发之间的矛盾是必然结果，也会随行业的发展逐渐磨合，所以即使团队做不到最好，也希望作为设计师的我们能有积极的心态做到更好。
-
-
-
-
-
-
-
泪妆Tearsy
2018-04-26 09:33提一个问题，你的按钮和文字区域没有对齐，是否会影响开发？前端在写代码的时候，默认为你是对齐的，把它写进一个div里，然后写着写着发现你是没有对齐的，真纠结
-
-
Xu_BoxeR
2018-04-25 16:03楼上说没用的，其实这就是新手设计师和老手的区别，可叹中国人总是对这些小的东西不屑去总结，别人总结出来又看不上，量变才会带来质变，终于知道为什么中国人发明了火药却发明不出zha_药了
- 更多
更多作品
发表评论