区分UI设计中的装饰元素和意义元素(翻译)

37signal博客文章,Distinguishing decorative from meaningful elements in UI design

作为界面设计师,总是希望作品好看而且有道理。屏幕上每个元]]>GitHub网站就碰到了装饰与意义的问题。

GitHub网站全局导航

登录到GitHub,全局导航出现在头部分右侧。圆角矩形包裹了全局导航块。

197-github-small.png

观察一下包裹全局导航块的圆角矩形。其外侧是灰色边框,整个全局导航块呈淡蓝色背景。边框和背景属于装饰性。它们为导航块增添了风格和视觉趣味。为了帮助你看清楚边框和背景的装饰性质,下面有两张图,上一张是原图,下一张没有边框和背景。

200-github-comparison.png

两张图看起来都很舒服,功能也没有变化。你会说两者之间的区别只是审美角度、或者个人观点问题,没必要再讨论。但是,事情没这么简单。容器元素包裹链接远远不是风格问题。装饰容器实际上改变了链接的意义,正如我们下面会讨论的,装饰容器给GitHub造成了问题。想明白为什么,先来了解容器元素如何影响客户理解设计。

容器影响所包含元素

容器中放置链接,暗示了容器和链接之间的关系。从技术而言,容器给链接加上了范围(scope)。网络应用工具中经常出现的编辑(edit)链接,是大家都熟悉的例子。

203-edit_example.png

上面两个编辑链接都被容器限制了范围。浏览者期望上一个编辑链接用来编辑Michael Bluth,因为这个链接和Michael Bluth出现在同一个框中。两个链接一样,容器在发挥作用。

这个道理如何应用到GitHub全局导航?repositories(项目的意思,译者注)中的all链接有问题。GitHub有两种信息,一种是任何人都可以浏览的repositories,另一种是用户自己的repositories。这就是我们在其导航设计中发现的问题。

206-repos-all-link.png

GitHub的装饰设计暗示了repositories链接有范围限制

全局导航块包裹在边框中,”all”链接受到当前用户的限制。点击链接,应当期望看到属于当前用户的repositories。

210-repo-link-user.png

与没有边框的版本相比。”all”链接是指Michael的repositories,还是只所有用户的repositories列表,不清楚。

211-repo-link-global.png

不只是装饰:GitHub上的行为令人困惑

GitHub全局导航起初看起来只是装饰或者风格问题。现在我们明白了美学决定还会影响浏览者如何理解设计。就GitHub而言,repositories链接受到限制,并没有与行为相符。点击”all”链接,实际出现的并不是当前用户的repositories,而是所有用户的公共repositories列表。如果想看当前用户的repositories,需要点击avatar图标旁边的用户名字。真够折腾!

重新设计应考虑范围

如何重新设计,才能消除困惑?一种方法,去掉容器,重新排列元素,消除repository链接受到当前用户限制的暗示。

212-redesign-1.png

这种重新设计利用视觉原则,影响如何理解导航块的方式。将avatar图标移动到右侧,去掉边框,repository链接与当前用户之间相关的假设不再存在。

另一种方法,保留原设计中的装饰容器,利用文案说明限制范围。

213-redesign-2.png

第二种重新设计采用两个链接,”all”和”mine”,来区分所有repositories列表和只属于当前用户的repositories列表。无论是采用视觉原则还是文字,两种重新设计的方案都消除了”all”链接的模糊性,设置了清晰期望。

GitHub提供的服务很好,我知道我有点吹毛求疵。UI是微妙游戏。大脑和眼睛的功能敏感精妙。作为设计师,应当非常谨慎,有些时候我们为眼睛设计,而忘记了大脑。希望这些例子能帮助你对两种元素更敏感—装饰元素和改变界面意义的元素。

Technorati :
Del.icio.us :
Zooomr :
Flickr :

发表评论

电子邮件地址不会被公开。 必填项已用*标注