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