新零售產(chǎn)品如何優(yōu)化，筆者從產(chǎn)品、交互、UI設(shè)計(jì)三個(gè)層面分別進(jìn)行闡釋，文末還有彩蛋~~

本期分享新零售產(chǎn)品的優(yōu)化全過程，從產(chǎn)品、交互、UI設(shè)計(jì)上層層解析，最后教大家用C4D+AE設(shè)計(jì)一個(gè)科技感十足的粒子發(fā)射動(dòng)效，并且能夠完美落地。

本文能夠培養(yǎng)UI設(shè)計(jì)師從產(chǎn)品全局的思維視角，去理解產(chǎn)品的視覺設(shè)計(jì)。

先簡(jiǎn)單介紹一下這款新零售產(chǎn)品，產(chǎn)品的業(yè)務(wù)邏輯是為各大品牌連鎖服裝店，通過顧客的提衣、試穿等數(shù)據(jù)，利用大數(shù)據(jù)智能算法，為店長(zhǎng)每周提供一套主推、陳列、折扣的推薦方案，助力店鋪拿到更高的營(yíng)業(yè)額。

一、案例解析

首先分享一下產(chǎn)品首頁(yè)優(yōu)化前后的對(duì)比。

優(yōu)化前

優(yōu)化后

因?yàn)榍捌跊]有參與產(chǎn)品業(yè)務(wù)梳理和設(shè)計(jì)，所以后面拿到PM的原型圖，需要重新梳理產(chǎn)品，了解需求業(yè)務(wù)，最后得出以下結(jié)論：

• 產(chǎn)品定位：助力店長(zhǎng)提升營(yíng)業(yè)額，并對(duì)產(chǎn)品產(chǎn)生依賴
• 定位用戶：店長(zhǎng)（不是所有的導(dǎo)購(gòu)人員）
• 使用頻次：每日查看銷售系列數(shù)據(jù)，每周做數(shù)據(jù)統(tǒng)計(jì)

通過梳理發(fā)現(xiàn)目前的產(chǎn)品構(gòu)架沒有問題，但是在產(chǎn)品功能、交互體驗(yàn)上有很大的優(yōu)化空間。

優(yōu)化草圖

這張圖畫了半個(gè)小時(shí)，但前期工作做了一天半，分析了四個(gè)新零售競(jìng)品，再結(jié)合對(duì)業(yè)務(wù)的理解，產(chǎn)品的思考，最終得出的產(chǎn)物。

然后跟相關(guān)人員確認(rèn)討論，最終采取了很多草圖上的產(chǎn)品功能和交互邏輯優(yōu)化方案，下面就來分享幾個(gè)重要的優(yōu)化點(diǎn)。

二、產(chǎn)品優(yōu)化

1. 建立激勵(lì)機(jī)制

B端產(chǎn)品，定義一個(gè)新的功能一定要找到滿足用戶價(jià)值和商業(yè)價(jià)值的結(jié)合點(diǎn)。簡(jiǎn)單的講，就是既要滿足用戶（使用者）的價(jià)值，也要為企業(yè)（決策者）帶來商業(yè)價(jià)值。

回到產(chǎn)品，產(chǎn)品面向的是品牌連鎖服裝店，每個(gè)區(qū)域管理十幾個(gè)店面，店鋪如果在產(chǎn)品上增加營(yíng)業(yè)額排名功能，店鋪之間在對(duì)比中，能夠刺激店鋪不斷努力提高銷售額，從而拿到好名次，對(duì)于成績(jī)突出的店鋪給予獎(jiǎng)勵(lì)。

對(duì)于單個(gè)店鋪中設(shè)計(jì)形式上也要增加獎(jiǎng)勵(lì)制度，例如，店鋪營(yíng)業(yè)額超出目標(biāo)額的一定比例，頒發(fā)“超能徽章”，徽章代表著優(yōu)秀戰(zhàn)績(jī)，并且記錄統(tǒng)計(jì)。

激勵(lì)機(jī)制從兩方面切入：一是自我激勵(lì)，二是區(qū)域排名激勵(lì)。右上角的超能徽章是對(duì)店長(zhǎng)的自我激勵(lì)，區(qū)域排名是在整個(gè)區(qū)域上的激勵(lì)。

1）超能徽章

開始我的想法是，完成本周的目標(biāo)額，點(diǎn)亮超能徽章給予鼓勵(lì)，后來我們的負(fù)責(zé)人提出“如果本周三就完成了目標(biāo)額，那店長(zhǎng)難道就不需要努力了嗎？”，這是一個(gè)非常重要的提醒。

