本次分享的項目是達達快送品牌IP達哥,這個項目是由@寶箱 @Masaya @小劉三人合作完成。
希望通過分享能打響達哥的知名度，并且通過沉淀的方法論能夠幫助大家應用于日常工作中。

收藏

收藏

收藏

收藏

收藏

收藏

收藏

收藏

收藏

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

15年開始，紅包大戰(zhàn)占據了春節(jié)營銷的重要位置，各家互聯網平臺紛紛“發(fā)錢”搶占用戶，紅包總額曾在2021年一度達到120億元的峰值。不過近兩年開始，過往簡單粗放的紅包大戰(zhàn)逐漸失去熱度。平臺不再追求短時間用戶增長，這次春節(jié)活動就是百度FEED年底以運營手段打造的內容營銷活動。設計團隊以“有福氣 趣新春”為主題提出了內容場景化的營銷策略，整體圍繞如何把“內容做的有趣”來分享設計思路。

一、心智建立內容護城河

1、心智占領：

提到內容營銷，先不說老掉牙的腦白金、可口可樂。我們先說說產品和用戶的關系。我們通過各大平臺的定位，提供了信任背書，但產品只是流量的承載地，最終讓目標用戶到達目的地的還是我們的品牌、內容、形象。所以我們在做內容營銷活動的時候，究竟應該怎么做？

2、你的產品容易記住么？

海的味道你知道，是波力海苔。提到藍瓶的鈣，腦海會浮現產品的藍色包裝。說到這里，我們就明白了，內容營銷的核心是圖形和口號。營銷活動的核心是品牌符號和Slogan。

品牌符號拆解

以春節(jié)項目舉例，提取中國傳統(tǒng)團扇形，象征著大團圓。引申為家家戶戶的心愿，全家團圓、福氣滿滿。以FEED產品愿景「看更多有趣有用的內容」為使,結合「新年要有福氣」的新年祝福，推出品牌Slogan【有福氣·趣新春】的活動理念，開啟活動篇章。

有了主要的符號傳達，其它輔助元素的提取從桂花造型和錢幣上做了簡化，寓意吉祥富貴財源滾滾，應用在頁面細節(jié)裝飾中。

用顏色表達個性

提起品牌符號，我們首先想到的可能是 Logo，但有些時候色彩卻是第一印象。春節(jié)是中國傳統(tǒng)文化的傳承。因此嘗試從中國傳統(tǒng)色彩體系中象征“福氣、福來、富貴”的海棠紅作為會場主顏色。

為了更好的區(qū)分內容場景以及增加色彩豐富度，受到“一年四季輪回”的啟發(fā)，延伸品牌輔助色。一年的圓滿在于四季的圓滿，在色彩表現上，從春到人間萬物鮮到春雪滿空；對應綠、紅、黃、藍給人煥然新生的視覺感受。

用字體豐富品牌基因

字體，不僅可以指代文字內容含義和字形美學價值，還能透過字體設計的初衷洞察到品牌濃縮其中的理念和哲學。利用彎曲讓作品動感有張力。利用圓角處理增加趣味性，呼應“有趣”的品牌理念。用傾斜的樣式營造出視覺張力，形成視覺焦點。

3、洞察產品的「生命力」

定形象-品牌基因的獨特形象

角色、品牌、用戶必須是一個標簽，清晰可見。以IP角色與用戶互動溝通，建立信任關系，擁有獨立人格和魅力。通過更具人格化的形象，使品牌變得更溫暖。本次活動的主IP，在設定上采用FEED字母演變不同性格IP角色，作為不同維度的形象代表，豐富B/C端的內容場景。

情感鏈接-圍繞人設講故事

如何通過「IP角色」讓用戶對產品產生情感呢？首先賦予他們性格，他們分別是福氣、財富、快樂和有趣的化身。為用戶帶來財、富、樂、趣是他們的責任。IP的人格化能很好的與用戶建立品牌好感度。同時「持續(xù)曝光+情感鏈接」的品牌策略，在活動中貫穿內容場景、物料推廣、分享轉發(fā)等，反復強調品牌。

二、你的差異點是什么？

1、化繁為簡，強化內容

由于春節(jié)活動周期長、內容多的特點，使得頁面呈現龐大復雜，會造成用戶的理解成本影響留存，因此把內容有效呈現、提升屏效、優(yōu)化體驗路徑是交互的重點。我們通過“框架分層”“減少活動步長”對所有活動進行了框架升級。提升活動易用性，讓用戶快速參與活動。在設計表達上簡化頭圖背景，讓用戶聚焦場景，引入內容。

2、創(chuàng)意場景，引爆內容

洞察設計策略

百度FEED不同于其他矩陣，我們的產品內核是“內容”；作為春節(jié)活動，濃濃的“年味”是活動外核。如果只去介紹我們自己產品的功能、種種好處，這種干巴巴的內容無法在這個時代獲得關注和認同，因為無法與用戶建立切身聯系。所以在不同層次的內容上，我們可以通過故事化、場景化來把內容做的更有趣，最終實現業(yè)務互動轉化提升。

年俗互動-故事型敘述 增強產品代入感

抓住用戶情緒洞察，采用年俗的理念打造場景，營造用戶代入感。在視覺表現上，根據時間推移，場景也隨之變化；以回家團圓吃年夜飯、到走親訪友云拜年、看煙花賞燈會，實現了場景從年三十到十五的視覺呈現，釋放出情緒共感的疊加效應。引發(fā)用戶“過年”的心理共鳴。

場景設定

場景一：花樣團圓飯。圍繞“三十吃餃子”的年俗為主要點切入，通過具象的關鍵詞構思場景，結合品牌符號，融入中國風建筑表達“家”，并將餃子、房子、人的比例重構，增加畫面沖擊力，在配色上摒棄大面積的紅黃配色，加入蔻梢綠和淡曙紅作為輔色，為整體添加了一絲春天的氣息。

場景二：神評云拜年，發(fā)評送好禮。圍繞“云拜年”的年俗為主要點切入，過年的時候拜年是人們辭舊迎新、互相表達祝愿的一種方式。創(chuàng)意表達上，除了沿襲以往“登門”的拜年方式外，在畫面表現上加入代表新興禮儀“云拜年”的概念，讓視覺吸引眼球，同時又很接地氣。

場景三：猜燈謎送吉祥。以元宵賞燈會的年俗為切入點，夜色旖旎，花燈璀璨，在一片流光溢彩之下，鬧元宵、賞花燈、迎新春。"玉兔東升、鯤鵬萬里”，用最美好的祝福為用戶開啟新年新篇章。

人文互動-內容聯想 強化產品特點

我們?yōu)槭裁匆研〗M內容關聯到人文上？我們需要給產品定義一個標簽，讓內容進入一個優(yōu)勢的心智賽道，用設計手段具像化演繹出來，讓目標用戶最快對號入座，提升產品的認知效率。而人文包羅萬象，與小組內容分類不謀而合。

內容聯想

在視覺表現上，圍繞“小組發(fā)布內容”的類比聯想，場景選取攝影、養(yǎng)花、命理、詩詞、鄉(xiāng)村等七大不同人文場景，著力刻畫“小組內容”強關聯的人文元素，以此映射產品的特點，激發(fā)用戶參與意愿。借助想象放大或夸張內容特征，更鮮明的強調內容本質。

3、豐富體驗

為了維護用戶粘性，讓用戶每天都來“玩”。加入2級活動，用“獎勵”“成就”“抽簽”形成驅動用戶雷達地圖，多維度持續(xù)牽引，增強互動體驗。

如何讓用戶玩下去？

【抽簽活動-新年福氣簽】
活動玩法：用戶每天進入活動可抽福氣簽，隨機發(fā)放簽文以及紅包獎勵，中獎+祝福的滿足感驅動用戶回流。

洞察&創(chuàng)意

新的一年，人們對美好生活都有向往和期盼，“討彩頭”是每位用戶對生活的新追求。在活動的設計上要吉祥滿滿，自帶好彩頭。用福袋作為容器承載簽文，以抽幸運球、得獎勵贏福氣作為情感驅動，刺激用戶玩下去。

在簽文設定上用團扇的品牌符號作為基礎形狀，加持“祥云”“吉祥話”讓活動不止驚喜，更是平臺對用戶的祝愿。

如何讓用戶“回來”玩？

【激勵玩法-我的成就】

洞察&創(chuàng)意

在成就玩法中，勛章作為精神激勵直接授予用戶，提升用戶在活動內的成就感和價值。另一方面，勛章也作為主活動物質激勵的間接載體，用戶通過解鎖勛章來獲得終極大獎。從設計角度，采用三維立體視覺風格，結合IP形象，使勛章更年輕有趣，讓用戶形成記憶點。強化視覺沖擊，滿足用戶的成就感和榮譽感，刺激用戶回流和分享。

驚喜彩蛋，拉升互動體驗

除了視效的打磨外，營造“驚喜感”是在體驗中非常重要的一環(huán)。無論是抽獎還是成就，除了在視覺上有抽獎的儀式感。在活動中增加互動彩蛋，用戶在投票以及點贊后會有對應的動效，讓整體體驗更加細膩。

精彩視頻，點擊可看

結語

總結一下本篇文章關于內容場景化營銷的設計要點：

心智占領：前置化思考品牌打法，從品牌符號、Slogan、色彩基因、字體設計到IP的設定，全鏈路反復強調品牌。

設計創(chuàng)意：用故事性、場景化演繹設計創(chuàng)意，差異化視覺呈現。

互動體驗：用“驚喜感”拉升互動體驗。

希望以上的設計思考，可以給大家一些啟發(fā)。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

2022年新建裝扮中心整合各類裝扮的分發(fā)入口。搭建皮膚商城、主頁背景商城、頭像商城、掛件商城4大裝扮基建；高效擴充皮膚、掛件、個人主頁封面和頭像等個性化裝扮資產，受到年輕用戶的喜愛，佩戴裝扮用戶迅速增長數以百萬計。

0-1搭建拓裝扮資產規(guī)模的經驗，今日與大家分享。

一 整合升級四大裝扮基建，搭建系統(tǒng)裝扮能力

拓新裝扮場景，提升裝扮曝光：百度APP個性化裝扮場景已覆蓋首頁皮膚、個人中心皮膚、個人主頁封面、個性化掛件和頭像。

