@Jenny黃靜雯 ：???在App大版本的迭代中，免費試用作為小模塊，交互邏輯不變，僅做視覺層面的優化。然而在視覺優化過程中，免費試用的體驗問題浮出水面，此時對免費試用的設計從表層進入相對深的層面。設計的過程也引發靜雯對于視覺設計師職能的一點思考，拋磚引玉。

文章大綱：?

• 背景
• 設計后的再思考
• 競品分析，尋找普適的解決方案
• 輸出新的設計方案
• 小結與反思?

一. 背景?

美啦5.0的風格確定后，App其他頁面的視覺設計也需要跟進，免費試用的優化也由此展開。因美啦5.0版本改動大，工作量大，所以免費試用的交互邏輯與舊版本保持一致。通過狀態區分，依次是進行中、預熱中、已結束，用戶進入活動詳情頁可以進行分享報名，查看試用名單及試用報告。?

△ 免費試用交互邏輯

因此免費試用主要是視覺層面的優化，包括導航的統一，icon等的調整，使之視覺上輕盈。視覺的優化極快完成了，但原本的邏輯真的有結合免費試用本身的作用與功能嗎？于是我們停下來做了一些思考。?

△ 快速更新視覺層面的設計圖

二. 設計后的再思考

首先分析免費試用的作用，因為免費，所以對用戶也有比較大的吸引力。吸引用戶流量，增加活躍度，給做試用活動的產品更多的曝光，引導用戶種草。吸引來的流量就應當物盡其用盡量增加產品曝光。

再分析用戶來到免費試用的目的：一是看看有什么喜歡的產品在做試用活動，參加該活動；其次，如果沒有喜歡的產品，那就看看以前的試用活動，而以前的試用活動里比較吸引用戶的內容便是優質試用報告。

分析完免費試用本身的作用及用戶的目的后，我們發現了兩個問題：

第一，免費試用的tab欄分別是進行中、預熱中、已結束，進入免費試用后默認是進行中。在極端情況下，會出現內容較少或沒有內容的空狀態，破滅了用戶來免費試用的目的，也浪費了免費試用重要的曝光位置。已結束的文案及banner圖的已結束標簽，降低了用戶的點擊欲。這些細微的體驗問題都會間接減少用戶在免費試用的留存。

第二，經過對免費試用的使用挖掘，沉淀在已結束頁面內的部分優質試用報告，即關于產品的使用結果反饋，是除了試用活動，對用戶比較有價值，同時可以引導用戶種草的內容。但目前查看試用報告的路徑比較長：點開免費試用、點擊已結束、點擊某個活動、下拉2屏左右的距離，點擊查看試用名單和報告按鈕，點擊試用報告，進入試用報告feed頁，查看某條試用報告。需要操作8個步驟才能看到，路徑比較深，用戶在其中任何一個環節都可能離開免費試用。

?

△ 查看試用報告的路徑

三. 競品分析，尋找普適的解決方案

由于有免費試用的競品較少，因此選擇了網易嚴選樣品試用、京東試用、淘寶阿里試用、天貓美妝試用。這幾個平臺的免費試用雖然是web端，但是對于美啦免費試用的設計參考是相通的。

我們對4個平臺的免費試用使用后，得出如下分析：

第一，四個平臺里，網易嚴選樣品試用、天貓美妝試用的試用產品比較少，網易嚴選樣品試用將所有的試用活動放置于一個頁面就沒有頁面冷清的感受，天貓美妝試用就會覺得內容冷清。京東試用、淘寶阿里試用的試用活動很多，沒有上述問題。?

△ 競品的免費試用頁面

第二，京東試用、淘寶阿里試用、網易嚴選樣品試用給予了試用報告比較高的優先級。展示優質試用報告，對于電商平臺的轉化理論上有一定的幫助。

△ 試用報告的優先級

第三，網易嚴選樣品試用及天貓美妝試用在已結束的活動頁面，都提供了查看報告的按鈕，引導用戶查看試用報告，這對于電商平臺而言，可以間接提高用戶轉化。京東試用已結束頁面比較隱藏，也只顯示文案「名單已發布」，用戶難以判斷內部是否有值得查看的內容。淘寶阿里試用已結束頁面沒有任何文案提示。

△ 已結束頁面的試用報告入口

?由上述競品分析，我們得出這樣的結論：

• 在使用產品較少的極端情況下，將所有活動放置于一個頁面可以營造出熱鬧的活動氛圍，可以比較大程度避免極端狀態。
• 提高優質試用報告的展示優先級，3個競品給予了試用報告較高的優先級，2個競品在試用結束頁面引導用戶查看試用報告。

四. 輸出設計方案

我們把競品分析所得到的結論應用到美啦免費試用的優化上：

• 將所有的試用活動放置于一個頁面，順序按照進行中、預熱中、往期試用，去掉已結束的標簽，增加查看試用報告的標簽，引導查看試用報告。
• 將同樣有吸引力的試用報告優先級提高，放置精華試用報告。

?

五. 小結與反思

?面對設計迭代的優化，視覺設計師除了做出視覺層面的更新，也需要從更深層次的考慮產品的功能是否順暢的實現、用戶的使用感受是否良好。具備一定的產品思維，挖掘設計優化深處的需求與視覺層面的設計同樣重要。????

歡迎關注作者的微信公眾號：「Jenny黃靜雯」

「實戰案例解析如何做好用戶體驗設計」

• 《用一個實戰案例，幫你學習今年最火的服務設計思維》
• 《今年最火的全鏈路設計有實戰案例了！滴滴設計團隊出品》
• 《實戰案例！人氣APP 最右4.0 全新UI 升級背后的設計思路》

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com