所以設(shè)計(jì)上改為：超額錢數(shù)變紅，進(jìn)度條變紅，超額完成區(qū)域端設(shè)定的金額比例，點(diǎn)亮超能徽章，徽章會(huì)在月度、年度統(tǒng)計(jì)體現(xiàn)，你的輝煌戰(zhàn)績(jī)會(huì)永遠(yuǎn)記錄，同樣是一種激勵(lì)的表現(xiàn)。

2）區(qū)域排名

所謂山外有山，人外有人，本店銷售額再好，可能也會(huì)有銷售更好的店，所以激勵(lì)店長(zhǎng)不斷競(jìng)爭(zhēng)向上是產(chǎn)品永恒的宗旨。

動(dòng)態(tài)展示圖

2. 建立學(xué)習(xí)機(jī)制

草圖中的商學(xué)院板塊

此板塊出發(fā)點(diǎn)是培養(yǎng)店長(zhǎng)成長(zhǎng)，從而更專業(yè)的服務(wù)店鋪，“商學(xué)院”符合上文講到的用戶價(jià)值和商業(yè)價(jià)值的結(jié)合點(diǎn)功能。

后來，我們的產(chǎn)品總負(fù)責(zé)人對(duì)功能雖然很贊同，但是出于產(chǎn)品初期運(yùn)營(yíng)成本的考慮，暫且不加。運(yùn)營(yíng)一個(gè)內(nèi)容板塊需要很大的投入，內(nèi)容不好就不會(huì)有高價(jià)值，未來產(chǎn)品到了成熟期，我想還是會(huì)著重考慮增加此板塊，為產(chǎn)品帶來一個(gè)有力的賣點(diǎn)。

B端產(chǎn)品為什么可以去掉這樣的一個(gè)板塊，原因是“商學(xué)院”是產(chǎn)品的增值服務(wù)功能，沒有這個(gè)功能產(chǎn)品照應(yīng)運(yùn)營(yíng)，就如同買個(gè)沙發(fā)送腳凳，但沒有腳凳沙發(fā)照應(yīng)坐。

“商學(xué)院”不是這個(gè)產(chǎn)品服務(wù)全流程中業(yè)務(wù)上的功能點(diǎn)，所以可以去掉。這句話很重要一定要理解。

3. 結(jié)合產(chǎn)品定位

修改前原圖

通過我們業(yè)務(wù)人員的實(shí)地調(diào)查，得出的結(jié)論是：一般店長(zhǎng)都是每周統(tǒng)計(jì)一次銷售數(shù)據(jù)，每天不做統(tǒng)計(jì)，產(chǎn)品設(shè)計(jì)上也應(yīng)該是只呈現(xiàn)周的數(shù)據(jù)。

這樣理解業(yè)務(wù)需求，是萬(wàn)萬(wàn)不可取的。雖然店長(zhǎng)是每周統(tǒng)計(jì)一次數(shù)據(jù)，但是要明白是每天組成的周，所以店長(zhǎng)同樣會(huì)關(guān)心每天的銷售數(shù)據(jù)，周數(shù)據(jù)只是店長(zhǎng)最后做的一個(gè)統(tǒng)計(jì)。

如果產(chǎn)品只體現(xiàn)周數(shù)據(jù)，那么店長(zhǎng)只會(huì)一周用一次產(chǎn)品，這不符合產(chǎn)品定位。店長(zhǎng)使用產(chǎn)品的頻率低，很難對(duì)產(chǎn)品產(chǎn)生依賴與信任，反而像個(gè)累贅，而產(chǎn)品的價(jià)值是讓店長(zhǎng)依賴產(chǎn)品，信任產(chǎn)品。

優(yōu)化后

產(chǎn)品的定位是每天多次高頻打開查看最新數(shù)據(jù)，所以產(chǎn)品功能上增加日數(shù)據(jù)，首頁(yè)體現(xiàn)日數(shù)據(jù)，是使用者每天打開產(chǎn)品的動(dòng)力；還有首頁(yè)呈現(xiàn)其他重要的關(guān)鍵指標(biāo)數(shù)據(jù)，都是為了讓店長(zhǎng)每天打開產(chǎn)品，關(guān)注數(shù)據(jù)表現(xiàn)及走勢(shì)。

三、交互優(yōu)化

1. 突出關(guān)鍵指標(biāo)，提高效果

關(guān)鍵指標(biāo)首頁(yè)彈窗展示

