從紙質(zhì)閱讀到屏幕閱讀，通過理解用戶從紙質(zhì)到屏幕閱讀行為的轉(zhuǎn)變，我們從傳統(tǒng)中文排印經(jīng)驗(yàn)中吸取對(duì)字體、間距、標(biāo)點(diǎn)的處理方式，跨越平面與UI不同終端的設(shè)計(jì)規(guī)范和實(shí)現(xiàn)手段。在UI設(shè)計(jì)的語境中調(diào)整中文排版策略，優(yōu)化手機(jī)百度圖文閱讀場(chǎng)景設(shè)計(jì)，提升手百用戶的閱讀體驗(yàn)。

· 屏幕閱讀與紙質(zhì)閱讀不同

人的閱讀習(xí)慣會(huì)根據(jù)閱讀環(huán)境而改變，包括文本的書寫格式、文本的媒介、語言符號(hào)等?；谄聊坏拈喿x行為，往往表現(xiàn)了如下特征：很少人會(huì)一字一句閱讀頁面，更多的是在瀏覽、關(guān)鍵詞確認(rèn)、非線性閱讀、有選擇性的閱讀。

· 設(shè)計(jì)差異點(diǎn)

UI設(shè)計(jì)與書籍排版不同之處在于：

第一、屏幕上可以實(shí)現(xiàn)更多的交互功能，增強(qiáng)了閱讀的沉浸感和交互體驗(yàn)。

第二、UI設(shè)計(jì)不可控因素更多。平面排版紙張和內(nèi)容固定可控，可以保證設(shè)計(jì)的精準(zhǔn)展示。但在UI設(shè)計(jì)中，想讓頁面達(dá)到和原本設(shè)計(jì)一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內(nèi)容的靈活可變，都讓最后的展示效果多了很多不可預(yù)期。這就是為什么會(huì)有很多排版優(yōu)秀的印刷品設(shè)計(jì)，但UI中優(yōu)秀的排版設(shè)計(jì)卻特別少。

因此，針對(duì)屏幕閱讀的設(shè)計(jì)要注意：不能照搬文字排版規(guī)則，更要充分考慮屏幕與內(nèi)容的靈活可變，確保設(shè)計(jì)方案可實(shí)際落地。

· 明確設(shè)計(jì)目標(biāo)

本次設(shè)計(jì)改版主要針對(duì)手機(jī)百度——圖文落地頁部分，希望通過優(yōu)化文字展現(xiàn)、內(nèi)容排版提升閱讀體驗(yàn)。

CEA閱讀體驗(yàn)?zāi)Ｐ蛯⒂脩舻拈喿x體驗(yàn)分為舒適、效率、吸引三個(gè)緯度。

舒適（Comfort)：視覺負(fù)擔(dān)低，信息適量，看著不累、沒有信息壓迫感

效率（Efficiency）：重點(diǎn)信息突出，直觀性強(qiáng)，容易識(shí)別

吸引（Attraction）：頁面設(shè)計(jì)美觀，有吸引力

基于此模型，此次優(yōu)化方案中我們確定的設(shè)計(jì)目標(biāo)是：優(yōu)化內(nèi)容可讀性；提升閱讀效率；提升頁面美觀度。

· 優(yōu)化內(nèi)容可讀性

· 選擇屏顯友好字體

屏顯字體與印刷用字體最大的不同在于，屏顯字體受限于分辨率，無法做到印刷字體那么多細(xì)節(jié)的設(shè)計(jì)。目前屏顯漢字的設(shè)計(jì)方式一般是：

1、從字體的結(jié)構(gòu)入手，擴(kuò)大中宮的設(shè)計(jì)，字形設(shè)計(jì)看起來舒適放松，提升辨識(shí)度，相較于中宮內(nèi)縮的字體，呈現(xiàn)現(xiàn)代的明亮感。

2、字形簡(jiǎn)潔，平直少細(xì)節(jié)的筆畫有助于提高字體本身的辨識(shí)。

遍歷手百用戶常用手機(jī)的默認(rèn)字體，系統(tǒng)默認(rèn)字體都是使用屏顯友好字體。

· 選擇字重更全的字體

與紙質(zhì)閱讀相比，用戶在在屏幕閱讀中，會(huì)經(jīng)常進(jìn)行掃讀、關(guān)鍵詞確認(rèn)，而不是像在紙質(zhì)書上一字一句的讀。

目前我們提供給作者的能夠做重點(diǎn)信息區(qū)別的方式包括：文字加粗、風(fēng)格化二級(jí)標(biāo)題。但我們發(fā)現(xiàn)目前在一些安卓手機(jī)上，一些字體在增加字重后出現(xiàn)沾粘情況，不能保證可讀性。

字重，即字形的重量，字重的等級(jí)用來標(biāo)明同一字體家族不同粗細(xì)筆畫的字形。

但通常一個(gè)特定的字體家族僅會(huì)包含少數(shù)的可用重量。若一個(gè)指定的字重不存在時(shí)，CSS會(huì)就近匹配其他字重：較重的字重映射到更重的重量、較輕的字重會(huì)映射到更輕的重量。

目前落地頁代碼中字體的設(shè)置，安卓使用的第一順位的字體字重僅2檔字重，所以在小字場(chǎng)景和分辨率較低的安卓機(jī)型上，會(huì)匹配到更粗的字重，出現(xiàn)文字沾粘的情況。

我們調(diào)整了font-family中的字體適配順位，在安卓端優(yōu)先適配字重更全的字體，保證安卓端加粗字體的展現(xiàn)，優(yōu)化內(nèi)容可讀性。

· 提升閱讀效率

· 優(yōu)化字間距和行間距

閱讀場(chǎng)景下，文字的間距是影響閱讀效率的關(guān)鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。

根據(jù)當(dāng)前現(xiàn)狀，再結(jié)合行業(yè)設(shè)計(jì)經(jīng)驗(yàn)，我們選擇了字號(hào)與行高倍數(shù)組合的一系列方案，進(jìn)行了眼動(dòng)實(shí)驗(yàn)和用戶訪談，確定用戶可接受的行間距為1.50-1.70的范圍，再通過對(duì)比不同機(jī)型下的屏幕顯示效果，以及不同檔位字體顯示效果、閱讀效率，最后確定了圖文落地頁正文文字在當(dāng)前方案基礎(chǔ)上縮字間距為0，擴(kuò)大行間距1.70倍行號(hào)的設(shè)計(jì)方案。

· 段落間距適配字號(hào)

圖文落地頁的定位是長(zhǎng)文閱讀場(chǎng)景，作者發(fā)文長(zhǎng)度的中位數(shù)是600-700字的范圍，以目前用戶使用量最多的iPhone11舉例，600-700字的文章長(zhǎng)度為2屏（純文字，無圖情況）。

對(duì)于長(zhǎng)文閱讀，用戶往往是缺乏耐心的。為讓用戶減少對(duì)長(zhǎng)文的“畏懼感”，調(diào)整文章段落間距，一篇長(zhǎng)文通過合理的分段，成為一段一段的短文，每結(jié)束一段短文，用戶都有機(jī)會(huì)進(jìn)行休息并獲得滿足感。

出于屏效考慮，當(dāng)前圖文落地頁段落間距不論用戶使用哪一檔字號(hào)，都為一個(gè)固定值。所以在調(diào)大字號(hào)的模式下，段落間距小，用戶難以區(qū)分；在小字模式下，段落間距又太大，降低了屏效。

優(yōu)化段落間距的設(shè)定，段落間距應(yīng)隨著字號(hào)的變化對(duì)應(yīng)做出變大或變小的調(diào)整。調(diào)整后的最大字號(hào)與最小字號(hào)段落間距都更合適，閱讀節(jié)奏更好。

· 頁面美觀，提升吸引力

書籍排版中“微觀字體排印”中一直都關(guān)注字距、行距、標(biāo)點(diǎn)符號(hào)等排版調(diào)整，這些排印規(guī)則大部分源于文字本身的規(guī)律，排版風(fēng)格和規(guī)范，并不隨著設(shè)計(jì)潮流而輕易改變，是需要在所有媒介上都應(yīng)遵循的規(guī)則。但是現(xiàn)在的UI排版中幾乎都沒有遵循，這也是我們經(jīng)常覺得UI頁面上的中文排版看起來不精致的原因。

通過學(xué)習(xí)W3C《中文排版需求》《中華人民共和國(guó)國(guó)家標(biāo)準(zhǔn)-標(biāo)點(diǎn)符號(hào)的用法》等中文排版規(guī)范文檔中對(duì)標(biāo)點(diǎn)等微觀排版的調(diào)整思路，并結(jié)合UI場(chǎng)景落地，希望從細(xì)節(jié)處提升頁面美觀度和吸引力。

· 優(yōu)化標(biāo)題，突出內(nèi)容

在標(biāo)點(diǎn)使用規(guī)范中對(duì)標(biāo)題中標(biāo)點(diǎn)符號(hào)的使用有嚴(yán)格的定義：標(biāo)題的作用是概括表明文章內(nèi)容，一般標(biāo)題中除書名號(hào)、引號(hào)等表示專用名詞的符號(hào)外，不應(yīng)該出現(xiàn)標(biāo)點(diǎn)符號(hào)，題中停頓可用空格表示。如確實(shí)因需要表明語意而必須使用標(biāo)點(diǎn)符號(hào)時(shí)，應(yīng)使用同號(hào)的半角標(biāo)點(diǎn)，標(biāo)題末尾除問號(hào)或嘆號(hào)外，一般不使用其他標(biāo)點(diǎn)符號(hào)。

但在實(shí)際UI界面中，我們無法在生產(chǎn)端對(duì)作者使用的不規(guī)范標(biāo)點(diǎn)符號(hào)進(jìn)行逐一的確認(rèn)、修正。UI需要的是展示規(guī)則，保證多種內(nèi)容最后都能有良好的視覺呈現(xiàn)。

在不修改作者不規(guī)范標(biāo)點(diǎn)使用的前提下，優(yōu)化標(biāo)題中標(biāo)點(diǎn)符號(hào)的寬度：將標(biāo)題中引號(hào)、書名號(hào)使用半角標(biāo)點(diǎn)；連續(xù)標(biāo)點(diǎn)將前一位標(biāo)點(diǎn)使用半角標(biāo)點(diǎn)，其余標(biāo)點(diǎn)不變，目的是在保持標(biāo)題基本閱讀節(jié)奏感的同時(shí)，減少標(biāo)點(diǎn)在標(biāo)題中的占位，突出標(biāo)題內(nèi)容。

· 標(biāo)點(diǎn)首尾禁則

在中文排版規(guī)則中，為了保持閱讀順暢、體例一致，多數(shù)標(biāo)點(diǎn)符號(hào)的位置有限制，通常一個(gè)標(biāo)點(diǎn)符號(hào)依其性質(zhì)，禁止出現(xiàn)在行首或行尾。這項(xiàng)規(guī)則自活字排版時(shí)代開始通行。在中文排版里面這項(xiàng)標(biāo)點(diǎn)規(guī)則叫“標(biāo)點(diǎn)首尾禁則”。

如何執(zhí)行這種標(biāo)點(diǎn)規(guī)避，平面排版中處理遵守“先推入，后推出”原則，即不希望標(biāo)點(diǎn)符號(hào)出現(xiàn)在行首時(shí)，應(yīng)在已經(jīng)標(biāo)點(diǎn)擠壓的基礎(chǔ)上再次檢查是否有機(jī)會(huì)將其擠到前一行，如沒有擠壓機(jī)會(huì)再?gòu)那耙恍腥∽詈笠粋€(gè)字至下一行。前行多出來的空間需按照優(yōu)先順序拉伸，最后沒有拉伸機(jī)會(huì)再按平均拉大字距的方式處理。

但“先推入，后推出”原則在UI場(chǎng)景中實(shí)現(xiàn)難度太大，意味著在判斷每個(gè)標(biāo)點(diǎn)位置的時(shí)候，還需要進(jìn)行多次邏輯判斷，技術(shù)成本太高。因此我們以效率優(yōu)先，將“先推入，后推出”原則修改為“推出式標(biāo)點(diǎn)避頭尾”，即從上一行推出一個(gè)字排在下行的行首，避免行首、行末出現(xiàn)禁排的標(biāo)點(diǎn)符號(hào)。

雖然由“先推入，后推出”退階為“僅推出式標(biāo)點(diǎn)避頭尾”，但整體文章還是避免了標(biāo)點(diǎn)出現(xiàn)在行首尾情況，遵循了中文排版基礎(chǔ)規(guī)范。

· 連續(xù)標(biāo)點(diǎn)擠壓

中文的標(biāo)點(diǎn)符號(hào)通常占1個(gè)字符寬度，便于識(shí)別、配置和排版，但當(dāng)頁面中連續(xù)出現(xiàn)2個(gè)及以上的標(biāo)點(diǎn)符號(hào)的時(shí)候，文章上會(huì)出現(xiàn)一塊空白，這些空洞會(huì)使在閱讀時(shí)候增加文字間距，使文字過于跳躍，增加讀者理解內(nèi)容的時(shí)間，造成腦眼勞累；同時(shí)會(huì)造成版心灰度的不均衡，影響視覺美感。

標(biāo)點(diǎn)符號(hào)字面分為“可調(diào)整”和“不可調(diào)整”兩類，“可調(diào)整”的標(biāo)點(diǎn)符號(hào)標(biāo)點(diǎn)本身在字面左、字面右、字面居中，可縮減掉標(biāo)點(diǎn)不占位部分的空間。

不可調(diào)整的標(biāo)點(diǎn)包括：半字連接號(hào)、間隔號(hào)、分隔號(hào)，因?yàn)檫@幾個(gè)標(biāo)點(diǎn)固定半個(gè)字寬。

