鄭重聲明：本文從設(shè)計(jì)角度說明Android列表動(dòng)效設(shè)計(jì)問題，含前端技術(shù)，碼農(nóng)慎噴，我是萌妹紙～

相信設(shè)計(jì)師在設(shè)計(jì)到關(guān)于列表的動(dòng)效問題的時(shí)候會(huì)很頭痛，例如列表該如何出現(xiàn)，又該怎樣結(jié)束～

對(duì)于碼農(nóng)哥哥來(lái)說也有很大的困擾，那就是，拿到設(shè)計(jì)稿的時(shí)候，對(duì)于動(dòng)效師提出的各種五花八門的動(dòng)效感覺就是：我去年買了個(gè)表。那么代碼哥哥怎么能夠更加高效的把設(shè)計(jì)稿實(shí)現(xiàn)呢？看完今天這篇文章相信你會(huì)有額外的收獲～

首先在這里要感謝icon和頁(yè)面的設(shè)計(jì)師璀瑤女士和碼農(nóng)哥cmychad（文章后面會(huì)提到）～

在我們公司項(xiàng)目開展的時(shí)候，分配給我的項(xiàng)目中有大量的列表設(shè)計(jì)及動(dòng)效設(shè)計(jì)，開始的時(shí)候感覺無(wú)從下手，但是自從在github上發(fā)現(xiàn)碼農(nóng)哥哥cmychad的一個(gè)開源項(xiàng)目（項(xiàng)目名稱：BaseRecyclerViewAdapterHelper）的時(shí)候，真的是欣喜若狂，在項(xiàng)目實(shí)施的時(shí)候，公司的安卓開發(fā)遍用上了這個(gè)開源項(xiàng)目進(jìn)行開發(fā)～

po上cmychad碼農(nóng)哥哥的鏈接：

 https://github.com/CymChad/BaseRecyclerViewAdapterHelper

那這個(gè)動(dòng)效是怎樣展示的呢？

從上面的GIF圖可以看出

• 對(duì)于開發(fā)來(lái)說：優(yōu)化Adapter代碼（減少百分之70%代碼）

• 添加點(diǎn)擊item點(diǎn)擊、長(zhǎng)按事件、以及item子控件的點(diǎn)擊事件

• 添加加載動(dòng)畫（一行代碼輕松切換5種默認(rèn)動(dòng)畫）

• 添加頭部、尾部、下拉刷新、上拉加載（感覺又回到ListView時(shí)代）

• 設(shè)置自定義的加載更多布局（對(duì)于開發(fā)）

• 添加分組（隨心定義分組頭部）

• 自定義不同的item類型（簡(jiǎn)單配置、無(wú)需重寫額外方法）

• 設(shè)置空布局（比Listview的setEmptyView還要好用！）

   

UI設(shè)計(jì)師從此只要考慮樣式問題，開發(fā)也不怕各種古靈精怪的動(dòng)效了～分分鐘秒殺各類列表動(dòng)效問題～

下面po出自己手上項(xiàng)目及用了這個(gè)開源項(xiàng)目實(shí)現(xiàn)的真機(jī)版的效果圖：

效果圖：

真機(jī)上的效果：

項(xiàng)目?jī)?nèi)很多列表的表現(xiàn)都是參照碼農(nóng)哥哥cmychad的項(xiàng)目：BaseRecyclerViewAdapterHelper

真的很好用～今天在谷歌瀏覽器里面逛的時(shí)候竟然發(fā)現(xiàn)在Google Play上也能看到～

po上鏈接：

https://play.google.com/store/apps/details?id=com.chad.baserecyclerviewadapterhelper

（我就是這么大方～哈哈～）

分分鐘帶你飛離擾人的列表動(dòng)效問題～設(shè)計(jì)獅們，喊上你們的程序猿來(lái)試試吧～相信你會(huì)感嘆，為啥我不早點(diǎn)用上BaseRecyclerViewAdapterHelper呢～

