界面不精致,往往是你忽略了这些设计细节

急救室 2018-04-19

为什么一个简单的界面,你做出来后总觉得不够精致,很可能是因为你遗漏了一些容易忽略的设计细节。本文作者通过一个案例,细致入微的教你如何改良你的设计,一起学习起来吧!

我自己读完此文有一个很大的感触:做好设计不能全靠数学的精准实施,很多时候还是要相信自己的眼睛,以心理感知作为判断标准来辅助优化设计,最后的结果对用户来说或许才是最优的。

每当你看到一个界面时,你的大脑其实都在欺骗你。无论你如何努力使事物看起来一致——旁观者的眼睛往往不会同意,因为我们在现实生活中是通过大脑来感知物体的。所以,作为设计师,我们唯一的选择只能是反向「欺骗」用户的大脑(译者注:在视觉上)。在本文中,我将向你展示一个设计组件需要从哪些地方去做改善,一起来看看这个弹窗例子吧。

界面不精致,往往是你忽略了这些设计细节

△7 处已经做了调整

界面不精致,往往是你忽略了这些设计细节

△ 没有做调整

试着去比较调整前后的视觉感觉。直接对比的话可能很难看出区别,所以我做了一个 GIF 帮助大家进行对比。

界面不精致,往往是你忽略了这些设计细节

一、调整重心

现实世界中的任何物体都会受到重力的影响。意思是,一旦没有支撑就会掉下来。我们的大脑将现实世界的期望自动应用到界面的元素上,并假设屏幕上的任何物体都在「尝试」掉下来。即使当物体完全静止时,我们的大脑仍然认为它会向下移动(物体上方的空间会增加,下面的空间会减少)并对其进行视觉调整。一个完美垂直居中的对象,在实际中看到的时候会偏低。为了使物体在视觉上保持一致,我们必须反补偿重力的「预期」,把物体略微上移。如下图:

界面不精致,往往是你忽略了这些设计细节

物体越大,它就越「重」,从而「下降」得更快。所以我们需要为更大的物体补偿更多,而更小的物体补偿更少。 粉色显示容纳「更小」按钮的容器:

界面不精致,往往是你忽略了这些设计细节

相关推荐

源码交流区 / 0评论 2019-11-01