簡(jiǎn)單實(shí)用！使用無(wú)序列表時(shí)應(yīng)該注意的7項(xiàng)細(xì)節(jié)

@可樂(lè)橙_ColaChan ：小圓點(diǎn)有助于分割大段文字，使得復(fù)雜的文章和博客更容易消化，突出關(guān)鍵信息。如何運(yùn)用好無(wú)序列表？這篇文章提出了7個(gè)注意點(diǎn)。

有時(shí)候，最好的信息展現(xiàn)方式就是無(wú)序列表。無(wú)序列表能吸引注意、便于瀏覽、簡(jiǎn)化文本，并且表達(dá)出項(xiàng)目之間的關(guān)系。

網(wǎng)站不是一個(gè)適合長(zhǎng)篇大論的地方。相比之下，網(wǎng)站的讀者更喜歡文案以某種易于瀏覽的形式組織起來(lái)，能讓他們輕松跳過(guò)大段文字，直達(dá)自己感興趣的部分。

有許多種網(wǎng)頁(yè)文本格式的技巧，能夠分割大段內(nèi)容。無(wú)序列表和加粗、縮進(jìn)、行間距、彩色文字，都是輔助網(wǎng)頁(yè)內(nèi)容高效閱讀的重要手段。

區(qū)區(qū)幾個(gè)小圓點(diǎn)能夠吸引視線，并且讓復(fù)雜的概念易于理解。小圓點(diǎn)能讓讀者感知到內(nèi)容的簡(jiǎn)明和重要。這并不奇怪，在可用性研究中，我們觀察到讀者對(duì)無(wú)序列表滿懷熱情。網(wǎng)頁(yè)的讀者希望快速消化內(nèi)容。

我們可以對(duì)比下面這兩個(gè)版本。你會(huì)發(fā)現(xiàn)第2個(gè)版本中的內(nèi)容更易閱讀。這是因?yàn)樗钥v向列表的形式展現(xiàn)。相比之下，在第1個(gè)版本中，讀者只能在結(jié)構(gòu)不太清晰的段落中尋找。

版本1

我們的Spa度假套餐包含了2晚住宿，2次50分鐘的任選spa項(xiàng)目，1頓兩人份的上門早餐，到達(dá)時(shí)還有禮品籃相贈(zèng)。

版本2

我們的Spa度假套餐包含：

• 2晚住宿
• 2次50分鐘的任選spa項(xiàng)目
• 1頓兩人份的上門早餐
• 到達(dá)時(shí)贈(zèng)送禮品籃

不必?fù)?dān)心版本2占了更大的縱向版面。如果（或者說(shuō)除非）用戶對(duì)內(nèi)容感興趣，隨著視線的下移，他們完全不介意往下滾動(dòng)。事實(shí)上，相比那些用長(zhǎng)篇大論嚇退用戶的網(wǎng)站，恰當(dāng)?shù)厥褂昧藷o(wú)序列表的網(wǎng)站，會(huì)更加親切易懂，用戶也會(huì)更有動(dòng)力向下滾動(dòng)。

使用無(wú)序列表的7條建議

1. 每一項(xiàng)的長(zhǎng)度要比較接近

無(wú)序列表在展示相關(guān)內(nèi)容時(shí)會(huì)達(dá)到最佳效果。其中的每一項(xiàng)都應(yīng)該有同等的重要性。可能的話，讓每一項(xiàng)的長(zhǎng)度保持接近，就不會(huì)有明顯的主次之分。保持統(tǒng)一的外觀能讓眼睛更舒適，使列表顯得不那么雜亂。

錯(cuò)誤用法

請(qǐng)帶上以下物品參加露營(yíng)：

• 睡袋
• 去瀑布徒步旅行時(shí)要用到的洗浴套件
• 防曬霜
• 防水夾克應(yīng)對(duì)可能的雨天。我們可能會(huì)遇到強(qiáng)烈的暴風(fēng)雨

長(zhǎng)度上的差異，使得列表項(xiàng)顯得雜亂、不統(tǒng)一。

建議用法

請(qǐng)帶上以下物品參加露營(yíng)：

• 睡袋
• 洗浴套件
• 防曬霜
• 防水夾克

2. 除非順序很重要，否則不要使用有序列表

有序列表的使用場(chǎng)合，通常是列表項(xiàng)必須按照某個(gè)特定順序排列，例如程序步驟。或者數(shù)量很重要時(shí)才能使用，比如前十名的榜單。

如果列表項(xiàng)的順序和數(shù)量不重要，那就不需要數(shù)字序號(hào)。這么做會(huì)使人困惑：我們?cè)谟脩粞芯恐邪l(fā)現(xiàn)，人們會(huì)錯(cuò)誤地認(rèn)為他們必須完成有序列表中的每一項(xiàng)，但其實(shí)他們只需要選擇其中一項(xiàng)即可。

錯(cuò)誤用法

請(qǐng)通過(guò)下列任何一種方式聯(lián)系我們：

1. 在線聯(lián)系登記表
2. 在線聊天
3. 致電
4. 親自上門

這些數(shù)字序號(hào)，讓列表項(xiàng)顯得好像是要按照順序步驟來(lái)執(zhí)行，而不是幾個(gè)獨(dú)立選項(xiàng)。

建議用法

請(qǐng)通過(guò)下列任何一種方式聯(lián)系我們：

• 在線聯(lián)系登記表
• 在線聊天
• 致電
• 親自上門

3. 在列表項(xiàng)中使用相似的句子結(jié)構(gòu)

每一項(xiàng)都要有統(tǒng)一的措辭風(fēng)格。多變的措辭影響句子通順，會(huì)阻礙讀者閱讀（甚至導(dǎo)致困惑）。

用相同的方式組織每一項(xiàng)。確保無(wú)序列表的每一項(xiàng)以相同的語(yǔ)法元素開頭（例如名詞、動(dòng)詞），要么都是詞組，要么都是完整的句子。

錯(cuò)誤用法

在公園中請(qǐng)遵守以下規(guī)則：

• 將垃圾投入指定的垃圾桶。
• 巨大噪音會(huì)嚇壞動(dòng)物。
• 應(yīng)該站在黃色的標(biāo)記線區(qū)域。
• 保持公園干凈，人人有責(zé)。

在這個(gè)例子中，4條語(yǔ)句都以不同的詞語(yǔ)開頭。

建議用法

在公園中請(qǐng)遵守以下規(guī)則：

• 將垃圾投入指定的垃圾桶。
• 不要發(fā)出巨大噪音。
• 站在黃線區(qū)域內(nèi)。
• 盡量保持公園清潔。

第二個(gè)列表的閱讀更順暢，因?yàn)槊總€(gè)短語(yǔ)的開頭都用了同一類詞語(yǔ)——本例中是動(dòng)詞。

4. 避免在每一項(xiàng)開頭重復(fù)相同的詞語(yǔ)

如果可以的話，請(qǐng)省略“一個(gè)”、“是”、“這個(gè)”這樣的詞語(yǔ)，去掉每一項(xiàng)開頭的重復(fù)詞語(yǔ)。每個(gè)列表項(xiàng)開頭的詞語(yǔ)有所區(qū)分，能讓列表更加容易分辨。

錯(cuò)誤用法

如何挑選菠蘿：

• 用聞的。它聞起來(lái)要甜。
• 用按的。它應(yīng)該按下去結(jié)實(shí)但柔軟。
• 用看的。它最好是金黃色。

建議用法

如何挑選菠蘿：

• 聞。它聞起來(lái)要甜。
• 按。按下去應(yīng)該結(jié)實(shí)但柔軟。
• 看。最好是金黃色。

5. 使用清晰的、描述性的句子和詞語(yǔ)來(lái)說(shuō)明列表

引語(yǔ)（或者說(shuō)說(shuō)無(wú)序列表之前的那句話）很重要，因?yàn)樗屪x者知道列表的內(nèi)容大概是什么，為什么重要。引語(yǔ)不必是完整的句子，也可以和列表的每一項(xiàng)組合成完整有意義的句子。

錯(cuò)誤用法

不列顛哥倫比亞省的假期：

• 徒步旅行
• 藝術(shù)博物館
• 在湖上劃獨(dú)木舟

引語(yǔ)（不列顛哥倫比亞的假期）沒有充分描述列表。而且，列表中包含了假期要完成的事項(xiàng)，但藝術(shù)博物館并不是一個(gè)動(dòng)作。

建議用法

