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

索引列表

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

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

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

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

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

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

通常有兩種方式：

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

列表底部的提示

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

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

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

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

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

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

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

列表拖動

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

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

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

確定點擊范圍

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

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

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

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

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

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

相關(guān)閱讀

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

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

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