@Jenny黃靜雯 ：???在App大版本的迭代中，免費(fèi)試用作為小模塊，交互邏輯不變，僅做視覺(jué)層面的優(yōu)化。然而在視覺(jué)優(yōu)化過(guò)程中，免費(fèi)試用的體驗(yàn)問(wèn)題浮出水面，此時(shí)對(duì)免費(fèi)試用的設(shè)計(jì)從表層進(jìn)入相對(duì)深的層面。設(shè)計(jì)的過(guò)程也引發(fā)靜雯對(duì)于視覺(jué)設(shè)計(jì)師職能的一點(diǎn)思考，拋磚引玉。

文章大綱：?

• 背景
• 設(shè)計(jì)后的再思考
• 競(jìng)品分析，尋找普適的解決方案
• 輸出新的設(shè)計(jì)方案
• 小結(jié)與反思?

一. 背景?

美啦5.0的風(fēng)格確定后，App其他頁(yè)面的視覺(jué)設(shè)計(jì)也需要跟進(jìn)，免費(fèi)試用的優(yōu)化也由此展開(kāi)。因美啦5.0版本改動(dòng)大，工作量大，所以免費(fèi)試用的交互邏輯與舊版本保持一致。通過(guò)狀態(tài)區(qū)分，依次是進(jìn)行中、預(yù)熱中、已結(jié)束，用戶進(jìn)入活動(dòng)詳情頁(yè)可以進(jìn)行分享報(bào)名，查看試用名單及試用報(bào)告。?

△ 免費(fèi)試用交互邏輯

因此免費(fèi)試用主要是視覺(jué)層面的優(yōu)化，包括導(dǎo)航的統(tǒng)一，icon等的調(diào)整，使之視覺(jué)上輕盈。視覺(jué)的優(yōu)化極快完成了，但原本的邏輯真的有結(jié)合免費(fèi)試用本身的作用與功能嗎？于是我們停下來(lái)做了一些思考。?

△ 快速更新視覺(jué)層面的設(shè)計(jì)圖

二. 設(shè)計(jì)后的再思考

首先分析免費(fèi)試用的作用，因?yàn)槊赓M(fèi)，所以對(duì)用戶也有比較大的吸引力。吸引用戶流量，增加活躍度，給做試用活動(dòng)的產(chǎn)品更多的曝光，引導(dǎo)用戶種草。吸引來(lái)的流量就應(yīng)當(dāng)物盡其用盡量增加產(chǎn)品曝光。

再分析用戶來(lái)到免費(fèi)試用的目的：一是看看有什么喜歡的產(chǎn)品在做試用活動(dòng)，參加該活動(dòng)；其次，如果沒(méi)有喜歡的產(chǎn)品，那就看看以前的試用活動(dòng)，而以前的試用活動(dòng)里比較吸引用戶的內(nèi)容便是優(yōu)質(zhì)試用報(bào)告。

分析完免費(fèi)試用本身的作用及用戶的目的后，我們發(fā)現(xiàn)了兩個(gè)問(wèn)題：

第一，免費(fèi)試用的tab欄分別是進(jìn)行中、預(yù)熱中、已結(jié)束，進(jìn)入免費(fèi)試用后默認(rèn)是進(jìn)行中。在極端情況下，會(huì)出現(xiàn)內(nèi)容較少或沒(méi)有內(nèi)容的空狀態(tài)，破滅了用戶來(lái)免費(fèi)試用的目的，也浪費(fèi)了免費(fèi)試用重要的曝光位置。已結(jié)束的文案及banner圖的已結(jié)束標(biāo)簽，降低了用戶的點(diǎn)擊欲。這些細(xì)微的體驗(yàn)問(wèn)題都會(huì)間接減少用戶在免費(fèi)試用的留存。

第二，經(jīng)過(guò)對(duì)免費(fèi)試用的使用挖掘，沉淀在已結(jié)束頁(yè)面內(nèi)的部分優(yōu)質(zhì)試用報(bào)告，即關(guān)于產(chǎn)品的使用結(jié)果反饋，是除了試用活動(dòng)，對(duì)用戶比較有價(jià)值，同時(shí)可以引導(dǎo)用戶種草的內(nèi)容。但目前查看試用報(bào)告的路徑比較長(zhǎng)：點(diǎn)開(kāi)免費(fèi)試用、點(diǎn)擊已結(jié)束、點(diǎn)擊某個(gè)活動(dòng)、下拉2屏左右的距離，點(diǎn)擊查看試用名單和報(bào)告按鈕，點(diǎn)擊試用報(bào)告，進(jìn)入試用報(bào)告feed頁(yè)，查看某條試用報(bào)告。需要操作8個(gè)步驟才能看到，路徑比較深，用戶在其中任何一個(gè)環(huán)節(jié)都可能離開(kāi)免費(fèi)試用。