當(dāng)然，除了感嘆，我有一個(gè)不成熟的小建議～那就是你或許也可以在下面輕輕的點(diǎn)贊～我會(huì)很感動(dòng)的！

在講解列表之前，我先跟大家介紹一下一個(gè)經(jīng)典的交互設(shè)計(jì)框架，這個(gè)框架復(fù)合了一般用戶的使用習(xí)慣，同時(shí)也是人們處理信息的基本模式——“首頁(yè)——列表頁(yè)——詳情頁(yè)”。

“首頁(yè)——列表頁(yè)——詳情頁(yè)”是互聯(lián)網(wǎng)發(fā)展過程中逐漸形成的一般規(guī)律，謂之為互聯(lián)網(wǎng)發(fā)展的經(jīng)典框架也不為過。為什么呢？因?yàn)榛ヂ?lián)網(wǎng)最開始的時(shí)候，信息量并不大，所以有一個(gè)詳情頁(yè)就足夠了。后來(lái)因?yàn)樾畔⒘恐饾u增多，自然而然就會(huì)出現(xiàn)篩選信息的需求，因此就出現(xiàn)了列表頁(yè)。后來(lái)，列表頁(yè)再也無(wú)法承載指數(shù)級(jí)增長(zhǎng)的信息了，所以搜索的功能應(yīng)運(yùn)而生，于是便出現(xiàn)了首頁(yè)（入口）。

觀察互聯(lián)網(wǎng)早期發(fā)展的歷史可以得到佐證：剛開始的時(shí)候有雅虎和美國(guó)在線等幾個(gè)新聞?wù)军c(diǎn)就足以滿足人們獲取資訊的需求了，后來(lái)因?yàn)樾畔⒅饾u增多，所以急需篩選和搜索信息，于是谷歌就崛起了，成為下一個(gè)流量入口。中國(guó)互聯(lián)網(wǎng)的歷史進(jìn)程也大致相同：互聯(lián)網(wǎng)第一波浪潮是搜狐、新浪等門戶網(wǎng)站，第二波才是百度。

可以說“首頁(yè)——列表頁(yè)——詳情頁(yè)”不僅僅可以應(yīng)用到互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)中去，它更是一種很重要的思維方式，可以應(yīng)用于日常生活中的方方面面。

以上介紹了列表是如何產(chǎn)生的，也提到了用戶在列表頁(yè)上的主要行為就是對(duì)信息進(jìn)行篩選和比較，以便讓其做出決策，決定進(jìn)入哪個(gè)具體條目去了解相關(guān)詳情。因此列表頁(yè)承載的是用戶對(duì)下一層信息的概況了解，是詳情頁(yè)信息的縮略版。

如果列表中的條目比較多，那么列表就會(huì)包含某些排序規(guī)則或分組規(guī)則，這樣會(huì)讓列表中條目的呈現(xiàn)方式規(guī)律一點(diǎn)，以便用戶快速查找。有的會(huì)按照時(shí)間順序來(lái)排序，有的會(huì)按照字母表來(lái)排序，也有的會(huì)用標(biāo)簽進(jìn)行分組等等。假如條目很多，一個(gè)頁(yè)面放不下，那就需要分頁(yè)，所以列表頁(yè)底部常常會(huì)出現(xiàn)翻頁(yè)器。有時(shí)也會(huì)出現(xiàn)“無(wú)限加載”這種處理方式，例如花瓣。假如信息更多的話，那就需要加入搜索功能了。

好了，接下來(lái)我們要介紹是：列表的具體形式。

• 垂直式列表 •

垂直式列表是列表的最基本形式，無(wú)論是移動(dòng)端還是PC端都可以看到這種布局方式。這是一種非常干凈和清晰的列表呈現(xiàn)方式，用戶非常容易理解，也很容易找到自己想要的目標(biāo)。

