使用无序列表的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

相关推荐

  • 国际用户体验设计论坛邀请函

    点击上方蓝字关注我们国际用户体验设计论坛暨中国工业设计协会用户体验产业分会第一届理事会预备会!  开始报名啦  !官方海报如下👇报名方式一👇长按识别下方二维码,通过报名页面报名👇报名方式二点击文章最底部“阅读原文”,通过H5报名页面完成报名了解我们关注我们长按下图二维码关注“UXE优艺智造”这里有最新的行业动向最前沿的学术研究来一探用户体验的商业价值吧联系我们电话15868193198邮箱uxestudy@126.com欢迎投稿

    2018-03-30
  • 移动端体验设计6大禁

    我们一开始为什么去安装应用程序?是为了使我们的生活更方便。但当一个应用无法满足这一要求时,用户肯定就会离它而去。一个应用的成功是受多种因素影响的,其中整体移动用户体验是最重要的影响因素。绝佳的用户体验是一个应用程序成功的关键。

    2017-05-17
  • 谁说GIF就不是艺术?2014年海外最佳艺术GIF动画作品

    GIF动画与艺术是一对完美的搭配,它们将过去和现在混合起来并配以幽默,通过Photoshop的处理为我们带来了惊艳生动的图画。日前,Tumblr网站评选出了2014年一些最好的数码动画艺术作品。我们从中筛选了一部分,从艺…

    2015-01-08
  • 3种基本方法,引导用户正确操作

    作为一名产品经理,当人们使用你的产品的时候,需要尽可能避免他们犯错误。我们应该留心用户可能犯错误的地方,在合适的地方给他们一个温和的推动,以确保一切都能正常进行。(不要让用户认为自己被指使着做什么事,至少不要用被认为是“粗鲁”和“侵扰式”的)

    2017-05-31
  • 细节体验|你离用户只差一个好的交互

    上一篇我们简单的提到过“在合适的时机出现”这个交互细节打磨点,今天我们继续沿着这个点,剖析一些常见的交互细节点及案例。

    2017-05-18
  • 【译文】来看看糟糕的用户体验如何毁掉一个设计

    作者:JAKE ROCHELEAU;译者:岩盐盐盐   谷歌团队近几年的数据研究表明,用户体验的重要性在网页设计中越来越突出。然而现在还是还有好多网站采用中心提示用来阻碍网站的可用性,它们有些疏忽导致,有些确实故意为…

    交互专题 2023-03-03
  • 如何减少哑铃图中的颜色,提高用户体验?

    有奖互动话题,文末等你概述作者在 #MakeoverMonday 2018 的第 2 周的课题上,制作了一张哑铃图来比较男性与女性在寻找伴侣时所注重的特征排名。他目标是展示不同国家的男性或女性在寻找伴侣时是否都会将某一特征看作重要因素。这样让作者立即想到了哑铃图,但是他的第一份草稿存在一定的问题。Viz 中的颜色太多了,我们很难从中发现趋势。之前作者也曾遇到过这个问题,但是他觉得真正的解决办法应该是,在不减少 Viz 中数据数量的情况下...

    2018-04-19
  • 一个小小城市选择控件引发的深度思考

    很早以前小Q在《用好的交互设计来管理复杂-“筛选器”》一文,较为全面的剖析了筛选器的各种分类及其利弊。本文会继续筛选器的城市选择控件继续分析。A-Z index(字母索引)适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航,且用户能对这些数据的首字母进行精确回忆。例如:国家、省份或城市的名称、姓名、昵称等。在移动端设计中A-Z index通常以竖轴形式出现在屏幕右侧,点击字母能将内容滚动到该字母的锚点位置。

    2017-06-07
  • UED设计流程与原则

    UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。 来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问…

    交互设计 2015-04-20
  • 小优姐姐,大家都在说的交互设计,它日常工作内容究竟是啥?

    封面设计:vivien bertin每次亲朋好友来问我,做什么工作的啊?自豪的回答:交互设计然后然后就没有然后了。。。朋友每次看完俺的文章都会说很好啊还会给我打赏但是最后的最后会补充一句没看懂,太高深以及最近被一波接地气的央视海报刷屏大家纷纷表示看到了希望先来两张海报让大家感受一下连一向以严肃正经形象示人的央视好像被触发了某个开关变得越来越不正经亲切可爱咱们交互设计师是不是也要走下神坛来说说交互设计师每天那点事9:00查看邮件确认是否有...

    2018-01-31