在《中文排版標(biāo)準(zhǔn)》里面說明：當(dāng)文中出現(xiàn)連續(xù)標(biāo)點(diǎn)符號(hào)排列時(shí)，為了使文字更加緊湊、易讀，應(yīng)該對(duì)標(biāo)點(diǎn)符號(hào)的寬度進(jìn)行調(diào)整。如果兩個(gè)符號(hào)占用2個(gè)字寬，應(yīng)當(dāng)縮減成1.5個(gè)字寬。在此原則上，允許排版風(fēng)格進(jìn)一步調(diào)整讓兩個(gè)符號(hào)只占1個(gè)字寬。擠壓方向應(yīng)該是標(biāo)點(diǎn)符號(hào)緊靠?jī)?nèi)容，擠壓掉離內(nèi)容遠(yuǎn)的空間。

根據(jù)這一原則，我們?cè)诖a中設(shè)置當(dāng)連續(xù)出現(xiàn)兩個(gè)及以上的標(biāo)點(diǎn)時(shí)，擠壓第二位及以后的標(biāo)點(diǎn)為半角，縮減連續(xù)標(biāo)點(diǎn)時(shí)的占位，減少閱讀時(shí)候的視覺跳躍，減少文章中出現(xiàn)的“空洞”。

· 完整設(shè)計(jì)方案

回顧整個(gè)設(shè)計(jì)方案，包括了3個(gè)部分：

1、對(duì)比屏顯字體與印刷字體，結(jié)合字體的字重，優(yōu)化字體家族選擇范圍與展示順位，優(yōu)化內(nèi)容可讀性。

2、通過眼動(dòng)實(shí)驗(yàn)、可用性測(cè)試調(diào)整字間距、行間距和段落間距，優(yōu)化閱讀節(jié)奏，提升閱讀效率。

3、學(xué)習(xí)W3C《中文排版標(biāo)準(zhǔn)》等規(guī)范，吸取中文排印優(yōu)良傳統(tǒng)，通過對(duì)內(nèi)容中標(biāo)點(diǎn)符號(hào)等微觀細(xì)致的調(diào)整。使正文區(qū)頁面能夠保持字距均勻，版面齊整、灰度均衡。從標(biāo)點(diǎn)細(xì)節(jié)提升頁面美觀度和吸引力。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX   來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

當(dāng)我們?cè)O(shè)計(jì)Web表單時(shí)，往往用最直覺的設(shè)計(jì)經(jīng)驗(yàn)本能驅(qū)動(dòng)我們?nèi)ソ鉀Q一些看似在界面設(shè)計(jì)中最簡(jiǎn)單的問題，但每每到細(xì)微之處，又會(huì)有無數(shù)疑問從細(xì)節(jié)中冒出來給我們的設(shè)計(jì)造成困擾。

例如：在表單界面Label（標(biāo)簽） 和 Input（輸入框） 上下還是左右排列合理、Label要不要加冒號(hào)、輸入框到底多寬合適等等......

以上這類問題看起來并不影響用戶完成任務(wù)，很久以來也少有人關(guān)心這些細(xì)微之處會(huì)不會(huì)對(duì)用戶有什么影響。

以至于，我表達(dá)想寫一篇探究這些細(xì)節(jié)的文章時(shí)，同事會(huì)偷笑說：你都開始研究標(biāo)簽?zāi)┪惨灰用疤?hào)了嗎......，太冷了——真是個(gè)冷知識(shí)！

確實(shí)如此，這些偏門、細(xì)碎的內(nèi)容，鮮少有人會(huì)去留意和思考。因此我在寫下這些分享內(nèi)容時(shí)期望可以達(dá)到目標(biāo)是：“冷知識(shí)雖然冷，但有用”。用我了解的這些表單設(shè)計(jì)冷知識(shí)：?jiǎn)l(fā)你的冷思維、引出你的熱思考。

話不閑聊，我們開始討論第一個(gè)問題：

///

01.標(biāo)簽?zāi)┪惨用疤?hào)嗎

有個(gè)表單細(xì)節(jié)不知道你有沒有想過，標(biāo)簽?zāi)┪彩欠褚用疤?hào)？

這個(gè)問題在我前團(tuán)隊(duì)發(fā)生過激烈爭(zhēng)論，有同事說：“不要加，占用間距，而且沒人會(huì)留意它......”,也有人說：“要加，從含義上講，冒號(hào)的作用就是提示上下文或總結(jié)上下文的停頓。加上之后能更好表示標(biāo)簽與輸入域的關(guān)聯(lián)......."。

聽起來好像都有些道理，那到底誰更對(duì)呢！

首先，我們追溯一下 Web 發(fā)展史，早期可訪問性核對(duì)清單中通常堅(jiān)持要標(biāo)簽帶冒號(hào)，因?yàn)槠聊婚喿x器一度必須依賴各種技巧才能理解標(biāo)記不明的表單。

而隨著技術(shù)發(fā)展，Web表單使用“l(fā)abel”標(biāo)簽（tag）可以做正確的標(biāo)記，那么屏幕閱讀器就能通過標(biāo)記（markup）把標(biāo)簽（label）和相應(yīng)的字段對(duì)應(yīng)起來則無需再借助冒號(hào)。

不過在客戶端又有些意外！曾經(jīng) Windows Vista 指南中明確要求使用冒號(hào)， Mac Aqua 也有此要求但規(guī)則會(huì)稍靈活一些。這種情況是因?yàn)槟承┣闆r下屏幕閱讀器在桌面環(huán)境與可閱讀源代碼的網(wǎng)頁標(biāo)記相比會(huì)遇到一些困難，桌面環(huán)境不會(huì)直接顯示代碼。也是這個(gè)歷史原因，造成 Vista 和 Aqua 各自都有大量其標(biāo)簽包含冒號(hào)的歷史表單。因?yàn)閷?shí)在沒有必要把它們?nèi)扛牡?，直到今天客戶端的表單依舊延續(xù)這一規(guī)則。

通過Web發(fā)展史我們明白表單標(biāo)簽帶冒號(hào)的產(chǎn)生是為了解決早期屏幕閱讀器的識(shí)別，如今的屏幕閱讀器技術(shù)已轉(zhuǎn)變?yōu)樽R(shí)別標(biāo)簽的底層代碼，無需借助這種形式了。所以從這點(diǎn)來看要求標(biāo)簽帶冒號(hào)已經(jīng)站不住腳了。

那從情感角度分析標(biāo)簽帶冒號(hào)的是否對(duì)用戶體驗(yàn)有影響呢？

回到最開始，我和同事們的爭(zhēng)論……

先簡(jiǎn)單說下答案，無任何影響！

在《Web表單設(shè)計(jì)·創(chuàng)建高可用性的網(wǎng)頁表單》中，作者（卡羅琳·賈雷特）曾經(jīng)做過大量的表單測(cè)試，最終證明從未有一名用戶談?wù)撁疤?hào)是否出現(xiàn)，即使是有些在其他環(huán)境中很介意標(biāo)點(diǎn)符號(hào)的人似乎在線上表單中也未曾注意到。

從以上兩個(gè)角度不難發(fā)現(xiàn)，無論是從技術(shù)發(fā)展還是情感體驗(yàn)，都證明可不必要求表單帶冒號(hào)；因?yàn)榭捎眯栽L問清單不再有這樣的要求，用戶研究也證明幾乎沒有人會(huì)留意表單冒號(hào)是否出現(xiàn)。

這樣的結(jié)論，看似表單帶冒號(hào)是失敗了……，但這并不妨礙它作為一種習(xí)慣或傳統(tǒng)延續(xù)至今，無論在客戶端還是Web設(shè)計(jì)系統(tǒng)中仍然常見。例如：蘋果電腦的Mac系統(tǒng)，國(guó)內(nèi)阿里的Ant Design Web設(shè)計(jì)系統(tǒng)。

因此，得到以下幾點(diǎn)建議：

如果你希望自己的網(wǎng)頁表單與流行的桌面環(huán)境保持一致，請(qǐng)使用冒號(hào)。

如果你已有大量使用冒號(hào)的表單，請(qǐng)保持繼續(xù)使用下去。

如果你在建立一個(gè)新的系統(tǒng)，你也可以索性拋硬幣決定，不過要嚴(yán)格遵循一種方法。

///

02.哪種標(biāo)簽對(duì)齊方式更好

在表單中標(biāo)簽與表單域的對(duì)齊方式，如果你的團(tuán)隊(duì)已有明確的規(guī)范和使用場(chǎng)景，你只要拿來主義即可?？扇绻程煊赡阒鲗?dǎo)定義一個(gè)新的表單規(guī)范時(shí)，不知道你會(huì)不會(huì)重新考慮哪種標(biāo)簽對(duì)齊方式更好，怎樣區(qū)分使用場(chǎng)景！

通過科學(xué)實(shí)驗(yàn)發(fā)現(xiàn)，無論是在眼動(dòng)儀的熱圖，還是在許多可用性測(cè)試的觀察結(jié)果中，用戶在填寫網(wǎng)頁表單時(shí)視線主要集中在輸入框的左側(cè)。他們的視線幾乎不會(huì)落到輸入框的右側(cè)，甚至都不會(huì)瞟上一眼。

以此為基礎(chǔ)，我們?cè)诰W(wǎng)頁表單設(shè)計(jì)中有3種最常見的標(biāo)簽對(duì)齊方式：頂對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽和左對(duì)齊標(biāo)簽。你可能會(huì)說還有混合對(duì)齊標(biāo)簽、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽等，這些確實(shí)存在但并不是最核心的幾種對(duì)齊方式，它們基本是在這3種形式上變化，不脫離本質(zhì)。

下面我們逐個(gè)分析一下：

1.頂對(duì)齊標(biāo)簽：

馬泰奧·彭佐從2006年7月進(jìn)行眼動(dòng)研究發(fā)現(xiàn)，從標(biāo)簽移動(dòng)到輸入框只需50毫秒。比左對(duì)齊標(biāo)簽快了10倍，后者需要500毫秒；比右對(duì)齊標(biāo)簽方式快2倍，后者高達(dá)240秒。能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行上下單向運(yùn)動(dòng)。

優(yōu)勢(shì)：

最利于減少表單填寫時(shí)間（標(biāo)簽和輸入框位置最為靠近）；用戶視線固定，動(dòng)線一直向下（清晰的完成路徑）；節(jié)省大量橫向空間（可用于以多種方式組合的相關(guān)輸入框）。

劣勢(shì)：

占用額外的垂直空間（如果可提供使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對(duì)齊標(biāo)簽）；建議使用輸入框50%至75%的高度作為相鄰輸入框間距。

適用場(chǎng)景：

希望用戶快速填寫表單，完成任務(wù)；同時(shí)，當(dāng)輸入項(xiàng)存在主次之分時(shí)，對(duì)標(biāo)簽擴(kuò)展性要求高。

2.右對(duì)齊標(biāo)簽：

如果要盡量減少表單占用垂直屏幕空間，右對(duì)齊能提供快速完成時(shí)間。馬泰奧·彭佐的眼動(dòng)研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運(yùn)動(dòng)）右對(duì)齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時(shí)間分別在170毫秒和240毫秒，而填寫完成時(shí)間比左對(duì)齊快2倍。

優(yōu)勢(shì)：

標(biāo)簽與輸入框相鄰（方便快速填寫）。

劣勢(shì)：

右對(duì)齊布局造成左側(cè)不齊，影響了快速游覽表單的效率問題；若標(biāo)簽文字寬度變寬，右對(duì)齊還存在靈活度問題。

適用場(chǎng)景：

既要減少垂直空間，又要加快填寫速度的場(chǎng)景。

3.左對(duì)齊標(biāo)簽：

在頂、右、左三種方案中，左對(duì)齊表單填寫速度最慢。因?yàn)樽髮?duì)齊表單解析問題時(shí)眼球定位次數(shù)最多，用戶一般情況下都能將左對(duì)齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費(fèi)時(shí)間較長(zhǎng)。根據(jù)馬泰奧·彭佐的研究，典型掃視時(shí)間為500毫秒，很長(zhǎng)說明用戶經(jīng)歷了沉重的認(rèn)知壓力。

優(yōu)勢(shì)：

容易游覽標(biāo)簽；占用垂直空間較少。

劣勢(shì)：

標(biāo)簽和輸入框的相鄰間距增大；適合于用戶不熟悉表單要收集的數(shù)據(jù)或問題無法分成易處理的內(nèi)容組，左對(duì)齊標(biāo)簽游覽表單問題會(huì)更容易。用戶只要上上下下閱讀標(biāo)簽左欄，不會(huì)被輸入框打斷。

適用場(chǎng)景：

表單中存在較多的復(fù)雜或敏感信息，希望用戶放慢速度、仔細(xì)思考（在一些注冊(cè)類表單中較多使用）。

單從效率角度看，頂對(duì)齊標(biāo)簽>右對(duì)齊>左對(duì)齊，但是根據(jù)應(yīng)用場(chǎng)景，效率快并不是我們選擇標(biāo)簽對(duì)齊方式的唯一的指標(biāo)。

因此，得到以下幾點(diǎn)建議：

如果你希望用戶放慢速度，仔細(xì)思考表單中每個(gè)表單項(xiàng)，左對(duì)齊標(biāo)簽是個(gè)好選擇，特別是含有大量可選輸入框或高級(jí)設(shè)置的陌生數(shù)據(jù)時(shí)；

而頂對(duì)齊標(biāo)簽在一些國(guó)際化產(chǎn)品的表單設(shè)計(jì)時(shí)，會(huì)有更好的延展性；

至于，右對(duì)齊標(biāo)簽雖然與表單域聯(lián)系緊密，便于用戶填寫，但是要考慮好標(biāo)簽的長(zhǎng)短不齊如何解決。能否精簡(jiǎn)標(biāo)簽內(nèi)容，以及確定好表單與界面的邊距。

///

03.標(biāo)記必填與可選字段的困惑

許多表單設(shè)計(jì)中，有個(gè)常見問題：是否應(yīng)該標(biāo)記必填字段？如果表單中的大多數(shù)字段或全部都是必填的，我們是否仍然應(yīng)該標(biāo)記它們？

先簡(jiǎn)單回答：是肯定的，用戶有時(shí)需要通過必填標(biāo)記來評(píng)估工作量，了解輸入信息量的最低限度。我會(huì)在下面具體解釋原因。

了解不標(biāo)記必填字段的誘惑

