欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

区分UI设计中的装饰元素和意义元素

WEB产品设计 夜阑小雨 489℃ 0评论

作为界面设计师,总是希望作品好看而且有道理。屏幕上每个元素都应当看起来舒服,界面也不能只是艺术品。界面要承担工作。界面要能提供信息,清晰说明动作的可能过程。如果设计师够熟练,视觉吸引和功能,漂亮与清晰,装饰和意义,这两个因素经常共存。但是,我们希望设计看起来是什么样子和客户如何理解设计,这两者之间会存在着冲突。我最近在 GitHub网站就碰到了装饰与意义的问题。

GitHub网站全局导航

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

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

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

容器影响所包含元素

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

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

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

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

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

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

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

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

重新设计应考虑范围

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

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

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

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

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

转载请注明:夜阑小雨 » 区分UI设计中的装饰元素和意义元素

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址