使用无序列表的7项注意

小圆点有助于分割大段文字,使得复杂的文章和博客更容易消化,突出关键信息。如何运用好无序列表?这篇文章提出了7个注意点。


小圆点有助于分割大段文字,使得复杂的文章和博客更容易消化,突出关键信息。如何运用好无序列表?这篇文章提出了7个注意点。

使用无序列表的7项注意

有时候,最好的信息展现方式就是无序列表。无序列表能吸引注意、便于浏览、简化文本,并且表达出项目之间的关系。

网站不是一个适合长篇大论的地方。相比之下,网站的读者更喜欢文案以某种易于浏览的形式组织起来,能让他们轻松跳过大段文字,直达自己感兴趣的部分。

有许多种网页文本格式的技巧,能够分割大段内容。无序列表和加粗、缩进、行间距、彩色文字,都是辅助网页内容高效阅读的重要手段。

区区几个小圆点能够吸引视线,并且让复杂的概念易于理解。小圆点能让读者感知到内容的简明和重要。这并不奇怪,在可用性研究中,我们观察到读者对无序列表满怀热情。网页的读者希望快速消化内容。

我们可以对比下面这两个版本。你会发现第2个版本中的内容更易阅读。这是因为它以纵向列表的形式展现。相比之下,在第1个版本中,读者只能在结构不太清晰的段落中寻找。

版本1:

我们的Spa度假套餐包含了2晚住宿,2次50分钟的任选spa项目,1顿两人份的上门早餐,到达时还有礼品篮相赠。

版本2:

我们的Spa度假套餐包含:

  • 2晚住宿
  • 2次50分钟的任选spa项目
  • 1顿两人份的上门早餐
  • 到达时赠送礼品篮

不必担心版本2占了更大的纵向版面。如果(或者说除非)用户对内容感兴趣,随着视线的下移,他们完全不介意往下滚动。事实上,相比那些用长篇大论吓退用户的网站,恰当地使用了无序列表的网站,会更加亲切易懂,用户也会更有动力向下滚动。

使用无序列表的7条建议

1. 每一项的长度要比较接近

无序列表在展示相关内容时会达到最佳效果。其中的每一项都应该有同等的重要性。可能的话,让每一项的长度保持接近,就不会有明显的主次之分。保持统一的外观能让眼睛更舒适,使列表显得不那么杂乱。

错误用法

请带上以下物品参加露营:

  • 睡袋
  • 去瀑布徒步旅行时要用到的洗浴套件
  • 防晒霜
  • 防水夹克应对可能的雨天。我们可能会遇到强烈的暴风雨

长度上的差异,使得列表项显得杂乱、不统一。

建议用法

请带上以下物品参加露营:

  • 睡袋
  • 洗浴套件
  • 防晒霜
  • 防水夹克

2. 除非顺序很重要,否则不要使用有序列表

有序列表的使用场合,通常是列表项必须按照某个特定顺序排列,例如程序步骤。或者数量很重要时才能使用,比如前十名的榜单。

如果列表项的顺序和数量不重要,那就不需要数字序号。这么做会使人困惑:我们在用户研究中发现,人们会错误地认为他们必须完成有序列表中的每一项,但其实他们只需要选择其中一项即可。

错误用法

请通过下列任何一种方式联系我们:

  1. 在线联系登记表
  2. 在线聊天
  3. 致电
  4. 亲自上门

这些数字序号,让列表项显得好像是要按照顺序步骤来执行,而不是几个独立选项。

建议用法

请通过下列任何一种方式联系我们:

  • 在线联系登记表
  • 在线聊天
  • 致电
  • 亲自上门

3. 在列表项中使用相似的句子结构

每一项都要有统一的措辞风格。多变的措辞影响句子通顺,会阻碍读者阅读(甚至导致困惑)。

用相同的方式组织每一项。确保无序列表的每一项以相同的语法元素开头(例如名词、动词),要么都是词组,要么都是完整的句子。

错误用法

在公园中请遵守以下规则:

  • 将垃圾投入指定的垃圾桶。
  • 巨大噪音会吓坏动物。
  • 应该站在黄色的标记线区域。
  • 保持公园干净,人人有责。

