中臺(tái)設(shè)計(jì)經(jīng)常會(huì)面臨無(wú)數(shù)列表堆集，導(dǎo)致在頁(yè)面切換時(shí)，找不到重點(diǎn)。那么如何保證美觀易用的同時(shí)，又能讓效益最大化，成本最小化呢？本文對(duì)此進(jìn)行分析，希望對(duì)你有所幫助。

中臺(tái)設(shè)計(jì)經(jīng)常會(huì)面臨無(wú)數(shù)列表堆集，導(dǎo)致在切換頁(yè)面時(shí)，頁(yè)面和頁(yè)面的差異性不大，找不到重點(diǎn)，雖然完成了產(chǎn)品功能，但事實(shí)上，用戶在使用時(shí)效率低下。

最近有個(gè)朋友正好和我提起，他準(zhǔn)備推動(dòng)下列表頁(yè)升級(jí)。但是如果單個(gè)頁(yè)面純推，個(gè)人認(rèn)為比較難，難點(diǎn)在于設(shè)計(jì)師的初衷在于提升頁(yè)面的美觀度，以此強(qiáng)化頁(yè)面的強(qiáng)弱感，以提升體驗(yàn)。

而產(chǎn)品則會(huì)從成本和效益的出發(fā)考慮，如果投入的人力成本，沒有帶來(lái)未來(lái)可預(yù)期的效益。產(chǎn)品則大概率不會(huì)投入。

那么如何保證美觀易用的同時(shí)，又能讓效益最大化，成本最小化呢？

列表雖然信息捕獲能力低，但是有它實(shí)用性，比如開發(fā)成本低，快速保證功能上線。然而如果每個(gè)頁(yè)面都是列表，則頁(yè)面可讀性、系統(tǒng)易用度、體驗(yàn)度都會(huì)下降。

那么應(yīng)該從哪些方面入手，既能節(jié)約開發(fā)成本，又能保證易用性和美觀度呢？

針對(duì)列表設(shè)計(jì)多樣化組件，提高復(fù)用率。

一、列表和卡片結(jié)合，從列表中篩選出有效信息，提高信息讀取率

比如我們大部分列表都是復(fù)用ANT DESIGN，但是形式較為單一?？梢詫⒖ㄆ土斜斫Y(jié)合，比如在會(huì)員管理頁(yè)面中，原本的頁(yè)面是將大量信息，比如會(huì)員年齡、類別、消費(fèi)等放在列表中，并沒有對(duì)信息做設(shè)計(jì)，導(dǎo)致從列表中信息獲取效率低。

此時(shí)便可以在列表上方設(shè)計(jì)卡片，將列表中有效信息提取出來(lái)，進(jìn)行分組。例如90天內(nèi)未活躍會(huì)員、本月生日會(huì)員、本月到期會(huì)員等，做數(shù)據(jù)概覽卡片設(shè)計(jì)，這樣在進(jìn)入會(huì)員管理頁(yè)面時(shí)，便可以有效提取信息，診所運(yùn)營(yíng)人員便可以對(duì)本月生日會(huì)員設(shè)計(jì)對(duì)應(yīng)診所運(yùn)營(yíng)活動(dòng)，對(duì)90天內(nèi)未活躍會(huì)員，可進(jìn)行診所隨訪，離院關(guān)懷的同時(shí)又能提高復(fù)診率。對(duì)本月到期會(huì)員，也可以及時(shí)提醒續(xù)費(fèi)。

二、列表和圖表結(jié)合，提高信息獲取效率

例如在診所運(yùn)營(yíng)活動(dòng)期間，口腔診所會(huì)舉辦愛牙、護(hù)士節(jié)等活動(dòng)，診所方面希望統(tǒng)計(jì)運(yùn)營(yíng)活動(dòng)對(duì)新用戶轉(zhuǎn)化率以及營(yíng)收等影響。