通常，設(shè)計(jì)師會(huì)覺得每個(gè)必填字段都有一個(gè)標(biāo)記是重復(fù)的、丑陋的、占空間，而且干擾界面，甚至可能看起來很擾亂（有認(rèn)知負(fù)擔(dān)?。?。因此通常采取以下一種或兩種策略：

1.在表單頂部顯示說明，說明中除非另有解釋，否則所有字段都是必填；

2.只標(biāo)記可選字段，因?yàn)樗鼈兺ǔ］^少；

3.在某些特殊情況下，也會(huì)什么都不做：相信用戶會(huì)神奇地知道需要填寫什么字段；如果不知道，那么只需要點(diǎn)擊提交報(bào)錯(cuò)即可。

這些方法有什么問題？如果你這樣想，我來告訴你

1.用戶一般不喜歡閱讀表單頂部說明。不難想象，用戶不太可能閱讀表單頂部的說明。表單字段需要自給自足，畢竟，每個(gè)字段都有特定指令——它的標(biāo)簽，為什么用戶需要閱讀其他任何東西來填寫它呢？

2.即使用戶閱讀了說明，也可能忘記。你可能會(huì)說：用戶閱讀了頂部的說明，怎么就會(huì)忘記——這么簡(jiǎn)單的事情？

的確容易忘記，特別是當(dāng)表單很長(zhǎng)或填寫表單被打斷時(shí)（這種情況在移動(dòng)端很常見）。即使用戶記得，但這占用了工作記憶，增加了認(rèn)知負(fù)荷。換句話說，你讓用戶完成任務(wù)更難了。填寫表單本身對(duì)用戶來說就相當(dāng)有挑戰(zhàn)性——為什么要讓它更具有挑戰(zhàn)性？

3.用戶必須掃描表單以確定是否為必填字段。不難發(fā)現(xiàn)，無論是否在表單頂部包含說明，結(jié)果都可能相同，用戶會(huì)忽略或忘記。他們會(huì)掃視表單，找到一個(gè)標(biāo)記為必填或可選的標(biāo)識(shí)。

而且有些用戶甚至不會(huì)費(fèi)心去環(huán)顧四周，他們只會(huì)做出假設(shè)。他們會(huì)想——“嗯，郵箱——不需要我的郵箱吧？先空著呢”。即使用戶沒有留空，也不得不暫停來思考一個(gè)字段是否需要填寫，減慢交互速度并使過程看起來更長(zhǎng)、更乏味。

想要解決以上問題很簡(jiǎn)單：標(biāo)記所有必填字段。盡量明確和清晰展示每個(gè)必填字段，并標(biāo)記它。當(dāng)然，就像有些設(shè)計(jì)師所說：界面出現(xiàn)大量必填標(biāo)識(shí)（紅色星號(hào)*）確實(shí)會(huì)增加視覺噪聲。甚至重復(fù)的星號(hào) * 會(huì)帶來一些認(rèn)知恐慌。但相比之下，兩害取其輕，這些負(fù)面因素是輕微的。

如何標(biāo)記必填字段？

這里包含至少有兩種方式：星號(hào)*（紅色）和“必填”提示。星號(hào)*在網(wǎng)頁上已經(jīng)很常見，用戶熟悉其含義。優(yōu)點(diǎn)是它不占用太多空間，也看起來與標(biāo)簽文字足夠不同，所以使用它。

可以使用其他標(biāo)記形式嗎？當(dāng)然可以，但是最好遵循市面上常見的形式（雅各布定律），這樣更符合用戶認(rèn)知。

星號(hào)應(yīng)該在字段標(biāo)簽之前還是在字段標(biāo)簽之后？

這不一定有實(shí)際影響，但將其放在標(biāo)簽之前的一個(gè)原因是，只需掃視標(biāo)簽的最左邊字符，就能輕松定位必填哪些字段。

星號(hào)*是一種視覺標(biāo)記，應(yīng)當(dāng)仔細(xì)考慮表單中的標(biāo)識(shí)位置。標(biāo)識(shí)在標(biāo)簽左邊能指引用戶迅速瀏覽界面，并判斷出必填項(xiàng)。如果在右側(cè)由于輸入框形式、長(zhǎng)度各不相同，標(biāo)識(shí)和輸入框?qū)R會(huì)導(dǎo)致難以瀏覽和判斷。

是否也應(yīng)該標(biāo)記可選字段？

雖然這不是強(qiáng)制性的，但標(biāo)記可選字段確實(shí)減輕了用戶思考：如果沒有這個(gè)標(biāo)識(shí)，用戶要環(huán)顧四周，并根據(jù)其他標(biāo)記字段推斷該字段是可選的。如果“非必填”在字段標(biāo)簽旁邊，那該任務(wù)會(huì)變得更容易。不描述可選字段，這沒問題，但這樣做會(huì)是一個(gè)很好的額外幫助。

為什么登錄表單沒有標(biāo)記必填？

登錄表單很短，一般由兩個(gè)字段組成：用戶名和密碼，這兩個(gè)字段總是必填的。如果使用星號(hào)*，標(biāo)記這些字段的成本很低，并不會(huì)出錯(cuò)。但是，絕大多數(shù)用戶都使用過很多登錄表單，他們是知道要登錄需要輸入郵箱/用戶名和密碼的。所以，在登錄表單中，可以省略這種形式。

而在注冊(cè)表中不標(biāo)記必填字段是危險(xiǎn)的。注冊(cè)表單因產(chǎn)品而異——不同公司在創(chuàng)建帳戶時(shí)需要不同類型的信息。它不僅僅包含用戶名和密碼，所以請(qǐng)標(biāo)記所有必填字段（包括用戶名和密碼）。

因此，提出以下幾點(diǎn)建議：

基礎(chǔ)前提，盡量去除任何不需要回答的問題，特別是涉及到用戶隱私的內(nèi)容?？梢愿菀鬃層脩籼钔瓯韱?。

為了增加表單填寫的機(jī)會(huì)，請(qǐng)盡量減少用戶需要付出的努力和他們需要記住的信息。有很多方面有助于解決這些問題，但標(biāo)記必填字段（以及可選字段）是最容易的方法之一。

///

04.表單域提供一些默認(rèn)值有必要嗎

先給出答案：這是肯定的！

在《選擇的悖論》一書中，作者巴里·施瓦茨討論了生活中選擇過多的影響。并提出策略應(yīng)付無處不在的過多選擇。他特別敘述了智能默認(rèn)的能量——即在滿足多數(shù)人需要的地方放置選擇——來幫助人們做出明智的選擇。

而在Web表單中也有很多地方能利用智能默認(rèn)減少不必要的選擇次數(shù)或輸入，加速表單完成過程。所以，只要合適就在表單域中預(yù)先為用戶填寫你認(rèn)為他們想要的輸入值。

通過提供合理的默認(rèn)，能有效節(jié)省用戶時(shí)間，就是這么簡(jiǎn)單。應(yīng)用分擔(dān)了用戶思考或輸入答案的工作。填寫表單永遠(yuǎn)不是一件有趣的事情，如果這個(gè)模式能把表單填寫的時(shí)間減少一半，用戶會(huì)非常感激。

你可能會(huì)問：默認(rèn)值不是用戶想要的，誤導(dǎo)用戶怎么辦？

在設(shè)計(jì)有默認(rèn)值的表單域時(shí)，你要思考默認(rèn)值是否是大多數(shù)用戶可以接受的答案，如果不確信可以先去做一下用戶調(diào)研，了解用戶的心聲。

就算默認(rèn)值真的不是用戶想要的，至少你也為他提供了一個(gè)示例來告訴用戶答案應(yīng)該是什么樣子的。這一點(diǎn)也可以節(jié)省用戶幾秒的思考時(shí)間——或避免一條錯(cuò)誤信息。

但并不代表所有的表單域都要給出默認(rèn)值，我們只是盡可能的讓用戶節(jié)省時(shí)間。

如何使用：

在第一次向用戶顯示表單時(shí)，用一個(gè)合理的默認(rèn)值預(yù)先填寫文本框、組合框或者其他控件。也可以使用用戶之前提供給應(yīng)用的信息來動(dòng)態(tài)地給出默認(rèn)值（例：通過身份證自動(dòng)識(shí)別出生日期；利用郵編，推導(dǎo)出對(duì)應(yīng)省/市）。

如果只是因?yàn)槟阌X得不應(yīng)該留下空白的輸入域，那么不要使用默認(rèn)模式。只有當(dāng)你有理由確信絕大部分用戶，在絕大多數(shù)情況下，不會(huì)修改這個(gè)取值時(shí)才提供默認(rèn)值——否則，這將會(huì)給用戶帶來額外的工作！

///

05.輸入框的寬度如何設(shè)定

有一個(gè)容易被忽視但實(shí)則舉重若輕的問題，表單中輸入框?qū)挾热绾卧O(shè)定？

在表單設(shè)計(jì)中，對(duì)于 Checkbox、Radio 等控件，很明確必須跟隨內(nèi)容自適應(yīng)處理。但對(duì)于Input、Select等你會(huì)不會(huì)產(chǎn)生困惑，是定寬處理還是跟隨內(nèi)容更好。

不知道你是否試圖這么理解過？輸入框作為用戶填寫信息的主要方式，其表現(xiàn)形式是否可以提供給用戶填寫表單的有用線索。

唐納德·諾曼的著作《設(shè)計(jì)心理學(xué)》中詳細(xì)講解過心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。

在真實(shí)場(chǎng)景中，大部分輸入框是存在理想長(zhǎng)度的，那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度來減輕判斷負(fù)擔(dān)。

下圖就是典型案例，一個(gè)實(shí)際不需要花多少錢的金額輸入框在左圖中進(jìn)行等寬處理，反而容易誤導(dǎo)用戶對(duì)輸入金額的判斷，造成一種不安全感。

表現(xiàn)形式要為用戶填寫提供有用線索，采用不同長(zhǎng)度的文本框提供了暗示；這種暗示是一種有用線索，當(dāng)輸入框長(zhǎng)度長(zhǎng)短不定時(shí)，用戶會(huì)很自然地思考為什么這樣；填寫輸入框時(shí)會(huì)自然考慮這些線索。

請(qǐng)注意！保證暗示效果的同時(shí)，不要設(shè)定太多的寬度，反而會(huì)讓表單顯得凌亂；太少又會(huì)讓表單看起來都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。

什么是模度值和數(shù)量呢！

落在具體設(shè)計(jì)上要先梳理產(chǎn)品中常見的表單類型，然后設(shè)置一個(gè)默認(rèn)寬度。以此為基礎(chǔ)來有規(guī)律的增加長(zhǎng)度，并考慮清楚它們的適用場(chǎng)景；從而定義出不同的模度，最終制定出整潔有序的模度規(guī)范。這樣就可以讓一線的設(shè)計(jì)師們跳過部分繁瑣磨人的細(xì)節(jié)思考，快速搭建出合適的表單寬度并合理有效。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

設(shè)計(jì)語言有哪些？

設(shè)計(jì)語言最底層是項(xiàng)目設(shè)計(jì)語言，具有典型特征和主題，比如醫(yī)療項(xiàng)目凸顯專業(yè)冷靜，節(jié)日項(xiàng)目凸顯熱鬧氛圍。往上一層是產(chǎn)品設(shè)計(jì)語言，強(qiáng)調(diào)個(gè)性品牌，比如小視頻的設(shè)計(jì)深色更沉浸，電商從結(jié)構(gòu)到色彩都凸顯熱鬧。很多產(chǎn)品隨著發(fā)展，形成一些系列平臺(tái)服務(wù)，平臺(tái)設(shè)計(jì)語言確保服務(wù)“統(tǒng)一規(guī)范”。最頂層是生態(tài)設(shè)計(jì)語言，跨設(shè)備跨平臺(tái)和硬件呈現(xiàn)的設(shè)計(jì)語言。

如何構(gòu)建設(shè)計(jì)語言？

設(shè)計(jì)動(dòng)手前，按照風(fēng)格基調(diào)具象化拆解分析必不可少，每一個(gè)元素的表達(dá)手法都要定位清晰。

01 至簡(jiǎn) 光影藝術(shù)圖標(biāo)體系

圖標(biāo)體系化，多場(chǎng)景驗(yàn)證一致性，發(fā)現(xiàn)方案一不夠極致，造型復(fù)雜；方案二具備良好的一致性，但破壞了物體固有的結(jié)構(gòu)，影響識(shí)別度。

在一致性的前提下，嘗試簡(jiǎn)化、提高識(shí)別度。巧妙的將光影和結(jié)構(gòu)交匯，極簡(jiǎn)到2個(gè)圖層呈現(xiàn)主體；語義清晰識(shí)別度高；角度漸變光影帶來舒適親和感，15°x角度的精準(zhǔn)把控傳達(dá)專業(yè)的品牌特性。因此總結(jié)出圖標(biāo)繪制要遵循的法則為識(shí)別性、品牌性、愉悅性、一致性。

02 和諧 家族感的色彩體系

a）標(biāo)準(zhǔn)色

初期直播品牌色繼承百度App品牌色，隨著業(yè)務(wù)逐漸中臺(tái)化，需要專屬直播色。運(yùn)用色彩心理學(xué)傳遞給人不同的情緒及心理感受，尋找直播的專屬色相，而活力、溫暖的紅色色調(diào)，更能體現(xiàn)親和有力的產(chǎn)品氣質(zhì)。

紅色也有冷暖之分，此時(shí)提高色相、飽和度的顆粒度，H色相以350°為起點(diǎn)，以2°遞增或遞減，S飽和度以5°為階梯，生成更多色階（保持相同B明度100），在多界面和真機(jī)驗(yàn)證，得出直播專屬紅（H350 S80 B100），冷暖適中符合平臺(tái)屬性。

b)協(xié)調(diào)的輔助色

C）調(diào)色版

03 考究 新穎獨(dú)特材質(zhì)

這種量身打造的稀缺材質(zhì)運(yùn)用在運(yùn)營(yíng)玩法上，如紅包雨玩法，即能凸顯平臺(tái)專業(yè)用心的態(tài)度，又能強(qiáng)化用戶消費(fèi)行為轉(zhuǎn)化，助力變現(xiàn)增長(zhǎng)。

