CSS揭秘(pdf+epub+mobi+txt+azw3)

1.jpg

相信你的眼睛,而不是数字

人的眼睛并不是一台完美的输入设备。有时候精准的尺度看起来并不精准,而我们的设计需要顺应这种偏差。举一个在视觉设计领域广为人知的例子吧,我们的眼睛在看到一个完美垂直居中的物体时,会感觉它并不居中。实际上,我们应该把这个物体从几何学的中心点再稍微向上挪一点,才能取得理想的视觉效果。来亲身体验一下这件怪事吧(参见图 1-9 )。

图 1-9 

在第一个矩形中,棕色方块在数学层面上是完美垂直居中的,但看起来并不是这样;在第二个矩形中,方块从几何中心向上轻微移动了一点儿,但它在人类的眼睛看来却是恰好居中的


与此类似,在字体设计领域广为人知的是,圆形的字形(比如 0)与矩形字形相比,需要稍微放大一些,因为我们倾向于把圆形感知得比其实际尺寸更小一些。你也可以在图 1-10 中体验一下。


这些视觉上的错觉在任何形式的视觉设计中都普遍存在 ,需要我们有针对性地进行调整。一个非常常见的例子是给一个文本容器设置内边距。不论内容文本有多长,是一个单词还是几个段落,这个问题都会出现。假如我们给容器的四边指定相同的内边距,则实际效果看起来并不相等,就像图 1-11 显示的那样。原因在于,字母的形状在两端都比较整齐,而顶部和底部则往往参差不齐 ,从而导致你的眼睛把这些参差不齐的空缺部分感知为多出来的内边距。因此,如果我们希望四边的内边距看起来是基本一致的,就需要减少顶部和底部的内边距 。你可以在图 1-12 中看出这种差异。


微信图片_20231229150509.jpg

声明:

推书365展示内容收集于网络,仅用于免费的知识分享交流和学习!版权归出版方所有。

如有侵权,请联系本站进行删除,感谢您的理解与包容!

如果您喜欢本站推荐书籍等资源,请支持购买正版,谢谢合作!