從設計方案到落地，困難總是一個一個的出現，如何做好這中間的工作，讓產品后期可持續性發展？本篇文章以聊天列表為例，總結了從設計到實踐的整條鏈路關系，并分析出能夠舉一反三的方法論。供大家一同參考和學習。

為什么很多做的還是不錯的方案，實際使用總是擱淺不使用？

為什么設計方案領導覺得不錯；實踐起來卻困難重重，問題一堆，產品有、開發也有，如何兼顧全鏈路，達到最終目的？

為什么設計總是抱怨開發對UED設計還原度不高，根本原因在哪兒，如何提高開發實現效果？

全新的設計方案總是會兼帶有很多“坑”，你在疲于應付這些被開發實踐暴露出來的問題（填坑），是否有切實有效的方法，拓寬后期產品可持續之路？

以聊天列表為例，總結從設計到實踐的整條鏈路關系，并分析出能夠舉一反三的方法論。

01 需要規范來支撐你設計的合理性

用戶1反饋：“分組列表過‘亂’，看著不舒服，累！”

分析：分組大部分情況是加入了很多的群與個人；在都是群組列表下，用結構層次圖分析可以看出“亂”的原因在于群頭像區域圓點過多，層次過于密集是列表最大的問題點。

參考競品在群頭像處理方法上都是將這塊作為一個整體的圓形或是方形，這樣做的好處就是在群和個人列表信息排列時整齊，容易識別且視覺不疲勞。

于是做了如下圖的設計，在個人和群混排時面積上無差異，保證了視覺上的整體統一 。

這樣就給開發，開發要跳腳的！很多時候設計師只設計了一面，做漏了群頭像在不同場景下的展示。

比如，群頭像存在幾種狀態：

1. 兩個人
2. 三個人
3. 四個人及以上

群頭像分為兩種類型：

1. 已上傳頭像；
2. 沒有上傳頭像，沒有上傳頭像，又分為2.1中文、2.2其他文字。

這時候就需要一整套規范來定義頭像規則。

生成上線后發現，群頭像有時候會被圓角切掉可識別的部分，用戶反饋這樣的不如原來的好識別。

實驗研究出了特殊的方法，保證群頭像切割時不被切割到具體可識別的面部：

兩種方案解決問題

1. 新用戶頭像，新上傳頭像，使用特殊方法規定原始圖片，保證切割。
2. 老數據的個人頭像，不可能強行讓老用戶重新上傳頭像。反向使用定義方法，巧妙的在規則內做到頭像展示齊全。兩種方案同時作用下，保證了頭像在四分之一的切割環境下顯示完整。

總結

1. 規范支撐你設計的基礎，也是團隊環節配合你的正式性文檔，比如開發根據你的規范實現，是必要的！
2. 規范必須完善，包含實際生產中遇到各種情況。帶入實際產品交互中，更需要機制健全，要有保護機制和“暴力使用”應對機制。
3. 規范的延展性，如上例特殊方法下可以使得頭像比較完整的展示，目前是圓形頭像，如果改版改成方形也一樣適用。特殊的方法可以用在其他環境下，不僅僅使用在列表網頁中，拍照攝影批量切割也同樣適用。

（針對以上特殊方法技術我們已經申請了相關發明專利）

02 綜合考慮各種情況，實踐是檢驗設計好壞唯一途徑

順接5月份文章《如何在產品迭代中尋求美學體驗創新？》，豆芽做了全新的改版，請看下面實踐：

1. 單一列表較高，導致縱向展示條數變少，使用效率降低
2. 頭像及左右間距較大，導致橫向展示空間變小，可閱讀信息變少
3. 分組置頂樣式較單調，顏色較灰，當置頂過多時，導致整個頁面過于一致且不夠活潑
4. 列表標題字號較大，與微信、QQ、釘釘等同質競品有差異，導致用戶切換軟件時感受不一致
5. 勛章掛飾及多場景下微應用適配不足…