我們將百度APP原有的裝扮能力整合升級，新建“裝扮中心”統(tǒng)一分發(fā)，并在個人中心增加了一級入口，為更多的裝扮形式與玩法創(chuàng)造更多可能。通過裝扮中心、皮膚商城、個人主頁背景商城、掛件商城、頭像商城“四大裝扮基建”支撐百度APP個性化裝扮的分發(fā)和佩戴操作。

提供易用的裝扮佩戴體驗，增強裝扮展現的吸引力，是裝扮基建方向的設計目標。

1. 易用性

我們在全場景提供實時預覽能力，裝扮預覽所見即所得；按裝扮類型統(tǒng)一界面布局，降低理解成本。

2. 增強裝扮吸引力

2-1 提升裝扮展現豐富度：

裝扮中心作為裝扮聚合展現核心場景，提供套裝裝扮，界面內融入豐富動效、定義刷新策略持續(xù)推薦新內容，增加對裝扮運營展現能力。

2-2 串聯互通增強可逛性:

各裝扮能力之間串聯互通，通過分發(fā)場景間跳轉進行交叉推薦增強裝扮吸引力。我們從三條路徑上為裝扮拓展了分發(fā)入口。第一條：裝扮功能內的場景，在裝扮商城之間增加相關功能跳轉、在皮膚和套裝的預覽頁底部拓展更多推薦入口。第二條：在用戶的非裝扮使用路徑上拓展入口，如在頭像預覽頁、個人主頁背景預覽頁引導用戶設置頭像和個人主頁背景。第三條：以非常駐的彈窗形式，推薦裝扮活動，吸引用戶體驗裝扮功能。

2-3 豐富裝扮玩法：

a. 限時免費裝扮：精品套裝裝扮包括動態(tài)皮膚、動態(tài)頭像、掛件、個人主頁封面，支持一鍵佩戴四項個性化裝扮，是百度APP的付費裝扮功能。我們探索限時開放給用戶免費使用玩法，效果超預期，收獲了一大波裝扮新用戶。

b. 結合任務活動：將“佩戴裝扮”作為運營任務，幫助用戶獲取任務金幣，也把熱門裝扮作為任務獎勵。

c. 與大型運營活動結合：與世界杯大型運營活動結合，設計度曉曉世界杯16強球隊套裝皮膚，通過限免使用，提升裝扮滲透。

二 持續(xù)擴充皮膚/掛件/個人主頁封面/頭像等個性化裝扮資產

裝扮資產擴規(guī)模，重點考量通過提升設計質量增加裝扮吸引力和快速擴規(guī)模的效能如何提升。

1. 精細化打磨，打造百度APP裝扮套裝

1-1 表現手法-本能層：

深入研究畫面風格，在年輕化現代審美指導下，選擇偏東方的設計風格，如國風、二次元風格等，因為這類風格多用圖形、線條、顏色來處理空間關系，畫面不會過于厚重，既迎合年輕用戶喜好，又不過多打擾APP內容區(qū)域閱讀消費。

舉例：七月中元節(jié)的裝扮設計中，整體配色偏暗、低飽和度的深紫色、偏灰的藍色，可以傳達出靜謐、神秘的氛圍。在色彩構圖中沒有用過多的色彩搭配，使用高明度差來刻畫畫面結構，因為明度反差處于人視覺的最底層。如果能用黑白反差區(qū)分層次，會首選黑白。在周圍環(huán)境色中使用偏灰的藍、紫色，并且與人身上的暖色對比，讓人物更加突出。而在畫面元素的刻畫上增加飄帶、魚尾的流動感，這種帶有東方感的元素，這種留白、平衡構圖和俠氣感，也有很強的東方特征，同時通過厚涂風格中常用的使用飽和度差異、大透視效果營造場景的空間感，增加畫面的細膩程度。

1-2 內容-行為層：

在裝扮具體的內容繪制中融入共情元素，吸引用戶注意。比如結合節(jié)日、大事件推送套裝，并在繪制中增加洛麗塔、國風、JK等年輕用戶感興趣的元素。

1-3 內涵-反思層：

通過積極情緒引導、激發(fā)思考，讓用戶感到心之向往或心生愉悅，可使用神情、動作、裝飾花的花語等多種手段進行情緒暗示。

2 單品擴量，保證各類裝扮的更新頻率

與套裝制作不同，單品的更新需要更加短、頻、快，需要更加直接解決Z世代用戶痛點。

2-1 協助用戶搭建社交符號：

頭像，作為用戶在網絡世界身份的象征，我們從橫向團隊項目中大量引入能代表身份狀態(tài)、游戲愛好等方面的資源，快速補充頭像單品資源庫，我們也根據用戶調研了解到有76%用戶愿意和朋友使用“閨蜜/情侶頭像”，我們在頭像庫中上線情侶頭像，并將完善“頭像分享卡”等功能形成體驗閉環(huán)。

2-2 幫助用戶表達自我：

百度APP頭像掛件和游戲、社交、直播場景中的頭像框不同，并不為了彰顯關系、體現出社交關系中的尊貴感，百度APP用戶更希望借助頭像掛件來表達觀點，為自己的主張、個性貼標簽。

2-3 結合用戶興趣引起關注和共鳴：

在羅盤大數據中，我們發(fā)現，王者榮耀、和平精英、元神等游戲中，25歲以下年輕用戶的占比都非常大，并且都愿意花錢購買皮膚裝扮。二次元的游戲、動漫內容不僅僅受Z世代喜愛，且Z世代的滲透率最為突出。各大手游設計中也在不斷的融入二次元元素，我們借力百度AI畫圖技術-文心大模型快速補充了二次元、游戲等風格方向的裝扮。

三 建立規(guī)范平臺，提物料輸出效率

為了展現更好的效果、適配更多的裝扮場景，且兼顧歷史與開發(fā)成本等原因，裝扮物料規(guī)則復雜，且種類繁多?！栋俣華PP裝扮體系設計規(guī)范平臺》應運而生，它涵蓋 5 項裝扮能力、2項運營能力；每項能力均配有一鍵預覽及導出物料模板。隨功能迭代及時更新，保障了裝扮物料的高效輸出。

結語

目前百度APP裝扮已經完成了第一階段的建設，沉淀出一批受用戶喜歡的裝扮資產，未來我們也將不斷探索、創(chuàng)新更多裝扮玩法，未來也將探索出共創(chuàng)平臺，成為一個裝扮生態(tài)。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

通過前面兩篇的拆解，小鵝通的后臺功能內容已經拆解過半，接下來我們來看看「數據統(tǒng)計」和「用戶運營」這兩個部分的內容，它對商家的運營來說，真是如虎添翼，讓我真正感受到一款SaaS產品對商家的運營價值。

5. 數據統(tǒng)計

當我的店鋪開始運營起來以后，我最關心的就是店鋪的數據統(tǒng)計分析了，因為我需要了解每天有多少新用戶來訪問，又成交了多少個訂單，其次我還需要精準的數據分析來為我的運營提供支持。
5.1 概況
「概況」其實是小鵝通的后臺默認首頁，通過這個頁面，商家可以第一時間查看整個店鋪經營的狀況。

5.1.1 實時概況
「實時概況」提供店鋪的每日最新的實時數據，在這個欄目可以看到今日店鋪訪客數、今日新增用戶數、今日支付金額、今日訂單數、待付款訂單、待發(fā)貨訂單等數據。這對運營者來說，打開后臺就能第一時間查收到店鋪當日的實時數據。

5.1.2 最近內容
「最近內容」展示店鋪最近更新內容的數據，比如瀏覽量、訂閱量和學習人數。不過這個欄目的設計讓我陷入焦慮，我不太明白這個欄目內容排序是按照商家最近更新的商品排列，還是按最新有訂閱和學習人數的商品排列，官方也沒有給出詳細的說明。

5.1.3 平臺動態(tài)
在這個版塊，商家可以獲取小鵝通最新的平臺動態(tài)、資訊、新功能預告和熱門話題。在小鵝通的知識生態(tài)池里，店鋪不是一座座孤島，而是可以通過小鵝通的鏈接，可以一起學習交流知識付費的獲客、激活、變現、推廣的方法。這也是一個SaaS軟件最大的魅力，用科技設計工具，用工具幫助企業(yè)成功。

5.2 交易
「交易」匯總了商家知識店鋪的所有訂單交易，在這個版塊，商家可以查詢整個店鋪的交易數據，其次還提供了訂單工具、售后管理和資產管理的功能。
5.2.1 訂單管理
5.2.1.1 全部訂單
①「全部訂單」主要為商家提供店鋪產生的訂單的查詢統(tǒng)計，這個欄目主要包含兩個內容，頭部是檢索（包含了交易單號、訂單時間、商品類型、核銷狀態(tài)、支付方式等多種檢索條件），底部是訂單列表（包含待付款、待成交、待發(fā)貨、已發(fā)貨、已完成、已關閉、售后中和待核銷8個狀態(tài)）。

②「訂單詳情」包含訂單信息、支付信息、買家信息、發(fā)票信息和商品信息，可以查詢訂單號、訂單類型、下單時間、支付時間、支付方式、渠道來源、買家信息等數據?？梢钥闯?，功能越多，訂單詳情的字段就越復雜。

迭代建議
訂單的檢索框占據了屏幕的一大半，雖然設計了「收起」功能，但卻不是默認，這影響了商家的操作體驗。其次訂單列表的設計排版略顯混亂，字段太多，訂單與訂單之間的層級沒拉開，有視覺干擾。
5.2.1.2 評價管理
「評價管理」主要為商家提供用戶評價的查詢和管理，當用戶購買商品發(fā)表評論以后，商家可以在這個欄目進行審核、回復、刪除以及設為精選。

5.2.2 物流管理
「物流管理」主要針對實物商品，包含「批量發(fā)貨」和「配送管理」兩個欄目。在配送管理，可以設置商家的運費模版、到店自提信息和發(fā)貨地址等信息，商家可結合自己的實際情況進行操作。

5.2.3 訂單工具
5.2.3.1 核銷工具
「核銷工具」可以查詢到店自提、服務類商品的核銷碼，還可以查詢店鋪的核銷記錄。

