一、前言
視頻播放器中承載著極其豐富的內(nèi)容畫(huà)面和播控功能，尤其是在寸土寸金的移動(dòng)端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場(chǎng)景下，合理的手勢(shì)設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶(hù)更快捷觸達(dá)功能、提升操控便捷性。
視頻場(chǎng)景中目前已有部分的常規(guī)單向手勢(shì)已被用戶(hù)廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫停」、「雙擊→點(diǎn)贊」、「長(zhǎng)按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢(shì)。
那么如何在保留用戶(hù)對(duì)于常規(guī)通用手勢(shì)認(rèn)知的基礎(chǔ)上，進(jìn)一步對(duì)視頻場(chǎng)景中的手勢(shì)交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來(lái)在手勢(shì)進(jìn)階交互上的重點(diǎn)探索方向。
本次針對(duì)百度APP中的視頻播放器場(chǎng)景，為提升手勢(shì)操控效率，我們?cè)噲D將常規(guī)的基礎(chǔ)通用手勢(shì)進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢(shì)」設(shè)計(jì)模型，以探索如何在視頻場(chǎng)景中構(gòu)建便捷高效的進(jìn)階手勢(shì)體驗(yàn)設(shè)計(jì)。
二、什么是「組合手勢(shì)」
「組合手勢(shì)」是基于常規(guī)手勢(shì)的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢(shì)所構(gòu)成，若組合方式及使用場(chǎng)景得當(dāng)，可助力用戶(hù)更便捷的觸達(dá)功能。
以前述的視頻場(chǎng)景常規(guī)手勢(shì)為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶(hù)通過(guò)某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過(guò)程是線(xiàn)性的，手勢(shì)擴(kuò)展性十分有限且難以滿(mǎn)足視頻場(chǎng)景對(duì)于手勢(shì)擴(kuò)容的訴求。
于是我們?cè)诂F(xiàn)有常規(guī)手勢(shì)兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢(shì)」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢(shì)相互組合后的擴(kuò)展可行性。
「組合手勢(shì)」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對(duì)應(yīng)的基礎(chǔ)分支手勢(shì)構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢(shì)組合觸發(fā)路徑。
由于「組合手勢(shì)」并不像常規(guī)手勢(shì)那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場(chǎng)景進(jìn)行綜合考量。
三、「長(zhǎng)按組合手勢(shì)」激活快捷菜單
1.項(xiàng)目背景
百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專(zhuān)門(mén)用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶(hù)反饋找不到常用功能、菜單面板功能排布無(wú)章且觸發(fā)成本高。
2.競(jìng)品調(diào)研及選型
通過(guò)對(duì)競(jìng)品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競(jìng)品均有使用長(zhǎng)按手勢(shì)作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長(zhǎng)按交互選型， 分別為：長(zhǎng)按觸發(fā)獨(dú)立播控面板、長(zhǎng)按觸發(fā)浮層播控選項(xiàng)、長(zhǎng)按觸發(fā)特定播控功能。
選型A
「長(zhǎng)按觸發(fā)獨(dú)立播控面板」：通過(guò)長(zhǎng)按手勢(shì)可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對(duì)視頻沉浸觀(guān)感體驗(yàn)有一定的打斷感；
選型B
「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」：通過(guò)長(zhǎng)按手勢(shì)可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀(guān)看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；
選型C
「長(zhǎng)按觸發(fā)特定播控功能」：通過(guò)長(zhǎng)按手勢(shì)觸發(fā)特定的某個(gè)播控功能（如長(zhǎng)按“快進(jìn)”），一定程度上可滿(mǎn)足此功能的重度用戶(hù)，但對(duì)于長(zhǎng)按手勢(shì)的使用效率較低；
3.設(shè)計(jì)方案
1）長(zhǎng)按手勢(shì)交互擴(kuò)容
針對(duì)目前視頻播控菜單存在的問(wèn)題，經(jīng)過(guò)和業(yè)務(wù)對(duì)上述三種長(zhǎng)按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對(duì)視頻場(chǎng)景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。
但隨之而來(lái)的難點(diǎn)是我們目前播放器中的長(zhǎng)按手勢(shì)已被“快進(jìn)”功能占據(jù)，用戶(hù)對(duì)此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線(xiàn)“快進(jìn)”功能則會(huì)對(duì)用戶(hù)使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場(chǎng)景的重度用戶(hù)。
那么如何在兼容用戶(hù)已有長(zhǎng)按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對(duì)于便捷手勢(shì)體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。
基于此，我們決定嘗試使用「組合手勢(shì)」設(shè)計(jì)模型來(lái)對(duì)視頻播放器中的長(zhǎng)按手勢(shì)進(jìn)行重新定義，通過(guò)「長(zhǎng)按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對(duì)應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：
step1：以“長(zhǎng)按手勢(shì)”創(chuàng)建一個(gè)新模式，即發(fā)出交互信號(hào)并喚出浮層菜單；
step2：若用戶(hù)未松開(kāi)手指，則系統(tǒng)默認(rèn)開(kāi)始識(shí)別用戶(hù)意圖，是否有以“拖拽手勢(shì)”滑選至目標(biāo)功能項(xiàng)以選擇功能；
step3：用戶(hù)滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。
「長(zhǎng)按+向上滑選」快捷觸發(fā)對(duì)應(yīng)功能項(xiàng)；
「長(zhǎng)按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶(hù)對(duì)于此功能的使用習(xí)慣）。
2）容錯(cuò)性兼容
在設(shè)定「長(zhǎng)按+滑選」組合手勢(shì)的同時(shí)，考慮到兼容主流的長(zhǎng)按習(xí)慣、以及對(duì)于滑選手勢(shì)需要有一定的適應(yīng)過(guò)程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶(hù)長(zhǎng)按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過(guò)點(diǎn)選的方式觸發(fā)對(duì)應(yīng)播控功能項(xiàng)。
3）易用性打磨
差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶(hù)能否接受并認(rèn)知「長(zhǎng)按+滑選」組合手勢(shì)的操作形式，于是在DEMO開(kāi)發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線(xiàn)前可先收集一波體驗(yàn)問(wèn)題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測(cè)試目標(biāo)、用戶(hù)類(lèi)別、測(cè)試前序準(zhǔn)備及測(cè)試步驟等環(huán)節(jié)提前擬好必要的測(cè)試腳本，并邀請(qǐng)了10+名不同年齡段的目標(biāo)用戶(hù)進(jìn)行訪(fǎng)談測(cè)試。
測(cè)試訪(fǎng)談的過(guò)程中，被測(cè)用戶(hù)在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長(zhǎng)按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/span>
同時(shí)，我們通過(guò)觀(guān)察用戶(hù)操作行為及用戶(hù)主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
3.1 ）擴(kuò)展觸發(fā)熱區(qū)：
考慮到單手握持手機(jī)的使用場(chǎng)景，可盡可能擴(kuò)大定義長(zhǎng)按手勢(shì)的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長(zhǎng)按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長(zhǎng)按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長(zhǎng)按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實(shí)時(shí)提示及響應(yīng)反饋：
靈活判斷當(dāng)前手勢(shì)觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對(duì)應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶(hù)快速適應(yīng)新的手勢(shì)觸發(fā)機(jī)制。
方案上線(xiàn)及驗(yàn)證
以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yàn)證：
「對(duì)照組」效果：長(zhǎng)按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
「實(shí)驗(yàn)組」效果：長(zhǎng)按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）；
小流量實(shí)驗(yàn)上線(xiàn)后，經(jīng)過(guò)近半個(gè)月的觀(guān)察，大盤(pán)指標(biāo)穩(wěn)定、播放完成率等滿(mǎn)意度指標(biāo)穩(wěn)步提升。
「實(shí)驗(yàn)組」長(zhǎng)按快捷菜單中的功能使用率相對(duì)「對(duì)照組」均有大幅提升，說(shuō)明用戶(hù)對(duì)部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長(zhǎng)，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對(duì)照組」，但隨著用戶(hù)對(duì)于「長(zhǎng)按+滑選」手勢(shì)整體的使用占比持續(xù)走高，通過(guò)滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來(lái)，對(duì)于用戶(hù)來(lái)說(shuō)，長(zhǎng)按快捷菜單帶來(lái)的整體收益是大于折損的。
二期擴(kuò)展方案
隨著長(zhǎng)按快捷菜單的上線(xiàn)推全，長(zhǎng)按手勢(shì)的滲透率也持續(xù)走高，用戶(hù)逐漸對(duì)視頻場(chǎng)景更多的播控功能有了長(zhǎng)按觸發(fā)的訴求，于是我們對(duì)長(zhǎng)按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長(zhǎng)按浮層最右側(cè)新增“更多”快捷入口以承接視頻場(chǎng)景所有的播控功能，用戶(hù)通過(guò)長(zhǎng)按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。
四、「組合手勢(shì)」拓展探索
手勢(shì)交互是用戶(hù)在現(xiàn)實(shí)世界行為的映射，無(wú)論是基礎(chǔ)手勢(shì)還是組合類(lèi)高級(jí)手勢(shì)，都須符合用戶(hù)認(rèn)知習(xí)慣、并融入具體的使用場(chǎng)景中進(jìn)行設(shè)計(jì)。
以「組合手勢(shì)」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對(duì)視頻播放器中更多功能場(chǎng)景進(jìn)行了便捷手勢(shì)的設(shè)計(jì)擴(kuò)容探索。
1.「右滑返回手勢(shì)」激活“小窗播放”
“小窗播放”旨在退出當(dāng)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶(hù)的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶(hù)“縱向拖拽手勢(shì)”的行為來(lái)判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀(guān)看體驗(yàn)的連續(xù)性。
2.「雙指手勢(shì)」激活“滿(mǎn)屏播放”
“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫(huà)面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿(mǎn)屏播放”，以滿(mǎn)足更沉浸視頻瀏覽體驗(yàn)。
五、結(jié)語(yǔ)
便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)?lái)幫助和啟發(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶(hù)使用場(chǎng)景的手勢(shì)交互體驗(yàn)。
————————————————————————————————————————————————————————————————————
感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì)，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，違者必究，謝謝您的合作。申請(qǐng)轉(zhuǎn)載授權(quán)后臺(tái)回復(fù)【轉(zhuǎn)載】。
也歡迎加入MEUX,視覺(jué)/交互/運(yùn)營(yíng)設(shè)計(jì)師可投簡(jiǎn)歷至MEUX@BAIDU.COM(注明信息獲取來(lái)源如：站酷）
關(guān)于我們：
MEUX,百度移動(dòng)生態(tài)用戶(hù)體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶(hù)/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。
MEUX以「簡(jiǎn)單極致」為設(shè)計(jì)理念，創(chuàng)造極致用戶(hù)體驗(yàn)的同時(shí)賦能商業(yè)，推動(dòng)設(shè)計(jì)行業(yè)的價(jià)值和影響力，讓生活因設(shè)計(jì)而更美好。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
百度小說(shuō)是百度APP內(nèi)的垂直頻道，擁有過(guò)億月活和行業(yè)最全的正版書(shū)籍。隨著著作權(quán)保護(hù)意識(shí)逐步上升，越來(lái)越多的用戶(hù)愿意為優(yōu)質(zhì)的資源和閱讀體驗(yàn)付費(fèi)。2019年底，為了滿(mǎn)足用戶(hù)消費(fèi)升級(jí)所產(chǎn)生的一系列需求，百度小說(shuō)初步建立了會(huì)員體系。經(jīng)過(guò)兩年多的打磨，我們不斷提升會(huì)員的服務(wù)體驗(yàn)，并進(jìn)行了多次優(yōu)化升級(jí)，現(xiàn)在將我們的設(shè)計(jì)經(jīng)驗(yàn)分享給大家。
一、設(shè)計(jì)背景
2021年我國(guó)數(shù)字閱讀用戶(hù)規(guī)模達(dá)到5.06億，同比增長(zhǎng)2.43%，半數(shù)以上用戶(hù)愿意為電子閱讀付費(fèi)，占比最重的人群為19~25歲用戶(hù)，達(dá)到44.63%（數(shù)據(jù)來(lái)源《中國(guó)數(shù)字閱讀報(bào)告》），“Z世代”已經(jīng)成為我國(guó)數(shù)字閱讀的主要群體。隨著消費(fèi)升級(jí)，用戶(hù)對(duì)服務(wù)的需求不斷提升，更看重信息之上的附加價(jià)值，如認(rèn)同感、歸屬感和儀式感。
二、改版原因
2019年，由于時(shí)間緊、任務(wù)重，我們完成了小說(shuō)會(huì)員從無(wú)到有、從0-1的基礎(chǔ)場(chǎng)景搭建。但隨著設(shè)計(jì)趨勢(shì)的變化，當(dāng)時(shí)小說(shuō)會(huì)員的設(shè)計(jì)風(fēng)格與主流用戶(hù)的喜好不完全匹配，在使用場(chǎng)景中也存在易用性不足、內(nèi)容缺乏吸引力等問(wèn)題。下圖是2019年小說(shuō)會(huì)員的界面。
同時(shí)，我們對(duì)小說(shuō)用戶(hù)進(jìn)行了視頻訪(fǎng)談，搜集了用戶(hù)在使用會(huì)員服務(wù)中遇到的問(wèn)題，如會(huì)員福利少、找不到會(huì)員專(zhuān)屬內(nèi)容、購(gòu)買(mǎi)過(guò)程有卡頓等，最終梳理為的三大核心問(wèn)題：身份感知弱、購(gòu)買(mǎi)路徑長(zhǎng)和資源內(nèi)容少。
三、設(shè)計(jì)目標(biāo)
在小說(shuō)會(huì)員亟待改版的背景下，我們結(jié)合業(yè)務(wù)目標(biāo)、舊版核心問(wèn)題和用戶(hù)訴求，推導(dǎo)出了本次改版的設(shè)計(jì)目標(biāo)—品牌化、鏈路化和服務(wù)化。
1、品牌化—強(qiáng)化會(huì)員品牌
小說(shuō)會(huì)員作為百度APP眾多會(huì)員之一，設(shè)計(jì)團(tuán)隊(duì)希望能帶給閱讀用戶(hù)一些不同的品牌記憶點(diǎn)。
1）設(shè)計(jì)關(guān)鍵詞
基于會(huì)員的主流用戶(hù)、產(chǎn)品屬性和用戶(hù)訴求，我們衍生出以下關(guān)鍵詞：年輕、品質(zhì)、尊貴、超值。年輕用戶(hù)群體的占比越來(lái)越高，新版的設(shè)計(jì)風(fēng)格力求更好滿(mǎn)足年輕用戶(hù)的審美需求。
2）會(huì)員符號(hào)
符號(hào)是最直觀(guān)的視覺(jué)元素之一，能夠以最快的方式傳遞產(chǎn)品記憶點(diǎn)。在會(huì)員品牌符號(hào)設(shè)計(jì)的草圖階段，我們從字母V、VIP、鉆石、王冠和小說(shuō)IP白嘟嘟等多個(gè)方向進(jìn)行了方案發(fā)散。最終采用了白嘟嘟圖形與尊貴感的V形符號(hào)相結(jié)合的形式。該方案既延續(xù)了小說(shuō)的視覺(jué)符號(hào)，又與競(jìng)品的會(huì)員標(biāo)識(shí)形成差異，從而加深用戶(hù)的品牌感知和視覺(jué)記憶。
3）會(huì)員色彩
為了確定更加獨(dú)特的品牌色，設(shè)計(jì)團(tuán)隊(duì)搜集了大量的尊貴氛圍圖片，提煉出了玫瑰金，牙金，赤墨等8個(gè)具有品質(zhì)感的顏色。在視覺(jué)初稿階段，我們選擇了玫瑰金和黃金兩種主色進(jìn)行了方案嘗試。最終根據(jù)整體效果確定主色為明亮、高貴的玫瑰金，輔色為黑茶棕，深支子和漆黑的配色方案。新的配色方案讓用戶(hù)感受到新穎、現(xiàn)代，煥然一新。
4）會(huì)員圖標(biāo)
在圖形元素上，為了增強(qiáng)親和感，我們選擇了圓潤(rùn)的面形圖標(biāo)樣式，通過(guò)大圓弧和小圓角的細(xì)節(jié)處理，傳遞給用戶(hù)一種年輕、品質(zhì)的品牌印記。
5）信息傳達(dá)
我們對(duì)會(huì)員購(gòu)買(mǎi)頁(yè)和權(quán)益詳情頁(yè)進(jìn)行了布局重構(gòu)，采用深色的背景襯托卡片信息，使得產(chǎn)品框架層和內(nèi)容信息層更加明確，突出核心內(nèi)容。
在各類(lèi)場(chǎng)景中，我們通過(guò)會(huì)員品牌色彩、圖形、符號(hào)和IP形象的滲透，強(qiáng)化會(huì)員品牌印記。
經(jīng)過(guò)分析研究和實(shí)踐，我們完成了主場(chǎng)景的設(shè)計(jì)升級(jí)。
2、鏈路化—精細(xì)化運(yùn)營(yíng)
就會(huì)員體驗(yàn)而言，我們需要關(guān)注用戶(hù)在各種時(shí)間和各類(lèi)場(chǎng)合下的需求，因此我們將會(huì)員的全鏈路狀態(tài)分為時(shí)機(jī)、場(chǎng)景和人群三個(gè)維度。
1）時(shí)機(jī)
在不同的時(shí)機(jī)狀態(tài)下，我們需要傳遞給用戶(hù)不同的信息。只有深入剖析不同狀態(tài)下的用戶(hù)訴求，才能為其提供更好的服務(wù)。接下來(lái)我們從購(gòu)買(mǎi)前、購(gòu)買(mǎi)中、購(gòu)買(mǎi)后和即將過(guò)期四個(gè)階段闡述：
①購(gòu)買(mǎi)前—權(quán)益/優(yōu)惠信息引導(dǎo)
在用戶(hù)購(gòu)買(mǎi)前，我們強(qiáng)化了低價(jià)和省錢(qián)信息，讓用戶(hù)直觀(guān)的感受到購(gòu)買(mǎi)會(huì)員后的價(jià)格福利。為此我們從三個(gè)方向上進(jìn)行優(yōu)化，在開(kāi)通購(gòu)買(mǎi)頁(yè)，外露省錢(qián)金額，幫助用戶(hù)了解開(kāi)通會(huì)員可享受的收益；在會(huì)員頻道頁(yè)，采用外露多項(xiàng)權(quán)益，讓用戶(hù)快速了解會(huì)員權(quán)益；在章節(jié)購(gòu)買(mǎi)頁(yè)，采用突出會(huì)員折扣和會(huì)員優(yōu)惠價(jià)，讓用戶(hù)感受到開(kāi)通會(huì)員的折扣福利。
②購(gòu)買(mǎi)中—優(yōu)化路徑流程
在用戶(hù)購(gòu)買(mǎi)中，我們?cè)跁?huì)員購(gòu)買(mǎi)鏈路環(huán)節(jié)進(jìn)行簡(jiǎn)化，采用當(dāng)前頁(yè)彈出半層面板替代跳轉(zhuǎn)至?xí)T聚合頁(yè)的方式，縮短等待加載時(shí)間；在章節(jié)付費(fèi)鏈路環(huán)節(jié)，將商品選擇區(qū)信息結(jié)構(gòu)進(jìn)行優(yōu)化，減少多章購(gòu)買(mǎi)的頁(yè)面跳轉(zhuǎn)，使得用戶(hù)能夠更流暢的完成支付，提升付費(fèi)體驗(yàn)。
③購(gòu)買(mǎi)后—強(qiáng)化權(quán)益感知
在用戶(hù)購(gòu)買(mǎi)后，鑒于付費(fèi)用戶(hù)對(duì)商品和服務(wù)品質(zhì)有著更高追求，為此我們通過(guò)在各類(lèi)重要入口展示會(huì)員權(quán)益，包括省錢(qián)金額、去廣告次數(shù)以及各類(lèi)場(chǎng)景VIP狀態(tài)提示等方法，以達(dá)到強(qiáng)化用戶(hù)的權(quán)益感知。
④即將過(guò)期—輕引導(dǎo)續(xù)費(fèi)
在即將過(guò)期前，為了避免對(duì)用戶(hù)造成強(qiáng)付費(fèi)的不友好感知。過(guò)期前3天，我們采用了輕量化的形式告知用戶(hù)續(xù)費(fèi)，通過(guò)各類(lèi)引導(dǎo)信息的提示，讓用戶(hù)知曉會(huì)員服務(wù)期限屆滿(mǎn)。
2）場(chǎng)景
我們?cè)谌肟诤凸δ軋?chǎng)景中也進(jìn)行了精細(xì)化設(shè)計(jì)，讓用戶(hù)更便捷地使用會(huì)員服務(wù)。為了突出會(huì)員優(yōu)質(zhì)內(nèi)容和服務(wù)，我們?cè)O(shè)置了會(huì)員專(zhuān)屬的頻道和書(shū)庫(kù)，方便用戶(hù)選擇。
在各類(lèi)功能場(chǎng)景中，為了方便用戶(hù)在使用功能的過(guò)程中隨時(shí)購(gòu)買(mǎi)，我們?cè)O(shè)置了多個(gè)功能場(chǎng)景的會(huì)員開(kāi)通入口。讓用戶(hù)快捷享受會(huì)員服務(wù)。
3）人群
通過(guò)小說(shuō)用戶(hù)數(shù)據(jù)分析，我們將用戶(hù)人群分為會(huì)員用戶(hù)、潛在用戶(hù)、新用戶(hù)和過(guò)期用戶(hù)。
為了讓會(huì)員用戶(hù)能夠體驗(yàn)到區(qū)分于普通用戶(hù)的尊貴感，我們?cè)诟顿M(fèi)頁(yè)、批量離線(xiàn)、TTS播放頁(yè)和簽到頁(yè)等場(chǎng)景均采用了會(huì)員定制化的配色方案和引導(dǎo)提示，這樣使得會(huì)員用戶(hù)在體驗(yàn)服務(wù)的各類(lèi)場(chǎng)景中有更強(qiáng)的身份專(zhuān)屬性。
所謂潛在用戶(hù)，是指仍在猶豫是否購(gòu)買(mǎi)會(huì)員的用戶(hù)。我們通過(guò)限時(shí)優(yōu)惠券、激勵(lì)視頻試用15分鐘、書(shū)架省錢(qián)提示、挽留彈窗和降級(jí)版免廣告權(quán)益等方式，讓潛在用戶(hù)不僅可以先試后買(mǎi)了解會(huì)員權(quán)益，而且可以通過(guò)各類(lèi)信息提示通曉會(huì)員體驗(yàn)，更好地判斷是否通過(guò)會(huì)員服務(wù)減少付費(fèi)金額和提升閱讀體驗(yàn)。
我們針對(duì)新用戶(hù)建立了新人見(jiàn)面禮活動(dòng)，用戶(hù)在新手福利活動(dòng)期內(nèi)可享受超值折扣開(kāi)通會(huì)員，低價(jià)體驗(yàn)會(huì)員權(quán)益。而針對(duì)已過(guò)期的用戶(hù)，我們通過(guò)下發(fā)優(yōu)惠券、強(qiáng)化特權(quán)等形式喚醒用戶(hù)，以免錯(cuò)過(guò)各類(lèi)福利和特權(quán)。
3、服務(wù)化—提升會(huì)員服務(wù)
在內(nèi)容為王的時(shí)代背景下，為了增加會(huì)員產(chǎn)品的核心競(jìng)爭(zhēng)力，我們持續(xù)擴(kuò)充會(huì)員書(shū)庫(kù)的數(shù)量和類(lèi)目、拓展會(huì)員權(quán)益，讓用戶(hù)閱讀到更加豐富的小說(shuō)內(nèi)容和體驗(yàn)到更多權(quán)益的會(huì)員服務(wù)。小說(shuō)書(shū)庫(kù)的付費(fèi)和免費(fèi)書(shū)數(shù)量大幅擴(kuò)充，且書(shū)籍類(lèi)型新增了有聲書(shū)和短篇故事，增添了小說(shuō)資源的多樣性。
在權(quán)益上，對(duì)內(nèi)我們持續(xù)拓展會(huì)員特權(quán)，從最初的4項(xiàng)擴(kuò)展為10項(xiàng)，新增了有聲免費(fèi)聽(tīng)、免費(fèi)讀故事、整本離線(xiàn)、專(zhuān)屬字體、簽到1.5倍書(shū)幣等權(quán)益；對(duì)外我們聯(lián)合其他產(chǎn)品，推出了會(huì)員贈(zèng)禮和聯(lián)合會(huì)員服務(wù)，用戶(hù)可以根據(jù)自己的需求進(jìn)行購(gòu)買(mǎi)，享受組合購(gòu)買(mǎi)的優(yōu)惠。
通過(guò)多個(gè)版本的迭代，我們完成了會(huì)員體系的設(shè)計(jì)升級(jí)和落地，用戶(hù)體驗(yàn)得到了顯著提升。
四、未來(lái)規(guī)劃
提升付費(fèi)產(chǎn)品的用戶(hù)體驗(yàn)是一個(gè)體系化的研究課題，需要各個(gè)角色通力合作，合力同行，開(kāi)拓革新。將來(lái)我們還會(huì)不斷探索，通過(guò)不斷優(yōu)化體驗(yàn)細(xì)節(jié)，不斷增加用戶(hù)權(quán)益感知，不斷嘗試方案創(chuàng)新，形成設(shè)計(jì)組合拳，為用戶(hù)提供更好的服務(wù)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
寫(xiě)在前面
成熟的設(shè)計(jì)系統(tǒng)是一個(gè)強(qiáng)大的生態(tài)體系，在這個(gè)體系下，各系統(tǒng)部分協(xié)同運(yùn)行，促進(jìn)平臺(tái)產(chǎn)品之間的一致性，為更大規(guī)模的產(chǎn)品提供“標(biāo)準(zhǔn)化”的工作流程，從而實(shí)現(xiàn)組織的運(yùn)作效率的提升。
A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. --Alla Kholmatova, from Design system
設(shè)計(jì)系統(tǒng)是指服務(wù)于數(shù)字化產(chǎn)品設(shè)計(jì)的一系列具有內(nèi)在關(guān)聯(lián)性的、組織有序的設(shè)計(jì)模式與實(shí)踐方法（Kholmatova，2017）。
它既包含了可復(fù)用并組成界面的要素，也涵蓋了如何在設(shè)計(jì)團(tuán)隊(duì)當(dāng)中創(chuàng)建、提煉、使用和共享的方法。在2014年后，各大知名公司開(kāi)始在界面設(shè)計(jì)領(lǐng)域紛紛構(gòu)建設(shè)計(jì)系統(tǒng)。百度商業(yè)團(tuán)隊(duì)隨著產(chǎn)品不斷的發(fā)展和壯大，團(tuán)隊(duì)希望通過(guò)統(tǒng)一的設(shè)計(jì)和研發(fā)語(yǔ)言來(lái)提升產(chǎn)品的一致性，并實(shí)現(xiàn)團(tuán)隊(duì)協(xié)同效率提升，從而達(dá)到降本提效。在基于自身業(yè)務(wù)特性上，建設(shè)了一套Light設(shè)計(jì)系統(tǒng)并持續(xù)的發(fā)展。
目前在設(shè)計(jì)系統(tǒng)建設(shè)方面，各家有非常完備的建設(shè)方法與實(shí)踐。當(dāng)設(shè)計(jì)系統(tǒng)建設(shè)趨于完備和成熟時(shí)，如何更有效定位設(shè)計(jì)系統(tǒng)的發(fā)展方向、持續(xù)迭代成為我們思考的重點(diǎn)。
本文將以百度商業(yè)團(tuán)隊(duì)Light設(shè)計(jì)系統(tǒng)PATS度量體系的建設(shè)為例，分享我們?nèi)绾翁剿髟O(shè)計(jì)系統(tǒng)度量的建構(gòu)，與具體實(shí)踐。希望通過(guò)文章能為大家?guī)?lái)新思考，并借此與大家進(jìn)行交流與探討。
1.為什么要做設(shè)計(jì)系統(tǒng)度量
度量是一種測(cè)量或評(píng)價(jià)特定現(xiàn)象或事物的方法，而體驗(yàn)度量則是一種可靠的測(cè)量或評(píng)價(jià)體驗(yàn)的方法與數(shù)據(jù)體系，使得體驗(yàn)可被測(cè)量、量化并以數(shù)據(jù)的形式表示出來(lái)（Tullis and Albert，2009）。
管理學(xué)大師彼得?德魯克：If you can’t measure it, you can’t improve it.無(wú)度量、無(wú)改善。設(shè)計(jì)系統(tǒng)無(wú)疑是一個(gè)動(dòng)態(tài)發(fā)展的，是不斷演進(jìn)的一個(gè)生態(tài)。在百度商業(yè)團(tuán)隊(duì)Light Design設(shè)計(jì)系統(tǒng)建設(shè)初步完善后，我們希望通過(guò)行之有效的度量，來(lái)進(jìn)行可測(cè)量、可量化、可持續(xù)的監(jiān)測(cè)，從而對(duì)設(shè)計(jì)系統(tǒng)進(jìn)行全面評(píng)估，明確下一步重點(diǎn)的投入方向。這對(duì)我們?cè)O(shè)計(jì)系統(tǒng)管理和迭代非常有必要。
2.如何建立設(shè)計(jì)系統(tǒng)度量
2.1 現(xiàn)有度量模型研究
在構(gòu)建度量體系之前，我們先回溯已有的度量模型。了解當(dāng)前市面上以及學(xué)術(shù)上已有的成熟度量模型。并帶著以下2個(gè)問(wèn)題進(jìn)行研究：
當(dāng)前業(yè)界較為典型常用的模型體系：例如HEART + GSM模型、PTECH模型、《云計(jì)算軟件產(chǎn)品使用體驗(yàn)質(zhì)量度量模型及度量方法》。
通過(guò)對(duì)比分析模型維度、具體指標(biāo)和方法，我們發(fā)現(xiàn)：
1）較為典型常用的模型是面向具體商業(yè)產(chǎn)品和用戶(hù)，但針對(duì)設(shè)計(jì)系統(tǒng)的度量很少涉及。
2）常見(jiàn)度量模型建構(gòu)的方法是有一定共性特征，我們可借此指導(dǎo)建構(gòu)設(shè)計(jì)系統(tǒng)度量模型。
2.2 設(shè)計(jì)系統(tǒng)度量的建構(gòu)
根據(jù)以上調(diào)研，我們認(rèn)為：現(xiàn)有度量模型評(píng)估的對(duì)象、內(nèi)容和方法是面向用戶(hù)群體，并針對(duì)具體業(yè)務(wù)或產(chǎn)品；而設(shè)計(jì)系統(tǒng)的度量則是：通過(guò)全面科學(xué)的度量體系，評(píng)估設(shè)計(jì)系統(tǒng)在工作流程與業(yè)務(wù)側(cè)應(yīng)用的表現(xiàn)，驗(yàn)證其價(jià)值，并判斷在應(yīng)用中存在的問(wèn)題。
我們基于百度商業(yè)團(tuán)隊(duì)Light設(shè)計(jì)系統(tǒng)發(fā)展和預(yù)期目標(biāo)，構(gòu)建了一套度量設(shè)計(jì)系統(tǒng)的評(píng)估體系。具體構(gòu)建過(guò)程分四步進(jìn)行：
Step 01. 盤(pán)點(diǎn)當(dāng)前現(xiàn)狀：
通過(guò)盤(pán)點(diǎn)對(duì)設(shè)計(jì)系統(tǒng)的各項(xiàng)內(nèi)容、困惑問(wèn)題等，以此明確設(shè)計(jì)系統(tǒng)需要度量對(duì)象和內(nèi)容。根據(jù)設(shè)計(jì)系統(tǒng)標(biāo)準(zhǔn)化建立指南（Invision，2020）所提出：設(shè)計(jì)系統(tǒng)在不同發(fā)展階段，需要到達(dá)標(biāo)準(zhǔn)的依據(jù)以及設(shè)計(jì)系統(tǒng)應(yīng)包含的內(nèi)容。結(jié)合我們?cè)O(shè)計(jì)系統(tǒng)當(dāng)前發(fā)展的情況，將百度商業(yè)團(tuán)隊(duì)設(shè)計(jì)系統(tǒng)內(nèi)容拆分為原則規(guī)范（Principle）、設(shè)計(jì)資產(chǎn)（Asset）、設(shè)計(jì)工具（Tool）、維護(hù)管理（Support）四大板塊。由此，明確我們度量設(shè)計(jì)系統(tǒng)的具體內(nèi)容，并將我們?cè)O(shè)計(jì)系統(tǒng)度量定義為設(shè)計(jì)系統(tǒng)PATS度量體系。
Step 02.制定度量維度：
在明確度量對(duì)象內(nèi)容后，結(jié)合我們?cè)O(shè)計(jì)系統(tǒng)的目標(biāo)，將度量體系聚焦五大維度：
Step 03.明確目標(biāo)、信號(hào)與指標(biāo)：
在不同維度下，依照GSM模型的方法具體推導(dǎo)出指標(biāo)和度量方法。具體實(shí)施的過(guò)程是：羅列出度量?jī)?nèi)容在維度上所期望的目標(biāo)，以及表現(xiàn)出的信號(hào)，來(lái)推到出具體指標(biāo)。整個(gè)過(guò)程中，做到【貼近系統(tǒng)目標(biāo)，緊扣度量?jī)?nèi)容】。
Step 04.選取度量方法：
對(duì)應(yīng)上述的劃分維度和指標(biāo)，設(shè)計(jì)特定的度量問(wèn)卷，采用主觀(guān)評(píng)分的形式持續(xù)跟蹤使用者們體驗(yàn)分?jǐn)?shù)變化，從而監(jiān)控設(shè)計(jì)系統(tǒng)在我們工作流程中的運(yùn)行情況。并結(jié)合定性訪(fǎng)談，對(duì)薄弱內(nèi)容深入探究，了解具體原因。此外，我們也引入客觀(guān)度量方法，對(duì)組件應(yīng)用表現(xiàn)的客觀(guān)數(shù)據(jù)進(jìn)行監(jiān)測(cè)，來(lái)反映其靈活度情況。
3.PATS度量落地實(shí)踐
構(gòu)建設(shè)計(jì)系統(tǒng)PATS度量模型后，持續(xù)開(kāi)展度量實(shí)踐，度量模型與評(píng)估方法得到初步驗(yàn)證，確定設(shè)計(jì)系統(tǒng)度量體驗(yàn)分的基線(xiàn)；并了解當(dāng)前系統(tǒng)發(fā)展不足的地方，明確短期解決方案以及?線(xiàn)行動(dòng)規(guī)劃。
第一次度量實(shí)踐中，對(duì)比本次度量的平均分發(fā)現(xiàn)：易用性與可靠性維度遠(yuǎn)低于平均分，存在明顯的短板。于是，重點(diǎn)針對(duì)短板問(wèn)題，一方面，通過(guò)定性訪(fǎng)談對(duì)具體問(wèn)題歸因，找準(zhǔn)痛點(diǎn)，制定出應(yīng)對(duì)方案；另一方法，調(diào)研先進(jìn)設(shè)計(jì)系統(tǒng)的建設(shè)方法，學(xué)習(xí)管理經(jīng)驗(yàn)，給出具體的改善措施。
通過(guò)半年執(zhí)行改善措施后，再次度量時(shí)，聚焦分值的變化觀(guān)測(cè)到：執(zhí)行相應(yīng)的措施和決策后，分值有了明顯的變化。例如，通過(guò)切換Figma工具作為L(zhǎng)ight設(shè)計(jì)系統(tǒng)相關(guān)資產(chǎn)的載體，利用其優(yōu)勢(shì)將設(shè)計(jì)系統(tǒng)內(nèi)容根植到工作流程，使得易用性維度提升幅度非常顯著。在一定程度上，驗(yàn)證了工具切換決策的價(jià)值。但易用性維度分值依舊較低，有可提升空間，還需持續(xù)優(yōu)化。
此外，成立Light設(shè)計(jì)系統(tǒng)維護(hù)小組，制定維護(hù)管理建設(shè)機(jī)制，明確雙周更新通知，統(tǒng)一日志記錄模板，明確各項(xiàng)負(fù)責(zé)人等，推動(dòng)可靠性維度得分提升顯著。通過(guò)PATS設(shè)計(jì)系統(tǒng)度量，既為我們指明了下一步改善的方向，也對(duì)設(shè)計(jì)系統(tǒng)的發(fā)展決策進(jìn)行驗(yàn)證。
總結(jié)：
在建立設(shè)計(jì)系統(tǒng)PATS度量后，實(shí)現(xiàn)了全面并精準(zhǔn)的監(jiān)控和管理，并指引我們提出可提升系統(tǒng)體驗(yàn)的決策與方向。而設(shè)計(jì)系統(tǒng)是復(fù)雜的，也是不斷變化、演進(jìn)的。未來(lái)設(shè)計(jì)系統(tǒng)PATS度量的方法也會(huì)隨設(shè)計(jì)系統(tǒng)的發(fā)展而逐漸豐富，來(lái)獲取更全面的數(shù)據(jù)。最終，幫助團(tuán)隊(duì)更好地推進(jìn)設(shè)計(jì)系統(tǒng)的建設(shè)，提升設(shè)計(jì)系統(tǒng)的成熟度，推進(jìn)設(shè)計(jì)系統(tǒng)向一個(gè)良性循環(huán)的方向前進(jìn)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
隨著國(guó)內(nèi)市場(chǎng)飽和，越來(lái)越多的公司轉(zhuǎn)向海外尋找新的增長(zhǎng)機(jī)會(huì)，其中出海電商成為了最大的市場(chǎng)之一。21年底艾媒咨詢(xún)顯示出海電商市場(chǎng)中，中國(guó)企業(yè)在海外的獨(dú)立站數(shù)量已達(dá)20萬(wàn)+，所占份額從2016年9.8%提升至2021年25.6%，預(yù)計(jì)2025年將會(huì)到達(dá)50%。
什么是獨(dú)立站？2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價(jià)的鋪貨型公司，但難見(jiàn)起色，之后成功轉(zhuǎn)向于依靠流量運(yùn)營(yíng)和供應(yīng)鏈體系的品牌型公司，通過(guò)自己站點(diǎn)直接和用戶(hù)鏈接并發(fā)生交易。
本文將先介紹獨(dú)立站這股出海電商新趨勢(shì)，然后從用戶(hù)體驗(yàn)視角描述導(dǎo)航、交易流程、視覺(jué)三個(gè)方面與電商平臺(tái)的差異性，最后我們基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享一些獨(dú)立站設(shè)計(jì)經(jīng)驗(yàn)和避坑點(diǎn)。
海外電商市場(chǎng)集中度低，亞馬遜封號(hào)熱潮，資本大批涌入，使得出海聚光燈逐漸從平臺(tái)轉(zhuǎn)向獨(dú)立站。
根據(jù)下面頭豹研究院整理的19年各國(guó)電商占比圖可看出，中國(guó)平臺(tái)電商占比整體電商市場(chǎng)高達(dá)86%，而歐美國(guó)家占比為60%。同時(shí)中國(guó)自有品牌占比1%，而歐美國(guó)家平均占比高達(dá)24%?？梢?jiàn)歐美電商市場(chǎng)平臺(tái)占比低，難以形成壟斷，同時(shí)自有品牌占有率高，因此品牌獨(dú)立站在海外有更優(yōu)質(zhì)的發(fā)展環(huán)境。
亞馬遜等海外平臺(tái)政策逐漸收緊，2021年亞馬遜封號(hào)潮迫使眾多國(guó)內(nèi)商家倒閉關(guān)店。同時(shí)對(duì)于新手，平臺(tái)入場(chǎng)門(mén)檻越發(fā)變高：注冊(cè)方式受限，通過(guò)率低以及中國(guó)賬號(hào)易被封號(hào)。與之相對(duì)是機(jī)會(huì)越發(fā)變少，平臺(tái)上流量爭(zhēng)奪和價(jià)格戰(zhàn)越發(fā)激烈，作為新人店鋪想在平臺(tái)獲得較好的曝光和推薦現(xiàn)在可能性極低。
近年來(lái)無(wú)數(shù)資本開(kāi)始涌入獨(dú)立站。shopify作為頭部獨(dú)立站服務(wù)商股價(jià)從2019到2022上漲近10倍，22年獨(dú)立站領(lǐng)頭羊Shein市值高達(dá)千億美金, 拼多多9月上線(xiàn)Temu對(duì)標(biāo)Shein作為公司重點(diǎn)項(xiàng)目。這些都預(yù)示越來(lái)越多商家和公司開(kāi)始關(guān)注并入局獨(dú)立站。
下圖分別是國(guó)外頭部平臺(tái)亞馬遜和獨(dú)立站Shein的首頁(yè)。亞馬遜顯得規(guī)整，統(tǒng)一，秩序；而右邊Shein更為豐富，跳躍，自由。我們認(rèn)為自由，是獨(dú)立站和平臺(tái)本質(zhì)上的差異點(diǎn)。
為什么獨(dú)立站可以這么自由呢？
因?yàn)楠?dú)立站擁有獨(dú)立域名和頁(yè)面, 并由商家獨(dú)立設(shè)計(jì)、運(yùn)營(yíng)來(lái)打造品牌。商家對(duì)于獨(dú)立站每一個(gè)環(huán)節(jié)都擁有絕對(duì)的自主權(quán)，同時(shí)帶來(lái)特定優(yōu)勢(shì)：
但獨(dú)立站的模式并不適用于所有的出海商家：
獨(dú)立站模式下，核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務(wù)商，比如跨境支付、倉(cāng)儲(chǔ)和配送能力。而在信息流層面，更多在于商家對(duì)于用戶(hù)的觸達(dá)和轉(zhuǎn)化，這也是作為設(shè)計(jì)師可以參與并發(fā)力的點(diǎn)。
那么獨(dú)立站針對(duì)的用戶(hù)會(huì)具有什么樣的特征？國(guó)泰君安證券曾經(jīng)專(zhuān)門(mén)研究過(guò)Shein的用戶(hù)，主要為20-35追求時(shí)尚個(gè)性的白領(lǐng)女士，該類(lèi)群體追求個(gè)性化和潮流同時(shí)注重商品性?xún)r(jià)比。因此我們認(rèn)為追求個(gè)性化，同時(shí)付費(fèi)能力相對(duì)有限的年輕人更傾向于在獨(dú)立站進(jìn)行交易。
獨(dú)立站對(duì)于用戶(hù)而言，存在觸達(dá)(多渠道)—認(rèn)知(物料+站點(diǎn))—消費(fèi)(站點(diǎn)轉(zhuǎn)化到完成交易)—傳播(多渠道)等觸點(diǎn)，在這些觸點(diǎn)打動(dòng)用戶(hù)的關(guān)鍵在于品牌認(rèn)知和主觀(guān)認(rèn)同。整個(gè)過(guò)程中，設(shè)計(jì)一方面可以在認(rèn)知階段從視覺(jué)層面通過(guò)物料、站點(diǎn)、推文傳遞品牌感知，另一方面可以在消費(fèi)階段從交互層面通過(guò)互動(dòng)、服務(wù)來(lái)建立連接和粘性。
2.獨(dú)立站相比平臺(tái)的設(shè)計(jì)關(guān)鍵點(diǎn)
我們認(rèn)為獨(dú)立站和平臺(tái)本質(zhì)的差異在于獨(dú)立站將商品內(nèi)容化。平臺(tái)就像貨架上擺滿(mǎn)各類(lèi)型商品，需要用戶(hù)快速找到并進(jìn)行交易。而獨(dú)立站把商品內(nèi)容化，慢慢建立形象并輸出內(nèi)容從而和用戶(hù)建立情感聯(lián)系。那下文接著就將從導(dǎo)航、交易流程、視覺(jué)三個(gè)方面來(lái)分析兩者基于貨架和內(nèi)容體驗(yàn)上的差異性。
從導(dǎo)航結(jié)構(gòu)來(lái)看，平臺(tái)更為強(qiáng)調(diào)搜索將其置于頂部，同時(shí)強(qiáng)調(diào)分類(lèi)的快速篩選。而獨(dú)立站弱化搜索來(lái)節(jié)省縱向空間，頂部放置公告欄來(lái)定期公布優(yōu)惠信息。分類(lèi)若較少，分類(lèi)導(dǎo)航會(huì)置于products頁(yè)面下，采用頁(yè)面導(dǎo)航。分類(lèi)較多則會(huì)將頁(yè)面導(dǎo)航換為分類(lèi)導(dǎo)航，形成三層導(dǎo)航結(jié)構(gòu)。
然后對(duì)于導(dǎo)航路徑，平臺(tái)有兩種設(shè)計(jì)：
獨(dú)立站依據(jù)分類(lèi)的層級(jí)和個(gè)數(shù)會(huì)有面包屑和樓梯變種的設(shè)計(jì)：像shein作為服裝采用了面包屑，而Anker作為3C采用樓梯式變種，橫向展示所有品類(lèi)的名稱(chēng)和圖片。
我們認(rèn)為雖然現(xiàn)在電商出現(xiàn)直播電商，內(nèi)容社區(qū)等新形式，但核心交易流程都較為固定：首頁(yè)—搜索/瀏覽—商品列表頁(yè)—商詳頁(yè)—轉(zhuǎn)化(購(gòu)物車(chē)/付款)。
來(lái)到電商網(wǎng)站的用戶(hù)，可分為搜索型和瀏覽型。搜索型用戶(hù)會(huì)直接通過(guò)搜索到達(dá)商品列表頁(yè)，然后通過(guò)篩選條件找到心儀的商品進(jìn)入到商詳頁(yè)，最后選擇直接購(gòu)買(mǎi)或者加入購(gòu)物車(chē)來(lái)達(dá)成轉(zhuǎn)化。而對(duì)于瀏覽型用戶(hù)，區(qū)別在于他可能通過(guò)首頁(yè)的推薦商品、推薦分類(lèi)等模塊來(lái)到達(dá)商品列表頁(yè)而非搜索。因?yàn)槭醉?yè)本身只是作為入口，因此接下來(lái)將從搜索/瀏覽、列表、商詳、購(gòu)物車(chē)/轉(zhuǎn)化來(lái)進(jìn)行分析。
平臺(tái)對(duì)于搜索框的處理較類(lèi)似，將其置于頁(yè)面的中心，差異性在于點(diǎn)擊搜索框后是否會(huì)出現(xiàn)熱門(mén)搜索和搜索歷史來(lái)幫助用戶(hù)進(jìn)行決策。而獨(dú)立站都會(huì)弱化搜索框，將其置于頂部功能區(qū)。原因在于獨(dú)立站本身品類(lèi)和SKU相對(duì)平臺(tái)較少，搜索的頻率需求不明顯。點(diǎn)擊獨(dú)立站搜索功能后，有兩種設(shè)計(jì)：品類(lèi)較少會(huì)出現(xiàn)氣泡，同時(shí)下方顯示熱門(mén)和模糊搜索結(jié)果；品類(lèi)較多出現(xiàn)大氣泡，在頁(yè)面中部強(qiáng)化搜索區(qū)。
從瀏覽行為來(lái)看，平臺(tái)首頁(yè)有三個(gè)入口：
其中頭部的分類(lèi)導(dǎo)航、商品分類(lèi)和商品卡片可通用到所有平臺(tái)設(shè)計(jì)，而首屏banner旁的分類(lèi)多出現(xiàn)于國(guó)內(nèi)平臺(tái)的設(shè)計(jì)中目的是提高商品分類(lèi)的曝光率。而對(duì)于獨(dú)立站，只有商品分類(lèi)和商品卡片入口依然存在。
獨(dú)立站另外有兩個(gè)入口：
設(shè)計(jì)目標(biāo)在于將更多分類(lèi)和商品信息前置，縮短最終到達(dá)商品的路徑。
商品列表頁(yè)核心部分在于篩選+商品卡片，用戶(hù)通過(guò)對(duì)應(yīng)的篩選條件最后選擇到滿(mǎn)意的商品卡片。
平臺(tái)篩選區(qū)普遍使用左右結(jié)構(gòu)的設(shè)計(jì)，左邊的篩選區(qū)加上右邊的商品列表，篩選區(qū)默認(rèn)主動(dòng)展開(kāi)常用而收起低頻篩選項(xiàng)。篩選項(xiàng)較多情形下操作效率較高，但占據(jù)空間大同時(shí)影響整體視覺(jué)效果。
而獨(dú)立站篩選區(qū)有兩種設(shè)計(jì)：
對(duì)于商品卡片，平臺(tái)和獨(dú)立站都采用了上圖下文，適用于圖片為主其他信息為輔的卡片，在保持展示卡片個(gè)數(shù)的同時(shí)瀏覽效率較高。而從細(xì)節(jié)上來(lái)看，平臺(tái)會(huì)有較多信息來(lái)強(qiáng)調(diào)信任感，因?yàn)槠脚_(tái)本身商品都由第三方商家提供，所以得給予用戶(hù)足夠信任。而獨(dú)立站之所以不強(qiáng)調(diào)，因?yàn)樗ㄟ^(guò)品牌建設(shè)來(lái)給予用戶(hù)信任感，所以獨(dú)立站放大圖片面積，縮小信任相關(guān)文字信息。獨(dú)立站另一個(gè)特征在于，條目列表頁(yè)就有較多轉(zhuǎn)化入口，基本可以直接加入購(gòu)物車(chē)/詳情，來(lái)最終縮短用戶(hù)的決策路徑。
獨(dú)立站和平臺(tái)商詳頁(yè)最大區(qū)別在于首屏的信息結(jié)構(gòu)，獨(dú)立站分為兩塊：圖片+信息，給圖片本身留出了較大展示區(qū)，而信息聚焦于最核心的款式和價(jià)格，轉(zhuǎn)化區(qū)域吸底目的為了強(qiáng)化轉(zhuǎn)化率+占用過(guò)少空間。然后平臺(tái)首屏分為三塊，將轉(zhuǎn)化區(qū)置于頁(yè)面的右方來(lái)強(qiáng)化用戶(hù)首屏下的轉(zhuǎn)化率，缺點(diǎn)在于用戶(hù)下滑到頁(yè)面下方時(shí)無(wú)法進(jìn)行轉(zhuǎn)化操作。有的平臺(tái)會(huì)將右邊轉(zhuǎn)化區(qū)懸浮，缺點(diǎn)在于會(huì)壓縮下方的商品詳細(xì)信息區(qū)。
平臺(tái)有兩個(gè)常見(jiàn)的轉(zhuǎn)化操作：購(gòu)物車(chē)和購(gòu)買(mǎi)，而越來(lái)越多的獨(dú)立站開(kāi)始用心愿單的功能來(lái)替代原來(lái)的購(gòu)買(mǎi)操作，其中心愿單可直接在商品條目頁(yè)添加。我們推測(cè)主要目的在于降低用戶(hù)決策成本，促進(jìn)更多轉(zhuǎn)化。接下來(lái)主要從心愿單，購(gòu)物車(chē)，付款頁(yè)來(lái)進(jìn)行分析。
基于我們的設(shè)計(jì)經(jīng)驗(yàn)，網(wǎng)站的視覺(jué)設(shè)計(jì)一般有三個(gè)對(duì)應(yīng)的難點(diǎn)：品牌—如何突出網(wǎng)站品牌特色，形成差異化；節(jié)奏—如何合理排列不同視覺(jué)元素，形成視覺(jué)動(dòng)線(xiàn)和層級(jí)；創(chuàng)新—如何突破簡(jiǎn)單的頁(yè)面框架限制。那下文就將基于這三點(diǎn)來(lái)分析：
這方面獨(dú)立站和平臺(tái)的差異性并不大，都是基于自身的logo品牌，提取出對(duì)應(yīng)的基本型、色彩以及感覺(jué)。然后將其運(yùn)用到網(wǎng)站設(shè)計(jì)上，比如運(yùn)營(yíng)類(lèi)的icon，插圖，banner以及頁(yè)面組件類(lèi)如按鈕，標(biāo)簽和搜索框等。獨(dú)立站對(duì)比下延伸場(chǎng)景更為豐富，因?yàn)檫\(yùn)營(yíng)圖都是自己配置，所以把顏色氛圍以及形狀都融入其中，形成更突出的品牌感。
右邊是獨(dú)立站，可以看到視覺(jué)動(dòng)線(xiàn)會(huì)從頂部banner區(qū)開(kāi)始，從頁(yè)面中間往下，到了后面部分才開(kāi)始從左到右。從視覺(jué)層次來(lái)看，它延長(zhǎng)頂部banner區(qū)的視覺(jué)重點(diǎn)，在首屏以下位置才開(kāi)始弱化內(nèi)容。而獨(dú)立站下方內(nèi)容也基于其多元的內(nèi)容載體來(lái)采用不同的排版方式，豐富整體層次。目的在于在首屏強(qiáng)化對(duì)于用戶(hù)的視覺(jué)吸引力，保持用戶(hù)高度的專(zhuān)注。
第三部分本文將基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享獨(dú)立站設(shè)計(jì)避坑點(diǎn)。出海易是去年百度B2B下面孵化新業(yè)務(wù)，它致力于幫助企業(yè)一站式出海，目前在4月已經(jīng)推出出海易SAAS產(chǎn)品并正式售賣(mài)。基于我們目前設(shè)計(jì)經(jīng)驗(yàn)和思考，如下圖獨(dú)立站設(shè)計(jì)有七類(lèi)問(wèn)題需要注意。而接下來(lái)將從中選出信息缺失、圖片質(zhì)量、移動(dòng)端體驗(yàn)、國(guó)內(nèi)外體驗(yàn)差異這四類(lèi)我們?cè)诔龊Ｒ讟I(yè)務(wù)實(shí)踐中完整體現(xiàn)的問(wèn)題來(lái)分析。
之前提到過(guò)，獨(dú)立站相比平臺(tái)一大特色就是信息豐富且多元。但作為服務(wù)商，實(shí)際會(huì)接觸到不少初次嘗試出海的中小企業(yè)，這些商家由于自身經(jīng)驗(yàn)不足，提供的信息和物料出現(xiàn)缺失現(xiàn)象。那作為設(shè)計(jì)師面對(duì)這樣的情形，應(yīng)該如何設(shè)計(jì)以補(bǔ)救呢？
獨(dú)立站一大亮點(diǎn)在于高質(zhì)量商品圖片，作為設(shè)計(jì)師當(dāng)然會(huì)設(shè)想商家能提供下圖左邊的圖片。但放到實(shí)際場(chǎng)景下商家提供的圖片質(zhì)量和效果都不可控，往往是提供的圖片右邊這樣。
所以很多商家提供的圖片質(zhì)量很難滿(mǎn)足現(xiàn)有獨(dú)立站對(duì)于圖片的要求，因此從設(shè)計(jì)側(cè)通過(guò)以下三個(gè)設(shè)計(jì)策略來(lái)進(jìn)行補(bǔ)救：
設(shè)計(jì)正方形容器，所有圖片都會(huì)自動(dòng)縮放到容器區(qū)域下，來(lái)保證不同圖片尺寸下整體視覺(jué)上的一致性。
對(duì)于商品卡片會(huì)有多種處理方法，樣式1直接給圖片固定底色，來(lái)形成卡片間的間隔。而樣式2和3都采用透明背景色，卡片通過(guò)較大的間隔來(lái)進(jìn)行整體的區(qū)分。
樣式1這樣通過(guò)固定底色的模式對(duì)于圖片本身要求過(guò)高。而像樣式2和3只通過(guò)間距區(qū)分會(huì)帶來(lái)問(wèn)題，實(shí)際下的商品圖片有的有底，有的沒(méi)底，容易產(chǎn)生不一致的場(chǎng)景。因此最后實(shí)際設(shè)計(jì)樣式直接給了整體背景底色，然后用白色的卡片來(lái)區(qū)分商品，同時(shí)縮小了圖片所占的面積來(lái)避免圖片質(zhì)量差的影響。
SAAS后臺(tái)會(huì)設(shè)計(jì)對(duì)應(yīng)的尺寸提示，在用戶(hù)編輯上傳圖片前，頁(yè)面會(huì)有對(duì)應(yīng)默認(rèn)圖來(lái)暗示用戶(hù)合理的圖片樣式，給到商家配色和尺寸參考。
國(guó)外PC還是用戶(hù)主要購(gòu)物方式，因此獨(dú)立站設(shè)計(jì)以PC為主。但隨著國(guó)外移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)端也成了商家必須要布局的部分。無(wú)論對(duì)于設(shè)計(jì)師還是開(kāi)發(fā)，重新設(shè)計(jì)開(kāi)發(fā)并維護(hù)PC和移動(dòng)兩套成本都巨大，因此自適應(yīng)成了這個(gè)階段下較優(yōu)選擇。下面將會(huì)分享下自適應(yīng)設(shè)計(jì)下的一些細(xì)節(jié)。
因?yàn)楠?dú)立站針對(duì)海外用戶(hù)，所以和國(guó)內(nèi)電商設(shè)計(jì)相比有兩個(gè)問(wèn)題需要注意：1.不同國(guó)家下語(yǔ)言差異會(huì)導(dǎo)致視覺(jué)差異 2.不同國(guó)家間用戶(hù)在操作習(xí)慣本身存在差異。
4.結(jié)語(yǔ)
隨著全球電商的迅速發(fā)展和出海熱潮的加劇，獨(dú)立站會(huì)逐漸成為出海商家國(guó)外品牌推廣、營(yíng)銷(xiāo)、客戶(hù)關(guān)系維護(hù)的重要抓手，同時(shí)也會(huì)給更多具有特色和渴望創(chuàng)新的設(shè)計(jì)師們，更廣闊展現(xiàn)自身才華的空間和機(jī)會(huì)。乘風(fēng)潮頭立，啟航正當(dāng)時(shí)，獨(dú)立站期待你的加入。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一、個(gè)性化的性別選擇設(shè)計(jì)
完善信息對(duì)于產(chǎn)品來(lái)說(shuō)是提升體驗(yàn)的關(guān)鍵，一些產(chǎn)品在初始狀態(tài)會(huì)引導(dǎo)用戶(hù)去完善，比如昵稱(chēng)、頭像、性別、年齡等基礎(chǔ)信息的采集。如何提高用戶(hù)的設(shè)置興趣，降低完善信息的排斥感，需要設(shè)計(jì)師進(jìn)行反復(fù)推敲。
最近在體驗(yàn) FLAG APP 的時(shí)候，在性別選擇界面設(shè)計(jì)上區(qū)別于以往體驗(yàn)過(guò)的產(chǎn)品，將性別的可視化進(jìn)行了更為情感化的強(qiáng)化。出色的設(shè)計(jì)讓用戶(hù)眼前一亮，精美的插畫(huà)提高了整體設(shè)計(jì)的感官體驗(yàn)。該案例提供了性別選擇差異化的表現(xiàn)，是提高常規(guī)信息界面設(shè)計(jì)視覺(jué)感的不錯(cuò)思路。
二、情感化的用戶(hù)等級(jí)設(shè)計(jì)
用戶(hù)等級(jí)是增加黏性的關(guān)鍵，也能通過(guò)等級(jí)帶給會(huì)員更多的增值服務(wù)，激發(fā)用戶(hù)的參與度。
在使用海馬體照相館 APP 的時(shí)候，個(gè)人中心在頂部視覺(jué)區(qū)域會(huì)直接顯示用戶(hù)等級(jí)，配合情感化的人物插畫(huà)特別突出。通過(guò)左右滑動(dòng)可以查看不同的等級(jí)，等級(jí)名稱(chēng)和對(duì)應(yīng)的人物形象插畫(huà)也會(huì)針對(duì)性的設(shè)計(jì)，不僅強(qiáng)化了用戶(hù)體驗(yàn)，不錯(cuò)的視覺(jué)感也能吸引用戶(hù)的關(guān)注度。
三、精美的插畫(huà)助你釋放壓力
插畫(huà)在產(chǎn)品設(shè)計(jì)中的曝光度越來(lái)越高，風(fēng)格多樣化直接影響產(chǎn)品風(fēng)格，也能增強(qiáng)情感化體驗(yàn)。全靠插畫(huà)撐起整個(gè)產(chǎn)品的案例是什么樣子呢？最近發(fā)現(xiàn)了這么一款產(chǎn)品。
Wild Journey 是一款解壓的白噪音 APP，內(nèi)置了許多大自然的聲音，讓用戶(hù)體驗(yàn)到荒野的空曠、森林的靜謐、大海的波濤。整個(gè)設(shè)計(jì)全是精美的矢量插畫(huà)作品，帶給用戶(hù)賞心悅目的感官體驗(yàn)。來(lái)這里釋放自己的壓力，放松身心。
四、趨勢(shì)化的引導(dǎo)頁(yè)設(shè)計(jì)
引導(dǎo)頁(yè)設(shè)計(jì)是最容易呈現(xiàn)風(fēng)格趨勢(shì)的，利于設(shè)計(jì)師進(jìn)行創(chuàng)意發(fā)揮。無(wú)論是想要發(fā)揮插畫(huà)技能、建模能力或者動(dòng)效表現(xiàn)，引導(dǎo)頁(yè)都能提供發(fā)揮的場(chǎng)景。
最近在體驗(yàn)嘀嗒出行的時(shí)候，發(fā)現(xiàn)全新升級(jí)的 9.0 版本，引導(dǎo)頁(yè)設(shè)計(jì)風(fēng)格也是讓人耳目一新。利用了趨勢(shì)感的插畫(huà)風(fēng)格和視覺(jué)表現(xiàn)風(fēng)格（玻璃質(zhì)感風(fēng)）相結(jié)合，畫(huà)面清新自然，帶給用戶(hù)非常好的視覺(jué)感官體驗(yàn)。
五、可視化表現(xiàn)提高用戶(hù)理解度
可視化設(shè)計(jì)逐步成為信息傳遞的趨勢(shì)，利用圖形化的形式更利于用戶(hù)理解，相較于枯燥的文字化呈現(xiàn)來(lái)說(shuō)閱讀理解的效率更高。
Keep 在產(chǎn)品設(shè)計(jì)的時(shí)候，有效的將一些數(shù)據(jù)的表達(dá)和內(nèi)容的普及以可視化的圖形進(jìn)行展示，不僅提高了界面設(shè)計(jì)的感官體驗(yàn)，也能有利于用戶(hù)對(duì)于內(nèi)容的理解。提高界面設(shè)計(jì)的視覺(jué)感也能讓用戶(hù)更為關(guān)注，圖形可視化已經(jīng)逐步成為產(chǎn)品設(shè)計(jì)解決方案中的趨勢(shì)。
六、個(gè)性化的主題皮膚設(shè)置
個(gè)性化的定制設(shè)計(jì)可以讓用戶(hù)感受到產(chǎn)品的溫度，根據(jù)自己的喜好選擇主題化呈現(xiàn)。成熟的產(chǎn)品都會(huì)在個(gè)性化設(shè)置上面提升體驗(yàn)度，特別是在主題皮膚的定制上面，提供了更多的風(fēng)格讓用戶(hù)選擇。
Keep 在將主題皮膚設(shè)置定義為選擇運(yùn)動(dòng)伙伴，不僅提供了不同的 IP 形象和主題皮膚，俏皮可愛(ài)的動(dòng)態(tài)延展也傳遞了情感化的體驗(yàn)。多種風(fēng)格的設(shè)計(jì)滿(mǎn)足了不同用戶(hù)的喜好需求，還為不同的主題定義了擬人化的角色和身份，視覺(jué)感和體驗(yàn)度都非常的到位。
七、提高參與度的簽到設(shè)計(jì)
簽到設(shè)計(jì)可以提高用戶(hù)黏性，讓用戶(hù)在參與的同時(shí)獲得禮品或者增值服務(wù)，簽到也成為了眾多產(chǎn)品的標(biāo)配功能。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，如何通過(guò)設(shè)計(jì)提高用戶(hù)簽到的參與度，是需要不斷探索的設(shè)計(jì)思考。
最近在使用天天跳繩時(shí)，發(fā)現(xiàn)其簽到設(shè)計(jì)的視覺(jué)表達(dá)直觀(guān)醒目，大大的提高了用戶(hù)對(duì)于簽到的理解和參與度。將簽到后解鎖的勛章、經(jīng)驗(yàn)、裝扮和禮品等直觀(guān)的結(jié)合到簽到界面中，不僅風(fēng)格協(xié)調(diào)統(tǒng)一，視覺(jué)風(fēng)格也符合運(yùn)動(dòng)場(chǎng)景感。看到這個(gè)界面成功吸引了我的簽到欲望，簽到操作簡(jiǎn)單，整體的體驗(yàn)度都做得非常不錯(cuò)。
八、情感化的個(gè)人中心設(shè)計(jì)
個(gè)人中心作為主界面之一來(lái)說(shuō)，設(shè)計(jì)的體驗(yàn)度是至關(guān)重要的。為了滿(mǎn)足用戶(hù)的喜好需求，個(gè)性化的設(shè)置也是層出不窮，功能布局、頭像裝扮、主題皮膚等都呈現(xiàn)出了眾多的優(yōu)秀設(shè)計(jì)方案。
天天跳繩是個(gè)人經(jīng)常使用的一款運(yùn)動(dòng)輔助工具，記錄小孩跳繩也是非常便利的工具。個(gè)人中心頂部視覺(jué)區(qū)域的人偶形象增強(qiáng)了界面設(shè)計(jì)的感官度，人偶的動(dòng)態(tài)體現(xiàn)出用戶(hù)的運(yùn)動(dòng)狀態(tài)，可以進(jìn)行自定義的設(shè)置來(lái)滿(mǎn)足自己的情感表達(dá)。可以設(shè)置人偶的裝扮、旋轉(zhuǎn)角度、動(dòng)作等，人性化的功能設(shè)置提高了自定義的體驗(yàn)度，強(qiáng)化了用戶(hù)情感化的使用體驗(yàn)。
九、結(jié)果導(dǎo)向的設(shè)計(jì)表達(dá)
以圖標(biāo)/圖形/圖片等設(shè)計(jì)輔助信息的傳遞很常見(jiàn)，通常都是根據(jù)信息的文案來(lái)進(jìn)行設(shè)計(jì)表達(dá)。如果放棄本身文案信息傳遞的意思，選擇結(jié)果導(dǎo)向的設(shè)計(jì)表達(dá)，也能帶來(lái)不一樣的設(shè)計(jì)反思。
最近在體驗(yàn) One More 的時(shí)候，動(dòng)作庫(kù)的列表設(shè)計(jì)中便選擇了結(jié)果導(dǎo)向的思路。如果是常規(guī)的設(shè)計(jì)解決方案，會(huì)根據(jù)列表主題內(nèi)容來(lái)設(shè)計(jì)配圖，這樣也能輔助對(duì)于內(nèi)容的理解。但是 One More 選擇了完成該項(xiàng)目得到的鍛煉部位為設(shè)計(jì)思路，雖然不能輔助項(xiàng)目信息的傳遞，但是這個(gè)設(shè)計(jì)表達(dá)更能讓用戶(hù)理解完成的結(jié)果，參與度也能得到提升?？梢暬脑O(shè)計(jì)替代了文字的表達(dá)，提高了用戶(hù)對(duì)項(xiàng)目的理解度，進(jìn)而轉(zhuǎn)化更高的參與度。
十、新穎的輪播 Banner 設(shè)計(jì)
輪播 Banner 圖對(duì)于設(shè)計(jì)發(fā)揮來(lái)說(shuō)，除了在本身的創(chuàng)意和視覺(jué)表達(dá)層面以外，產(chǎn)品結(jié)構(gòu)和功能層面也是設(shè)計(jì)師需要探索的方向。
極有家 APP 在產(chǎn)品的體驗(yàn)設(shè)計(jì)層面做得非常不錯(cuò)，針對(duì)輪播 Banner 位置也是做了新穎的創(chuàng)新。在 Banner 圖上設(shè)計(jì)了不同商品的引導(dǎo)標(biāo)簽，方便用戶(hù)在感受整體家裝效果圖的同時(shí)可以選擇場(chǎng)景中的商品，也能對(duì)場(chǎng)景中的商品價(jià)值有個(gè)清晰的認(rèn)知。輪播的形式結(jié)合了待輪播圖的預(yù)覽和風(fēng)格名稱(chēng)，增加了待輪播圖的曝光度，整個(gè)樣式表達(dá)上面視覺(jué)感也非常不錯(cuò)，是一個(gè)比較新穎的設(shè)計(jì)解決方案。
作者：黑馬青年 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
寫(xiě)在最前
B端界面的元素眾多，視窗范圍大，布局設(shè)計(jì)多種多樣，為了簡(jiǎn)化布局思維，我們通常給界面添加三個(gè)方向上的軸-X、Y、Z。X軸指水平方向上的軸線(xiàn)，Y軸指豎直方向上的軸線(xiàn)，以及Z軸指在三維空間中垂直于視窗平面的軸線(xiàn)。當(dāng)設(shè)計(jì)B端界面時(shí)，讓元素沿著這三個(gè)軸進(jìn)行布局，既能理清我們的設(shè)計(jì)思路，頁(yè)面的元素也能展示得更有邏輯。
本文圍繞這三個(gè)軸，來(lái)看看在B端界面的三維空間里，都有哪些設(shè)計(jì)規(guī)律。
一、X軸的布局與適應(yīng)
B端界面在PC視窗下展示，范圍更大，如常見(jiàn)的分辨率尺寸有1280x1024、1440x900、1920x1080等，且瀏覽器還支持動(dòng)態(tài)拖拽改變視窗寬度。所以B端界面在X軸上應(yīng)該更注重內(nèi)容的延展和適配，合理利用橫向增長(zhǎng)的空間。根據(jù)這一特點(diǎn)，在這一部分中，我們分業(yè)務(wù)場(chǎng)景來(lái)探討都有哪些典型布局，并針對(duì)每一種布局給出合適的適配方式。
B端典型的業(yè)務(wù)場(chǎng)景，可大致分為表格、圖表、表單、卡片、文字詳情五大類(lèi)頁(yè)面。這幾類(lèi)界面在X軸上排列的方式為單欄型、雙欄型、多欄型。如果有側(cè)導(dǎo)航，則在頁(yè)面最左側(cè)增加側(cè)導(dǎo)航即可，內(nèi)容區(qū)的布局不受影響。
1.單欄型
表格、圖表，這類(lèi)需要較大展示空間的場(chǎng)景，一般一個(gè)頁(yè)面只有一欄，不再在橫向空間進(jìn)行切割。當(dāng)視窗橫向拉伸時(shí)，也為了預(yù)覽更多的內(nèi)容，表格和圖表進(jìn)行橫向拉伸，保持撐滿(mǎn)視窗的狀態(tài)。
2.雙欄型
表單、文字詳情類(lèi)的頁(yè)面，采用雙欄結(jié)構(gòu)的概率較大。因?yàn)楸韱雾?yè)除了表單本身的內(nèi)容外，往往還有右側(cè)的輔助說(shuō)明面板，或者是預(yù)覽面板。文字詳情頁(yè)的右側(cè)也經(jīng)常出現(xiàn)其它閱讀內(nèi)容的推薦列表。當(dāng)這兩類(lèi)頁(yè)面視窗在橫向拉伸時(shí)，適應(yīng)的方式通常有兩種。
1）主模塊寬度拉伸，始終撐滿(mǎn)視窗，副模塊寬度固定。如果主模塊每行內(nèi)容都比較多，推薦使用這種方式，能更大化地瀏覽主模塊的內(nèi)容，減少不必要的換行。但缺點(diǎn)是，由于內(nèi)容本身如表單項(xiàng)、詳情文字等在X軸上占用的空間不多，他們所在的模塊橫向拉伸后，會(huì)出現(xiàn)很多留白。
2）各模塊保持寬度固定并居中展示，不跟隨視窗伸縮而變化。如果主模塊每行內(nèi)容不多，又需要頻繁的左右對(duì)照，推薦使用這種方式。
3.多欄型
多欄型頁(yè)面一般用于數(shù)據(jù)看板、媒體卡片(視頻/圖片)的展示。因?yàn)檫@類(lèi)業(yè)務(wù)場(chǎng)景，卡片數(shù)量多，無(wú)法簡(jiǎn)單地將頁(yè)面進(jìn)行區(qū)塊的分割，所以以卡片為單元來(lái)填充頁(yè)面。當(dāng)視窗橫向拉伸時(shí)，這里也會(huì)出現(xiàn)2種適應(yīng)的方式。
1）數(shù)據(jù)看板類(lèi)頁(yè)面，每個(gè)卡片等比拉伸（也可僅橫向拉伸），列數(shù)不增加，讓圖表能展示地更清晰。
2）媒體卡類(lèi)頁(yè)面，卡片需要設(shè)定一個(gè)最佳展示的寬度如w，當(dāng)視窗拉寬時(shí)，卡片等比放大。當(dāng)頁(yè)面拉寬到能增加一列寬度為w的卡片時(shí)，所有卡片寬度都恢復(fù)到w，增加一列。
上述說(shuō)了這么多適配的規(guī)則，當(dāng)然我們也可以給視窗設(shè)定一個(gè)統(tǒng)一的適配上限，避免當(dāng)視窗非常寬時(shí)，頁(yè)面的元素過(guò)于左右分離，反而不方便瀏覽。比如我們可以設(shè)置當(dāng)視窗寬度＞1920px后，頁(yè)面元素就不再跟隨撐滿(mǎn)，達(dá)到內(nèi)容區(qū)寬度上限值，居中展示在界面中。
二、Y軸的空間利用
B端界面，面對(duì)復(fù)雜的信息，我們往往會(huì)面對(duì)兩類(lèi)問(wèn)題，如何承載大量的信息，如何區(qū)分強(qiáng)弱主次。這就涉及到頁(yè)面Y軸的空間利用了。這里我們提供4個(gè)小辦法來(lái)解決上面的問(wèn)題。當(dāng)出現(xiàn)大量信息時(shí)，應(yīng)該注重Y軸空間的擴(kuò)展，合理搭配翻頁(yè)、加載等邏輯。當(dāng)希望對(duì)頁(yè)面元素區(qū)分強(qiáng)弱時(shí)，可以搭配滾動(dòng)吸頂、局部折疊等交互，有序展示更多信息。
1.如何承載大量信息
1）替換型對(duì)于表格類(lèi)頁(yè)面，為了方便快速查找所需信息，采用分頁(yè)器的方式展示更多的數(shù)據(jù)內(nèi)容，即把當(dāng)前頁(yè)內(nèi)容做替換。即頁(yè)面Y軸的高度是固定的，僅做內(nèi)容的變更。
2）向下延展型
對(duì)于瀑布流類(lèi)頁(yè)面，由于數(shù)據(jù)量大，且沒(méi)有快速定位的訴求，使用無(wú)限加載的方式，向下加載更多的數(shù)據(jù)，這種類(lèi)型的頁(yè)面Y軸可無(wú)限延展。
2.如何區(qū)分強(qiáng)弱主次
1）強(qiáng)-滾動(dòng)吸頂當(dāng)頁(yè)面滾動(dòng)到某個(gè)位置，需要去強(qiáng)調(diào)一些導(dǎo)航性質(zhì)的內(nèi)容時(shí)，我們可以使用滾動(dòng)吸頂?shù)慕换?，即?dāng)把這個(gè)元素（如標(biāo)題）滾動(dòng)至當(dāng)前視窗的頂部時(shí)，發(fā)生吸頂事件，始終停留在頁(yè)面中，該元素所引領(lǐng)的模塊在其下方滾動(dòng)瀏覽。當(dāng)把這個(gè)模塊滾動(dòng)完，吸頂交互失效。這樣即能臨時(shí)性地強(qiáng)調(diào)某些內(nèi)容，還不會(huì)影響其它模塊在Y軸上的展示。
2）弱-局部展開(kāi)對(duì)于表單類(lèi)頁(yè)面，若在某個(gè)選項(xiàng)下還存在二級(jí)內(nèi)容，則在初始展示時(shí)，優(yōu)先突出主選項(xiàng)本身，當(dāng)選中后再展開(kāi)二級(jí)內(nèi)容。這樣即能節(jié)省首屏空間，也能順應(yīng)使用者的學(xué)習(xí)、使用心智，在合適的時(shí)機(jī)展示細(xì)節(jié)內(nèi)容。
三、Z軸的疊加順序
說(shuō)完X軸、Y軸的布局設(shè)計(jì)，我們最后來(lái)看看Z軸。這里，我們需要把視角從二維平面轉(zhuǎn)為三維空間，比如吸頂?shù)膶?dǎo)航，菜單浮層，模態(tài)彈窗這些都屬于出現(xiàn)在Z軸上的元素，他們之間可以進(jìn)行層層疊加和嵌套，于是會(huì)出現(xiàn)疊加沖突的場(chǎng)景，導(dǎo)致發(fā)生錯(cuò)誤的遮擋現(xiàn)象。所以Z軸設(shè)計(jì)的關(guān)鍵點(diǎn)在于不同元素的疊加排序設(shè)計(jì)。那么怎樣才能有一個(gè)貫穿全局的合理排序，讓元素們能乖乖排在自己的隊(duì)列中呢？此處，我們將頁(yè)面的所有可能出現(xiàn)的元素按照Z(yǔ)軸的特點(diǎn)歸類(lèi)到三大區(qū)間里。每個(gè)區(qū)間內(nèi)給出相應(yīng)元素的排序順序指導(dǎo)，并配合動(dòng)態(tài)計(jì)算的邏輯，Z軸上的元素就能整齊地疊加起來(lái)啦。
1.基礎(chǔ)區(qū)間
a.展示類(lèi)-頁(yè)面中默認(rèn)就存在的、不會(huì)對(duì)其它元素造成遮擋的元素（表單、表格、文字、按鈕、圖表、圖片等）。
b.固定類(lèi)-固定在頁(yè)面某處的元素，滑動(dòng)頁(yè)面時(shí)會(huì)對(duì)a的元素產(chǎn)生遮擋（如吸頂導(dǎo)航、固定表頭/列、錨點(diǎn)、返回頂部按鈕等）。
c.浮層類(lèi)-由a中的元素觸發(fā)出的、指向該元素的臨時(shí)浮層元素。會(huì)對(duì)a以及固定元素產(chǎn)生遮擋。臨時(shí)浮層之間的z軸層級(jí)遵守觸發(fā)的時(shí)間先后順序，若臨時(shí)浮層可以同時(shí)存在在界面中，則后觸發(fā)的層級(jí)更高（下拉浮層、氣泡）。
2.模態(tài)區(qū)間
d.模態(tài)層-由基礎(chǔ)區(qū)間的元素觸發(fā)的，覆蓋整個(gè)視窗的模態(tài)元素，當(dāng)該元素出現(xiàn)后，至于基礎(chǔ)區(qū)間所有元素層級(jí)之上，基礎(chǔ)區(qū)間的所有功能無(wú)法交互(抽屜、對(duì)話(huà)框和全屏預(yù)覽等).
e.臨時(shí)浮層-在模態(tài)元素上出現(xiàn)的臨時(shí)浮層，計(jì)算高度時(shí)，可把d層想象成基礎(chǔ)區(qū)間的c層（下拉浮層、氣泡等）.
f.第二層模態(tài)層-在d出現(xiàn)之后出現(xiàn)的覆蓋整個(gè)視窗的模態(tài)元素。不特指第二層，也可以是第三、或更多。
模態(tài)區(qū)間內(nèi)，多個(gè)模態(tài)層可進(jìn)行疊加（即上文的f），疊加時(shí)一樣需要遵守觸發(fā)時(shí)間的先后順序，后觸發(fā)的層級(jí)更高出現(xiàn)在更上層。但是我們也應(yīng)注意，模態(tài)層不能疊加太多，會(huì)導(dǎo)致當(dāng)前頁(yè)面覆蓋過(guò)多內(nèi)容，一般最多用到兩層模態(tài)層就能滿(mǎn)足大部分場(chǎng)景了。
3.頂層區(qū)間
g.全局層-全局的、不被模態(tài)元素遮擋的元素?？梢猿ｑv在頁(yè)面中，也可臨時(shí)出現(xiàn)。
h.臨時(shí)層-由g觸發(fā)出的臨時(shí)浮層
max.最高層-始終動(dòng)態(tài)高于當(dāng)前頁(yè)面所有層的元素（比較典型的是Toast組件）。
四、寫(xiě)在最后
到這里，我們就淺談完關(guān)于B端界面的X、Y、Z軸上的設(shè)計(jì)特點(diǎn)了，雖然是一些高度抽象的內(nèi)容，真正按照業(yè)務(wù)需求執(zhí)行設(shè)計(jì)的時(shí)候，遇到的界面一定比我們這里談?wù)摰母鼜?fù)雜，但是只要我們清楚底層的空間布局、適應(yīng)方式、擴(kuò)展手段和疊加邏輯，再?gòu)?fù)雜的界面無(wú)非就是規(guī)則的嵌套，希望這篇文章能帶給大家一些小小的啟發(fā)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
百度酒店以比價(jià)為核心特色，經(jīng)歷多次設(shè)計(jì)探索，初步建立了用戶(hù)認(rèn)知。
設(shè)計(jì)中通過(guò)“核心流程分析-明確用戶(hù)關(guān)注信息-探索比價(jià)價(jià)值”的方式去制定設(shè)計(jì)策略，并在方案探索與落地階段，通過(guò)思路發(fā)散、多輪數(shù)據(jù)驗(yàn)證與方案迭代，驗(yàn)證了“氛圍感知強(qiáng)化、價(jià)值信息傳達(dá)、聚合比價(jià)”等設(shè)計(jì)手段的作用，希望給服務(wù)和電商等比價(jià)類(lèi)產(chǎn)品的設(shè)計(jì)師一些啟發(fā)和參考。
一、項(xiàng)目背景
酒店住宿在線(xiàn)預(yù)訂市場(chǎng)中，各個(gè)平臺(tái)基于用戶(hù)權(quán)益、運(yùn)營(yíng)補(bǔ)貼等差異進(jìn)行著激烈的價(jià)格競(jìng)爭(zhēng)，導(dǎo)致行業(yè)存在天然的價(jià)差。而在我們進(jìn)行的一次酒店預(yù)訂訪(fǎng)談中發(fā)現(xiàn)，超過(guò)半數(shù)的用戶(hù)在預(yù)訂酒店時(shí)會(huì)進(jìn)行比價(jià)，而比價(jià)的用戶(hù)中多數(shù)會(huì)使用2個(gè)以上的酒店APP。因此，在市場(chǎng)存在價(jià)差且用戶(hù)有比價(jià)訴求的背景下，百度酒店通過(guò)接入多家供給及會(huì)員低價(jià)，旨在建立酒店聚合比價(jià)平臺(tái)，為用戶(hù)提供性?xún)r(jià)比最高的酒店搜索服務(wù)。
二、設(shè)計(jì)策略與落地觸點(diǎn)
1.目標(biāo)和策略制定
在上述背景下，我們與產(chǎn)品側(cè)對(duì)齊業(yè)務(wù)目標(biāo)，結(jié)合對(duì)用戶(hù)訴求的分析，確定了設(shè)計(jì)目標(biāo)。
為了達(dá)成設(shè)計(jì)目標(biāo)，需要明確比價(jià)在酒店預(yù)訂的各個(gè)觸點(diǎn)下對(duì)用戶(hù)的價(jià)值是什么，以探索比價(jià)如何發(fā)揮作用。下圖列出了酒店預(yù)訂的核心流程、核心模塊及用戶(hù)關(guān)注信息，由于用戶(hù)在各個(gè)環(huán)節(jié)關(guān)注的信息不同，比價(jià)所能發(fā)揮的價(jià)值也就不同，因此基于比價(jià)是否影響用戶(hù)進(jìn)行選擇和決策，我們又將核心流程分成服務(wù)報(bào)價(jià)選擇前、服務(wù)報(bào)價(jià)選擇時(shí)、服務(wù)報(bào)價(jià)選擇后。
設(shè)計(jì)目標(biāo)的實(shí)現(xiàn)也對(duì)應(yīng)上述3個(gè)環(huán)節(jié)如下圖：
2.明確落地觸點(diǎn)
為了找到一些好的比價(jià)概念和價(jià)值的傳達(dá)方式，以及提升比價(jià)體驗(yàn)的方式，我們進(jìn)行了競(jìng)品調(diào)研，競(jìng)品包含酒店、商品等不同行業(yè)，調(diào)研結(jié)論歸納如下：
結(jié)合競(jìng)品調(diào)研結(jié)論，我們根據(jù)百度酒店的核心流程和觸點(diǎn)進(jìn)行了設(shè)計(jì)策略的拆解，建立了策略和落地的映射關(guān)系。
三、方案探索與落地
1.提升感知-讓用戶(hù)知道百度酒店可以比價(jià)
這一環(huán)節(jié)的設(shè)計(jì)目標(biāo)是要讓用戶(hù)知道百度酒店可以比價(jià)，以吸引用戶(hù)在百度酒店完成下單行為，因此清晰、有吸引力的比價(jià)元素設(shè)計(jì)十分重要?；诟?jìng)品調(diào)研內(nèi)容，我們進(jìn)行了設(shè)計(jì)探索。
1）酒店列表-氛圍感知強(qiáng)化及價(jià)值信息傳達(dá)
下圖所示為酒店列表比價(jià)設(shè)計(jì)的探索過(guò)程，最初的方案，為了保證酒店信息的獲取體驗(yàn)，采用了與傳統(tǒng)酒店預(yù)訂平臺(tái)采用一致的結(jié)構(gòu)和信息優(yōu)先級(jí)，僅結(jié)合圖片區(qū)域和價(jià)格做了比價(jià)信息的結(jié)合，但這種設(shè)計(jì)與傳統(tǒng)酒店預(yù)訂平臺(tái)差異很小，比價(jià)感知和價(jià)值的傳達(dá)效果并不好。因此設(shè)計(jì)側(cè)轉(zhuǎn)變思路，在酒店列表中通過(guò)更強(qiáng)化的模塊來(lái)突出比價(jià)的感知，同時(shí)結(jié)合“比某平臺(tái)低xx”的文案說(shuō)明比價(jià)結(jié)果，傳達(dá)“比價(jià)獲得更低價(jià)”的感知。
酒店列表覆蓋多個(gè)場(chǎng)景，為了建立百度酒店一致的體驗(yàn)和認(rèn)知，我們將列表的設(shè)計(jì)覆蓋到了搜索結(jié)果頁(yè)和小程序的多個(gè)頁(yè)面，如圖所示。
2）房型及服務(wù)報(bào)價(jià)-基于低價(jià)推薦去強(qiáng)化比價(jià)
房型及服務(wù)報(bào)價(jià)模塊對(duì)應(yīng)酒店精準(zhǔn)需求和酒店詳情頁(yè)，與酒店列表思路一致，方案在逐漸與傳統(tǒng)酒店預(yù)訂平臺(tái)產(chǎn)生差異化，去強(qiáng)化比價(jià)、低價(jià)的感知，形成記憶點(diǎn)。
下圖為搜索結(jié)果頁(yè)的方案，最初外露了多個(gè)房型，以滿(mǎn)足用戶(hù)的選擇訴求，但從用戶(hù)行為數(shù)據(jù)來(lái)看，百度酒店的絕大多數(shù)用戶(hù)會(huì)選擇酒店的最低價(jià)房型及報(bào)價(jià)，因此我們調(diào)整設(shè)計(jì)方案，結(jié)合最低報(bào)價(jià)，用模塊式的對(duì)比方式去強(qiáng)化比價(jià)，并通過(guò)“低價(jià)立省xx”的信息去傳達(dá)低價(jià)感知。另外，這一部分的設(shè)計(jì)也和聚合比價(jià)有所結(jié)合，后面會(huì)進(jìn)行詳細(xì)的說(shuō)明。
詳情頁(yè)的主要模塊設(shè)計(jì)與搜索結(jié)果頁(yè)基本一致，如下圖所示，詳情頁(yè)中將最低報(bào)價(jià)作為低價(jià)房型推薦，以建立一致的比價(jià)認(rèn)知同時(shí)便于用戶(hù)快捷預(yù)訂低價(jià)。另外，在常規(guī)的報(bào)價(jià)列表中，為了提升用戶(hù)查找報(bào)價(jià)的效率，相比于最低價(jià)房型，采用了弱化的形式。最終方案上線(xiàn)后，數(shù)據(jù)上也取得了正向的效果，報(bào)價(jià)展現(xiàn)到預(yù)訂點(diǎn)擊的轉(zhuǎn)化得到了提升。
3）“產(chǎn)品縫隙”中的比價(jià)概念滲透
“產(chǎn)品縫隙”并不像上述列表模塊那樣感知強(qiáng)烈，設(shè)計(jì)的目的是為了進(jìn)一步加深“百度酒店可以比價(jià)”的用戶(hù)印象。結(jié)合百度酒店的核心頁(yè)面，我們重新設(shè)計(jì)了酒店列表和房型報(bào)價(jià)列表的加載態(tài)，利用“多資源方交替動(dòng)效+文案說(shuō)明”的方式，構(gòu)建動(dòng)態(tài)的比價(jià)感知，在用戶(hù)進(jìn)入頁(yè)面或者進(jìn)行篩選等場(chǎng)景時(shí)會(huì)出現(xiàn)。另外，我們也利用了小程序首頁(yè)和詳情頁(yè)的頁(yè)尾，在閱讀結(jié)束時(shí)去傳達(dá)全網(wǎng)比價(jià)的概念。
2.建立認(rèn)知-聚合比價(jià)模式的構(gòu)建
在競(jìng)品調(diào)研部分，我們提到了聚合比價(jià)模式，百度酒店由于報(bào)價(jià)復(fù)雜，也適合用這種方式去簡(jiǎn)化報(bào)價(jià)。
如圖所示，常規(guī)酒店預(yù)訂平臺(tái)，同一房型（如標(biāo)準(zhǔn)大床房）會(huì)存在不同服務(wù)政策（早餐服務(wù)、取消規(guī)則、支付方式）的報(bào)價(jià)，而在百度酒店中，由于又加入了預(yù)訂平臺(tái)的差異，報(bào)價(jià)會(huì)更加復(fù)雜，數(shù)量更多且同質(zhì)化嚴(yán)重，即服務(wù)政策相同，僅預(yù)訂平臺(tái)不同的報(bào)價(jià)多次出現(xiàn)，這就導(dǎo)致了報(bào)價(jià)列表的查看和選擇效率較低。
聚合比價(jià)模式就是要將這些服務(wù)政策相同的報(bào)價(jià)聚合在一起進(jìn)行比價(jià)，以簡(jiǎn)化報(bào)價(jià)列表提升選擇效率，同時(shí)在服務(wù)相同的情況下，絕大部分用戶(hù)會(huì)更傾向于低價(jià)，在報(bào)價(jià)聚合后，可以突出低價(jià)以便用戶(hù)預(yù)訂。
我們也在探索如何讓聚合比價(jià)更簡(jiǎn)單，初始方案采用點(diǎn)擊展開(kāi)的形式，用戶(hù)可以保持滑動(dòng)瀏覽的交互體驗(yàn)，整個(gè)過(guò)程的交互體驗(yàn)比較流暢，但頁(yè)面的層級(jí)關(guān)系較為復(fù)雜，用戶(hù)認(rèn)知成本高。因此我們又嘗試了調(diào)起面板展示比價(jià)詳情，讓用戶(hù)聚焦在當(dāng)前報(bào)價(jià)的對(duì)比，并通過(guò)模塊式的設(shè)計(jì)，清晰羅列了每個(gè)平臺(tái)的服務(wù)、優(yōu)惠明細(xì)等差異信息，讓信息的對(duì)比更高效，同時(shí)強(qiáng)化低價(jià)平臺(tái)，與前面的比價(jià)模塊保持認(rèn)知一致。
聚合比價(jià)模式下，存在了兩種用戶(hù)路徑，如圖所示。用戶(hù)可以直接選擇最低價(jià)資源方完成預(yù)訂，也可以通過(guò)比價(jià)詳情彈層，查看針對(duì)同一服務(wù)的所有平臺(tái)報(bào)價(jià)，對(duì)比平臺(tái)的詳細(xì)服務(wù)、優(yōu)惠差異后再選擇預(yù)訂。
這種預(yù)訂模式的目的，一方面在教育用戶(hù)建立百度酒店可以比價(jià)、可以買(mǎi)到低價(jià)的認(rèn)知，另一方面也提升了用戶(hù)選擇低價(jià)平臺(tái)的效率。另外，聚合比價(jià)要具有清晰的規(guī)則才能被理解和信任，在比價(jià)詳情中，為了進(jìn)一步降低認(rèn)知成本，我們通過(guò)標(biāo)題突出了聚合項(xiàng)，并增加了比價(jià)說(shuō)明入口，讓聚合規(guī)則更明確。聚合比價(jià)的方案上線(xiàn)后，報(bào)價(jià)的預(yù)訂點(diǎn)擊到成單轉(zhuǎn)化也得到了提升。
另外，前文提到的精準(zhǔn)需求搜索結(jié)果頁(yè)和詳情頁(yè)的低價(jià)房型推薦也利用了這種模式，不過(guò)在比價(jià)感知上做了更強(qiáng)化的處理。用戶(hù)可以在詳情頁(yè)直接點(diǎn)擊各個(gè)平臺(tái)報(bào)價(jià)完成預(yù)訂，也可以點(diǎn)擊文字部分查看房型詳情，在頁(yè)面底部的比價(jià)詳情中完成報(bào)價(jià)的對(duì)比和預(yù)訂。
3.強(qiáng)化記憶-比價(jià)價(jià)值感的再次強(qiáng)化
填單場(chǎng)景是在預(yù)訂完成后，這個(gè)環(huán)節(jié)我們可以將比價(jià)的概念和價(jià)值再次展示給用戶(hù)，以加深用戶(hù)對(duì)比價(jià)的認(rèn)知。這里的設(shè)計(jì)手段與“提升感知”階段類(lèi)似，如圖所示為一些方案探索，在用戶(hù)選擇低價(jià)平臺(tái)預(yù)訂，點(diǎn)擊跳轉(zhuǎn)至填單頁(yè)后，我們會(huì)強(qiáng)化用戶(hù)“預(yù)訂到最低價(jià)”以及“為用戶(hù)節(jié)省xx元”的感知。另外，在用戶(hù)提交訂單時(shí)，會(huì)存在一定的加載時(shí)間，我們也利用了這里的“產(chǎn)品縫隙”，結(jié)合加載態(tài)繼續(xù)傳遞低價(jià)、省錢(qián)的認(rèn)知。
四、結(jié)語(yǔ)
回顧百度酒店的比價(jià)設(shè)計(jì)過(guò)程，我們以比價(jià)及低價(jià)感知傳達(dá)、高效預(yù)訂低價(jià)為設(shè)計(jì)目標(biāo)，基于百度酒店的核心預(yù)訂流程，探索比價(jià)在各個(gè)環(huán)節(jié)如何發(fā)揮作用，進(jìn)而將設(shè)計(jì)目標(biāo)的實(shí)現(xiàn)劃分為了“提升感知、建立認(rèn)知、強(qiáng)化記憶”三個(gè)階段，并為業(yè)務(wù)帶來(lái)轉(zhuǎn)化提升。
提升感知過(guò)程結(jié)合流程中的主要模塊，通過(guò)模塊式對(duì)比形式、傳達(dá)比價(jià)價(jià)值感、基于低價(jià)推薦強(qiáng)化比價(jià)、以及利用“產(chǎn)品縫隙”等手段，去吸引用戶(hù)了解和使用比價(jià)；建立認(rèn)知過(guò)程利用“聚合比價(jià)”模式去精簡(jiǎn)報(bào)價(jià)，同時(shí)結(jié)合對(duì)低價(jià)報(bào)價(jià)、低價(jià)平臺(tái)的強(qiáng)化，讓用戶(hù)更便捷的預(yù)訂低價(jià)；最后強(qiáng)化記憶的環(huán)節(jié)，我們進(jìn)行了一些方案嘗試，再次強(qiáng)調(diào)比價(jià)的價(jià)值。另外，為了建立一致的比價(jià)認(rèn)知，整體的設(shè)計(jì)中也堅(jiān)持一致性的原則。百度酒店的比價(jià)設(shè)計(jì)也在不斷地嘗試和優(yōu)化中，希望能給用戶(hù)創(chuàng)造更好的使用體驗(yàn)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一、項(xiàng)目背景
百度文庫(kù)APP是一個(gè)在線(xiàn)文檔分享平臺(tái)，上線(xiàn)已有十余年的時(shí)間，是一款名副其實(shí)的老字號(hào)互聯(lián)網(wǎng)產(chǎn)品。隨著互聯(lián)網(wǎng)的成熟以及年輕用戶(hù)的涌入，時(shí)代語(yǔ)境和流行文化發(fā)生了變化。年輕化設(shè)計(jì)已經(jīng)成為互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中不可避免的話(huà)題。在日常對(duì)用戶(hù)反饋的監(jiān)測(cè)中，我們發(fā)現(xiàn)文庫(kù)APP當(dāng)時(shí)的體驗(yàn)已經(jīng)不能滿(mǎn)足用戶(hù)多樣化的需求。并且在體驗(yàn)走查以及用戶(hù)訪(fǎng)談中發(fā)現(xiàn)，文庫(kù)APP的視覺(jué)風(fēng)格、交互方式、使用感受都存在老舊、不貼合流行趨勢(shì)的問(wèn)題。
二、由內(nèi)而外，打造年輕化感知
通過(guò)對(duì)年輕市場(chǎng)進(jìn)行洞察，我們發(fā)現(xiàn)年輕用戶(hù)對(duì)產(chǎn)品的需求是多維度的。不僅對(duì)產(chǎn)品的“顏值”有高要求，他們更追求使用時(shí)的便捷和流暢度。他們對(duì)新鮮事物的接受程度更高，也更愿意去探索產(chǎn)品新的玩法，與產(chǎn)品進(jìn)行沉浸的情感互動(dòng)。
所以此次年輕化改版不能只是對(duì)“產(chǎn)品的外表”進(jìn)行升級(jí)，要從視覺(jué)、體驗(yàn)進(jìn)行全方位、多維度的年輕化升級(jí)。由內(nèi)而外的打造年輕化感知。
三、“老字號(hào)”互聯(lián)網(wǎng)產(chǎn)品的煥新之路
2.1 視覺(jué)升級(jí)-更好看
2.2 體驗(yàn)升級(jí)-更好用
寫(xiě)在最后
從UI設(shè)計(jì)誕生初期，設(shè)計(jì)師在屏幕上模擬現(xiàn)實(shí)世界的交互方式，用擬物化的設(shè)計(jì)風(fēng)格幫助用戶(hù)熟悉UI界面操作。到現(xiàn)在用戶(hù)對(duì)移動(dòng)屏幕越來(lái)越熟悉，設(shè)計(jì)師們可以在產(chǎn)品設(shè)計(jì)中去嘗試更多的可能性。產(chǎn)品與用戶(hù)共同成長(zhǎng)才是年輕化設(shè)計(jì)的意義。
未來(lái)，我們也會(huì)保持好奇心和探索欲，不斷打磨產(chǎn)品體驗(yàn)，與用戶(hù)共同成長(zhǎng)。
感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì)，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，違者必究，謝謝您的合作。申請(qǐng)轉(zhuǎn)載授權(quán)后臺(tái)回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX視覺(jué)/交互/運(yùn)營(yíng)設(shè)計(jì)師，可投簡(jiǎn)歷至MEUX@baidu.com (注明信息獲取來(lái)源如：站酷）
關(guān)于我們：
MEUX,百度移動(dòng)生態(tài)用戶(hù)體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶(hù)/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。MEUX以「簡(jiǎn)單極致」為設(shè)計(jì)理念，創(chuàng)造極致用戶(hù)體驗(yàn)的同時(shí)賦能商業(yè)，推動(dòng)設(shè)計(jì)行業(yè)的價(jià)值和影響力，讓生活因設(shè)計(jì)而更美好。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
本文將分享另一個(gè)更為深層全面的B端用戶(hù)研究方法——用戶(hù)訪(fǎng)談。通過(guò)面對(duì)面的溝通，以及觀(guān)察用戶(hù)的表情、行為去挖掘更深層的需求。
下面是本次分享的文章結(jié)構(gòu)，標(biāo)??的為重點(diǎn)部分。
用戶(hù)訪(fǎng)談通常可以采用線(xiàn)上會(huì)議、電話(huà)或者線(xiàn)下面對(duì)面交流兩種形式。
線(xiàn)上會(huì)議和電話(huà)訪(fǎng)談的優(yōu)勢(shì)顯而易見(jiàn)，可以不受地域限制展開(kāi)調(diào)研訪(fǎng)談，整體的成本也比較低，設(shè)計(jì)師可以自己找領(lǐng)導(dǎo)或者協(xié)調(diào)資源去推動(dòng)。
缺點(diǎn)也是比較明顯，溝通起來(lái)效率低下，比如我們一定有過(guò)“電話(huà)里說(shuō)不清，我們見(jiàn)面詳談”的經(jīng)歷。
所以，相較而言線(xiàn)下訪(fǎng)談無(wú)疑是最佳的調(diào)研形式。首先當(dāng)面溝通更加高效，其次對(duì)于搭載硬件設(shè)備的產(chǎn)品來(lái)說(shuō)，讓受訪(fǎng)者在真實(shí)場(chǎng)景里操作演示，可以發(fā)現(xiàn)更多隱性問(wèn)題。
在訪(fǎng)談過(guò)程中通常會(huì)接觸到以下3種類(lèi)型的受訪(fǎng)用戶(hù)，不同類(lèi)型的用戶(hù)我們應(yīng)該怎么接觸交流呢？
話(huà)癆型的受訪(fǎng)者占大多數(shù)，通常就是想法、意見(jiàn)比較多。他們不僅有一大堆不滿(mǎn)意的點(diǎn)要訴說(shuō)，甚至連對(duì)應(yīng)的解決方案都想好了。
整體接觸下來(lái)，我覺(jué)得該類(lèi)型的受訪(fǎng)者，可提供的有價(jià)值信息會(huì)更多一點(diǎn)。只不過(guò)我們要學(xué)會(huì)過(guò)濾信息。因?yàn)樗麄兊男揎椨迷~通常比較多，例如：“太難用”、“超級(jí)麻煩”、“哎 我真的是受不了啊”…
訪(fǎng)談話(huà)癆型的受訪(fǎng)者，我們需要注意無(wú)論怎么聊都要緊扣主題，防止變成了吐槽專(zhuān)場(chǎng)。
其次也要表達(dá)肯定，安撫情緒，并對(duì)問(wèn)題進(jìn)行進(jìn)一步提問(wèn)：“您的這些建議真的很棒，也給我們提供新的思路，我都記下來(lái)了，我還想確認(rèn)下，剛才您說(shuō)的3個(gè)關(guān)于結(jié)算環(huán)節(jié)的問(wèn)題，哪一個(gè)給您造成的困擾最大？”
顧名思義，受訪(fǎng)者可能是因?yàn)?span style="font-weight:700;">性格內(nèi)向或害怕說(shuō)錯(cuò)了不好意思等緣故，在受訪(fǎng)過(guò)程中問(wèn)一句答一句，比較容易冷場(chǎng)。答案的價(jià)值也比較低，例如：“對(duì)，是的”、“還行吧”、“沒(méi)啥感覺(jué)啊”、“反正就這樣用用吧”、“說(shuō)不上來(lái)”。
這種情況下要嘗試緩解下氛圍壓力，換個(gè)形式溝通：“就是隨便聊聊，公司派我們來(lái)呢，就是因?yàn)榉浅ｊP(guān)注用戶(hù)的使用感受，想收集一波用戶(hù)反饋與建議，您有啥不滿(mǎn)意的地方都可以跟我講講，越多越好。”
其次我們?cè)谔釂?wèn)的時(shí)候也要帶有引導(dǎo)性，例如：“還有呢、然后呢、具體說(shuō)說(shuō)呢”，如果對(duì)方實(shí)在說(shuō)不出所以然，最有效的辦法就是進(jìn)入上機(jī)操作環(huán)節(jié)，通常操作過(guò)程中那些問(wèn)題也會(huì)隨之暴露出來(lái)。
專(zhuān)業(yè)型的受訪(fǎng)者一般是老板或者店長(zhǎng)、經(jīng)理崗位的員工，他們對(duì)于產(chǎn)品或整個(gè)門(mén)店乃至行業(yè)都了解得比較透徹。
和這樣的受訪(fǎng)者溝通，不僅是局限于產(chǎn)品的一些問(wèn)題挖掘，他們會(huì)從這個(gè)行業(yè)的角度闡述一些個(gè)人的見(jiàn)解觀(guān)點(diǎn)，給我們提供一些有價(jià)值的優(yōu)化方案或者改進(jìn)方向。
例如餐飲的老板其實(shí)并不是很關(guān)心點(diǎn)餐、結(jié)算的流程有多么的順暢高效，畢竟他們不需要親自去做這些執(zhí)行，而且坦率的說(shuō)，對(duì)于絕大部分產(chǎn)品而言，好用并不能成為其核心競(jìng)爭(zhēng)力。
他們關(guān)心的是如何帶來(lái)更大的商業(yè)價(jià)值，類(lèi)似于如何提升坪效，如何提升門(mén)店會(huì)員的儲(chǔ)值能力等等。而這些老板的關(guān)注點(diǎn)，也會(huì)給我們未來(lái)的產(chǎn)品優(yōu)化方向打開(kāi)新的思路，去思考如何給我們的用戶(hù)創(chuàng)造更高的商業(yè)價(jià)值。
我們?cè)谧鲈L(fǎng)談之前，首先一定要熟悉產(chǎn)品業(yè)務(wù)的相關(guān)背景、受訪(fǎng)商戶(hù)的基本情況。
訪(fǎng)談過(guò)程中可能會(huì)提及一些專(zhuān)業(yè)名詞，例如餐前餐后模式、明檔、一魚(yú)多吃、坪效、估清等等。我們具備了這些基礎(chǔ)相關(guān)知識(shí)以后，省去了不必要的解釋環(huán)節(jié)，可以使訪(fǎng)談推進(jìn)地更順利。
其次建議要了解下行業(yè)相關(guān)的基礎(chǔ)知識(shí)。尤其是餐飲業(yè)態(tài)，華南、北方、四川等地都因?yàn)?span style="font-weight:700;">飲食習(xí)慣的不同，在產(chǎn)品的功能和使用上的需求也是相差很大。具備了這些知識(shí)點(diǎn)以后，在提問(wèn)過(guò)程中，也更利于提出一些深刻的問(wèn)題，而不是浮于表面的提問(wèn)。
行業(yè)相關(guān)的分析報(bào)告，可以去艾瑞、36氪、發(fā)現(xiàn)報(bào)告等網(wǎng)站進(jìn)行查詢(xún)收集，在此不做贅述。
在訪(fǎng)談初期，需要準(zhǔn)備一份訪(fǎng)談框架，但并不意味著我們整個(gè)過(guò)程只能按提綱來(lái)提問(wèn)。尤其是B端這種千載難逢的訪(fǎng)談機(jī)會(huì)，只按規(guī)定的框架提問(wèn)屬實(shí)是太吃虧了。所以在時(shí)間允許的情況下，除了框架以?xún)?nèi)的問(wèn)題，盡可能多發(fā)散地去提問(wèn)。
例如餐飲業(yè)態(tài)，會(huì)有各種不同載體的終端設(shè)備聯(lián)動(dòng)使用，一體機(jī)POS、手持的POS、廚房KDS、廚顯大屏、各類(lèi)打印機(jī)等等都可以順便了解、調(diào)研下，讓我們對(duì)于全鏈路的協(xié)作流程也會(huì)有更深刻的認(rèn)知。
再例如后廚會(huì)涉及到KDS大屏顯示，可以問(wèn)問(wèn)目前的大屏顯示是否夠清晰（字夠大），也可以和負(fù)責(zé)海鮮稱(chēng)重的工作人員聊聊，海鮮的售賣(mài)、計(jì)價(jià)流程，以及菜品雙單位（例如：1【條】魚(yú)，重量1【公斤】）的使用等等。
在溝通過(guò)程中，一定會(huì)有一些觸類(lèi)旁通的收獲與問(wèn)題被發(fā)現(xiàn)。這些問(wèn)題也許來(lái)自一個(gè)模塊、或者某個(gè)特定角色，又或者是主產(chǎn)品關(guān)聯(lián)的其他后臺(tái)產(chǎn)品。
在提問(wèn)的時(shí)候要考慮到受訪(fǎng)者的年紀(jì)和理解能力，如果措辭過(guò)于專(zhuān)業(yè)，可能會(huì)導(dǎo)致受訪(fǎng)者理解不到位，因此溝通的過(guò)程中要盡可能的說(shuō)大白話(huà)。
我們都知道沒(méi)有經(jīng)歷過(guò)的事，很難感同身受。有時(shí)候看到客戶(hù)群里，因?yàn)楫a(chǎn)品的各種原因?qū)е律虘?hù)情緒激動(dòng)，我們理智上非常理解，但是情感上很難共鳴。
因此每次的門(mén)店調(diào)研，我都會(huì)抓住機(jī)會(huì)觀(guān)察整個(gè)門(mén)店的運(yùn)營(yíng)情況，去感受那種忙碌的氛圍。
有時(shí)候開(kāi)始進(jìn)入營(yíng)業(yè)高峰期，機(jī)器出現(xiàn)卡頓或者外賣(mài)不接單等情況時(shí)，自己的情緒都會(huì)一下子緊張起來(lái)，也能夠深刻感受到產(chǎn)品給客戶(hù)帶來(lái)的困擾。
當(dāng)再次有產(chǎn)品迭代優(yōu)化時(shí)，這些體驗(yàn)總能讓自己能更容易代入用戶(hù)的角度思考問(wèn)題。
除了去體會(huì)產(chǎn)品對(duì)情緒的直接影響，還可以關(guān)注下整個(gè)門(mén)店的布局、收銀產(chǎn)品的數(shù)量與擺放位置、不同產(chǎn)品的協(xié)同使用等等。
這些都會(huì)幫助我們發(fā)現(xiàn)，到底什么是門(mén)店運(yùn)營(yíng)環(huán)節(jié)里最重要的模塊。
在訪(fǎng)談過(guò)程中，不排除受訪(fǎng)客戶(hù)會(huì)反饋一些暫時(shí)無(wú)法解決的問(wèn)題。這時(shí)候一定要告訴受訪(fǎng)商戶(hù)：“您的問(wèn)題我已經(jīng)記錄下來(lái)，回去會(huì)針對(duì)這個(gè)問(wèn)題反饋上報(bào)，最遲X天我會(huì)讓顧問(wèn)給您回復(fù)的”。
這么做一方面也是細(xì)節(jié)處維護(hù)公司品牌的整體售后體驗(yàn)，其次也有助于我們?cè)俅位卦L(fǎng)時(shí)，受訪(fǎng)商戶(hù)樂(lè)意花時(shí)間跟我們聊。
了解了用戶(hù)訪(fǎng)談的一些基本信息和注意點(diǎn)以后，到了本文核心部分，關(guān)于整個(gè)訪(fǎng)談的推進(jìn)過(guò)程，一共分為3個(gè)階段。
1）訪(fǎng)談的3種類(lèi)型
首先明確訪(fǎng)談的類(lèi)型，用戶(hù)訪(fǎng)談的類(lèi)型主要分為以下三種，最常見(jiàn)的就是第三種類(lèi)產(chǎn)品使用回訪(fǎng)。
①新品場(chǎng)景調(diào)研新品調(diào)研的訪(fǎng)談，一般是由于業(yè)務(wù)的發(fā)展，可能需要升級(jí)或者打磨一款新產(chǎn)品來(lái)滿(mǎn)足市場(chǎng)的需求。
在訪(fǎng)談的過(guò)程中，我們需要關(guān)注的點(diǎn)就是用戶(hù)畫(huà)像、商戶(hù)訴求、使用場(chǎng)景、終端載體等一系列因素。
②潛在商戶(hù)拜訪(fǎng)當(dāng)去往一個(gè)城市進(jìn)行批量客戶(hù)調(diào)研的時(shí)候，偶爾會(huì)有拜訪(fǎng)潛在客戶(hù)的調(diào)研機(jī)會(huì)。這種類(lèi)型訪(fǎng)問(wèn)的關(guān)注點(diǎn)集中在商戶(hù)的痛點(diǎn)與需求上。
由于是潛在客戶(hù)，我們勢(shì)必是要了解他們想要購(gòu)買(mǎi)或者替換產(chǎn)品的前因后果。也是借此機(jī)會(huì)了解到競(jìng)對(duì)的優(yōu)劣勢(shì)，他們放棄競(jìng)對(duì)的原因，以及我們當(dāng)前產(chǎn)品的功能是否滿(mǎn)足客戶(hù)的需求，還有哪些點(diǎn)不滿(mǎn)足，客戶(hù)重點(diǎn)關(guān)注的是什么。
③產(chǎn)品使用回訪(fǎng)
使用回訪(fǎng)是最常見(jiàn)的訪(fǎng)問(wèn)類(lèi)型，主要目的是對(duì)商戶(hù)進(jìn)行售后維護(hù)、提升使用體驗(yàn)。
且由于B端產(chǎn)品的復(fù)雜性和遠(yuǎn)距離特點(diǎn)，以及新功能同步給商戶(hù)存在的滯后性，公司會(huì)安排定期的上門(mén)回訪(fǎng)。如果有這樣的機(jī)會(huì)，UED一定要盡量申請(qǐng)跟著去門(mén)店調(diào)研。2）問(wèn)題設(shè)計(jì)3步走
到了最關(guān)鍵的一步，就是關(guān)于訪(fǎng)談的問(wèn)題設(shè)計(jì)。
總結(jié)一下，問(wèn)題的設(shè)計(jì)渠道來(lái)源主要有3種。主要還是根據(jù)調(diào)研目標(biāo)進(jìn)行問(wèn)題設(shè)計(jì)，另外兩種方式，作為輔助。
那具體問(wèn)題應(yīng)該怎么設(shè)計(jì)，這邊我們分為3個(gè)步驟，從面到點(diǎn)依次拆解進(jìn)行問(wèn)題設(shè)計(jì)。
第一步：了解產(chǎn)品全場(chǎng)景能力
B端產(chǎn)品的特點(diǎn)可以借用《U一點(diǎn)料》的9個(gè)字概括，“多場(chǎng)景、全鏈路、多角色”，所以設(shè)計(jì)問(wèn)題前，我們可以從場(chǎng)景+鏈路+角色/節(jié)點(diǎn)功能的維度來(lái)設(shè)計(jì)問(wèn)題。
以餐飲行業(yè)的產(chǎn)品舉例，首先建議了解自家產(chǎn)品的全場(chǎng)景業(yè)務(wù)能力。
即從商家端到消費(fèi)端會(huì)經(jīng)歷的產(chǎn)品模塊和具備的現(xiàn)有功能，做到心中有數(shù)即可，畢竟不會(huì)一下子調(diào)研這么多模塊和功能。
第二步：確定要調(diào)研的流程主線(xiàn)
其他ToB產(chǎn)品同理，可根據(jù)某個(gè)操作鏈路為主線(xiàn)，確定主流程后進(jìn)行問(wèn)題設(shè)計(jì)。其實(shí)就可以理解為確定調(diào)研的目標(biāo)。例如下圖要調(diào)研的主流程，就是提取點(diǎn)餐>下單>結(jié)算為主線(xiàn)。
第三步：關(guān)鍵節(jié)點(diǎn)問(wèn)題展開(kāi)設(shè)計(jì)
根據(jù)剛才確定的主流程，我們找到所有關(guān)鍵節(jié)點(diǎn)進(jìn)行問(wèn)題框架設(shè)計(jì)。
以上3個(gè)步驟可以理解為，如何在功能極其復(fù)雜的B類(lèi)產(chǎn)品當(dāng)中，篩選出與訪(fǎng)談目標(biāo)緊密相連的功能鏈路。避免我們的訪(fǎng)談提綱做的過(guò)于冗余沒(méi)有核心。
3）2種提前準(zhǔn)備工作
①提前告知
這點(diǎn)也非常重要，每一次去門(mén)店調(diào)研之前，先由當(dāng)?shù)刎?fù)責(zé)的顧問(wèn)與受訪(fǎng)商戶(hù)提前溝通。
一方面是需要與對(duì)方預(yù)約時(shí)間，另外一方面這種訪(fǎng)談對(duì)商戶(hù)而言就相當(dāng)于優(yōu)質(zhì)的售后服務(wù)，會(huì)有受訪(fǎng)商戶(hù)提前列框架，準(zhǔn)備問(wèn)題。
那么這種情況更有利于調(diào)研，因?yàn)槭茉L(fǎng)者明確自己的問(wèn)題點(diǎn)在哪里，就等著調(diào)研團(tuán)隊(duì)（售后團(tuán)隊(duì)）來(lái)門(mén)店后，好好拉扯一番。
②準(zhǔn)備材料與設(shè)備
萬(wàn)事具備，只欠東風(fēng)。我們?cè)?span style="font-weight:700;">盤(pán)點(diǎn)確認(rèn)下本次訪(fǎng)談的各類(lèi)工具是否備齊，準(zhǔn)備進(jìn)入訪(fǎng)談階段，大致需要準(zhǔn)備的東西是以下4種材料工具。
在了解了受訪(fǎng)者類(lèi)型、采訪(fǎng)者需要注意的點(diǎn)，以及帶著我們?cè)O(shè)計(jì)好的問(wèn)題，下面正式進(jìn)入訪(fǎng)談階段。
1）開(kāi)場(chǎng)白
到達(dá)門(mén)店后，我們的顧問(wèn)會(huì)給受訪(fǎng)客戶(hù)做一下來(lái)訪(fǎng)成員介紹，并講明此次到店的目的。一般都是產(chǎn)品使用回訪(fǎng)，或者新功能推薦培訓(xùn)。
通常來(lái)說(shuō)，受訪(fǎng)商戶(hù)對(duì)來(lái)訪(fǎng)團(tuán)隊(duì)總是有很多”心里話(huà)“想嘮一嘮，因此暖場(chǎng)氛圍比較容易起來(lái)，也有助于我們接下來(lái)的溝通。
2）訪(fǎng)談中
進(jìn)入正題以后，我們會(huì)先大致了解下受訪(fǎng)者最近使用的體驗(yàn)以及遇到的問(wèn)題，而后會(huì)根據(jù)問(wèn)題框架進(jìn)行提問(wèn)。在整個(gè)過(guò)程中也需要注意觀(guān)察用戶(hù)在描述問(wèn)題時(shí)候的表情和肢體語(yǔ)言，搜集用戶(hù)對(duì)于產(chǎn)品的真實(shí)態(tài)度。
其實(shí)整個(gè)訪(fǎng)談流程我們歸納一下，需要關(guān)注的就是四個(gè)關(guān)鍵點(diǎn)，手+口+心+顏。
①手-實(shí)操演示
關(guān)于實(shí)操演示放在第一個(gè)講，是因?yàn)檫@個(gè)環(huán)節(jié)非常重要。線(xiàn)下訪(fǎng)談時(shí)強(qiáng)烈不建議“脫機(jī)訪(fǎng)問(wèn)”，這種形式對(duì)受訪(fǎng)者而言需要花更多的時(shí)間去思考問(wèn)題的答案。
會(huì)遺忘甚至想不起來(lái)當(dāng)時(shí)的具體情況，隨便的敷衍回答“嗯，還行”、“挺好的”，或者干脆彼此都不在一個(gè)頻道上。
其次，在操作過(guò)程中，建議用手機(jī)進(jìn)行拍攝記錄。因?yàn)槊總€(gè)人對(duì)產(chǎn)品的理解方式與程度不同，在用戶(hù)操作的過(guò)程中，會(huì)發(fā)現(xiàn)一些有意思的代償方案。這些也是思考的切入點(diǎn)。代償方案是否比原先設(shè)定的實(shí)現(xiàn)方法更便捷。
回去通過(guò)視頻仔細(xì)分析受訪(fǎng)者的操作路徑，以及每個(gè)操作之前是否有遲疑等等。并且將問(wèn)題點(diǎn)一一記錄下來(lái)。
②口-問(wèn)具體操作
這個(gè)就是根據(jù)問(wèn)題框架進(jìn)行提問(wèn)。在這個(gè)過(guò)程中，通常會(huì)穿插著上機(jī)操作演示，在現(xiàn)場(chǎng)記錄的時(shí)候可以先記錄個(gè)大概，等結(jié)束后再仔細(xì)整理。
③心-問(wèn)心里感受
問(wèn)受訪(fǎng)者的心理感受，其實(shí)就比較偏主觀(guān)了，我們可以從“我們家的產(chǎn)品”和“人家的產(chǎn)品”兩個(gè)維度去對(duì)比詢(xún)問(wèn)心里感受。值得注意的是，即使是這樣開(kāi)放式的提問(wèn)，也有提問(wèn)技巧。
比如“你覺(jué)得現(xiàn)在還有什么不好用的地方”就比“你感覺(jué)現(xiàn)在的產(chǎn)品好用么”這樣的提問(wèn)方式更有效。
因?yàn)楫a(chǎn)品一定是有可有優(yōu)化的空間，“有什么不好用的地方”這樣提問(wèn)的方式就是具體到了某個(gè)點(diǎn)上面，具體什么點(diǎn)不好用。
而后者的提問(wèn)方式是基于整個(gè)產(chǎn)品，受訪(fǎng)者可能會(huì)出于不好意思等原因直接說(shuō)“你們的東西還行吧，還可以”。
④顏-關(guān)注動(dòng)作表情
當(dāng)我們提問(wèn)產(chǎn)品優(yōu)缺點(diǎn)的時(shí)候，受訪(fǎng)者大部分都會(huì)帶上表情和肢體語(yǔ)言，并且情緒表現(xiàn)和性格有比較大的關(guān)系。
性格比較雷厲風(fēng)行、急躁一點(diǎn)的，通常會(huì)像連珠炮一樣瘋狂輸出，并且措辭會(huì)比較極端。例如：“真的太難用了”、“太麻煩了”、“嚴(yán)重影響門(mén)店?duì)I業(yè)了啊”。
接受到這種信息我們首先要做的就是安撫對(duì)方的情緒，其次對(duì)于這些信息要學(xué)會(huì)剔除一些夸張描述。
而性格溫和一點(diǎn)的受訪(fǎng)者，在闡述問(wèn)題的時(shí)候也會(huì)比較婉轉(zhuǎn)?！安皇翘奖恪?、“這個(gè)改動(dòng)沒(méi)啥感覺(jué)”、“也還行、都可以”，如果某個(gè)高頻操作真的很影響日常工作效率，往往會(huì)表現(xiàn)得很無(wú)奈，甚至還有點(diǎn)委屈。
那么無(wú)論是哪種表現(xiàn)，其實(shí)都要考驗(yàn)采訪(fǎng)者的經(jīng)驗(yàn)，結(jié)合產(chǎn)品的功能去考慮，找到反饋中真實(shí)有效的部分。
通過(guò)以上4個(gè)環(huán)節(jié)，其實(shí)就可以收集到很多有用的信息，語(yǔ)言信息、視頻信息、動(dòng)作表情信息等等。接下來(lái)的任務(wù)就是信息的梳理歸納。
3）結(jié)束語(yǔ)
訪(fǎng)談結(jié)束后，我們需要做個(gè)簡(jiǎn)單的總結(jié)回顧。將關(guān)鍵問(wèn)題再次復(fù)述確認(rèn)，進(jìn)行查漏補(bǔ)缺并且再次感謝受訪(fǎng)者，表達(dá)他們今天提的建議價(jià)值很大，后續(xù)會(huì)梳理出可落地的點(diǎn)優(yōu)化到產(chǎn)品當(dāng)中。
如果說(shuō)聊得比較開(kāi)心，大多數(shù)的受訪(fǎng)商戶(hù)都會(huì)邀請(qǐng)來(lái)訪(fǎng)團(tuán)隊(duì)吃個(gè)飯?jiān)僮?，也算是額外的福利。在就餐過(guò)程中的非正式場(chǎng)合交流，也可以聊聊門(mén)店的一些運(yùn)營(yíng)情況等等，幫助我們更深入的了解這個(gè)行業(yè)。
1）資料梳理
我們?cè)谠L(fǎng)談過(guò)程中會(huì)有大量未整理的一手記錄，結(jié)束后需盡快地梳理，盡可能詳細(xì)地記錄下用戶(hù)描述的細(xì)節(jié)、肢體動(dòng)作表情語(yǔ)言等等。建議使用石墨、語(yǔ)雀、騰訊文檔等在線(xiàn)編輯工具，方便分享修改。
如果是連續(xù)訪(fǎng)談幾位商戶(hù)，我會(huì)在訪(fǎng)談結(jié)束以后，迅速地將剛才的訪(fǎng)談內(nèi)容整理出一份原始資料。并羅列出一些受訪(fǎng)者反饋但訪(fǎng)談提綱里沒(méi)有的問(wèn)題，去下一家受訪(fǎng)商戶(hù)的時(shí)候可以驗(yàn)證下該問(wèn)題的普遍性。
2）整理落地
輸出后我們需要再次進(jìn)行提煉，將有價(jià)值可落地的問(wèn)題點(diǎn)提取出來(lái)，進(jìn)行匯報(bào)分享，并找到相對(duì)應(yīng)的產(chǎn)品研發(fā)進(jìn)行探討排期，這樣就形成了一個(gè)完整的閉環(huán)，真正做到了發(fā)現(xiàn)問(wèn)題、解決問(wèn)題。
3）流程概括
前文絮絮叨叨說(shuō)了很多，其實(shí)關(guān)于用戶(hù)訪(fǎng)談這事用6個(gè)字就可以概括，簡(jiǎn)單理解：
問(wèn)誰(shuí)？問(wèn)啥？答啥？改啥？
能夠回答清楚這4個(gè)問(wèn)題，那么這就是一次有價(jià)值的訪(fǎng)談經(jīng)歷。
ToB業(yè)務(wù)的特點(diǎn)就是會(huì)有一定的行業(yè)壁壘，設(shè)計(jì)師在剛接觸的時(shí)候一定會(huì)有很多茫然時(shí)刻。對(duì)于各種專(zhuān)業(yè)詞匯的一臉懵，對(duì)于行業(yè)的不了解。
或者很多人對(duì)于B端的認(rèn)知還停留在，B端好像沒(méi)啥好設(shè)計(jì)的，都是現(xiàn)成的組件庫(kù)拖一拖，成就感比C端差遠(yuǎn)了。
那么做訪(fǎng)談、體驗(yàn)優(yōu)化的意義是什么呢？
作者：B端設(shè)計(jì)情報(bào)局
來(lái)源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
本文介紹了一個(gè)案例研究，是作者在一家擁有 60 多年歷史的產(chǎn)品導(dǎo)向型公司中實(shí)施服務(wù)設(shè)計(jì)的旅程，本文將著重介紹如何在大型國(guó)際數(shù)字支付技術(shù)組織 IDPTO（化名）中建立服務(wù)設(shè)計(jì)創(chuàng)新中心。這份經(jīng)驗(yàn)希望傳遞到每一個(gè)正在用服務(wù)設(shè)計(jì)影響公司內(nèi)外部的朋友們。
在擁有 25 年的設(shè)計(jì)實(shí)踐經(jīng)驗(yàn)后，我收到了一份具有挑戰(zhàn)性的邀請(qǐng)，成為一家全球性公司的執(zhí)行董事，并通過(guò)設(shè)計(jì)領(lǐng)導(dǎo)其轉(zhuǎn)型。選擇巴西是因?yàn)樗?fù)責(zé)拉丁美洲 75% 的支付交易。該公司已經(jīng)針對(duì)該市場(chǎng)實(shí)施了加速增長(zhǎng)計(jì)劃，因?yàn)樗麄冋J(rèn)為這是正確的創(chuàng)新計(jì)劃的測(cè)試市場(chǎng)。在六個(gè)月的時(shí)間里，我從自己的服務(wù)設(shè)計(jì)咨詢(xún)公司轉(zhuǎn)行到 IDTPO。
在那段時(shí)間里，我有機(jī)會(huì)參觀(guān)了該公司位于美國(guó)的公司總部。這種面對(duì)面的互動(dòng)對(duì)我來(lái)說(shuō)至關(guān)重要：
2016 年 3 月，在圣保羅，我開(kāi)始了為期三個(gè)月的組織問(wèn)題診斷，以及另外三個(gè)月的定義問(wèn)題階段。然后，我正式開(kāi)始確定公司的痛點(diǎn)、局限性和全球領(lǐng)導(dǎo)層的戰(zhàn)略目標(biāo)。我參與了公司接下來(lái)一年、三年和五年周期的整個(gè)戰(zhàn)略定義。
自過(guò)渡過(guò)程開(kāi)始以來(lái)，我一直致力于競(jìng)爭(zhēng)對(duì)手研究并繪制生態(tài)系統(tǒng)地圖。我還收集了有關(guān)公司直接面向消費(fèi)者市場(chǎng)和幾項(xiàng)趨勢(shì)研究的可靠材料。在第二個(gè)月，我向領(lǐng)導(dǎo)層提交了一份戰(zhàn)略計(jì)劃，其中包括我們將如何工作的大綱，該計(jì)劃基于三個(gè)層面的行動(dòng)：戰(zhàn)略、戰(zhàn)術(shù)和行動(dòng)。
組織診斷的結(jié)論是，該公司已經(jīng)在對(duì)設(shè)計(jì)原則的基本理解和應(yīng)用的基礎(chǔ)上致力于以技術(shù)為中心的創(chuàng)新。
根據(jù)設(shè)計(jì)階梯 1，我確定該公司處于“界面設(shè)計(jì)”階段。如下所示，除了更改其圖形表示之外，我還修改了該工具并添加了另一個(gè)“設(shè)計(jì)作為文化”步驟。這是對(duì)上述模式的重要升級(jí)，更符合當(dāng)前的創(chuàng)新戰(zhàn)略。
這一步（第4階梯）很重要，因?yàn)檫@是在組織中實(shí)施設(shè)計(jì)策略時(shí)的最終部分，即通過(guò)設(shè)計(jì)優(yōu)化組織使其成為組織文化的步驟。
在我看來(lái)，“設(shè)計(jì)作為文化”分為三個(gè)層次：
我提出的戰(zhàn)略計(jì)劃包括兩個(gè)三年一次的周期性循環(huán)策略和相關(guān)的年度目標(biāo)。第一個(gè)周期側(cè)重于通過(guò)開(kāi)發(fā)獨(dú)特的創(chuàng)新流程來(lái)整合組織內(nèi)的設(shè)計(jì)。
第二個(gè)周期側(cè)重于發(fā)展組織的能力，以從“設(shè)計(jì)作為過(guò)程”過(guò)渡到“設(shè)計(jì)作為戰(zhàn)略”。在最初執(zhí)行的六年后，我們將能夠衡量組織中以設(shè)計(jì)為主導(dǎo)的變革的進(jìn)展和收益。
評(píng)估指標(biāo)后，我們將能夠繼續(xù)下一步（即“設(shè)計(jì)作為文化”）。
第一個(gè)周期從為組織的創(chuàng)新中心定義五項(xiàng)創(chuàng)新原則開(kāi)始。這些原則已經(jīng)與組織的領(lǐng)導(dǎo)團(tuán)隊(duì)共同制定。
這不僅改變了交付方法，還引發(fā)了大膽的組織轉(zhuǎn)型，因?yàn)樗淖兞私M織過(guò)去工作的范式。
甚至在創(chuàng)新中心正式啟動(dòng)之前，我們就嘗試了兩種開(kāi)發(fā)形式來(lái)解決問(wèn)題。第一個(gè)是用經(jīng)典五天設(shè)計(jì)沖刺模型幫助一家重要地區(qū)性銀行。第二個(gè)是為電子商務(wù)平臺(tái)開(kāi)發(fā)聊天機(jī)器人。最后一個(gè)解決方案經(jīng)歷了一個(gè)更長(zhǎng)的七周時(shí)間，使我們能夠測(cè)試初創(chuàng)公司的融入，以幫助我們采用開(kāi)放式創(chuàng)新方法。
在這個(gè)周期的第一年，三點(diǎn)很重要：
這就是為什么我選擇服務(wù)設(shè)計(jì)作為創(chuàng)新過(guò)程的基礎(chǔ)，同時(shí)參考了 Richard Buchanan 教授的工作。如圖 3所示，過(guò)去 20 年是從基于人工制品的物質(zhì)性的實(shí)踐到為解決復(fù)雜問(wèn)題而開(kāi)發(fā)的“非物質(zhì)解決方案”的設(shè)計(jì)思維轉(zhuǎn)變的時(shí)刻。
我們的經(jīng)濟(jì)現(xiàn)在建立在象征價(jià)值的交換之上。經(jīng)驗(yàn)決定了每個(gè)人在這種交換中投入的價(jià)值。在過(guò)去的二十年里，我們看到了一系列新公司的出現(xiàn)，例如 Uber 或 Airbnb，它們誕生于數(shù)字環(huán)境中，專(zhuān)注于我們所說(shuō)的體驗(yàn)經(jīng)濟(jì) 。
因此，服務(wù)設(shè)計(jì)和交互設(shè)計(jì)等主題近年來(lái)受到關(guān)注，因?yàn)樗鼈兪沁@種新經(jīng)濟(jì)發(fā)展的基礎(chǔ)。僅六個(gè)月后，我們就協(xié)助五家金融科技公司將 IDPTO 技術(shù)應(yīng)用于他們的流程。之后，其中三家金融科技公司能夠開(kāi)發(fā)出現(xiàn)成的市場(chǎng)解決方案。在第 1 年末，我們向整個(gè)組織展示了流程（圖 4）。
該活動(dòng)在公司的美國(guó)總部舉行并引起了很多關(guān)注，因?yàn)樵谝荒陜?nèi)我們有項(xiàng)目要展示、成功指標(biāo)和接下來(lái)兩年的路線(xiàn)圖。
創(chuàng)新過(guò)程不一定是線(xiàn)性的。該過(guò)程以簡(jiǎn)報(bào)會(huì)（與不同利益相關(guān)者的協(xié)作研討會(huì)）開(kāi)始，以最終確定和實(shí)施的解決方案結(jié)束。
到第 3 年末，我們超越了指標(biāo)，贏(yíng)得了獎(jiǎng)項(xiàng)，并開(kāi)始為公司的第二個(gè)創(chuàng)新周期做好準(zhǔn)備——在戰(zhàn)略層面采用設(shè)計(jì)。創(chuàng)新中心戰(zhàn)略的一部分是將其工作方法擴(kuò)展到整個(gè)拉丁美洲地區(qū)。2018年，我們對(duì)區(qū)域團(tuán)隊(duì)進(jìn)行了培訓(xùn)，并準(zhǔn)備了文件，包括經(jīng)驗(yàn)、教材、方法和工具。其他一些地區(qū)也采用了部分方式，例如美國(guó)和亞洲的加速計(jì)劃以及歐洲和亞洲的服務(wù)設(shè)計(jì)。盡管如此，還是存在挑戰(zhàn)：創(chuàng)新中心位于組織的產(chǎn)品領(lǐng)域內(nèi)。
在第一個(gè)周期的最后一年，由于全球項(xiàng)目和獎(jiǎng)項(xiàng)，我在內(nèi)部和外部獲得了很多知名度之后，我與全球首席產(chǎn)品官討論了：
次年，他決定將該領(lǐng)域的名稱(chēng)從“產(chǎn)品”改為“解決方案”。
在業(yè)務(wù)加速數(shù)字化的背景下，成功的戰(zhàn)略規(guī)劃為城市交通、公共交通、即時(shí)支付、新支付技術(shù)和新信息交易技術(shù)等領(lǐng)域的項(xiàng)目設(shè)定了總體目標(biāo)。
我們有幾個(gè)項(xiàng)目要管理，我們需要使用對(duì)公司文化產(chǎn)生重大影響的項(xiàng)目管理方法。實(shí)施了新的高管培訓(xùn)課程。加大投資力度，竣工項(xiàng)目穩(wěn)步增長(zhǎng)。
設(shè)計(jì)現(xiàn)在是公司戰(zhàn)略的一部分。設(shè)計(jì)已成為開(kāi)發(fā)新服務(wù)和新技術(shù)的戰(zhàn)略決策的主要因素。
以下是我領(lǐng)導(dǎo)下的兩個(gè)創(chuàng)新周期后的一些數(shù)字：
這篇文章無(wú)疑是給了我們?cè)谧约旱慕M織中運(yùn)用服務(wù)設(shè)計(jì)的一針強(qiáng)心劑，讓我們有更多的自信去運(yùn)用服務(wù)設(shè)計(jì)和影響組織，我們要相信服務(wù)設(shè)計(jì)方法論帶來(lái)的作用，相信其本身有強(qiáng)大的能力。
記得之前做項(xiàng)目的時(shí)候，小伙伴有說(shuō)過(guò)一句：之所以可以反復(fù)成功，其實(shí)是方法論本身的能力，而我們更多的是在運(yùn)用罷了。希望大家以此共勉。
作者：陳昱志Yeutz
來(lái)源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn