HOME/Articles/

clear

Article Outline

Product Design: 设计的感觉 - 清晰

清晰

清晰(clarity)这种感觉,是利用人眼对边界信息感知差的特点,将次级消息放在了边缘。将这种感觉用于对现实场景的信息化中,就能在很大程度上减少信息和背景之间的相互干扰。

要达到这种效果,需要对信息放置的位置、背景色彩的过渡及现实场景有一个妥善的处理。

从iOS 7开始,苹果公司正式把这种感觉引入了系统设计:

  • 简化(simplify);
  • 内容为主(maximize content);
  • 纵深(depth)。

iOS 7 天气 App 的清晰

iOS 7 中的天气 App 是对这种感觉的最好阐释。雪天的背景占据了整个屏幕,没有了以往 常见的界面边界,视界变得极为开阔。

去除了边界,内容得以占据更多的空间,因此足以让用户聚焦于内容本身而不是界面。但是,此时并不是 真的没有了边界,从视觉的角度来讲,此时的天气 App, 中间的大字号气温就成了中心,其他区域都是边界。

人眼的边界视力比中心差得多,用户能轻易地分辨 29,但第一眼却很难注意到下面的气温都是些什么。在这种情况下,把次级消息放在边界就成了更好的选择。

《纸牌屋》里的清晰

在《纸牌屋》这部电视剧里,片头的设计也很有这种清晰的感觉,如图2-2所示。文字在屏幕的位置清晰自然,浑然一体。

House of Cards 1

Google Glass 里的清晰

谷歌眼镜(Google Glass)在文字下方加了个半透明的灰色背景,来让人很好地聚焦边界信息。

Google Glass 1

《钢铁侠》里的清晰

除了像Google Glass那种半透明的处理方法,如果信息块不高、区域统一,也可以用透明渐变来做这种底衬,如图2-4所示。这种处理可以从钢铁侠的图片中感受到。

小结

  • 简化界面元素的设计语言。
  • 利用人眼的视力差别进行布局。
  • 采用半透明或渐变增强可读性。