上圖是點(diǎn)擊首頁(yè)列表周數(shù)據(jù)的彈框，首頁(yè)把每周的數(shù)據(jù)以表格列表的形式依次羅列，但其實(shí)店長(zhǎng)一般只會(huì)關(guān)注本周的數(shù)據(jù)。

彈窗中的A處（有待提升的數(shù)據(jù)）數(shù)據(jù)是對(duì)比上周下降的數(shù)據(jù)，B處（其他數(shù)據(jù)）是對(duì)比上周上升的數(shù)據(jù)，A處沒有內(nèi)容時(shí)也就是都去到了B處，這樣A處（有待提升的數(shù)據(jù)）為空，就會(huì)給店長(zhǎng)數(shù)據(jù)都合格的感受，不再需要更高的提升。。

優(yōu)化后關(guān)鍵指標(biāo)呈現(xiàn)

優(yōu)化后把首頁(yè)的列表形式，用數(shù)據(jù)可視化的設(shè)計(jì)形式呈現(xiàn)，柱狀圖展示（上圖C處）可以查看每周的數(shù)據(jù)對(duì)比和相關(guān)數(shù)據(jù)的趨勢(shì)變化，柱狀圖超額漸變紅色，超額設(shè)定的比例金額獲得超能徽章。

同時(shí)圖表可以切換查看周、月、年數(shù)據(jù)，柱狀圖有交互事件，點(diǎn)擊其中的柱子可以查看當(dāng)周的詳細(xì)數(shù)據(jù)，并且可以點(diǎn)擊該模塊右上角放大按鈕，瀏覽歷史的所有數(shù)據(jù)，如下圖演示：

查看周詳情操作演示

圖表全屏操作演示

D處的數(shù)據(jù)是修改前的彈窗內(nèi)容，也是店長(zhǎng)高頻關(guān)注的數(shù)據(jù)，所以直接呈現(xiàn)在首頁(yè)便于閱覽。

2. 合并同類項(xiàng)，提高操作便捷度

原頁(yè)面

A處的四個(gè)入口其實(shí)在講一件事，所以可以合并成一個(gè)入口，在二級(jí)頁(yè)面當(dāng)中分類。

B處的交互操作呈現(xiàn)有問題，應(yīng)該是選中“自定義時(shí)間”才出現(xiàn)時(shí)間段選擇框。

C處是排版問題，列表的瀏覽模式一般是從左到右，灰色文字是次要信息，左右結(jié)構(gòu)呈現(xiàn)并不合理，所以需要換一種排版形式，同時(shí)列表后面按鈕過多，可以并為一個(gè)詳情頁(yè)。

優(yōu)化后頁(yè)面

1）A處的合并優(yōu)勢(shì)：提高操作的便捷性

因?yàn)樗姆诸愂峭愴?xiàng)，通常配合本店、區(qū)域、全國(guó)的切換操作，隨機(jī)性很高，所以放在一起可以提高操作的便捷性。

店長(zhǎng)一般瀏覽數(shù)據(jù)路徑是先看本店數(shù)據(jù)，然后會(huì)對(duì)比區(qū)域和全國(guó)數(shù)據(jù)，區(qū)域和全國(guó)數(shù)據(jù)是次級(jí)比較數(shù)據(jù)，例如店長(zhǎng)在看本店“高庫(kù)存滯銷榜”那極大的可能會(huì)切換到區(qū)域和全國(guó)查看同類型數(shù)據(jù)進(jìn)行對(duì)比。

A優(yōu)化后的操作邏輯

2）A處的合并優(yōu)勢(shì)：帶動(dòng)全局瀏覽貨品的行為

店長(zhǎng)一般會(huì)更關(guān)注滯銷榜單，但每次進(jìn)來出現(xiàn)的是“單品暢銷榜單”，這樣店長(zhǎng)就會(huì)無意識(shí)的瀏覽到當(dāng)前板塊的數(shù)據(jù)，之后才會(huì)切換到滯銷榜單，就帶動(dòng)了店長(zhǎng)全局瀏覽貨品的行為。

微信的朋友圈就是這樣模式的設(shè)計(jì)，把高頻的朋友圈放到二級(jí)頁(yè)面，可以帶動(dòng)發(fā)現(xiàn)頁(yè)面相關(guān)的業(yè)務(wù)模塊。雖然用戶在進(jìn)入朋友圈的交互上會(huì)形成慣性操作忽略不關(guān)注的內(nèi)容，但如果添加了新的功能，頁(yè)面變得不一樣用戶就會(huì)關(guān)注，朋友圈的超級(jí)流量就能帶動(dòng)很高的轉(zhuǎn)化。

