苹果在工业设计方面,一向是追求极致的,这无可争议。其实,在苹果中,处处都能找到用心的设计,这一次来看看苹果的网页设计是如何折服你的。
在苹果的 OS X EI Capitan 的介绍页面,下面有一句说明:
“There’s more to love with every click”
点击 OS X 图标查看 Apple 镜像页面 →
很高兴你没有把 click 认成 dick,这这一定程度上,得益于苹果的用心设计。下面来细细看一下:
![OS X EI](https://www.nousbuild.org/codeu/wp-content/uploads/2016/08/OS-X-EI-1024x476.png)
苹果非常用心的单独对 click 使用了一个 <span></span> HTML标签独立出来,单独使用CSS调整字符间距,使每一个字符间距增大0.03em,使得你不会将 d 分辨为 cl.
![OS X EI3](https://www.nousbuild.org/codeu/wp-content/uploads/2016/08/OS-X-EI3.png)
CSS3 修饰代码如下:
![apple-osx-ei-css3-code](https://www.nousbuild.org/codeu/wp-content/uploads/2016/08/apple-osx-ei-css3-code.png)
调整一下,取消掉 click 的0.03em增量,来看看对比的效果:
![OS X comparison](https://www.nousbuild.org/codeu/wp-content/uploads/2016/08/OS-X-comparison.png)
我们再来调整为 -0.08,看一下夸张的效果:
![OS X EI -0.08](https://www.nousbuild.org/codeu/wp-content/uploads/2016/08/OS-X-EI-0.08.png)
不要在意这小小的0.03em,它可能让别人对你望其项背,这种对于设计一丝不苟的敬业精神,是很值得我们学习的!
![](https://www.nousbuild.org/codeu/wp-content/uploads/2020/07/copyright.png)