用戶激勵(lì)體系，采用3D玉石潤(rùn)澤質(zhì)感+動(dòng)態(tài)折射光影，體現(xiàn)有內(nèi)涵不張揚(yáng)的泛知識(shí)調(diào)性，凸顯用戶獨(dú)特身份感。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

伴隨短視頻平臺(tái)的崛起，移動(dòng)互聯(lián)網(wǎng)的主流內(nèi)容消費(fèi)形態(tài)向短視頻視聽語言轉(zhuǎn)變，視頻信息流廣告的時(shí)代已經(jīng)來臨。如何通過設(shè)計(jì)提升轉(zhuǎn)化，是視頻信息流廣告所面臨的挑戰(zhàn)。

為了提升廣告轉(zhuǎn)化效果，我們結(jié)合實(shí)際項(xiàng)目，通過大量的實(shí)驗(yàn)與思考，梳理并總結(jié)了一套適用于視頻信息流廣告的轉(zhuǎn)化組件呈現(xiàn)原則，我們將其命名為“延遲增強(qiáng)”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場(chǎng)景。

///

延遲增強(qiáng)是什么？

視頻信息流廣告有三要素：內(nèi)容、框架、轉(zhuǎn)化組件。其中廣告內(nèi)容來源于廣告主投放的物料，基礎(chǔ)框架需對(duì)齊宿主保持一致性，所以僅有承載轉(zhuǎn)化信息和行為的轉(zhuǎn)化組件，是可設(shè)計(jì)部分。 

而“延遲增強(qiáng)”就是針對(duì)“轉(zhuǎn)化組件”的一種伴隨視頻內(nèi)容分階段/漸進(jìn)式的呈現(xiàn)方式。它由消費(fèi)者決策時(shí)的理想心理動(dòng)線，結(jié)合廣告行為推導(dǎo)得出，并經(jīng)過實(shí)驗(yàn)驗(yàn)證了其對(duì)于轉(zhuǎn)化提升的有效性。

“延遲增強(qiáng)”包括兩個(gè)階段：1.廣告展現(xiàn)初始階段，延遲展現(xiàn)廣告意圖，通過內(nèi)容吸引潛在用戶；2.廣告內(nèi)容逐步呈現(xiàn)階段，轉(zhuǎn)化組件漸進(jìn)式增強(qiáng)，輔以增益信息，不斷強(qiáng)化，引導(dǎo)轉(zhuǎn)化行為。

它指導(dǎo)了轉(zhuǎn)化組件從“呈現(xiàn)”到“增強(qiáng)”的全流程，從時(shí)機(jī)（出現(xiàn)&增強(qiáng)時(shí)機(jī)）/引導(dǎo)（動(dòng)效&互動(dòng)引導(dǎo)）/前置（信息&轉(zhuǎn)化前置）三個(gè)部分，幫助提升廣告轉(zhuǎn)化效果。

///

時(shí)機(jī)-延遲增強(qiáng)如何呈現(xiàn)？

轉(zhuǎn)化組件的呈現(xiàn)時(shí)機(jī)包含“何時(shí)展現(xiàn)”與“何時(shí)增強(qiáng)”兩個(gè)部分，前者幫助增加廣告接收率，后者提升廣告轉(zhuǎn)化率。

01/ 出現(xiàn)時(shí)機(jī)：

延遲展現(xiàn)廣告意圖，可以提升廣告賣點(diǎn)的展現(xiàn)機(jī)率

互聯(lián)網(wǎng)的快速發(fā)展使得受眾被動(dòng)卷入爆炸式增長(zhǎng)的資訊信息體中，廣告借助這一媒介迅速發(fā)展，但也因?yàn)椴糠稚虡I(yè)廣告的過度宣傳與其降低用戶信息獲取便捷性的本質(zhì)，不可避免的使受眾產(chǎn)生了心理上的逆反與抵觸情緒，從源頭拒絕了廣告信息。

所以對(duì)廣告來說，在廣告展現(xiàn)初始，延遲展現(xiàn)廣告意圖，融入內(nèi)容，可以緩解受眾的抵觸情緒，提升廣告賣點(diǎn)的展現(xiàn)機(jī)率。

02/ 增強(qiáng)時(shí)機(jī)：

通過用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī)，可以有效提升轉(zhuǎn)化

對(duì)廣告來說，搭配廣告內(nèi)容進(jìn)行增強(qiáng)，通過內(nèi)容積累購(gòu)買欲/信任感，然后通過階段性的增強(qiáng)來提示操作，對(duì)比一成不變能起到更好的轉(zhuǎn)化效果。

我們首先嘗試了程序化的增強(qiáng)時(shí)機(jī)，在不增加技術(shù)成本的前提下，根據(jù)歷史經(jīng)驗(yàn)，面向不同的廣告均采用固定時(shí)段的階段性增強(qiáng)。

但不同的廣告物料內(nèi)容不同，不同的用戶偏好也不同，固定的增強(qiáng)時(shí)機(jī)并不能很好的滿足所有廣告需求。所以在技術(shù)能力可以承載的時(shí)候，我們采用了動(dòng)態(tài)時(shí)機(jī)策略，通過用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī)，在程序化增強(qiáng)時(shí)機(jī)之后，再次實(shí)現(xiàn)了轉(zhuǎn)化提升。

///

引導(dǎo)-延遲增強(qiáng)如何引導(dǎo)轉(zhuǎn)化行為？

轉(zhuǎn)化組件如何引導(dǎo)轉(zhuǎn)化，則可分為基礎(chǔ)的視覺引導(dǎo)與進(jìn)階的互動(dòng)引導(dǎo)，前者幫助搶奪視覺注意力，后者則能夠在互動(dòng)體驗(yàn)中植入部分幫助決策的“小心思”。

01/ 視覺引導(dǎo)：

適當(dāng)增加視覺吸引點(diǎn)，可以有效引導(dǎo)點(diǎn)擊

延遲增強(qiáng)需要通過階段性的增強(qiáng)來提示操作，而如何增強(qiáng)能有效吸引注意則需要琢磨，已有實(shí)驗(yàn)表明轉(zhuǎn)化按鈕增加掃光動(dòng)效與智能取色，能有效吸引注意，引導(dǎo)點(diǎn)擊，對(duì)轉(zhuǎn)化提升有良好效果。

02/ 互動(dòng)引導(dǎo)：

讓用戶主動(dòng)選擇，可以增加廣告曝光，輔助轉(zhuǎn)化決策

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)對(duì)于用戶交互體驗(yàn)的追求越發(fā)極致，如影視行業(yè)走向可交互網(wǎng)劇，本質(zhì)上是從用戶接收轉(zhuǎn)變?yōu)橛脩糁鲃?dòng)參與，用戶本身對(duì)于獲得優(yōu)質(zhì)體驗(yàn)的意識(shí)逐漸覺醒。商業(yè)化產(chǎn)品也需要緊跟“體驗(yàn)”與“互動(dòng)”，將廣告變?yōu)榛?dòng)體驗(yàn)或具備使用價(jià)值的信息，讓用戶從被動(dòng)瀏覽到主動(dòng)參與，掌握對(duì)廣告的選擇權(quán)。

以互動(dòng)投票為例，我們通過用戶與用戶之間的觀點(diǎn)表達(dá)，以投票選擇的形式誘發(fā)群體性選擇，引起好奇心與同儕壓力。

若用戶選擇符合群體選擇，則帶來群體性背書，增強(qiáng)信任感；若用戶選擇不符合群體選擇，基于從眾心理，用戶極有可能對(duì)群體選擇產(chǎn)生好奇，從而瀏覽兩種選項(xiàng)的內(nèi)容，有效的增加了品牌曝光。

///

前置-延遲增強(qiáng)如何幫助轉(zhuǎn)化達(dá)成？

轉(zhuǎn)化組件的前置主要包含信息前置與轉(zhuǎn)化前置，前者輔助轉(zhuǎn)化決策，后者幫助便捷操作，更好更快的完成轉(zhuǎn)化。

01/ 信息前置：

增加增益信息或前置落地頁信息，可以輔助轉(zhuǎn)化決策

購(gòu)買/轉(zhuǎn)化一定是需要足夠的信息積累信任感才能達(dá)成的，在前卡適當(dāng)?shù)脑黾淤u點(diǎn)信息能夠更好的幫助用戶決策。針對(duì)下載類廣告可增加評(píng)分與星級(jí)，二電類廣告可以增加價(jià)格信息，甚至可以前置優(yōu)惠劵、圖片banner等信息，均能實(shí)現(xiàn)轉(zhuǎn)化的正向提升。

02/ 轉(zhuǎn)化前置：

縮短轉(zhuǎn)化路徑，可以幫助轉(zhuǎn)化行為更便捷的達(dá)成

在信任感積累與階段性的增強(qiáng)都達(dá)成的時(shí)候，在當(dāng)前轉(zhuǎn)化對(duì)比跳轉(zhuǎn)落地頁再進(jìn)行轉(zhuǎn)化，鏈路更短，用戶流失概率更小。比起實(shí)驗(yàn)嘗試，更像是延遲增強(qiáng)的基礎(chǔ)能力配置。

首先，我們針對(duì)表單/咨詢/電話/安卓下載都進(jìn)行了轉(zhuǎn)化前置，具有用戶明確意向的按鈕點(diǎn)擊會(huì)直接在當(dāng)前進(jìn)行反饋。

除了直接將操作前置外，針對(duì)不同細(xì)分場(chǎng)景的需求，還可以通過交互形態(tài)的優(yōu)化在感官上縮短路徑。

這里以百度的視頻MAX廣告為例，我們針對(duì)重落地頁的商家，將MAX首屏（視頻頁）與H5落地頁的關(guān)系變拼接結(jié)構(gòu)為雙層結(jié)構(gòu)，通過浮層面板承載落地頁，延時(shí)自動(dòng)彈出，強(qiáng)引導(dǎo)下方內(nèi)容，激發(fā)用戶上滑瀏覽興趣，解決了落地頁隱藏較深，轉(zhuǎn)化鏈路過長(zhǎng)的問題，同時(shí)增加了落地頁曝光從而提升轉(zhuǎn)化。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

常規(guī)工作中，需求往往由PM發(fā)起，UE團(tuán)隊(duì)到底如何跟PM、FE等團(tuán)隊(duì)成員協(xié)同，達(dá)成目標(biāo)共識(shí)，是我們值得討論的。

因此建立一套科學(xué)的模型，通過對(duì)目標(biāo)的設(shè)定來倒推過程，結(jié)合定性和定量研究，與項(xiàng)目組就目標(biāo)可以達(dá)成共識(shí)，并且更加準(zhǔn)確的反應(yīng)出產(chǎn)品目標(biāo)中的用戶體驗(yàn)質(zhì)量，這套模型就是GSM模型。

///

GSM模型的簡(jiǎn)介與定義

“GSM”是Google提出的一種自上而下度量用戶行為的方法，通常用于衡量產(chǎn)品/項(xiàng)目目標(biāo)的實(shí)現(xiàn)程度。通過對(duì)目標(biāo)的設(shè)定來倒推過程，精準(zhǔn)設(shè)定指標(biāo)體系的一種量化研究方法。適用于產(chǎn)品設(shè)計(jì)中的各個(gè)角色。

• 目標(biāo)：需要解決的問題，通過對(duì)產(chǎn)品（項(xiàng)目）目標(biāo)拆解推導(dǎo)出用戶體驗(yàn)?zāi)繕?biāo)，體驗(yàn)?zāi)繕?biāo)輔助產(chǎn)品目標(biāo)達(dá)成；

• 信號(hào)：設(shè)計(jì)目標(biāo)實(shí)現(xiàn)后所產(chǎn)生出的現(xiàn)象，設(shè)計(jì)目標(biāo)是信號(hào)的必要條件；

• 指標(biāo)：是對(duì)用戶現(xiàn)象的量化，也就是信號(hào)所得出的可衡量的數(shù)據(jù)化現(xiàn)象。

///

GSM模型的使用場(chǎng)景

GSM模型可適用于產(chǎn)品設(shè)計(jì)中的各個(gè)角色，對(duì)交互設(shè)計(jì)師尤為重要，交互設(shè)計(jì)師作為連接產(chǎn)品、用戶、設(shè)計(jì)的中間一環(huán)，不斷在業(yè)務(wù)和體驗(yàn)之間博弈，尋找平衡點(diǎn)。

通過GSM模型對(duì)產(chǎn)品目標(biāo)進(jìn)行分析，結(jié)合業(yè)務(wù)目標(biāo)與用戶需求，找到改進(jìn)機(jī)會(huì)點(diǎn)，在設(shè)計(jì)中幫我們斧正設(shè)計(jì)思路，對(duì)方案不斷優(yōu)化，上線后進(jìn)行方案效果回收。

GSM模型帶來的價(jià)值

綜上所述，GSM模型基于項(xiàng)目目標(biāo)，找出設(shè)計(jì)目標(biāo)。并且可以辨別設(shè)計(jì)的優(yōu)良。

///

GSM模型的具體實(shí)施步驟

通過對(duì)目標(biāo)的設(shè)定來倒推過程，并精準(zhǔn)設(shè)定指標(biāo)體系。

| step 1 識(shí)別并明確目標(biāo)（Goal）

業(yè)務(wù)目標(biāo)、用戶目標(biāo)、設(shè)計(jì)目標(biāo)是什么？

用戶要完成什么任務(wù)？我們希望他們按照什么路線走？希望他們執(zhí)行什么操作？

這里以手機(jī)百度APP智能小程序業(yè)務(wù)端——?jiǎng)?chuàng)建小程序表單項(xiàng)目改版為例，提高表單審核通過率是整個(gè)項(xiàng)目目標(biāo)，通過拆分項(xiàng)目，設(shè)計(jì)目標(biāo)為表單填寫更快速和表單填寫更準(zhǔn)確。通過確定設(shè)計(jì)目標(biāo)繼續(xù)推到用戶表現(xiàn)。

| step 2 推導(dǎo)目標(biāo)對(duì)應(yīng)的表現(xiàn)（Signal）