3. 重新定義搜索功能，提高體驗(yàn)度

搜索交互優(yōu)化前

通過跟業(yè)務(wù)人員的了解，店長(zhǎng)搜索貨品的頻率及其之高，查庫(kù)存、查智能推薦的衣服數(shù)據(jù)、查自己主推的衣服數(shù)據(jù)等等，所以需要把搜索更直接突出的設(shè)計(jì)。

優(yōu)化后的搜索框-頁(yè)面右上角

優(yōu)化后把搜索框直接設(shè)計(jì)在首頁(yè)，根據(jù)“菲茲定律”并且加大處理，字號(hào)設(shè)計(jì)為16px較大字號(hào)，一般店長(zhǎng)會(huì)輸入一連串貨品單號(hào)搜索，所以加大字號(hào)更有效檢查對(duì)錯(cuò)。

四、UI設(shè)計(jì)優(yōu)化

1. UI設(shè)計(jì)前的思考

UI設(shè)計(jì)前要根據(jù)產(chǎn)品所處的行業(yè)、背景、模式、用戶、產(chǎn)品定位、視覺競(jìng)品分析，定義產(chǎn)品的設(shè)計(jì)，新零售這款產(chǎn)品最終的分析結(jié)論可以圍繞“高效”“科技”“智慧”三個(gè)關(guān)鍵詞設(shè)計(jì)。

1）高效

B端工具類產(chǎn)品，重點(diǎn)要體現(xiàn)產(chǎn)品的效率，優(yōu)化后的首頁(yè)增強(qiáng)數(shù)據(jù)可視化設(shè)計(jì)，更直接靈動(dòng)的展示銷售業(yè)績(jī)，同時(shí)首頁(yè)通過數(shù)據(jù)量化的形式，提供主要功能的快捷入口。整個(gè)首頁(yè)成為一個(gè)數(shù)據(jù)看版，使用者會(huì)因?yàn)橛袛?shù)據(jù)，看到數(shù)據(jù)而被有效指引點(diǎn)擊查看詳情。

設(shè)計(jì)風(fēng)格上簡(jiǎn)潔輕快明了，簡(jiǎn)單而不簡(jiǎn)陋，加大間距留白，突出數(shù)據(jù)展示。

2）科技

新零售是新興的概念，所以體現(xiàn)產(chǎn)品的科技感很符合新零售產(chǎn)品調(diào)性，首頁(yè)在“上周綜合提升”功能板塊，設(shè)計(jì)粒子一直發(fā)射的效果，每個(gè)粒子像一個(gè)個(gè)數(shù)據(jù)點(diǎn)，就像一個(gè)永動(dòng)機(jī)一直在工作，營(yíng)造一種為店鋪保駕護(hù)航的科技效果。

科技效果

3）智慧

產(chǎn)品采用大數(shù)據(jù)及算法的技術(shù)，所以產(chǎn)品要有智慧感，智慧感更多的是體現(xiàn)產(chǎn)品的智能技術(shù)上。例如會(huì)通過往期用戶喜好，結(jié)合算法搭配衣服向新顧客推薦。

2. 讓店長(zhǎng)心動(dòng)的設(shè)計(jì)

圖一

圖二

上下兩個(gè)首頁(yè)的區(qū)別是圖一沒有紅色，圖二出現(xiàn)紅色，為什么稱為讓店長(zhǎng)心動(dòng)的設(shè)計(jì)。因?yàn)橹灰霈F(xiàn)紅色，就是好的數(shù)據(jù)表現(xiàn)，就會(huì)讓店長(zhǎng)心里產(chǎn)生一點(diǎn)悸動(dòng)，這樣的設(shè)計(jì)就是為了，形成店長(zhǎng)對(duì)產(chǎn)品操作上的一個(gè)意識(shí)行為認(rèn)知。

既然紅色在產(chǎn)品中代表積極的主題，那么在其它頁(yè)面中一定也不要破壞這種主題認(rèn)知，要延續(xù)主題的設(shè)計(jì)。

3. 數(shù)據(jù)要量化，數(shù)據(jù)可視化設(shè)計(jì)概念

案例一