?

△ 查看試用報(bào)告的路徑

三. 競(jìng)品分析，尋找普適的解決方案

由于有免費(fèi)試用的競(jìng)品較少，因此選擇了網(wǎng)易嚴(yán)選樣品試用、京東試用、淘寶阿里試用、天貓美妝試用。這幾個(gè)平臺(tái)的免費(fèi)試用雖然是web端，但是對(duì)于美啦免費(fèi)試用的設(shè)計(jì)參考是相通的。

我們對(duì)4個(gè)平臺(tái)的免費(fèi)試用使用后，得出如下分析：

第一，四個(gè)平臺(tái)里，網(wǎng)易嚴(yán)選樣品試用、天貓美妝試用的試用產(chǎn)品比較少，網(wǎng)易嚴(yán)選樣品試用將所有的試用活動(dòng)放置于一個(gè)頁(yè)面就沒(méi)有頁(yè)面冷清的感受，天貓美妝試用就會(huì)覺(jué)得內(nèi)容冷清。京東試用、淘寶阿里試用的試用活動(dòng)很多，沒(méi)有上述問(wèn)題。?

△ 競(jìng)品的免費(fèi)試用頁(yè)面

第二，京東試用、淘寶阿里試用、網(wǎng)易嚴(yán)選樣品試用給予了試用報(bào)告比較高的優(yōu)先級(jí)。展示優(yōu)質(zhì)試用報(bào)告，對(duì)于電商平臺(tái)的轉(zhuǎn)化理論上有一定的幫助。

△ 試用報(bào)告的優(yōu)先級(jí)

第三，網(wǎng)易嚴(yán)選樣品試用及天貓美妝試用在已結(jié)束的活動(dòng)頁(yè)面，都提供了查看報(bào)告的按鈕，引導(dǎo)用戶查看試用報(bào)告，這對(duì)于電商平臺(tái)而言，可以間接提高用戶轉(zhuǎn)化。京東試用已結(jié)束頁(yè)面比較隱藏，也只顯示文案「名單已發(fā)布」，用戶難以判斷內(nèi)部是否有值得查看的內(nèi)容。淘寶阿里試用已結(jié)束頁(yè)面沒(méi)有任何文案提示。

△ 已結(jié)束頁(yè)面的試用報(bào)告入口

?由上述競(jìng)品分析，我們得出這樣的結(jié)論：

• 在使用產(chǎn)品較少的極端情況下，將所有活動(dòng)放置于一個(gè)頁(yè)面可以營(yíng)造出熱鬧的活動(dòng)氛圍，可以比較大程度避免極端狀態(tài)。
• 提高優(yōu)質(zhì)試用報(bào)告的展示優(yōu)先級(jí)，3個(gè)競(jìng)品給予了試用報(bào)告較高的優(yōu)先級(jí)，2個(gè)競(jìng)品在試用結(jié)束頁(yè)面引導(dǎo)用戶查看試用報(bào)告。

四. 輸出設(shè)計(jì)方案

我們把競(jìng)品分析所得到的結(jié)論應(yīng)用到美啦免費(fèi)試用的優(yōu)化上：

• 將所有的試用活動(dòng)放置于一個(gè)頁(yè)面，順序按照進(jìn)行中、預(yù)熱中、往期試用，去掉已結(jié)束的標(biāo)簽，增加查看試用報(bào)告的標(biāo)簽，引導(dǎo)查看試用報(bào)告。
• 將同樣有吸引力的試用報(bào)告優(yōu)先級(jí)提高，放置精華試用報(bào)告。

?

五. 小結(jié)與反思

?面對(duì)設(shè)計(jì)迭代的優(yōu)化，視覺(jué)設(shè)計(jì)師除了做出視覺(jué)層面的更新，也需要從更深層次的考慮產(chǎn)品的功能是否順暢的實(shí)現(xiàn)、用戶的使用感受是否良好。具備一定的產(chǎn)品思維，挖掘設(shè)計(jì)優(yōu)化深處的需求與視覺(jué)層面的設(shè)計(jì)同樣重要。????

歡迎關(guān)注作者的微信公眾號(hào)：「Jenny黃靜雯」

「實(shí)戰(zhàn)案例解析如何做好用戶體驗(yàn)設(shè)計(jì)」

• 《用一個(gè)實(shí)戰(zhàn)案例，幫你學(xué)習(xí)今年最火的服務(wù)設(shè)計(jì)思維》
• 《今年最火的全鏈路設(shè)計(jì)有實(shí)戰(zhàn)案例了！滴滴設(shè)計(jì)團(tuán)隊(duì)出品》
• 《實(shí)戰(zhàn)案例！人氣APP 最右4.0 全新UI 升級(jí)背后的設(shè)計(jì)思路》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com