5.2.3.2 電子合同
「電子合同」是一個第三方工具，由「法大大」提供。它可以幫助商家解決高價知識商品學員不敢下單，紙質合同效率低、成本高等痛點，通過在線合同簽約，快速完成簽約，降低客戶流失率。（這個功能需要開通旗艦版，并進行企業(yè)認證才能試用）
5.2.4 售后管理
「售后管理」包含「售后維權」和「批量退款」，主要為商家提供用戶退款申請的查詢和管理。

5.2.5 資產管理
5.2.5.1 支付設置
「支付設置」包含收款設置和付款設置，商家可以選擇綁定自己的微信支付、支付寶和抖音小程序的支付賬戶，綁定后，店鋪才能正常收款。

5.2.5.2 賬戶管理
「賬戶管理」為商家提供對收款賬戶管理、更改和查詢的功能，如果商家需要更改收款賬戶，從這個欄目就能進行操作。

5.2.5.3 交易管理
「交易管理」可查看商家店鋪的所有訂單交易明細，包括待結算、交易成功、交易關閉和退款的交易記錄，在「交易賬單」，還可以按月、按季度查看匯總。

5.2.5.4 分賬管理
「分賬管理」包含「線上分賬」和「線下付款」兩個欄目。在「線上分賬」可以查詢到店鋪商品通過推廣分銷的分賬記錄；「線下付款」包含應付賬單、提現申請和付款記錄三個內容，這個欄目主要處理分銷商的提現申請。

5.2.5.5 提現管理
商家開通知識店鋪以后，用戶支付的費用是支付到小鵝通官方，商家需要在這個版塊發(fā)起提現申請才能到賬。小鵝通也支持用戶自動提現到賬功能，商家開通后，賬戶余額自動打款到商家賬戶。

5.2.5.6 體驗小結
「資產管理」這個版塊，對于新手商家來說，學習成本太高了，特別是分賬管理和提現管理這兩個功能，就像是一場體驗災難。我找了系統(tǒng)客服才弄清楚「分賬管理」的「提現申請」是針對C端的傭金提現申請（在訂貨商-業(yè)績管理欄目，并沒有提現申請審核功能，所以我一度認為這是訂貨商的提現申請管理），這花費了我的很多時間。其次我也沒弄懂「提現管理」這個功能，我一直以為店鋪交易的金額都是自動進入我的賬戶，后面才發(fā)現需要在這個欄目像平臺發(fā)起申請才能收到費用，這個版塊的功能語義給新手商家造成了太高的學習成本。
5.3 數據
數據是支撐商家運營最重要的指標，通過對店鋪及用戶的數據分析，可以為商家提供準確的運營策略參考。
5.3.1 數據概況
「數據概況」包含實時概況、核心指標、流量看板、轉化看板、商品看板和用戶看板7個內容，是對整個店鋪數據的實時監(jiān)控和概覽，包括監(jiān)控訪問和訂單等核心指標的當天實時情況和近期趨勢，并通過流量、轉化、商品、用戶，四個看板的核心指標反映店鋪昨日運營狀況。

5.3.2 流量分析
「流量分析」包含了「流量趨勢」和「流量分布」，提供了每日訪客數、訪問量等流量指標及其趨勢，并支持查看流量的終端系統(tǒng)、渠道和地域分布情況。這個功能可以幫助商家監(jiān)控店鋪每天的訪問規(guī)模及變化情況，通過流量的終端系統(tǒng)、渠道、地域分布了解流量的主要來源。

5.3.3 交易分析
「交易分析」包含「交易概況」和「交易構成」，提供了與店鋪交易相關的訪問、下單、支付轉化及各個環(huán)節(jié)的轉化率，并支持查看新老付費用戶的占比構成、訂單金額的分布情況等。這個功能可以幫助商家分析訪客從進入店鋪到最終成交各步驟的轉化率，定位用戶轉化路徑中的主要流失環(huán)節(jié)，并對比交易核心指標的趨勢，評估運營措施是否有效。

5.3.4 商品分析
「商品分析」包含了「商品概況」和「商品效果」，這個欄目統(tǒng)計了店鋪的所有商品銷售數據，根據商品的訪客和支付進行排行，為商家提供一個全面的商品數據概覽。其次還支持對商品進行「單品分析」，從銷售、流量和客群三個角度全面統(tǒng)計，為商家精細化運營提供策略建議、數據依據。

5.3.5 直播分析
5.3.5.1 全店概況
「全店概況」可以查看商家所有的直播數據，包括近期直播、直播趨勢，系統(tǒng)還根據流量、觀看人數和市場為商家生成紅榜（人數多、人氣火爆）和黑榜（流量和關注人數低），幫助商家找到直播效果優(yōu)秀與表現欠佳的直播。

5.3.5.2 直播效果
「直播效果」是針對每一場直播的詳細的數據統(tǒng)計，比如直播間瀏覽量、訪客數、最高在線人數等，其次還有兩個非常強大的功能——實時大屏和單場分析。

5.3.5.3 實時大屏
「實時大屏」就是系統(tǒng)可以根據直播間的數據實時生成數據可視化大屏，實時展示直播人氣、觀眾、帶貨等數據，滿足多場景數據展示需求，提升直播效率，這個功能可以應用到大促活動、品牌宣傳等場景（此功能僅支持旗艦版使用）。
5.3.5.4 單場分析
「單場分析」包含數據概覽、實時趨勢、觀眾畫像、評論分析和帶貨分析，通過實時數據、用戶畫像、評論詞云分析、帶貨分析等分析能力，對單場直播進行深度診斷，幫助提升直播效率。這個功能對于商家對單場直播的復盤總結有非常大的幫助（此功能僅支持旗艦版使用）。
5.3.6 用戶分析
「用戶分析」包含用戶概況及趨勢和付費用戶，幫助商家了解店鋪用戶的增長、活躍及轉化情況，及時調整用戶運營策略。

5.3.7 學習分析
「學習分析」包含學習概況及趨勢、學習詳情和學員排行三個內容，幫助商家了解學員學習的真實數據，比如學習人數、課程完課率、學習時段分布，從而為課程內容的優(yōu)化提供數據參考。

5.3.8 下載中心
「下載中心」主要是幫助商家管理臺文件導出的統(tǒng)一管理和成功率監(jiān)控，實現下載的文件可追溯、下載記錄可查詢，同時優(yōu)化查詢和搜索體驗，實現下載管理的權限控制，避免重要數據外泄。

設計思考
最初我對這個功能不理解，感覺很雞肋。不過查看了官方的「幫助文檔」以后，我才發(fā)現這個功能為商家的運營安全性考慮得很周到。這讓我聯想到銀行的企業(yè)對公系統(tǒng)也有類似的「下載中心」，當用戶申請電子回單后，用戶需要跳轉到下載中心才能下載。這樣的路徑跳轉看上去繁瑣，但事實上是為了實現下載的文件可追溯和下載記錄可查詢，避免重要數據泄露。
5.3.9 體驗小結
小鵝通的「數據分析」幾乎覆蓋了商家從引流、激活、變現到留存的所有階段，不僅有對店鋪流量、交易這樣宏觀的數據分析，還有對商品、直播這樣的單品和單場微觀分析，這些精準、全面、真實的店鋪數據，幫助商家可以不斷優(yōu)化調整運營方案，獲取成功。

6. 用戶運營

對用戶的研究和運營是一個知識店鋪的重中之重，只有對用戶有了充足的了解才能知道用戶到底需要什么，從而不斷調整優(yōu)化運營方案。
6.1 用戶
「用戶」這個版塊，主要為商家提供一個清晰直的運營助手，通過這個版塊，可以為我的用戶打標簽、制定運營計劃等，讓我對他們的學習行為數據全面了解。
6.1.1 用戶概況
「用戶概況」是對店鋪用戶的統(tǒng)計概覽，可以查看店鋪實時用戶數據（包含累計用戶、今日新增用戶等），其次還有店鋪重點運營人群的數據統(tǒng)計，比如企微用戶、超級會員等。

6.1.2 用戶管理
6.1.2.1 用戶列表
「用戶列表」包含「全部用戶」和「用戶學習統(tǒng)計」兩個內容。在用戶列表，商家可以查看店鋪用戶的詳細數據，比如用戶來源渠道、賬戶綁定手機號（還有一個最近采集手機號，以防用戶更換手機號碼）、消費次數、消費總額等，其次還可以直接聯系用戶（支持店鋪消息和發(fā)短信）、給用戶貼標簽、增減積分和設置黑名單（禁止評論、購買和訪問）。

6.1.2.1.1 用戶詳情頁
每一個用戶都有詳情頁，「用戶詳情頁」包含了用戶資料、用戶標簽、超級會員權益、用戶資產（包含積分、優(yōu)惠券數量、兌換碼數量等）和行為統(tǒng)計（包含學習數據、課程進度、用戶評論和訂單記錄等）。通過對用戶多維度的數據統(tǒng)計，可以幫助商家對用戶有更全面的了解，從而可以對用戶進行分類，推出更精準的商品服務。

6.1.2.1.2 用戶學習統(tǒng)計
「用戶學習統(tǒng)計」包含匯總數據、課程數據和考試數據。「匯總數據」是「課程數據」和「考試數據」的數據匯總，可以查看用戶的累計學習時長、累計學習天數、提交考試、提交作業(yè)的信息，這個功能可以幫助商家了解用戶真實的學習情況，從而進行課程優(yōu)化調整。

6.1.2.2 標簽管理
「標簽」可以幫助商家快速定位目標用戶，并依據標簽進行定向運營，從而提高運營效率。小鵝通的標簽分為兩種形式，一種是「手動標簽」，輸入關鍵詞就可以自動生成；另一種是「自動標簽」，可以通過設置用戶行為和學習行為的條件，當符合條件的用戶出現時自動生成。
①「用戶行為」是根據用戶在店鋪的消費行為來設置，包含注冊時長、最近訪問商品（可選擇用戶訪問的指定商品）、收藏商品、下單商品、購買商品、消費總額和消費次數7種類型；

②「學習行為」是根據用戶的課程學習行為來設置，包含累計學習時長、打卡次數、完成的課程、加入的打卡、提交的考試、提交的作業(yè)和加入的社群7種類型；

