先看懂列表，再正確使用列表

 　　引言

　　隨著公司朝互聯網轉型的腳步，目前我們已經有幾十個移動APP上線，但是各個應用之間的設計策略和規范的差異性導致我們自身的設計品牌難以凸顯，略顯雜亂;而交互原則的差異性則導致每個應用之間的交互方式差異頗大，明明是同一個系列同一個類型的應用，卻用了兩種截然不同的交互框架，給用戶的學習和使用上帶了了很多不便。

　　在這種情況下，我們用戶體驗部通過成立這個移動專項研究小組來進行分步驟、長期的移動應用設計模式研究，希望能夠通過我們的努力，不斷改進我們的移動應用設計模式，最終將我們金蝶品牌的移動應用在易用性、易學性上達到業界領先的高度，設計風格上也能夠獨樹一幟。

　　接下來我們將會不定期發布一系列移動專項的文章，逐步分享我們的研究過程和成果，我們的每一篇文章都帶有版本號和更新記錄，我們將在未來不斷地改進和補充每一篇文章陳述的案例和模版，供產品線進行設計參考。

　　本次專項我們小組對移動應用中的列表做了專題分析，以幫助我們更好的看懂列表。

　　列表是一種數據項構成的有限序列，即按照一定的線性順序，排列而成的數據項的集合，在這種數據結構上進行的基本操作包括對元素的的查找，插入和刪除等。隨著移動互聯網的到來移動產品呈爆發式的增長，列表也在移動應用中得到了大量的應用。作為移動產品中內容信息的一種重要呈現方式，它可以使信息很有條理的展現，也方便對對列表信息的操作。因此看懂列表，並正確的使用列表，對我們在做產品設計的時候有著重要的幫助。

　　一、組成列表的基本元素

　　移動應用作為促進信息交流的一種產品，它傳播信息的載體也同樣是我常用的文字、圖片、聲音、視頻等。可見列表的構成脫離不了這幾個基本載體，此外還有一些小控件，比如：按鈕，選擇框、彈出框等。

　　來看以下圖片中列表是如何組合這些元素的。

　　二、常用的幾大類列表樣式

　　A. 以文字信息為主的列表樣式

　　1.競品展示

　　2. 分析

　　這類列表主要適用於文字信息為主要內容的列表，列表內容裡面沒有圖片或者圖片不是很重要的信息。另外，除了文字外可能還會用到一些按鈕，選擇框等一些交互控件來輔助列表的交互。

　　3.輸出以文字為主的列表樣式規范

　　B. 以圖片信息為主的列表樣式

　　1.競品展示

　　2. 分析

　　這類列表主要適用於圖片信息為主要內容的列表，比如像購物類、飲食團購類、攝影類等圖片信息特別重要的產品比較適用於選擇這類列表顯示來展示信息。

　　3.輸出以圖為主的列表樣式規范

　　C.圖文並重的列表樣式

　　1.競品展示

　　2. 分析

　　這類列表主要適用於圖片信息和文字信息重要程度相當的列表，比如一些有縮略圖，圖形化的數據，需要圖文結合的去表達內容。就比較適合用這類的列表樣式。

　　3.輸出圖文並重的列表樣式規范

　　三、列表交互動作分析

　　1.競品展示

　　2. 分析

　　列表的交互方式比較多，在不同的平台和不同的需求上我們會選擇不同的交互方式來滿足我們的需要，正是因為交互比較多，我們如果不合理的選擇的話會導致產品在交互上的混亂以及與用戶習操作習慣的偏離。

　　3.輸出列表交互動作規范

　　四、列表交互區域分析

　　1.競品展示

　　2.分析

　　列表不僅交互方式比較多而且交互區域也是各式各樣，以上競品中對常用的交互區域進行了分析，目的是為了找到一些列表交互規律和行為習慣，以便我們更規范的設計列表的交互區域。此處只對當前列表的交互區域進行分析，至於側拉出來或彈出來的交互區域一般是以按鈕為主，指示性較強，在此我們不做分析。

　　3.輸出列表交互區域規范

　　五、正確的使用列表

　　以上對列表三個維度的分析有助於我們更好的理解列表，同時也更希望能有助於我們在今後的設計過程中更好的使用列表，下面來講講如何更好的使用列表。

　　1.靈活的使用列表：在列表的設計過程中應根據產品所要表達內容的數據關系的需要去設計列表，而做好這一點的前提是你需要明確你所要表達的內容要用到哪些基本元素，並梳理他們之間重要層級關系，然後再進行合理的排列組合。一定不能生搬硬套。

　　2.尊重用戶的認知習慣：在排列組合的過程中不僅要考慮內容數據關系的表達，同時也要考慮用戶的認知習慣，讓用戶一看就能明白是最好，即使不能做到這一點也要能保證用戶一學就會。

　　3.交互動作的設計不可大意：首先，交互動作的設計首先應滿足內容的需要，同時也要考慮整個產品交互的一致性以及平台的兼容性。其二，交互方式要符合用戶的操作習慣。其三，如果是一個創新的交互動作則要保證其在交互上易學易用。

　　總之，列表作為一種常用的交互模式，它沉澱一定的數據邏輯關系和用戶行為。理解它背後所沉澱邏輯關系行為有助於我們更好的設計和使用列表。幫助解決現實產品中的問題，這也是本次專項的意義所在。