B端改版|一個簡單的列表卡片優化分享
B端設計過程中,一個復雜的列表組件應該如何有效優化呢?本文以一次B端列表卡片優化工作的實操為例,詳細講解了這一組件設計改版的思路,希望能幫助在B端設計方面有類似問題的小伙伴在細節或框架上提供新的思考角度。推薦關注產品設計的小伙伴閱讀。
今天正好在新一期B端學員群中,遇到一個學員的咨詢,關于一個復雜的列表組件應該如何有效優化的問題。趁今天有時間就順手自己做了一遍優化,在這邊把內容和過程記錄下來,供大家參考。
一、優化實例分享
首先我們來看需要優化的原圖,是一個跨境物流的訂單記錄列表,每個卡片記錄一個物流訂單的信息。
領導的需求是,需要盡可能的減少單個列表卡片的高度,在一屏高度內放進盡可能多的條目,減少頁面的滾動。同時還要支持比較靈活的字段增加和減少。
比如在新增需求中,就還有一個操作員分類的信息要添加進來,里面包含業務員、客服、財務三個子分類,每個子分類下還會包含1到10+ 個的人名……
在一個有限的空間內塞大量的信息,就是關于體驗和信息設計的工作了,我們前面分享過的案例中有說過,完成這種組件或頁面的設計,需要遵循下面的流程。
所以,在第一步我首先要理解出現在畫面中的不同字段是什么意思,包含哪些內部邏輯。如果通過自己分析或者搜索找不到的,就要直接問懂的人。
了解完基本的信息,就要整理基礎的信息地圖,把所有會出現的字段全部羅列出來。
只列這些內容是不夠的,原來的卡片內容分布是非?;靵y,且缺乏邏輯的,進度在最頂部,時間在左下角,依據進度點亮的按鈕在右下角,目的倉庫是客戶信息的一部分,但中間還插入了本地倉庫,所以想提升該卡片的信息檢索效率,就肯定要根據字段的內連關系進行重新布局。
所以,要根據前面分析中對這些字段的認識,進行邏輯或業務上的歸類,確保信息能以結構化的形式展現,方便后面做近一步的布局。
有個這個分類以后,就可以開始做具體的原型規劃了。首先創建一個1440畫布和一個簡易的長條卡片,然后做一個最基本的橫向分割,將卡片分成訂單信息、進度兩個部分。
這里等于做出第一步優化,原設計中的卡片切分成了三行,一方面造成空間浪費,另一方面對于縱向列表而言切分了那么子行對視線的干擾太大,所以我要盡可能優化行數。
然后, 再根據前面整理的分類,做進一步的調整。
確定好大致的模塊劃分就可以動手填字段進去,這一步對順利完成復雜組件的設計至關重要,不要把希望寄托在找參考上,因為別人組件包含的字段和你的不同。
在這個版本中,我加入了負責人的模塊(最右側,原來沒有),每個模塊的字段和屬性值向下排列,如果一個模塊增加新的字段,那么就往下新增行,增加整體的高度,應對字段新增的問題。
同時,初版完成后復制排列下來感覺單卡片高度過高,所以進一步優化,壓縮高度的的間距。
確定完框架細節以后,就可以開始進行具體的色彩填充了。在這一步可以盡可能的對使用場景和信息做思考,比如下方的進度,如果整個訂單已經完成了,那么標識原有進度和高亮就沒有實際的意義,將它們合并置灰還能減少整個頁面的無效信息量。
所以到這一步,優化就基本做完了,時間關系,更細節的一些內容和狀態就沒去表現,但整個改版的目標就是圍繞在優化信息處理和拓展性的適配上,下面是原圖和改版前后的對比。你們可以自己感受下優化前后的差異和閱讀效率是否得到提升。
二、結尾
作為一個小改版,也還是包含了很多對業務的思考,因為寫起來太麻煩,所以就不想在前面加一大段文字,要是有什么疑問可以在下方留言,我再做出解答。
同時也要強調,即使是一個組件的設計,也是有必要進行具體分析再動手的,要用邏輯性去應對復雜,這樣你才能不擔心自己的設計稿不對,因為任何問題根源上的錯誤,都可以快速被定位并修改。
而不是純靠胡亂找參考試錯,磨到需求方沒耐心了勉強同意過稿!
作者:酸梅干超人;公眾號:超人的電話亭(ID:Superman_Call)
本文由 @超人的電話亭 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash ,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
梳理邏輯是對的,增加了客戶想要的信息,但是對于減少卡片高度的要求上其實沒有解決,字段增加和減少也只體現在了增加“異常狀態”的描述同時增加了行高,可能還需要更為創新的樣式修改呢
雖然看起來比之前還行,但是站在用戶使用角度上,看數據還不是很明顯,需要自己去找,考慮要不要把歸類后對應的名稱加上?還有后面有些文本是需求加上去的嗎?和之前的有點不同
最后的對比圖少了個標簽
[直客]是嗎