產品細節控：列表的那些事兒

發布于 2022-11-18 14:56

細節體現藝術，產品的細節會給予用戶良好或出乎意料的體驗。

索引列表

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

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

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

記錄列表所選內容項

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

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

通常有兩種方式：

將所有選擇過的列表項異于未選擇過的列表項?！敬蟛糠稚坛恰繉⒆钚逻x擇過的內容項異于其他?！景l現圖表述不清楚，可直接看攜程app】

列表底部的提示

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

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

注意：在下滑加載每個界面的數據，都應具有加載的過渡標識。

列表無內容的提醒

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

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

——下面相對針對開發而言——

列表拖動

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

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

列表內容的限制確定點擊范圍

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

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

確定內容的范圍

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

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

以上是目前在使用列表所整理的注意事項，后續也會慢慢更新產品細節控的文章。