作者:許波bobobo來源:站酷網
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
「文章的內容會更偏實際工作產出,并非將競品分析的定義平鋪展示,耐心讀完,你一定會有收獲?!?
關于競品分析,一直有小伙伴想讓我出一篇文章。因為我看過大量的 B 端產品,很多同學就會好奇,怎樣能系統的進行競品分析?好吧,壓箱底的內容也拿出來了,今天就來和大家說說競品分析,以及我們作為設計師,究竟應該如何使用競品分析。
我相信大多數設計師都有體會過被銷售奪命連環 call 的經歷,很多時候我們就是想要白嫖別人的“身子”,但是又不敢明說,只能夠通過花言巧語來騙取別人的使用賬號。難,因為很多產品并不會直接給你使用賬號,其實銷售也是為你們考慮,即使給了你賬號,你也沒法完整體驗整個流程,索性就不給你看,因此大多數情況下銷售會給你演示,這可能就是試用當中最難的第一個地方。
在 B 端,鑒定你是否是行內人的最好辦法,便是在溝通的時候給你講很多專業術語,因為術語就如同我們設計師日常溝通的一個辦法。比如:“這里我用到了卡片分類將整個信息去做規整”、“那里在 Figma 里主要用 Components 去解決頁面重復的問題”
這些內容其他行業的人肯定也聽不懂,因此術語多也是我們非常頭疼的地方。最近也在嘗試整理不同行業的 B 端產品分析,也算是幫助同學們在陌生的領域當中能夠快速熟悉。
很多同學的競品分析,都主要集中在鼠標的操作上。便是不停地點點點,在整個頁面你會發現點擊過后沒有任何目的,試用過后也不會有什么結果。因此久而久之,很多設計師只會去看這個產品的頁面風格,然后根據說這個頁面非常丑陋就罵罵咧咧的離開,所以也導致大家的積極性下降。
關于競品分析,其實很多人還是會使用 C 端產品的分析邏輯,但這對于 B 端產品來說,競品分析很容易就會誤導設計師,讓大家朝著不太正確的方向發展。
比如以這個內容為例,我們可以看到雖然其標題寫的是某某產品的競品分析,但是其實則的內容就是一篇較為完整的產品體驗報告,主要就是講解了產品對應的功能,遠遠稱之不上為競品分析(嚴格上來說應該是設計的競品分析)
所以我認為 B 端競品分析對于設計師來說需要具備一下幾個特點:
因為站在前人的肩膀上,我們能夠快速產出對應的設計方案,因此競品分析最好是有明確的需求目的。比如我要去做一個 導航菜單的設計,那就要去考慮在整個導航菜單當中,它不同的設計方法,以及在各個產品當中它們是如何選擇的,只有了解了這些內容后,才能夠幫助我們去解決設計當中的問題。
而競品,在其中主要就是引導作用,讓我們可以思考這款產品背后的具體邏輯,了解它是如何 how to do。
了解行業趨勢是非常重要的一個內容,雖然都是在說 B 端,但是我們可以通過競品分析了解到行業的大體動向,能夠幫助我們去做具體的分析。
比如我們可以看到很多 B 端產品的動向,像是 Jira、Ant Design、飛書,它們都在降低視覺層級,凸顯內容層級,這些動向的總結并不是我隨便去看文章,而是通過整體的分析了解到的。
(這個觀點也在 Ant Design 5.0 的更新當中得到了驗證)
其實這就需要你不停的跟進多款產品,了解他們目前的產品發展方向。雖然有很多人會認為這不是應該產品做的事嗎?為什么設計師要去做?但是去跟進他們的動向,其實就是了解他們之前在設計這些模塊的時候翻了哪些錯,后續是如何調整的。比如我們以飛書的改動為例,我追蹤飛書管理后臺的更新有大概 4 年,通過這樣的堅持,我們能夠看到的是飛書它經過一個又一個版本的迭代,優化了很多內容,才到如今的設計,并且隨著內容數據的增多,可以發現它是在如何發生變化。
并且發現這個界面設計風格的改版是未來的趨勢,早在一年前就已經預言,記得也在課程上講過,這個風格未來一定是需求(不信問一問 第三期課程的同學應該知道)所以這便是了解行業趨勢最快的一個途徑,而我們要做的是持續跟進,多去進行內容的查看。
大家一定接到過很多從 0-1 的功能模塊,在這個時候我們其實是對于它的交互內容理解較為簡單。而使用競品分析就能夠幫助我們去了解需求與這些功能模塊,他們究竟是如何做設計的,思路有哪些?這些都能夠提供給我們進行幫助。
比如我之前負責過一個階段推進器的需求,當時對于階段推進器這四個詞非常陌生。感覺從未接觸過,心中想的應該是 火箭?飛機的推進?
產品經理給到我的需求是這樣的:
我頓時就犯了難,這時候雖然不了解,但是我通過強大的圖庫+賬號,快速找到與之對應的功能模塊。
然后深度體驗產品的交互細節,并給出了合理的方案,這樣競品分析就能夠幫助我對于未知需求、未知領域的探索。
我們在做競品分析的時候,需要考慮的是交互體驗層面的競品分析,而非產品框架層面的競品分析。很多時候產品層面的競品分析我們不需要掌握,因為它過于宏觀,很多內容并不是我們作為設計師應該關心的,因此我們在做競品分析時不應該盲目的大,而是克制更為聚焦的小,希望做到的是從微觀再到宏觀。
舉一個例子,下方三個指標圖,如果你要去做競品分析,你會如何做?
首先關于三個指標圖我們發現,它們的設計內容并不相同。
1.為數據展示指標圖,你會發現在整個指標圖當中包含有同比、環比、對應的時間 以及 數據的詳情,給人的感覺數據非常專業。
2.以數據占比為主,明顯是想表達你的使用情況。你可以想想,會出現在哪個頁面當中?
3.一個非常簡單的指標圖,但是在個數這個字段極為特殊,應該是想呈現對應的數據變化。
關于競品分析,我們必須得先了解不同競品之間的種類與關系,這樣才能方便我們快速尋找競品。
直接競品,顧名思義就是去分析產品的直接競爭對手,因為直接競爭對手都會有較為完整的解決方案,如果第一次去做某些功能的時候,我們可以快速分析直接競品去快速了解它的思路。當然我們通常對直接競品還需要將他的產品進行各個階段的進行留檔,以及競品迭代分析,這個我們就留著第三章來說。
關于直接競品,有一個非常簡單的方法,就是在我們書簽分類當中,在一個分類下的一定就是直接競品。所以直接競品我們更關注的是產品類型幾乎相同~
間接競品通常是與產品沒那么相關,但是會有很多功能模塊是相通的。因為很多時候,我們很難找到非常相似的 直接競品,或者這些競品當中的設計不太滿足,這時候我們就要去考慮去分析間接競品。
比如在上圖的客戶管理模塊,微盟里的客戶管理與紛享銷客里的客戶管理就會完全不同,雖然他們都是客戶管理,但是在設計上完全不同。前者主打簡單,我們在借鑒的時候就要更深入思考;后者為核心板塊,就要體驗他為核心板塊做了什么內容。所以間接競品我們更關注的是產品功能模塊幾乎相同,但是他們的設計目的可能會存在不同的差異,因此將其進行分析。
交互競品主要針對產品無論的類型還是功能模塊上,都好不搭嘎,但是設計上有一些交集的地方,我們可以去學習他們的交互解決方案。比如我們需要去處理的是一個復雜的篩選模塊,同行業里幾乎沒有類似的做法,那我們就可以借鑒很多有類似功能的產品,比如 ONES 的篩選邏輯、紛享銷客的高級篩選、TAPD 的篩選彈窗,這些本身都是毫不相干的產品,但是他們在交互模式上可以借鑒,通過這樣就能夠幫助我們在交互層面上去解決問題,而交互競品更看重的是你平時對這個產品的了解程度。
了解了常見的競品的劃分過后,我們尋找到了競品應該如何分析?
作為一個成熟的 B 端設計師,我們競品分析的方法并不是將傳統式教條主義那樣,按照 第一步、第二步、第三步 的方式,按照某一個方法去局限自己的思路。比如常見分析的方法有:功能拆解法、矩陣分析法、功能對比法、評分比較法、競品畫布、PEST 分析法(后面會講到這些內容應該如何使用)
因為我們在實際工作當中,如果按照上面你的方式分析,很容易就變成一個填空題,而因此缺少了對于整個產品的細致思考。所以我們取而代之的是另一個非常重要的觀點:「通過現象看本質」
這個方法聽上去有些抽象,但是我們還是來看看它究竟應該如何使用。
比如你接到了一個設計需求,現在需要設計一個篩選組件。而擺在你面前的便是兩個完全不同的篩選組件類型,這時候你應該怎么辦呢?
但是這些傳統的教條類的分析會讓大家感覺在處理頁面的時候非常束手無策,因為他們在分析時,通常都是非常宏觀的分析,比如產品大方向、產品的未來規劃,沒人會去關注你個臭設計的。其實我們再去對競品分析時,主要專注兩部分的分析:
我們 就以剛才講到的篩選為例,首先從外在表現來看,發現左側的篩選并不重要,因為它需要點擊篩選圖標后才能呼出篩選,執行對應的篩選操作而對應的右側篩選顯得非常重要,因為它的所有篩選項都是常駐在頂部,我們想要篩選就可以直接到對應的字段進行操作。
現在其實我們就在分析表象,就是這兩個設計之間的差別在哪,緊接著我們在揣摩一下交互,當兩個篩選點擊過后,發現:左側的篩選針對的是通用的字段,因為我需要點擊添加篩選條件,點擊想要篩選的字段,才能夠執行篩選的操作。右側的篩選針對的是固定的字段,因為字段都是在頁面當中常駐,并且沒有對應的添加篩選的入口。這是從設計師在這個方案當中傳達出來的信息,緊接著分析一下,為什么這個設計師要這么設計。按照課程當中的話來說,就是這個設計師也不是傻子,它為什么要這么做?原因在哪?這時候我們就要通過外在的表象分析其內在的邏輯。
內在邏輯是將外在的表象通過設計實現在內在的產品邏輯當中,在邏輯當中會涉及到很多內容,我們做設計時所寫的交互說明很多時候就源自于此。
同樣是上面的篩選,那為什么會這樣設計,其中的原因又是什么?我們剛才講到了篩選一個為通用篩選字段,一個為固定篩選字段,那為什么會存在這種情況,其實是因為在左側,整個系統的字段是不可控的,用戶可以去自定義字段,也就是添加自己想用的字段來進行展示;而右側字段可控,主要就是所有的字段都在整個系統當中,我們沒有辦法去隨意的添加刪除。
而為什么會產生這樣的原因呢?其實是因為 aPaaS 平臺上,整個系統都是自定義字段,因此只能夠將篩選做到一個入口里,通過入口來執行篩選的操作。而 SaaS 平臺,特別是行業屬性型產品,所有的業務都是固定寫死的,因此你會發現我們不允許系統進行隨意的更改,也就導致了我每個頁面具體要呈現什么內容完全由我們自己說了算,也就導致股常駐固定篩選。
我們作為設計師,其實不應該只分析其外在的表象,而更應該在乎的是其內在的邏輯。剛才我們是從前往后去推導設計的邏輯,那我們想想,能不能從后往前去做分析,當然是肯定的。
比如在之前回答一個同學的問題時,我們就能夠通過競品分析了解到設計思路。
問題如下:
“我們去做一個 HRM 系統的面試點評的優化,因為在系統當中經常會有面試評價的問題,就是使用系統的面試官經常出現忘記填寫面試評價、面試評價錯亂的情況,我們應該如何優化?”
3.舉個例子
比如在之前回答一個同學的問題時,我們就能夠通過競品分析了解到設計思路。問題如下:
“我們去做一個 HRM 系統的面試點評的優化,因為在系統當中經常會有面試評價的問題,就是使用系統的面試官經常出現忘記填寫面試評價、面試評價錯亂的情況,我們應該如何優化?”
首先我從沒做過 HRM 系統,因此不太了解這個產品的具體特性,所以在回答這個問題時,我們只能夠通過競品分析的方式,去獲取一些設計優化的方式。
在分析問題之前,必須先了解我們目前已經掌握的內容。
產品:針對人事系統管理的招聘模塊
階段:已經面試人員的面試評價
問題:面試評價未填寫,錯亂的問題
針對上面的內容,我們還能夠進行相應的提問:
具體的角色有哪些?解決的問題究竟是什么?究竟是什么樣的面試評價錯亂/未填寫?
通過系統當中已知的內容,我們逐步明確以下幾個內容
產品:人力招聘系統
角色:面試官、HR、應聘者
功能:面試評價
痛點:大部分面試官忘記面試評價,導致面試評價錯誤、混亂,無法對應
場景:線下面試,線上面試
其實我們剛才的內容,都是前期的問題分析,我們在做任何設計時都應該這么做,而后就是競品的分析,首先去搜集競品,去尋找直接競品、間接競品、交互競品。
直接競品:因為 HRM 行業本身要求比較嚴格,所以在選擇時,我們選擇了釘釘上能夠直接試用的 易招聘
間接競品:最近使用 CCtalk 上課的頻率較高,所以使用 CCtalk 的課程評價
交互競品:在點餐的時候發現可以評價商品,因此選擇美團外賣分析其點評評價
當然在這些競品當中,沒有嚴格的要求。最主要的就是你一定要熟悉它。
而我們在分析時,就要了解一款產品的表象和它的邏輯
易招聘
在易招聘里,我們進入到人才信息過后,就能夠快速預覽人員的所有內容,包含簡歷、登記表、測評、面試記錄、Offer 等,其中在面試記錄里,我們就能夠查看這個員工的所有面試設計記錄。
因為我沒有接觸過 HRM 系統,通過易招聘這樣的直接競品,讓我對 HRM 行業的產品有一個基礎的認識,通過了解面試評價的基本內容。
然后將競品的內容按照外表+邏輯進行整理。
外表:
- 發現易招聘里依然容易出現面試評價錯亂等問題,他們通過 一鍵催所有評價+一鍵催評價 解決
- 試用 一鍵催評功能,設計邏輯是當點擊過后,我們會在 釘釘 收到 Ding 一下的加急消息,提示你需要閱讀。(這個與平臺深度綁定,如果是 飛書、企業微信 提示方式又會有所不同)
- 面試評價較為簡單,選擇對應狀態,在下方寫下評論即可。
由于對于評價這個功能也不太了解,因此我們又體驗了其他的評價功能的產品,希望有所啟發。
CCtalk
因為 CCtalk 平常使用頻率較高,所以評價想到的就是課程評價究竟有哪些邏輯。老規矩我們先看外表:
- 提供快速評價的入口,我們可以點擊五角星來實現評價的快速點評
- 提供默認標簽,我們可以選擇老師常見的面試評價標簽
- 直播課程結束后,會有彈窗提示。面試結束后可以主動彈窗進行提示。
在理解內核,理解內核我是通過一次一次的測試,得到了 CCTalk 他會包含以下規則:
- 課程必須結束后才可評價,也就是正在直播的課程,不能直接評價。也就是評價不能與課程同時進行。
- 課程查看時間必須超過 10min 才可評價。也就是點評之前,必須要判定用戶是否有評價資格。
因為經常點外賣,因此也會想到美團外賣的點餐評價,也就將其呈現出來了。
外表:
會有彈窗提示,是否進行評價
評價可以有標簽進行快速選擇
對于騎手的評價會有滿意于不滿意兩種狀態
內在邏輯:
當騎手完成送貨后,可以對訂單進行評價
提前點送達,會收到系統的默認提示
不同的滿意狀態,對應呈現的默認標簽也會不同
我們分析了多個產品的設計邏輯過后,面對上述的問題,我們得到以下的設計思路:
- 面試評價的難度 降低無用的表單信息,將重要內容凸顯 美團外賣
- 面試評價的快速提醒 HR 一鍵提醒功能 易招聘
- 面試流程的卡點 取消不必要的必填,并且在內容上有快捷方式 美團外賣
- 面試過后的反饋 快速提示面試評價 CCtalk
- 面試的最佳實踐 能不能將面試與面試點評放在一起,提醒面試官可以一邊面試一邊評價 CCtalk
- 面試是否能夠提供面試題庫 規范面試官的提問方式,幫助面試官進行規范化的考量 CCtalk
通過競品的外在表象和內在邏輯進行分析,進而在產出方案時,我們能夠更為清晰的處理工作的需求。而上面的思路,我們只需要將需求結合,產出設計頁面即可。那對應的方案這里就不做呈現,畢竟競品分析我么你主要分析的也是思路。
首先關于競品分析的方法,我們的目的主要是為了呈現自己的思路。比如剛才我們已經完成的思路的拆解,進而就需要通過方法將自己的思路進行理論化的包裝,給到其他人,這樣就能夠保證在評審當中“你的思路是正確的”
功能拆解法是針對系統或軟件的功能分解,可以采用不同的方法進行拆分。
我們常用的方式是按照菜單導航進行拆解,即將不同功能按照其在菜單中的位置進行分解。同時還可以根據使用流程來進行功能拆分,即將整個系統或軟件按照用戶使用時的流程進行分解。
功能拆解法能快速幫我們去呈現產品的具體架構,了解競爭對手的功能情況。
矩陣分析法可以通過將不同競品的關鍵指標以矩陣的形式呈現,從而幫助設計師更好地分析和比較不同競品之間的特點和優劣勢,去尋找產品方向上的機會點。
矩陣分析法主要通過制作矩陣坐標軸,將不同競品的特點和關鍵指標對比,從而分析它們在不同方面的優劣勢。在制作矩陣表格時,通常將各個競品的關鍵指標列在表格的橫向和縱向兩個方向,從而形成一個以競品名稱為標題的矩陣表格。
例如,我在分析垂直業務型產品與行業屬性型產品時,就會將很多關鍵指標進行對比:產品市場占比、產品的設計難度、業務復雜度,同時在這些競品當中,我們選擇了兩個指標進行分析「設計難度、業務復雜程度」通過對比和分析不同競品在這些指標上的位置得分情況,設計師可以更好地了解各個競品之間的優劣勢,從而更好地制定設計策略和優化產品設計。
總之,競品分析的矩陣分析法可以幫助設計師更好地了解市場競爭環境,分析不同競品之間的優劣勢,為設計和優化產品提供參考和啟示。
功能對比法是一種通過比較和分析不同競品的功能來了解其特點和優劣勢的競品分析方法。該方法主要通過比較不同競品在功能上的差異和優劣勢,幫助設計師更好地了解市場上類似產品的功能特點,并從中獲取設計靈感和啟示。
功能對比法在 B 端產品當中,我們主要分析一些影響產品體驗的核心功能。比如產品的自定義能力、是否有新功能的交互引導、產品有問題時的幫助體驗如何,這些我們都能夠通過功能對比的方法進行快速的了解,快速讓自己的產品在行業當中取得一定的優勢。
競品分析是指對與自己產品或服務相似的競爭對手進行調查、分析和比較,以了解市場競爭狀況,為企業制定市場策略提供依據。在競品分析中,評分比較法是一種常用的方法。
評分比較法是指按照一定標準對不同競爭對手的產品體驗進行評分,再將得分進行比較,以確定各競爭對手的優劣勢和差距,進而明確產品的具體定位。
評分比較法的優點在于可以直觀地展示競爭對手之間的差距,幫助企業更清晰地了解自身在市場中的位置和優劣勢,進而制定更科學的競爭策略。但評分比較法也存在一些局限性,例如評分標準的選擇可能不夠客觀,評分者的主觀性可能會影響評分結果等。
商業畫布的目的是幫助企業了解自己所處的市場競爭環境,以及競爭對手的優劣勢和策略。因為他是偏業務層面的分析,通常由以下幾個部分組成:
商業畫布可以幫助企業了解自身在市場中的定位和優劣勢,以及與競爭對手之間的差距和機會。通過對競爭對手的分析和比較,企業可以更好地制定市場策略,提高市場競爭力。
而這些方法的使用,主要目的是為了呈現你的思路,通過方法論的方式進行包裝,進而能夠讓沒有體驗過的人快速了解,方便他們理解你的方案思路。
競品分析最簡單莫過于借鑒別人的設計思維,因為我們在剛接觸到一個需求的時候通常都會非常的茫然。而現如今的界面設計很少有行業里面完全新的功能,大多數的界面模式已經被行業當中驗證使用,所以先不要嘗試去創建一個新的交互需求,先試著尋找一下有沒有較為成熟的交互邏輯。
比如我們現在接到一個需求,要去做一個頁面的代碼配置信息,手里拿到的就只有一些簡單的產品截圖。
那這個時候我們就需要考慮與之類似的交互到底會有哪些?
想來想去過后你會發現,我們似乎可以從 VScode + Figma 等頁面布局當中去獲取靈感,進而在繪制這些頁面的時候會更為完整。
并且思路借鑒,并不意味著我們需要去 copy 別人的完整方案,很多時候要去分析的是它的方案真實適不適合我們的產品。
畢竟產品當中就會存在很多特殊的場景,場景不同你的思考的點就會存在差異。
再舉個例子:比如我們在課程上講到了三個風格非常類似的 指標圖,當你看得到這三個完全相同的組件時,其實會覺得他們只是存在風格上的差異:一個數據凸顯、一個展示進度、一個展示指標
但是深入去分析了解,才知道它們除了風格上的差異之外,其實還會存在使用場景的不同。
左上圖是數據凸顯:因為是一個 BI 產品,在產品當中主要呈現的是關于這個字段詳細的數據記錄。所以在數據呈現的時候較為詳細和準確。
右上圖展示進度:同樣是一個指標圖,它呈現的內容更多是一個進度展示。究其原因,發現它被用于企業管理頁面,以便我們可以通過進度了解資源的具體用量。
左下圖展示指標:這個指標圖有點特殊。在鼠標懸停時,我們發現該圖表可以點擊。這意味著該指標圖可進行下鉆操作,以快速查看相關聯的數據情況。
因為競品分析并不是一個短期分析完了就結束的過程,如果處理一個需求,針對一個功能,我們都需要持續的對產品進行動態的跟蹤。就像我跟進了 飛書 3-4 年,一步一步看到它的變化、產品也在不斷地發展,因此你的分析也應該是持續跟進的。
我們作為設計師,更應該對產品持續進行關注,比如創建對應的產品版本庫,將這些競品持續關注,不斷地總結,這樣你才能擁有自己的護城河。。
關于如何尋找競品,我其實之前有給大家講過,正好趁著這些內容更新,又給大家科普一波~
在競品的尋找上,其實我們主要有幾種尋找的渠道:
我們可以通過搜索引擎檢索到大量的同類型產品,使用搜索引擎我們只需要明確想要尋找哪個領域或產品的競爭對手,然后根據該領域或產品的特點,選擇適當的關鍵詞,通常會有兩種方式,產品類型以及產品名稱。
我們以尋找 CRM 行業的產品為例,就可以在搜索引擎當中得到兩類關鍵名稱:
產品類:紛享銷客、銷售易、銷幫幫 ...
行業類:CRM、客戶關系管理系統、企業客戶管理 ...
當然在搜索引擎上的選擇,國內肯定就是 百度、搜狗、Bing 等平臺;如果是國外,則主要是 Google。
在國內的應用,主要講究的是生態,因此我們尋找競品還可以通過競品的 ISV 快速獲取。
目前國內的企業應用平臺主要有三個:釘釘、企業微信、飛書
無論是什么產品,我們都能夠通過這三個平臺進行快速的尋找。
比如我們想要尋找財稅相關的產品,那我能夠通過 釘釘、企業微信、飛書找到非常多與之相關的產品。并且這樣的一些平臺能夠提供 試用 15 天的功能,代表著我們可以直接體驗多款同類型產品。
Youthce.com
如果是咱們賬號的老讀者都知道,我自己有一個個人網站,雖然年久失修,但是里面仍然總結了市面上較為常見的 B 端產品,其中就包含 200+ 各個行業的競品。
因此肯定還是要先安利自己的網站,最后說一句,個人網站肯定更新、肯定更新~
36 企服點評
這是 36 氪出品的企業服務點評網站,很多國內的 B 端產品都會在這個網站上出現,雖然做得一般,但也是國內最好的網站了(攤攤手)
網站感覺恰飯的產品都點多,很多不知名的產品排行都比較靠前~
找 SaaS
也是類似的企業軟件的匯總平臺,內容雖然很多,但是它的排序規則并不是很認可。
比如人才招聘領域,排在前面的產品我一個都不認識,這個排序規則就值得大家細品細品,這算是大家找軟件的一個補充吧。
SaaS 點評網
類似的企業服務社區,我們能夠快速的進行產品分析。
G2
可以把它理解為是國外軟件的大眾點評,我們可以在該網站上查看和撰寫軟件和服務的評價,并對其進行打分、發布評論和分享經驗。這些評價基于用戶的真實體驗,具有很高的可信度和參考價值。
也可以在這上面找到國外產品的流行趨勢,并且每年 G2 都會頒布 「Best Software for 2023」來展示在過去一年,不同領域當中那些產品做得非常優秀。
Capterra
Capterra 是一個在線的軟件和服務目錄網站,目的是在幫助企業尋找和比較各種軟件和服務產品。與 G2 比較類似,不過使用它通常會采取一些關鍵詞來去尋找。
Crozdesk
企業軟件搜索,不過會有很多國外的行業報告提供給我們,免費下載~
競品截圖是我們設計師最主要的靈感來源。
CE青年花瓣
我在我的花瓣中總結了50個B端產品,并為每個產品提供了詳細的截圖。我還提供了相應的標簽來對這些截圖進行細致的管理。已經有很多設計師向我反饋他們會打開這個花瓣網站,每天都去獲取相應的靈感。當然,也會有一些機構和媒體拿著這些截圖,進行對外的售賣,并且價格不菲。
所有資源都已經免費提供給大家了。大家可以好好利用這些資源,幫助自己提升設計能力。
SaaS UI
SaaS UI 是國外截圖分享的一個平臺,里面按照產品為單位,搜集了大量的產品截圖。同時對于沒有的產品你還可以提交請求,等待一段時間就能更新到你想要的產品截圖。
Webframe
在 Webframe 里面,我們能夠通過左側的導航,快速對于產品進行分類。
與 SaaS UI 不同,它的分類按照產品的整體結構展開的,比如:官網、價格頁、登錄頁、編輯、彈窗、搜索 等等...
這種方式在我們缺乏靈感的時候能夠快速通過導航,找到自己想要的截圖內容,既能夠進行橫向對比,同時也能夠尋找到該產品的全部截圖。
SaaS Landing Page
這是一個專注于 B 端官網設計的網站,所有的官網都通過小編的精心篩選,質量上肯定有所保障。同時還匯總了網站的 字體、顏色、技術棧,能夠讓我們快速掌握該網站的設計風格。
我們提到的所有資源都放在我的微信工號里?;貜?nbsp;“頁簽”,即可獲取。
關于競品分析,其實就是通過研究別人的產品來了解自己的產品可能會遇到的問題。你可以通過不同的競品分析方式呈現你的競品分析結果。因為我們作為設施設計師考慮的不是產品層面上的各種關系,而是設計層面上的交互邏輯。
盲目的分析只會讓你越陷越深,達不到我們最初的目標。
希望這篇文章能夠對你有所啟發,這也是我在實際工作中運用競品分析的關鍵思路。
作者:CE青年來源:站酷網
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者:AYONG_BDR 來源:站酷網
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言
15年開始,紅包大戰占據了春節營銷的重要位置,各家互聯網平臺紛紛“發錢”搶占用戶,紅包總額曾在2021年一度達到120億元的峰值。不過近兩年開始,過往簡單粗放的紅包大戰逐漸失去熱度。平臺不再追求短時間用戶增長,這次春節活動就是百度FEED年底以運營手段打造的內容營銷活動。設計團隊以“有福氣 趣新春”為主題提出了內容場景化的營銷策略,整體圍繞如何把“內容做的有趣”來分享設計思路。
一、心智建立內容護城河
1、心智占領:
提到內容營銷,先不說老掉牙的腦白金、可口可樂。我們先說說產品和用戶的關系。我們通過各大平臺的定位,提供了信任背書,但產品只是流量的承載地,最終讓目標用戶到達目的地的還是我們的品牌、內容、形象。所以我們在做內容營銷活動的時候,究竟應該怎么做?
2、你的產品容易記住么?
海的味道你知道,是波力海苔。提到藍瓶的鈣,腦海會浮現產品的藍色包裝。說到這里,我們就明白了,內容營銷的核心是圖形和口號。營銷活動的核心是品牌符號和Slogan。
品牌符號拆解
以春節項目舉例,提取中國傳統團扇形,象征著大團圓。引申為家家戶戶的心愿,全家團圓、福氣滿滿。以FEED產品愿景「看更多有趣有用的內容」為使,結合「新年要有福氣」的新年祝福,推出品牌Slogan【有福氣·趣新春】的活動理念,開啟活動篇章。
有了主要的符號傳達,其它輔助元素的提取從桂花造型和錢幣上做了簡化,寓意吉祥富貴財源滾滾,應用在頁面細節裝飾中。
用顏色表達個性
提起品牌符號,我們首先想到的可能是 Logo,但有些時候色彩卻是第一印象。春節是中國傳統文化的傳承。因此嘗試從中國傳統色彩體系中象征“福氣、福來、富貴”的海棠紅作為會場主顏色。
為了更好的區分內容場景以及增加色彩豐富度,受到“一年四季輪回”的啟發,延伸品牌輔助色。一年的圓滿在于四季的圓滿,在色彩表現上,從春到人間萬物鮮到春雪滿空;對應綠、紅、黃、藍給人煥然新生的視覺感受。
用字體豐富品牌基因
字體,不僅可以指代文字內容含義和字形美學價值,還能透過字體設計的初衷洞察到品牌濃縮其中的理念和哲學。利用彎曲讓作品動感有張力。利用圓角處理增加趣味性,呼應“有趣”的品牌理念。用傾斜的樣式營造出視覺張力,形成視覺焦點。
3、洞察產品的「生命力」
定形象-品牌基因的獨特形象
角色、品牌、用戶必須是一個標簽,清晰可見。以IP角色與用戶互動溝通,建立信任關系,擁有獨立人格和魅力。通過更具人格化的形象,使品牌變得更溫暖。本次活動的主IP,在設定上采用FEED字母演變不同性格IP角色,作為不同維度的形象代表,豐富B/C端的內容場景。
情感鏈接-圍繞人設講故事
如何通過「IP角色」讓用戶對產品產生情感呢?首先賦予他們性格,他們分別是福氣、財富、快樂和有趣的化身。為用戶帶來財、富、樂、趣是他們的責任。IP的人格化能很好的與用戶建立品牌好感度。同時「持續曝光+情感鏈接」的品牌策略,在活動中貫穿內容場景、物料推廣、分享轉發等,反復強調品牌。
二、你的差異點是什么?
1、化繁為簡,強化內容
由于春節活動周期長、內容多的特點,使得頁面呈現龐大復雜,會造成用戶的理解成本影響留存,因此把內容有效呈現、提升屏效、優化體驗路徑是交互的重點。我們通過“框架分層”“減少活動步長”對所有活動進行了框架升級。提升活動易用性,讓用戶快速參與活動。在設計表達上簡化頭圖背景,讓用戶聚焦場景,引入內容。
2、創意場景,引爆內容
洞察設計策略
百度FEED不同于其他矩陣,我們的產品內核是“內容”;作為春節活動,濃濃的“年味”是活動外核。如果只去介紹我們自己產品的功能、種種好處,這種干巴巴的內容無法在這個時代獲得關注和認同,因為無法與用戶建立切身聯系。所以在不同層次的內容上,我們可以通過故事化、場景化來把內容做的更有趣,最終實現業務互動轉化提升。
年俗互動-故事型敘述 增強產品代入感
抓住用戶情緒洞察,采用年俗的理念打造場景,營造用戶代入感。在視覺表現上,根據時間推移,場景也隨之變化;以回家團圓吃年夜飯、到走親訪友云拜年、看煙花賞燈會,實現了場景從年三十到十五的視覺呈現,釋放出情緒共感的疊加效應。引發用戶“過年”的心理共鳴。
場景設定
場景一:花樣團圓飯。圍繞“三十吃餃子”的年俗為主要點切入,通過具象的關鍵詞構思場景,結合品牌符號,融入中國風建筑表達“家”,并將餃子、房子、人的比例重構,增加畫面沖擊力,在配色上摒棄大面積的紅黃配色,加入蔻梢綠和淡曙紅作為輔色,為整體添加了一絲春天的氣息。
場景二:神評云拜年,發評送好禮。圍繞“云拜年”的年俗為主要點切入,過年的時候拜年是人們辭舊迎新、互相表達祝愿的一種方式。創意表達上,除了沿襲以往“登門”的拜年方式外,在畫面表現上加入代表新興禮儀“云拜年”的概念,讓視覺吸引眼球,同時又很接地氣。
場景三:猜燈謎送吉祥。以元宵賞燈會的年俗為切入點,夜色旖旎,花燈璀璨,在一片流光溢彩之下,鬧元宵、賞花燈、迎新春。"玉兔東升、鯤鵬萬里”,用最美好的祝福為用戶開啟新年新篇章。
人文互動-內容聯想 強化產品特點
我們為什么要把小組內容關聯到人文上?我們需要給產品定義一個標簽,讓內容進入一個優勢的心智賽道,用設計手段具像化演繹出來,讓目標用戶最快對號入座,提升產品的認知效率。而人文包羅萬象,與小組內容分類不謀而合。
內容聯想
在視覺表現上,圍繞“小組發布內容”的類比聯想,場景選取攝影、養花、命理、詩詞、鄉村等七大不同人文場景,著力刻畫“小組內容”強關聯的人文元素,以此映射產品的特點,激發用戶參與意愿。借助想象放大或夸張內容特征,更鮮明的強調內容本質。
3、豐富體驗
為了維護用戶粘性,讓用戶每天都來“玩”。加入2級活動,用“獎勵”“成就”“抽簽”形成驅動用戶雷達地圖,多維度持續牽引,增強互動體驗。
如何讓用戶玩下去?
【抽簽活動-新年福氣簽】
活動玩法:用戶每天進入活動可抽福氣簽,隨機發放簽文以及紅包獎勵,中獎+祝福的滿足感驅動用戶回流。
洞察&創意
新的一年,人們對美好生活都有向往和期盼,“討彩頭”是每位用戶對生活的新追求。在活動的設計上要吉祥滿滿,自帶好彩頭。用福袋作為容器承載簽文,以抽幸運球、得獎勵贏福氣作為情感驅動,刺激用戶玩下去。
在簽文設定上用團扇的品牌符號作為基礎形狀,加持“祥云”“吉祥話”讓活動不止驚喜,更是平臺對用戶的祝愿。
如何讓用戶“回來”玩?
【激勵玩法-我的成就】
洞察&創意
在成就玩法中,勛章作為精神激勵直接授予用戶,提升用戶在活動內的成就感和價值。另一方面,勛章也作為主活動物質激勵的間接載體,用戶通過解鎖勛章來獲得終極大獎。從設計角度,采用三維立體視覺風格,結合IP形象,使勛章更年輕有趣,讓用戶形成記憶點。強化視覺沖擊,滿足用戶的成就感和榮譽感,刺激用戶回流和分享。
驚喜彩蛋,拉升互動體驗
除了視效的打磨外,營造“驚喜感”是在體驗中非常重要的一環。無論是抽獎還是成就,除了在視覺上有抽獎的儀式感。在活動中增加互動彩蛋,用戶在投票以及點贊后會有對應的動效,讓整體體驗更加細膩。
精彩視頻,點擊可看
結語
總結一下本篇文章關于內容場景化營銷的設計要點:
心智占領:前置化思考品牌打法,從品牌符號、Slogan、色彩基因、字體設計到IP的設定,全鏈路反復強調品牌。
設計創意:用故事性、場景化演繹設計創意,差異化視覺呈現。
互動體驗:用“驚喜感”拉升互動體驗。
希望以上的設計思考,可以給大家一些啟發。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
。2022年新建裝扮中心整合各類裝扮的分發入口。搭建皮膚商城、主頁背景商城、頭像商城、掛件商城4大裝扮基建;高效擴充皮膚、掛件、個人主頁封面和頭像等個性化裝扮資產,受到年輕用戶的喜愛,佩戴裝扮用戶迅速增長數以百萬計。
0-1搭建拓裝扮資產規模的經驗,今日與大家分享。
一 整合升級四大裝扮基建,搭建系統裝扮能力
拓新裝扮場景,提升裝扮曝光:百度APP個性化裝扮場景已覆蓋首頁皮膚、個人中心皮膚、個人主頁封面、個性化掛件和頭像。
我們將百度APP原有的裝扮能力整合升級,新建“裝扮中心”統一分發,并在個人中心增加了一級入口,為更多的裝扮形式與玩法創造更多可能。通過裝扮中心、皮膚商城、個人主頁背景商城、掛件商城、頭像商城“四大裝扮基建”支撐百度APP個性化裝扮的分發和佩戴操作。
提供易用的裝扮佩戴體驗,增強裝扮展現的吸引力,是裝扮基建方向的設計目標。
1. 易用性
我們在全場景提供實時預覽能力,裝扮預覽所見即所得;按裝扮類型統一界面布局,降低理解成本。
2. 增強裝扮吸引力
2-1 提升裝扮展現豐富度:
裝扮中心作為裝扮聚合展現核心場景,提供套裝裝扮,界面內融入豐富動效、定義刷新策略持續推薦新內容,增加對裝扮運營展現能力。
2-2 串聯互通增強可逛性:
各裝扮能力之間串聯互通,通過分發場景間跳轉進行交叉推薦增強裝扮吸引力。我們從三條路徑上為裝扮拓展了分發入口。第一條:裝扮功能內的場景,在裝扮商城之間增加相關功能跳轉、在皮膚和套裝的預覽頁底部拓展更多推薦入口。第二條:在用戶的非裝扮使用路徑上拓展入口,如在頭像預覽頁、個人主頁背景預覽頁引導用戶設置頭像和個人主頁背景。第三條:以非常駐的彈窗形式,推薦裝扮活動,吸引用戶體驗裝扮功能。
2-3 豐富裝扮玩法:
a. 限時免費裝扮:精品套裝裝扮包括動態皮膚、動態頭像、掛件、個人主頁封面,支持一鍵佩戴四項個性化裝扮,是百度APP的付費裝扮功能。我們探索限時開放給用戶免費使用玩法,效果超預期,收獲了一大波裝扮新用戶。
b. 結合任務活動:將“佩戴裝扮”作為運營任務,幫助用戶獲取任務金幣,也把熱門裝扮作為任務獎勵。
c. 與大型運營活動結合:與世界杯大型運營活動結合,設計度曉曉世界杯16強球隊套裝皮膚,通過限免使用,提升裝扮滲透。
二 持續擴充皮膚/掛件/個人主頁封面/頭像等個性化裝扮資產
裝扮資產擴規模,重點考量通過提升設計質量增加裝扮吸引力和快速擴規模的效能如何提升。
1. 精細化打磨,打造百度APP裝扮套裝
1-1 表現手法-本能層:
深入研究畫面風格,在年輕化現代審美指導下,選擇偏東方的設計風格,如國風、二次元風格等,因為這類風格多用圖形、線條、顏色來處理空間關系,畫面不會過于厚重,既迎合年輕用戶喜好,又不過多打擾APP內容區域閱讀消費。
舉例:七月中元節的裝扮設計中,整體配色偏暗、低飽和度的深紫色、偏灰的藍色,可以傳達出靜謐、神秘的氛圍。在色彩構圖中沒有用過多的色彩搭配,使用高明度差來刻畫畫面結構,因為明度反差處于人視覺的最底層。如果能用黑白反差區分層次,會首選黑白。在周圍環境色中使用偏灰的藍、紫色,并且與人身上的暖色對比,讓人物更加突出。而在畫面元素的刻畫上增加飄帶、魚尾的流動感,這種帶有東方感的元素,這種留白、平衡構圖和俠氣感,也有很強的東方特征,同時通過厚涂風格中常用的使用飽和度差異、大透視效果營造場景的空間感,增加畫面的細膩程度。
1-2 內容-行為層:
在裝扮具體的內容繪制中融入共情元素,吸引用戶注意。比如結合節日、大事件推送套裝,并在繪制中增加洛麗塔、國風、JK等年輕用戶感興趣的元素。
1-3 內涵-反思層:
通過積極情緒引導、激發思考,讓用戶感到心之向往或心生愉悅,可使用神情、動作、裝飾花的花語等多種手段進行情緒暗示。
2 單品擴量,保證各類裝扮的更新頻率
與套裝制作不同,單品的更新需要更加短、頻、快,需要更加直接解決Z世代用戶痛點。
2-1 協助用戶搭建社交符號:
頭像,作為用戶在網絡世界身份的象征,我們從橫向團隊項目中大量引入能代表身份狀態、游戲愛好等方面的資源,快速補充頭像單品資源庫,我們也根據用戶調研了解到有76%用戶愿意和朋友使用“閨蜜/情侶頭像”,我們在頭像庫中上線情侶頭像,并將完善“頭像分享卡”等功能形成體驗閉環。
2-2 幫助用戶表達自我:
百度APP頭像掛件和游戲、社交、直播場景中的頭像框不同,并不為了彰顯關系、體現出社交關系中的尊貴感,百度APP用戶更希望借助頭像掛件來表達觀點,為自己的主張、個性貼標簽。
2-3 結合用戶興趣引起關注和共鳴:
在羅盤大數據中,我們發現,王者榮耀、和平精英、元神等游戲中,25歲以下年輕用戶的占比都非常大,并且都愿意花錢購買皮膚裝扮。二次元的游戲、動漫內容不僅僅受Z世代喜愛,且Z世代的滲透率最為突出。各大手游設計中也在不斷的融入二次元元素,我們借力百度AI畫圖技術-文心大模型快速補充了二次元、游戲等風格方向的裝扮。
三 建立規范平臺,提物料輸出效率
為了展現更好的效果、適配更多的裝扮場景,且兼顧歷史與開發成本等原因,裝扮物料規則復雜,且種類繁多?!栋俣華PP裝扮體系設計規范平臺》應運而生,它涵蓋 5 項裝扮能力、2項運營能力;每項能力均配有一鍵預覽及導出物料模板。隨功能迭代及時更新,保障了裝扮物料的高效輸出。
結語
目前百度APP裝扮已經完成了第一階段的建設,沉淀出一批受用戶喜歡的裝扮資產,未來我們也將不斷探索、創新更多裝扮玩法,未來也將探索出共創平臺,成為一個裝扮生態。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
。通過前面兩篇的拆解,小鵝通的后臺功能內容已經拆解過半,接下來我們來看看「數據統計」和「用戶運營」這兩個部分的內容,它對商家的運營來說,真是如虎添翼,讓我真正感受到一款SaaS產品對商家的運營價值。
當我的店鋪開始運營起來以后,我最關心的就是店鋪的數據統計分析了,因為我需要了解每天有多少新用戶來訪問,又成交了多少個訂單,其次我還需要精準的數據分析來為我的運營提供支持。
5.1 概況
「概況」其實是小鵝通的后臺默認首頁,通過這個頁面,商家可以第一時間查看整個店鋪經營的狀況。
5.1.1 實時概況
「實時概況」提供店鋪的每日最新的實時數據,在這個欄目可以看到今日店鋪訪客數、今日新增用戶數、今日支付金額、今日訂單數、待付款訂單、待發貨訂單等數據。這對運營者來說,打開后臺就能第一時間查收到店鋪當日的實時數據。
5.1.2 最近內容
「最近內容」展示店鋪最近更新內容的數據,比如瀏覽量、訂閱量和學習人數。不過這個欄目的設計讓我陷入焦慮,我不太明白這個欄目內容排序是按照商家最近更新的商品排列,還是按最新有訂閱和學習人數的商品排列,官方也沒有給出詳細的說明。
5.1.3 平臺動態
在這個版塊,商家可以獲取小鵝通最新的平臺動態、資訊、新功能預告和熱門話題。在小鵝通的知識生態池里,店鋪不是一座座孤島,而是可以通過小鵝通的鏈接,可以一起學習交流知識付費的獲客、激活、變現、推廣的方法。這也是一個SaaS軟件最大的魅力,用科技設計工具,用工具幫助企業成功。
5.2 交易
「交易」匯總了商家知識店鋪的所有訂單交易,在這個版塊,商家可以查詢整個店鋪的交易數據,其次還提供了訂單工具、售后管理和資產管理的功能。
5.2.1 訂單管理
5.2.1.1 全部訂單
①「全部訂單」主要為商家提供店鋪產生的訂單的查詢統計,這個欄目主要包含兩個內容,頭部是檢索(包含了交易單號、訂單時間、商品類型、核銷狀態、支付方式等多種檢索條件),底部是訂單列表(包含待付款、待成交、待發貨、已發貨、已完成、已關閉、售后中和待核銷8個狀態)。
②「訂單詳情」包含訂單信息、支付信息、買家信息、發票信息和商品信息,可以查詢訂單號、訂單類型、下單時間、支付時間、支付方式、渠道來源、買家信息等數據??梢钥闯觯δ茉蕉?,訂單詳情的字段就越復雜。
迭代建議
訂單的檢索框占據了屏幕的一大半,雖然設計了「收起」功能,但卻不是默認,這影響了商家的操作體驗。其次訂單列表的設計排版略顯混亂,字段太多,訂單與訂單之間的層級沒拉開,有視覺干擾。
5.2.1.2 評價管理
「評價管理」主要為商家提供用戶評價的查詢和管理,當用戶購買商品發表評論以后,商家可以在這個欄目進行審核、回復、刪除以及設為精選。
5.2.2 物流管理
「物流管理」主要針對實物商品,包含「批量發貨」和「配送管理」兩個欄目。在配送管理,可以設置商家的運費模版、到店自提信息和發貨地址等信息,商家可結合自己的實際情況進行操作。
5.2.3 訂單工具
5.2.3.1 核銷工具
「核銷工具」可以查詢到店自提、服務類商品的核銷碼,還可以查詢店鋪的核銷記錄。
5.2.3.2 電子合同
「電子合同」是一個第三方工具,由「法大大」提供。它可以幫助商家解決高價知識商品學員不敢下單,紙質合同效率低、成本高等痛點,通過在線合同簽約,快速完成簽約,降低客戶流失率。(這個功能需要開通旗艦版,并進行企業認證才能試用)
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 提現管理
商家開通知識店鋪以后,用戶支付的費用是支付到小鵝通官方,商家需要在這個版塊發起提現申請才能到賬。小鵝通也支持用戶自動提現到賬功能,商家開通后,賬戶余額自動打款到商家賬戶。
5.2.5.6 體驗小結
「資產管理」這個版塊,對于新手商家來說,學習成本太高了,特別是分賬管理和提現管理這兩個功能,就像是一場體驗災難。我找了系統客服才弄清楚「分賬管理」的「提現申請」是針對C端的傭金提現申請(在訂貨商-業績管理欄目,并沒有提現申請審核功能,所以我一度認為這是訂貨商的提現申請管理),這花費了我的很多時間。其次我也沒弄懂「提現管理」這個功能,我一直以為店鋪交易的金額都是自動進入我的賬戶,后面才發現需要在這個欄目像平臺發起申請才能收到費用,這個版塊的功能語義給新手商家造成了太高的學習成本。
5.3 數據
數據是支撐商家運營最重要的指標,通過對店鋪及用戶的數據分析,可以為商家提供準確的運營策略參考。
5.3.1 數據概況
「數據概況」包含實時概況、核心指標、流量看板、轉化看板、商品看板和用戶看板7個內容,是對整個店鋪數據的實時監控和概覽,包括監控訪問和訂單等核心指標的當天實時情況和近期趨勢,并通過流量、轉化、商品、用戶,四個看板的核心指標反映店鋪昨日運營狀況。
5.3.2 流量分析
「流量分析」包含了「流量趨勢」和「流量分布」,提供了每日訪客數、訪問量等流量指標及其趨勢,并支持查看流量的終端系統、渠道和地域分布情況。這個功能可以幫助商家監控店鋪每天的訪問規模及變化情況,通過流量的終端系統、渠道、地域分布了解流量的主要來源。
5.3.3 交易分析
「交易分析」包含「交易概況」和「交易構成」,提供了與店鋪交易相關的訪問、下單、支付轉化及各個環節的轉化率,并支持查看新老付費用戶的占比構成、訂單金額的分布情況等。這個功能可以幫助商家分析訪客從進入店鋪到最終成交各步驟的轉化率,定位用戶轉化路徑中的主要流失環節,并對比交易核心指標的趨勢,評估運營措施是否有效。
5.3.4 商品分析
「商品分析」包含了「商品概況」和「商品效果」,這個欄目統計了店鋪的所有商品銷售數據,根據商品的訪客和支付進行排行,為商家提供一個全面的商品數據概覽。其次還支持對商品進行「單品分析」,從銷售、流量和客群三個角度全面統計,為商家精細化運營提供策略建議、數據依據。
5.3.5 直播分析
5.3.5.1 全店概況
「全店概況」可以查看商家所有的直播數據,包括近期直播、直播趨勢,系統還根據流量、觀看人數和市場為商家生成紅榜(人數多、人氣火爆)和黑榜(流量和關注人數低),幫助商家找到直播效果優秀與表現欠佳的直播。
5.3.5.2 直播效果
「直播效果」是針對每一場直播的詳細的數據統計,比如直播間瀏覽量、訪客數、最高在線人數等,其次還有兩個非常強大的功能——實時大屏和單場分析。
5.3.5.3 實時大屏
「實時大屏」就是系統可以根據直播間的數據實時生成數據可視化大屏,實時展示直播人氣、觀眾、帶貨等數據,滿足多場景數據展示需求,提升直播效率,這個功能可以應用到大促活動、品牌宣傳等場景(此功能僅支持旗艦版使用)。
5.3.5.4 單場分析
「單場分析」包含數據概覽、實時趨勢、觀眾畫像、評論分析和帶貨分析,通過實時數據、用戶畫像、評論詞云分析、帶貨分析等分析能力,對單場直播進行深度診斷,幫助提升直播效率。這個功能對于商家對單場直播的復盤總結有非常大的幫助(此功能僅支持旗艦版使用)。
5.3.6 用戶分析
「用戶分析」包含用戶概況及趨勢和付費用戶,幫助商家了解店鋪用戶的增長、活躍及轉化情況,及時調整用戶運營策略。
5.3.7 學習分析
「學習分析」包含學習概況及趨勢、學習詳情和學員排行三個內容,幫助商家了解學員學習的真實數據,比如學習人數、課程完課率、學習時段分布,從而為課程內容的優化提供數據參考。
5.3.8 下載中心
「下載中心」主要是幫助商家管理臺文件導出的統一管理和成功率監控,實現下載的文件可追溯、下載記錄可查詢,同時優化查詢和搜索體驗,實現下載管理的權限控制,避免重要數據外泄。
設計思考
最初我對這個功能不理解,感覺很雞肋。不過查看了官方的「幫助文檔」以后,我才發現這個功能為商家的運營安全性考慮得很周到。這讓我聯想到銀行的企業對公系統也有類似的「下載中心」,當用戶申請電子回單后,用戶需要跳轉到下載中心才能下載。這樣的路徑跳轉看上去繁瑣,但事實上是為了實現下載的文件可追溯和下載記錄可查詢,避免重要數據泄露。
5.3.9 體驗小結
小鵝通的「數據分析」幾乎覆蓋了商家從引流、激活、變現到留存的所有階段,不僅有對店鋪流量、交易這樣宏觀的數據分析,還有對商品、直播這樣的單品和單場微觀分析,這些精準、全面、真實的店鋪數據,幫助商家可以不斷優化調整運營方案,獲取成功。
對用戶的研究和運營是一個知識店鋪的重中之重,只有對用戶有了充足的了解才能知道用戶到底需要什么,從而不斷調整優化運營方案。
6.1 用戶
「用戶」這個版塊,主要為商家提供一個清晰直的運營助手,通過這個版塊,可以為我的用戶打標簽、制定運營計劃等,讓我對他們的學習行為數據全面了解。
6.1.1 用戶概況
「用戶概況」是對店鋪用戶的統計概覽,可以查看店鋪實時用戶數據(包含累計用戶、今日新增用戶等),其次還有店鋪重點運營人群的數據統計,比如企微用戶、超級會員等。
6.1.2 用戶管理
6.1.2.1 用戶列表
「用戶列表」包含「全部用戶」和「用戶學習統計」兩個內容。在用戶列表,商家可以查看店鋪用戶的詳細數據,比如用戶來源渠道、賬戶綁定手機號(還有一個最近采集手機號,以防用戶更換手機號碼)、消費次數、消費總額等,其次還可以直接聯系用戶(支持店鋪消息和發短信)、給用戶貼標簽、增減積分和設置黑名單(禁止評論、購買和訪問)。
6.1.2.1.1 用戶詳情頁
每一個用戶都有詳情頁,「用戶詳情頁」包含了用戶資料、用戶標簽、超級會員權益、用戶資產(包含積分、優惠券數量、兌換碼數量等)和行為統計(包含學習數據、課程進度、用戶評論和訂單記錄等)。通過對用戶多維度的數據統計,可以幫助商家對用戶有更全面的了解,從而可以對用戶進行分類,推出更精準的商品服務。
6.1.2.1.2 用戶學習統計
「用戶學習統計」包含匯總數據、課程數據和考試數據?!竻R總數據」是「課程數據」和「考試數據」的數據匯總,可以查看用戶的累計學習時長、累計學習天數、提交考試、提交作業的信息,這個功能可以幫助商家了解用戶真實的學習情況,從而進行課程優化調整。
6.1.2.2 標簽管理
「標簽」可以幫助商家快速定位目標用戶,并依據標簽進行定向運營,從而提高運營效率。小鵝通的標簽分為兩種形式,一種是「手動標簽」,輸入關鍵詞就可以自動生成;另一種是「自動標簽」,可以通過設置用戶行為和學習行為的條件,當符合條件的用戶出現時自動生成。
①「用戶行為」是根據用戶在店鋪的消費行為來設置,包含注冊時長、最近訪問商品(可選擇用戶訪問的指定商品)、收藏商品、下單商品、購買商品、消費總額和消費次數7種類型;
②「學習行為」是根據用戶的課程學習行為來設置,包含累計學習時長、打卡次數、完成的課程、加入的打卡、提交的考試、提交的作業和加入的社群7種類型;
③自動標簽的生效規則支持滿足任一條件生效和滿足全部條件同時生效,非常靈活。
設計思考
「自動標簽」這個功能的設計實在是太贊了,不僅可以根據「用戶行為」和「學習行為」的14種類型進行設置,還可以根據這些用戶行為進行組合生成不同的標簽。比如你想快速判斷哪些用戶是你的忠誠用戶,你可以建立一個「忠實用戶」的標簽,然后設置「消費總額」超過1000元和「累計學習時長」超過10小時這兩個行為,當用戶滿足這兩個條件以后,系統就會為他自動生成「忠實用戶」的標簽。
6.1.3 用戶運營
6.1.3.1 用戶分群
「用戶分群」和「自動標簽」有點相似,通過設置用戶行為和學習行為,把用戶進行快速分組。這樣的好處是方便商家對不同的用戶人群進行定向運營。
①「新建人群」和「自動標簽」一樣,需要設置用戶行為和學習行為,相比「自動標簽」,「新建人群」的用戶行為更多,包含了15種類型,內容更豐富。
②當「用戶人群」建立以后,商家可以查看人群分析、導出數據以及定向開展運營活動。
6.1.3.2 運營計劃
「運營計劃」是一個以提高商家運營效率和效果為目標的工具,商家可以針對指定的人群發放權益和活動通知,用高頻的外部觸發來實現活動目的。官方設計了五種智能運營,對應了五種不同的場景,比如流失客戶召回,主要針對那些在店鋪有過消費但30天未回放過店鋪的用戶。
6.1.3.2.1 新建計劃
①「新建計劃」包含三個內容,在基本信息,商家可以選擇目標人群,然后選擇計劃方式,包含長期計劃(商家可選擇起始時間,系統會在這個時間段內向用戶發送營銷通知)和定時計劃(在商家設定的時間內進行營銷通知)。
②在「權益禮包」,商家可以選擇運營計劃贈送給用戶的權益,可選擇優惠券、超級會員和積分。
③在「通知設置」,商家可選擇向用戶發送營銷通知的形式,比如發短信、發送店鋪信息、企業微信發送等。
6.1.3.2.2 智能運營
「智能運營」是小鵝通官方給商家設計的五個場景,分別是興趣轉換(激活7天內未付款訂單)、新客復購(促進成交過1次的客戶在30天內復購)、維系高活躍用戶(對近7天訪問商鋪的用戶進行維護)、流失客戶召回(召回在店鋪有過消費記錄但已經30天未訪問店鋪的用戶)和激勵喜好用戶(對收藏過店鋪商品的用戶進行激勵)。這五個場景,可以極大降低商家的學習成本,一鍵開啟運營計劃。
6.1.3.2.3 數據分析
在運營計劃開啟后,商家可以通過「數據」查看計劃的詳細數據。從覆蓋人到付款人數,通過轉化漏斗,多維度向商家統計出各步驟的轉化率,幫助商家可以靈活調整計劃,實現運營目標。
6.1.3.3 超級會員
「超級會員」可以簡單理解為店鋪的VIP會員,商家可以建立不同的會員規格,以商品的形式進行售賣,比如季度會員、半年會員和年費會員等。這個功能不僅是商家的用戶運營利器,還可以提高忠實用戶客戶量、留存率和活躍度。
6.1.3.3.1 添加會員卡
會員卡的添加包含基本信息、會員權益、展示設置和會員說明四個部分。通過可視化的設計,用戶可以實時預覽「超級會員」的頁面效果,體驗非常好。
①在「基本信息」,可以設置會員卡的規格,比如1個月、3個月、6個月的有效期,還可以限定用戶購買的次數;
②在「會員權益」,可以設置會員卡的折扣權益(支持指定特定商品)、免費權益(支持對圖文、音頻等欄目統一設置)以及和優惠券、優惠碼進行權益疊加;
③在「展示設置」,可設置會員卡的界面風格,支持自定義上傳,還可以加入權益商品的展示。
細節偵查
小鵝通這個產品,幾乎所有核心頁面都支持商家自定義配置,幾乎是傻瓜式的操作,雖然犧牲了一些個性化的設計,但極大降低商家的運營成本。
6.1.3.3.2 會員卡詳情頁
會員卡建立以后,可以從會員卡列表進入會員卡詳情頁。「會員卡詳情頁」包含了會員列表、數據分析和運營設置三個內容。
①在「會員列表」,可以查看購買超級會員的用戶詳細信息,可以給用戶貼標簽、延長有效期等;
②在「數據分析」,可查看超級會員詳細的用戶數據,比如累計會員數、新增會員數、用戶轉化漏斗、會員地域分布等數據,通過多維度的數據分析幫助商家提升運營效率;
③在「運營設置」,可以對用戶的信息進行采集(調用店鋪的信息采集微頁面)、CRM分配和私域引流的設置,幫助商家獲取新用戶的信息,拉新轉化。
6.1.3.3.3 全局設置
「全局設置」是為商家提供對「超級會員」統一設置的功能,,比如是否支持換購其他會員卡、是否支持用戶分享獲益等。
設計思考
「超級會員」是一個非常好的營銷工具,它可以滿足商家按月、按年的收費場景,相較于單個課程一次性的買賣,「超級會員」更適合打造高質量內容知識店鋪,也能幫助商家拓展一批忠實付費會員。
6.1.3.4 積分商城
「積分商城」是一個非?;A的營銷功能,作為用戶留存的重要手段,小鵝通的「積分商城」以消費、任務兩種積分發放方式,抵現、兌換兩種消耗方式,構建起了基礎的積分體系,幫助商家維系存量用戶,提高店鋪的用戶留存率。
6.1.3.4.1 積分發放
①「積分發放」包含「消費發放積分」和「任務發放積分」兩種類型?!赶M發放積分」是指商家可以設置用戶在店鋪的消費任務獎勵積分,有效刺激用戶消費,這個功能支持商家自定義配置,非常靈活。
②「任務發放積分」包含基礎任務(綁定手機號、完善個人信息)、學習任務(可設置學習時長等)和助學任務(連續打卡獎勵等),用戶完成對應任務后可獲取積分,有效提高用戶留存率和活躍度。美中不足的是,這個功能不支持自定義配置,靈活性較低。
6.1.3.4.2 積分消耗
①「積分消耗」包含「積分抵現」和「積分兌換」兩個功能?!阜e分抵現」是指用戶在購買指定商品時候,商家可以自行設定積分抵扣的比例,從而刺激用戶消費。
②「積分兌換」是指用戶可以通過積分兌換指定的商品,這是一種常見的會員權益。
6.1.3.4.3 用戶列表
「用戶列表」主要提供查詢店鋪用戶使用積分的情況,比如給用戶增減積分、查詢積分明細等等。
6.1.3.4.4 通用規則
「通用規則」為運營者提供積分規則的設置,比如積分有效期、積分凍結期,其次還支持手動設置積分規則的頁面內容。
6.1.3.4 信息采集
「信息采集」是一個非常靈活的用戶信息采集工具,通過自定義配置(包括手機號、微信號、姓名、聯系方式等字段),可以幫助商家在店鋪的運營中有效搜集用戶的資料,清晰刻畫用戶畫像,搭建思域流量池。其次「信息采集」作為一個公共組件,關聯了很多使用場景,比如超級會員、拼團等,它就像一個微頁面一樣,商家可在指定功能版塊進行靈活配置。
6.1.3.4.1 新建流程
①「信息采集」包含三個步驟,第一步是「編輯表單」。商家可根據自己的需要拖曳左側的組件庫(包含聯系人組件和基礎組件兩個分類,比如姓名、年齡、公司、證件號、電話號碼、生日、行業等)。
②第二步是「采集設置」,可以填寫采集表的引導信息(包含標題和提示文字),可以開啟重復采集(若信息關聯多個場景,支持用戶單獨填寫,商家無需重復建立)和獨立采集。
③第三步是「選擇采集場景」,包含指定商品購買、優惠券領取、活動打卡等,這一步非必選項,商家可結合店鋪運營實際操作。
迭代建議
「信息采集」這個采集工具真的非常方便,可以幫助商家高效地搜集精準用戶信息,從而提升運營效率。不過「信息采集」的用戶數據只支持導出到本地,而不像其他欄目有詳情頁和數據分析,這降低了信息采集的效率,效果大打折扣。
6.1.4 消息互動
「消息互動」是指商家可以為用戶發送消息通知,用戶也可以通過這個功能向商家提供反饋?!赶⒒印拱ā赶⒘斜怼埂ⅰ赣脩舴答仭挂约啊冈u論管理」三個模塊,通過這個功能,可以讓商家統一管理與操作店鋪消息,及時掌握學員的最新情況,通過反饋及時調整產品策略。
迭代建議
在新建「消息推送」的模塊,“發送人”的語義不夠準確,這會讓商家對這個字段搞混淆,不知道這個表格填入什么信息。其次也缺少了推送給指定用戶組,不夠完善。
6.1.5 體驗小結
作為一個知識付費的從業者,在體驗完「用戶」這個版塊以后,幾乎放棄了傳統模式定制開發的念頭。「自動標簽」的設計,讓我大開眼見,原來小鵝通的系統可以根據用戶的行為來生成標簽,這可以讓你快速知道哪些用戶才是愿意為你的知識付費的重視人群?!高\營計劃」這個功能設計得太好了,官方不僅提供了五個常見的運營場景幫助商家提升運營效率,而且傻瓜式的權益配置極大降低了商家的學習成本?!赋墪T」更是完善了知識付費的其他場景,比如按月收費、年費會員等。
6.2 圈子
「圈子」就像一個知識星球(一款社群工具),主要為商家提供一個老師和學員進行日?;顒咏涣骱透哔|量內容沉淀的社區工具。「圈子」的功能非常豐富,支持設置群主、成員管理、發布及精選圖文動態、置頂群公告等功能,其次還支持在圈子內添加學習任務,滿足訓練營場景,學員可直接在圈子內學習課程、交流與互動,最終幫助商家打造一個高品質的學習型社群,提高學員的忠誠度和留存率。
6.2.1 創建圈子
「圈子」的創建比較簡單,填入基本信息以后,需要在「售賣設置」選擇入圈方式,支持免費、付費模型,還可以關聯專欄、超級會員和設置入圈截止時間,「圈子」就創建成功。
6.2.2 圈子詳情頁
「圈子」創建成功以后,在列表頁可以對「圈子」進行管理操作,包括管理、編輯、分享、刪除和轉讓圈主等功能。
6.2.2.1 內容管理
「內容管理」是針對圈子發布內容的管理,包含動態列表、待回答和圈子標簽三個欄目。管理員在這個頁面發布圈子動態,對圈子發布的動態進行審核、編輯、刪除和加精。
6.2.2.2 售賣設置
「售賣設置」是指對圈子的加入方式進行編輯,支持付費和免費兩種模式,但付費方式僅支持從“免費”改成“付費”,其他功能和「圈子」新建無區別。
6.2.2.3 應用管理
「應用管理」包含三種應用類型,課程、日歷打卡和商品櫥窗。這三個應用其實對應「圈子」前端的一級欄目,添加以后學員在圈子首頁就能訪問,幫助商家提升付費轉化和用戶活躍度。
6.2.2.4 運營設置
「運營設置」包含信息采集、CRM分配、續費通知、私域引流和圈子展示五個欄目,主要幫助商家結合其他營銷工具提升用戶的運營效率,比如可以開通「信息采集」工具,高效精準搜集用戶的信息,還有CRM線索分配,可以把潛在用戶分配給其他員工。
6.2.2.5 激勵設置
「激勵設置」為商家提供了「成長任務」和「勛章」兩個營銷工具。在「成長任務」,商家可以針對用戶的互動、課程學習以及打卡設計排行榜,比如發帖數、評論數、分享等;商家開啟「勛章」以后,可以建立「圈子」的勛章體系,不僅可以對活躍用戶進行獎勵,還能有效刺激用戶參與度,最終提升用戶的活躍度。
6.2.2.6 成員管理
「成員管理」是對加入圈子用戶的統一管理,可以查看用戶的詳情頁,了解用戶的詳細信息和活躍度;可以給用戶貼標簽,鎖定精準用戶;還可以給用戶延長有效期、加入黑名單和移除圈子。
6.2.2.7 數據分析
「數據分析」包括交易數據、活躍數據、學習數據和打卡數據這四個維度,在這個欄目可以查看到圈子所有的數據信息,比如累計支付金額、今日加入成員、課程學習完成率、任務完成率等,有效幫助商家提升圈子的運營效率,及時調整運營方案。
6.2.3 體驗小結
如同前面的比喻,「圈子」就像一個知識星球,為商家提供了一個功能強大的社群工具,幫助商家打造一個高品質的學習型社群。和「知識星球」相比,「圈子」更能幫助商家提升付費轉化率,比如商家可以通過「應用管理」就可以添加商品和課程,從而提升付費商品的曝光度。再加上CRM分配、私域引流等工具,「圈子」可以通過用戶的日常行為數據幫助商家獲取用戶的付費意愿、偏好和消費能力,提升店鋪的業績。
感謝閱讀,小鵝通產品拆解的第三部分就到這里,下一篇是小鵝通后臺拆解的最后一篇,我們將會拆解企微CRM這個核心功能以及對小鵝通的后臺設計進行總結。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B端項目一般用到的顏色會很豐富,再帶上數據可視化場景,那需要的顏色需求就會更多。像Ant design色彩體系包含12個主色以及衍生色:
Material design色彩體系包含16個主色以及衍生色:
那這種即能滿足多種不同場景的同時色彩搭配在一起又很協調的色彩體系,是如何科學搭建的呢?
從各大廠的色彩規范中,可以總結將色彩劃分為4種類型:
主色(品牌色)
常用于主按鈕、文字高亮、重要信息高亮等場景~
中性色
常用于文字、圖標、卡片背景色、分割線、邊框之類的~用于處理頁面信息主次關系,助力閱讀體驗~
功能色(語義色)
功能色代表了明確的信息以及狀態(比如成功一般用綠色,出錯失敗一般用紅色,提醒一般用橙色/黃色,鏈接一般用藍色~)
擴展色
常用于更多顏色需求場景,比如Dashboard頁面的圖表(數據可視化)、插畫配圖等
通常會制定8色板、12色板、16色板。比如Ant design的色彩系統是制定了12個色板,Atlassian design是制定了8個基礎色板(可以衍生16或者24色板),Material design色彩體系是制定了16個色板~
在創建之前,我們先了解一下HCT / HSL / HSB 色彩空間
這些色彩空間的區別,想要了解的可以到網上查找一些專業知識~我們這里只針對項目中使用哪一種色彩空間能夠為設計師調色帶來便捷性出發。
H-色相/色調
是色彩的基本屬性,就是平常所說的顏色名稱(如紅色、黃色)等,取值在0—360度之間(黑色與白色無色相);
S-表示飽和度/純度
顏色的純度,取值在0—100之間,飽和度高色彩較艷麗。飽和度低色彩就接近灰色;
B/L-表示明度
顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到純白,最低得到純黑。
Ant design設計團隊使用的是HSB顏色模型進行設計,認為設計師在調整顏色時更容易對顏色有明確的心里期望,并促進團隊溝通。
HCT是Google研制的色彩空間~
H-Hue色相
取值在0-360之間;
C-Chroma色度
可以理解為色彩濃度,取值在0-100之間,數值越大,顏色濃度越濃;
T-Tone光度
也就是亮度,取值在0-100之間,數值越大,顏色越亮。
*個人認為無論采用哪一種色彩空間,只要真正能夠幫助到我們運用在項目中,都是可以滴
品牌色是體現產品特性和傳播理念最直觀的視覺元素之一,常用于主按鈕、文字高亮、重要信息高亮等場景~
確定產品主色的思路有以下幾種:
了解業務屬性
屬于哪一個行業、產品的定位是什么、目標受眾群體,想給用戶傳達怎樣的視覺感覺;
競品分析
了解同業務屬性的產品一般用的哪些顏色,從而獲得靈感;
滿足WCAG2.0標準
文本的視覺呈現以及文本圖像至少要有1:4.5的對比度,以確保所有的文字內容清晰易讀,對比度足夠。工具網址:Color review https://color.review
從B端領域里面一些國內國外大廠的設計規范中,我分別將主色在亮暗模式背景下進行可讀性測試,學習到以下內容:
1. 亮暗模式下可以選取不同顏色做為主色,但亮暗模式的兩個主色是在同一個色板的衍生色上;比如國內的TDesign,國外的Shopify\Atlassian\Salesforce色值不同;一般情況下會選用一樣的主色在亮暗模式下;
2. Shopify\Atlassian\Microsoft無論在白色背景還是黑色背景上,都滿足WCAG2.0的標準。剩下的要么在白色背景上不滿足,要么在黑色背景上不滿足。(當然這些都只是作為難捏不準主色時的一個參考,并不是規則~)
我負責的一款海外產品,主要是對服務器、數據庫監控分析的工具,客戶選定的主色是藍色系,他們很喜歡datadog這個產品,我發現該產品的主色在HSB模式下,S色彩濃度高 B明度值76視覺上偏灰,加上客戶產品的logo主色H值是偏紫色調,所以最終確定在亮模式下用#0756D5為主色(亮暗模式的選擇,我打算采用Shopify\Atlassian\Salesforce的方法,暗模式下用主色的衍生色~)
功能色可以用于特定功能、狀態反饋、應用圖標、dashboard數據表盤等場景,最常用到的反饋的成功、失敗、警告狀態~
結合參看其他優秀的文章,加上我自己的一些實踐思考,方法匯總如下:
1.以主色色相為基礎,差值15°,圍繞360°色環取24色~另外大家都知道相差15°的顏色為鄰近色,那我們提取出來的任何兩個相鄰的顏色都是鄰近色,我們拆分出來的色彩是比較和諧的~
以我負責的海外項目為例~
2.根據自身產品系統的復雜度,在24色板上去掉接近的顏色,篩選出一定說的顏色。前面也有提到一般是8、12、16色板。我負責的項目選擇是10個色板~
3. 色彩校正
HSB色彩空間最大的弊端就在于相同 Saturation(飽和度) 和 Value(亮度)的色彩,在不同的 Hue (色相)上的亮度感知是完全不一樣的,其原因是 HSV/HSL 色彩空間是應用于數字化圖像處理領域,為了方便機器理解、計算、呈現而設計,是人類視覺的線性模型,但人類的感知卻是非線性的,所以造成數值與感知不匹配的問題
市面上的校準方式一般是在顏色上面疊加純黑色圖層,圖層模式選擇色相,就可以直觀地看到無彩色視覺感官明度~具體怎么調,是不是就按照這個方式全部都要調成統一的感官明度?我去研究了Apple/Material design/Ant design的色板,從里面選取統一編號的顏色,發現如下:
他們的色彩明度并不是完全一致的,一般是橙色、黃色這些帶有語義的顏色明度會亮一些~所以色彩校正不能完全調成一樣的感官明度,只能作為一個輔助。
為了滿足界面對色彩的需求,需要對主色和輔助色進行色板延伸,建立不同梯度的調色板。常用的有2種方法:
第一類:手動調整
1.淺色調色板,在顏色上有序疊加( 比如20%、40%、60%、80%、90%)不透明度的白色#ffffff;深色調色板,在顏色上有序疊加 (比如20%、40%、60%、80%)不透明度的黑色#000000。(數值并不是固定的,設計師可按需自行調整~)
2.淺色調色板,色相(H)往感光明度高的色相依次差值 2,飽和度(S)依次減少 15,明度(B)依次增加 5;深色調色板,色相(H)往感光明度低的色相依次差值 2,明度(B)依次減少 15,飽和度(S)依次增加 5。(Ant Design 和 Material Design 調色板也都加了色相旋轉)
第二類:使用色板生成工具(走捷徑)
1.Material Design
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
2. Ant Design
https://ant.design/docs/spec/colors
3. ColorBoX
4.figma插件Supa Palette(收費)
中性色包含了黑、白、灰,是頁面中文字、背景常用的顏色,為產品界面創造結構、表達邊界、建立信息層次,保持舒適的對比度是提高可讀性和吸引用戶注意力的關鍵。
最熟悉的常見文字顏色就是#333,#666,#999,我喜歡直接拿Material design的灰色色板來用,同時還會拓展藍灰色板(在確定好灰色色板后,在上面疊加主色的不透明度即可生成藍灰色色板~)應用于圖標、背景、描邊。
最后,得出所有顏色的同色系色階:
從色板里面挑選亮模式下主色為Primary600,暗模式下主色為Primary400,實際效果圖如下:
dashboard數據可視化頁面的配色方案我是如何實踐的呢?
結合AntV數據可視化色彩體系 https://antv.vision/zh/docs/specification/language/palette 和文章https://pixso.cn/designskills/shujukeshihuapeise/
匯總如下:
根據不同數據類型、使用場景擴展出 6 種可視化色板類型
適用于描述不同類別的數據,比如餅圖的不同分類、填充地圖中的不同國家、關系圖中的不同角色等
適用于表示數據樣本中數值或梯度的變化,如排行榜等級變化、風險等級變化等
適用于描述數據正負值的變化,中間一般會有一個中間值(通常為0),比如氣溫的冷熱、海拔高低、股票漲跌等
將兩組順序色板通過圖層疊加模式產生一組新的色板,一個顏色代表兩種變量數據,常用于觀察一個事物兩個維度變化的相關性
對比突出重點或特殊數據,將重點關注的數據標以高飽和度的強色調,其他普通數據標以低飽和、低明度的基本色。常用于對比重點關注事物與其他分類事物的差別
適用于氣象預警配色、紅綠燈配色、股市的紅漲綠跌等
我負責的項目數據類型采用的是兩種配色方案
1.不同類別的數據,圖表類型有餅圖、折線圖、柱狀圖采用分類色板;
2.明確表明狀態的用語義色板
如何從色彩系統中調分類色板呢,我常用的方法如下:
1. 參照Echart的配色規律(保守不會出錯的方法)
2. 研究市面上做的好的表盤產品(比如Mixpanel)或者競品Datadog的配色規律
3.無障礙測試校驗-色盲群體的適用性
大約10%的世界人口是色盲,可以借助工具來校驗:Adobe color 網頁版 https://color.adobe.com/zh/create/color-accessibility
實踐才是檢驗真理的唯一標準~色彩規范只是為了讓設計更有章法、更有說服力,在運用色彩時還是需要謹慎克制,可以研究各大廠的設計規范,然后把學到的東西運用在項目實踐中。
作者:志龍有妖氣_zlyyq 來源:站酷網
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
今天帶來的是《交互設計沉思錄》第一部分的第二章「管理復雜性」。
主要講述的是交互設計師是如何理解&組織所獲取到的數字、文字數據。
通過這些步驟&方法能夠幫助交互設計師更加清楚信息間的關系,建立很強的心智圖景。
其間也穿插了很多職能相關部分的對比,如「交互設計師與信息架構師」「交互設計師與界面設計師」「交互設計師與電子工程師」。
作者:Viola_1241 來源:站酷網
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
莫奈是一款主要服務京東內部用戶的數據可視化平臺,它以容器的形式將京東城市各種與智慧城市建設及運營相關的能力聚合,并以可視化的形式面向客戶呈現。
作為京東莫奈的設計負責人,過去三年一直負責莫奈可視化平臺的用戶體驗設計工作,由于本人日常設計主要以智慧城市、數據可視化大屏為主,所以我即是莫奈的設計負責人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中,本人梳理了大量與視覺、體驗相關的問題,這些問題,部分在產品日常迭代中得到了優化,但是也有相當一部分解決起來具有一定的難度和成本;與此同時,作為用戶體驗設計師,我日常與業務方、客戶方以及用戶接觸緊密,所以在與大量用戶溝通后,也從用戶側收集了不少使用體驗相關的問題。我對以上兩個渠道的問題整體梳理匯總,并與產品側討論溝通后,大家認為這些問題比較嚴重的影響了用戶使用莫奈的效率,降低了莫奈對業務側賦能的質量,提高了客戶使用莫奈的成本。所以我們必須規劃出一個產品迭代的周期,針對莫奈體驗問題,進行一次密集的優化和革新,這便是本次莫奈體驗升級改版的基礎背景和原因。
本篇文章寫作的主要目的,是想將本人在這次改版設計中用到的一些方法、流程和經驗與大家做次交流和分享,希望能為同行在類似的改版設計中提供一定的借鑒和參考。
實際上,在梳理出整個體驗升級流程之前,通過與產品負責人的多次溝通,我們事實上已經對體驗升級這個需求達成了共識,而流程圖解決的是做什么、怎么做的問題。
下圖展示的這套體驗升級流程較為通用,大多數產品的體驗升級都可參考下面的流程執行。
這套流程的主要作用有兩個,一是通過它可以更直觀的跟產品負責人、開發負責人等關鍵角色溝通,讓大家對體驗升級這件事兒有整體且全面的了解,方便大家評估工時、預估成本和安排排期;另一方面也能夠使我自己的工作推進的更加有節奏有條理,避免工作內容長時間停滯在某一個環節而影響整體進度。
基于STAR法則,背景概況部分向大家介紹莫奈體驗升級的必要性。在企業中,想要推動一個需求順利執行,那一定是需求上下游以及相關方的利益都得到了體現和滿足。莫奈此次升級,從體驗設計師角度來講,我們作為用戶的代言人,在了解到用戶大量反饋和建議后,有責任將用戶的聲音轉化為需求,并推進落地為產品的一部分;從產品團隊來講,莫奈想要不斷發展,持續為客戶和業務方帶來顯著的效率提升、明顯的成本下降,也必須對過去老舊的產品架構做一次深度的革新和優化;從前端工程師、研發同學的角度看,以往不合理的底層代碼設計,使產品在性能、穩定性等方面留有大量隱患,因此在日常迭代工作之外,研發同學總要消耗部分精力去維護那部分不穩定的存在,從而導致研發同學人效比低、開發體驗差;從上級Leader來看,公司的核心經營理念是“成本、效率、體驗”,但成本的降低、效率的提升、體驗的優化都依賴于強悍的技術和優秀的產品,而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試,綜上,此次體驗升級于多方有益,符合部門整體利益,所以大家很快達成共識。
通常我們說用戶體驗時,用戶是一個群體的概念,而這個群體如上圖所示,可以被進一步細分為多種角色,理想情況是每一類角色的體驗都被滿足,但現實執行中我們必須要有策略和取舍。所以要想產品有好的體驗,首先我們要知道用戶群體中不同角色對產品的使用情況如何,并找到對產品依賴度強使用頻次高的那部分用戶和場景,然后針對他們以及他們使用的場景做高優先級的優化。
從莫奈典型用戶使用場景可以歸納出:
首先,莫奈的主要使用者為各個項目的產品經理及開發工程師,其中設計師也有相當大的使用強度,這三類用戶他們直接使用莫奈,并把莫奈作為解決數據可視化場景構建相關需求的主要工具和方案,所以,以上三類用戶,我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產出的作品,經由上下游同事傳達和部署給業務方及客戶后,莫奈的商業價值便得以體現。
其次,每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發現,莫奈的使用具有上下游的關聯性,核心用戶處于流程的下游,中上游的用戶雖不是核心用戶,但他們因為更接近客戶和業務,往往具有比核心用戶更高的決策權。因此我們優先讓核心用戶體驗提升并不意味著放棄上游的體驗,而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色,通過核心用戶使用莫奈交付的結果來證明莫奈的可靠。與此同時,我們也通過對內外的宣講和培訓,持續接收上游用戶的反饋,并在迭代中持續優化。
知道了核心用戶是誰,那么核心用戶的體驗痛點是什么呢?
雖然在日常的交流溝通中我們已經獲取了不少用戶反饋、收集了相當的問題建議,但作為體驗升級的系統性工作,為了更全面的了解用戶體驗痛點,我們還是設計了一次完整的用戶調研活動。本次調研主要采用線上問卷調研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統,除了面向核心用戶推送,我們還面向莫奈主流用戶及邊緣用戶推送了問卷內容,因此,問卷調研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶,我們也從問卷系統中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內外部用戶,以期獲得更加客觀真實的反饋。
用戶調研的核心目標是充分收集用戶反饋,并將反饋結果量化及系統化,量化后的結果可做為設計側推動產品執行體驗優化的關鍵依據,也可以作為后續驗證優化結果的對照項。
本次問卷設計我們參考了PSSUQ整體可用性量表,并結合本次調研目標做了部分調整。
PSSUQ整體可用性量表可以從系統易用性、信息質量、界面質量三個方面將體驗結果量化,然后通過與行業基本經驗值比較,既可以知道用戶對莫奈在以上三項的滿意度,也可對莫奈當前整體體驗結果有一個全局的概況性評價。同時根據三個方向的評分也可以更細致的指導后續的設計優化方向,為設計決策提供更多科學可信的依據。
PSSUQ整體可用性量表作為一個通用模版,其內容比較固定,為避免多次打擾用戶,提升問卷調研效率,我在PSSUQ的基礎上添加了少量關鍵信息甄別、用戶反饋積極性識別類問題,從而使問卷內容更加符合本次調研目標。
問卷設計好之后,接下來就是問卷發放以及結果分析了。
PSSUQ量表內每個問題均有8個選項,【1-7】是對該項描述的認可程度,得分越低代表用戶對該項描述越認可;【NA】代表用戶對該項描述無法評價。本次調研通過京東良研發放線上問卷100份,共收到有效問卷反饋87份(大于PSSUQ所需的最少樣本數量:20),說明問卷結果具有較好的可信度,其結果值得進一步研究。
通過整理和統計問卷數據,可以得出以下結論:
1、內外部用戶在系統易用性、信息質量、界面質量三個維度對莫奈均不滿意
2、對比行業經驗值(均值),莫奈系統總體體驗質量與行業同類產品存在明顯差距
3、莫奈用戶群體整體積極性較高,具有較強的溝通及反饋意愿
整體評分結果與日常同相關同學的溝通結果一致,以上評分結果也反映出此次體驗升級的緊迫性,作為由設計驅動的改版設計,設計側面臨較大壓力。
在設計問卷的環節我也提到過我們的問卷在PSSUQ量表的基礎上針對本次調研目標做了部分調整和優化,而線上問卷最后兩個選項以問答題的形式向被調研用戶提供了對莫奈各方面建議的反饋渠道,通過問答項我們收集到用戶反饋的各類問題80多條,我們采用親和圖對這些反饋做整理,親和圖顧名思義,它可以使具有類似特征和關聯屬性的問題更加臨近,從而將零散的問題被歸類,方便從雜亂的問題中找到規律,并通過比較不同類型問題的占比,更直觀的了解用戶反饋的問題主要集中在那些方向。
如下圖所示,產品的反應速度及穩定性、模板和組件豐富度是用戶反饋問題最集中的兩項,前者影響用戶最基礎的使用體驗,后者決定產品能多大程度上便捷的服務用戶。良好的穩定性和反應速度可以讓用戶專注于任務本身,而使用模板能最快速的產出作品,降低新手的使用門檻,豐富的組件能夠滿足用戶在各類復雜場景下的業務需求,減少組件二開成本,提高交付效率。針對這兩個大的問題點,首先,對于那些能夠在當前產品日常迭代中優化的點,我整理后會以需求的方式向產品團隊提出,并在日常迭代中逐步優化;然后,對于那些需要“傷筋動骨”做底層優化以及長期運營沉淀才能有效改善的問題,我們會進一步向用戶收集和完善相關信息,并將相關問題梳理到本次改版任務中,做系統的解決和處理。
在【05、體驗痛點分析-用戶調研部分】已經介紹了本次參與訪談的用戶來源,但在實際執行時,我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解,需要面對面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業以及使用莫奈的主要場景、頻次、設備等,然后通過給用戶設置一到兩個簡單的任務,觀察用戶在完成任務過程中的行為、表情、語氣等,以了解莫奈在一些典型使用場景下的易用性及可用性。比如,對于視覺設計師:請在畫布中添加一個條形圖,并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發工程師:請在畫布中添加一個環形圖,并使用json為環形圖添加一組動態數據....。之后,在用戶完成基礎任務后,我們還會針對用戶關心的問題進行更細致的溝通,了解用戶更細致的反饋。對于用戶反饋的問題,我們整理后會在公司內部的需求及研發管理系統“行云”中以需求的方式提交給產品團隊并同步添加反饋問題的用戶為該需求的關注者,后續,當該需求的狀態有任何更新時,問題反饋者都能及時收到更新。如此,受訪者反饋的問題從需求提交到需求最終提測驗收,都能在線跟蹤并閉環。這樣做既是我們團隊的責任,也可以增進用戶對莫奈的信任,并期望活躍用戶后續能繼續為莫奈提供建議和反饋。
通過線上問卷調研及線下訪談,我們已充分了解了用戶心聲,接下來我們通過用戶體驗5要素模型,將各類問題進一步歸納并按照產品建設的上下游協作關系,把每一個具體的問題匯總給對應的角色,并由對應的角色產出具體的解決方案,然后通過線下會議同步各自方案并對方案進行評審和溝通,由此,關于體驗升級的所有事項及具體任務便可周密安排,之后便是資源投入、推進升級工作具體執行。
用戶體驗5要素模型,從產品的戰略層出發,層層遞進直到表現層,把影響用戶體驗最根本的因素分層并可視化,借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解,并能促成大家在更大的層面上達成共識。以往談到用戶體驗,大家首先想到的是界面是否好看、交互是否流暢,然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視,尤其對開發側同學更是如此,他們鮮有意識到產品的目標、內容以及性能等這類的因素,也是構成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續迭代的產品來說,好的用戶體驗并不能以“畢其功于一役”的方式來實現,而是要通過持續不斷的改進和優化才能持續滿足并提升用戶體驗,所以借助用戶體驗5要素等模型,我們引導產品及研發團隊更好的理解用戶體驗,這樣不僅能幫助設計師在本次體驗升級改版工作中與大家高效協作,也非常益于之后日常產品迭代的溝通與協作。
上一步,我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色,之后各個負責人產出解決方案并與大家評審和溝通,而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結果,體驗升級方向以設計為主導,同時兼顧產品和研發的部分目標,我們用5個短句將五個升級方向概括,每個方向盡量解決一個維度的問題,比如“界面視覺質量提升”解決表現層的問題、“信息層級優化”解決框架層的問題。體驗升級方向作為對體驗升級結果的導向,將指導后續設計動作的展開。
基于體驗升級方向,接下來就要制定具體的設計策略,來實現體驗升級方向中要達成的結果。設計策略制定第一步先確定設計目標,我們將設計目標拆解為三個方向,每個方向通過兩個關鍵詞定義。設計目標主要分為視角與交互兩個方向,同時兼顧產品側“易拓展、易維護”的需求。實際設計中,視覺與交互并非獨自分開進行,在設計開始的階段,需要先定義設計風格等基礎設計要素,之后視覺便可在此基礎之上全面展開,此時視覺設計要考慮交互的效果,交互設計也需要斟酌設計的展現。
對于設計目標中關鍵詞所代表的那些抽象概念,每個人的認知可能都不一樣,但是搜索引擎和大數據推薦的算法,可以告訴我們普通大眾對那些關鍵詞所表現出來的意象是如何認知的,之后我們便可從符合大家普遍認知的視覺素材中,提取出符合關鍵詞所表達出的意象的設計要素,之后通過在設計中應用這些設計要素,就能把關鍵詞定義的抽象的設計概念轉化為具象的認知,我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。
我們使用搜索引擎以及AI推薦的關聯算法,針對“科技和高效”這兩個視覺目標的關鍵詞收集了海量的音視頻設計素材,把這些素材集合在一個畫布上形成“情緒版”,然后通過歸納這些素材共有的特點/要素,就能將體現“科技、高效”這兩個概念的所有設計要素剝離出來,并通過簡潔的文字加以描述和歸納。此后,我們通過在視覺設計執行的過程中應用這些設計要素,通過合理的搭配和組織,將這些設計要素融入到莫奈新的設計語言,如此,產品最終便可在視覺上呈現出與視覺目標關鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設計要素其實已經足夠具體,但是如何將這些要素應用在設計中,我們還需要進一步歸納。我個人一直以來習慣從形、色、字、質、構、動、音7個維度分析一個設計作品的設計風格,就如同人體是由肌肉、骨骼構成的一樣,以上7個維度也是構成一個設計作品的“經、骨、肉”。所以,我認為對于一個設計作品,尤其是UI設計作品,以上7個維度基本能夠完全概況它的風格,所以當我要為自己的產品做風格設定時,我也是從這7個維度出發來為每個維度定義具體的風格和策略。
這種細分維度然后定義風格的方式有多種優勢,其中最明顯的是它能夠將我們風格定義的設計工作條理化,避免反復嘗試和摸索造成的大量返工和思緒混亂,比如,如果我對質感的定義有偏差,不符合情緒版中提取出來的設計要素的特點,這時候我只需要對“質感”這個維度的風格進行優化和調整,而不需要推翻整個7要素重新再來。這種設計方式讓我的設計更加理性,也讓后續設計執行的工作更加的有條理和舒適,從設計風格落地的角度來講,這種方式我個人認為是最能夠忠于情緒版所歸納出的設計感受的方法。
對于產品界面的造形設計,一方面依照情緒版中提取的設計要素“透視、空間感、異構造形”來考慮,另一方面我也結合莫奈的產品Logo做了適當的抽象和演繹;兩者結合最終確定了當前莫奈的造形設計。
首先,產品左側主導航采用了具有一定透視角度的異形設計;產品頂部標題區域也采用了相同的設計思路:左側為品牌Logo設計了一個容器,Logo在其中容納放置;Logo右側收起的區域預留了常用公告、跑馬燈的設計,方便產品把日常重要信息同步給用戶;最右側呈現用戶個人中心、空間管理、使用幫助等菜單項。
對于這種異形的設計,用戶是否能夠接受,在設計開始時我存在一定的疑慮,因此在設計初稿定稿后我們邀請了部分用戶做了測試,大部分用戶認為新的設計有創意具有鮮明的特點,也有部分用戶認為透視的設計看著較為怪異,尤其是左側主導航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優化了透視的角度,從多個透視數值中選擇了一個即能展示透視的設計效果、又不至于透視過大導致文本圖標等變形嚴重而不易識別的角度,其次,我還配合開發同學對導航透視文本和圖標的渲染做了一些優化,從而使其具有更好的識別性和清晰度。在以上兩項優化完成后,新的用戶測試表明大家對該設計的滿意度有很好的提升。
莫奈在改版之前就已經有自己的品牌色,新的色彩升級圍繞“科技與高效”兩個關鍵詞,結合情緒版提取的設計要素,將原有品牌色做了細微的調整。首先藍色飽和度增加,綠色調整色相使其偏向藍色的一端并增加亮度。如此,當兩個顏色搭配使用時,藍色作為主色調體現科技、可靠的視覺和心理感受;綠色作為點綴色和強調色,體現活力、高效與創新。藍綠對比強烈,具有很好的場景適應性和品牌特色。
字體作為UI界面中最常見的元素以及作為信息呈現的主要載體,字體的使用對產品的易用性和視覺表現有著非常重要的影響。結合體驗升級方向中定義的“增強品牌特色”的目標以及情緒版中提取的非襯線的設計要素,對于字體的設計風格,我將其歸納為"定制化、品牌性和非襯線"。
為了實現字體風格的設計目標,我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經過多次迭代,目前具有豐富的字重和獨特的品牌特色,將該字體用于莫奈的品牌Logo,可以很好的體現京東的品牌特色并體現出與其它產品差異化的字體設計。京東正黑體主要用于莫奈產品中的數字、拼音、英語、數值符號四個場景,該字體也是京東金融APP的系統數字字體,其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性,并且該字體有較小的字符寬度,所以當其用于大屏編輯器時,能夠在相同的空間下容納比其它字體更多的字符,而這個特點對于“寸土寸金”的屬性面板尤為重要。此外,該字體在作為數字字體使用時,其小數點、千分符等也具有很強的特色,具有不錯的辨識度與個性。
而產品中的中文字體Mac與Windows系統有不同的方案。在Windows下,由于系統自帶的微軟雅黑當字號小于14pt時,字符在水平方向上存在明顯“參差不齊”的現象,加之該字體很少更新,沒有針對當前高像素密度、高分辨率的屏幕特點做相關的適配優化,所以在高分屏下,其字體邊緣會有明顯的鋸齒。之前在用戶調研中,有用戶反饋字體模糊不清、識別困難也是上述原因造成,所以Windows系統下莫奈界面字體選取了思源黑體,思源黑體是Adobe與Google聯合開發的開源字體,其字重豐富、字形簡潔、現代,能夠很好的適應PC與移動端的顯示,也能適應當前已漸趨主流的高分屏,所以使用該字體能夠給用戶帶來不錯的信息呈現。除此之外,思源黑體的字形特點與MacOS系統下的蘋方字體相似,因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。
質感的呈現主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現,色彩與透明度的變化搭配毛玻璃效果使用,可以呈現科技、輕盈的質感。
結構設計主要目標是組件化及原子化,莫奈最核心頁面是大屏場景編輯器,該頁面承載著可視化大屏由0到1構建所需的大多數功能,也是莫奈產品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設計雖然也有不錯的設計規范,但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題,因此基于以往的設計規范,大屏編輯器頁面的產品需求總是需要UI產出設計稿研發才能開發,且由于沒有系統的梳理過編輯器頁面各種組件的類型,所以部分組件在同一頁面的不同位置存在不同的形態;還有一些組件,在具體頁面中的使用并不符合該組件的功能和用途,存在錯用亂用的情形,由此造成編輯器的界面設計、開發和維護都具有較高的成本。
新的改版設計,在設計之初就聯合產品對編輯器內的各個模塊所包含的各類組件進行了梳理,通過將各個模塊的組件羅列出來,然后重新梳理組合、去重、合并之后,我們就可以知道當前編輯器界面總共有哪些類型的組件,以及每類組件用在何處,而組件原子化后也通過間距規范、使用場景示例等方式解決了如何用的問題。
原子化的組件,精簡了組件的數量,同時每個組件也針對自身功能和用途的特點進行了優化,在此過程中也考慮了組件搭配、組合使用的適配和呈現問題。比如,針對顏色選擇組件,我們默認以十六進制展示顏色色值,并在色值后以百分比顯示該顏色的透明度,我們還在色值后面增加了色值預覽的小色塊,這樣的設計兼顧了開發與設計同學使用莫奈的場景。對于開發同學,他們在代碼中習慣使用十六進制色值,而設計師更習慣于RGBA或HSLA的調色模式,因此,雖然十六進制的色值也能包含透明度信息,但我們依然在顏色后面增加了百分比及小色塊,已幫助設計同學確認顏色的正確性,此外我們還通過色彩顯示模式切換、自動輸入校正等手段,確保不管用戶輸入的顏色采用何種方式,最終屬性欄都是按照用戶設置的模式以統一的格式呈現。而諸如此類優化,在本次體驗升級中不勝枚舉。
莫奈的動效設計主要有兩類,一類是用于頁面視覺效果營造的氛圍類點綴動效,另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節奏感、輕盈”的設計風格,傳遞科技、高效的視覺感受。
在本次動效交付中,為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度,動效文件均采用Json代碼的形式交付前端,該類動效由瀏覽器在網頁端實時渲染,具有矢量動畫的特點,能適應多種設備及屏幕分辨率,具有優秀的前端呈現效果。
首頁科技感流光氛圍動效
頁面及大屏加載Loading動畫
針對視覺層面設計優化后,接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優化,我們交互優化的目標是“簡單、流暢”。
首先進行交互優化的是各類圖表的屬性及配置項設置相關的交互優化。莫奈作為一款可視化場景搭建平臺,為用戶提供了各類型的圖表,每個圖表均具有“樣式、數據、交互”三大類配置屬性,這三大屬性,從圖表看起來是什么樣、圖表展現了什么數據、圖表可以與用戶進行那些互動三個維度解決了圖表在數據可視化呈現中最基礎的需求。由于圖表在數據可視化呈現中頻繁使用,所以與圖表配置相關的操作自然也是相當高頻和常用。當前版本下,圖表配置項主要問題有兩個:一個是圖表配置項層級過深,用戶需多次點擊才能對某一內容進行修改;第二是批量對多個圖表的相同屬性進行修改在當前版本不可用,導致用戶圖表配置成本高。針對用戶最關心最影響體驗的兩個交互問題,我的優化方案如下。
要解決問題,首先要知道問題從何而來。經過深入與產品、研發同學及部分用戶訪談溝通后,我發現當前導致圖表配置項層級過深主要有兩個原因,分別是產品規劃與設計展現。
具體來講,產品層面有三個問題:
01、產品對于當前圖表配置項的結構梳理是以程序的邏輯來呈現,而非以用戶的視角來歸納。舉個栗子,在當前版本如果用戶要修改柱狀圖某個柱子的顏色,操作路勁如下:樣式>數據系列>系列名稱>形狀設置>顏色設置。而這一路徑為何如此設計?因為顏色這個屬性的后端代碼就是這樣的結構。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位,而在它之前呈現的內容、名詞其實都有一定的理解難度,尤其對于新手更是如此!用戶想要更改顏色,Ta首先需要知道什么是數據系列、其次還要了解形狀設置可能包含哪些屬性等,正因具有一定的門檻且不直觀,所以用戶初次進行上述設置時往往需要在樣式一級菜單下點擊多個屬性、反復嘗試確認,才能最終完成顏色修改的設置,這樣一個使用的流程自然會給用戶“層級過深”的感受
02、圖表配置結構存在冗余、不夠精簡。還是上面那個栗子,用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結構設計是必要的么?答案是并不是!因為只有用戶關注的才是有用的,產品應該提供用戶想要的內容而不是強塞給用戶產品具有的所有的功能,所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來,適當的對配置項做些精簡,合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現無關緊要的內容,如此,圖表配置項便能瘦身,用戶使用起來也更輕松。
03、圖表配置項的各個屬性,在屬性列表的排序沒有遵循用戶使用的頻次和習慣。排列在前面的屬性并非用戶最常用的那些,因此用戶要在列表中從上而下的“翻找”,這種使用過程中的頓挫感,一方面影響了用戶使用產品的效率,另一方面也加深了用戶“層級過深”的感受。
知道了問題從何而來,那么解決問題便也變的簡單。首先,我們聯合產品經理,對莫奈已有的60多個各類圖表組件,逐個進行了配置項的梳理,當所有圖表的配置項都以思維導圖的形式呈現時,他們的共同點、同類項便一目了然。此時,之前存在的“圖表配置結構存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點,在上述梳理工作完成后有了一定的優化和改善空間,但仍然存在一些不確定的因素影響設計和產品的決策。比如、“屬性列表中,哪些屬性是用戶最常用的”,類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結論,對此,一方面我們通過為配置項區域增加數據埋點,分析用戶對各個配置項使用的頻次來為后續的持續優化提供決策支持,另一方面我們也參考、調研了同類產品中一些用戶量較大、設計質量較高的產品來進行當前有限的優化。
配置項層級過深的另一個原因,是屬性配置列表的結構及布局設計存在“深層級、空間利用率底”的特點。
如下圖,左側圖片示意了舊版莫奈的配置列表設計結構??梢钥吹脚f版設計完全采用樹結構的形式將各項自上而下排列,并且采用每級向右縮進一個字符的形式來做層級的區分,舊版的設計基準尺寸為1440PX,屬性配置欄本身較窄,而逐級縮進的策略更是導致信息展示困難;其次,樹狀的結構在展開層級較多時,部分一級屬性會被擠到一屏之外,用戶需要頻繁滾動鼠標滾輪才能看全信息,綜上,舊的設計策略也給了用戶“層級深”的直觀感受和交互體驗。
新版設計首先增加了配置屬性欄的寬度,讓其能夠在橫向上展示更多信息;其次,新版設計,將提煉后的一級屬性標簽固定在屬性配置列表左側。相較于之前,這樣的設計始終能夠讓用戶清晰的看到所有一級屬性,用戶可以隨時在各類屬性中切換,并且右側屬性內容的滾動也不會影響一級屬性的位置,如此就給了用戶很好的全局觀和使用的便利性與確定性。最后,新版設計采用分隔線與色塊結合的方式來表達屬性列表內的層級關系,去掉逐級縮進后,配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。
在數據可視化場景搭建過程中,用戶對多個圖表的相同屬性進行統一修改、一次性調整的需求非常迫切和剛需。比如當前可視化大屏中有N個圖表,此時,用戶想要將其中6個圖表的橫軸顏色調整為相同的綠色,在用戶的視角下,此時的操作應該是先選中6個想要調整的圖表,然后找到橫軸顏色設置項,之后統一調整色彩。但莫奈當前的版本,如果用戶按照上述流程操作,看到的將是下圖左側的示例:圖表多選之后,對齊、坐標等基礎項仍然可用,而與屬性相關的其它設置并沒有被聚合并呈現,在此情況下,用戶想要完成最初的目標就只能6個圖表逐個依次調整!顯然,這樣的操作并不符合用戶預期,它使用戶的操作效率大大降低。
上述問題是一個體驗相關的問題,同時也是一個強技術相關的問題,我們想要讓多個圖表的同類項聚合顯示,首先要能在底層對各個圖表的配置項有十分清晰的梳理,好在我們解決第一個問題:“配置項層級過深”時,已經完成了對60多個圖表的細致分析,有了這項工作的基礎,當前面臨的問題便不那么棘手。如右側示例:當用戶多選圖表時,圖表的同類項會被聚合,并以用戶視角的理解,將屬性類別進行分類,這樣的分類打破了傳統的按照圖表固有屬性排列的慣例,而是把圖表固有屬性整合歸納到用戶易于理解的類目下,如此,用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統一的調整和修改,而這樣的操作是符合用戶習慣和預期的。
新建大屏作為創建數據可視化場景的第一步,它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優化主要有三個方面:創建流程、模板預覽與模板展示。
創建流程優化:首先,舊版的創建流程:新建可視化>選擇模板>大屏命名>創建成功。 這一流程中“大屏命名”是沒有必要的,因為用戶在新建可視化大屏時可能存在多種需求的可能性,也許用戶只是想看看創建完成后內部編輯器是什么樣,或許用戶有實際項目,但當前項目名稱也并未確認,所以在此時添加一個不可跳過的步驟著實讓人不爽,況且大屏創建成功之后在多個位置有多種方式都能便捷的修改大屏名稱,因此,更快速的進入編輯器開始設計創作才是用戶創建可視化最根本的目標,所以,拿掉“命名流程”,顯然可以讓整個交互的過程更加流暢。
模板預覽與模板展示優化:原有的設計,當用戶點擊創建大屏按鈕后,會在頁面底部拉起一個小的抽屜,抽屜內包含一個空白模板以及有限多個其它內容模板,而在如此狹小的區域展示這么多內容,不管是從交互效率還是視覺效果上看,都顯得格外的拘謹和難受。新的設計首先是全屏鋪開,盡可能充分的利用頁面空間。
在模板展示及預覽方面,我設計了列表展示與縮略圖分布展示兩種方式,并添加了分類標簽和搜索按鈕,此外還聯合產品增加了模板收藏功能,這樣用戶可以把自己喜歡的、常用的模板收藏,方便之后更快速的使用
模板預覽方面,在兩種布局模式下,用戶鼠標滑過模板縮略圖時,模板均會以較大的視圖動態呈現模板內容。在列表模式下,模板預覽窗口固定在頁面右側區域;縮略圖分布的模式下,預覽窗口根據鼠標指針的位置激活。當用戶選中某個模板時,點擊底部創建按鈕即刻進入大屏編輯器界面,此時用戶便可基于模板內容進一步完成自己的定制化設計。
如今移動端各類產品已經給用戶養成了算法推薦+自主搜索的產品使用習慣,這種習慣當前也逐步從移動端往PC端轉化。搜索能從海量信息中最快速的找到用戶關心的內容,因而提高搜索功能的易用性,能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場景分布在不同位置,用戶需要先找到對應模塊才能進行搜索,降低了搜索的便捷性和易用性。新的設計在保留之前搜索能力的基礎上,新增全局搜索,用戶在一個位置即可完成對組件(優先展示當前畫板內組件)、屬性、幫助等內容的搜索和查找,進一步提升搜索的效率。
一個數據可視化場景,通常是由N個數據圖表與其它數據要素一起構成的多個頁面來呈現和展示的。這些頁面內包含大量的元素,而對這些元素的管理主要通過大屏編輯器頁面左側的圖層管理面板來實現。一般我們對圖層管理的手段主要有三種:命名、分組和查找。
給組件命名是一個耗時且麻煩的行為,我們在做用戶調研時發現,大部分用戶都沒有給組件規范命名的習慣,大多數情況下,組件在圖層面板列表內都是以默認名稱或者默認名稱+1、2、3的形式存在。這導致了當頁面組件較多時,通過組件命名來查找組件其實相當困難,所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗??s略圖以快照方式保存當前組件最新狀態截圖,從而幫助用戶更快速的將圖層組件與頁面上的內容對應起來。
新的設計,圖層成組后也取消了縮進字符的效果,我采用給成組對象設計更明顯的分組示意圖標以及為組內列表添加深色色塊的方式,完成了成組對象與列表內其他要素區分的需求,新的設計使成組對象更易查找和識別。
此外,我們還增加了對圖層列表的搜索功能,幫助用戶快速定位名稱已知的設計元素。
此次體驗升級是設計主導推動,產品與研發緊密配合的結果。體驗設計師作為最接近用戶的群體,是產品與用戶溝通的橋梁。時刻關注用戶心聲,并能將用戶細碎的吐槽和各類反饋轉化為體驗痛點、制定對應的優化策略是體驗設計師的基本功。而對于設計和產品本身是否熱愛,也是設計能否不斷精進、體驗是否能夠不斷提升的關鍵。好的設計不僅服務了產品、幫助了用戶、同時也成就了設計師本身。
本人為莫奈提供設計支持的三年多時間,在沒有KPI要求和外部壓力的情況下,通過公司內部需求管理系統“行云”,為莫奈提交231個體驗優化建議;以線下線上的形式面向莫奈產品及研發團隊進行了20多次專業分享。正是日常這些積極主動且持續的努力,使我本人與莫奈產品團隊建立了非常友好緊密的聯系,這也為推動本次體驗升級改版提供了巨大的助力。我認為作為體驗設計師,我們不僅要對用戶有同理心,為用戶創造愉悅舒適的感受,同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識,體驗關乎人、環境與生活,嘗試在生活中磨煉自己創造好的體驗的能力,并將其應用到體驗設計師的職業工作中,我相信,倘若如此實踐,必能在職業和生活中都獲得有不錯的成就。
好的產品,必然是持續關注用戶訴求,不斷迭代發展的產品,好的體驗設計也必然是陪伴產品不斷優化、持續精進的設計,復盤的意義不僅是沉淀過去的經驗,更是為未來更好的體驗蓄能。
此次分享如能為大家帶來那怕一點點的啟發,本人便倍感榮幸、開心至極! 期望大家能夠與我有更多交流,么么噠~~
作者:BYMD 來源:站酷網
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
相信每一個設計師,在工作中或多或少都做過一些競品分析的工作,正所謂知彼知己百戰不殆,做競品分析可以幫助我們快速了解競對產品的優劣和核心競爭力。目前網上的很多競品分析主要都做的大而空,好多都是偏行業分析,對于設計師而言,看完之后無法得到有用的信息,對于產品本身的設計體驗而言,幫助意義不大。
在開展競品分析之前應該想清楚兩件事,弄清楚自家產品的基本情況,如產品定位,基本功能,目標用戶等,另外要確定分析的目的是什么,最終要拿到什么成果賦能產品。如果想要提高用戶活躍度,那就圍繞競爭對手拉新促活方案進行研究;如果是要優化產品的用戶體驗,那就圍繞影響用戶體驗的交互流程及功能操作去研究。
產品發展的階段不一樣競品分析的目的也會不一樣,可結合互聯網產品發展周期輔助確定分析目標。一般產品引入階段,功能架構還沒有完全確定,需要了解市場行業現狀、目標客戶特點、商業模式、盈利模式等,從而更好為為后期發展指明方向;而產品成長階段,需要占領用戶心智及市場份額,所以要分析了解競爭對手的產品功能、推廣路徑、營銷策略、體驗設計等,優化核心功能及經營策略,實現用戶增長及促活。 產品成熟期要考慮怎樣維護市場份額,怎樣跟競品拉開距離,怎樣創收增效,需要及時了解競對產品的動向及用戶經營數據。結合產品發展的階段性目標及業務產品部門的相關規劃才能更好地確定出比較有價值的分析目標。
選擇競品先要明確產品所在行業和細分領域、產品屬性、用戶群體,找競品時需要找這些元素相同或者相似的產品?;驹瓌t是選擇行業第一梯隊中,1.產品的定位及目標人群比較明確且有重合性,2.是否穩定且迭代成熟,3.是否具有獨特亮點有參考價值。
直接競品:功能和用戶群體基本一致,有直接的競爭關系,可以考慮借鑒相似的功能設計。
間接競品:產品用戶相同屬性相似,但是功能需求匹配度不是特別高,在細分的領域中做的比較優秀,在運營策略、操作流程、視覺設計等方面有借鑒參考的價值。
標桿競品:目前互聯網同類的產品同質化情況相對比較嚴重,如果只對直接競品、間接競品進行分析,忽略當下比較熱門、比較具有先進性的產品,有可能會缺乏創新性,所以需要在用戶重合度或者產品屬性、營銷策略等方面做得優秀的產品中選擇1-2個作為標桿產品進行分析。將其優秀的部分深入轉化應用到自家的產品中。
通過七麥數據、IT桔子、易觀分析、比達網等第三方平臺,找到類別排行榜,艾瑞網等可以查詢相應的行業報告,有利于分析產品目標及功能范圍。另外,如果是移動端APP,可以通過應用商店進行搜索。
七麥數據:https://www.qimai.cn/
IT桔子:https://www.itjuzi.com/
易觀分析:https://www.analysys.cn/
比達網:http://www.bigdata-research.cn/
艾瑞網:https://report.iresearch.cn/
競品分析的目的不一樣側重點不一樣,但用戶體驗五要素給我們提供了一種通用的分析思路,從五個層次去逐步分析。但實際分析過程中還是會根據分析者的身份,產出不同,側重點不一樣。
了解競品的產品定位,產品目標,目標,多平臺等方面。做這些分析的主要目的是確定自家產品定位,產產品定位包括產品定義及用戶需求:產品定義包括使用群體/主要功能和產品特色,使用群體幫你明確產品的主要為誰服務,所有的功能/內容/設計風格的設定都是圍繞這類群體來進行的,主要功能劃定了功能的范圍和限制,產品特色使產品有別于同類的競爭對手。用戶需求包括目標用戶/使用場景和用戶目標,一個用戶需求可以看作是“目標用戶”在“使用場景”下的“用戶目標”,在做某一個功能的競品分析時,需要對比分析真實場景下產品怎么解決用戶的問題。相對而言產品經理會作戰略層的深度分析,作為設計師需要明確這方面的內容,但在競品分析階段不用深究,需要重點分析的還是結構層,框架層和表現層。
我們需要思考的是產品需要什么功能實現產品需求,需要分析相同業務和場景下競品的功能,例如同為電商產品,競品在購物場景下的基礎功能及衍生功能,相同的功能競品的特點及優勢。在競品功能進行梳理時,可以通過表格對比功能有無,這樣可以清晰地看到不同競品之間的差異。功能對比并不是簡單的功能羅列,要進一步思考功能設定背后的原因,可以從用戶對功能的依賴程度/使用頻率以及公司為實現這一功能要付出的成本,結合自身產品定位老考量自己的產品是否也需要這個功能,從而明確分析主要功能及次要功能進行分析
產品的整體架構包括功能結構/信息架構分析,首先需要理解什么是信息架構,很多人將思維導圖理解為信息架構,其實思維導圖只是信息架構的一種表現形式 。而功能結構是指功能的闡述,一般是動詞+名詞。功能結構則更側重整體邏輯,各個功能之間獨立或者關聯關系,明確主要功能次要功能。功能結構就是按照功能的邏輯性及用戶的操作習慣組織起來,更適合用流程圖來梳理,通過優化功能與用戶的每個觸點優化體驗。信息架構中信息指的是內容的載體,常見的文字、圖像等都是信息;架構的含義則形容對應的組織和結構。信息架構就是將信息通過一定的形式組織起來,然后呈現出來。從本質上講是信息的表達和傳遞,從而降低認知成本,提升使用效率。良好的信息架構是高效用戶體驗的基礎,分析競品的信息架構是分析競品分類組織邏輯。隨著互聯網產品的同質化,其實競品的很多功能都相似,但信息的組織往往會有所不同。相對而言資訊類,信息類產品需要著重對比信息架構。
任務流程分析,界面設計、導航設計、信息設計,頁面的布局內容信息,頁面之間的跳轉方式,頁面內部的交互邏輯等方面,工具類的產品如出行/外賣/購物等用戶有明確目的的,這類產品需要著重對比競品間任務流程的差異,從而尋找哪些步驟可以優化,哪些步驟可以借鑒。
在這個過程中輸出使用體驗即用戶在使用過程中的整體感受,包含用戶操作過程中的效率,對信息的呈現和布局的理解。是否存在干擾信息導致用戶認知和操作出錯,使用起來是否存在壓力的情況,簡單來說包括:操作效率/信息布局/使用成本/信息干擾/等
而交互體驗更加具象,需要在使用反饋/防錯/可見性/一致性/流暢度等細節方面需找設計的差異點和亮點。
最容易被用戶直觀感受的層面,可以從視覺風格,配色,圖形,排版布局,情感化設計,動效等方面和競品進行詳細的分析對比,競品分析并不是羅列細節,而是需要分析出操作體驗的優劣,以及這樣設計的原因。
產品概況、功能、流程和交互等方面進行全方位的分析后,還有非常重要的一步,即給出結論,且這才是最重要的,結論將其復用到我們產品中,這也是競品分析的意義所在。在做最終的分析報告時不要只做分析沒有結論。任何一個功能點都可以思考出一個結論,競品為什么這么做,那我可以模仿或超越嗎?或是我覺得不好,那么我改怎么避免;不要只有結論沒有權威的分析過程。在任何分析中帶著主觀性的結論是最不好的,有時候會誤導大家,所以得出的結論的因果條件要是合理的,分清楚充分條件和必要條件,寫明這個結論的必然原因以及分析過程和可能的原因等;要帶著目的性的去做分析,避免作數據及內容的拼湊。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn