細(xì)節(jié)體現(xiàn)藝術(shù)，產(chǎn)品的細(xì)節(jié)會給予用戶良好或出乎意料的體驗(yàn)

索引列表

場景：A在預(yù)定機(jī)票，選擇城市中，一看一長串的列表。B在通訊錄中，想在列表中找到張三，則就一直往下滑才找到。

對策：索引組件主要是為了在列表中更快速精確選擇所想要的內(nèi)容，通常與查詢搜索框搭配，列表右邊會具有字母索引，點(diǎn)擊某個(gè)字母，列表即可定位到該字母下的列表項(xiàng)位置，常見于通訊錄、字典、音樂列表、城市選擇列表等。

不同的場景索引組件的用法也不同，如城市選擇的列表，根據(jù)城市首個(gè)拼音字母進(jìn)行排列，當(dāng)手勢下拉列表，該字母會置頂，直到該字母下的城市全部滑完；對右邊字母索引點(diǎn)擊，列表直接定位跳轉(zhuǎn)到該字母下的城市。在對比以下兩張圖可知，第二種的展示方式更能明顯看出用戶當(dāng)前點(diǎn)擊的是哪個(gè)字母下面的城市，沒有對比就沒有傷害。

記錄列表所選內(nèi)容項(xiàng)

場景：A在預(yù)定機(jī)票中，選擇某時(shí)間段的航班，發(fā)現(xiàn)不合適，返回列表，打算再選擇其他的航班卻不小心點(diǎn)擊原來的那個(gè)航班；B在某商城選擇馬克杯，多次反復(fù)選擇，不仔細(xì)看商品名稱或圖片又會重新點(diǎn)擊之前選擇過。

對策：對于產(chǎn)品列表選擇某項(xiàng)進(jìn)入下一步的場景，通常列表項(xiàng)較為眾多，可通過樣式（背景顏色、字體顏色等）的不同，記錄之前所選過的列表項(xiàng)。

通常有兩種方式：

1. 將所有選擇過的列表項(xiàng)異于未選擇過的列表項(xiàng)?！敬蟛糠稚坛恰?/li>
2. 將最新選擇過的內(nèi)容項(xiàng)異于其他?！景l(fā)現(xiàn)圖表述不清楚，可直接看攜程app】

列表底部的提示

場景：新年來臨，A打算來一場旅游，在瀏覽旅游產(chǎn)品列表，沒找到合適的就一直往下滑，而到最后一頁，滑了幾次，發(fā)現(xiàn)沒有再有加載的旅游產(chǎn)品，才知道產(chǎn)品沒有了，全部加載完了。

對策：直接提示用戶沒有更多的列表項(xiàng)內(nèi)容啦，在列表最后一列表項(xiàng)下加多幾個(gè)文字進(jìn)行提示，如“——到底啦——”、“——軟件名稱——”等之類，讓用戶清楚了解到內(nèi)容已經(jīng)顯示完了，而不是讓用戶由自己去判斷（下滑手勢多做幾次，沒內(nèi)容加載）。

注意：在下滑加載每個(gè)界面的數(shù)據(jù)，都應(yīng)具有加載的過渡標(biāo)識。

列表無內(nèi)容的提醒

場景：A臨時(shí)接到緊急通知，幫boss訂一張安順到阿拉善右旗的機(jī)票，結(jié)果一查，空白界面，內(nèi)心萬馬奔騰走過，這是什么意思，沒航班？還是沒網(wǎng)絡(luò)導(dǎo)致還沒加載進(jìn)來？甚至在想會不會把我賬號設(shè)定不能預(yù)訂查看航班了……

對策：當(dāng)列表項(xiàng)無內(nèi)容，需要有圖文或純文字提示反饋給用戶，甚至給予下一步如何操作的按鈕，讓用戶感知該產(chǎn)品的友好性，盡可能減少讓用戶自己揣摩產(chǎn)品的意圖。

——下面相對針對開發(fā)而言——

列表拖動

場景：A設(shè)計(jì)了一原型圖，也標(biāo)注一些說明，當(dāng)交付給Android開發(fā)與ios開發(fā)，做出來的效果不一樣……一個(gè)是整個(gè)界面可拖動，一個(gè)是只有列表項(xiàng)可拖動。我就遇過這個(gè)坑，如下圖，因?yàn)闆]指定，開發(fā)直接將紅色框的固定，列表內(nèi)容才可拖動。

對策：一般情況下，具有列表的展示都會采取拖動下滑的方式，而如果是由多部分組成的頁面，需要根據(jù)不同的需求去設(shè)定哪些是可拖動的模塊。如之前說的索引界面，有些app上部分的搜索查詢框是固定的，不隨列表而拖動。

列表內(nèi)容的限制

確定點(diǎn)擊范圍

場景：設(shè)計(jì)了篩選頁面，交付給開發(fā)，沒標(biāo)注提示，開發(fā)直接弄成點(diǎn)擊復(fù)選框按鈕才可以勾選~~對于功能上來說該功能是實(shí)現(xiàn)了。但對于體驗(yàn)來說，能點(diǎn)擊的范圍太小，甚至難以點(diǎn)擊，大大降低了體驗(yàn)度，增加了煩躁感。

對策：列表項(xiàng)的布局可以是多種多樣，要確定點(diǎn)擊范圍，是整個(gè)列表項(xiàng) OR 某個(gè)圖片 OR 哪段文字 OR 圖片+文字等等，這需要根據(jù)需求而設(shè)定，此外也得注意點(diǎn)擊后會具有怎么樣的反饋也得一一說明。

確定內(nèi)容的范圍

場景：在設(shè)計(jì)積分商城過程中，對商品名稱沒有做限制說明，交付給開發(fā)，開發(fā)直接是商品名稱直接全部展示，盡管商品名稱狠長……

對策：列表項(xiàng)的文字確定應(yīng)該要幾行，超出的文字該如何處理（通常是“…”或者直接到一定范圍長度不顯示），如下面的商品名稱可為一行，超出的部分以‘’…‘’號代表。

以上是目前在使用列表所整理的注意事項(xiàng)，后續(xù)也會慢慢更新產(chǎn)品細(xì)節(jié)控的文章。

相關(guān)閱讀

產(chǎn)品細(xì)節(jié)控：輸入框

本文由 @Halona 原創(chuàng)發(fā)布于GrowthHK。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自unsplash，基于CC0協(xié)議

GrowthHK（Growth Hacker）：增長黑客是依靠技術(shù)和數(shù)據(jù)來達(dá)成各種營銷目標(biāo)的新型團(tuán)隊(duì)角色。從單線思維者時(shí)常忽略的角度和高度，梳理整合產(chǎn)品發(fā)展的因素，實(shí)現(xiàn)低成本甚至零成本帶來的有效增長…