如何設(shè)計重構(gòu)紛繁復(fù)雜的列表?
中臺設(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ù)。
建議加圖表,考慮下用戶體驗
你的星球名稱搜不到呢
要是能解釋的同時放些圖片案例就更好,簡單幾張就好,雖然知道你本身是想引流到知識星球
好嘞 謝謝您的提議
這一篇讀完感覺體驗一般,然后看了下評論,案例放在知識星球……感覺體驗比一般要再低半度
案例呢
案例拆解比較長,所以我都放在知識星球哈,如想查看更多的案例,可以移步我的知識星球“灰研走B”
案例呢