③自動標簽的生效規(guī)則支持滿足任一條件生效和滿足全部條件同時生效，非常靈活。
設計思考
「自動標簽」這個功能的設計實在是太贊了，不僅可以根據「用戶行為」和「學習行為」的14種類型進行設置，還可以根據這些用戶行為進行組合生成不同的標簽。比如你想快速判斷哪些用戶是你的忠誠用戶，你可以建立一個「忠實用戶」的標簽，然后設置「消費總額」超過1000元和「累計學習時長」超過10小時這兩個行為，當用戶滿足這兩個條件以后，系統(tǒng)就會為他自動生成「忠實用戶」的標簽。
6.1.3 用戶運營
6.1.3.1 用戶分群
「用戶分群」和「自動標簽」有點相似，通過設置用戶行為和學習行為，把用戶進行快速分組。這樣的好處是方便商家對不同的用戶人群進行定向運營。
①「新建人群」和「自動標簽」一樣，需要設置用戶行為和學習行為，相比「自動標簽」，「新建人群」的用戶行為更多，包含了15種類型，內容更豐富。
②當「用戶人群」建立以后，商家可以查看人群分析、導出數據以及定向開展運營活動。

6.1.3.2 運營計劃
「運營計劃」是一個以提高商家運營效率和效果為目標的工具，商家可以針對指定的人群發(fā)放權益和活動通知，用高頻的外部觸發(fā)來實現活動目的。官方設計了五種智能運營，對應了五種不同的場景，比如流失客戶召回，主要針對那些在店鋪有過消費但30天未回放過店鋪的用戶。
6.1.3.2.1 新建計劃
①「新建計劃」包含三個內容，在基本信息，商家可以選擇目標人群，然后選擇計劃方式，包含長期計劃（商家可選擇起始時間，系統(tǒng)會在這個時間段內向用戶發(fā)送營銷通知）和定時計劃（在商家設定的時間內進行營銷通知）。
②在「權益禮包」，商家可以選擇運營計劃贈送給用戶的權益，可選擇優(yōu)惠券、超級會員和積分。
③在「通知設置」，商家可選擇向用戶發(fā)送營銷通知的形式，比如發(fā)短信、發(fā)送店鋪信息、企業(yè)微信發(fā)送等。

6.1.3.2.2 智能運營
「智能運營」是小鵝通官方給商家設計的五個場景，分別是興趣轉換（激活7天內未付款訂單）、新客復購（促進成交過1次的客戶在30天內復購）、維系高活躍用戶（對近7天訪問商鋪的用戶進行維護）、流失客戶召回（召回在店鋪有過消費記錄但已經30天未訪問店鋪的用戶）和激勵喜好用戶（對收藏過店鋪商品的用戶進行激勵）。這五個場景，可以極大降低商家的學習成本，一鍵開啟運營計劃。

6.1.3.2.3 數據分析
在運營計劃開啟后，商家可以通過「數據」查看計劃的詳細數據。從覆蓋人到付款人數，通過轉化漏斗，多維度向商家統(tǒng)計出各步驟的轉化率，幫助商家可以靈活調整計劃，實現運營目標。

6.1.3.3 超級會員
「超級會員」可以簡單理解為店鋪的VIP會員，商家可以建立不同的會員規(guī)格，以商品的形式進行售賣，比如季度會員、半年會員和年費會員等。這個功能不僅是商家的用戶運營利器，還可以提高忠實用戶客戶量、留存率和活躍度。
6.1.3.3.1 添加會員卡
會員卡的添加包含基本信息、會員權益、展示設置和會員說明四個部分。通過可視化的設計，用戶可以實時預覽「超級會員」的頁面效果，體驗非常好。
①在「基本信息」，可以設置會員卡的規(guī)格，比如1個月、3個月、6個月的有效期，還可以限定用戶購買的次數；
②在「會員權益」，可以設置會員卡的折扣權益（支持指定特定商品）、免費權益（支持對圖文、音頻等欄目統(tǒng)一設置）以及和優(yōu)惠券、優(yōu)惠碼進行權益疊加；
③在「展示設置」，可設置會員卡的界面風格，支持自定義上傳，還可以加入權益商品的展示。

細節(jié)偵查
小鵝通這個產品，幾乎所有核心頁面都支持商家自定義配置，幾乎是傻瓜式的操作，雖然犧牲了一些個性化的設計，但極大降低商家的運營成本。
6.1.3.3.2 會員卡詳情頁
會員卡建立以后，可以從會員卡列表進入會員卡詳情頁?！笗T卡詳情頁」包含了會員列表、數據分析和運營設置三個內容。
①在「會員列表」，可以查看購買超級會員的用戶詳細信息，可以給用戶貼標簽、延長有效期等；
②在「數據分析」，可查看超級會員詳細的用戶數據，比如累計會員數、新增會員數、用戶轉化漏斗、會員地域分布等數據，通過多維度的數據分析幫助商家提升運營效率；
③在「運營設置」，可以對用戶的信息進行采集（調用店鋪的信息采集微頁面）、CRM分配和私域引流的設置，幫助商家獲取新用戶的信息，拉新轉化。

6.1.3.3.3 全局設置
「全局設置」是為商家提供對「超級會員」統(tǒng)一設置的功能，，比如是否支持換購其他會員卡、是否支持用戶分享獲益等。

設計思考
「超級會員」是一個非常好的營銷工具，它可以滿足商家按月、按年的收費場景，相較于單個課程一次性的買賣，「超級會員」更適合打造高質量內容知識店鋪，也能幫助商家拓展一批忠實付費會員。
6.1.3.4 積分商城
「積分商城」是一個非常基礎的營銷功能，作為用戶留存的重要手段，小鵝通的「積分商城」以消費、任務兩種積分發(fā)放方式，抵現、兌換兩種消耗方式，構建起了基礎的積分體系，幫助商家維系存量用戶，提高店鋪的用戶留存率。

6.1.3.4.1 積分發(fā)放
①「積分發(fā)放」包含「消費發(fā)放積分」和「任務發(fā)放積分」兩種類型?！赶M發(fā)放積分」是指商家可以設置用戶在店鋪的消費任務獎勵積分，有效刺激用戶消費，這個功能支持商家自定義配置，非常靈活。

②「任務發(fā)放積分」包含基礎任務（綁定手機號、完善個人信息）、學習任務（可設置學習時長等）和助學任務（連續(xù)打卡獎勵等），用戶完成對應任務后可獲取積分，有效提高用戶留存率和活躍度。美中不足的是，這個功能不支持自定義配置，靈活性較低。

6.1.3.4.2 積分消耗
①「積分消耗」包含「積分抵現」和「積分兌換」兩個功能。「積分抵現」是指用戶在購買指定商品時候，商家可以自行設定積分抵扣的比例，從而刺激用戶消費。
②「積分兌換」是指用戶可以通過積分兌換指定的商品，這是一種常見的會員權益。

6.1.3.4.3 用戶列表
「用戶列表」主要提供查詢店鋪用戶使用積分的情況，比如給用戶增減積分、查詢積分明細等等。

6.1.3.4.4 通用規(guī)則
「通用規(guī)則」為運營者提供積分規(guī)則的設置，比如積分有效期、積分凍結期，其次還支持手動設置積分規(guī)則的頁面內容。

6.1.3.4 信息采集
「信息采集」是一個非常靈活的用戶信息采集工具，通過自定義配置（包括手機號、微信號、姓名、聯系方式等字段），可以幫助商家在店鋪的運營中有效搜集用戶的資料，清晰刻畫用戶畫像，搭建思域流量池。其次「信息采集」作為一個公共組件，關聯了很多使用場景，比如超級會員、拼團等，它就像一個微頁面一樣，商家可在指定功能版塊進行靈活配置。
6.1.3.4.1 新建流程
①「信息采集」包含三個步驟，第一步是「編輯表單」。商家可根據自己的需要拖曳左側的組件庫（包含聯系人組件和基礎組件兩個分類，比如姓名、年齡、公司、證件號、電話號碼、生日、行業(yè)等）。
②第二步是「采集設置」，可以填寫采集表的引導信息（包含標題和提示文字），可以開啟重復采集（若信息關聯多個場景，支持用戶單獨填寫，商家無需重復建立）和獨立采集。
③第三步是「選擇采集場景」，包含指定商品購買、優(yōu)惠券領取、活動打卡等，這一步非必選項，商家可結合店鋪運營實際操作。

迭代建議
「信息采集」這個采集工具真的非常方便，可以幫助商家高效地搜集精準用戶信息，從而提升運營效率。不過「信息采集」的用戶數據只支持導出到本地，而不像其他欄目有詳情頁和數據分析，這降低了信息采集的效率，效果大打折扣。
6.1.4 消息互動
「消息互動」是指商家可以為用戶發(fā)送消息通知，用戶也可以通過這個功能向商家提供反饋。「消息互動」包括「消息列表」、「用戶反饋」以及「評論管理」三個模塊，通過這個功能，可以讓商家統(tǒng)一管理與操作店鋪消息，及時掌握學員的最新情況，通過反饋及時調整產品策略。

迭代建議
在新建「消息推送」的模塊，“發(fā)送人”的語義不夠準確，這會讓商家對這個字段搞混淆，不知道這個表格填入什么信息。其次也缺少了推送給指定用戶組，不夠完善。
6.1.5 體驗小結
作為一個知識付費的從業(yè)者，在體驗完「用戶」這個版塊以后，幾乎放棄了傳統(tǒng)模式定制開發(fā)的念頭?！缸詣訕撕灐沟脑O計，讓我大開眼見，原來小鵝通的系統(tǒng)可以根據用戶的行為來生成標簽，這可以讓你快速知道哪些用戶才是愿意為你的知識付費的重視人群?！高\營計劃」這個功能設計得太好了，官方不僅提供了五個常見的運營場景幫助商家提升運營效率，而且傻瓜式的權益配置極大降低了商家的學習成本。「超級會員」更是完善了知識付費的其他場景，比如按月收費、年費會員等。
6.2 圈子
「圈子」就像一個知識星球（一款社群工具），主要為商家提供一個老師和學員進行日常活動交流和高質量內容沉淀的社區(qū)工具?！溉ψ印沟墓δ芊浅ＸS富，支持設置群主、成員管理、發(fā)布及精選圖文動態(tài)、置頂群公告等功能，其次還支持在圈子內添加學習任務，滿足訓練營場景，學員可直接在圈子內學習課程、交流與互動，最終幫助商家打造一個高品質的學習型社群，提高學員的忠誠度和留存率。

