起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識從三個層面看新零售B端產品如何優化
新零售產品如何優化，筆者從產品、交互、UI設計三個層面分別進行闡釋，文末還有彩蛋~~
本期分享新零售產品的優化全過程，從產品、交互、UI設計上層層解析，最后教大家用C4D+AE設計一個科技感十足的粒子發射動效，并且能夠完美落地。
本文能夠培養UI設計師從產品全局的思維視角，去理解產品的視覺設計。
先簡單介紹一下這款新零售產品，產品的業務邏輯是為各大品牌連鎖服裝店，通過顧客的提衣、試穿等數據，利用大數據智能算法，為店長每周提供一套主推、陳列、折扣的推薦方案，助力店鋪拿到更高的營業額。
一、案例解析
首先分享一下產品首頁優化前后的對比。
優化前
優化后
因為前期沒有參與產品業務梳理和設計，所以后面拿到PM的原型圖，需要重新梳理產品，了解需求業務，最后得出以下結論：
- 產品定位：助力店長提升營業額，并對產品產生依賴
- 定位用戶：店長（不是所有的導購人員）
- 使用頻次：每日查看銷售系列數據，每周做數據統計
通過梳理發現目前的產品構架沒有問題，但是在產品功能、交互體驗上有很大的優化空間。
優化草圖
這張圖畫了半個小時，但前期工作做了一天半，分析了四個新零售競品，再結合對業務的理解，產品的思考，最終得出的產物。
然后跟相關人員確認討論，最終采取了很多草圖上的產品功能和交互邏輯優化方案，下面就來分享幾個重要的優化點。
二、產品優化
1. 建立激勵機制
B端產品，定義一個新的功能一定要找到滿足用戶價值和商業價值的結合點。簡單的講，就是既要滿足用戶（使用者）的價值，也要為企業（決策者）帶來商業價值。
回到產品，產品面向的是品牌連鎖服裝店，每個區域管理十幾個店面，店鋪如果在產品上增加營業額排名功能，店鋪之間在對比中，能夠刺激店鋪不斷努力提高銷售額，從而拿到好名次，對于成績突出的店鋪給予獎勵。
對于單個店鋪中設計形式上也要增加獎勵制度，例如，店鋪營業額超出目標額的一定比例，頒發“超能徽章”，徽章代表著優秀戰績，并且記錄統計。
激勵機制從兩方面切入：一是自我激勵，二是區域排名激勵。右上角的超能徽章是對店長的自我激勵，區域排名是在整個區域上的激勵。
1）超能徽章
開始我的想法是，完成本周的目標額，點亮超能徽章給予鼓勵，后來我們的負責人提出“如果本周三就完成了目標額，那店長難道就不需要努力了嗎？”，這是一個非常重要的提醒。
所以設計上改為：超額錢數變紅，進度條變紅，超額完成區域端設定的金額比例，點亮超能徽章，徽章會在月度、年度統計體現，你的輝煌戰績會永遠記錄，同樣是一種激勵的表現。
2）區域排名
所謂山外有山，人外有人，本店銷售額再好，可能也會有銷售更好的店，所以激勵店長不斷競爭向上是產品永恒的宗旨。
動態展示圖
2. 建立學習機制
草圖中的商學院板塊
此板塊出發點是培養店長成長，從而更專業的服務店鋪，“商學院”符合上文講到的用戶價值和商業價值的結合點功能。
后來，我們的產品總負責人對功能雖然很贊同，但是出于產品初期運營成本的考慮，暫且不加。運營一個內容板塊需要很大的投入，內容不好就不會有高價值，未來產品到了成熟期，我想還是會著重考慮增加此板塊，為產品帶來一個有力的賣點。
B端產品為什么可以去掉這樣的一個板塊，原因是“商學院”是產品的增值服務功能，沒有這個功能產品照應運營，就如同買個沙發送腳凳，但沒有腳凳沙發照應坐。
“商學院”不是這個產品服務全流程中業務上的功能點，所以可以去掉。這句話很重要一定要理解。
3. 結合產品定位
修改前原圖
通過我們業務人員的實地調查，得出的結論是：一般店長都是每周統計一次銷售數據，每天不做統計，產品設計上也應該是只呈現周的數據。
這樣理解業務需求，是萬萬不可取的。雖然店長是每周統計一次數據，但是要明白是每天組成的周，所以店長同樣會關心每天的銷售數據，周數據只是店長最后做的一個統計。
如果產品只體現周數據，那么店長只會一周用一次產品，這不符合產品定位。店長使用產品的頻率低，很難對產品產生依賴與信任，反而像個累贅，而產品的價值是讓店長依賴產品，信任產品。
優化后
產品的定位是每天多次高頻打開查看最新數據，所以產品功能上增加日數據，首頁體現日數據，是使用者每天打開產品的動力；還有首頁呈現其他重要的關鍵指標數據，都是為了讓店長每天打開產品，關注數據表現及走勢。
三、交互優化
1. 突出關鍵指標，提高效果
關鍵指標首頁彈窗展示
上圖是點擊首頁列表周數據的彈框，首頁把每周的數據以表格列表的形式依次羅列，但其實店長一般只會關注本周的數據。
彈窗中的A處（有待提升的數據）數據是對比上周下降的數據，B處（其他數據）是對比上周上升的數據，A處沒有內容時也就是都去到了B處，這樣A處（有待提升的數據）為空，就會給店長數據都合格的感受，不再需要更高的提升。。
優化后關鍵指標呈現
優化后把首頁的列表形式，用數據可視化的設計形式呈現，柱狀圖展示（上圖C處）可以查看每周的數據對比和相關數據的趨勢變化，柱狀圖超額漸變紅色，超額設定的比例金額獲得超能徽章。
同時圖表可以切換查看周、月、年數據，柱狀圖有交互事件，點擊其中的柱子可以查看當周的詳細數據，并且可以點擊該模塊右上角放大按鈕，瀏覽歷史的所有數據，如下圖演示：
查看周詳情操作演示
圖表全屏操作演示
D處的數據是修改前的彈窗內容，也是店長高頻關注的數據，所以直接呈現在首頁便于閱覽。
2. 合并同類項，提高操作便捷度
原頁面
A處的四個入口其實在講一件事，所以可以合并成一個入口，在二級頁面當中分類。
B處的交互操作呈現有問題，應該是選中“自定義時間”才出現時間段選擇框。
C處是排版問題，列表的瀏覽模式一般是從左到右，灰色文字是次要信息，左右結構呈現并不合理，所以需要換一種排版形式，同時列表后面按鈕過多，可以并為一個詳情頁。
優化后頁面
1）A處的合并優勢：提高操作的便捷性
因為四分類是同類項，通常配合本店、區域、全國的切換操作，隨機性很高，所以放在一起可以提高操作的便捷性。
店長一般瀏覽數據路徑是先看本店數據，然后會對比區域和全國數據，區域和全國數據是次級比較數據，例如店長在看本店“高庫存滯銷榜”那極大的可能會切換到區域和全國查看同類型數據進行對比。
A優化后的操作邏輯
2）A處的合并優勢：帶動全局瀏覽貨品的行為
店長一般會更關注滯銷榜單，但每次進來出現的是“單品暢銷榜單”，這樣店長就會無意識的瀏覽到當前板塊的數據，之后才會切換到滯銷榜單，就帶動了店長全局瀏覽貨品的行為。
微信的朋友圈就是這樣模式的設計，把高頻的朋友圈放到二級頁面，可以帶動發現頁面相關的業務模塊。雖然用戶在進入朋友圈的交互上會形成慣性操作忽略不關注的內容，但如果添加了新的功能，頁面變得不一樣用戶就會關注，朋友圈的超級流量就能帶動很高的轉化。
3. 重新定義搜索功能，提高體驗度
搜索交互優化前
通過跟業務人員的了解，店長搜索貨品的頻率及其之高，查庫存、查智能推薦的衣服數據、查自己主推的衣服數據等等，所以需要把搜索更直接突出的設計。
優化后的搜索框-頁面右上角
優化后把搜索框直接設計在首頁，根據“菲茲定律”并且加大處理，字號設計為16px較大字號，一般店長會輸入一連串貨品單號搜索，所以加大字號更有效檢查對錯。
四、UI設計優化
1. UI設計前的思考
UI設計前要根據產品所處的行業、背景、模式、用戶、產品定位、視覺競品分析，定義產品的設計，新零售這款產品最終的分析結論可以圍繞“高效”“科技”“智慧”三個關鍵詞設計。
1）高效
B端工具類產品，重點要體現產品的效率，優化后的首頁增強數據可視化設計，更直接靈動的展示銷售業績，同時首頁通過數據量化的形式，提供主要功能的快捷入口。整個首頁成為一個數據看版，使用者會因為有數據，看到數據而被有效指引點擊查看詳情。
設計風格上簡潔輕快明了，簡單而不簡陋，加大間距留白，突出數據展示。
2）科技
新零售是新興的概念，所以體現產品的科技感很符合新零售產品調性，首頁在“上周綜合提升”功能板塊，設計粒子一直發射的效果，每個粒子像一個個數據點，就像一個永動機一直在工作，營造一種為店鋪保駕護航的科技效果。
科技效果
3）智慧
產品采用大數據及算法的技術，所以產品要有智慧感，智慧感更多的是體現產品的智能技術上。例如會通過往期用戶喜好，結合算法搭配衣服向新顧客推薦。
2. 讓店長心動的設計
圖一
圖二
上下兩個首頁的區別是圖一沒有紅色，圖二出現紅色，為什么稱為讓店長心動的設計。因為只要出現紅色，就是好的數據表現，就會讓店長心里產生一點悸動，這樣的設計就是為了，形成店長對產品操作上的一個意識行為認知。
既然紅色在產品中代表積極的主題，那么在其它頁面中一定也不要破壞這種主題認知，要延續主題的設計。
3. 數據要量化，數據可視化設計概念
案例一
數據量化是數據可視化設計的一個重要概念，起初產品的設計是超額完成就獲得超能徽章。但是超額的數據可能會一直增加，如果只是用“超額完成”四個字就不會知道最終具體超額數據。所以，根據數據要量化的概念，把具體數據展示出來。
案例二
數據量化/快捷入口
左側導航在設計上有意弱化，因為他只是個入口，然后在頁面當中通過量化數據形式，著重設計主要功能的快捷入口。例如“行動效果”把數據拿出來展示，使用者通過數據有效引導觸發操作行為，下面三個入口，衣服和標識同樣是信息量化引導，圖標視覺上設計的較為突出，是因為要強調快捷入口的功能。
五、技能教程
粒子發射動效教程
粒子發射循環效果
用到的軟件Sketch+C4D+AE，其中唯一稍難的是如何讓粒子發射效果呈現循環發射沒有卡頓感覺，其次圖中有漸變色和細線再加上很小的點，如果用GIF圖可能會不清晰，所以接下里我們還是想辦法，用AE插件Bodymovin實現高清效果。
第一步：把設計稿畫的透視底座切圖導出。
第二步：C4D設計粒子發射，并導出序列幀，功能上運用C4D的克隆配合發射器，加上一個隨機效果即可，發射區的角度要盡可能貼近設計稿底座的角度。
第三步：導出序列幀，放到AE當中制作粒子循環發射效果，選取一段滿意的發射效果，復制一組序列幀；然后參考下圖放置設置透明度，這樣就會呈現循環的粒子發射效果；最后再把整個動畫用AE導出一組序列幀，command+k 幀速率可以設置為10-15之間，這樣出來的序列幀會很少，同時也能保證畫面的流暢度。
第四步：測量好設計稿中動圖所占尺寸，然后AE當中新建同樣尺寸合成項目，把切好的透視底座導出，把最新從AE設置好的循環播放粒子序列幀以一張張圖片的形式導入，不可導入序列，因為Bodymovin不識別序列。
這個工程也要把幀速率設置成剛剛導出的序列幀速率，然后把所有圖片割成一幀，用序列圖層功能設置成下圖的樣子。
第五步：用 Bodymovin 導出json文件。
最后一步：Bodymovin 導出的圖片質量不高，所以需要替換導出的所有圖片。另外，需要注意的是Bodymovin這種導出形式，一定要注意圖片的大小，太大落地后會有明顯卡頓。下圖導出60張序列只有190kb，所以加載流暢度沒問題。
最后
本期案例分享很全面，除產品、交互、UI設計之外，還包含了很多數據可視化設計理論。
UI設計師能夠從產品的全局視角發出做視覺設計，無疑是最科學的。
每個設計點都有底層的業務、產品、交互體驗做支撐，設計表現上會更有說服力，這也是一個設計師被認可過程中的重要能力。
作者：吳星辰，微信公眾號：互聯網設計幫
本文由 @吳星辰 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
非常不錯，優化后確實數據呈現層面更清晰了
我在站酷看到你的作品，基本弄得都不錯呢。不過確實B端 追求的是提高工作效率，一眼看過整個頁面層次表現不明顯，就會顯得有點亂。設計感確實做得好。
校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱女孩真的很不錯校閱啦
為啥我感覺優化前還簡潔大方一些 ?
B端產品更重要的是功能，而不是更美觀的UI吧，而且這UI確實太混亂了
作為一個UI設計師，這樣的優化已經很好了。