什么用戶行為/態(tài)度指示了目標(biāo)達(dá)成？什么樣的感受與目標(biāo)失敗/成功相關(guān)？

從目標(biāo)——信號(hào)可以是一對(duì)多的關(guān)系，根據(jù)用 戶行為在不同的行為階段會(huì)有不同的信號(hào)表現(xiàn)，以用戶不同階段觀測(cè)用戶的不同行為表現(xiàn)。

• 進(jìn)入 —— 通過各種途徑進(jìn)入頁面

• 發(fā)現(xiàn) —— 在該頁面中瀏覽、查找自己所需要的信息

• 辨別 —— 然后通過圖片、標(biāo)題等內(nèi)容以及設(shè)計(jì)形式來識(shí)別有效信息

• 行動(dòng) —— 找到后用戶想了解詳情，點(diǎn)擊鏈接進(jìn)入

這里還以手機(jī)百度APP智能小程序業(yè)務(wù)端——?jiǎng)?chuàng)建小程序表單項(xiàng)目改版為例，將設(shè)計(jì)目標(biāo)轉(zhuǎn)化為用戶行為。

| step 3 找出關(guān)鍵的數(shù)據(jù)指標(biāo)（Metric）

依照用戶的行為表現(xiàn)，觀測(cè)對(duì)應(yīng)的數(shù)據(jù)指標(biāo)，通過這些可量化、可衡量的數(shù)據(jù)指標(biāo)進(jìn)行數(shù)據(jù)分析并指導(dǎo)下一步的優(yōu)化迭代。

1. 進(jìn)入 —— 作為用戶進(jìn)入的頁面，在這一步經(jīng)常發(fā)生的問題是退出，往往會(huì)產(chǎn)生兩個(gè)對(duì)應(yīng)的指標(biāo)

a. 作為用戶在網(wǎng)站或APP的著陸頁，用戶離開為跳出

b. 非網(wǎng)站或APP的著陸頁，用戶離開為退出

往往，在這一行為中“跳出”指標(biāo)可以衡量頁面內(nèi)容傳達(dá)與用戶目的匹配程度，是否符合用戶的心理模型，這也是絕大多數(shù)網(wǎng)站首頁最重要的數(shù)據(jù)指標(biāo)之一。

2. 發(fā)現(xiàn) —— 用戶來到頁面中都要先瀏覽的過程

在這一步，設(shè)計(jì)師關(guān)注的問題是頁面中的用戶視覺流，關(guān)鍵信息能否被用戶快速鎖定。

關(guān)于識(shí)別性的指標(biāo)，歸納出3點(diǎn)來進(jìn)行衡量：

c.人均點(diǎn)擊次數(shù)（適用特殊控件，如篩選器等）

4. 行動(dòng) —— 用戶在站內(nèi)內(nèi)容的點(diǎn)擊

在首頁的分流數(shù)據(jù)中，作為設(shè)計(jì)師主要關(guān)注兩個(gè)指標(biāo)：

a.不同內(nèi)容的點(diǎn)擊占比

b.其后續(xù)路徑中的目標(biāo)轉(zhuǎn)化質(zhì)量

再次回到我們的工作案例中，根據(jù)用戶行為表現(xiàn)拆分成數(shù)據(jù)指標(biāo)。

綜上所示，通過表單可視化、精準(zhǔn)引導(dǎo)、組件升級(jí)的方式，完成項(xiàng)目與設(shè)計(jì)目標(biāo)，最終改版成功。

///

結(jié)語

GSM模型是一種綜合數(shù)據(jù)驗(yàn)證模型，在使用過程中可以結(jié)合頭腦風(fēng)暴、市場(chǎng)調(diào)研、可行性測(cè)試等方式共同使用。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

前言

業(yè)務(wù)性強(qiáng)，內(nèi)容復(fù)雜度高是To B產(chǎn)品的典型特征。新用戶需要快速認(rèn)知平臺(tái)能力并順利上手，老用戶則需感知信息的變化、功能的拓展并迅速響應(yīng)。體系化的幫助是通過在操作的不同階段提供差異化的引導(dǎo)及反饋，助力用戶在應(yīng)用中成長(zhǎng)。

幫助體系是什么

通過大量的案例積累及系統(tǒng)調(diào)研，發(fā)現(xiàn)“幫助”并不是單一的某個(gè)功能，而是一種體系化的能力，需要通過不同手段來實(shí)現(xiàn)。概括來說就是“在產(chǎn)品使用不同階段為用戶提供恰當(dāng)?shù)奶崾九c指引，通過組件的靈活應(yīng)用及能力創(chuàng)新，幫助用戶降低認(rèn)知成本，提升操作效率?！?

用戶對(duì)產(chǎn)品的應(yīng)用周期經(jīng)歷前、中、后三個(gè)階段，每個(gè)階段的設(shè)計(jì)目標(biāo)都各不相同：操作前注重提升用戶的全局認(rèn)知，深化理解，助力精準(zhǔn)觸達(dá)；操作中助力提效，讓用戶知道做什么，怎么做；操作后明確反饋，幫助用戶明確結(jié)果。

操作前：引導(dǎo)用戶深化理解，提升全局認(rèn)知

用戶有新老之分，對(duì)系統(tǒng)的熟悉程度及應(yīng)用訴求不同。因此針對(duì)不同用戶各階段的使用訴求進(jìn)行場(chǎng)景化的拆分，提供差異化幫助。

//幫助用戶深入自主的認(rèn)知平臺(tái)

我們到陌生的地方會(huì)找導(dǎo)視標(biāo)識(shí)或者找人尋求幫助，新用戶到平臺(tái)內(nèi)也會(huì)面臨同樣的困境，遇到問題無從下手時(shí)會(huì)尋找含有【幫助】【客服】字樣的內(nèi)容，那么幫助中心、智能助手這類有明顯特性的功能則會(huì)成為用戶遇到問題時(shí)的第一選擇。通過業(yè)務(wù)思考及行業(yè)調(diào)研，以簡(jiǎn)潔、高效、情感化為目標(biāo)最大化的發(fā)揮其屬性優(yōu)勢(shì)，讓用戶在使用過程中更易理解和接受，平穩(wěn)有效的幫助用戶渡過新手期。

1、幫助中心

幫助中心，一個(gè)時(shí)常被忽略并被嚴(yán)重低估的功能。它是平臺(tái)全量信息集合地，不僅能幫助用戶系統(tǒng)了解平臺(tái)概況，也能引導(dǎo)用戶行為，樹立品牌形象。為保證用戶高效、便捷的獲取幫助信息，在頁面表現(xiàn)上需突出內(nèi)容本身，忌過度裝飾。從設(shè)計(jì)角度來看，一個(gè)好的幫助中心應(yīng)該符合以下條件：框架簡(jiǎn)潔清晰、信息突出并輔以錨點(diǎn)定位。在框架設(shè)計(jì)上一般將頁面分為導(dǎo)航區(qū)、內(nèi)容展現(xiàn)區(qū)兩部分，導(dǎo)航與幫助內(nèi)容對(duì)應(yīng)性強(qiáng)，層級(jí)簡(jiǎn)單，能讓用戶在短時(shí)間內(nèi)了解平臺(tái)能力構(gòu)成；幫助文檔內(nèi)容一般復(fù)雜冗長(zhǎng)，錨點(diǎn)定位可以充當(dāng)文章大綱，輔助用戶精準(zhǔn)定位。

2、智能助手

通過內(nèi)置的幫助和指導(dǎo)性說明來解答用戶使用產(chǎn)品過程中遇到的簡(jiǎn)單、共性問題，降低人工客服響應(yīng)成本。智能助手包含兩部分：入口與懸浮窗口。入口一般懸浮于頁面右下角，點(diǎn)擊后觸發(fā)懸浮窗口。

市面很多助手能力較單一，僅能機(jī)械處理通用問題，無法提供多樣化幫助，很容易讓人覺得是個(gè)沒啥用的擺設(shè)，對(duì)它慢慢失去信任。為重新喚起用戶的信任，需要在設(shè)計(jì)上注入一定的生命力，讓用戶覺得易接受、有選擇、有溫度，從而真正用起來。

1）懸浮窗口能力多元化。作為承載智能助手核心能力的懸浮窗口，優(yōu)化方向有以下三點(diǎn)：首先，智能助手與用戶的交流不再局限于單純的問答，而是根據(jù)賬戶屬性向用戶提供高頻問題集合，并根據(jù)用戶的回應(yīng)拓展更多問題，提供多維化的幫助。這個(gè)主動(dòng)性的幫助不僅讓用戶感受平臺(tái)的溫度，無形中也降低了用戶的思考成本，更快的熟悉平臺(tái)能力。

其次，每個(gè)問題旁邊都提供“是否有用”的按鈕供用戶評(píng)判。此功能不僅為平臺(tái)答案提供了優(yōu)化空間，也強(qiáng)化了用戶對(duì)平臺(tái)建設(shè)的參與度，讓助手與用戶共同成長(zhǎng)。

最后，對(duì)話窗口也可拓展輔助能力，例如常見問題、快訊、快捷入口等，為用戶所想的同時(shí)也提供更便捷的站內(nèi)流動(dòng)通路。

2）入口形象IP化、情感化。除了自身能力外，入口的設(shè)計(jì)則會(huì)提升功能的存在感，從而吸引用戶的關(guān)注。首先品牌ip形象的植入會(huì)讓入口更生動(dòng)，在喚起用戶注意的同時(shí)強(qiáng)化品牌印象。其次擬人化的主動(dòng)問候能提升平臺(tái)的親切感，拉近與用戶的距離。

//助力用戶精準(zhǔn)觸達(dá)

新用戶對(duì)平臺(tái)相對(duì)陌生，恰當(dāng)?shù)囊龑?dǎo)能讓他們快速關(guān)注重點(diǎn)。老用戶對(duì)平臺(tái)的定位及能力相對(duì)熟悉，目標(biāo)性更強(qiáng)，但在應(yīng)用同時(shí)也抱有更高期待。因此恰當(dāng)?shù)囊龑?dǎo)能幫助他們快速了解平臺(tái)變化并精準(zhǔn)觸達(dá)。作為產(chǎn)品設(shè)計(jì)者，也希望對(duì)用戶行為進(jìn)行有意識(shí)引導(dǎo)，讓用戶能發(fā)現(xiàn)、探索平臺(tái)新能力，或能夠按照我們的希望使用產(chǎn)品。公告彈窗、新手引導(dǎo)、全局提示這三類方法可幫助用戶高效獲取信息并助力精準(zhǔn)觸達(dá)。

1、公告彈窗

常用于系統(tǒng)升級(jí)告知，以模態(tài)彈窗表達(dá)，讓用戶聚焦當(dāng)前內(nèi)容并支持跳轉(zhuǎn)了解詳情。公告樣式根據(jù)內(nèi)容細(xì)分為三類：版本更新提示、重點(diǎn)升級(jí)告知、常規(guī)通告，不同類型需根據(jù)信息量多寡差異化表達(dá)。設(shè)計(jì)時(shí)可輔以插圖或其他視覺元素烘托氛圍，并在文案上注入情緒化的表達(dá)，從而提升用戶的關(guān)注度。

1）「版本更新提示」承載簡(jiǎn)單介紹內(nèi)容，讓用戶關(guān)注且快速獲取變更信息。

2）「重點(diǎn)升級(jí)」當(dāng)有若干重要功能更新或新增時(shí)，可用此形式突出重點(diǎn)。

重點(diǎn)內(nèi)容露出建議2-4組為佳，彈窗寬度可根據(jù)內(nèi)容適配。

3）「常規(guī)通告」常用于文案較多的場(chǎng)景。設(shè)計(jì)上需要弱化視覺氛圍，突出內(nèi)容本身。

2、引導(dǎo)類

針對(duì)局部功能升級(jí)的提示說明，一般與元素綁定關(guān)系較強(qiáng)，可讓用戶直觀了解關(guān)注點(diǎn)，提升功能觸達(dá)率。雖然此類引導(dǎo)輕量便捷，容易幫產(chǎn)品提升數(shù)據(jù)指標(biāo)，但要注意適度應(yīng)用。根據(jù)功能重要度、操作復(fù)雜度將引導(dǎo)總結(jié)為分步式、氣泡、閃點(diǎn)、操作示意4類。

1）「分步式引導(dǎo)」常用于頁面多個(gè)功能升級(jí)的引導(dǎo)組。當(dāng)頁面有多個(gè)升級(jí)點(diǎn)，直接平鋪會(huì)讓頁面臃腫不聚焦。為了讓用戶高效獲取信息，建議一次僅顯示一條，通過「下一步」操作，逐步喚出剩余引導(dǎo)。為避免步驟過多導(dǎo)致用戶疲勞，建議最多不超過5步。

2）「氣泡式」相對(duì)輕量的引導(dǎo)，有足夠的提示性但不影響其他功能操作。

3）「閃點(diǎn)提示」微輔助型提示，常與氣泡引導(dǎo)配合使用。在需要關(guān)注的地方閃爍，點(diǎn)擊閃點(diǎn)后喚出關(guān)聯(lián)氣泡提示。不對(duì)用戶造成視覺干擾，又能引起一定的關(guān)注。

4）「操作示意」當(dāng)無法用圖文清晰描述操作路徑時(shí)，以動(dòng)態(tài)形式表達(dá)。

3、全局提示

重點(diǎn)信息的匯總或提示。此類提示完美融合于頁面，醒目且對(duì)操作無干擾，用戶可根據(jù)披露內(nèi)容判斷是否處理。通過警示、徽標(biāo)的應(yīng)用向用戶傳達(dá)信息的變化并提供快速觸達(dá)的能力，無形中提升用戶響應(yīng)效率。

1）「警示」不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部，為用戶順利操作提供指引性幫助。既不打斷用戶當(dāng)前操作，又足夠明顯，一般需手動(dòng)關(guān)閉或事件結(jié)束后自行消失。不同顏色屬性不同：一般藍(lán)色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯(cuò)誤或異常等情況。另外，也可作為反饋應(yīng)用在一些需要明確指示的操作后場(chǎng)景，此處暫不展開討論。

2）「徽標(biāo)」形態(tài)各異的小紅點(diǎn)。常出現(xiàn)在圖標(biāo)、按鈕右上角的紅色圓點(diǎn)、數(shù)字或文字，簡(jiǎn)單且醒目。表示內(nèi)容更新或有待處理的信息，此類提示符合用戶心智，無需教育就能向用戶精準(zhǔn)傳達(dá)提示意圖。

使用時(shí)注意無數(shù)字與有數(shù)字的應(yīng)用場(chǎng)景。有數(shù)字的徽標(biāo)給用戶帶來的心理壓力會(huì)更大，也會(huì)更吸引用戶注意力，同時(shí)需注意數(shù)字長(zhǎng)度控制。

操作中：具體的提示，助力高效填單

存在于操作的具體任務(wù)中，通過提示、推薦、預(yù)置信息等方式降低用戶的認(rèn)知及操作成本，提升填單效率。

//提示說明

1、文案提示 

平鋪在元素附近，對(duì)重點(diǎn)或復(fù)雜功能提供直觀描述或建議。帶有引導(dǎo)性的文案處理，會(huì)促進(jìn)用戶優(yōu)化填寫方案，輸入更合適的內(nèi)容。應(yīng)用類型有三：重點(diǎn)提示、輔助說明、占位提示。重點(diǎn)提示與輔助說明使用戶無需猜測(cè)；占位提示可使用戶能夠快速明確輸入規(guī)則。因表達(dá)側(cè)重不同，表單設(shè)計(jì)時(shí)三者搭配效果更佳。

2、工具提示

此類信息作為文本解釋層級(jí)較低，無需直接展示。通過懸浮或點(diǎn)擊元素觸發(fā)對(duì)應(yīng)說明，以氣泡形式出現(xiàn)。觸發(fā)式的展現(xiàn)既能避免非必要信息堆疊導(dǎo)致的頁面臃腫，又能保證需要的時(shí)候有跡可循。

//智能化

當(dāng)一個(gè)系統(tǒng)背后的產(chǎn)品設(shè)計(jì)者考慮足夠全面，能夠預(yù)判用戶的預(yù)期，那么它就能主動(dòng)的給用戶提供建議和幫助，甚至幫助用戶自動(dòng)執(zhí)行一些任務(wù)，最大化減輕用戶的決策壓力。但值得注意的是，“智能化”需要一定的產(chǎn)品能力及豐富的數(shù)據(jù)作為支撐，設(shè)計(jì)時(shí)需結(jié)合實(shí)際情況應(yīng)用。

1、信息預(yù)置

系統(tǒng)根據(jù)賬戶屬性自動(dòng)為用戶預(yù)置內(nèi)容。如下左圖可見，僅需要填寫一條內(nèi)容，其他對(duì)用戶利益無損的內(nèi)容可通過預(yù)置選項(xiàng)來提升填單效率。

2、智能推薦

此類設(shè)計(jì)的前提是平臺(tái)有足夠的數(shù)據(jù)積累，通過大數(shù)據(jù)或業(yè)務(wù)特色為備選內(nèi)容打標(biāo)簽建標(biāo)識(shí)。常用的設(shè)計(jì)方法有兩種-為用戶提供可視化標(biāo)簽，助力用戶快速?zèng)Q策；交互手段簡(jiǎn)化，由多信息錄入變?yōu)橹苯舆x擇，強(qiáng)化推薦內(nèi)容展示性，從而降低操作中的思考和錄入成本。

場(chǎng)景一：「幫助決策」

表單中有大量需要用戶錄入的字段，在無任何參考的情況下用戶用于決策的時(shí)間及輸入內(nèi)容的合規(guī)性無疑對(duì)填單效率造成一定影響。下圖可見推薦標(biāo)簽?zāi)軒陀脩籼峁┓较蚣斑吔?，輔助用戶決策，降低思考成本。

場(chǎng)景二：「提升填單效率」

以單元?jiǎng)?chuàng)建為例，傳統(tǒng)路徑如下：新建>填寫表單>保存>再次新建>再次填寫表單…以此往復(fù)。用戶每建立一個(gè)單元均需要把同類型的內(nèi)容填寫一遍，耗時(shí)費(fèi)力。而智能推薦將常規(guī)表單輸入變?yōu)槟０孢x擇，僅需2步就可完成多個(gè)內(nèi)容創(chuàng)建：輸入關(guān)鍵詞>選擇模版。選擇和瀏覽的成本遠(yuǎn)遠(yuǎn)低于數(shù)據(jù)的頻繁輸入，模版設(shè)計(jì)則通過簡(jiǎn)潔的樣式及內(nèi)容層次化的展現(xiàn)提升信息獲取效率。通過路徑及交互方式的轉(zhuǎn)變，上線后數(shù)據(jù)反饋操作效率大幅提升。

3、預(yù)覽能力

當(dāng)操作過程較為復(fù)雜或結(jié)果難以預(yù)測(cè)時(shí)，可視化的預(yù)覽可及時(shí)展現(xiàn)結(jié)果樣式，方便用戶實(shí)時(shí)調(diào)整，提升操作安全感。

操作后：及時(shí)有效的反饋

及時(shí)響應(yīng)操作成果，將功能的運(yùn)行情況、數(shù)據(jù)的對(duì)錯(cuò)反饋給用戶，及時(shí)有效的幫助修復(fù)輸入中的問題。常見的反饋有以下四類：toast、表單錯(cuò)誤校驗(yàn)、模態(tài)彈窗、獨(dú)占式頁面，每種樣式因干預(yù)強(qiáng)度不同而適用不同的場(chǎng)景。

1、Toast：一般3s左右消失，因體積小、展示位置靠上、自動(dòng)消失等特點(diǎn)時(shí)常被用戶忽視。常用于操作結(jié)果、系統(tǒng)性等等無明確后續(xù)指引的反饋，例如“提交成功”、“操作失敗”、“服務(wù)器無反應(yīng)”。

2、錯(cuò)誤校驗(yàn)：當(dāng)表單出現(xiàn)輸入錯(cuò)誤時(shí)，按照就近原則在錯(cuò)誤附近為用戶展示明確的提示性消息，糾正和引導(dǎo)用戶的輸入內(nèi)容。

3、彈窗提示：提示性和阻斷性都很強(qiáng)，能夠讓用戶聚焦信息本身。通常提示內(nèi)容可為用戶提供指向性引導(dǎo)，需要強(qiáng)關(guān)注。

4、獨(dú)占式反饋：提交后頁面切變?yōu)楠?dú)立展示的頁面級(jí)狀態(tài)反饋。比彈窗的阻斷性更強(qiáng)，信息獲取更沉浸。在設(shè)計(jì)時(shí)建議搭配狀態(tài)插圖強(qiáng)化氛圍，并提供操作按鈕為用戶提供通路。

章尾總結(jié)

幫助體系的出發(fā)點(diǎn)就是在盡量降低人為干預(yù)的基礎(chǔ)上，減少用戶在不同使用階段中的刻意思考與尋找，從而提升操作的順暢性及用戶的認(rèn)可度。綜上就是在不同操作階段可用到的設(shè)計(jì)方法，盡管有些手段并不起眼，但也正是這些點(diǎn)滴的聚集和系統(tǒng)的應(yīng)用為用戶帶來無聲的幫助，讓B端產(chǎn)品使用體驗(yàn)變得高效且富有溫度。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

序言

設(shè)計(jì)師在接觸一個(gè)新的業(yè)務(wù)領(lǐng)域時(shí)，會(huì)習(xí)慣性地通過競(jìng)品研究快速地了解行業(yè)，通過對(duì)比競(jìng)品快速地找到體驗(yàn)優(yōu)化機(jī)會(huì)點(diǎn)。但B端產(chǎn)品具有專業(yè)性強(qiáng)、功能復(fù)雜度高和操作鏈路長(zhǎng)的特點(diǎn)，即便有競(jìng)品可以對(duì)照，B端設(shè)計(jì)師也很難在短時(shí)間內(nèi)深刻理解業(yè)務(wù)邏輯，做出超越性的設(shè)計(jì)。

應(yīng)該如何去打破這個(gè)困局呢？除了深耕業(yè)務(wù)和修煉基本功外，本文嘗試從預(yù)判設(shè)計(jì)、表達(dá)清晰、操作可控 三個(gè)方面提供了一些助力B端產(chǎn)品體驗(yàn)提升的小妙招。

一、預(yù)判設(shè)計(jì)

在團(tuán)隊(duì)活動(dòng)時(shí)，從搭檔的一個(gè)眼神我們就能預(yù)判他接下來的動(dòng)作，相互的默契配合能讓我們順利地完成任務(wù)，在產(chǎn)品設(shè)計(jì)中的預(yù)判設(shè)計(jì)也可以得到事半功倍的效果。

我們可以從歷史記錄、效果預(yù)知、智能輔助和行為慣性4個(gè)方面進(jìn)行設(shè)計(jì)，輔助用戶決策，提升操作效率。

1.歷史記錄

a.用戶操作行為記錄

廣告優(yōu)化師通常會(huì)管理幾十至上百個(gè)賬號(hào)，需要在多個(gè)賬號(hào)之間頻繁切換去盯盤和新建廣告，頻繁的操作難免會(huì)造成信息遺忘和決策卡頓，從而會(huì)影響操作效率。在管理后臺(tái)的設(shè)計(jì)中可以通過記錄用戶最近操作行為，恰合時(shí)宜地為用戶提供幫助。

案例：在新建計(jì)劃環(huán)節(jié)，標(biāo)識(shí)出本賬號(hào)上次的選擇記錄（最近一次的投放目標(biāo)），輔助優(yōu)化師快速做決策。

b.基于操作習(xí)慣的系統(tǒng)預(yù)測(cè)

平臺(tái)系統(tǒng)可基于個(gè)體操作習(xí)慣和大數(shù)據(jù)分析來預(yù)測(cè)用戶需求，提供高概率的操作建議，給予用戶貼心指導(dǎo)。

案例：針對(duì)廣告平臺(tái)表格信息密集，不易快速獲取關(guān)鍵指標(biāo)的問題，Google提供了用戶自定義欄，而Facebook的表格欄會(huì)根據(jù)用戶列操作習(xí)慣和自定義欄行為進(jìn)行大數(shù)據(jù)分析，預(yù)置一些高頻意圖的組合欄，一鍵切換即可查看關(guān)鍵指標(biāo)，操作更便捷。

2.效果預(yù)知

a.效果預(yù)覽

表單頁對(duì)填寫的物料內(nèi)容進(jìn)行映射，展示真實(shí)效果預(yù)覽，降低用戶心理的不確定性。

案例：在進(jìn)行廣告創(chuàng)意創(chuàng)建的過程中，優(yōu)化師填寫完標(biāo)題和上傳完物料后很難知道廣告投放到手機(jī)端用戶看的真實(shí)效果。而所見即所得的可視化編輯方法支持創(chuàng)意樣式實(shí)時(shí)預(yù)覽，可以輔助優(yōu)化師更好地進(jìn)行創(chuàng)意優(yōu)化。

b.效益預(yù)估

針對(duì)一些需要效力評(píng)估的頁面，平臺(tái)通過預(yù)置好的算法對(duì)用戶內(nèi)容的表達(dá)及時(shí)給出估算值，給出建議，從而提高內(nèi)容填寫質(zhì)量，降低填寫的盲目性。

案例：Google廣告平臺(tái)在新建創(chuàng)意環(huán)節(jié)，對(duì)廣告素材資源的組合方式和數(shù)量進(jìn)行估算，呈現(xiàn)當(dāng)前廣告與高質(zhì)量廣告設(shè)置的差距，輔助用戶進(jìn)行高質(zhì)量的廣告制作。

3.智能輔助

用戶在進(jìn)行輸入等操作時(shí)可以提供智能輔助，例如表單填寫時(shí)對(duì)需要錄入信息的區(qū)域提供輔助提示，通過自動(dòng)補(bǔ)全或聯(lián)想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。

4.行為慣性

在一些場(chǎng)景里，用戶的行為具有很強(qiáng)的關(guān)聯(lián)慣性，例如上班時(shí)間進(jìn)到辦公區(qū)域打開辦公APP首要目的一般是打卡簽到。通過梳理主線任務(wù)或整理用戶體驗(yàn)地圖可以挖掘出很多基于行為預(yù)判的設(shè)計(jì)機(jī)會(huì)點(diǎn)。

案例：預(yù)判用戶在工作臺(tái)內(nèi)截屏后大概率是去反饋遇到的問題，適時(shí)將反饋入口透出，可以提高反饋的效率和用戶體驗(yàn)。

二、表達(dá)清晰

現(xiàn)實(shí)生活中，在與他人交往時(shí)，清晰的表達(dá)尤為重要。同樣是演講，有的演講者“詞不達(dá)意”沒有重點(diǎn)，或者內(nèi)容晦澀難懂讓聽眾感覺索然無味；而好的演講者則會(huì)用場(chǎng)景化的方式將邏輯復(fù)雜的事情講給聽眾，讓聽眾有身臨其境的畫面感。

好的設(shè)計(jì)也應(yīng)該是清晰好用的，能讓用戶沉浸其中輕松高效地完成自己的任務(wù)。

如何讓用戶通俗易懂地了解產(chǎn)品功能，并能快速上手？我們可以從功能易理解、內(nèi)容強(qiáng)吸引和選擇無負(fù)擔(dān)三個(gè)方面來降低用戶的操作門檻。

1.功能易理解

a.術(shù)語轉(zhuǎn)換

將一些晦澀難懂的詞匯轉(zhuǎn)化表達(dá)方式，轉(zhuǎn)化為更貼近用戶視角的文案描述，傳遞細(xì)節(jié)感受；

b.信息有效展示

透過需求背后的真實(shí)意圖分析和高效率的信息展示可以讓用戶更方便地獲取更多信息，提升產(chǎn)品的服務(wù)效益。

案例：服務(wù)器預(yù)警平臺(tái)從傳統(tǒng)的表格形式優(yōu)化成拓?fù)鋱D。將所有的云服務(wù)器都抽象成一個(gè)個(gè)矩形，矩形的顏色代表服務(wù)器監(jiān)控指標(biāo)的狀況。當(dāng)方塊顏色顯示為黃色，則表示該云服務(wù)器內(nèi)有監(jiān)控指標(biāo)出現(xiàn)了異常，這個(gè)時(shí)候目標(biāo)用戶就需要重點(diǎn)關(guān)注。