6.2.1 創(chuàng)建圈子
「圈子」的創(chuàng)建比較簡單，填入基本信息以后，需要在「售賣設置」選擇入圈方式，支持免費、付費模型，還可以關聯專欄、超級會員和設置入圈截止時間，「圈子」就創(chuàng)建成功。

6.2.2 圈子詳情頁
「圈子」創(chuàng)建成功以后，在列表頁可以對「圈子」進行管理操作，包括管理、編輯、分享、刪除和轉讓圈主等功能。

6.2.2.1 內容管理
「內容管理」是針對圈子發(fā)布內容的管理，包含動態(tài)列表、待回答和圈子標簽三個欄目。管理員在這個頁面發(fā)布圈子動態(tài)，對圈子發(fā)布的動態(tài)進行審核、編輯、刪除和加精。

6.2.2.2 售賣設置
「售賣設置」是指對圈子的加入方式進行編輯，支持付費和免費兩種模式，但付費方式僅支持從“免費”改成“付費”，其他功能和「圈子」新建無區(qū)別。

6.2.2.3 應用管理
「應用管理」包含三種應用類型，課程、日歷打卡和商品櫥窗。這三個應用其實對應「圈子」前端的一級欄目，添加以后學員在圈子首頁就能訪問，幫助商家提升付費轉化和用戶活躍度。

6.2.2.4 運營設置
「運營設置」包含信息采集、CRM分配、續(xù)費通知、私域引流和圈子展示五個欄目，主要幫助商家結合其他營銷工具提升用戶的運營效率，比如可以開通「信息采集」工具，高效精準搜集用戶的信息，還有CRM線索分配，可以把潛在用戶分配給其他員工。

6.2.2.5 激勵設置
「激勵設置」為商家提供了「成長任務」和「勛章」兩個營銷工具。在「成長任務」，商家可以針對用戶的互動、課程學習以及打卡設計排行榜，比如發(fā)帖數、評論數、分享等；商家開啟「勛章」以后，可以建立「圈子」的勛章體系，不僅可以對活躍用戶進行獎勵，還能有效刺激用戶參與度，最終提升用戶的活躍度。

6.2.2.6 成員管理
「成員管理」是對加入圈子用戶的統(tǒng)一管理，可以查看用戶的詳情頁，了解用戶的詳細信息和活躍度；可以給用戶貼標簽，鎖定精準用戶；還可以給用戶延長有效期、加入黑名單和移除圈子。

6.2.2.7 數據分析
「數據分析」包括交易數據、活躍數據、學習數據和打卡數據這四個維度，在這個欄目可以查看到圈子所有的數據信息，比如累計支付金額、今日加入成員、課程學習完成率、任務完成率等，有效幫助商家提升圈子的運營效率，及時調整運營方案。

6.2.3 體驗小結
如同前面的比喻，「圈子」就像一個知識星球，為商家提供了一個功能強大的社群工具，幫助商家打造一個高品質的學習型社群。和「知識星球」相比，「圈子」更能幫助商家提升付費轉化率，比如商家可以通過「應用管理」就可以添加商品和課程，從而提升付費商品的曝光度。再加上CRM分配、私域引流等工具，「圈子」可以通過用戶的日常行為數據幫助商家獲取用戶的付費意愿、偏好和消費能力，提升店鋪的業(yè)績。

感謝閱讀，小鵝通產品拆解的第三部分就到這里，下一篇是小鵝通后臺拆解的最后一篇，我們將會拆解企微CRM這個核心功能以及對小鵝通的后臺設計進行總結。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

01、前言

莫奈是一款主要服務京東內部用戶的數據可視化平臺，它以容器的形式將京東城市各種與智慧城市建設及運營相關的能力聚合，并以可視化的形式面向客戶呈現。

作為京東莫奈的設計負責人，過去三年一直負責莫奈可視化平臺的用戶體驗設計工作，由于本人日常設計主要以智慧城市、數據可視化大屏為主，所以我即是莫奈的設計負責人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗相關的問題，這些問題，部分在產品日常迭代中得到了優(yōu)化，但是也有相當一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗設計師，我日常與業(yè)務方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側收集了不少使用體驗相關的問題。我對以上兩個渠道的問題整體梳理匯總，并與產品側討論溝通后，大家認為這些問題比較嚴重的影響了用戶使用莫奈的效率，降低了莫奈對業(yè)務側賦能的質量，提高了客戶使用莫奈的成本。所以我們必須規(guī)劃出一個產品迭代的周期，針對莫奈體驗問題，進行一次密集的優(yōu)化和革新，這便是本次莫奈體驗升級改版的基礎背景和原因。

本篇文章寫作的主要目的，是想將本人在這次改版設計中用到的一些方法、流程和經驗與大家做次交流和分享，希望能為同行在類似的改版設計中提供一定的借鑒和參考。

02、體驗升級流程

實際上，在梳理出整個體驗升級流程之前，通過與產品負責人的多次溝通，我們事實上已經對體驗升級這個需求達成了共識，而流程圖解決的是做什么、怎么做的問題。

下圖展示的這套體驗升級流程較為通用，大多數產品的體驗升級都可參考下面的流程執(zhí)行。

這套流程的主要作用有兩個，一是通過它可以更直觀的跟產品負責人、開發(fā)負責人等關鍵角色溝通，讓大家對體驗升級這件事兒有整體且全面的了解，方便大家評估工時、預估成本和安排排期；另一方面也能夠使我自己的工作推進的更加有節(jié)奏有條理，避免工作內容長時間停滯在某一個環(huán)節(jié)而影響整體進度。

03、改版背景及產品簡介

基于STAR法則，背景概況部分向大家介紹莫奈體驗升級的必要性。在企業(yè)中，想要推動一個需求順利執(zhí)行，那一定是需求上下游以及相關方的利益都得到了體現和滿足。莫奈此次升級，從體驗設計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責任將用戶的聲音轉化為需求，并推進落地為產品的一部分；從產品團隊來講，莫奈想要不斷發(fā)展，持續(xù)為客戶和業(yè)務方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產品架構做一次深度的革新和優(yōu)化；從前端工程師、研發(fā)同學的角度看，以往不合理的底層代碼設計，使產品在性能、穩(wěn)定性等方面留有大量隱患，因此在日常迭代工作之外，研發(fā)同學總要消耗部分精力去維護那部分不穩(wěn)定的存在，從而導致研發(fā)同學人效比低、開發(fā)體驗差；從上級Leader來看，公司的核心經營理念是“成本、效率、體驗”，但成本的降低、效率的提升、體驗的優(yōu)化都依賴于強悍的技術和優(yōu)秀的產品，而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗升級于多方有益，符合部門整體利益，所以大家很快達成共識。

04、莫奈典型用戶場景梳理

通常我們說用戶體驗時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進一步細分為多種角色，理想情況是每一類角色的體驗都被滿足，但現實執(zhí)行中我們必須要有策略和取舍。所以要想產品有好的體驗，首先我們要知道用戶群體中不同角色對產品的使用情況如何，并找到對產品依賴度強使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優(yōu)先級的優(yōu)化。

從莫奈典型用戶使用場景可以歸納出：

首先，莫奈的主要使用者為各個項目的產品經理及開發(fā)工程師，其中設計師也有相當大的使用強度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數據可視化場景構建相關需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產出的作品，經由上下游同事傳達和部署給業(yè)務方及客戶后，莫奈的商業(yè)價值便得以體現。

其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發(fā)現，莫奈的使用具有上下游的關聯性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因為更接近客戶和業(yè)務，往往具有比核心用戶更高的決策權。因此我們優(yōu)先讓核心用戶體驗提升并不意味著放棄上游的體驗，而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色，通過核心用戶使用莫奈交付的結果來證明莫奈的可靠。與此同時，我們也通過對內外的宣講和培訓，持續(xù)接收上游用戶的反饋，并在迭代中持續(xù)優(yōu)化。

05、體驗痛點分析-用戶調研

知道了核心用戶是誰，那么核心用戶的體驗痛點是什么呢？

雖然在日常的交流溝通中我們已經獲取了不少用戶反饋、收集了相當的問題建議，但作為體驗升級的系統(tǒng)性工作，為了更全面的了解用戶體驗痛點，我們還是設計了一次完整的用戶調研活動。本次調研主要采用線上問卷調研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統(tǒng)，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內容，因此，問卷調研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統(tǒng)中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內外部用戶，以期獲得更加客觀真實的反饋。

用戶調研的核心目標是充分收集用戶反饋，并將反饋結果量化及系統(tǒng)化，量化后的結果可做為設計側推動產品執(zhí)行體驗優(yōu)化的關鍵依據，也可以作為后續(xù)驗證優(yōu)化結果的對照項。

06、體驗痛點分析-問卷設計

本次問卷設計我們參考了PSSUQ整體可用性量表，并結合本次調研目標做了部分調整。

PSSUQ整體可用性量表可以從系統(tǒng)易用性、信息質量、界面質量三個方面將體驗結果量化，然后通過與行業(yè)基本經驗值比較，既可以知道用戶對莫奈在以上三項的滿意度，也可對莫奈當前整體體驗結果有一個全局的概況性評價。同時根據三個方向的評分也可以更細致的指導后續(xù)的設計優(yōu)化方向，為設計決策提供更多科學可信的依據。

PSSUQ整體可用性量表作為一個通用模版，其內容比較固定，為避免多次打擾用戶，提升問卷調研效率，我在PSSUQ的基礎上添加了少量關鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內容更加符合本次調研目標。

07、體驗痛點分析-問卷調研

問卷設計好之后，接下來就是問卷發(fā)放以及結果分析了。

PSSUQ量表內每個問題均有8個選項，【1-7】是對該項描述的認可程度，得分越低代表用戶對該項描述越認可；【NA】代表用戶對該項描述無法評價。本次調研通過京東良研發(fā)放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數量：20），說明問卷結果具有較好的可信度，其結果值得進一步研究。

通過整理和統(tǒng)計問卷數據，可以得出以下結論：

1、內外部用戶在系統(tǒng)易用性、信息質量、界面質量三個維度對莫奈均不滿意

2、對比行業(yè)經驗值（均值），莫奈系統(tǒng)總體體驗質量與行業(yè)同類產品存在明顯差距

3、莫奈用戶群體整體積極性較高，具有較強的溝通及反饋意愿

