国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

一、案例解析

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

優(yōu)化前

優(yōu)化后

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

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

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

優(yōu)化草圖

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

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

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

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

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

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

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

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

1）超能徽章

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

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

2）區(qū)域排名

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

動態(tài)展示圖

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

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

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

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

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

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

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

修改前原圖

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

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

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

優(yōu)化后

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

三、交互優(yōu)化

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

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

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

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

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

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

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

查看周詳情操作演示

圖表全屏操作演示

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

2. 合并同類項，提高操作便捷度

原頁面

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

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

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

優(yōu)化后頁面

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

因為四分類是同類項，通常配合本店、區(qū)域、全國的切換操作，隨機(jī)性很高，所以放在一起可以提高操作的便捷性。

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

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

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

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

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

3. 重新定義搜索功能，提高體驗度

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

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

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

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

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

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

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

1）高效

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

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

2）科技

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

科技效果

3）智慧

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

2. 讓店長心動的設(shè)計

圖一

圖二

上下兩個首頁的區(qū)別是圖一沒有紅色，圖二出現(xiàn)紅色，為什么稱為讓店長心動的設(shè)計。因為只要出現(xiàn)紅色，就是好的數(shù)據(jù)表現(xiàn)，就會讓店長心里產(chǎn)生一點悸動，這樣的設(shè)計就是為了，形成店長對產(chǎn)品操作上的一個意識行為認(rèn)知。

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

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

案例一

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

案例二

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

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

五、技能教程

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

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

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

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

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

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

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

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

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

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

最后

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

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

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

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

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

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