如何設(shè)計重構(gòu)紛繁復(fù)雜的列表?

8 評論 5048 瀏覽 6 收藏 7 分鐘

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

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

最近有個朋友正好和我提起,他準備推動下列表頁升級。但是如果單個頁面純推,個人認為比較難,難點在于設(shè)計師的初衷在于提升頁面的美觀度,以此強化頁面的強弱感,以提升體驗。

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

那么如何保證美觀易用的同時,又能讓效益最大化,成本最小化呢?

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

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

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

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

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

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

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

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

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

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

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

例如診所希望以家庭為單位對患者進行管理,以家庭為單位管理的同時,一方面對患者的疾病有更好的追溯,另一方面,家庭管理也能帶來創(chuàng)意式運營活動,從而輻射更多新用戶。

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

此時用卡片式列表,便可以清晰看到每一個家庭小單元的看診情況,以及所帶來的客流。

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

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

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

五、列表轉(zhuǎn)化為進度表,實時查看進度

比如有些頁面是審批頁面,此時便可以將審批進度放在橫向區(qū)域,對應(yīng)各個進度表下是所有的項目。比如診所發(fā)起運營活動前需要報備院長審批,此時便可以通過橫向的“待審批”、“審批中”、“審批完成”有效獲取活動的反饋。

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

以上是個人在項目中的經(jīng)驗總結(jié),希望能幫助到大家。

本文由 @灰研走B 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 建議加圖表,考慮下用戶體驗

    來自廣東 回復(fù)
  2. 你的星球名稱搜不到呢

    來自上海 回復(fù)
  3. 要是能解釋的同時放些圖片案例就更好,簡單幾張就好,雖然知道你本身是想引流到知識星球

    來自北京 回復(fù)
    1. 好嘞 謝謝您的提議

      來自浙江 回復(fù)
  4. 這一篇讀完感覺體驗一般,然后看了下評論,案例放在知識星球……感覺體驗比一般要再低半度

    來自江蘇 回復(fù)
  5. 案例呢

    來自新疆 回復(fù)
    1. 案例拆解比較長,所以我都放在知識星球哈,如想查看更多的案例,可以移步我的知識星球“灰研走B”

      來自浙江 回復(fù)
  6. 案例呢

    來自新疆 回復(fù)