整體評分結果與日常同相關同學的溝通結果一致，以上評分結果也反映出此次體驗升級的緊迫性，作為由設計驅動的改版設計，設計側面臨較大壓力。

08、體驗痛點分析-親和圖

在設計問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎上針對本次調研目標做了部分調整和優(yōu)化，而線上問卷最后兩個選項以問答題的形式向被調研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋做整理，親和圖顧名思義，它可以使具有類似特征和關聯屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規(guī)律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。

如下圖所示，產品的反應速度及穩(wěn)定性、模板和組件豐富度是用戶反饋問題最集中的兩項，前者影響用戶最基礎的使用體驗，后者決定產品能多大程度上便捷的服務用戶。良好的穩(wěn)定性和反應速度可以讓用戶專注于任務本身，而使用模板能最快速的產出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復雜場景下的業(yè)務需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點，首先，對于那些能夠在當前產品日常迭代中優(yōu)化的點，我整理后會以需求的方式向產品團隊提出，并在日常迭代中逐步優(yōu)化；然后，對于那些需要“傷筋動骨”做底層優(yōu)化以及長期運營沉淀才能有效改善的問題，我們會進一步向用戶收集和完善相關信息，并將相關問題梳理到本次改版任務中，做系統(tǒng)的解決和處理。

09、體驗痛點分析-線下用戶訪談

在【05、體驗痛點分析-用戶調研部分】已經介紹了本次參與訪談的用戶來源，但在實際執(zhí)行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。

訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場景、頻次、設備等，然后通過給用戶設置一到兩個簡單的任務，觀察用戶在完成任務過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發(fā)工程師：請在畫布中添加一個環(huán)形圖，并使用json為環(huán)形圖添加一組動態(tài)數據....。之后，在用戶完成基礎任務后，我們還會針對用戶關心的問題進行更細致的溝通，了解用戶更細致的反饋。對于用戶反饋的問題，我們整理后會在公司內部的需求及研發(fā)管理系統(tǒng)“行云”中以需求的方式提交給產品團隊并同步添加反饋問題的用戶為該需求的關注者，后續(xù)，當該需求的狀態(tài)有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗收，都能在線跟蹤并閉環(huán)。這樣做既是我們團隊的責任，也可以增進用戶對莫奈的信任，并期望活躍用戶后續(xù)能繼續(xù)為莫奈提供建議和反饋。

10、體驗問題匯總-用戶體驗金子塔

通過線上問卷調研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗5要素模型，將各類問題進一步歸納并按照產品建設的上下游協作關系，把每一個具體的問題匯總給對應的角色，并由對應的角色產出具體的解決方案，然后通過線下會議同步各自方案并對方案進行評審和溝通，由此，關于體驗升級的所有事項及具體任務便可周密安排，之后便是資源投入、推進升級工作具體執(zhí)行。

用戶體驗5要素模型，從產品的戰(zhàn)略層出發(fā)，層層遞進直到表現層，把影響用戶體驗最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解，并能促成大家在更大的層面上達成共識。以往談到用戶體驗，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發(fā)側同學更是如此，他們鮮有意識到產品的目標、內容以及性能等這類的因素，也是構成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續(xù)迭代的產品來說，好的用戶體驗并不能以“畢其功于一役”的方式來實現，而是要通過持續(xù)不斷的改進和優(yōu)化才能持續(xù)滿足并提升用戶體驗，所以借助用戶體驗5要素等模型，我們引導產品及研發(fā)團隊更好的理解用戶體驗，這樣不僅能幫助設計師在本次體驗升級改版工作中與大家高效協作，也非常益于之后日常產品迭代的溝通與協作。

11、體驗問題匯總-體驗升級方向

上一步，我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色，之后各個負責人產出解決方案并與大家評審和溝通，而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結果，體驗升級方向以設計為主導，同時兼顧產品和研發(fā)的部分目標，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質量提升”解決表現層的問題、“信息層級優(yōu)化”解決框架層的問題。體驗升級方向作為對體驗升級結果的導向，將指導后續(xù)設計動作的展開。

12、策略制定-設計目標確定

基于體驗升級方向，接下來就要制定具體的設計策略，來實現體驗升級方向中要達成的結果。設計策略制定第一步先確定設計目標，我們將設計目標拆解為三個方向，每個方向通過兩個關鍵詞定義。設計目標主要分為視角與交互兩個方向，同時兼顧產品側“易拓展、易維護”的需求。實際設計中，視覺與交互并非獨自分開進行，在設計開始的階段，需要先定義設計風格等基礎設計要素，之后視覺便可在此基礎之上全面展開，此時視覺設計要考慮交互的效果，交互設計也需要斟酌設計的展現。

13、設計執(zhí)行-視覺風格定義

對于設計目標中關鍵詞所代表的那些抽象概念，每個人的認知可能都不一樣，但是搜索引擎和大數據推薦的算法，可以告訴我們普通大眾對那些關鍵詞所表現出來的意象是如何認知的，之后我們便可從符合大家普遍認知的視覺素材中，提取出符合關鍵詞所表達出的意象的設計要素，之后通過在設計中應用這些設計要素，就能把關鍵詞定義的抽象的設計概念轉化為具象的認知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。

我們使用搜索引擎以及AI推薦的關聯算法，針對“科技和高效”這兩個視覺目標的關鍵詞收集了海量的音視頻設計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點/要素，就能將體現“科技、高效”這兩個概念的所有設計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設計執(zhí)行的過程中應用這些設計要素，通過合理的搭配和組織，將這些設計要素融入到莫奈新的設計語言，如此，產品最終便可在視覺上呈現出與視覺目標關鍵詞定義的一致的視覺和心理感受。

14、視覺風格定義中的7要素

基于情緒版提煉出的設計要素其實已經足夠具體，但是如何將這些要素應用在設計中，我們還需要進一步歸納。我個人一直以來習慣從形、色、字、質、構、動、音7個維度分析一個設計作品的設計風格，就如同人體是由肌肉、骨骼構成的一樣，以上7個維度也是構成一個設計作品的“經、骨、肉”。所以，我認為對于一個設計作品，尤其是UI設計作品，以上7個維度基本能夠完全概況它的風格，所以當我要為自己的產品做風格設定時，我也是從這7個維度出發(fā)來為每個維度定義具體的風格和策略。

這種細分維度然后定義風格的方式有多種優(yōu)勢，其中最明顯的是它能夠將我們風格定義的設計工作條理化，避免反復嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質感的定義有偏差，不符合情緒版中提取出來的設計要素的特點，這時候我只需要對“質感”這個維度的風格進行優(yōu)化和調整，而不需要推翻整個7要素重新再來。這種設計方式讓我的設計更加理性，也讓后續(xù)設計執(zhí)行的工作更加的有條理和舒適，從設計風格落地的角度來講，這種方式我個人認為是最能夠忠于情緒版所歸納出的設計感受的方法。

15、視覺改版：造形演繹

對于產品界面的造形設計，一方面依照情緒版中提取的設計要素“透視、空間感、異構造形”來考慮，另一方面我也結合莫奈的產品Logo做了適當的抽象和演繹；兩者結合最終確定了當前莫奈的造形設計。

首先，產品左側主導航采用了具有一定透視角度的異形設計；產品頂部標題區(qū)域也采用了相同的設計思路：左側為品牌Logo設計了一個容器，Logo在其中容納放置；Logo右側收起的區(qū)域預留了常用公告、跑馬燈的設計，方便產品把日常重要信息同步給用戶；最右側呈現用戶個人中心、空間管理、使用幫助等菜單項。

對于這種異形的設計，用戶是否能夠接受，在設計開始時我存在一定的疑慮，因此在設計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認為新的設計有創(chuàng)意具有鮮明的特點，也有部分用戶認為透視的設計看著較為怪異，尤其是左側主導航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優(yōu)化了透視的角度，從多個透視數值中選擇了一個即能展示透視的設計效果、又不至于透視過大導致文本圖標等變形嚴重而不易識別的角度，其次，我還配合開發(fā)同學對導航透視文本和圖標的渲染做了一些優(yōu)化，從而使其具有更好的識別性和清晰度。在以上兩項優(yōu)化完成后，新的用戶測試表明大家對該設計的滿意度有很好的提升。

16、視覺改版：色彩搭配

莫奈在改版之前就已經有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關鍵詞，結合情緒版提取的設計要素，將原有品牌色做了細微的調整。首先藍色飽和度增加，綠色調整色相使其偏向藍色的一端并增加亮度。如此，當兩個顏色搭配使用時，藍色作為主色調體現科技、可靠的視覺和心理感受；綠色作為點綴色和強調色，體現活力、高效與創(chuàng)新。藍綠對比強烈，具有很好的場景適應性和品牌特色。

17、視覺改版：字體選取

字體作為UI界面中最常見的元素以及作為信息呈現的主要載體，字體的使用對產品的易用性和視覺表現有著非常重要的影響。結合體驗升級方向中定義的“增強品牌特色”的目標以及情緒版中提取的非襯線的設計要素，對于字體的設計風格，我將其歸納為"定制化、品牌性和非襯線"。

為了實現字體風格的設計目標，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經過多次迭代，目前具有豐富的字重和獨特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現京東的品牌特色并體現出與其它產品差異化的字體設計。京東正黑體主要用于莫奈產品中的數字、拼音、英語、數值符號四個場景，該字體也是京東金融APP的系統(tǒng)數字字體，其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數字字體使用時，其小數點、千分符等也具有很強的特色，具有不錯的辨識度與個性。

而產品中的中文字體Mac與Windows系統(tǒng)有不同的方案。在Windows下，由于系統(tǒng)自帶的微軟雅黑當字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現象，加之該字體很少更新，沒有針對當前高像素密度、高分辨率的屏幕特點做相關的適配優(yōu)化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調研中，有用戶反饋字體模糊不清、識別困難也是上述原因造成，所以Windows系統(tǒng)下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯合開發(fā)的開源字體，其字重豐富、字形簡潔、現代，能夠很好的適應PC與移動端的顯示，也能適應當前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現。除此之外，思源黑體的字形特點與MacOS系統(tǒng)下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。

18、視覺改版：質感表現

質感的呈現主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現科技、輕盈的質感。

19、視覺改版：結構設計

