從設(shè)計(jì)方案到落地，困難總是一個(gè)一個(gè)的出現(xiàn)，如何做好這中間的工作，讓產(chǎn)品后期可持續(xù)性發(fā)展？本篇文章以聊天列表為例，總結(jié)了從設(shè)計(jì)到實(shí)踐的整條鏈路關(guān)系，并分析出能夠舉一反三的方法論。供大家一同參考和學(xué)習(xí)。

為什么很多做的還是不錯(cuò)的方案，實(shí)際使用總是擱淺不使用？

為什么設(shè)計(jì)方案領(lǐng)導(dǎo)覺得不錯(cuò)；實(shí)踐起來卻困難重重，問題一堆，產(chǎn)品有、開發(fā)也有，如何兼顧全鏈路，達(dá)到最終目的？

為什么設(shè)計(jì)總是抱怨開發(fā)對(duì)UED設(shè)計(jì)還原度不高，根本原因在哪兒，如何提高開發(fā)實(shí)現(xiàn)效果？

全新的設(shè)計(jì)方案總是會(huì)兼帶有很多“坑”，你在疲于應(yīng)付這些被開發(fā)實(shí)踐暴露出來的問題（填坑），是否有切實(shí)有效的方法，拓寬后期產(chǎn)品可持續(xù)之路？

以聊天列表為例，總結(jié)從設(shè)計(jì)到實(shí)踐的整條鏈路關(guān)系，并分析出能夠舉一反三的方法論。

01 需要規(guī)范來支撐你設(shè)計(jì)的合理性

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

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

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

于是做了如下圖的設(shè)計(jì)，在個(gè)人和群混排時(shí)面積上無差異，保證了視覺上的整體統(tǒng)一 。

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

比如，群頭像存在幾種狀態(tài)：

1. 兩個(gè)人
2. 三個(gè)人
3. 四個(gè)人及以上

群頭像分為兩種類型：

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

這時(shí)候就需要一整套規(guī)范來定義頭像規(guī)則。

生成上線后發(fā)現(xiàn)，群頭像有時(shí)候會(huì)被圓角切掉可識(shí)別的部分，用戶反饋這樣的不如原來的好識(shí)別。

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

兩種方案解決問題

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

總結(jié)

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

（針對(duì)以上特殊方法技術(shù)我們已經(jīng)申請(qǐng)了相關(guān)發(fā)明專利）

02 綜合考慮各種情況，實(shí)踐是檢驗(yàn)設(shè)計(jì)好壞唯一途徑

順接5月份文章《如何在產(chǎn)品迭代中尋求美學(xué)體驗(yàn)創(chuàng)新？》，豆芽做了全新的改版，請(qǐng)看下面實(shí)踐：

1. 單一列表較高，導(dǎo)致縱向展示條數(shù)變少，使用效率降低
2. 頭像及左右間距較大，導(dǎo)致橫向展示空間變小，可閱讀信息變少
3. 分組置頂樣式較單調(diào)，顏色較灰，當(dāng)置頂過多時(shí)，導(dǎo)致整個(gè)頁面過于一致且不夠活潑
4. 列表標(biāo)題字號(hào)較大，與微信、QQ、釘釘?shù)韧|(zhì)競品有差異，導(dǎo)致用戶切換軟件時(shí)感受不一致
5. 勛章掛飾及多場景下微應(yīng)用適配不足…

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

綜合上述對(duì)列表進(jìn)行了重新設(shè)計(jì)：

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

如下圖重做前及優(yōu)化實(shí)現(xiàn)版對(duì)比效果圖：

看著效果出來了，還是可以的。實(shí)際開發(fā)時(shí)，還遠(yuǎn)遠(yuǎn)不夠，列表只是豆芽其中一小部分，那又要如何繼續(xù)呢！

03 解析列表，提升用戶體驗(yàn)

如圖所示，分解列表元素，定義各個(gè)元素在列表中規(guī)則：

1.圖標(biāo)、頭像，涉及兩者的規(guī)范。

2.角標(biāo)，各種情況，個(gè)位數(shù)、兩位數(shù)，超過兩位數(shù)。

3-1.置頂規(guī)則

3-2.標(biāo)題最長字段

4-1.@的規(guī)則

4-2.正文的最長字段

5.狀態(tài)提示

6.時(shí)間規(guī)則

1. 根據(jù)分析示意圖，深度提高用戶體驗(yàn)

比如3-1置頂規(guī)則，是不是所有的@我都是一個(gè)顏色，并且在會(huì)話中也是一樣的規(guī)則？

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

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

2. 提高閱讀信息質(zhì)量，降低閱讀噪音，重新定義日期規(guī)則

如：當(dāng)天只展示當(dāng)天時(shí)間，原來的2019-08-20 17:00 展示為17:00等等，縮小日期區(qū)域，增加標(biāo)題內(nèi)容區(qū)域。

根據(jù)有狀態(tài)和無狀態(tài)提示，自適應(yīng)長度，增加閱讀文字長度。

04 總結(jié)

列表是設(shè)計(jì)常常遇到的一個(gè)組件，本文從點(diǎn)到面，再從面到點(diǎn)精細(xì)化設(shè)計(jì)。規(guī)范是基礎(chǔ)，全場景是檢驗(yàn)設(shè)計(jì)的必經(jīng)之路，解析元素能更好的優(yōu)化用戶體驗(yàn)。

很多時(shí)候我們確實(shí)做了很多不錯(cuò)的設(shè)計(jì)，都會(huì)因?yàn)楦鞣N原因擱淺。我們需要做到這5點(diǎn)兼顧：

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

從用戶角度出發(fā)思考你設(shè)計(jì)的合理性；但僅僅這樣還是不夠的，還需要考慮開發(fā)實(shí)現(xiàn)難度，大部分時(shí)間是跟開發(fā)產(chǎn)品團(tuán)隊(duì)一起思考如何做好產(chǎn)品。

本文只是實(shí)踐的小案例，歡迎點(diǎn)評(píng)。

作者：張平，蘇寧科技集團(tuán)員工平臺(tái)研發(fā)中心視覺設(shè)計(jì)師，公眾號(hào)：蘇寧設(shè)計(jì)

本文由 @張平 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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