數(shù)據(jù)量化是數(shù)據(jù)可視化設(shè)計(jì)的一個(gè)重要概念，起初產(chǎn)品的設(shè)計(jì)是超額完成就獲得超能徽章。但是超額的數(shù)據(jù)可能會(huì)一直增加，如果只是用“超額完成”四個(gè)字就不會(huì)知道最終具體超額數(shù)據(jù)。所以，根據(jù)數(shù)據(jù)要量化的概念，把具體數(shù)據(jù)展示出來。

案例二

數(shù)據(jù)量化/快捷入口

左側(cè)導(dǎo)航在設(shè)計(jì)上有意弱化，因?yàn)樗皇莻€(gè)入口，然后在頁(yè)面當(dāng)中通過量化數(shù)據(jù)形式，著重設(shè)計(jì)主要功能的快捷入口。例如“行動(dòng)效果”把數(shù)據(jù)拿出來展示，使用者通過數(shù)據(jù)有效引導(dǎo)觸發(fā)操作行為，下面三個(gè)入口，衣服和標(biāo)識(shí)同樣是信息量化引導(dǎo)，圖標(biāo)視覺上設(shè)計(jì)的較為突出，是因?yàn)橐獜?qiáng)調(diào)快捷入口的功能。

五、技能教程

粒子發(fā)射動(dòng)效教程

粒子發(fā)射循環(huán)效果

用到的軟件Sketch+C4D+AE，其中唯一稍難的是如何讓粒子發(fā)射效果呈現(xiàn)循環(huán)發(fā)射沒有卡頓感覺，其次圖中有漸變色和細(xì)線再加上很小的點(diǎn)，如果用GIF圖可能會(huì)不清晰，所以接下里我們還是想辦法，用AE插件Bodymovin實(shí)現(xiàn)高清效果。

第一步：把設(shè)計(jì)稿畫的透視底座切圖導(dǎo)出。

第二步：C4D設(shè)計(jì)粒子發(fā)射，并導(dǎo)出序列幀，功能上運(yùn)用C4D的克隆配合發(fā)射器，加上一個(gè)隨機(jī)效果即可，發(fā)射區(qū)的角度要盡可能貼近設(shè)計(jì)稿底座的角度。

第三步：導(dǎo)出序列幀，放到AE當(dāng)中制作粒子循環(huán)發(fā)射效果，選取一段滿意的發(fā)射效果，復(fù)制一組序列幀；然后參考下圖放置設(shè)置透明度，這樣就會(huì)呈現(xiàn)循環(huán)的粒子發(fā)射效果；最后再把整個(gè)動(dòng)畫用AE導(dǎo)出一組序列幀，command+k 幀速率可以設(shè)置為10-15之間，這樣出來的序列幀會(huì)很少，同時(shí)也能保證畫面的流暢度。

第四步：測(cè)量好設(shè)計(jì)稿中動(dòng)圖所占尺寸，然后AE當(dāng)中新建同樣尺寸合成項(xiàng)目，把切好的透視底座導(dǎo)出，把最新從AE設(shè)置好的循環(huán)播放粒子序列幀以一張張圖片的形式導(dǎo)入，不可導(dǎo)入序列，因?yàn)锽odymovin不識(shí)別序列。

這個(gè)工程也要把幀速率設(shè)置成剛剛導(dǎo)出的序列幀速率，然后把所有圖片割成一幀，用序列圖層功能設(shè)置成下圖的樣子。

第五步：用 Bodymovin 導(dǎo)出json文件。

最后一步：Bodymovin 導(dǎo)出的圖片質(zhì)量不高，所以需要替換導(dǎo)出的所有圖片。另外，需要注意的是Bodymovin這種導(dǎo)出形式，一定要注意圖片的大小，太大落地后會(huì)有明顯卡頓。下圖導(dǎo)出60張序列只有190kb，所以加載流暢度沒問題。

最后

本期案例分享很全面，除產(chǎn)品、交互、UI設(shè)計(jì)之外，還包含了很多數(shù)據(jù)可視化設(shè)計(jì)理論。

UI設(shè)計(jì)師能夠從產(chǎn)品的全局視角發(fā)出做視覺設(shè)計(jì)，無疑是最科學(xué)的。

每個(gè)設(shè)計(jì)點(diǎn)都有底層的業(yè)務(wù)、產(chǎn)品、交互體驗(yàn)做支撐，設(shè)計(jì)表現(xiàn)上會(huì)更有說服力，這也是一個(gè)設(shè)計(jì)師被認(rèn)可過程中的重要能力。

作者：吳星辰，微信公眾號(hào)：互聯(lián)網(wǎng)設(shè)計(jì)幫

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

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