結構設計主要目標是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構建所需的大多數功能，也是莫奈產品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設計雖然也有不錯的設計規(guī)范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設計規(guī)范，大屏編輯器頁面的產品需求總是需要UI產出設計稿研發(fā)才能開發(fā)，且由于沒有系統(tǒng)的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態(tài)；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設計、開發(fā)和維護都具有較高的成本。

新的改版設計，在設計之初就聯合產品對編輯器內的各個模塊所包含的各類組件進行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規(guī)范、使用場景示例等方式解決了如何用的問題。

原子化的組件，精簡了組件的數量，同時每個組件也針對自身功能和用途的特點進行了優(yōu)化，在此過程中也考慮了組件搭配、組合使用的適配和呈現問題。比如，針對顏色選擇組件，我們默認以十六進制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預覽的小色塊，這樣的設計兼顧了開發(fā)與設計同學使用莫奈的場景。對于開發(fā)同學，他們在代碼中習慣使用十六進制色值，而設計師更習慣于RGBA或HSLA的調色模式，因此，雖然十六進制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設計同學確認顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設置的模式以統(tǒng)一的格式呈現。而諸如此類優(yōu)化，在本次體驗升級中不勝枚舉。

20、視覺改版：動效設計

莫奈的動效設計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節(jié)奏感、輕盈”的設計風格，傳遞科技、高效的視覺感受。

在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網頁端實時渲染，具有矢量動畫的特點，能適應多種設備及屏幕分辨率，具有優(yōu)秀的前端呈現效果。

首頁科技感流光氛圍動效

頁面及大屏加載Loading動畫

21、設計執(zhí)行-典型頁面效果

產品登錄頁

產品首頁-我的可視化頁面

我的可視化頁面改版前后對比

大屏模板頁面

可視化場景編輯器頁面

可視化場景編輯器頁面改版前后對比

產品主要ICON設計

22、交互優(yōu)化：圖表屬性配置優(yōu)化

針對視覺層面設計優(yōu)化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優(yōu)化，我們交互優(yōu)化的目標是“簡單、流暢”。

首先進行交互優(yōu)化的是各類圖表的屬性及配置項設置相關的交互優(yōu)化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數據、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現了什么數據、圖表可以與用戶進行那些互動三個維度解決了圖表在數據可視化呈現中最基礎的需求。由于圖表在數據可視化呈現中頻繁使用，所以與圖表配置相關的操作自然也是相當高頻和常用。當前版本下，圖表配置項主要問題有兩個：一個是圖表配置項層級過深，用戶需多次點擊才能對某一內容進行修改；第二是批量對多個圖表的相同屬性進行修改在當前版本不可用，導致用戶圖表配置成本高。針對用戶最關心最影響體驗的兩個交互問題，我的優(yōu)化方案如下。

優(yōu)化圖表配置項層級過深，用戶需要多次點擊才能對某一個內容進行修改的問題

要解決問題，首先要知道問題從何而來。經過深入與產品、研發(fā)同學及部分用戶訪談溝通后，我發(fā)現當前導致圖表配置項層級過深主要有兩個原因，分別是產品規(guī)劃與設計展現。

具體來講，產品層面有三個問題：

01、產品對于當前圖表配置項的結構梳理是以程序的邏輯來呈現，而非以用戶的視角來歸納。舉個栗子，在當前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數據系列>系列名稱>形狀設置>顏色設置。而這一路徑為何如此設計？因為顏色這個屬性的后端代碼就是這樣的結構。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現的內容、名詞其實都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數據系列、其次還要了解形狀設置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進行上述設置時往往需要在樣式一級菜單下點擊多個屬性、反復嘗試確認，才能最終完成顏色修改的設置，這樣一個使用的流程自然會給用戶“層級過深”的感受

02、圖表配置結構存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結構設計是必要的么？答案是并不是！因為只有用戶關注的才是有用的，產品應該提供用戶想要的內容而不是強塞給用戶產品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當的對配置項做些精簡，合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現無關緊要的內容，如此，圖表配置項便能瘦身，用戶使用起來也更輕松。

03、圖表配置項的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產品的效率，另一方面也加深了用戶“層級過深”的感受。

知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯合產品經理，對莫奈已有的60多個各類圖表組件，逐個進行了配置項的梳理，當所有圖表的配置項都以思維導圖的形式呈現時，他們的共同點、同類項便一目了然。此時，之前存在的“圖表配置結構存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點，在上述梳理工作完成后有了一定的優(yōu)化和改善空間，但仍然存在一些不確定的因素影響設計和產品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結論，對此，一方面我們通過為配置項區(qū)域增加數據埋點，分析用戶對各個配置項使用的頻次來為后續(xù)的持續(xù)優(yōu)化提供決策支持，另一方面我們也參考、調研了同類產品中一些用戶量較大、設計質量較高的產品來進行當前有限的優(yōu)化。

配置項層級過深的另一個原因，是屬性配置列表的結構及布局設計存在“深層級、空間利用率底”的特點。

如下圖，左側圖片示意了舊版莫奈的配置列表設計結構?？梢钥吹脚f版設計完全采用樹結構的形式將各項自上而下排列，并且采用每級向右縮進一個字符的形式來做層級的區(qū)分，舊版的設計基準尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進的策略更是導致信息展示困難；其次，樹狀的結構在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標滾輪才能看全信息，綜上，舊的設計策略也給了用戶“層級深”的直觀感受和交互體驗。

新版設計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設計，將提煉后的一級屬性標簽固定在屬性配置列表左側。相較于之前，這樣的設計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側屬性內容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設計采用分隔線與色塊結合的方式來表達屬性列表內的層級關系，去掉逐級縮進后，配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。

優(yōu)化“批量對多個圖表的相同屬性進行修改在當前版本不可用，導致用戶圖表配置成本高”的交互問題

在數據可視化場景搭建過程中，用戶對多個圖表的相同屬性進行統(tǒng)一修改、一次性調整的需求非常迫切和剛需。比如當前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調整為相同的綠色，在用戶的視角下，此時的操作應該是先選中6個想要調整的圖表，然后找到橫軸顏色設置項，之后統(tǒng)一調整色彩。但莫奈當前的版本，如果用戶按照上述流程操作，看到的將是下圖左側的示例：圖表多選之后，對齊、坐標等基礎項仍然可用，而與屬性相關的其它設置并沒有被聚合并呈現，在此情況下，用戶想要完成最初的目標就只能6個圖表逐個依次調整！顯然，這樣的操作并不符合用戶預期，它使用戶的操作效率大大降低。

上述問題是一個體驗相關的問題，同時也是一個強技術相關的問題，我們想要讓多個圖表的同類項聚合顯示，首先要能在底層對各個圖表的配置項有十分清晰的梳理，好在我們解決第一個問題：“配置項層級過深”時，已經完成了對60多個圖表的細致分析，有了這項工作的基礎，當前面臨的問題便不那么棘手。如右側示例：當用戶多選圖表時，圖表的同類項會被聚合，并以用戶視角的理解，將屬性類別進行分類，這樣的分類打破了傳統(tǒng)的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統(tǒng)一的調整和修改，而這樣的操作是符合用戶習慣和預期的。

22、新建大屏交互流程優(yōu)化

新建大屏作為創(chuàng)建數據可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優(yōu)化主要有三個方面：創(chuàng)建流程、模板預覽與模板展示。

創(chuàng)建流程優(yōu)化：首先，舊版的創(chuàng)建流程：新建可視化>選擇模板>大屏命名>創(chuàng)建成功。 這一流程中“大屏命名”是沒有必要的，因為用戶在新建可視化大屏時可能存在多種需求的可能性，也許用戶只是想看看創(chuàng)建完成后內部編輯器是什么樣，或許用戶有實際項目，但當前項目名稱也并未確認，所以在此時添加一個不可跳過的步驟著實讓人不爽，況且大屏創(chuàng)建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進入編輯器開始設計創(chuàng)作才是用戶創(chuàng)建可視化最根本的目標，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。

模板預覽與模板展示優(yōu)化：原有的設計，當用戶點擊創(chuàng)建大屏按鈕后，會在頁面底部拉起一個小的抽屜，抽屜內包含一個空白模板以及有限多個其它內容模板，而在如此狹小的區(qū)域展示這么多內容，不管是從交互效率還是視覺效果上看，都顯得格外的拘謹和難受。新的設計首先是全屏鋪開，盡可能充分的利用頁面空間。

在模板展示及預覽方面，我設計了列表展示與縮略圖分布展示兩種方式，并添加了分類標簽和搜索按鈕，此外還聯合產品增加了模板收藏功能，這樣用戶可以把自己喜歡的、常用的模板收藏，方便之后更快速的使用

模板預覽方面，在兩種布局模式下，用戶鼠標滑過模板縮略圖時，模板均會以較大的視圖動態(tài)呈現模板內容。在列表模式下，模板預覽窗口固定在頁面右側區(qū)域；縮略圖分布的模式下，預覽窗口根據鼠標指針的位置激活。當用戶選中某個模板時，點擊底部創(chuàng)建按鈕即刻進入大屏編輯器界面，此時用戶便可基于模板內容進一步完成自己的定制化設計。

23、全局搜索交互優(yōu)化

如今移動端各類產品已經給用戶養(yǎng)成了算法推薦+自主搜索的產品使用習慣，這種習慣當前也逐步從移動端往PC端轉化。搜索能從海量信息中最快速的找到用戶關心的內容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。

以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應模塊才能進行搜索，降低了搜索的便捷性和易用性。新的設計在保留之前搜索能力的基礎上，新增全局搜索，用戶在一個位置即可完成對組件（優(yōu)先展示當前畫板內組件）、屬性、幫助等內容的搜索和查找，進一步提升搜索的效率。

24、圖層管理交互優(yōu)化

一個數據可視化場景，通常是由N個數據圖表與其它數據要素一起構成的多個頁面來呈現和展示的。這些頁面內包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側的圖層管理面板來實現。一般我們對圖層管理的手段主要有三種：命名、分組和查找。

給組件命名是一個耗時且麻煩的行為，我們在做用戶調研時發(fā)現，大部分用戶都沒有給組件規(guī)范命名的習慣，大多數情況下，組件在圖層面板列表內都是以默認名稱或者默認名稱+1、2、3的形式存在。這導致了當頁面組件較多時，通過組件命名來查找組件其實相當困難，所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗?？s略圖以快照方式保存當前組件最新狀態(tài)截圖，從而幫助用戶更快速的將圖層組件與頁面上的內容對應起來。