此時(shí)便可以將列表和圖表進(jìn)行結(jié)合。以時(shí)間軸排序，橫向時(shí)間軸下對(duì)應(yīng)的是診所的運(yùn)營(yíng)活動(dòng)排期，縱軸是新用戶轉(zhuǎn)化率，通過(guò)圖表結(jié)合，就可以有效看到各個(gè)運(yùn)營(yíng)活動(dòng)對(duì)新用戶轉(zhuǎn)化率的貢獻(xiàn)。

三、將Table列表轉(zhuǎn)化為卡片式列表，信息重組

在設(shè)計(jì)時(shí)，經(jīng)常會(huì)發(fā)現(xiàn)首列是單列且較少的文字，但是其余列會(huì)有三行、四行等文字，此時(shí)用table列表便不再適用?？ㄆ搅斜碓谶@里便是很好的應(yīng)用。

例如診所希望以家庭為單位對(duì)患者進(jìn)行管理，以家庭為單位管理的同時(shí)，一方面對(duì)患者的疾病有更好的追溯，另一方面，家庭管理也能帶來(lái)創(chuàng)意式運(yùn)營(yíng)活動(dòng)，從而輻射更多新用戶。

家庭列表如果原始的table列表，那么首列是戶主，其余列是各個(gè)家庭成員，以及對(duì)應(yīng)的電子病歷，一列對(duì)多列查看信息的效率很低，也無(wú)法看到直觀看到這個(gè)家庭帶來(lái)的輻射影響（診所對(duì)推薦用戶有獎(jiǎng)勵(lì)，每個(gè)家庭也會(huì)統(tǒng)計(jì)推薦率）。

此時(shí)用卡片式列表，便可以清晰看到每一個(gè)家庭小單元的看診情況，以及所帶來(lái)的客流。

四、列表轉(zhuǎn)化為看板頁(yè)，整合有限資源

如果需要將有限的資源進(jìn)行利用，那么看板頁(yè)面就是不錯(cuò)的選擇。比如手術(shù)室排期，大部分醫(yī)生需要看到當(dāng)前時(shí)段手術(shù)室的預(yù)約情況以及有無(wú)空閑，看板頁(yè)都可以第一時(shí)間幫助醫(yī)生捕捉到有效信息。

我們?cè)谠O(shè)計(jì)的時(shí)候，看板的橫向頁(yè)面盡可能讓給有限資源，比如手術(shù)室預(yù)約，則橫向預(yù)約條可以是手術(shù)室，比如預(yù)約醫(yī)生，橫向頁(yè)面盡可能是各個(gè)科室內(nèi)醫(yī)生，這樣做是確保減少橫向滾動(dòng)，保證在各個(gè)瀏覽器下都能有不錯(cuò)的體驗(yàn)。

五、列表轉(zhuǎn)化為進(jìn)度表，實(shí)時(shí)查看進(jìn)度

比如有些頁(yè)面是審批頁(yè)面，此時(shí)便可以將審批進(jìn)度放在橫向區(qū)域，對(duì)應(yīng)各個(gè)進(jìn)度表下是所有的項(xiàng)目。比如診所發(fā)起運(yùn)營(yíng)活動(dòng)前需要報(bào)備院長(zhǎng)審批，此時(shí)便可以通過(guò)橫向的“待審批”、“審批中”、“審批完成”有效獲取活動(dòng)的反饋。

再比如任務(wù)?；颊咄ㄟ^(guò)小程序上傳血糖指標(biāo)，通過(guò)任務(wù)的形式，醫(yī)生在后臺(tái)收到了患者任務(wù)完成的提醒。此時(shí)便可以將任務(wù)分為待處理任務(wù)、已完成任務(wù)、逾期任務(wù)，醫(yī)生便可以在任務(wù)列表頁(yè)中清晰看到當(dāng)前任務(wù)總覽。

以上是個(gè)人在項(xiàng)目中的經(jīng)驗(yàn)總結(jié)，希望能幫助到大家。