苹果在工业设计方面,一向是追求极致的,这无可争议。其实,在苹果中,处处都能找到用心的设计,这一次来看看苹果的网页设计是如何折服你的。

OS_X_El_Capitan_logo_svg

在苹果的 OS X EI Capitan 的介绍页面,下面有一句说明:

“There’s more to love with every click”

点击 OS X 图标查看 Apple 镜像页面 →

很高兴你没有把 click 认成 dick,这这一定程度上,得益于苹果的用心设计。下面来细细看一下:

OS X EI

苹果非常用心的单独对 click 使用了一个 <span></span> HTML标签独立出来,单独使用CSS调整字符间距,使每一个字符间距增大0.03em,使得你不会将 d 分辨为 cl.

OS X EI3

CSS3修饰代码如下:

apple-osx-ei-css3-code

调整一下,取消掉 click 的0.03em增量,来看看对比的效果:

OS X comparison

我们再来调整为 -0.08,看一下夸张的效果:

OS X EI -0.08

不要在意这小小的0.03em,它可能让别人对你望其项背,这种对于设计一丝不苟的敬业精神,是很值得我们学习的!

发表评论

电子邮件地址不会被公开。

Next Post

macOS内置小游戏

周六 9月 17 , 2016
macOS 与 Windows 系统一样,都在系统中预装了一些内置的小游戏。相比于 Windows 的内置游戏,macOS 的内置游戏没有将其直接放在 Laun […]