需要注意的是，用戶的瀏覽習(xí)慣一般都是“從左往右，從上往下”的，所以垂直式列表一般采用的都是左對(duì)齊的樣式。

再者，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候需要平衡好條目的詳細(xì)程度和條目數(shù)量之間的關(guān)系。因?yàn)闂l目?jī)?nèi)容越詳細(xì)，條目所占空間就會(huì)越大，相應(yīng)地單屏上條目的顯示數(shù)量就會(huì)越少。具體情況還得從需求出發(fā)。

例如淘寶訂單列表頁(yè)，對(duì)于用戶而言，用戶往往會(huì)關(guān)注商品訂單的交易狀態(tài)、物流狀況等等。因?yàn)闂l目的內(nèi)容相對(duì)詳細(xì)，所以用戶就沒有必要去查看訂單的具體詳情，這樣會(huì)有效地縮短用戶的操作路徑。但是把垂直式列表應(yīng)用到通訊錄中，情況就不同了，此時(shí)用戶必然是希望可以同一時(shí)間內(nèi)瀏覽足夠多的聯(lián)系人，以便快速找到目標(biāo)，所以通訊錄條目的信息一般都很簡(jiǎn)潔，一般就只有“聯(lián)系人頭像”和“聯(lián)系人名稱”。

需要補(bǔ)充的是，垂直式列表一般有以下三種模式：標(biāo)準(zhǔn)模式、圖文結(jié)合模式以及控制模式。

• 橫向式列表 •

所謂的橫向式列表也就是我們常說的輪播圖和走馬燈，它也是APP中一種很常見的列表形式。這種形式只著重展示一個(gè)條目，往往位于頁(yè)面的上方作為廣告位展示，用戶通過左右手勢(shì)滑動(dòng)來(lái)聚焦到當(dāng)前的內(nèi)容。

一般來(lái)說，橫向式列表的條目數(shù)量不能太多，控制在5~7個(gè)以內(nèi)為好，以避免用戶操作疲勞。在設(shè)計(jì)上可提供暗示，例如顯示下一張的部分內(nèi)容，或者添加分頁(yè)指示器，這樣讓用戶在瀏覽條目時(shí)保持清晰的方向感和對(duì)數(shù)量的認(rèn)知。

• 網(wǎng)格式列表 •

剛才介紹了縱向維度以及橫向維度的列表，那么在移動(dòng)端還有一種兼顧了兩種維度的列表的形式——網(wǎng)格式列表。這也是一種非常常用的列表形式，網(wǎng)格式列表基本上都是以展示圖片為主，偶爾會(huì)配合一些文字說明。假如想要展示大量的圖片，那么網(wǎng)格式列表無(wú)疑是最好的選擇。

相比較網(wǎng)格式列表與垂直式列表，前者大多是用于展示文字信息，界面會(huì)顯得比較干凈有效。后者則更具情感魅力，會(huì)讓界面更加富有感染力。

這里還要向大家介紹的是網(wǎng)格式列表的變體——瀑布流。標(biāo)準(zhǔn)的網(wǎng)格式列表是“田字格”的形式，排版上還是有一絲嚴(yán)謹(jǐn)和規(guī)范的意味，而瀑布流的排版樣式則顯得較為隨意，常見于一些圖片瀏覽類的軟件，如花瓣等。

• 總結(jié) •

文章開頭提到“用戶在列表頁(yè)上的主要行為就是對(duì)信息進(jìn)行篩選和比較”，也就意味著列表頁(yè)有著“分流/導(dǎo)航”的作用。

其實(shí)以上三種列表形式在某種意義上來(lái)說也是三種導(dǎo)航模式。垂直式列表對(duì)應(yīng)的是列表導(dǎo)航，橫向式列表對(duì)應(yīng)的是走馬燈導(dǎo)航，網(wǎng)格式列表對(duì)應(yīng)的是圖示導(dǎo)航。

藍(lán)藍(lán)設(shè)計(jì)(www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)