2.內(nèi)容強(qiáng)吸引

對(duì)于老用戶來說，從之前習(xí)慣的平臺(tái)遷移到新的平臺(tái)一般會(huì)有很大的抵觸心理。遷移前用戶考慮的關(guān)鍵點(diǎn)包括：不遷移是否有影響？新平臺(tái)有什么優(yōu)勢(shì)嗎？遷移起來麻煩嗎？

以百度營(yíng)銷客戶中心遷移引導(dǎo)頁方案為例，初期方案首屏只告訴用戶平臺(tái)升級(jí)了，但是不能快速了解到升級(jí)后的核心優(yōu)勢(shì)有哪些，同時(shí)遷移按鈕設(shè)計(jì)得很弱，傳達(dá)的信息是遷移可能會(huì)很麻煩，很容易讓用戶止步于此。

所以在進(jìn)入遷移導(dǎo)流頁面時(shí)，首屏首先要講清楚新版平臺(tái)的能力和遷移方式。對(duì)于當(dāng)下想遷移的用戶，明確遷移方式和入口；對(duì)于徘徊不定的用戶，告知遷移后的好處并做好最后下線時(shí)間的提示。這些信息不僅能夠消除用戶遷移前關(guān)于成本的顧慮，也能吸引用戶立即開始遷移行動(dòng)。

3.選擇無負(fù)擔(dān)

B端產(chǎn)品操作鏈路通常比較長(zhǎng)，用戶很容易迷失其中。對(duì)于邏輯復(fù)雜的功能在做頁面設(shè)計(jì)時(shí)需要突出主次和流程引導(dǎo)，盡可能提供一個(gè)主要觸發(fā)的主按鈕，讓客戶不用過多思考就知道模塊和操作的隸屬關(guān)系，降低認(rèn)知的負(fù)擔(dān)。

三、操作可控

我們?cè)趫?zhí)行任務(wù)時(shí)總是希望有過往經(jīng)驗(yàn)可借鑒，如果事情按照自己的預(yù)期發(fā)展了會(huì)覺得很踏實(shí)有可控感。同理，用戶在操作一個(gè)系統(tǒng)界面時(shí)也會(huì)有類似的心理變化，對(duì)于自己熟悉的功能希望主動(dòng)權(quán)在自己手里，能復(fù)用之前的經(jīng)驗(yàn)無需額外的學(xué)習(xí)成本；對(duì)自己不熟悉的功能希望有及時(shí)的引導(dǎo)，能很快地上手并能掌握主動(dòng)權(quán)。

不可控的操作體驗(yàn)會(huì)讓用戶在使用過程中產(chǎn)生很強(qiáng)的挫敗感，一旦有了這樣的心理感受就很難被扭轉(zhuǎn)。那如何保障體驗(yàn)的基線確保用戶正向的感受呢？下面就結(jié)合操作一致性和明確指引性兩方面進(jìn)行說明。

1.操作一致性

針對(duì)同類型的功能，在交互設(shè)計(jì)上要盡可能地保持邏輯對(duì)齊，保證平臺(tái)的一致性同時(shí)降低用戶的學(xué)習(xí)成本。一致性設(shè)計(jì)對(duì)產(chǎn)研提效也有很大的益處。

案例：下例中的批量操作項(xiàng)的邏輯，都是通過選中復(fù)選框之后在模塊上方展示批量操作欄且支持一鍵關(guān)閉。這樣該平臺(tái)的用戶無論在任何場(chǎng)景下只要注意到復(fù)選框就對(duì)批量操作功能有了預(yù)期，沒有額外的學(xué)習(xí)成本。

2.明確指引性

對(duì)于復(fù)雜的使?流程，最好能夠在客戶使?的過程中建立統(tǒng)一的指引，引導(dǎo)客戶?步步完成操作，從而提高任務(wù)的完成率，促成業(yè)務(wù)目標(biāo)達(dá)成。

案例：當(dāng)一個(gè)平臺(tái)需要用戶完成的任務(wù)繁多且流程性強(qiáng)時(shí)，需要把所有的核心任務(wù)按照層級(jí)進(jìn)行呈現(xiàn)，并作為一個(gè)固定模塊展示在醒目位置。這樣用戶既可全局視角理解業(yè)務(wù)又能作為功能入口快速觸達(dá)。

寫在最后

B端業(yè)務(wù)中，交互設(shè)計(jì)的核心在于為特定場(chǎng)景設(shè)計(jì)擇優(yōu)的行為路徑；通過分析用戶當(dāng)前所處的階段和場(chǎng)景來判斷此刻遇到的關(guān)鍵問題。針對(duì)不同的問題去選擇對(duì)應(yīng)的解決策略，例如對(duì)于新手來說降門檻會(huì)是首要任務(wù)，對(duì)于熟手來說操作的效率會(huì)顯得更為重要。結(jié)合預(yù)判設(shè)計(jì)、表達(dá)清晰、操作可控三個(gè)維度的案例可以讓我們?cè)趯?duì)業(yè)務(wù)理解有限的情況下，產(chǎn)品設(shè)計(jì)能有更多思考角度，也能有更明確的設(shè)計(jì)主張。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

隨著媒體發(fā)展，商業(yè)廣告和產(chǎn)品運(yùn)營(yíng)活動(dòng)設(shè)計(jì)中，五花八門的創(chuàng)意層出不窮，那么如何衡量商業(yè)廣告和產(chǎn)品運(yùn)營(yíng)活動(dòng)設(shè)計(jì)的創(chuàng)意質(zhì)量，如何向受眾準(zhǔn)確的傳播產(chǎn)品的理念，如何判斷用戶是否接收到了產(chǎn)品的理念，是設(shè)計(jì)中所面臨的重要挑戰(zhàn)。因此我們需要通過用戶研究來對(duì)設(shè)計(jì)效果做出衡量，在廣告?zhèn)鞑ヮI(lǐng)域，針對(duì)品牌創(chuàng)意廣告，有相對(duì)成熟的方法論實(shí)踐，MEUX用研將通過本篇文章聚焦廣告前測(cè)用戶模型，分享該模型的指標(biāo)體系及應(yīng)用方式，為設(shè)計(jì)和研究工作提供借鑒思路。

///

一、品牌廣告前測(cè)的價(jià)值

一支廣告片的誕生通常需要經(jīng)過一個(gè)漫長(zhǎng)的階段，從創(chuàng)意產(chǎn)生到初版動(dòng)畫廣告，再到成片拍攝及投放，這其中的成本動(dòng)輒幾百到幾千萬。進(jìn)行廣告前測(cè)會(huì)為品牌營(yíng)銷節(jié)約大量資金，對(duì)溝通和廣告創(chuàng)意的研究可以有效提升傳播效果，避免拍攝出來的廣告“自說自話”，而且在越早的階段介入其產(chǎn)生的收益越大。

所以很多品牌會(huì)在初版廣告成型時(shí)，會(huì)在消費(fèi)者端進(jìn)行測(cè)試，通過消費(fèi)者對(duì)于廣告的反饋和建議，來進(jìn)一步修改和調(diào)整方案，最終輸出廣告成片和投放市場(chǎng)。據(jù)凱度BrandZ統(tǒng)計(jì)，使用廣告前測(cè)的品牌比未使用廣告前測(cè)的品牌每500GRP（收視率）可多賣出180萬單位，且長(zhǎng)期品牌價(jià)值也在持續(xù)增長(zhǎng)。

///

二、廣告創(chuàng)意前測(cè)關(guān)鍵指標(biāo)定義

既然廣告前測(cè)對(duì)于品牌如此之重要，那么我們要如何衡量廣告創(chuàng)意的好壞以及如何完善和修改呢？接下來跟大家介紹廣告前測(cè)的用戶研究框架：

通過三個(gè)關(guān)鍵維度可對(duì)廣告進(jìn)行診斷：信息傳遞、廣告穿透力、說服力。

· 維度一：信息傳遞

衡量廣告成功與否的一大基石就是創(chuàng)意需要與品牌以及所要傳遞的信息緊密聯(lián)系在一起。消費(fèi)者的思維容量是有限的，所以只有最顯著的最相關(guān)的信息才會(huì)被記住，因此我們要確保信息是故事線的核心或者是整支廣告中最有趣的部分，這樣才能使品牌/產(chǎn)品信息感知及記憶程度更加深刻。

信息傳遞通?？梢詥柧砘蛟L談的方式，向消費(fèi)者在提示狀態(tài)下（以及無提示狀態(tài)下）對(duì)信息的回憶狀況來進(jìn)行評(píng)估：

無提示印象：請(qǐng)您把這個(gè)廣告的所有內(nèi)容從頭至尾,包括您所看到的、聽到的,以及整個(gè)故事情節(jié)是如何串連起來的,都詳細(xì)地描述一遍好嗎？

提示后印象：這個(gè)廣告留給你的關(guān)于這個(gè)品牌的印象中最深刻的是哪一個(gè)？廣告還留給您其他什么關(guān)于品牌的印象嗎？

· 維度二：廣告穿透力

廣告穿透力指標(biāo)是由品牌關(guān)聯(lián)度、喜歡程度、投入程度三個(gè)細(xì)分指標(biāo)組成。品牌關(guān)聯(lián)度是這支廣告是否具有穿透力的基礎(chǔ)，喜歡程度和投入程度則是好的廣告的區(qū)隔點(diǎn)。

品牌關(guān)聯(lián)度通過廣告是不是吸引人，品牌是否能夠讓人記住，是否與品牌很好的連接來判定強(qiáng)弱，較強(qiáng)的品牌關(guān)聯(lián)度是造就廣告強(qiáng)大穿透力的基石；具體的實(shí)踐通常使用問卷打分方法計(jì)算。

喜歡程度是通過這個(gè)廣告是否使人愉悅，是否能夠帶動(dòng)消費(fèi)者的情緒來判定；具體的實(shí)踐通常使用問卷打分方法計(jì)算。

而投入程度則通過是否激發(fā)了消費(fèi)者的興趣和投入感來判斷，具體的實(shí)踐通常使用面部編碼（facial coding）方法計(jì)算，受訪者越投入，面部表情對(duì)廣告的反應(yīng)就越多，可以直接通過受訪者觀看視頻的面部表情來衡量他們的情感反應(yīng)，針對(duì)不同的情緒（如驚訝、厭惡、微笑、傻笑等），會(huì)有各自的表達(dá)力曲線賦予不同的分值。

當(dāng)我們得到品牌關(guān)聯(lián)度、喜歡程度、投入程度三個(gè)維度分?jǐn)?shù)之后，通過將分?jǐn)?shù)擬合，得出廣告穿透力指數(shù)(Brand impact Index)。

· 維度三：廣告說服力

廣告說服力由短期購(gòu)買意向和長(zhǎng)期品牌影響兩個(gè)細(xì)分指標(biāo)組成。

短期購(gòu)買意向通過詢問消費(fèi)者廣告對(duì)其考慮該產(chǎn)品的購(gòu)買會(huì)產(chǎn)生怎樣的影響來衡量，具體表現(xiàn)在價(jià)格考慮（Persuasion Price）、行動(dòng)意愿（Call to Action）維度。長(zhǎng)期品牌影響通過詢問消費(fèi)者看過廣告后對(duì)于品牌的印象來衡量，具體表現(xiàn)在品牌吸引力（Brand Appeal）、品牌獨(dú)特性（Distinctiveness）維度。

最后通過將分?jǐn)?shù)擬合，得出綜合的說服力指標(biāo)(Persuasion Score)。

///

三、廣告前測(cè)指標(biāo)歸屬

當(dāng)我們得出廣告穿透力指數(shù)(Brand impact Index)和說服力指標(biāo)(Persuasion Score)之后要如何衡量呢？如何知道廣告是否能夠投放的標(biāo)準(zhǔn)呢？這時(shí)我們會(huì)將兩個(gè)指標(biāo)放入九宮格中進(jìn)行驗(yàn)證，通常落在“非常好“區(qū)域的廣告對(duì)于傳播效果和市場(chǎng)份額均有較大的正面影響。

更進(jìn)一步，我們也可以通過不同的細(xì)分人群來確定這個(gè)廣告是否更受我們的目標(biāo)人群（Target Audience）喜愛。例如某廣告分別測(cè)試了不同性別的用戶對(duì)于廣告創(chuàng)意的反應(yīng)，發(fā)現(xiàn)該廣告在男性數(shù)值落在了“非常好“，但是女性數(shù)值落在了一般，這說明廣告目前的創(chuàng)意對(duì)于女性消費(fèi)者來說接受度比較低，仍然需要進(jìn)一步改進(jìn)。

改進(jìn)的方向可從各個(gè)細(xì)分維度當(dāng)中尋找線索，比如在上述例子中分析發(fā)現(xiàn)，在投入程度的面部編碼微笑曲線中（如左圖），女性消費(fèi)者對(duì)這支廣告中產(chǎn)品的呈現(xiàn)方式不太能接受，會(huì)感到害羞，因此大部分微笑曲線低于男性消費(fèi)者，而相對(duì)來說厭惡曲線（如右圖）比較高，從而導(dǎo)致穿透力指數(shù)較低。

///

四、結(jié)語

以上是廣告創(chuàng)意前測(cè)指標(biāo)方面的一些分享，這套方法論既可以成套使用在品牌視頻廣告創(chuàng)意中，也可以在其他的設(shè)計(jì)創(chuàng)意中酌情提取部分指標(biāo)單獨(dú)使用，我們也將秉持探索精神，隨著調(diào)研目的、用戶需求和市場(chǎng)發(fā)展變化不斷迭代更新模型和方法論，更科學(xué)有效的提升設(shè)計(jì)和研究?jī)r(jià)值。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX    來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

