**摘要：** 本文詳述了管理后臺(tái)列表頁(yè)的設(shè)計(jì)原則和技巧咱枉，對(duì)于新手有很大的學(xué)習(xí)價(jià)值起愈。
無(wú)論是什么類型的產(chǎn)品黔寇，幾乎都會(huì)出現(xiàn)「列表頁(yè)」镜粤，前臺(tái)部分的列表頁(yè)設(shè)計(jì)技巧已經(jīng)有很多的介紹了，下面我以「電商系統(tǒng)」為例髓需，談?wù)剺I(yè)務(wù)后臺(tái)的列表頁(yè)設(shè)計(jì)原則和技巧许师。
1 什么是「列表頁(yè)」
1.1 「列表頁(yè)」的概念
列表頁(yè)是一些具有同種屬性的內(nèi)容的聚合。簡(jiǎn)單講僚匆，在電商系統(tǒng)里面微渠，展示所有商品或訂單信息的或相似頁(yè)面就是列表頁(yè)。列表頁(yè)的簡(jiǎn)單特征就是一行一條數(shù)據(jù)咧擂，和數(shù)據(jù)庫(kù)或Excel表格的概念都很像逞盆。商品列表頁(yè)就是一行一條商品信息，訂單列表頁(yè)就是一行一條訂單信息松申。
1.2 「列表頁(yè)」的類型
根據(jù)列表行數(shù)據(jù)的生成方式云芦，可分為「主動(dòng)型列表」和「被動(dòng)型列表」俯逾，在闡述這兩個(gè)概念之前，我們先來(lái)區(qū)分兩種用戶的身份焕数，一種是「**使用后臺(tái)的管理員用戶**」纱昧，另一種是「**使用前臺(tái)的終端用戶**」刨啸，這兩類人常常不是同一群人堡赔，我們都稱之為「用戶」，讀者需要根據(jù)不同場(chǎng)景注意區(qū)分设联。
**主動(dòng)型列表**：指的是列表中的數(shù)據(jù)是由管理員生成的善已，而非終端用戶生成。例如「商品列表頁(yè)」中的數(shù)據(jù)就是由管理員生成离例，與終端用戶無(wú)關(guān)换团，用戶在前臺(tái)看到的商品信息均由后臺(tái)編輯生成，用戶無(wú)法變更商品信息宫蛆。
**被動(dòng)型列表**：指的是列表中的數(shù)據(jù)均是由終端用戶生成的艘包，而非管理員生成。例如「訂單列表頁(yè)」中的數(shù)據(jù)就是由終端用戶生成耀盗，用戶選擇商品想虎，提交訂單，形成訂單信息叛拷。
主動(dòng)型列表和被動(dòng)型列表雖然都是列表頁(yè)舌厨，但是由于其內(nèi)容的來(lái)源不同，所以在設(shè)定其產(chǎn)品邏輯方面有很大不同忿薇。
2 列表頁(yè)設(shè)計(jì)原則
列表頁(yè)有以下幾條設(shè)計(jì)原則裙椭。實(shí)際上說(shuō)原則也并不準(zhǔn)確，因?yàn)楫a(chǎn)品設(shè)計(jì)并沒有一個(gè)既定的標(biāo)準(zhǔn)署浩，而是這些方法論是由行業(yè)前驅(qū)提出揉燃，并且經(jīng)過(guò)了相關(guān)產(chǎn)品、市場(chǎng)的重重考驗(yàn)筋栋，被證明了是行之有效的炊汤。
第一條：**根據(jù)場(chǎng)景提供展示的業(yè)務(wù)列。**
第二條：**產(chǎn)品新數(shù)據(jù)行能夠便捷地看到二汛。**
第三條：**操作宜少不宜多婿崭。**
上面的幾條原則可能比較抽象，難以理解肴颊，下面我來(lái)詳細(xì)講解氓栈。
3 列表頁(yè)設(shè)計(jì)技巧
3.1 列表頁(yè)構(gòu)成元素
我們先來(lái)看看一個(gè)完整的列表頁(yè)有哪些元素，主體是列表婿着，包含一些對(duì)列表的操作授瘦，以及搜索醋界。我們重點(diǎn)說(shuō)明「列表」部分。
第一行為字段名提完，不出意外一般是：序號(hào)形纺、業(yè)務(wù)列、操作徒欣。序號(hào)沒什么好說(shuō)的逐样，就是一個(gè)1、2打肝、3…的展示脂新，用途只是用于輔助「行」的顯示，無(wú)任何的業(yè)務(wù)邏輯和附加含義粗梭。業(yè)務(wù)列是列表的主要部分争便，操作指的是對(duì)該一行的數(shù)據(jù)的操作，常見的有：編輯断医、刪除等等滞乙。
主動(dòng)型列表還有「新增行」操作（對(duì)應(yīng)不同業(yè)務(wù)名稱都不同，例如商品列表頁(yè)就是「新增商品」）鉴嗤，一般被動(dòng)型列表無(wú)「新增行」操作斩启。
3.2 業(yè)務(wù)列
業(yè)務(wù)列中需要展示哪些元素呢？單行記錄可能包含多個(gè)數(shù)據(jù)躬窜，哪些需要放上去浇垦，哪些不需要放上去，哪些需要顯示但是只需要再深一層顯示荣挨，怎么判定男韧？
依據(jù)就是上述設(shè)計(jì)原則的第一條——根據(jù)場(chǎng)景提供展示的業(yè)務(wù)列。首先你需要定義這個(gè)頁(yè)面的用途是什么默垄，根據(jù)設(shè)定的用途去展示相應(yīng)的元素此虑，同時(shí)更重要的是，要了解用戶真正需要的是什么口锭。需要展示什么內(nèi)容朦前，不是看我們有什么，而是看用戶需要什么鹃操。還是以「商品列表頁(yè)」為例韭寸，這個(gè)頁(yè)面的用途就是管理商品的（實(shí)際上這個(gè)頁(yè)面本身就叫「商品管理」頁(yè)），后臺(tái)新增荆隘、編輯商品恩伺，前臺(tái)展示，供用戶購(gòu)買椰拒。一個(gè)商品包含以下元素：商品名稱晶渠、商品描述凰荚、庫(kù)存、價(jià)格褒脯、展示圖便瑟、規(guī)格、詳情介紹等番川，顯示這些內(nèi)容是很難全部都放到列表頁(yè)的「業(yè)務(wù)列」中的到涂，那如何取舍呢？我們將這個(gè)列表頁(yè)的用途定位為：輔助用戶快速找到對(duì)應(yīng)的商品爽彤，進(jìn)行編輯或其他操作养盗。如果是這個(gè)定位的話，那么只要一個(gè)商品名稱就可以了适篙。
實(shí)際上，在業(yè)務(wù)列中呈現(xiàn)的元素不僅僅是「商品名稱」箫爷，我們這里再引入一個(gè)新的概念：主要元素和補(bǔ)充元素（輔助元素）嚷节。在這里「商品名稱」就是主要元素，主要元素和補(bǔ)充元素的區(qū)別是即使只保留主要元素虎锚，也不影響這個(gè)頁(yè)面功能的實(shí)現(xiàn)硫痰。在「商品管理頁(yè)」中常見的補(bǔ)充元素還有：封面圖——輔助通過(guò)看圖直接找到對(duì)應(yīng)商品，價(jià)格窜护，銷量（被動(dòng)產(chǎn)生數(shù)據(jù)）效斑，庫(kù)存等。
我們?cè)谠O(shè)計(jì)頁(yè)面時(shí)柱徙，一定要確定「主」和「次」缓屠，不要一鍋粥的全往上擠。一定要克服一種「代碼思維」护侮，這種思維的典型想法就是「這個(gè)數(shù)據(jù)我的數(shù)據(jù)庫(kù)有存敌完，可能也有用戶想要看，為什么不放上去羊初？」滨溉，回答還是「定位」！
我們?cè)賮?lái)講講「訂單列表頁(yè)」长赞，一般名稱也叫「訂單管理頁(yè)」晦攒。（可能很多讀者會(huì)疑惑，這些列表頁(yè)為什么在取名的時(shí)候都不帶列表的得哆，關(guān)于后臺(tái)功能菜單的取名脯颜，可以看我的這篇文章《后臺(tái)菜單命名小技巧》）在設(shè)置業(yè)務(wù)列的時(shí)候，第一步還是明確這個(gè)頁(yè)面的定義和用途柳恐，想想用戶在什么時(shí)候會(huì)用到這個(gè)頁(yè)面伐脖，再簡(jiǎn)單講热幔，思考「在什么情況下，用戶出于什么目的會(huì)主動(dòng)打開這個(gè)頁(yè)面」讼庇，這個(gè)就是找準(zhǔn)「用途」的技巧绎巨。用途無(wú)非就是下面這些：
（1）和買家協(xié)商一致，去后臺(tái)改價(jià)蠕啄。
（2）看看有什么新訂單场勤，然后去操作發(fā)貨。
（3）退款操作
明確了用途歼跟，之后再把對(duì)應(yīng)的業(yè)務(wù)列往上放就可以了和媳。
關(guān)于「頁(yè)面用途」，這里再講幾句哈街，說(shuō)說(shuō)很多新手很容易犯的錯(cuò)誤留瞳，就是「想太多」。會(huì)去思考「萬(wàn)一用戶不小心點(diǎn)到這個(gè)頁(yè)面骚秦，突然想看某個(gè)數(shù)據(jù)她倘，看不到怎么辦？」又或者是「如果我們把這個(gè)數(shù)據(jù)也放上去作箍，這樣如果有用戶想看硬梁，就可以看了」。錯(cuò)誤太多胞得，很多很有趣荧止，后面再整一期講講這些常見的「想當(dāng)然」的想法吧。
還需要特別注意的是阶剑，我們將「用戶需要什么」的時(shí)候跃巡，這里的「用戶」不是指具體的某個(gè)人，而是一群人个扰，準(zhǔn)確的講瓷炮，是帶「占比數(shù)」的一群人，例如90%的用戶傾向于A方案递宅，10%的用戶傾向于B方案娘香，而A和B方案只能二選一的情況下，我們只能選擇A方案办龄，而不是說(shuō)只要存在一個(gè)用戶需要某個(gè)功能烘绽，我們就必須往上做。
3.3 默認(rèn)列表順序
默認(rèn)排列順序算是一個(gè)不算重點(diǎn)的重點(diǎn)俐填，一是因?yàn)樗匾步樱浅Ｖ匾沁@個(gè)技巧特別簡(jiǎn)單英融，幾乎不需要深入思考盏檐。原則中第二條：「產(chǎn)品新數(shù)據(jù)行能夠便捷地看到歇式。」講的就是這里的默認(rèn)列表順序胡野。那么什么是列表順序呢材失？
列表一行一條數(shù)據(jù)，總是需要一個(gè)明確的規(guī)則去確定它的排列順序硫豆，而不是隨機(jī)的龙巨，哪條記錄排在前面，哪條記錄排在后面熊响，都是需要制定一定的規(guī)則的旨别。那么怎樣才能讓「產(chǎn)品新數(shù)據(jù)能夠便捷地看到」呢？技巧就是根據(jù)所在列表的新數(shù)據(jù)放在第一汗茄，越新的數(shù)據(jù)排在越前面秸弛。再結(jié)合「主動(dòng)型列表」和「被動(dòng)型列表」的特征這個(gè)技巧還需要一定的優(yōu)化升級(jí)。我們結(jié)合具體例子講解剔难。
商品列表頁(yè)胆屿，這是典型的主動(dòng)型列表，所有的數(shù)據(jù)行都是用管理員用戶主動(dòng)生成的偶宫。首先第一條是毫無(wú)爭(zhēng)議的，新增的商品默認(rèn)排在第一行环鲤。還有一個(gè)方面是纯趋，編輯保存的商品，也是需要從后往前拉的冷离。否則排在后幾頁(yè)的商品吵冒，編輯后就沒有任何變化。所以將兩者組合西剥，默認(rèn)列表排序規(guī)則就是「商品保存時(shí)間降序排列」（保存不區(qū)分新增還是編輯）痹栖。
很多人可能會(huì)想到，商品在前臺(tái)的展示順序問(wèn)題瞭空，所以引入「手動(dòng)排序的序號(hào)」概念揪阿，這其實(shí)是完全多余的，前臺(tái)商品的排序最好和后臺(tái)排序脫軌咆畏，遵循一套排序規(guī)則后期維護(hù)會(huì)非常麻煩南捂。（這一點(diǎn)之后的文章會(huì)細(xì)講）
訂單列表頁(yè)，這是典型的被動(dòng)型列表旧找，所有的數(shù)據(jù)都是由終端用戶生成的溺健。所以默認(rèn)排序規(guī)則很簡(jiǎn)單，就是「生成訂單的時(shí)間降序」排列钮蛛。
還有一個(gè)算是小難點(diǎn)鞭缭，還是以「訂單列表頁(yè)」舉例剖膳，訂單有多種狀態(tài)，我們會(huì)在訂單列表頁(yè)設(shè)立標(biāo)簽欄快捷查詢岭辣，那么如何制定各標(biāo)簽欄的默認(rèn)排列順序呢吱晒？其實(shí)還是遵循一樣的道理，就是進(jìn)入該標(biāo)簽欄的時(shí)間降序易结。例如訂單的狀態(tài)有「未支付」枕荞、「已支付」、「已發(fā)貨」搞动、「已完成」等等躏精。未支付狀態(tài)指的是，訂單已生成鹦肿，但是用戶未付款矗烛，那么該標(biāo)簽欄下列表的默認(rèn)排列順序就是「生成訂單的時(shí)間降序」。已支付狀態(tài)指的是箩溃，用戶已經(jīng)付款瞭吃，但是商家還沒有發(fā)貨，那么該標(biāo)簽欄下列表的默認(rèn)排列順序就是「付款時(shí)間降序」涣旨。已發(fā)貨狀態(tài)指的是商家完成發(fā)貨歪架，那么該標(biāo)簽欄下列表的默認(rèn)排列順序就是「發(fā)貨時(shí)間降序」。已完成狀態(tài)指的是用戶手動(dòng)確認(rèn)收貨或者系統(tǒng)自動(dòng)確認(rèn)收貨霹陡，那么該標(biāo)簽欄下列表的默認(rèn)排列順序就是「確認(rèn)收貨時(shí)間降序」和蚪。
簡(jiǎn)單來(lái)說(shuō)，只要記住一點(diǎn)就沒問(wèn)題了烹棉，先進(jìn)來(lái)的排后面攒霹，后進(jìn)來(lái)的排前面催束。
3.4 輔助排列順序
默認(rèn)排列順序和輔助排列順序的區(qū)別是抠刺，默認(rèn)就是直接進(jìn)入該頁(yè)面，不需要進(jìn)行任何操作就直接展示的买优，輔助排列順序是需要用戶手動(dòng)操作杀赢，變更排列順序脂崔，輔助排列順序一般設(shè)定在特定業(yè)務(wù)列上脖咐，點(diǎn)擊可變更按此規(guī)則降序或升序排列汇歹。設(shè)定輔助排列順序的技巧和前面提到的「業(yè)務(wù)列」一樣派歌，還是明確頁(yè)面定義和用途胶果，這里不贅述了。例如商品列表頁(yè)常見的輔助排列順序有按銷量贝或、庫(kù)存、價(jià)格排列等酱床。
3.5 操作
常見的操作有：編輯、排序罐寨、刪除等等序矩。根據(jù)不同業(yè)務(wù)功能的列表頁(yè)，操作區(qū)按鈕區(qū)別很大毒返。下面講講幾個(gè)常見的功能拧簸。
3.5.1 編輯
對(duì)于主動(dòng)型列表盆赤，很多人會(huì)不由自主地加上「編輯」操作，很大程度上這是沒錯(cuò)的兔乞，但是仔細(xì)思考庸追，這里真的需要「編輯」嗎淡溯？
編輯操作實(shí)際上一條便捷操作，除了保留原有數(shù)據(jù)外膘侮，相當(dāng)于刪除原有記錄，再新增內(nèi)容和原來(lái)一樣雕薪，再修改內(nèi)容，省去了前兩步晓淀。多數(shù)列表存在編輯是沒問(wèn)題的所袁，但是一些會(huì)產(chǎn)生很多跟該條記錄強(qiáng)綁定關(guān)系的列表，最好編輯和刪除兩個(gè)功能都不要有凶掰。還是以電商為例燥爷，遇到節(jié)日或者其他活動(dòng)蜈亩，一般會(huì)進(jìn)行促銷打折活動(dòng)，后臺(tái)「活動(dòng)列表頁(yè)」會(huì)新增一條活動(dòng)信息局劲，如果這個(gè)活動(dòng)關(guān)聯(lián)很多數(shù)據(jù)勺拣，那么就需要保證這條記錄是不動(dòng)的，一旦編輯或刪除鱼填，原紀(jì)錄不在了药有，牽一發(fā)而動(dòng)全身，會(huì)引發(fā)太多麻煩苹丸。這時(shí)候就不要問(wèn)「用戶只是想把上次那個(gè)活動(dòng)再改一下弄個(gè)新活動(dòng)愤惰，還要新增多麻煩啊，編輯改一下多方便啊赘理，這樣不行嗎宦言？有個(gè)用戶就強(qiáng)烈需要∩棠＃」這種傻問(wèn)題了奠旺。
3.5.2 排序
有些業(yè)務(wù)邏輯非常簡(jiǎn)單的內(nèi)容，前后臺(tái)的展示順序是一致的施流，這時(shí)候就需要排序功能响疚，前后臺(tái)同步變動(dòng)。
3.5.3 刪除
刪除操作是一個(gè)比較敏感的操作瞪醋，如果不是特別必要忿晕，盡量不要放刪除功能。
3.5.4 搜索
是否需要搜索功能银受，是根據(jù)預(yù)期產(chǎn)生的數(shù)據(jù)行數(shù)決定了践盼，如果在30條以內(nèi)，則盡量別上宾巍，30條以上酌情上咕幻。
4 總結(jié)
列表頁(yè)知識(shí)點(diǎn)就講到這里了，基本只要掌握了這些技巧顶霞，設(shè)計(jì)一些常規(guī)的列表頁(yè)已經(jīng)是沒有問(wèn)題了谅河，如果遇到業(yè)務(wù)邏輯更加復(fù)雜的情況，再根據(jù)情況判定确丢，但是萬(wàn)變不離其宗，規(guī)則就是那么幾條吐限。這里再總結(jié)一下：
業(yè)務(wù)列：要克服「代碼思維」鲜侥，放什么內(nèi)容，不是看我們有什么诸典，而是用戶需要什么描函。
默認(rèn)排列順序：先來(lái)的排后面，后來(lái)的排前面。
操作：宜少不宜多舀寓，有需要才往上放胆数。