在这个例子中,4条语句都以不同的词语开头。

建议用法

在公园中请遵守以下规则:

  • 将垃圾投入指定的垃圾桶。
  • 不要发出巨大噪音。
  • 站在黄线区域内。
  • 尽量保持公园清洁。

第二个列表的阅读更顺畅,因为每个短语的开头都用了同一类词语——本例中是动词。

4. 避免在每一项开头重复相同的词语

如果可以的话,请省略“一个”、“是”、“这个”这样的词语,去掉每一项开头的重复词语。每个列表项开头的词语有所区分,能让列表更加容易分辨。

错误用法

如何挑选菠萝:

  • 用闻的。它闻起来要甜。
  • 用按的。它应该按下去结实但柔软。
  • 用看的。它最好是金黄色。

建议用法

如何挑选菠萝:

  • 闻。它闻起来要甜。
  • 按。按下去应该结实但柔软。
  • 看。最好是金黄色。

5. 使用清晰的、描述性的句子和词语来说明列表

引语(或者说说无序列表之前的那句话)很重要,因为它让读者知道列表的内容大概是什么,为什么重要。引语不必是完整的句子,也可以和列表的每一项组合成完整有意义的句子。

错误用法

不列颠哥伦比亚省的假期:

  • 徒步旅行
  • 艺术博物馆
  • 在湖上划独木舟

引语(不列颠哥伦比亚的假期)没有充分描述列表。而且,列表中包含了假期要完成的事项,但艺术博物馆并不是一个动作。

建议用法

我们在不列颠哥伦比亚省的假期行程包括:

  • 上山徒步旅行
  • 参观艺术博物馆
  • 在湖上划独木舟

6. 保持格式一致

关于大小写和标点有一些基本准则:

  • 如果列表项是句子,那么每一项的首字母就要大写,并且以句号结尾。
  • 如果列表项是词组,不需要任何标点结尾,也不是一定要首字母大写。但是我们还是建议首字母大写,这样更易于浏览。

错误用法

如果发现霸凌行为:

  • 支持受害者
  • 将事情告知成年人
  • 鼓励受害者向成年人反映
  • 通过表示关心来提供帮助

这些句子没有首字母大写【译者注:当然中文没这个问题】,而且结尾没有标点。

建议用法

如果发现霸凌行为:

  • 支持受害者。
  • 将事情告知成年人。
  • 鼓励受害者向成年人反映。
  • 通过表示关心来提供帮助。

错误用法

你可以通过____来保护环境:

  • 回收纸张和塑料产品。
  • 少用一次性物品。
  • 捐赠旧衣服和闲置物品。
  • 骑车与步行替代开车。

列表项是词组,因此不需要标点符号结尾。

建议用法

你可以通过____来保护环境:

  • 可回收纸张和塑料产品
  • 少用一次性物品
  • 捐赠旧衣服和闲置物品
  • 骑车与步行替代开车

7. 不要滥用无序列表,会导致它们丧失效果

就像所有的视觉设计技巧一样,过度使用都是有害的。如果看到满是小圆点和缩进的页面,你会吓傻的。明智地选择需要强调的内容。(如果你没发现本文中的无序列表是前后对比的案例,你就会觉得有点使用过头了。)

在有3项或更多重要信息时,纵向列表是最好的展示方式。如果项目更少,那就杀鸡用牛刀了,直接放在句子中通常效果更好。

避免嵌套使用列表,这样就很难理解了。如果一定要表现多层级的列表,每一级都要用不同样式的小圆点。

注意:这些只是一般规范。但是每个公司或组织可能会采用不同的格式。如果你的公司在遵循某套风格指南,你应该先了解指南,然后才决定是否遵循以上规范。文案撰写有一个重要的方面,就是在整个文档和网页中保持内容统一格式。

结论

纵向列表吸引视线,能使列表每一项各自独立。因此,它比行内的列表更有效,能让人更有效地浏览、参考和理解关键要点。

 

原文作者:HOA LORANGER

原文地址:https://www.nngroup.com/articles/presenting-bulleted-lists/

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小伙伴们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

本文翻译发布于人人都是产品经理,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22766/

