在產(chǎn)品設(shè)計中，當(dāng)有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點(diǎn)、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。
而人類是視覺生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動態(tài)內(nèi)容吸引。
今天來聊一下頁面中常見的動態(tài)引導(dǎo)。
當(dāng)你看到這個頁面時
我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）
而當(dāng)頁面元素都賦予細(xì)節(jié)時
假如我想讓你關(guān)注到其中某個較小元素
其實(shí)只需要為它添加動態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計中的動態(tài)引導(dǎo)。
▍新功能提示 ?
當(dāng)產(chǎn)品上線新功能時，設(shè)計師們都會根據(jù)功能重要程度，來決定使用什么形式讓入口元素和其他元素區(qū)分開來。常見的有小紅點(diǎn)、標(biāo)簽、氣泡這類靜態(tài)點(diǎn)綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點(diǎn)擊后就會消失）。當(dāng)然，也有將上述點(diǎn)綴元素動態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動畫，這在很多電商產(chǎn)品的品類區(qū)經(jīng)?？梢钥吹健?
動態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對元素的注意力（與動態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動畫，因此可以持續(xù)吸引用戶注意力。
ps：據(jù)說，每當(dāng)頁面多出一個會動的元素，后臺就會多出這樣一些留言，捅了開發(fā)窩了[Doge]。
▍誘導(dǎo)用戶操作 ?
動態(tài)引導(dǎo)還常常被設(shè)計師用來強(qiáng)調(diào)重要內(nèi)容（有可能被產(chǎn)品、運(yùn)營拿刀架脖子），來達(dá)成某些數(shù)據(jù)指標(biāo)，通過利用動態(tài)誘導(dǎo)用戶操作。
例如：在會員卡片中添加光效、在廣告中讓按鈕進(jìn)行縮放、為簽到入口圖標(biāo)設(shè)置動畫。
這些都能充分引起用戶注意，甚至提升功能點(diǎn)擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設(shè)計師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。
對于這些不可見的功能，在初次使用時需要進(jìn)行引導(dǎo)，才能被用戶感知與使用。
▍操作教學(xué)指引 ?
講到引導(dǎo)，還必須要提的是手勢引導(dǎo)，通過動態(tài)直觀展示不同手勢的作用，提示用戶如何與產(chǎn)品進(jìn)行交互。
這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當(dāng)你第一打開視頻時， App 會提醒你雙擊屏幕可以點(diǎn)贊，上下滑動可以切換視頻。
在產(chǎn)品交互設(shè)計中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動態(tài)敘述的直觀性，使得我們可以減少對復(fù)雜信息進(jìn)行大量文字描述。通過動態(tài)設(shè)計，我們可以創(chuàng)建視覺故事，這有助于將復(fù)雜信息以更簡單、清晰的方式進(jìn)行傳遞，從而幫助用戶快速完成任務(wù)。
也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開始應(yīng)用。
但是需要注意的是，上述這些大多都只在第一次使用時才會觸發(fā)。
當(dāng)然有特例，例如：
在 App Store 每次下載應(yīng)用進(jìn)行驗(yàn)證時（面容解鎖的情況下），系統(tǒng)會通過動態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進(jìn)行人臉識別。
在掃碼時，弱光場景下出現(xiàn)的手電筒，通過動態(tài)引起用戶注意，指引用戶使用。
以及作為動態(tài)演示，幫助用戶理解如何使用手掌滑動截屏
如何進(jìn)行NFC感應(yīng)等等..
動態(tài)引導(dǎo)像是設(shè)計師用來控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗(yàn)，有的人用它提升商業(yè)轉(zhuǎn)化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
感謝大家看到這里，我是幺零三，咱們下期見...
作者：幺零三 來源：站酷
藍(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.bouu.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端平臺中經(jīng)常遇到對統(tǒng)計的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們設(shè)計師在設(shè)計圖表的過程中，如果沒有系統(tǒng)的可視化知識，會出現(xiàn)設(shè)計的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計和選用圖表，如何在好看的同時提升信息傳達(dá)效率，看完這篇文章希望對你的設(shè)計過程有所幫助。
// 為什么要數(shù)據(jù)可視化
數(shù)據(jù)可視化就是用圖表來表示數(shù)據(jù)信息，它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律
關(guān)于如何設(shè)計好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個步驟：選擇適合的圖表，強(qiáng)化視覺層次，圖表響應(yīng)式適配。
一、選擇適合的圖表
數(shù)據(jù)可視化的圖表種類繁多，當(dāng)我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達(dá)的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過分析數(shù)據(jù)關(guān)系來選擇表達(dá)方式；第二層意圖是圖表傳達(dá)內(nèi)容，這時候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。
1. 分析數(shù)據(jù)關(guān)系
根據(jù)數(shù)據(jù)分析的方式來看，每一種圖表都對應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見的還有流轉(zhuǎn)關(guān)系。
構(gòu)成關(guān)系
構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來為總數(shù)。如果只是想對比個別組成部分的大小，也可以使用比較關(guān)系的圖表。
常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級結(jié)構(gòu)，還會用矩形樹圖或旭日圖等特殊結(jié)構(gòu)圖表。
關(guān)鍵詞：“占比、比例、百分比”
比較關(guān)系
比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過對兩個或兩個以上的指標(biāo)分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內(nèi)數(shù)據(jù)的變化，分類對比用于比較數(shù)據(jù)規(guī)模。
常用圖表：趨勢對比常用圖表有折線圖、散點(diǎn)圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關(guān)鍵詞：“增減、升降、漲跌、波動”
分布關(guān)系
利用空間分區(qū)來展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個或以上數(shù)據(jù)的相關(guān)性。
常用圖表：散點(diǎn)圖、熱力圖、雷達(dá)圖等
關(guān)鍵詞：“隨著……而變化、A/B之間的相關(guān)性、交/并集”等
關(guān)聯(lián)與流轉(zhuǎn)
流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系，它可以動態(tài)的體現(xiàn)相關(guān)路徑下對象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個狀態(tài)或?qū)ο笾g的流動量或流動強(qiáng)度。
常用圖表：關(guān)系圖、?；鶊D、漏斗圖、進(jìn)度圖等
關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”
2. 分析數(shù)據(jù)特征
按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見數(shù)據(jù)特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標(biāo)通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會統(tǒng)計一組數(shù)據(jù)的變化趨勢，離散數(shù)據(jù)通常統(tǒng)計各分類下數(shù)量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個維度變量。如果希望對比多組數(shù)據(jù)，可使用不同顏色進(jìn)行分類
層級特征
多層級數(shù)據(jù)由多個部分構(gòu)成一個整體，又稱樹形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結(jié)構(gòu)。長方形的大小取決于各國家的平均銷售額，通過色調(diào)來區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對比一般結(jié)構(gòu)樹圖表，它的優(yōu)勢在于可以有效利用空間。
流程特征
流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類型，不僅包含統(tǒng)計意義上的數(shù)據(jù)總和，同時還表達(dá)了信息流轉(zhuǎn)的路徑；其中?；鶊D和漏斗圖都可以表達(dá)路徑中流量的變化，不同的是?；鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達(dá)目的選用。
二、強(qiáng)化視覺層次
選擇合適的圖表后，在信息傳達(dá)上也需要正確的表達(dá)，展示形式美觀的同時能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。
1. 強(qiáng)化數(shù)據(jù)特性
使用圖表正確的表達(dá)信息，需要設(shè)計師在強(qiáng)化數(shù)據(jù)特性的同時避免偏差
2. 色彩視覺傳達(dá)
除了在設(shè)計構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會影響我們對數(shù)據(jù)的感知，錯誤的取色會讓信息讀取產(chǎn)生誤解。我們可以通過不同的分析目的設(shè)置意圖色板，精確傳達(dá)信息同時后續(xù)的項(xiàng)目在選用時也可以達(dá)到用色的統(tǒng)一。
我們在之前的文章里有介紹過圖表的取色模型，通過調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調(diào)來進(jìn)行分類
數(shù)據(jù)內(nèi)在沒有順序差別時，建議使用色調(diào)值（H）進(jìn)行區(qū)分；如定義國家、行業(yè)等類型。如果希望圖表看起來更加專業(yè)，以下有幾項(xiàng)分類色板的小建議：
定量型：使用深淺色板強(qiáng)調(diào)內(nèi)在順序
如果在同一個分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來突出他們內(nèi)在的順序，使圖表更加易讀。
三、圖表中的響應(yīng)式設(shè)計
B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁或移動端上動態(tài)顯示。不同于平面展示或匯報，在基礎(chǔ)設(shè)計完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動態(tài)顯示帶來的交互特性也讓數(shù)據(jù)展示有了更多的可能性。
1. 布局框架適配
在網(wǎng)頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產(chǎn)生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達(dá)到適配當(dāng)前空間的效果。
2. 圖表元素適配
要適配移動端，網(wǎng)頁端橫向延展的顯示方式需要適應(yīng)移動端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預(yù)知客戶傳入的數(shù)據(jù)量，可能會遇到因數(shù)據(jù)量過多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問題。這種情況下，提前考慮數(shù)據(jù)極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨(dú)立介紹。
// 結(jié)語
數(shù)據(jù)可視化在B端設(shè)計場景中發(fā)揮著重要作用。設(shè)計師在表達(dá)數(shù)據(jù)之美的同時更加準(zhǔn)確，才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關(guān)鍵。
作者：百度MEUX 來源：站酷
藍(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.bouu.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è)計公司
一、項(xiàng)目背景
語音搜索場景在功能不斷迭代的同時，也在探索更年輕化的玩法、傳遞更多元的體驗(yàn)感受。在產(chǎn)品初期，我們嘗試在語音搜索場景下增加AI伙伴的形象，雖然線上版本已經(jīng)實(shí)現(xiàn)，但從產(chǎn)品形態(tài)以及用戶反饋上看，還沒有達(dá)到可情感互動的效果。所以在本次迭代上，我們著重從情感聯(lián)結(jié)、閑聊互動的維度，對語音搜索進(jìn)行創(chuàng)新性嘗試。
二、設(shè)計挑戰(zhàn)與目標(biāo)
圍繞項(xiàng)目背景，從現(xiàn)在語音搜索的用戶行為與框架來看，有幾個比較明確的問題：
因?yàn)榍捌谠谡Z音搜索的優(yōu)化中，已經(jīng)嘗試在面板中引入AI形象，上線后用戶反響強(qiáng)烈，用戶的行為中聊天、互動的訴求也明顯增加。由此可見，滿足用戶對AI伙伴的情感化訴求是十分有必要的，同時語音搜索引入AI伙伴是體現(xiàn)同行業(yè)差異化的有力創(chuàng)新點(diǎn)，從行業(yè)報告《2021年中國智能語音市場分析報告》中，也闡述了打造沉浸感語音搜索體驗(yàn)與引入AI是目前智能語音市場的發(fā)展趨勢。
綜合以上原因，設(shè)計團(tuán)隊(duì)在與產(chǎn)品討論過后，達(dá)成本次升級的核心目標(biāo)：
三、設(shè)計舉措
1、構(gòu)建認(rèn)知 - 語音搜索基礎(chǔ)框架升級
在舊頁面中，語音面板限制了人物與按鈕的展現(xiàn)，人物既要承載功能反饋又需要作為物理操作按鍵進(jìn)行點(diǎn)擊操作，與用戶認(rèn)知相悖且也不利于功能擴(kuò)展。因此在新版本設(shè)計中，需要明確“人”在語音搜索里的屬性，以及AI伙伴與語音搜索的關(guān)系。
我們將語音搜索頁面框架分為主要功能與輔助功能區(qū)。從舊語音面板中剝離出人物，并保留收音球在面板中做物理交互功能（發(fā)起收音、停止收音操作），利用AI伙伴的人物屬性，打造智能擬人的交互反饋，滿足用戶情感訴求。以“人”為中心，最大化展示AI形象，增強(qiáng)情緒傳遞感的同時保證框架可拓展性。
同時，將原堆積在面板中的功能與信息按優(yōu)先級歸位，確保頁面信息清晰易讀、功能操作熱區(qū)無重疊、信息反饋區(qū)無干擾。新框架上線后，AI伙伴互動與語音搜索的認(rèn)知關(guān)系更加清晰，語音搜索跳框量明顯增加，AI伙伴帶動面板整體導(dǎo)流增加，面板退出率下降。
2、引入情感 - 全場景情感化體驗(yàn)提升
除了通過框架層面進(jìn)行認(rèn)知優(yōu)化之外，為營造更貼合“人”的互動體驗(yàn)與情感建立，我們又根據(jù)語音場景對每個狀態(tài)進(jìn)行了情感體驗(yàn)升級。改版上線后，用戶閑聊訴求和互動點(diǎn)擊行為均有所提升，從而驗(yàn)證情感化的體驗(yàn)提升，滿足了用戶互動訴求。
1）情感化引導(dǎo)提示：視覺上人物破框展示配合AI招手/比心的動作展示，不再是圖片，而是可以對話的實(shí)體，同時使用年輕化的引導(dǎo)語氣拉近與用戶間的距離，增加數(shù)字人曝光，建立新用戶心理預(yù)期，激發(fā)興趣點(diǎn)提轉(zhuǎn)化。
2）互動提示規(guī)則升級：圍繞“人”的真實(shí)情感，通過彈出氣泡的方式模擬AI伙伴狀態(tài)，比如聽歌、讀書、游戲。以此引發(fā)用戶點(diǎn)擊或進(jìn)行互動行為嘗試。并且配合AI伙伴升級引導(dǎo)規(guī)則，使引導(dǎo)能夠根據(jù)不同場景進(jìn)行適配，保證其既可以承接語音常規(guī)引導(dǎo)功能，又可以承接負(fù)一樓聊天互動，點(diǎn)擊氣泡可跳轉(zhuǎn)對應(yīng)負(fù)一樓場景、聯(lián)動數(shù)字人語境內(nèi)容，避免造成場景情感化割裂。
3）增加“AI伙伴”情感反饋：增加人物動作、豐富情感化動態(tài)反饋，想要模擬更真實(shí)的“人”的狀態(tài)，就需要滿足更多擬人反饋。將語音搜索常見場景劃分為聆聽、識別解析、異常狀態(tài)、指令響應(yīng)、引導(dǎo)等5種狀態(tài)。對應(yīng)不同的狀態(tài)，規(guī)劃相應(yīng)的數(shù)字人反饋動作或組合使用方式，可復(fù)用拓展其他相關(guān)場景，為設(shè)計與開發(fā)提效。
3、感知升級 - 營造沉浸視覺氛圍
確定了產(chǎn)品主要改版方向后，通過對目標(biāo)的提煉，提取設(shè)計關(guān)鍵點(diǎn)「年輕化」與「情感化」，配合AI伙伴形象，需要呈現(xiàn)出輕松活力的氛圍感，設(shè)計中運(yùn)用了大面積的毛玻璃質(zhì)感，使場景更加輕盈、沉浸。通過對色彩的運(yùn)用來演繹年輕的視覺效果，詮釋語音搜索年輕化的設(shè)計突破。
1）定義視覺風(fēng)格：圍繞改版目標(biāo)，定義設(shè)計關(guān)鍵詞，由關(guān)鍵詞延伸設(shè)計風(fēng)格要點(diǎn)。
2）形色字構(gòu)質(zhì)動：從「形色字質(zhì)構(gòu)」5個方面提煉設(shè)計特征。
基于視覺方向及特征提煉，在質(zhì)感、形狀、顏色三個設(shè)計中改動最大的方向詳細(xì)描述。
考慮到語音搜索場景日后的拓展，色彩上希望可以營造給用戶一種輕松柔和的視覺氛圍，并且元素的色彩需要與AI伙伴服飾相呼應(yīng)，從而使AI伙伴形象更加靈動、場景搭配更加和諧生動。
①基礎(chǔ)色彩范圍制定：
以度曉曉為示例，遍歷目前線上所有度曉曉服飾裝扮，對色彩進(jìn)行歸類處理，從中提取主題色系，從搜索色庫中對應(yīng)選出主題色環(huán)。
②如何在數(shù)字人裝扮中提取主體色：
我們需要把色彩量化，建立特定場景取色規(guī)則，根據(jù)規(guī)則層層篩選，我們可以從中獲取N種主體侯選色。
③校正主體色，與搜索智庫色彩形成映射關(guān)系：
通過對數(shù)字人裝扮的色彩分類，我們以H值為標(biāo)準(zhǔn)，通過調(diào)整S值與B值，劃分了12個色相，設(shè)定對應(yīng)色系的H值區(qū)間范圍，如智能取色色值在該色相區(qū)間范圍內(nèi)，且吸取到的候選色個數(shù)最多，就在對應(yīng)的色庫卡中選取主體色。
校正原則：色相必須保持是同類色、保持感官明度同頻、保證視障人群的識別度
④建立輔助色搭配規(guī)則：
為了保持背景層的色彩氛圍營造，保證其具有清晰的識別度，我們以主體色為起點(diǎn)，選擇了顏色相對較多的鄰近色，在色溫上保持整體色調(diào)的一致性，其次利用對比色和互補(bǔ)色，選擇更加豐富多元的色相，制造更強(qiáng)烈的色彩對比，以保證滿足各種使用場景下對色彩的需求。
⑤組件化思維拆解頁面元素：
在梳理了智能取色機(jī)制后，我們也在思考，語音面板涉及到的元素過多，往往會面臨不同場景不同適配的情況出現(xiàn)，那么在做到視覺減負(fù)的同時，如何能靈活的替換對應(yīng)元素呢？
我們以組件化思維去拆分設(shè)計，進(jìn)行立體化的分層，將引導(dǎo)層（熱詞推薦引導(dǎo)關(guān)注）、信息展示層（承接語音各類狀態(tài)與信息）、形象層（強(qiáng)化AI伙伴智能感知）、背景層（烘托視覺氛圍感）羅列出來，各場景可根據(jù)需要進(jìn)行顏色延展，保證視覺樣式達(dá)成橫向統(tǒng)一，呈現(xiàn)出更加豐富的視覺內(nèi)容，避免審美疲勞。
總結(jié)本次語音搜索的改版升級，我們通過“構(gòu)建伙伴認(rèn)知、滿足情感互動、增強(qiáng)沉浸體驗(yàn)”等手段，增強(qiáng)AI伙伴的曝光率，進(jìn)一步向用戶傳達(dá)智能搜索的感知，從而促進(jìn)搜索行為轉(zhuǎn)化。
構(gòu)建認(rèn)知過程中強(qiáng)化AI伙伴形象，增強(qiáng)語音搜索功能拓展性；同時結(jié)合“情感化”等全場景引導(dǎo)手段，營造更貼合“人”的互動體驗(yàn)與情感建立，對每個狀態(tài)進(jìn)行了情感體驗(yàn)升級；最后重新定制視覺風(fēng)格，圍繞「年輕化」關(guān)鍵點(diǎn)對整體氛圍進(jìn)行強(qiáng)化，讓語音搜索場景更加年輕、有氛圍感。本次改版上線后，搜索行為、互動行為均有所提升，用戶體驗(yàn)也得到了顯著提升。
四、寫在最后
我們正處于數(shù)字化快速變革的時代，傳統(tǒng)工具的基礎(chǔ)功能已不再滿足用戶的訴求，人們的感官也從現(xiàn)實(shí)空間延伸到虛擬空間，AI伙伴會逐漸融入人們的生活，未來語音搜索將不再是一個信息輸入-結(jié)果輸出的傳統(tǒng)搜索工具，引入AI伙伴，可以讓搜索更加智能，擁有人類一樣的思維、表達(dá)、情感和學(xué)習(xí)能力，滿足人們更高層次的情感訴求的同時，也可以讓搜索更加簡單有趣。
未來我們持續(xù)對語音搜索進(jìn)行升級，將AI伙伴與搜索鏈接的更加緊密，提升用戶體驗(yàn)，創(chuàng)造出更多有趣的、創(chuàng)新的、別出心裁的年輕化設(shè)計。
作者：百度MEUX 來源：站酷
藍(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.bouu.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)容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場景下，合理的手勢設(shè)計不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。
視頻場景中目前已有部分的常規(guī)單向手勢已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！?、「雙擊→點(diǎn)贊」、「長按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。
那么如何在保留用戶對于常規(guī)通用手勢認(rèn)知的基礎(chǔ)上，進(jìn)一步對視頻場景中的手勢交互進(jìn)行擴(kuò)容升級？這也是我們接下來在手勢進(jìn)階交互上的重點(diǎn)探索方向。
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規(guī)的基礎(chǔ)通用手勢進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢」設(shè)計模型，以探索如何在視頻場景中構(gòu)建便捷高效的進(jìn)階手勢體驗(yàn)設(shè)計。
二、什么是「組合手勢」
「組合手勢」是基于常規(guī)手勢的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢所構(gòu)成，若組合方式及使用場景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。
以前述的視頻場景常規(guī)手勢為例，其觸發(fā)機(jī)制一般可分為兩個階段：step1交互信號→step2執(zhí)行任務(wù)，即用戶通過某一基礎(chǔ)手勢發(fā)出交互信號，系統(tǒng)收到信號確認(rèn)后便可立即執(zhí)行任務(wù)，但整個過程是線性的，手勢擴(kuò)展性十分有限且難以滿足視頻場景對于手勢擴(kuò)容的訴求。
于是我們在現(xiàn)有常規(guī)手勢兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識別」環(huán)節(jié)，并梳理出「組合手勢」的設(shè)計模型，以探索不同基礎(chǔ)手勢相互組合后的擴(kuò)展可行性。
「組合手勢」觸發(fā)一般可分為三個階段：step1交互信號→step2意圖識別→step3執(zhí)行任務(wù)，前兩階段均可由對應(yīng)的基礎(chǔ)分支手勢構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢組合觸發(fā)路徑。
由于「組合手勢」并不像常規(guī)手勢那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計靈活度，尤其需根據(jù)具體的使用場景進(jìn)行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項(xiàng)目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發(fā)成本高。
2.競品調(diào)研及選型
通過對競品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競品均有使用長按手勢作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長按交互選型， 分別為：長按觸發(fā)獨(dú)立播控面板、長按觸發(fā)浮層播控選項(xiàng)、長按觸發(fā)特定播控功能。
選型A
「長按觸發(fā)獨(dú)立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對視頻沉浸觀感體驗(yàn)有一定的打斷感；
選型B
「長按觸發(fā)浮層播控選項(xiàng)」：通過長按手勢可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；
選型C
「長按觸發(fā)特定播控功能」：通過長按手勢觸發(fā)特定的某個播控功能（如長按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設(shè)計方案
1）長按手勢交互擴(kuò)容
針對目前視頻播控菜單存在的問題，經(jīng)過和業(yè)務(wù)對上述三種長按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對視頻場景中的播控菜單進(jìn)行設(shè)計升級。
但隨之而來的難點(diǎn)是我們目前播放器中的長按手勢已被“快進(jìn)”功能占據(jù)，用戶對此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會對用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對于便捷手勢體驗(yàn)的重要設(shè)計探索點(diǎn)。
基于此，我們決定嘗試使用「組合手勢」設(shè)計模型來對視頻播放器中的長按手勢進(jìn)行重新定義，通過「長按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對應(yīng)到設(shè)計模型的三個階段分別為：
step1：以“長按手勢”創(chuàng)建一個新模式，即發(fā)出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統(tǒng)默認(rèn)開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標(biāo)功能項(xiàng)以選擇功能；
step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。
「長按+向上滑選」快捷觸發(fā)對應(yīng)功能項(xiàng)；
「長按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對于此功能的使用習(xí)慣）。
2）容錯性兼容
在設(shè)定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習(xí)慣、以及對于滑選手勢需要有一定的適應(yīng)過程，我們同時也支持點(diǎn)選的操作模式，即用戶長按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過點(diǎn)選的方式觸發(fā)對應(yīng)播控功能項(xiàng)。
3）易用性打磨
差異化的創(chuàng)新設(shè)計形式在前期總會面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長按+滑選」組合手勢的操作形式，于是在DEMO開發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測試，以預(yù)期在上線前可先收集一波體驗(yàn)問題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測試目標(biāo)、用戶類別、測試前序準(zhǔn)備及測試步驟等環(huán)節(jié)提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測試。
測試訪談的過程中，被測用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
3.1 ）擴(kuò)展觸發(fā)熱區(qū)：
考慮到單手握持手機(jī)的使用場景，可盡可能擴(kuò)大定義長按手勢的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實(shí)時提示及響應(yīng)反饋：
靈活判斷當(dāng)前手勢觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時給出相對應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢觸發(fā)機(jī)制。
方案上線及驗(yàn)證
以AB實(shí)驗(yàn)對本次設(shè)計方案進(jìn)行定量測試驗(yàn)證：
「對照組」效果：長按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
「實(shí)驗(yàn)組」效果：長按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）；
小流量實(shí)驗(yàn)上線后，經(jīng)過近半個月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。
「實(shí)驗(yàn)組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續(xù)走高，通過滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴(kuò)展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續(xù)走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發(fā)的訴求，于是我們對長按菜單進(jìn)行了二期的設(shè)計升級，在長按浮層最右側(cè)新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現(xiàn)實(shí)世界行為的映射，無論是基礎(chǔ)手勢還是組合類高級手勢，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場景中進(jìn)行設(shè)計。
以「組合手勢」設(shè)計模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對視頻播放器中更多功能場景進(jìn)行了便捷手勢的設(shè)計擴(kuò)容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當(dāng)前視頻落地頁、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發(fā)出交互信號而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發(fā)出交互信號，若在“雙指拖拽手勢”基礎(chǔ)上有識別到“雙指擴(kuò)張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。
五、結(jié)語
便捷手勢的設(shè)計出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場景的手勢體驗(yàn)設(shè)計實(shí)踐能給大家?guī)韼椭蛦l(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場景的手勢交互體驗(yàn)。
————————————————————————————————————————————————————————————————————
感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請注明出處，違者必究，謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復(fù)【轉(zhuǎn)載】。
也歡迎加入MEUX,視覺/交互/運(yùn)營設(shè)計師可投簡歷至MEUX@BAIDU.COM(注明信息獲取來源如：站酷）
關(guān)于我們：
MEUX,百度移動生態(tài)用戶體驗(yàn)設(shè)計中心，負(fù)責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。
MEUX以「簡單極致」為設(shè)計理念，創(chuàng)造極致用戶體驗(yàn)的同時賦能商業(yè)，推動設(shè)計行業(yè)的價值和影響力，讓生活因設(shè)計而更美好。
作者：百度MEUX 來源：站酷
藍(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.bouu.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è)計公司
百度小說是百度APP內(nèi)的垂直頻道，擁有過億月活和行業(yè)最全的正版書籍。隨著著作權(quán)保護(hù)意識逐步上升，越來越多的用戶愿意為優(yōu)質(zhì)的資源和閱讀體驗(yàn)付費(fèi)。2019年底，為了滿足用戶消費(fèi)升級所產(chǎn)生的一系列需求，百度小說初步建立了會員體系。經(jīng)過兩年多的打磨，我們不斷提升會員的服務(wù)體驗(yàn)，并進(jìn)行了多次優(yōu)化升級，現(xiàn)在將我們的設(shè)計經(jīng)驗(yàn)分享給大家。
一、設(shè)計背景
2021年我國數(shù)字閱讀用戶規(guī)模達(dá)到5.06億，同比增長2.43%，半數(shù)以上用戶愿意為電子閱讀付費(fèi)，占比最重的人群為19~25歲用戶，達(dá)到44.63%（數(shù)據(jù)來源《中國數(shù)字閱讀報告》），“Z世代”已經(jīng)成為我國數(shù)字閱讀的主要群體。隨著消費(fèi)升級，用戶對服務(wù)的需求不斷提升，更看重信息之上的附加價值，如認(rèn)同感、歸屬感和儀式感。
二、改版原因
2019年，由于時間緊、任務(wù)重，我們完成了小說會員從無到有、從0-1的基礎(chǔ)場景搭建。但隨著設(shè)計趨勢的變化，當(dāng)時小說會員的設(shè)計風(fēng)格與主流用戶的喜好不完全匹配，在使用場景中也存在易用性不足、內(nèi)容缺乏吸引力等問題。下圖是2019年小說會員的界面。
同時，我們對小說用戶進(jìn)行了視頻訪談，搜集了用戶在使用會員服務(wù)中遇到的問題，如會員福利少、找不到會員專屬內(nèi)容、購買過程有卡頓等，最終梳理為的三大核心問題：身份感知弱、購買路徑長和資源內(nèi)容少。
三、設(shè)計目標(biāo)
在小說會員亟待改版的背景下，我們結(jié)合業(yè)務(wù)目標(biāo)、舊版核心問題和用戶訴求，推導(dǎo)出了本次改版的設(shè)計目標(biāo)—品牌化、鏈路化和服務(wù)化。
1、品牌化—強(qiáng)化會員品牌
小說會員作為百度APP眾多會員之一，設(shè)計團(tuán)隊(duì)希望能帶給閱讀用戶一些不同的品牌記憶點(diǎn)。
1）設(shè)計關(guān)鍵詞
基于會員的主流用戶、產(chǎn)品屬性和用戶訴求，我們衍生出以下關(guān)鍵詞：年輕、品質(zhì)、尊貴、超值。年輕用戶群體的占比越來越高，新版的設(shè)計風(fēng)格力求更好滿足年輕用戶的審美需求。
2）會員符號
符號是最直觀的視覺元素之一，能夠以最快的方式傳遞產(chǎn)品記憶點(diǎn)。在會員品牌符號設(shè)計的草圖階段，我們從字母V、VIP、鉆石、王冠和小說IP白嘟嘟等多個方向進(jìn)行了方案發(fā)散。最終采用了白嘟嘟圖形與尊貴感的V形符號相結(jié)合的形式。該方案既延續(xù)了小說的視覺符號，又與競品的會員標(biāo)識形成差異，從而加深用戶的品牌感知和視覺記憶。
3）會員色彩
為了確定更加獨(dú)特的品牌色，設(shè)計團(tuán)隊(duì)搜集了大量的尊貴氛圍圖片，提煉出了玫瑰金，牙金，赤墨等8個具有品質(zhì)感的顏色。在視覺初稿階段，我們選擇了玫瑰金和黃金兩種主色進(jìn)行了方案嘗試。最終根據(jù)整體效果確定主色為明亮、高貴的玫瑰金，輔色為黑茶棕，深支子和漆黑的配色方案。新的配色方案讓用戶感受到新穎、現(xiàn)代，煥然一新。
4）會員圖標(biāo)
在圖形元素上，為了增強(qiáng)親和感，我們選擇了圓潤的面形圖標(biāo)樣式，通過大圓弧和小圓角的細(xì)節(jié)處理，傳遞給用戶一種年輕、品質(zhì)的品牌印記。
5）信息傳達(dá)
我們對會員購買頁和權(quán)益詳情頁進(jìn)行了布局重構(gòu)，采用深色的背景襯托卡片信息，使得產(chǎn)品框架層和內(nèi)容信息層更加明確，突出核心內(nèi)容。
在各類場景中，我們通過會員品牌色彩、圖形、符號和IP形象的滲透，強(qiáng)化會員品牌印記。
經(jīng)過分析研究和實(shí)踐，我們完成了主場景的設(shè)計升級。
2、鏈路化—精細(xì)化運(yùn)營
就會員體驗(yàn)而言，我們需要關(guān)注用戶在各種時間和各類場合下的需求，因此我們將會員的全鏈路狀態(tài)分為時機(jī)、場景和人群三個維度。
1）時機(jī)
在不同的時機(jī)狀態(tài)下，我們需要傳遞給用戶不同的信息。只有深入剖析不同狀態(tài)下的用戶訴求，才能為其提供更好的服務(wù)。接下來我們從購買前、購買中、購買后和即將過期四個階段闡述：
①購買前—權(quán)益/優(yōu)惠信息引導(dǎo)
在用戶購買前，我們強(qiáng)化了低價和省錢信息，讓用戶直觀的感受到購買會員后的價格福利。為此我們從三個方向上進(jìn)行優(yōu)化，在開通購買頁，外露省錢金額，幫助用戶了解開通會員可享受的收益；在會員頻道頁，采用外露多項(xiàng)權(quán)益，讓用戶快速了解會員權(quán)益；在章節(jié)購買頁，采用突出會員折扣和會員優(yōu)惠價，讓用戶感受到開通會員的折扣福利。
②購買中—優(yōu)化路徑流程
在用戶購買中，我們在會員購買鏈路環(huán)節(jié)進(jìn)行簡化，采用當(dāng)前頁彈出半層面板替代跳轉(zhuǎn)至?xí)T聚合頁的方式，縮短等待加載時間；在章節(jié)付費(fèi)鏈路環(huán)節(jié)，將商品選擇區(qū)信息結(jié)構(gòu)進(jìn)行優(yōu)化，減少多章購買的頁面跳轉(zhuǎn)，使得用戶能夠更流暢的完成支付，提升付費(fèi)體驗(yàn)。
③購買后—強(qiáng)化權(quán)益感知
在用戶購買后，鑒于付費(fèi)用戶對商品和服務(wù)品質(zhì)有著更高追求，為此我們通過在各類重要入口展示會員權(quán)益，包括省錢金額、去廣告次數(shù)以及各類場景VIP狀態(tài)提示等方法，以達(dá)到強(qiáng)化用戶的權(quán)益感知。
④即將過期—輕引導(dǎo)續(xù)費(fèi)
在即將過期前，為了避免對用戶造成強(qiáng)付費(fèi)的不友好感知。過期前3天，我們采用了輕量化的形式告知用戶續(xù)費(fèi)，通過各類引導(dǎo)信息的提示，讓用戶知曉會員服務(wù)期限屆滿。
2）場景
我們在入口和功能場景中也進(jìn)行了精細(xì)化設(shè)計，讓用戶更便捷地使用會員服務(wù)。為了突出會員優(yōu)質(zhì)內(nèi)容和服務(wù)，我們設(shè)置了會員專屬的頻道和書庫，方便用戶選擇。
在各類功能場景中，為了方便用戶在使用功能的過程中隨時購買，我們設(shè)置了多個功能場景的會員開通入口。讓用戶快捷享受會員服務(wù)。
3）人群
通過小說用戶數(shù)據(jù)分析，我們將用戶人群分為會員用戶、潛在用戶、新用戶和過期用戶。
為了讓會員用戶能夠體驗(yàn)到區(qū)分于普通用戶的尊貴感，我們在付費(fèi)頁、批量離線、TTS播放頁和簽到頁等場景均采用了會員定制化的配色方案和引導(dǎo)提示，這樣使得會員用戶在體驗(yàn)服務(wù)的各類場景中有更強(qiáng)的身份專屬性。
所謂潛在用戶，是指仍在猶豫是否購買會員的用戶。我們通過限時優(yōu)惠券、激勵視頻試用15分鐘、書架省錢提示、挽留彈窗和降級版免廣告權(quán)益等方式，讓潛在用戶不僅可以先試后買了解會員權(quán)益，而且可以通過各類信息提示通曉會員體驗(yàn)，更好地判斷是否通過會員服務(wù)減少付費(fèi)金額和提升閱讀體驗(yàn)。
我們針對新用戶建立了新人見面禮活動，用戶在新手福利活動期內(nèi)可享受超值折扣開通會員，低價體驗(yàn)會員權(quán)益。而針對已過期的用戶，我們通過下發(fā)優(yōu)惠券、強(qiáng)化特權(quán)等形式喚醒用戶，以免錯過各類福利和特權(quán)。
3、服務(wù)化—提升會員服務(wù)
在內(nèi)容為王的時代背景下，為了增加會員產(chǎn)品的核心競爭力，我們持續(xù)擴(kuò)充會員書庫的數(shù)量和類目、拓展會員權(quán)益，讓用戶閱讀到更加豐富的小說內(nèi)容和體驗(yàn)到更多權(quán)益的會員服務(wù)。小說書庫的付費(fèi)和免費(fèi)書數(shù)量大幅擴(kuò)充，且書籍類型新增了有聲書和短篇故事，增添了小說資源的多樣性。
在權(quán)益上，對內(nèi)我們持續(xù)拓展會員特權(quán)，從最初的4項(xiàng)擴(kuò)展為10項(xiàng)，新增了有聲免費(fèi)聽、免費(fèi)讀故事、整本離線、專屬字體、簽到1.5倍書幣等權(quán)益；對外我們聯(lián)合其他產(chǎn)品，推出了會員贈禮和聯(lián)合會員服務(wù)，用戶可以根據(jù)自己的需求進(jìn)行購買，享受組合購買的優(yōu)惠。
通過多個版本的迭代，我們完成了會員體系的設(shè)計升級和落地，用戶體驗(yàn)得到了顯著提升。
四、未來規(guī)劃
提升付費(fèi)產(chǎn)品的用戶體驗(yàn)是一個體系化的研究課題，需要各個角色通力合作，合力同行，開拓革新。將來我們還會不斷探索，通過不斷優(yōu)化體驗(yàn)細(xì)節(jié)，不斷增加用戶權(quán)益感知，不斷嘗試方案創(chuàng)新，形成設(shè)計組合拳，為用戶提供更好的服務(wù)。
作者：百度MEUX 來源：站酷
藍(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.bouu.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è)計系統(tǒng)是一個強(qiáng)大的生態(tài)體系，在這個體系下，各系統(tǒng)部分協(xié)同運(yùn)行，促進(jìn)平臺產(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è)計系統(tǒng)是指服務(wù)于數(shù)字化產(chǎn)品設(shè)計的一系列具有內(nèi)在關(guān)聯(lián)性的、組織有序的設(shè)計模式與實(shí)踐方法（Kholmatova，2017）。
它既包含了可復(fù)用并組成界面的要素，也涵蓋了如何在設(shè)計團(tuán)隊(duì)當(dāng)中創(chuàng)建、提煉、使用和共享的方法。在2014年后，各大知名公司開始在界面設(shè)計領(lǐng)域紛紛構(gòu)建設(shè)計系統(tǒng)。百度商業(yè)團(tuán)隊(duì)隨著產(chǎn)品不斷的發(fā)展和壯大，團(tuán)隊(duì)希望通過統(tǒng)一的設(shè)計和研發(fā)語言來提升產(chǎn)品的一致性，并實(shí)現(xiàn)團(tuán)隊(duì)協(xié)同效率提升，從而達(dá)到降本提效。在基于自身業(yè)務(wù)特性上，建設(shè)了一套Light設(shè)計系統(tǒng)并持續(xù)的發(fā)展。
目前在設(shè)計系統(tǒng)建設(shè)方面，各家有非常完備的建設(shè)方法與實(shí)踐。當(dāng)設(shè)計系統(tǒng)建設(shè)趨于完備和成熟時，如何更有效定位設(shè)計系統(tǒng)的發(fā)展方向、持續(xù)迭代成為我們思考的重點(diǎn)。
本文將以百度商業(yè)團(tuán)隊(duì)Light設(shè)計系統(tǒng)PATS度量體系的建設(shè)為例，分享我們?nèi)绾翁剿髟O(shè)計系統(tǒng)度量的建構(gòu)，與具體實(shí)踐。希望通過文章能為大家?guī)硇滤伎?，并借此與大家進(jìn)行交流與探討。
1.為什么要做設(shè)計系統(tǒng)度量
度量是一種測量或評價特定現(xiàn)象或事物的方法，而體驗(yàn)度量則是一種可靠的測量或評價體驗(yàn)的方法與數(shù)據(jù)體系，使得體驗(yàn)可被測量、量化并以數(shù)據(jù)的形式表示出來（Tullis and Albert，2009）。
管理學(xué)大師彼得?德魯克：If you can’t measure it, you can’t improve it.無度量、無改善。設(shè)計系統(tǒng)無疑是一個動態(tài)發(fā)展的，是不斷演進(jìn)的一個生態(tài)。在百度商業(yè)團(tuán)隊(duì)Light Design設(shè)計系統(tǒng)建設(shè)初步完善后，我們希望通過行之有效的度量，來進(jìn)行可測量、可量化、可持續(xù)的監(jiān)測，從而對設(shè)計系統(tǒng)進(jìn)行全面評估，明確下一步重點(diǎn)的投入方向。這對我們設(shè)計系統(tǒng)管理和迭代非常有必要。
2.如何建立設(shè)計系統(tǒng)度量
2.1 現(xiàn)有度量模型研究
在構(gòu)建度量體系之前，我們先回溯已有的度量模型。了解當(dāng)前市面上以及學(xué)術(shù)上已有的成熟度量模型。并帶著以下2個問題進(jìn)行研究：
當(dāng)前業(yè)界較為典型常用的模型體系：例如HEART + GSM模型、PTECH模型、《云計算軟件產(chǎn)品使用體驗(yàn)質(zhì)量度量模型及度量方法》。
通過對比分析模型維度、具體指標(biāo)和方法，我們發(fā)現(xiàn)：
1）較為典型常用的模型是面向具體商業(yè)產(chǎn)品和用戶，但針對設(shè)計系統(tǒng)的度量很少涉及。
2）常見度量模型建構(gòu)的方法是有一定共性特征，我們可借此指導(dǎo)建構(gòu)設(shè)計系統(tǒng)度量模型。
2.2 設(shè)計系統(tǒng)度量的建構(gòu)
根據(jù)以上調(diào)研，我們認(rèn)為：現(xiàn)有度量模型評估的對象、內(nèi)容和方法是面向用戶群體，并針對具體業(yè)務(wù)或產(chǎn)品；而設(shè)計系統(tǒng)的度量則是：通過全面科學(xué)的度量體系，評估設(shè)計系統(tǒng)在工作流程與業(yè)務(wù)側(cè)應(yīng)用的表現(xiàn)，驗(yàn)證其價值，并判斷在應(yīng)用中存在的問題。
我們基于百度商業(yè)團(tuán)隊(duì)Light設(shè)計系統(tǒng)發(fā)展和預(yù)期目標(biāo)，構(gòu)建了一套度量設(shè)計系統(tǒng)的評估體系。具體構(gòu)建過程分四步進(jìn)行：
Step 01. 盤點(diǎn)當(dāng)前現(xiàn)狀：
通過盤點(diǎn)對設(shè)計系統(tǒng)的各項(xiàng)內(nèi)容、困惑問題等，以此明確設(shè)計系統(tǒng)需要度量對象和內(nèi)容。根據(jù)設(shè)計系統(tǒng)標(biāo)準(zhǔn)化建立指南（Invision，2020）所提出：設(shè)計系統(tǒng)在不同發(fā)展階段，需要到達(dá)標(biāo)準(zhǔn)的依據(jù)以及設(shè)計系統(tǒng)應(yīng)包含的內(nèi)容。結(jié)合我們設(shè)計系統(tǒng)當(dāng)前發(fā)展的情況，將百度商業(yè)團(tuán)隊(duì)設(shè)計系統(tǒng)內(nèi)容拆分為原則規(guī)范（Principle）、設(shè)計資產(chǎn)（Asset）、設(shè)計工具（Tool）、維護(hù)管理（Support）四大板塊。由此，明確我們度量設(shè)計系統(tǒng)的具體內(nèi)容，并將我們設(shè)計系統(tǒng)度量定義為設(shè)計系統(tǒng)PATS度量體系。
Step 02.制定度量維度：
在明確度量對象內(nèi)容后，結(jié)合我們設(shè)計系統(tǒng)的目標(biāo)，將度量體系聚焦五大維度：
Step 03.明確目標(biāo)、信號與指標(biāo)：
在不同維度下，依照GSM模型的方法具體推導(dǎo)出指標(biāo)和度量方法。具體實(shí)施的過程是：羅列出度量內(nèi)容在維度上所期望的目標(biāo)，以及表現(xiàn)出的信號，來推到出具體指標(biāo)。整個過程中，做到【貼近系統(tǒng)目標(biāo)，緊扣度量內(nèi)容】。
Step 04.選取度量方法：
對應(yīng)上述的劃分維度和指標(biāo)，設(shè)計特定的度量問卷，采用主觀評分的形式持續(xù)跟蹤使用者們體驗(yàn)分?jǐn)?shù)變化，從而監(jiān)控設(shè)計系統(tǒng)在我們工作流程中的運(yùn)行情況。并結(jié)合定性訪談，對薄弱內(nèi)容深入探究，了解具體原因。此外，我們也引入客觀度量方法，對組件應(yīng)用表現(xiàn)的客觀數(shù)據(jù)進(jìn)行監(jiān)測，來反映其靈活度情況。
3.PATS度量落地實(shí)踐
構(gòu)建設(shè)計系統(tǒng)PATS度量模型后，持續(xù)開展度量實(shí)踐，度量模型與評估方法得到初步驗(yàn)證，確定設(shè)計系統(tǒng)度量體驗(yàn)分的基線；并了解當(dāng)前系統(tǒng)發(fā)展不足的地方，明確短期解決方案以及?線行動規(guī)劃。
第一次度量實(shí)踐中，對比本次度量的平均分發(fā)現(xiàn)：易用性與可靠性維度遠(yuǎn)低于平均分，存在明顯的短板。于是，重點(diǎn)針對短板問題，一方面，通過定性訪談對具體問題歸因，找準(zhǔn)痛點(diǎn)，制定出應(yīng)對方案；另一方法，調(diào)研先進(jìn)設(shè)計系統(tǒng)的建設(shè)方法，學(xué)習(xí)管理經(jīng)驗(yàn)，給出具體的改善措施。
通過半年執(zhí)行改善措施后，再次度量時，聚焦分值的變化觀測到：執(zhí)行相應(yīng)的措施和決策后，分值有了明顯的變化。例如，通過切換Figma工具作為Light設(shè)計系統(tǒng)相關(guān)資產(chǎn)的載體，利用其優(yōu)勢將設(shè)計系統(tǒng)內(nèi)容根植到工作流程，使得易用性維度提升幅度非常顯著。在一定程度上，驗(yàn)證了工具切換決策的價值。但易用性維度分值依舊較低，有可提升空間，還需持續(xù)優(yōu)化。
此外，成立Light設(shè)計系統(tǒng)維護(hù)小組，制定維護(hù)管理建設(shè)機(jī)制，明確雙周更新通知，統(tǒng)一日志記錄模板，明確各項(xiàng)負(fù)責(zé)人等，推動可靠性維度得分提升顯著。通過PATS設(shè)計系統(tǒng)度量，既為我們指明了下一步改善的方向，也對設(shè)計系統(tǒng)的發(fā)展決策進(jìn)行驗(yàn)證。
總結(jié)：
在建立設(shè)計系統(tǒng)PATS度量后，實(shí)現(xiàn)了全面并精準(zhǔn)的監(jiān)控和管理，并指引我們提出可提升系統(tǒng)體驗(yàn)的決策與方向。而設(shè)計系統(tǒng)是復(fù)雜的，也是不斷變化、演進(jìn)的。未來設(shè)計系統(tǒng)PATS度量的方法也會隨設(shè)計系統(tǒng)的發(fā)展而逐漸豐富，來獲取更全面的數(shù)據(jù)。最終，幫助團(tuán)隊(duì)更好地推進(jìn)設(shè)計系統(tǒng)的建設(shè)，提升設(shè)計系統(tǒng)的成熟度，推進(jìn)設(shè)計系統(tǒng)向一個良性循環(huán)的方向前進(jìn)。
作者：百度MEUX 來源：站酷
藍(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.bouu.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)市場飽和，越來越多的公司轉(zhuǎn)向海外尋找新的增長機(jī)會，其中出海電商成為了最大的市場之一。21年底艾媒咨詢顯示出海電商市場中，中國企業(yè)在海外的獨(dú)立站數(shù)量已達(dá)20萬+，所占份額從2016年9.8%提升至2021年25.6%，預(yù)計2025年將會到達(dá)50%。
什么是獨(dú)立站？2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價的鋪貨型公司，但難見起色，之后成功轉(zhuǎn)向于依靠流量運(yùn)營和供應(yīng)鏈體系的品牌型公司，通過自己站點(diǎn)直接和用戶鏈接并發(fā)生交易。
本文將先介紹獨(dú)立站這股出海電商新趨勢，然后從用戶體驗(yàn)視角描述導(dǎo)航、交易流程、視覺三個方面與電商平臺的差異性，最后我們基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享一些獨(dú)立站設(shè)計經(jīng)驗(yàn)和避坑點(diǎn)。
海外電商市場集中度低，亞馬遜封號熱潮，資本大批涌入，使得出海聚光燈逐漸從平臺轉(zhuǎn)向獨(dú)立站。
根據(jù)下面頭豹研究院整理的19年各國電商占比圖可看出，中國平臺電商占比整體電商市場高達(dá)86%，而歐美國家占比為60%。同時中國自有品牌占比1%，而歐美國家平均占比高達(dá)24%?？梢姎W美電商市場平臺占比低，難以形成壟斷，同時自有品牌占有率高，因此品牌獨(dú)立站在海外有更優(yōu)質(zhì)的發(fā)展環(huán)境。
亞馬遜等海外平臺政策逐漸收緊，2021年亞馬遜封號潮迫使眾多國內(nèi)商家倒閉關(guān)店。同時對于新手，平臺入場門檻越發(fā)變高：注冊方式受限，通過率低以及中國賬號易被封號。與之相對是機(jī)會越發(fā)變少，平臺上流量爭奪和價格戰(zhàn)越發(fā)激烈，作為新人店鋪想在平臺獲得較好的曝光和推薦現(xiàn)在可能性極低。
近年來無數(shù)資本開始涌入獨(dú)立站。shopify作為頭部獨(dú)立站服務(wù)商股價從2019到2022上漲近10倍，22年獨(dú)立站領(lǐng)頭羊Shein市值高達(dá)千億美金, 拼多多9月上線Temu對標(biāo)Shein作為公司重點(diǎn)項(xiàng)目。這些都預(yù)示越來越多商家和公司開始關(guān)注并入局獨(dú)立站。
下圖分別是國外頭部平臺亞馬遜和獨(dú)立站Shein的首頁。亞馬遜顯得規(guī)整，統(tǒng)一，秩序；而右邊Shein更為豐富，跳躍，自由。我們認(rèn)為自由，是獨(dú)立站和平臺本質(zhì)上的差異點(diǎn)。
為什么獨(dú)立站可以這么自由呢？
因?yàn)楠?dú)立站擁有獨(dú)立域名和頁面, 并由商家獨(dú)立設(shè)計、運(yùn)營來打造品牌。商家對于獨(dú)立站每一個環(huán)節(jié)都擁有絕對的自主權(quán)，同時帶來特定優(yōu)勢：
但獨(dú)立站的模式并不適用于所有的出海商家：
獨(dú)立站模式下，核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務(wù)商，比如跨境支付、倉儲和配送能力。而在信息流層面，更多在于商家對于用戶的觸達(dá)和轉(zhuǎn)化，這也是作為設(shè)計師可以參與并發(fā)力的點(diǎn)。
那么獨(dú)立站針對的用戶會具有什么樣的特征？國泰君安證券曾經(jīng)專門研究過Shein的用戶，主要為20-35追求時尚個性的白領(lǐng)女士，該類群體追求個性化和潮流同時注重商品性價比。因此我們認(rèn)為追求個性化，同時付費(fèi)能力相對有限的年輕人更傾向于在獨(dú)立站進(jìn)行交易。
獨(dú)立站對于用戶而言，存在觸達(dá)(多渠道)—認(rèn)知(物料+站點(diǎn))—消費(fèi)(站點(diǎn)轉(zhuǎn)化到完成交易)—傳播(多渠道)等觸點(diǎn)，在這些觸點(diǎn)打動用戶的關(guān)鍵在于品牌認(rèn)知和主觀認(rèn)同。整個過程中，設(shè)計一方面可以在認(rèn)知階段從視覺層面通過物料、站點(diǎn)、推文傳遞品牌感知，另一方面可以在消費(fèi)階段從交互層面通過互動、服務(wù)來建立連接和粘性。
2.獨(dú)立站相比平臺的設(shè)計關(guān)鍵點(diǎn)
我們認(rèn)為獨(dú)立站和平臺本質(zhì)的差異在于獨(dú)立站將商品內(nèi)容化。平臺就像貨架上擺滿各類型商品，需要用戶快速找到并進(jìn)行交易。而獨(dú)立站把商品內(nèi)容化，慢慢建立形象并輸出內(nèi)容從而和用戶建立情感聯(lián)系。那下文接著就將從導(dǎo)航、交易流程、視覺三個方面來分析兩者基于貨架和內(nèi)容體驗(yàn)上的差異性。
從導(dǎo)航結(jié)構(gòu)來看，平臺更為強(qiáng)調(diào)搜索將其置于頂部，同時強(qiáng)調(diào)分類的快速篩選。而獨(dú)立站弱化搜索來節(jié)省縱向空間，頂部放置公告欄來定期公布優(yōu)惠信息。分類若較少，分類導(dǎo)航會置于products頁面下，采用頁面導(dǎo)航。分類較多則會將頁面導(dǎo)航換為分類導(dǎo)航，形成三層導(dǎo)航結(jié)構(gòu)。
然后對于導(dǎo)航路徑，平臺有兩種設(shè)計：
獨(dú)立站依據(jù)分類的層級和個數(shù)會有面包屑和樓梯變種的設(shè)計：像shein作為服裝采用了面包屑，而Anker作為3C采用樓梯式變種，橫向展示所有品類的名稱和圖片。
我們認(rèn)為雖然現(xiàn)在電商出現(xiàn)直播電商，內(nèi)容社區(qū)等新形式，但核心交易流程都較為固定：首頁—搜索/瀏覽—商品列表頁—商詳頁—轉(zhuǎn)化(購物車/付款)。
來到電商網(wǎng)站的用戶，可分為搜索型和瀏覽型。搜索型用戶會直接通過搜索到達(dá)商品列表頁，然后通過篩選條件找到心儀的商品進(jìn)入到商詳頁，最后選擇直接購買或者加入購物車來達(dá)成轉(zhuǎn)化。而對于瀏覽型用戶，區(qū)別在于他可能通過首頁的推薦商品、推薦分類等模塊來到達(dá)商品列表頁而非搜索。因?yàn)槭醉摫旧碇皇亲鳛槿肟冢虼私酉聛韺乃阉?瀏覽、列表、商詳、購物車/轉(zhuǎn)化來進(jìn)行分析。
平臺對于搜索框的處理較類似，將其置于頁面的中心，差異性在于點(diǎn)擊搜索框后是否會出現(xiàn)熱門搜索和搜索歷史來幫助用戶進(jìn)行決策。而獨(dú)立站都會弱化搜索框，將其置于頂部功能區(qū)。原因在于獨(dú)立站本身品類和SKU相對平臺較少，搜索的頻率需求不明顯。點(diǎn)擊獨(dú)立站搜索功能后，有兩種設(shè)計：品類較少會出現(xiàn)氣泡，同時下方顯示熱門和模糊搜索結(jié)果；品類較多出現(xiàn)大氣泡，在頁面中部強(qiáng)化搜索區(qū)。
從瀏覽行為來看，平臺首頁有三個入口：
其中頭部的分類導(dǎo)航、商品分類和商品卡片可通用到所有平臺設(shè)計，而首屏banner旁的分類多出現(xiàn)于國內(nèi)平臺的設(shè)計中目的是提高商品分類的曝光率。而對于獨(dú)立站，只有商品分類和商品卡片入口依然存在。
獨(dú)立站另外有兩個入口：
設(shè)計目標(biāo)在于將更多分類和商品信息前置，縮短最終到達(dá)商品的路徑。
商品列表頁核心部分在于篩選+商品卡片，用戶通過對應(yīng)的篩選條件最后選擇到滿意的商品卡片。
平臺篩選區(qū)普遍使用左右結(jié)構(gòu)的設(shè)計，左邊的篩選區(qū)加上右邊的商品列表，篩選區(qū)默認(rèn)主動展開常用而收起低頻篩選項(xiàng)。篩選項(xiàng)較多情形下操作效率較高，但占據(jù)空間大同時影響整體視覺效果。
而獨(dú)立站篩選區(qū)有兩種設(shè)計：
對于商品卡片，平臺和獨(dú)立站都采用了上圖下文，適用于圖片為主其他信息為輔的卡片，在保持展示卡片個數(shù)的同時瀏覽效率較高。而從細(xì)節(jié)上來看，平臺會有較多信息來強(qiáng)調(diào)信任感，因?yàn)槠脚_本身商品都由第三方商家提供，所以得給予用戶足夠信任。而獨(dú)立站之所以不強(qiáng)調(diào)，因?yàn)樗ㄟ^品牌建設(shè)來給予用戶信任感，所以獨(dú)立站放大圖片面積，縮小信任相關(guān)文字信息。獨(dú)立站另一個特征在于，條目列表頁就有較多轉(zhuǎn)化入口，基本可以直接加入購物車/詳情，來最終縮短用戶的決策路徑。
獨(dú)立站和平臺商詳頁最大區(qū)別在于首屏的信息結(jié)構(gòu)，獨(dú)立站分為兩塊：圖片+信息，給圖片本身留出了較大展示區(qū)，而信息聚焦于最核心的款式和價格，轉(zhuǎn)化區(qū)域吸底目的為了強(qiáng)化轉(zhuǎn)化率+占用過少空間。然后平臺首屏分為三塊，將轉(zhuǎn)化區(qū)置于頁面的右方來強(qiáng)化用戶首屏下的轉(zhuǎn)化率，缺點(diǎn)在于用戶下滑到頁面下方時無法進(jìn)行轉(zhuǎn)化操作。有的平臺會將右邊轉(zhuǎn)化區(qū)懸浮，缺點(diǎn)在于會壓縮下方的商品詳細(xì)信息區(qū)。
平臺有兩個常見的轉(zhuǎn)化操作：購物車和購買，而越來越多的獨(dú)立站開始用心愿單的功能來替代原來的購買操作，其中心愿單可直接在商品條目頁添加。我們推測主要目的在于降低用戶決策成本，促進(jìn)更多轉(zhuǎn)化。接下來主要從心愿單，購物車，付款頁來進(jìn)行分析。
基于我們的設(shè)計經(jīng)驗(yàn)，網(wǎng)站的視覺設(shè)計一般有三個對應(yīng)的難點(diǎn)：品牌—如何突出網(wǎng)站品牌特色，形成差異化；節(jié)奏—如何合理排列不同視覺元素，形成視覺動線和層級；創(chuàng)新—如何突破簡單的頁面框架限制。那下文就將基于這三點(diǎn)來分析：
這方面獨(dú)立站和平臺的差異性并不大，都是基于自身的logo品牌，提取出對應(yīng)的基本型、色彩以及感覺。然后將其運(yùn)用到網(wǎng)站設(shè)計上，比如運(yùn)營類的icon，插圖，banner以及頁面組件類如按鈕，標(biāo)簽和搜索框等。獨(dú)立站對比下延伸場景更為豐富，因?yàn)檫\(yùn)營圖都是自己配置，所以把顏色氛圍以及形狀都融入其中，形成更突出的品牌感。
右邊是獨(dú)立站，可以看到視覺動線會從頂部banner區(qū)開始，從頁面中間往下，到了后面部分才開始從左到右。從視覺層次來看，它延長頂部banner區(qū)的視覺重點(diǎn)，在首屏以下位置才開始弱化內(nèi)容。而獨(dú)立站下方內(nèi)容也基于其多元的內(nèi)容載體來采用不同的排版方式，豐富整體層次。目的在于在首屏強(qiáng)化對于用戶的視覺吸引力，保持用戶高度的專注。
第三部分本文將基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享獨(dú)立站設(shè)計避坑點(diǎn)。出海易是去年百度B2B下面孵化新業(yè)務(wù)，它致力于幫助企業(yè)一站式出海，目前在4月已經(jīng)推出出海易SAAS產(chǎn)品并正式售賣。基于我們目前設(shè)計經(jīng)驗(yàn)和思考，如下圖獨(dú)立站設(shè)計有七類問題需要注意。而接下來將從中選出信息缺失、圖片質(zhì)量、移動端體驗(yàn)、國內(nèi)外體驗(yàn)差異這四類我們在出海易業(yè)務(wù)實(shí)踐中完整體現(xiàn)的問題來分析。
之前提到過，獨(dú)立站相比平臺一大特色就是信息豐富且多元。但作為服務(wù)商，實(shí)際會接觸到不少初次嘗試出海的中小企業(yè)，這些商家由于自身經(jīng)驗(yàn)不足，提供的信息和物料出現(xiàn)缺失現(xiàn)象。那作為設(shè)計師面對這樣的情形，應(yīng)該如何設(shè)計以補(bǔ)救呢？
獨(dú)立站一大亮點(diǎn)在于高質(zhì)量商品圖片，作為設(shè)計師當(dāng)然會設(shè)想商家能提供下圖左邊的圖片。但放到實(shí)際場景下商家提供的圖片質(zhì)量和效果都不可控，往往是提供的圖片右邊這樣。
所以很多商家提供的圖片質(zhì)量很難滿足現(xiàn)有獨(dú)立站對于圖片的要求，因此從設(shè)計側(cè)通過以下三個設(shè)計策略來進(jìn)行補(bǔ)救：
設(shè)計正方形容器，所有圖片都會自動縮放到容器區(qū)域下，來保證不同圖片尺寸下整體視覺上的一致性。
對于商品卡片會有多種處理方法，樣式1直接給圖片固定底色，來形成卡片間的間隔。而樣式2和3都采用透明背景色，卡片通過較大的間隔來進(jìn)行整體的區(qū)分。
樣式1這樣通過固定底色的模式對于圖片本身要求過高。而像樣式2和3只通過間距區(qū)分會帶來問題，實(shí)際下的商品圖片有的有底，有的沒底，容易產(chǎn)生不一致的場景。因此最后實(shí)際設(shè)計樣式直接給了整體背景底色，然后用白色的卡片來區(qū)分商品，同時縮小了圖片所占的面積來避免圖片質(zhì)量差的影響。
SAAS后臺會設(shè)計對應(yīng)的尺寸提示，在用戶編輯上傳圖片前，頁面會有對應(yīng)默認(rèn)圖來暗示用戶合理的圖片樣式，給到商家配色和尺寸參考。
國外PC還是用戶主要購物方式，因此獨(dú)立站設(shè)計以PC為主。但隨著國外移動互聯(lián)網(wǎng)的發(fā)展，移動端也成了商家必須要布局的部分。無論對于設(shè)計師還是開發(fā)，重新設(shè)計開發(fā)并維護(hù)PC和移動兩套成本都巨大，因此自適應(yīng)成了這個階段下較優(yōu)選擇。下面將會分享下自適應(yīng)設(shè)計下的一些細(xì)節(jié)。
因?yàn)楠?dú)立站針對海外用戶，所以和國內(nèi)電商設(shè)計相比有兩個問題需要注意：1.不同國家下語言差異會導(dǎo)致視覺差異 2.不同國家間用戶在操作習(xí)慣本身存在差異。
4.結(jié)語
隨著全球電商的迅速發(fā)展和出海熱潮的加劇，獨(dú)立站會逐漸成為出海商家國外品牌推廣、營銷、客戶關(guān)系維護(hù)的重要抓手，同時也會給更多具有特色和渴望創(chuàng)新的設(shè)計師們，更廣闊展現(xiàn)自身才華的空間和機(jī)會。乘風(fēng)潮頭立，啟航正當(dāng)時，獨(dú)立站期待你的加入。
作者：百度MEUX 來源：站酷
藍(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.bouu.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è)計
完善信息對于產(chǎn)品來說是提升體驗(yàn)的關(guān)鍵，一些產(chǎn)品在初始狀態(tài)會引導(dǎo)用戶去完善，比如昵稱、頭像、性別、年齡等基礎(chǔ)信息的采集。如何提高用戶的設(shè)置興趣，降低完善信息的排斥感，需要設(shè)計師進(jìn)行反復(fù)推敲。
最近在體驗(yàn) FLAG APP 的時候，在性別選擇界面設(shè)計上區(qū)別于以往體驗(yàn)過的產(chǎn)品，將性別的可視化進(jìn)行了更為情感化的強(qiáng)化。出色的設(shè)計讓用戶眼前一亮，精美的插畫提高了整體設(shè)計的感官體驗(yàn)。該案例提供了性別選擇差異化的表現(xiàn)，是提高常規(guī)信息界面設(shè)計視覺感的不錯思路。
二、情感化的用戶等級設(shè)計
用戶等級是增加黏性的關(guān)鍵，也能通過等級帶給會員更多的增值服務(wù)，激發(fā)用戶的參與度。
在使用海馬體照相館 APP 的時候，個人中心在頂部視覺區(qū)域會直接顯示用戶等級，配合情感化的人物插畫特別突出。通過左右滑動可以查看不同的等級，等級名稱和對應(yīng)的人物形象插畫也會針對性的設(shè)計，不僅強(qiáng)化了用戶體驗(yàn)，不錯的視覺感也能吸引用戶的關(guān)注度。
三、精美的插畫助你釋放壓力
插畫在產(chǎn)品設(shè)計中的曝光度越來越高，風(fēng)格多樣化直接影響產(chǎn)品風(fēng)格，也能增強(qiáng)情感化體驗(yàn)。全靠插畫撐起整個產(chǎn)品的案例是什么樣子呢？最近發(fā)現(xiàn)了這么一款產(chǎn)品。
Wild Journey 是一款解壓的白噪音 APP，內(nèi)置了許多大自然的聲音，讓用戶體驗(yàn)到荒野的空曠、森林的靜謐、大海的波濤。整個設(shè)計全是精美的矢量插畫作品，帶給用戶賞心悅目的感官體驗(yàn)。來這里釋放自己的壓力，放松身心。
四、趨勢化的引導(dǎo)頁設(shè)計
引導(dǎo)頁設(shè)計是最容易呈現(xiàn)風(fēng)格趨勢的，利于設(shè)計師進(jìn)行創(chuàng)意發(fā)揮。無論是想要發(fā)揮插畫技能、建模能力或者動效表現(xiàn)，引導(dǎo)頁都能提供發(fā)揮的場景。
最近在體驗(yàn)嘀嗒出行的時候，發(fā)現(xiàn)全新升級的 9.0 版本，引導(dǎo)頁設(shè)計風(fēng)格也是讓人耳目一新。利用了趨勢感的插畫風(fēng)格和視覺表現(xiàn)風(fēng)格（玻璃質(zhì)感風(fēng)）相結(jié)合，畫面清新自然，帶給用戶非常好的視覺感官體驗(yàn)。
五、可視化表現(xiàn)提高用戶理解度
可視化設(shè)計逐步成為信息傳遞的趨勢，利用圖形化的形式更利于用戶理解，相較于枯燥的文字化呈現(xiàn)來說閱讀理解的效率更高。
Keep 在產(chǎn)品設(shè)計的時候，有效的將一些數(shù)據(jù)的表達(dá)和內(nèi)容的普及以可視化的圖形進(jìn)行展示，不僅提高了界面設(shè)計的感官體驗(yàn)，也能有利于用戶對于內(nèi)容的理解。提高界面設(shè)計的視覺感也能讓用戶更為關(guān)注，圖形可視化已經(jīng)逐步成為產(chǎn)品設(shè)計解決方案中的趨勢。
六、個性化的主題皮膚設(shè)置
個性化的定制設(shè)計可以讓用戶感受到產(chǎn)品的溫度，根據(jù)自己的喜好選擇主題化呈現(xiàn)。成熟的產(chǎn)品都會在個性化設(shè)置上面提升體驗(yàn)度，特別是在主題皮膚的定制上面，提供了更多的風(fēng)格讓用戶選擇。
Keep 在將主題皮膚設(shè)置定義為選擇運(yùn)動伙伴，不僅提供了不同的 IP 形象和主題皮膚，俏皮可愛的動態(tài)延展也傳遞了情感化的體驗(yàn)。多種風(fēng)格的設(shè)計滿足了不同用戶的喜好需求，還為不同的主題定義了擬人化的角色和身份，視覺感和體驗(yàn)度都非常的到位。
七、提高參與度的簽到設(shè)計
簽到設(shè)計可以提高用戶黏性，讓用戶在參與的同時獲得禮品或者增值服務(wù)，簽到也成為了眾多產(chǎn)品的標(biāo)配功能。對于設(shè)計師來說，如何通過設(shè)計提高用戶簽到的參與度，是需要不斷探索的設(shè)計思考。
最近在使用天天跳繩時，發(fā)現(xiàn)其簽到設(shè)計的視覺表達(dá)直觀醒目，大大的提高了用戶對于簽到的理解和參與度。將簽到后解鎖的勛章、經(jīng)驗(yàn)、裝扮和禮品等直觀的結(jié)合到簽到界面中，不僅風(fēng)格協(xié)調(diào)統(tǒng)一，視覺風(fēng)格也符合運(yùn)動場景感?？吹竭@個界面成功吸引了我的簽到欲望，簽到操作簡單，整體的體驗(yàn)度都做得非常不錯。
八、情感化的個人中心設(shè)計
個人中心作為主界面之一來說，設(shè)計的體驗(yàn)度是至關(guān)重要的。為了滿足用戶的喜好需求，個性化的設(shè)置也是層出不窮，功能布局、頭像裝扮、主題皮膚等都呈現(xiàn)出了眾多的優(yōu)秀設(shè)計方案。
天天跳繩是個人經(jīng)常使用的一款運(yùn)動輔助工具，記錄小孩跳繩也是非常便利的工具。個人中心頂部視覺區(qū)域的人偶形象增強(qiáng)了界面設(shè)計的感官度，人偶的動態(tài)體現(xiàn)出用戶的運(yùn)動狀態(tài)，可以進(jìn)行自定義的設(shè)置來滿足自己的情感表達(dá)?？梢栽O(shè)置人偶的裝扮、旋轉(zhuǎn)角度、動作等，人性化的功能設(shè)置提高了自定義的體驗(yàn)度，強(qiáng)化了用戶情感化的使用體驗(yàn)。
九、結(jié)果導(dǎo)向的設(shè)計表達(dá)
以圖標(biāo)/圖形/圖片等設(shè)計輔助信息的傳遞很常見，通常都是根據(jù)信息的文案來進(jìn)行設(shè)計表達(dá)。如果放棄本身文案信息傳遞的意思，選擇結(jié)果導(dǎo)向的設(shè)計表達(dá)，也能帶來不一樣的設(shè)計反思。
最近在體驗(yàn) One More 的時候，動作庫的列表設(shè)計中便選擇了結(jié)果導(dǎo)向的思路。如果是常規(guī)的設(shè)計解決方案，會根據(jù)列表主題內(nèi)容來設(shè)計配圖，這樣也能輔助對于內(nèi)容的理解。但是 One More 選擇了完成該項(xiàng)目得到的鍛煉部位為設(shè)計思路，雖然不能輔助項(xiàng)目信息的傳遞，但是這個設(shè)計表達(dá)更能讓用戶理解完成的結(jié)果，參與度也能得到提升?？梢暬脑O(shè)計替代了文字的表達(dá)，提高了用戶對項(xiàng)目的理解度，進(jìn)而轉(zhuǎn)化更高的參與度。
十、新穎的輪播 Banner 設(shè)計
輪播 Banner 圖對于設(shè)計發(fā)揮來說，除了在本身的創(chuàng)意和視覺表達(dá)層面以外，產(chǎn)品結(jié)構(gòu)和功能層面也是設(shè)計師需要探索的方向。
極有家 APP 在產(chǎn)品的體驗(yàn)設(shè)計層面做得非常不錯，針對輪播 Banner 位置也是做了新穎的創(chuàng)新。在 Banner 圖上設(shè)計了不同商品的引導(dǎo)標(biāo)簽，方便用戶在感受整體家裝效果圖的同時可以選擇場景中的商品，也能對場景中的商品價值有個清晰的認(rèn)知。輪播的形式結(jié)合了待輪播圖的預(yù)覽和風(fēng)格名稱，增加了待輪播圖的曝光度，整個樣式表達(dá)上面視覺感也非常不錯，是一個比較新穎的設(shè)計解決方案。
作者：黑馬青年 來源：站酷
藍(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.bouu.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è)計多種多樣，為了簡化布局思維，我們通常給界面添加三個方向上的軸-X、Y、Z。X軸指水平方向上的軸線，Y軸指豎直方向上的軸線，以及Z軸指在三維空間中垂直于視窗平面的軸線。當(dāng)設(shè)計B端界面時，讓元素沿著這三個軸進(jìn)行布局，既能理清我們的設(shè)計思路，頁面的元素也能展示得更有邏輯。
本文圍繞這三個軸，來看看在B端界面的三維空間里，都有哪些設(shè)計規(guī)律。
一、X軸的布局與適應(yīng)
B端界面在PC視窗下展示，范圍更大，如常見的分辨率尺寸有1280x1024、1440x900、1920x1080等，且瀏覽器還支持動態(tài)拖拽改變視窗寬度。所以B端界面在X軸上應(yīng)該更注重內(nèi)容的延展和適配，合理利用橫向增長的空間。根據(jù)這一特點(diǎn)，在這一部分中，我們分業(yè)務(wù)場景來探討都有哪些典型布局，并針對每一種布局給出合適的適配方式。
B端典型的業(yè)務(wù)場景，可大致分為表格、圖表、表單、卡片、文字詳情五大類頁面。這幾類界面在X軸上排列的方式為單欄型、雙欄型、多欄型。如果有側(cè)導(dǎo)航，則在頁面最左側(cè)增加側(cè)導(dǎo)航即可，內(nèi)容區(qū)的布局不受影響。
1.單欄型
表格、圖表，這類需要較大展示空間的場景，一般一個頁面只有一欄，不再在橫向空間進(jìn)行切割。當(dāng)視窗橫向拉伸時，也為了預(yù)覽更多的內(nèi)容，表格和圖表進(jìn)行橫向拉伸，保持撐滿視窗的狀態(tài)。
2.雙欄型
表單、文字詳情類的頁面，采用雙欄結(jié)構(gòu)的概率較大。因?yàn)楸韱雾摮吮韱伪旧淼膬?nèi)容外，往往還有右側(cè)的輔助說明面板，或者是預(yù)覽面板。文字詳情頁的右側(cè)也經(jīng)常出現(xiàn)其它閱讀內(nèi)容的推薦列表。當(dāng)這兩類頁面視窗在橫向拉伸時，適應(yīng)的方式通常有兩種。
1）主模塊寬度拉伸，始終撐滿視窗，副模塊寬度固定。如果主模塊每行內(nèi)容都比較多，推薦使用這種方式，能更大化地瀏覽主模塊的內(nèi)容，減少不必要的換行。但缺點(diǎn)是，由于內(nèi)容本身如表單項(xiàng)、詳情文字等在X軸上占用的空間不多，他們所在的模塊橫向拉伸后，會出現(xiàn)很多留白。
2）各模塊保持寬度固定并居中展示，不跟隨視窗伸縮而變化。如果主模塊每行內(nèi)容不多，又需要頻繁的左右對照，推薦使用這種方式。
3.多欄型
多欄型頁面一般用于數(shù)據(jù)看板、媒體卡片(視頻/圖片)的展示。因?yàn)檫@類業(yè)務(wù)場景，卡片數(shù)量多，無法簡單地將頁面進(jìn)行區(qū)塊的分割，所以以卡片為單元來填充頁面。當(dāng)視窗橫向拉伸時，這里也會出現(xiàn)2種適應(yīng)的方式。
1）數(shù)據(jù)看板類頁面，每個卡片等比拉伸（也可僅橫向拉伸），列數(shù)不增加，讓圖表能展示地更清晰。
2）媒體卡類頁面，卡片需要設(shè)定一個最佳展示的寬度如w，當(dāng)視窗拉寬時，卡片等比放大。當(dāng)頁面拉寬到能增加一列寬度為w的卡片時，所有卡片寬度都恢復(fù)到w，增加一列。
上述說了這么多適配的規(guī)則，當(dāng)然我們也可以給視窗設(shè)定一個統(tǒng)一的適配上限，避免當(dāng)視窗非常寬時，頁面的元素過于左右分離，反而不方便瀏覽。比如我們可以設(shè)置當(dāng)視窗寬度＞1920px后，頁面元素就不再跟隨撐滿，達(dá)到內(nèi)容區(qū)寬度上限值，居中展示在界面中。
二、Y軸的空間利用
B端界面，面對復(fù)雜的信息，我們往往會面對兩類問題，如何承載大量的信息，如何區(qū)分強(qiáng)弱主次。這就涉及到頁面Y軸的空間利用了。這里我們提供4個小辦法來解決上面的問題。當(dāng)出現(xiàn)大量信息時，應(yīng)該注重Y軸空間的擴(kuò)展，合理搭配翻頁、加載等邏輯。當(dāng)希望對頁面元素區(qū)分強(qiáng)弱時，可以搭配滾動吸頂、局部折疊等交互，有序展示更多信息。
1.如何承載大量信息
1）替換型對于表格類頁面，為了方便快速查找所需信息，采用分頁器的方式展示更多的數(shù)據(jù)內(nèi)容，即把當(dāng)前頁內(nèi)容做替換。即頁面Y軸的高度是固定的，僅做內(nèi)容的變更。
2）向下延展型
對于瀑布流類頁面，由于數(shù)據(jù)量大，且沒有快速定位的訴求，使用無限加載的方式，向下加載更多的數(shù)據(jù)，這種類型的頁面Y軸可無限延展。
2.如何區(qū)分強(qiáng)弱主次
1）強(qiáng)-滾動吸頂當(dāng)頁面滾動到某個位置，需要去強(qiáng)調(diào)一些導(dǎo)航性質(zhì)的內(nèi)容時，我們可以使用滾動吸頂?shù)慕换?，即?dāng)把這個元素（如標(biāo)題）滾動至當(dāng)前視窗的頂部時，發(fā)生吸頂事件，始終停留在頁面中，該元素所引領(lǐng)的模塊在其下方滾動瀏覽。當(dāng)把這個模塊滾動完，吸頂交互失效。這樣即能臨時性地強(qiáng)調(diào)某些內(nèi)容，還不會影響其它模塊在Y軸上的展示。
2）弱-局部展開對于表單類頁面，若在某個選項(xiàng)下還存在二級內(nèi)容，則在初始展示時，優(yōu)先突出主選項(xiàng)本身，當(dāng)選中后再展開二級內(nèi)容。這樣即能節(jié)省首屏空間，也能順應(yīng)使用者的學(xué)習(xí)、使用心智，在合適的時機(jī)展示細(xì)節(jié)內(nèi)容。
三、Z軸的疊加順序
說完X軸、Y軸的布局設(shè)計，我們最后來看看Z軸。這里，我們需要把視角從二維平面轉(zhuǎn)為三維空間，比如吸頂?shù)膶?dǎo)航，菜單浮層，模態(tài)彈窗這些都屬于出現(xiàn)在Z軸上的元素，他們之間可以進(jìn)行層層疊加和嵌套，于是會出現(xiàn)疊加沖突的場景，導(dǎo)致發(fā)生錯誤的遮擋現(xiàn)象。所以Z軸設(shè)計的關(guān)鍵點(diǎn)在于不同元素的疊加排序設(shè)計。那么怎樣才能有一個貫穿全局的合理排序，讓元素們能乖乖排在自己的隊(duì)列中呢？此處，我們將頁面的所有可能出現(xiàn)的元素按照Z軸的特點(diǎn)歸類到三大區(qū)間里。每個區(qū)間內(nèi)給出相應(yīng)元素的排序順序指導(dǎo)，并配合動態(tài)計算的邏輯，Z軸上的元素就能整齊地疊加起來啦。
1.基礎(chǔ)區(qū)間
a.展示類-頁面中默認(rèn)就存在的、不會對其它元素造成遮擋的元素（表單、表格、文字、按鈕、圖表、圖片等）。
b.固定類-固定在頁面某處的元素，滑動頁面時會對a的元素產(chǎn)生遮擋（如吸頂導(dǎo)航、固定表頭/列、錨點(diǎn)、返回頂部按鈕等）。
c.浮層類-由a中的元素觸發(fā)出的、指向該元素的臨時浮層元素。會對a以及固定元素產(chǎn)生遮擋。臨時浮層之間的z軸層級遵守觸發(fā)的時間先后順序，若臨時浮層可以同時存在在界面中，則后觸發(fā)的層級更高（下拉浮層、氣泡）。
2.模態(tài)區(qū)間
d.模態(tài)層-由基礎(chǔ)區(qū)間的元素觸發(fā)的，覆蓋整個視窗的模態(tài)元素，當(dāng)該元素出現(xiàn)后，至于基礎(chǔ)區(qū)間所有元素層級之上，基礎(chǔ)區(qū)間的所有功能無法交互(抽屜、對話框和全屏預(yù)覽等).
e.臨時浮層-在模態(tài)元素上出現(xiàn)的臨時浮層，計算高度時，可把d層想象成基礎(chǔ)區(qū)間的c層（下拉浮層、氣泡等）.
f.第二層模態(tài)層-在d出現(xiàn)之后出現(xiàn)的覆蓋整個視窗的模態(tài)元素。不特指第二層，也可以是第三、或更多。
模態(tài)區(qū)間內(nèi)，多個模態(tài)層可進(jìn)行疊加（即上文的f），疊加時一樣需要遵守觸發(fā)時間的先后順序，后觸發(fā)的層級更高出現(xiàn)在更上層。但是我們也應(yīng)注意，模態(tài)層不能疊加太多，會導(dǎo)致當(dāng)前頁面覆蓋過多內(nèi)容，一般最多用到兩層模態(tài)層就能滿足大部分場景了。
3.頂層區(qū)間
g.全局層-全局的、不被模態(tài)元素遮擋的元素?？梢猿ｑv在頁面中，也可臨時出現(xiàn)。
h.臨時層-由g觸發(fā)出的臨時浮層
max.最高層-始終動態(tài)高于當(dāng)前頁面所有層的元素（比較典型的是Toast組件）。
四、寫在最后
到這里，我們就淺談完關(guān)于B端界面的X、Y、Z軸上的設(shè)計特點(diǎn)了，雖然是一些高度抽象的內(nèi)容，真正按照業(yè)務(wù)需求執(zhí)行設(shè)計的時候，遇到的界面一定比我們這里談?wù)摰母鼜?fù)雜，但是只要我們清楚底層的空間布局、適應(yīng)方式、擴(kuò)展手段和疊加邏輯，再復(fù)雜的界面無非就是規(guī)則的嵌套，希望這篇文章能帶給大家一些小小的啟發(fā)。
作者：百度MEUX 來源：站酷
藍(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.bouu.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è)計公司
百度酒店以比價為核心特色，經(jīng)歷多次設(shè)計探索，初步建立了用戶認(rèn)知。
設(shè)計中通過“核心流程分析-明確用戶關(guān)注信息-探索比價價值”的方式去制定設(shè)計策略，并在方案探索與落地階段，通過思路發(fā)散、多輪數(shù)據(jù)驗(yàn)證與方案迭代，驗(yàn)證了“氛圍感知強(qiáng)化、價值信息傳達(dá)、聚合比價”等設(shè)計手段的作用，希望給服務(wù)和電商等比價類產(chǎn)品的設(shè)計師一些啟發(fā)和參考。
一、項(xiàng)目背景
酒店住宿在線預(yù)訂市場中，各個平臺基于用戶權(quán)益、運(yùn)營補(bǔ)貼等差異進(jìn)行著激烈的價格競爭，導(dǎo)致行業(yè)存在天然的價差。而在我們進(jìn)行的一次酒店預(yù)訂訪談中發(fā)現(xiàn)，超過半數(shù)的用戶在預(yù)訂酒店時會進(jìn)行比價，而比價的用戶中多數(shù)會使用2個以上的酒店APP。因此，在市場存在價差且用戶有比價訴求的背景下，百度酒店通過接入多家供給及會員低價，旨在建立酒店聚合比價平臺，為用戶提供性價比最高的酒店搜索服務(wù)。
二、設(shè)計策略與落地觸點(diǎn)
1.目標(biāo)和策略制定
在上述背景下，我們與產(chǎn)品側(cè)對齊業(yè)務(wù)目標(biāo)，結(jié)合對用戶訴求的分析，確定了設(shè)計目標(biāo)。
為了達(dá)成設(shè)計目標(biāo)，需要明確比價在酒店預(yù)訂的各個觸點(diǎn)下對用戶的價值是什么，以探索比價如何發(fā)揮作用。下圖列出了酒店預(yù)訂的核心流程、核心模塊及用戶關(guān)注信息，由于用戶在各個環(huán)節(jié)關(guān)注的信息不同，比價所能發(fā)揮的價值也就不同，因此基于比價是否影響用戶進(jìn)行選擇和決策，我們又將核心流程分成服務(wù)報價選擇前、服務(wù)報價選擇時、服務(wù)報價選擇后。
設(shè)計目標(biāo)的實(shí)現(xiàn)也對應(yīng)上述3個環(huán)節(jié)如下圖：
2.明確落地觸點(diǎn)
為了找到一些好的比價概念和價值的傳達(dá)方式，以及提升比價體驗(yàn)的方式，我們進(jìn)行了競品調(diào)研，競品包含酒店、商品等不同行業(yè)，調(diào)研結(jié)論歸納如下：
結(jié)合競品調(diào)研結(jié)論，我們根據(jù)百度酒店的核心流程和觸點(diǎn)進(jìn)行了設(shè)計策略的拆解，建立了策略和落地的映射關(guān)系。
三、方案探索與落地
1.提升感知-讓用戶知道百度酒店可以比價
這一環(huán)節(jié)的設(shè)計目標(biāo)是要讓用戶知道百度酒店可以比價，以吸引用戶在百度酒店完成下單行為，因此清晰、有吸引力的比價元素設(shè)計十分重要?；诟偲氛{(diào)研內(nèi)容，我們進(jìn)行了設(shè)計探索。
1）酒店列表-氛圍感知強(qiáng)化及價值信息傳達(dá)
下圖所示為酒店列表比價設(shè)計的探索過程，最初的方案，為了保證酒店信息的獲取體驗(yàn)，采用了與傳統(tǒng)酒店預(yù)訂平臺采用一致的結(jié)構(gòu)和信息優(yōu)先級，僅結(jié)合圖片區(qū)域和價格做了比價信息的結(jié)合，但這種設(shè)計與傳統(tǒng)酒店預(yù)訂平臺差異很小，比價感知和價值的傳達(dá)效果并不好。因此設(shè)計側(cè)轉(zhuǎn)變思路，在酒店列表中通過更強(qiáng)化的模塊來突出比價的感知，同時結(jié)合“比某平臺低xx”的文案說明比價結(jié)果，傳達(dá)“比價獲得更低價”的感知。
酒店列表覆蓋多個場景，為了建立百度酒店一致的體驗(yàn)和認(rèn)知，我們將列表的設(shè)計覆蓋到了搜索結(jié)果頁和小程序的多個頁面，如圖所示。
2）房型及服務(wù)報價-基于低價推薦去強(qiáng)化比價
房型及服務(wù)報價模塊對應(yīng)酒店精準(zhǔn)需求和酒店詳情頁，與酒店列表思路一致，方案在逐漸與傳統(tǒng)酒店預(yù)訂平臺產(chǎn)生差異化，去強(qiáng)化比價、低價的感知，形成記憶點(diǎn)。
下圖為搜索結(jié)果頁的方案，最初外露了多個房型，以滿足用戶的選擇訴求，但從用戶行為數(shù)據(jù)來看，百度酒店的絕大多數(shù)用戶會選擇酒店的最低價房型及報價，因此我們調(diào)整設(shè)計方案，結(jié)合最低報價，用模塊式的對比方式去強(qiáng)化比價，并通過“低價立省xx”的信息去傳達(dá)低價感知。另外，這一部分的設(shè)計也和聚合比價有所結(jié)合，后面會進(jìn)行詳細(xì)的說明。
詳情頁的主要模塊設(shè)計與搜索結(jié)果頁基本一致，如下圖所示，詳情頁中將最低報價作為低價房型推薦，以建立一致的比價認(rèn)知同時便于用戶快捷預(yù)訂低價。另外，在常規(guī)的報價列表中，為了提升用戶查找報價的效率，相比于最低價房型，采用了弱化的形式。最終方案上線后，數(shù)據(jù)上也取得了正向的效果，報價展現(xiàn)到預(yù)訂點(diǎn)擊的轉(zhuǎn)化得到了提升。
3）“產(chǎn)品縫隙”中的比價概念滲透
“產(chǎn)品縫隙”并不像上述列表模塊那樣感知強(qiáng)烈，設(shè)計的目的是為了進(jìn)一步加深“百度酒店可以比價”的用戶印象。結(jié)合百度酒店的核心頁面，我們重新設(shè)計了酒店列表和房型報價列表的加載態(tài)，利用“多資源方交替動效+文案說明”的方式，構(gòu)建動態(tài)的比價感知，在用戶進(jìn)入頁面或者進(jìn)行篩選等場景時會出現(xiàn)。另外，我們也利用了小程序首頁和詳情頁的頁尾，在閱讀結(jié)束時去傳達(dá)全網(wǎng)比價的概念。
2.建立認(rèn)知-聚合比價模式的構(gòu)建
在競品調(diào)研部分，我們提到了聚合比價模式，百度酒店由于報價復(fù)雜，也適合用這種方式去簡化報價。
如圖所示，常規(guī)酒店預(yù)訂平臺，同一房型（如標(biāo)準(zhǔn)大床房）會存在不同服務(wù)政策（早餐服務(wù)、取消規(guī)則、支付方式）的報價，而在百度酒店中，由于又加入了預(yù)訂平臺的差異，報價會更加復(fù)雜，數(shù)量更多且同質(zhì)化嚴(yán)重，即服務(wù)政策相同，僅預(yù)訂平臺不同的報價多次出現(xiàn)，這就導(dǎo)致了報價列表的查看和選擇效率較低。
聚合比價模式就是要將這些服務(wù)政策相同的報價聚合在一起進(jìn)行比價，以簡化報價列表提升選擇效率，同時在服務(wù)相同的情況下，絕大部分用戶會更傾向于低價，在報價聚合后，可以突出低價以便用戶預(yù)訂。
我們也在探索如何讓聚合比價更簡單，初始方案采用點(diǎn)擊展開的形式，用戶可以保持滑動瀏覽的交互體驗(yàn)，整個過程的交互體驗(yàn)比較流暢，但頁面的層級關(guān)系較為復(fù)雜，用戶認(rèn)知成本高。因此我們又嘗試了調(diào)起面板展示比價詳情，讓用戶聚焦在當(dāng)前報價的對比，并通過模塊式的設(shè)計，清晰羅列了每個平臺的服務(wù)、優(yōu)惠明細(xì)等差異信息，讓信息的對比更高效，同時強(qiáng)化低價平臺，與前面的比價模塊保持認(rèn)知一致。
聚合比價模式下，存在了兩種用戶路徑，如圖所示。用戶可以直接選擇最低價資源方完成預(yù)訂，也可以通過比價詳情彈層，查看針對同一服務(wù)的所有平臺報價，對比平臺的詳細(xì)服務(wù)、優(yōu)惠差異后再選擇預(yù)訂。
這種預(yù)訂模式的目的，一方面在教育用戶建立百度酒店可以比價、可以買到低價的認(rèn)知，另一方面也提升了用戶選擇低價平臺的效率。另外，聚合比價要具有清晰的規(guī)則才能被理解和信任，在比價詳情中，為了進(jìn)一步降低認(rèn)知成本，我們通過標(biāo)題突出了聚合項(xiàng)，并增加了比價說明入口，讓聚合規(guī)則更明確。聚合比價的方案上線后，報價的預(yù)訂點(diǎn)擊到成單轉(zhuǎn)化也得到了提升。
另外，前文提到的精準(zhǔn)需求搜索結(jié)果頁和詳情頁的低價房型推薦也利用了這種模式，不過在比價感知上做了更強(qiáng)化的處理。用戶可以在詳情頁直接點(diǎn)擊各個平臺報價完成預(yù)訂，也可以點(diǎn)擊文字部分查看房型詳情，在頁面底部的比價詳情中完成報價的對比和預(yù)訂。
3.強(qiáng)化記憶-比價價值感的再次強(qiáng)化
填單場景是在預(yù)訂完成后，這個環(huán)節(jié)我們可以將比價的概念和價值再次展示給用戶，以加深用戶對比價的認(rèn)知。這里的設(shè)計手段與“提升感知”階段類似，如圖所示為一些方案探索，在用戶選擇低價平臺預(yù)訂，點(diǎn)擊跳轉(zhuǎn)至填單頁后，我們會強(qiáng)化用戶“預(yù)訂到最低價”以及“為用戶節(jié)省xx元”的感知。另外，在用戶提交訂單時，會存在一定的加載時間，我們也利用了這里的“產(chǎn)品縫隙”，結(jié)合加載態(tài)繼續(xù)傳遞低價、省錢的認(rèn)知。
四、結(jié)語
回顧百度酒店的比價設(shè)計過程，我們以比價及低價感知傳達(dá)、高效預(yù)訂低價為設(shè)計目標(biāo)，基于百度酒店的核心預(yù)訂流程，探索比價在各個環(huán)節(jié)如何發(fā)揮作用，進(jìn)而將設(shè)計目標(biāo)的實(shí)現(xiàn)劃分為了“提升感知、建立認(rèn)知、強(qiáng)化記憶”三個階段，并為業(yè)務(wù)帶來轉(zhuǎn)化提升。
提升感知過程結(jié)合流程中的主要模塊，通過模塊式對比形式、傳達(dá)比價價值感、基于低價推薦強(qiáng)化比價、以及利用“產(chǎn)品縫隙”等手段，去吸引用戶了解和使用比價；建立認(rèn)知過程利用“聚合比價”模式去精簡報價，同時結(jié)合對低價報價、低價平臺的強(qiáng)化，讓用戶更便捷的預(yù)訂低價；最后強(qiáng)化記憶的環(huán)節(jié)，我們進(jìn)行了一些方案嘗試，再次強(qiáng)調(diào)比價的價值。另外，為了建立一致的比價認(rèn)知，整體的設(shè)計中也堅持一致性的原則。百度酒店的比價設(shè)計也在不斷地嘗試和優(yōu)化中，希望能給用戶創(chuàng)造更好的使用體驗(yàn)。
作者：百度MEUX 來源：站酷
藍(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.bouu.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.bouu.cn
<track id="dcnnt"><nobr id="dcnnt"></nobr></track>