IT大道IT大道

首页 > 设计 > 无边框界面是个美好的白日梦

无边框界面是个美好的白日梦

原文 https://zhuanlan.zhihu.com/p/24787482 2017-01-11 12:24:03 0 评论

核心论点

  1. 边框在信息结构呈现中的划分作用对结构化信息密度上限的贡献
  2. 边框使用户对界面中内容的结构和逻辑关系的指导作用与学习成本的降低
  3. Airbnb 的做法你学不来

信息密度

早年 Medium 也是无边框风格,极少使用四周边框,基本全靠分割线和区域背景色差异来作区分。好景不长,2015 年开始增加边框元素,楼来逐渐用上了卡片式隐喻。

要说原因,就是信息密度提高了。Medium 里没有评论的逻辑,只能在一小段文本上加 annotation,或者写一个 response;一个 response 也是一篇独立的 article。既然有 response,就可以交替互相写 response,就会形成一条讨论串如同 Twitter。如果要在 A 的「评论区」展示 A 的作者对别人对 A 的 response 的 response,那么就需要 blockquote,还要与文章内容本身的 blockquote 区分开,那就只能把那部分用一个框包裹起来了。

内容结构

将内容用一些形式的边框包裹起来,能够暗中促使用户将视线范围集中在边框内。这也可以被称为边框元素提供的强调作用。

例如一个阅读型场景,有导航条、正文区域、广告侧栏,那么将正文放在卡片内:

itdadao-无边框界面是个美好的白日梦 相比起只采用线条作左右隔断

itdadao-无边框界面是个美好的白日梦 能够更好地将用户的视线留在主要内容上。

所以,边框式隐喻能够为产品的设计者提供灵活的手段来控制使用者的下意识的注意力分配方式。在解读商业目标规划产品设计时,会对使用者注意力的操纵提出需求。

从使用者的角度出发,边框式的视觉结构提供了更多关于重要程度的信息,在快速扫视时就能够对内容的分组、重要程度有个基本的认知。这对降低学习成本是至关重要的。如上文的案例若采用方案 2,则使用者对此的学习主要来自于面积大小、字号、字重、文字颜色。在比较极端的场景下,内容靠网络加载而网速缓慢,你选择采用 Facebook 和 Medium 式的 pseudo-content placeholder 来占位,字号、字重、文字颜色都不会立刻被提供,而边框、背景色则能随着 HTML 和 CSS (并且很可能被缓存了)比内容(AJAX)更早加载出来。

参考效果如下:

itdadao-无边框界面是个美好的白日梦 itdadao-无边框界面是个美好的白日梦

邯郸学步

Airbnb 的 iOS app 的地位十分特殊。背后是 Airbnb 合作的房东,该 app 只是一个查找和预订的工具。其商业价值在 app 之外。

但如果你是 Medium 或 Twitter 的模式,app 本身提供用于消费的信息,商业价值在 app 之内,那么很遗憾,你需要找到一个效率更高的信息呈现和交互的基础隐喻。

例如卡片隐喻。

Tags:Airbnb   移动设计

猜你喜欢

标签列表