刷刷手機(jī)看看今天又發(fā)生了什么熱點(diǎn)大事，已經(jīng)成為現(xiàn)代人茶余飯后消遣時(shí)間的主要方式，而搜索熱點(diǎn)區(qū)別于其他社區(qū)類產(chǎn)品，最大的優(yōu)勢(shì)是能夠把大家關(guān)注的事件始末及相關(guān)知識(shí)服務(wù)快速聚合起來，幫助用戶更全面的掌握信息。設(shè)計(jì)師作為連接用戶與信息之間的紐帶，在項(xiàng)目實(shí)踐中也進(jìn)行了系列的設(shè)計(jì)探索，除助力平臺(tái)高效聚合呈現(xiàn)信息外，并以更豐富的設(shè)計(jì)層次詮釋熱點(diǎn)，幫助用戶更便捷的獲取所需。

///

設(shè)計(jì)思考及詮釋方法

我們先要去了解用戶是如何消費(fèi)熱點(diǎn)內(nèi)容的，基于用戶情景認(rèn)知鏈路分析用戶在事件消費(fèi)的鏈路，可以分為三個(gè)重要節(jié)點(diǎn)：1.熱點(diǎn)環(huán)境的感知；2.熱點(diǎn)事件的理解；3.事件觀點(diǎn)的產(chǎn)生。

結(jié)合用戶的消費(fèi)路徑，我們將設(shè)計(jì)邏輯框架拆分為三個(gè)層級(jí)：

1.氛圍背景層：分層呈現(xiàn)熱度氛圍，輔助用戶感知熱點(diǎn)環(huán)境；

2.信息內(nèi)容層：精細(xì)化拼裝管理，幫助用戶理解熱點(diǎn)事件；

3.功能互動(dòng)層：輕互動(dòng)玩法設(shè)計(jì)，激發(fā)用戶參與抒發(fā)事件觀點(diǎn)。

1. 熱點(diǎn)環(huán)境感知：分層呈現(xiàn)熱度氛圍

從氛圍表現(xiàn)層面，助力用戶更快速的辨別事件的熱度及重要程度。設(shè)計(jì)師結(jié)合搜索熱點(diǎn)使用場(chǎng)景以及業(yè)務(wù)時(shí)效性配置訴求，歸類了兩種設(shè)計(jì)表現(xiàn)層次：1.日常熱度氛圍 2. 大事件熱度氛圍

1）第一個(gè)層次：日常熱度氛圍

主要應(yīng)用于熱點(diǎn)新聞場(chǎng)景，時(shí)效性要求高，同時(shí)事件熱度也會(huì)在：“發(fā)酵--爆發(fā)--消退” 間實(shí)時(shí)變化，設(shè)計(jì)根據(jù)熱度“強(qiáng)弱”程度需求，劃分兩檔視覺展現(xiàn)階梯，以自動(dòng)化的方式展現(xiàn)，滿足熱度的實(shí)時(shí)變化需求，輔助用戶感知當(dāng)前事件熱度。“低熱氛圍”弱標(biāo)簽設(shè)計(jì)用以展現(xiàn)上升/今日熱點(diǎn)，“高熱氛圍”色彩背景通頂效果+上榜標(biāo)簽用以展現(xiàn)上榜熱點(diǎn)。

如，“馬斯克收購(gòu)?fù)铺亍?，搜索熱度持續(xù)上升，以第一階梯-標(biāo)簽方式展示低熱氛圍；在 “馬斯克收購(gòu)?fù)铺亍?的事件熱度不斷增長(zhǎng)，成為熱榜事件后，以第二階梯 - 高熱氛圍自動(dòng)匹配 ，通過背景及榜單標(biāo)簽的呈現(xiàn)，明確告知用戶當(dāng)前事件的火熱程度。

2）第二個(gè)層次：大事件熱度氛圍

主要應(yīng)用于熱點(diǎn)大事件或運(yùn)營(yíng)活動(dòng)場(chǎng)景，個(gè)性化展現(xiàn)要求高，同時(shí)事件關(guān)注度及重要程度也不同，設(shè)計(jì)根據(jù)事件的關(guān)注度及重要程度劃分為兩檔階梯，以人工配置的方式展現(xiàn)，超強(qiáng)的運(yùn)營(yíng)氛圍，可以讓用戶充分感知當(dāng)前事件的重要程度，“A級(jí)氛圍”頭部疊加場(chǎng)景元素設(shè)計(jì)用以展現(xiàn)大事件，“S級(jí)氛圍”整頁沉浸式視覺設(shè)計(jì)用以展現(xiàn)重大事件。

如，冬奧會(huì)，重大事件，選用第二階梯 S級(jí)氛圍，打造超強(qiáng)的運(yùn)營(yíng)大事件會(huì)場(chǎng)認(rèn)知。

///

前置突發(fā)大事件氛圍設(shè)計(jì)

近幾年我們不斷的經(jīng)歷各類突發(fā)大事件，如：疫情/暴雨/名人逝世等等，每次突然發(fā)生的事件都讓設(shè)計(jì)師措手不及，匆忙產(chǎn)出運(yùn)營(yíng)氛圍設(shè)計(jì)方案緊急上線，保時(shí)效就很難保障質(zhì)量，因此我們?cè)谙肽懿荒芸偨Y(jié)事件類型提前儲(chǔ)備設(shè)計(jì)，以備不時(shí)之需。

不同突發(fā)事件會(huì)牽動(dòng)網(wǎng)友不同的情感情緒，比如河南暴雨，我們?yōu)槭茈y同胞擔(dān)心，為救助工作加油，為逝者哀悼；火箭發(fā)射成功，我們驕傲喝彩；名人結(jié)婚，我們送上溫馨的祝福。不同事件帶來不同的情感情緒，也要求設(shè)計(jì)師要用準(zhǔn)確的視覺語言表達(dá)。

因此我們?cè)谇爸迷O(shè)計(jì)時(shí)也充分考慮了事件情感因素，通過對(duì)近一年突發(fā)大事件的歸類梳理，并推導(dǎo)不同細(xì)分場(chǎng)景下的用戶情緒，通過情緒分類的方式，總結(jié)兩種視覺設(shè)計(jì)表達(dá)形式：1.實(shí)景圖合成效果滿足嚴(yán)肅/莊重/權(quán)威場(chǎng)景情感需求；2.手繪效果滿足積極/歡快/慶祝場(chǎng)景的情感需求。結(jié)合以上思路我們共儲(chǔ)備6大類20個(gè)子分類場(chǎng)景的前置氛圍+金剛位等運(yùn)營(yíng)物料設(shè)計(jì)，保障突發(fā)熱點(diǎn)運(yùn)營(yíng)設(shè)計(jì)質(zhì)效。

截至22年Q1，前置設(shè)計(jì)已在38個(gè)熱點(diǎn)場(chǎng)景應(yīng)用：

2. 熱點(diǎn)事件理解：內(nèi)容精細(xì)化拼裝管理

為滿足用戶不同事件場(chǎng)景下的信息需求，設(shè)計(jì)結(jié)合百度搜索：主要內(nèi)容區(qū)（主要需求滿足）+ 延展內(nèi)容區(qū)（延展需求滿足）的綜合聚合能力，通過組件分區(qū)布局+精細(xì)化規(guī)則管理，為熱點(diǎn)場(chǎng)景內(nèi)容的高效拼裝打好體驗(yàn)基礎(chǔ)。

1）主要內(nèi)容區(qū)

主要內(nèi)容區(qū)，能夠幫助用戶快速了解事件的主題、時(shí)間及主要內(nèi)容，結(jié)合熱點(diǎn)事件長(zhǎng)期的需求沉淀，設(shè)計(jì)將主要內(nèi)容區(qū)又細(xì)分為主題區(qū)域及內(nèi)容區(qū)域。主題區(qū)域可承載拼裝事件主題、事件倒計(jì)時(shí)、會(huì)場(chǎng)分發(fā)導(dǎo)航等主題類組件；內(nèi)容區(qū)域可承載拼裝圖文/視頻/直播等事件主體內(nèi)容分發(fā)組件。通過不同區(qū)域內(nèi)組件拼裝規(guī)則的制定，業(yè)務(wù)可以快速選擇所需組件進(jìn)行頁面組織拼裝，達(dá)成分場(chǎng)景個(gè)性化滿足用戶主需求的目標(biāo)。

如：元宵晚會(huì)，熱點(diǎn)主要內(nèi)容區(qū) 以“ 晚會(huì)直播時(shí)間倒計(jì)時(shí)+ 各衛(wèi)視晚會(huì)分會(huì)場(chǎng)導(dǎo)航+圖文內(nèi)容 ” 組件支撐起重大晚會(huì)預(yù)熱期的事件主需求滿足。

因?yàn)橛性O(shè)計(jì)拼裝規(guī)則，不同大事件活動(dòng)，各場(chǎng)景內(nèi)容可個(gè)性化滿足需求，交互布局設(shè)計(jì)上又可兼顧橫向一致性。

2）延展內(nèi)容區(qū)

延展內(nèi)容區(qū)，能夠幫助用戶了解事件相關(guān)知識(shí)信息或提供事件相關(guān)服務(wù)。業(yè)務(wù)可根據(jù)事件場(chǎng)景需求，選擇多個(gè)延展內(nèi)容模板與主要內(nèi)容區(qū)進(jìn)行拼裝，搭建完整頁面以呈現(xiàn)不同熱點(diǎn)事件內(nèi)容。

如：俄烏戰(zhàn)爭(zhēng)-戰(zhàn)事場(chǎng)景，脈絡(luò)卡幫助用戶快速了解事件進(jìn)展 ；冬奧會(huì)-賽事場(chǎng)景，數(shù)據(jù)卡幫助可視化呈現(xiàn)賽事進(jìn)展；博鰲亞洲論壇-會(huì)議場(chǎng)景，百科卡幫助用戶科普相關(guān)名詞知識(shí)。

3. 事件觀點(diǎn)產(chǎn)生-輕互動(dòng)玩法強(qiáng)化參與感

通過氛圍打造和內(nèi)容組織，已經(jīng)達(dá)成用戶需求滿足的目標(biāo)，但到此截止，搜索結(jié)果的體驗(yàn)還是理智疏遠(yuǎn)單向的，搜索場(chǎng)景與用戶、用戶與用戶間也無法產(chǎn)生對(duì)當(dāng)前熱點(diǎn)的討論與態(tài)度表達(dá)。因此設(shè)計(jì)師對(duì)用戶的互動(dòng)行為認(rèn)知習(xí)慣進(jìn)行分析，并采取具體的設(shè)計(jì)策略逐步引導(dǎo)用戶參與互動(dòng)。

1）互動(dòng)喚醒 - 吸引圍觀增強(qiáng)互動(dòng)意愿

優(yōu)化前的熱搜結(jié)果頁，用戶的討論內(nèi)容都是隱藏在資訊落地頁評(píng)論區(qū)內(nèi)，需要點(diǎn)擊進(jìn)內(nèi)容落地頁內(nèi)才能參與“圍觀”或“討論”，除互動(dòng)氛圍已脫離當(dāng)前場(chǎng)景外，也削弱了用戶對(duì)此事件表態(tài)的參與積極性。

通過彈幕滾動(dòng)+輸入框組件組合外顯的交互設(shè)計(jì)方式，將用戶討論外露，不僅豐富熱點(diǎn)事件搜索場(chǎng)景的內(nèi)容維度，同時(shí)基于從眾心理，進(jìn)一步刺激用戶的參與欲望。彈幕結(jié)合事件類型配色來更好貼合熱點(diǎn)事件整體環(huán)境氛圍。

2）情緒抒發(fā)-輕互動(dòng)玩法降低互動(dòng)門檻

而投票表態(tài)+彈幕輕互動(dòng)組合效果設(shè)計(jì)，能進(jìn)一步降低用戶交互心理門檻，讓用戶動(dòng)一動(dòng)手指就可以參與其中。在表態(tài)/投票抒發(fā)情感的同時(shí)也可以發(fā)彈幕聊聊對(duì)當(dāng)前熱點(diǎn)事件的看法，使用戶互動(dòng)情緒表達(dá)更充分。

3）驚喜反饋-強(qiáng)化視效打造記憶點(diǎn)

原有設(shè)計(jì)風(fēng)格，無法在去世祭奠、頒發(fā)勛章等莊重嚴(yán)肅場(chǎng)景精準(zhǔn)的表達(dá)視覺情感，無互動(dòng)反饋狀態(tài)僅有互動(dòng)前后狀態(tài)變化。

結(jié)合熱點(diǎn)場(chǎng)景積極外放情緒及莊重內(nèi)斂情緒，視覺主要從形/質(zhì)兩個(gè)維度進(jìn)行優(yōu)化升級(jí)，并增加互動(dòng)反饋動(dòng)效，同時(shí)運(yùn)營(yíng)可結(jié)合具體事件主題配置，綜合提升互動(dòng)驚喜效果，打造產(chǎn)品記憶點(diǎn)。

視覺層：通過更立體的形態(tài)和更豐富的層次質(zhì)感，更精準(zhǔn)的表達(dá)情感

動(dòng)效反饋層：以主圖形+輔助元素，通過符合場(chǎng)景氛圍的動(dòng)態(tài)效果設(shè)計(jì)，更充分的表達(dá)情感

運(yùn)營(yíng)主題配置：在日常反饋基礎(chǔ)上，增加運(yùn)營(yíng)主題配置層級(jí)，為特定主題場(chǎng)景提供定制反饋效果

///

寫在最后

通過熱點(diǎn)環(huán)境感知分層呈現(xiàn)、內(nèi)容組件合理布局拼裝滿足等設(shè)計(jì)手段，助力搜索平臺(tái)以更高效豐富的內(nèi)容展現(xiàn)形態(tài)應(yīng)對(duì)全年3萬+熱點(diǎn)大事件運(yùn)營(yíng)。會(huì)場(chǎng)拼裝呈現(xiàn)系統(tǒng)的應(yīng)用場(chǎng)景也在不斷擴(kuò)展，如營(yíng)銷活動(dòng)、品牌造節(jié)等。設(shè)計(jì)不會(huì)止步于此，我們將基于用戶需求不斷探索深耕，為用戶呈現(xiàn)更快速、準(zhǔn)確、全面、有溫度的搜索熱點(diǎn)體驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司