为什么个简单界,你做出来后觉不够精致,很可能是为你遗漏了些容易忽略设计细节。文者通一个案例,细致微的教你何改良你的设计,一学习来吧!
我自己读完此文有个很大感触:做好设计不能全靠数学精准实施,很多时候是要相信自己眼睛,以心理感知作为判断标准来辅助优化设计,最后结用户来说或许才是最优。
每当你看到一个界面时,你的大脑实都在欺骗你。无论你如何努使事物看起来一致——旁观者的眼睛往往会同意,因为我们在现实生中是通过大脑来感知物体的。,作为设计师,我们唯一的择只是反向「欺骗」户的大脑(译者注:在视觉上)。在本中,我将向你展示一个设计组件需要从哪些地方做改善,一起来看看这个弹例子。
△ 7处已经做了调整
△ 没有做调整
着去比较调整前后的视觉觉。直对比的话可能难出别,所以做了一个 GIF 帮助大家进行对比。
一、调整重心
现实世界中的任何物体都会受到重的影响。意思是,一旦没有支撑就会掉来。我们的大脑将现实世界的期望自应到界面的元素上,并假设屏幕上的任何物体都在「尝试」掉来。即使当物体全静止时,我们的大脑仍然认为它会向移(物体上方的空间会增,面的空间会减)并对进行视觉调整。一个美垂直中的对象,在实际中看到的时候会偏低。为了使物体在视觉上保持一致,我们必须反补偿重的「预期」,把物体略微上移。如图:
物体越大,它就越「重」,从而「降」得更快。我们需要为更大的物体补偿更多,而更小的物体补偿更。 粉色显示容纳「更小」按钮的容器:
二、调整圆角按钮的边距
将圆形按钮稍稍移动到其也是个不主意。
否则,按钮会被认为略微不齐,视觉上「内凹进去了」。时,如按钮圆比较小,则在边缘看起来是条线,这时候不需要进视觉补偿了。
三、调整标题边距
同样的原则也适用标题,特别是大的标题。 随着字大小的增大,每个字母的周围空白变得更加大,并打破左边界的视感。 为改变一点,我做一个小的负左边距:
当,将它应用设计中的每一个标题是很费精力的一件,因为需要一个手动整程,但是对更突出的标题(例,在一个登录页面上)是值得的。
四、调整文本块的右边框
使用左对齐文时,文块的右边缘变得「不整齐」,并且文内容看来偏移。 类似圆形按钮的情况,我将把整个文块稍微往右边移动,使其视居中:
样,右边缘就更靠近右边隐含的垂直对齐规则。果我们不么整,则有明显的感差异:
五、调整颜色
根据填充区域的不同,颜色的感知不同的。 应用于白色背景的文本颜色,将比同样块的相同颜色的文字显得加亮一些。 相反,如果我们深色背景置彩色文本,颜色看起会变得暗。 背景会「吸收」文字颜色,总让视觉转向背景颜色。 了应这一事实,当我浅色背景使用文字时,我把颜色当调暗一点,深色的背景把颜色当调亮。
字体尺寸重越小,就越需补偿:
六、调整灰度
这是颜色调整的一个例。尝选用100%黑色并修改其不透度来建立灰色文字,而不是直置颜色值:
这,当你变暗背景,你的灰色不会被「不清」:
半透黑色有助于实现可读的结果,而无需创建许多不同的式。 对于较深的背景,半透色也是一种选择:
七、调整投影浓度
我使同的阴影浓取决于产生阴影物体的颜色。对于较暗的物体,应使阴影更强烈,而对于较亮的物体,应使阴影更轻薄:
如果没有这个技巧,假设两个阴影都具有相同的透明,那么较亮物体的阴影会在较暗物体的阴影旁边看起来更暗:
总结
然,并个项目都需要花费额视觉调时,如您正在开发界需要特视并需要脱颖而出,使用上述所有技巧将会带来更加和谐结。
原链接:《Optical adjustments in components》 Anton Lovchikov
欢迎关注译者的公众号:「 彩云译计」