第一二兩條是產品極力反對的，用戶訪談及用戶測試效果也是一樣。第三條是boss一直提及的，也是需要重新改版的主要原因，一直覺得豆芽灰和不清晰。

綜合上述對列表進行了重新設計：

1. 優化稿在原有設計上改變置頂樣式，去掉灰色樣式。確保過多置頂情況下整體頁面不至于全是灰色，導致整個頁面過于灰。
2. 改變所有服務號提醒icon樣式，提亮整體頁面。
3. 改變分組樣式，四色循環，依靠顏色增加分組的識別率。
4. 頭像減小，預留勛章掛件位置。
5. 列表行高減小，達到一頁顯示7.5條。
6. 標題，正文、日期等字體大小保持與競品一致，顏色層次拉大更清晰獲取信息。

如下圖重做前及優化實現版對比效果圖：

看著效果出來了，還是可以的。實際開發時，還遠遠不夠，列表只是豆芽其中一小部分，那又要如何繼續呢！

03 解析列表，提升用戶體驗

如圖所示，分解列表元素，定義各個元素在列表中規則：

1.圖標、頭像，涉及兩者的規范。

2.角標，各種情況，個位數、兩位數，超過兩位數。

3-1.置頂規則

3-2.標題最長字段

4-1.@的規則

4-2.正文的最長字段

5.狀態提示

6.時間規則

1. 根據分析示意圖，深度提高用戶體驗

比如3-1置頂規則，是不是所有的@我都是一個顏色，并且在會話中也是一樣的規則？

通過用戶調研和自身使用，很多人在處理消息時，更多時間是浪費在處理閱讀跟自己無關的信息，大大減弱了工作效率。將這個規則稍微改一下，跟自己有關的信息用提示色，跟自己無關的跟正文顏色一致，使得整個列表更加具有專注力，及時處理緊要信息。

如下圖所示，一眼就能看出我需要優先處理的信息：

2. 提高閱讀信息質量，降低閱讀噪音，重新定義日期規則

如：當天只展示當天時間，原來的2019-08-20 17:00 展示為17:00等等，縮小日期區域，增加標題內容區域。

根據有狀態和無狀態提示，自適應長度，增加閱讀文字長度。

04 總結

列表是設計常常遇到的一個組件，本文從點到面，再從面到點精細化設計。規范是基礎，全場景是檢驗設計的必經之路，解析元素能更好的優化用戶體驗。

很多時候我們確實做了很多不錯的設計，都會因為各種原因擱淺。我們需要做到這5點兼顧：

1. 設計是否合理？是否有標準的規范支持你的設計，規范是否涉及到所有情況。
2. 協作，一開始頭像規范是寫給服務端開發使用的，具體程序怎么寫。這只是規范的一條部分，一份完整的規范必須包含是整個鏈路中各角色需要了解的。比如產品經理更愿意選擇什么場景用什么樣的交互方式。視覺更喜歡整套的可優化的高保真組件庫及輔助說明等等。
3. 是否兼顧到歷史版本，目前設計上線后是否造成歷史版本用戶的體驗過差，你對歷史版本用戶的解決方案是什么。
4. 設計稿有沒有考慮到實際展示情況，比如實際是會有很多分組，而工作提醒還沒有開發出來，通常情況是一堆綠色一樣的圖標欠缺識別力。這種情況在很多情況下都會很頻繁的出現。更多情況下是不同手機的適配，兼容性。
5. 從產品基礎入手，分析為什么有這些元素，這些元素對應的各種使用場景是怎樣的。對應每個元素是否有體驗優化的空間，最大程度提高體驗。

從用戶角度出發思考你設計的合理性；但僅僅這樣還是不夠的，還需要考慮開發實現難度，大部分時間是跟開發產品團隊一起思考如何做好產品。

本文只是實踐的小案例，歡迎點評。

作者：張平，蘇寧科技集團員工平臺研發中心視覺設計師，公眾號：蘇寧設計

本文由 @張平 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。