新的設計，圖層成組后也取消了縮進字符的效果，我采用給成組對象設計更明顯的分組示意圖標以及為組內列表添加深色色塊的方式，完成了成組對象與列表內其他要素區(qū)分的需求，新的設計使成組對象更易查找和識別。

此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設計元素。

25、經驗總結

此次體驗升級是設計主導推動，產品與研發(fā)緊密配合的結果。體驗設計師作為最接近用戶的群體，是產品與用戶溝通的橋梁。時刻關注用戶心聲，并能將用戶細碎的吐槽和各類反饋轉化為體驗痛點、制定對應的優(yōu)化策略是體驗設計師的基本功。而對于設計和產品本身是否熱愛，也是設計能否不斷精進、體驗是否能夠不斷提升的關鍵。好的設計不僅服務了產品、幫助了用戶、同時也成就了設計師本身。

本人為莫奈提供設計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內部需求管理系統(tǒng)“行云”，為莫奈提交231個體驗優(yōu)化建議；以線下線上的形式面向莫奈產品及研發(fā)團隊進行了20多次專業(yè)分享。正是日常這些積極主動且持續(xù)的努力，使我本人與莫奈產品團隊建立了非常友好緊密的聯系，這也為推動本次體驗升級改版提供了巨大的助力。我認為作為體驗設計師，我們不僅要對用戶有同理心，為用戶創(chuàng)造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗關乎人、環(huán)境與生活，嘗試在生活中磨煉自己創(chuàng)造好的體驗的能力，并將其應用到體驗設計師的職業(yè)工作中，我相信，倘若如此實踐，必能在職業(yè)和生活中都獲得有不錯的成就。

好的產品，必然是持續(xù)關注用戶訴求，不斷迭代發(fā)展的產品，好的體驗設計也必然是陪伴產品不斷優(yōu)化、持續(xù)精進的設計，復盤的意義不僅是沉淀過去的經驗，更是為未來更好的體驗蓄能。

此次分享如能為大家?guī)砟桥乱稽c點的啟發(fā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~

一.競品分析目的

相信每一個設計師，在工作中或多或少都做過一些競品分析的工作，正所謂知彼知己百戰(zhàn)不殆，做競品分析可以幫助我們快速了解競對產品的優(yōu)劣和核心競爭力。目前網上的很多競品分析主要都做的大而空，好多都是偏行業(yè)分析，對于設計師而言，看完之后無法得到有用的信息，對于產品本身的設計體驗而言，幫助意義不大。
在開展競品分析之前應該想清楚兩件事，弄清楚自家產品的基本情況，如產品定位，基本功能，目標用戶等，另外要確定分析的目的是什么，最終要拿到什么成果賦能產品。如果想要提高用戶活躍度，那就圍繞競爭對手拉新促活方案進行研究；如果是要優(yōu)化產品的用戶體驗，那就圍繞影響用戶體驗的交互流程及功能操作去研究。

產品發(fā)展的階段不一樣競品分析的目的也會不一樣，可結合互聯網產品發(fā)展周期輔助確定分析目標。一般產品引入階段，功能架構還沒有完全確定，需要了解市場行業(yè)現狀、目標客戶特點、商業(yè)模式、盈利模式等，從而更好為為后期發(fā)展指明方向；而產品成長階段，需要占領用戶心智及市場份額，所以要分析了解競爭對手的產品功能、推廣路徑、營銷策略、體驗設計等，優(yōu)化核心功能及經營策略，實現用戶增長及促活。 產品成熟期要考慮怎樣維護市場份額，怎樣跟競品拉開距離，怎樣創(chuàng)收增效，需要及時了解競對產品的動向及用戶經營數據。結合產品發(fā)展的階段性目標及業(yè)務產品部門的相關規(guī)劃才能更好地確定出比較有價值的分析目標。 

二.競品的選擇

選擇競品先要明確產品所在行業(yè)和細分領域、產品屬性、用戶群體，找競品時需要找這些元素相同或者相似的產品?；驹瓌t是選擇行業(yè)第一梯隊中，1.產品的定位及目標人群比較明確且有重合性，2.是否穩(wěn)定且迭代成熟，3.是否具有獨特亮點有參考價值。

直接競品：功能和用戶群體基本一致，有直接的競爭關系，可以考慮借鑒相似的功能設計。
間接競品：產品用戶相同屬性相似，但是功能需求匹配度不是特別高，在細分的領域中做的比較優(yōu)秀，在運營策略、操作流程、視覺設計等方面有借鑒參考的價值。
標桿競品：目前互聯網同類的產品同質化情況相對比較嚴重，如果只對直接競品、間接競品進行分析，忽略當下比較熱門、比較具有先進性的產品，有可能會缺乏創(chuàng)新性，所以需要在用戶重合度或者產品屬性、營銷策略等方面做得優(yōu)秀的產品中選擇1-2個作為標桿產品進行分析。將其優(yōu)秀的部分深入轉化應用到自家的產品中。
通過七麥數據、IT桔子、易觀分析、比達網等第三方平臺，找到類別排行榜，艾瑞網等可以查詢相應的行業(yè)報告，有利于分析產品目標及功能范圍。另外，如果是移動端APP，可以通過應用商店進行搜索。
七麥數據：https://www.qimai.cn/
IT桔子：https://www.itjuzi.com/
易觀分析：https://www.analysys.cn/
比達網：http://www.bigdata-research.cn/
艾瑞網：https://report.iresearch.cn/

三.競品分析方法

競品分析的目的不一樣側重點不一樣，但用戶體驗五要素給我們提供了一種通用的分析思路，從五個層次去逐步分析。但實際分析過程中還是會根據分析者的身份，產出不同，側重點不一樣。

戰(zhàn)略層

了解競品的產品定位，產品目標，目標，多平臺等方面。做這些分析的主要目的是確定自家產品定位，產產品定位包括產品定義及用戶需求：產品定義包括使用群體/主要功能和產品特色，使用群體幫你明確產品的主要為誰服務，所有的功能/內容/設計風格的設定都是圍繞這類群體來進行的，主要功能劃定了功能的范圍和限制，產品特色使產品有別于同類的競爭對手。用戶需求包括目標用戶/使用場景和用戶目標，一個用戶需求可以看作是“目標用戶”在“使用場景”下的“用戶目標”，在做某一個功能的競品分析時，需要對比分析真實場景下產品怎么解決用戶的問題。相對而言產品經理會作戰(zhàn)略層的深度分析，作為設計師需要明確這方面的內容，但在競品分析階段不用深究，需要重點分析的還是結構層，框架層和表現層。

范圍層

我們需要思考的是產品需要什么功能實現產品需求，需要分析相同業(yè)務和場景下競品的功能，例如同為電商產品，競品在購物場景下的基礎功能及衍生功能，相同的功能競品的特點及優(yōu)勢。在競品功能進行梳理時，可以通過表格對比功能有無，這樣可以清晰地看到不同競品之間的差異。功能對比并不是簡單的功能羅列，要進一步思考功能設定背后的原因，可以從用戶對功能的依賴程度/使用頻率以及公司為實現這一功能要付出的成本，結合自身產品定位老考量自己的產品是否也需要這個功能，從而明確分析主要功能及次要功能進行分析

結構層

產品的整體架構包括功能結構/信息架構分析，首先需要理解什么是信息架構，很多人將思維導圖理解為信息架構，其實思維導圖只是信息架構的一種表現形式 。而功能結構是指功能的闡述，一般是動詞+名詞。功能結構則更側重整體邏輯，各個功能之間獨立或者關聯關系，明確主要功能次要功能。功能結構就是按照功能的邏輯性及用戶的操作習慣組織起來，更適合用流程圖來梳理，通過優(yōu)化功能與用戶的每個觸點優(yōu)化體驗。信息架構中信息指的是內容的載體，常見的文字、圖像等都是信息；架構的含義則形容對應的組織和結構。信息架構就是將信息通過一定的形式組織起來，然后呈現出來。從本質上講是信息的表達和傳遞，從而降低認知成本，提升使用效率。良好的信息架構是高效用戶體驗的基礎，分析競品的信息架構是分析競品分類組織邏輯。隨著互聯網產品的同質化，其實競品的很多功能都相似，但信息的組織往往會有所不同。相對而言資訊類，信息類產品需要著重對比信息架構。

框架層

任務流程分析，界面設計、導航設計、信息設計，頁面的布局內容信息，頁面之間的跳轉方式，頁面內部的交互邏輯等方面，工具類的產品如出行/外賣/購物等用戶有明確目的的，這類產品需要著重對比競品間任務流程的差異，從而尋找哪些步驟可以優(yōu)化，哪些步驟可以借鑒。

在這個過程中輸出使用體驗即用戶在使用過程中的整體感受，包含用戶操作過程中的效率，對信息的呈現和布局的理解。是否存在干擾信息導致用戶認知和操作出錯，使用起來是否存在壓力的情況，簡單來說包括：操作效率/信息布局/使用成本/信息干擾/等

而交互體驗更加具象，需要在使用反饋/防錯/可見性/一致性/流暢度等細節(jié)方面需找設計的差異點和亮點。

表現層

最容易被用戶直觀感受的層面，可以從視覺風格，配色，圖形，排版布局，情感化設計，動效等方面和競品進行詳細的分析對比，競品分析并不是羅列細節(jié)，而是需要分析出操作體驗的優(yōu)劣，以及這樣設計的原因。 

四.分析報告

產品概況、功能、流程和交互等方面進行全方位的分析后，還有非常重要的一步，即給出結論，且這才是最重要的，結論將其復用到我們產品中，這也是競品分析的意義所在。在做最終的分析報告時不要只做分析沒有結論。任何一個功能點都可以思考出一個結論，競品為什么這么做，那我可以模仿或超越嗎？或是我覺得不好，那么我改怎么避免；不要只有結論沒有權威的分析過程。在任何分析中帶著主觀性的結論是最不好的，有時候會誤導大家，所以得出的結論的因果條件要是合理的，分清楚充分條件和必要條件，寫明這個結論的必然原因以及分析過程和可能的原因等；要帶著目的性的去做分析，避免作數據及內容的拼湊。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司