(0)
CatherineCatherine
上一篇 2017-05-02 22:44
下一篇 2017-05-03 00:33

相关推荐

  • 聊聊UI界面中搜索入口的设计

    搜索几乎是现在所有网站,APP甚至操作系统的标配,不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站上搜索呈现的方式都有所不同。

    2017-05-16
  • 交互设计实例分享

    现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己…

    2017-08-03
  • 初感避孕套用户体验反馈

    其实初感明白,很多朋友都徘徊在到底要不要代理初感这款产品上,很多的朋友都在问初感长的啥样的?以及初感避孕套的价格是多少?初感避孕套怎么样,好不好用?初感避孕套的效果如何?初感回头客多不多?今天我就把我自己的亲身体验分享大家!初感长啥样?下面就是初感的包装图和套子的实物图:高大上的包装盒,简便易撕的小袋子!初感的价格到底是多少呢?来看看初感安全套与市面上各大品牌的价格对比:通过这张图可以看到,初感安全套不仅比那些大品牌的安全套价格便宜,而...

    2018-02-12
  • 对交互设计的思考(译文)

    本文是一篇译文,介绍了国外设计师对于交互设计师的现状和他认为的理想状态的思考。老外的思路还是比较清奇的,在这里介绍给大家。数字革命对于有好奇心的人来说就像是淘金热。没有人知道数字媒体究竟是什么,但它实实在在的深刻影响着我们的生活。 它是一个新的未知的领域,等待用新的艺术形式,设计和方式来填充,以更好地了解这个世界。然后,世界就变成了下面这样:这是怎么回事?1.基于技术思维的交互设计交互设计从数字技术革命中应运而生。所以就像工程师一样,设...

    2018-02-02
  • 好的产品经理是什么样的?

    互联网界自从出了几个大神级的产品之后,产品背后的产品经理被捧红了,一时间产品经理成了诸多行业从业者追求的目标,每个人都期望有一天也能做出一个很牛的产品来,这种影响导致了很多刚毕业的学弟学妹,都认为产…

    2014-11-12
  • 留白这种设计手段的4大必要功效

    留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
    “留白不单单是一个被动的背景,而是一个活跃的元素。”Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
    适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.The more whitespace around an object, the more the eye is drawn to it
    越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。As designers, it’s our responsibility to create usable communication vehicles.
    “作为设计师,我们职责就是去创造“沟通手段””Let the products speak for themselves
    让产品自身为自己说话。

    2017-04-28
  • 用户至上——何为用户体验

    在这边学习笔记中,主要将讲用户体验是什么、UCD的设计原则、设计原则在项目中的应用和市场、商业、用户不同需求的区分这四个方面。第一:何为用户体验用户体验设计协会将用户体验定义为“用户与产品、服务和系统交互过程中感知到的全部要素。用户体验设计包含构成界面的全部要素,例如页面布局、视觉设计、文字、品牌、声音和交互等。可用性工程协调各个要素之间的关系,并为用户提供最佳的交互体验。”另一个虽然可能不是最佳答案,但是简单有效的回答——就是让技术变...

    2018-04-24
  • 为熟练用户设计:如何设计才能帮助用户提高使用效率?

    本文作者将从导航和首页的信息排布、操作时间和快捷键三个方面展开,在通讯产品、办公软件等这类被大量使用场景的产品中,该如何设计才能帮助用户提高使用效率?

    2017-05-19
  • Axure用的溜,并不代表你就能成为一个产品经理

    作者:杨俊全文共 2497 字,阅读需要 5 分钟—— BEGIN ——当你在人人都是产品经理上搜索“Axure”时,会有98页的结果。在知乎以及其它一些产品经理相关的网站上,也总是能够看到诸多Axure的使用问题和经验分享。但是,作为一个产品经理确实是需要会使用Axure的,但你使用Axure并不代表你就能成为一个产品经理。用户体验五要素在《用户体验的要素》中提到的五要素,自上而下分别是:战略层、范围层、结构层、框架层和表现层。当你能...

    2018-03-04
  • 定义设计原则,驱动设计决策

    UX团队如何给设计原则做优先级排序?本文就此展开讨论,enjoy~这个list有优先顺序吗?

    2017-04-27