我們?cè)诓涣蓄嵏鐐惐葋喪〉募倨谛谐贪ǎ?/span>

• 上山徒步旅行
• 參觀藝術(shù)博物館
• 在湖上劃獨(dú)木舟

6. 保持格式一致

關(guān)于大小寫和標(biāo)點(diǎn)有一些基本準(zhǔn)則：

• 如果列表項(xiàng)是句子，那么每一項(xiàng)的首字母就要大寫，并且以句號(hào)結(jié)尾。
• 如果列表項(xiàng)是詞組，不需要任何標(biāo)點(diǎn)結(jié)尾，也不是一定要首字母大寫。但是我們還是建議首字母大寫，這樣更易于瀏覽。

錯(cuò)誤用法

如果發(fā)現(xiàn)霸凌行為：

• 支持受害者
• 將事情告知成年人
• 鼓勵(lì)受害者向成年人反映
• 通過(guò)表示關(guān)心來(lái)提供幫助

這些句子沒有首字母大寫【譯者注：當(dāng)然中文沒這個(gè)問(wèn)題】，而且結(jié)尾沒有標(biāo)點(diǎn)。

建議用法

如果發(fā)現(xiàn)霸凌行為：

• 支持受害者。
• 將事情告知成年人。
• 鼓勵(lì)受害者向成年人反映。
• 通過(guò)表示關(guān)心來(lái)提供幫助。

錯(cuò)誤用法

你可以通過(guò)____來(lái)保護(hù)環(huán)境：

• 回收紙張和塑料產(chǎn)品。
• 少用一次性物品。
• 捐贈(zèng)舊衣服和閑置物品。
• 騎車與步行替代開車。

列表項(xiàng)是詞組，因此不需要標(biāo)點(diǎn)符號(hào)結(jié)尾。

建議用法

你可以通過(guò)____來(lái)保護(hù)環(huán)境：

• 可回收紙張和塑料產(chǎn)品
• 少用一次性物品
• 捐贈(zèng)舊衣服和閑置物品
• 騎車與步行替代開車

7. 不要濫用無(wú)序列表，會(huì)導(dǎo)致它們喪失效果

就像所有的視覺設(shè)計(jì)技巧一樣，過(guò)度使用都是有害的。如果看到滿是小圓點(diǎn)和縮進(jìn)的頁(yè)面，你會(huì)嚇傻的。明智地選擇需要強(qiáng)調(diào)的內(nèi)容。（如果你沒發(fā)現(xiàn)本文中的無(wú)序列表是前后對(duì)比的案例，你就會(huì)覺得有點(diǎn)使用過(guò)頭了。）

在有3項(xiàng)或更多重要信息時(shí)，縱向列表是最好的展示方式。如果項(xiàng)目更少，那就殺雞用牛刀了，直接放在句子中通常效果更好。

避免嵌套使用列表，這樣就很難理解了。如果一定要表現(xiàn)多層級(jí)的列表，每一級(jí)都要用不同樣式的小圓點(diǎn)。

注意

這些只是一般規(guī)范。但是每個(gè)公司或組織可能會(huì)采用不同的格式。如果你的公司在遵循某套風(fēng)格指南，你應(yīng)該先了解指南，然后才決定是否遵循以上規(guī)范。文案撰寫有一個(gè)重要的方面，就是在整個(gè)文檔和網(wǎng)頁(yè)中保持內(nèi)容統(tǒng)一格式。

結(jié)論

縱向列表吸引視線，能使列表每一項(xiàng)各自獨(dú)立。因此，它比行內(nèi)的列表更有效，能讓人更有效地瀏覽、參考和理解關(guān)鍵要點(diǎn)。

「提升用戶體驗(yàn)的好文合集」

1. 《刀刀必中！UI設(shè)計(jì)師非學(xué)不可的十大易用性原則》
2. 《有圖有案例！125個(gè)提升網(wǎng)頁(yè)可用性的優(yōu)化小技巧（一）》
3. 《有圖有對(duì)比！125個(gè)提升網(wǎng)頁(yè)可用性的優(yōu)化小技巧（二）》
4. 《有圖有案例！125個(gè)提升網(wǎng)頁(yè)可用性的優(yōu)化小技巧（三）》

原文地址：nngroup
譯文地址：colachan

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com