专栏首页理论坞我们探索和利用视觉结构​ ·《认知与设计》笔记3

我们探索和利用视觉结构​ ·《认知与设计》笔记3

重点

笔记

信息呈现方式越是结构化和精炼,人们就越能更快、更容易地浏览和理解。

要让信息能够被快速地浏览,仅仅把它们变得精炼、结构化和不重复还不够,它们还必须遵从图形设计的规则。

结构提高了用户浏览长数字的能力

数据专用控件提供了更多的结构

采用控件分割输入字段固然优化了视觉结构,但这种方式打断了输入的连贯性。对于填写一个长表单来说,使用菜单等控件使用户被迫将手从键盘上移至鼠标,将视线转移至光标位置。这种思维的打断时常发生,用户在填写长表单时时常感到烦躁。事实上,许多用户都不知道使用 tab / ⇥ 与 shift + tab / ⇧ + ⇥ 可以在表单文本框之间跳跃。

8.18 对于移动端来说,在屏幕上点按的效率非常高,而且可以保持视线与手势一致。因此需要在移动网页设计中减少不必要的输入,比如日期、地点(行政区划),而在电脑网页端提供文本框 + 选择控件并排显示,用户按需选择输入方式。

8.18 采用上图所示的方式,通过六个框(相似性)来告诉用户需要输入六个数字,而每输入一个数字后,激活框会自动移至下一个,也是一个很好的方案

视觉层次让人专注于相关的信息

可视化信息显示的最重要目标之一,是提供一个视觉层次,即信息的布置安排能够:

  • 将信息分段,把大块整段的信息分割为各个小段;
  • 显著标记每个信息段和子段,以便清 晰地确认各自的内容;
  • 以一个层次结构来展示各段及其子段,使得上层的段能够比下层得到更重点的展示。

在现在写作系统中,Markdown 一度被用户高度推崇。它不提供所见即所得(WSYIWYG)的编辑系统,而使用符号标记来表示段落或文本样式,这是一种写作与排版分离的模式,在写作时,只使用键盘与显示器,注意力不会被迫转移,而排版在导出文档之后完成,就这样,Markdown 拥有了如下几个显著的优点:

  • Markdown 编写的文档格式样式更统一,结构更清晰。因为 Markdown 中采用 # 作为标记标题层级的方式,写作大纲清晰明了。而 Word 中多数用户排版随意性很强,就连简单的标题层级都显得很没有章法,甚至有人使用 Word / Page 从不使用样式;
  • Markdown 写作时不受排版等情绪干扰,同时不需要依赖鼠标,注意力不会被迫转移;
  • Markdown 语法简洁,学习成本低。以人为本的设计使得它与 HTML 等标记语言产生了巨大差异,也使其拥有了远高于 TeX 的编写效率。

由阿里开发的语雀综合了两种方式的优点,即提供所见即所得的同时允许用户使用快捷键迅速更改样式,而且将各层级的标题以大纲的形式显示在文章右侧。读者可以迅速的找到自己想要的内容(以只浏览标题的形式),而正文部分也如同书中所述的那样,拥有结构清晰、层次分明而且始终统一的样式

本文分享自微信公众号 - 宇相(UXMystery)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单聊聊用户体验设计

    话说上次分享了《伟大的设计》这本书的读书笔记,但是发现好像没有什么重点,因为是一团糟,什么都说了,又什么都没说,所以这次打算后面从我看到的点来说说;也许你也发现...

    宇相
  • 用 Python 语言来写游戏

    每个程序员差不多都是从计算机爱好者开始的,尤其是那些令人心醉神迷的电脑游戏,不仅造就了整个游戏产业,推动了计算机行业软硬件的升级,而且吸引了大量的爱好者最终加入...

    宇相
  • 官方最完整版:张小龙微信公开课超时演讲,总结微信8年

    刚刚我们在下面看了一下这些吐槽,非常好,因为我每天都在听到这样的声音,都已经习惯了。我觉得在中国来说,每天都有5亿人说我们做得不好,每天还有1亿人想教我怎么样做...

    宇相
  • Excel实战技巧73:使用组合框控件仿数据验证下拉列表

    如下图1所示,在工作表Sheet1的列A中任意单元格上双击鼠标,将会出现一个窗体控件,单击其右侧的下拉箭头会出现列表,你可以从中选择列表项,所选项将被输入到该控...

    fanjy
  • 链表-如何快速找出一个环形链表入环处,O(1)空间复杂度能否?

    阿伟
  • 面对人工智能的计算能力,人类是否还有研究对弈游戏的必要?

    渴求真理的好奇心,是人类前进的永恒驱动力。 而宇宙的广袤及世界的庞大,又是人的想象力和行动力所难以企及的。 还记得那个流传了数千年的故事吗? 印度的某位国王...

    新智元
  • 资源 | Geoffrey Hinton多伦多大学演讲:卷积神经网络的问题与对策

    机器之心
  • Dolo v4.2

    最新的dolo…… ? ? ? 画风大改- -,这是个很危险的信号…… 就这样吧,这周转载 逆转的手记 代替周更的推送…… 对了,最近独立游戏的热度被炒的很火,...

    沙因Sign
  • 理解跨域资源共享

    CORS 或跨域资源共享是一种 http 机制,它允许用户通过使用一些额外的头来访问别的域的资源。例如,假设位于http://test1.domain.com上...

    madneal
  • 一文彻底搞懂 Flink 网络流控与反压机制

    分析一个简单的 Flink 流任务,下图是一个简单的Flink流任务执行图:任务首先从 Kafka 中读取数据、 map 算子对数据进行转换、keyBy 按照指...

    zhisheng

扫码关注云+社区

领取腾讯云代金券