文字列表的信息设计

0 评论 2177 浏览 10 收藏 10 分钟

文字列表是很好的信息展现形式,不但能吸引注意力,便于快速浏览,缩短文本的同时也能展示项目之间的关系。本文作者从7个方面,来跟大家分享一下文字列表设计一些建议。enjoy~

文字列表是很好的信息展现形式,不但能吸引注意力,便于快速浏览,缩短文本的同时也能展示项目之间的关系。

网页通常不适合长篇大论。为了便于浏览,用户反倒更喜欢格式化的表达形式,因为可以快速浏览内容并找到自己感兴趣的部分。

将密集的文字段落分散,提高可读性的排版方式不少。除了粗体、缩进、行距和彩色字之外,列表是最能提高阅读效率的网页排版之一。

列表中的小圆点能够快速吸引读者的眼球,并使复杂的概念简单化。在读者眼中,列表意味着简洁、高优先级。在可用性研究中,我们发现网页浏览者会更喜欢列表,他们总想快速理解文章内容。

比较下面两个例子,你会发现例2更容易理解,因为所有的信息都清晰直接的列在单独的行中。相反,在例1中,读者需要在段落中自行寻找信息。

例1:我们温泉度假套餐包含有两晚住宿,两次50分钟的温泉护理,两份早餐以及到店礼盒。

例2:

温泉度假套餐包括:

  • 两晚住宿
  • 两次50分钟的温泉护理
  • 两份早餐
  • 到店礼盒

不用担心例2占据了更多的空间,因为用户看到感兴趣的内容时是不会介意滚动屏幕的。事实上,相较于大段文字,适当使用列表会使内容更易理解,从而吸引用户往下滑动阅读更多内容。

设计文字列表的7点设计建议

1. 保持每项长度相近

在项目内容相互关联时使用列表是效果最好的。列表中每项的重要性应该是相似的,如果可能的话,保持所有项目的长度大致一致,这样就不会显得某一个项目比其他项目重要。一致的格式会令人赏心悦目,同时会使列表显得不拥挤。

【避免】

野营需要准备的物品:

  • 睡袋
  • 去瀑布时需要的泳衣
  • 防晒霜
  • 雨天要用的雨衣,预计可能会有大暴雨

每项长度长短不一使得列表看起来杂乱无章。

【推荐】

野营需要准备的东西:

  • 睡袋
  • 泳衣
  • 防晒霜
  • 雨衣

2. 顺序或数量很重要时才使用序号

通常只有在项目有特定的顺序(例如某一个流程的步骤)或数目很重要时(例如top10排名)才使用序号。

如果项目的顺序或者是数量不是很重要时,不要使用序号,否则容易造成误解。在用户测试研究中,面对带序号的列表时,人们会错误地认为他们必须完成列表中的所有步骤,实际上他们只需要选择其中一个选项。

【避免】

您可以通过以下方式联系我们:

  1. 邮箱
  2. 微信
  3. 电话
  4. 访问

序号使得列表看起来像是一个流程中的步骤,而不像是一个个独立的项。

【避免】

您可以通过以下方式联系我们:

  • 邮箱
  • 微信
  • 电话
  • 访问

3. 使用相似的句式

每一个项目应该用相似的句式来描述。过多句式可能会破坏语法,还会降低阅读速度。

用相同的结构来描述每项,确保每个项目都是以相同词性的词语开头(例如,名称,动词),并且保证每个项目要么都是片段,要么都是完整的句子。

【避免】

游览公园时请遵守以下规则:

  • 将垃圾扔在垃圾桶中。
  • 过大的声音会使动物受到惊吓。
  • 黄色区域是你可站立的地方。
  • 保持公园干净是每个人的责任。

【推荐】

游玩公园时请遵守以下规则:

  • 请勿乱扔垃圾
  • 禁止大声喧哗
  • 不要走出黄色区域
  • 保持公园干净

第二个列表会显得更好是因为每个项目都是以动词开头。

4. 避免开头重复

尽可能的在项目开头省略如“一个”,“一些”或者“这”以及其他重复的词语。将关键字写在开头使项目之间能够更容易区分。

【避免】

怎样挑选菠萝:

  • 去闻一闻,应该是清新香甜。
  • 去捏一捏,应该结实而柔软。
  • 去看一看,应该呈现金黄色。

【推荐】

怎样挑选菠萝:

  • 闻一闻,应该是清新香甜。
  • 捏一捏,应该结实而柔软。
  • 看一看,应该呈现金黄色。

5. 使用清晰易懂的介绍短句

导语是很重要的,能够让读者清楚的知道列表的内容是关于什么,以及为什么重要。如果列表中的项目都能够清楚表达含义,导语就不必非得是完整的句子。

【避免】

哥伦比亚旅游:

  • 骑行
  • 艺术馆
  • 划独木舟

导语没有充分的介绍列表,而且这个其他项都是动词开头,唯独“艺术博物馆”不是。

【避免】

哥伦比亚旅游:

  • 骑行
  • 参观艺术馆
  • 划独木舟

6. 保持格式一致

参考标点符号等格式规则:

如果列表项是句子,则在结尾使用句号。如果是英文的话,则每一项的首字母都要大写。

如果列表项不是完整的句子,则在结尾不要使用句号。如果是英文的话,还是建议将每一项的首字母大写,这样会便于浏览。

【避免】

If you see bullying:

  • stand up for the person being bullied
  • tell an adult about the situation
  • encourage the person being bullied to talk to an adult
  • give support by showing that you care

这个句子首字母没有大写,也没有使用句号结尾。

【推荐】

If you see bullying:

  • Stand up for the person being bullied.
  • Tell an adult about the situation.
  • Encourage the person being bullied to talk to an adult.
  • Give support by showing you care.

【避免】

You can help protect the environment by:

  • Recycling paper and plastic products.
  • Using fewer disposable items.
  • Donating used clothing or things you don’t need.
  • Biking or walking instead of driving.

这些列表项这些项目是不是完整的句子,所以在结尾处不需要使用标点符号。

【推荐】

You can help protect the environment by:

  • Recycling paper and plastic products
  • Using fewer disposable items
  • Donating used clothing or things you don’t need
  • Biking or walking instead of driving

7. 不要过度使用

与视觉设计一样,过多的使用同样的元素会造成破坏,即便这个元素很好。充满缩紧或者是小圆点的页面可能会令人生畏,要学会明智选择要突出的内容。(如果不是放在示例中,这篇文章中的列表就显得太多了)

当要着重展示的项目在三个或以上时,文字列表是最佳的选择。如果项目少于三个时,嵌入在句子中会是较好的选择。

避免嵌套文字列表中,这样是很不利于浏览的。如果要显示多层级,可以通过为不同的项目符号来区分层级。

P.S.上述内容是比较 通用准则。但是,每个公司或者组织可能会有各自的格式标准。如果你的公司有自己的标准,则在使用上诉建议时先核对一遍公司的标准。在所有文档和产品中采用一致的格式是良好写作的一个重要体现。

总结

文字列表能够更好的吸引眼球,并使每个列表项都能脱颖而出,相较于普通的书写形式,能够更好的找到关键内容并且更易于理解。

 

译自《7 Tips for Presenting Bulleted Lists in Digital Content》

作者:Z Yuhan,一名前华为腾讯交互设计,在英国学习了人机交互,乐意带你由浅入深了解产品体验;公众号:体验进阶。

本文由 @Z Yuhan 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
2人打赏
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!