從紙質(zhì)閱讀到屏幕閱讀，通過理解用戶從紙質(zhì)到屏幕閱讀行為的轉(zhuǎn)變，我們從傳統(tǒng)中文排印經(jīng)驗中吸取對字體、間距、標(biāo)點的處理方式，跨越平面與UI不同終端的設(shè)計規(guī)范和實現(xiàn)手段。在UI設(shè)計的語境中調(diào)整中文排版策略，優(yōu)化手機百度圖文閱讀場景設(shè)計，提升手百用戶的閱讀體驗。
· 屏幕閱讀與紙質(zhì)閱讀不同
人的閱讀習(xí)慣會根據(jù)閱讀環(huán)境而改變，包括文本的書寫格式、文本的媒介、語言符號等?；谄聊坏拈喿x行為，往往表現(xiàn)了如下特征：很少人會一字一句閱讀頁面，更多的是在瀏覽、關(guān)鍵詞確認(rèn)、非線性閱讀、有選擇性的閱讀。
· 設(shè)計差異點
UI設(shè)計與書籍排版不同之處在于：
第一、屏幕上可以實現(xiàn)更多的交互功能，增強了閱讀的沉浸感和交互體驗。
第二、UI設(shè)計不可控因素更多。平面排版紙張和內(nèi)容固定可控，可以保證設(shè)計的精準(zhǔn)展示。但在UI設(shè)計中，想讓頁面達到和原本設(shè)計一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內(nèi)容的靈活可變，都讓最后的展示效果多了很多不可預(yù)期。這就是為什么會有很多排版優(yōu)秀的印刷品設(shè)計，但UI中優(yōu)秀的排版設(shè)計卻特別少。
因此，針對屏幕閱讀的設(shè)計要注意：不能照搬文字排版規(guī)則，更要充分考慮屏幕與內(nèi)容的靈活可變，確保設(shè)計方案可實際落地。
· 明確設(shè)計目標(biāo)
本次設(shè)計改版主要針對手機百度——圖文落地頁部分，希望通過優(yōu)化文字展現(xiàn)、內(nèi)容排版提升閱讀體驗。
CEA閱讀體驗?zāi)Ｐ蛯⒂脩舻拈喿x體驗分為舒適、效率、吸引三個緯度。
舒適（Comfort)：視覺負(fù)擔(dān)低，信息適量，看著不累、沒有信息壓迫感
效率（Efficiency）：重點信息突出，直觀性強，容易識別
吸引（Attraction）：頁面設(shè)計美觀，有吸引力
基于此模型，此次優(yōu)化方案中我們確定的設(shè)計目標(biāo)是：優(yōu)化內(nèi)容可讀性；提升閱讀效率；提升頁面美觀度。
· 優(yōu)化內(nèi)容可讀性
· 選擇屏顯友好字體
屏顯字體與印刷用字體最大的不同在于，屏顯字體受限于分辨率，無法做到印刷字體那么多細(xì)節(jié)的設(shè)計。目前屏顯漢字的設(shè)計方式一般是：
1、從字體的結(jié)構(gòu)入手，擴大中宮的設(shè)計，字形設(shè)計看起來舒適放松，提升辨識度，相較于中宮內(nèi)縮的字體，呈現(xiàn)現(xiàn)代的明亮感。
2、字形簡潔，平直少細(xì)節(jié)的筆畫有助于提高字體本身的辨識。
遍歷手百用戶常用手機的默認(rèn)字體，系統(tǒng)默認(rèn)字體都是使用屏顯友好字體。
· 選擇字重更全的字體
與紙質(zhì)閱讀相比，用戶在在屏幕閱讀中，會經(jīng)常進行掃讀、關(guān)鍵詞確認(rèn)，而不是像在紙質(zhì)書上一字一句的讀。
目前我們提供給作者的能夠做重點信息區(qū)別的方式包括：文字加粗、風(fēng)格化二級標(biāo)題。但我們發(fā)現(xiàn)目前在一些安卓手機上，一些字體在增加字重后出現(xiàn)沾粘情況，不能保證可讀性。
字重，即字形的重量，字重的等級用來標(biāo)明同一字體家族不同粗細(xì)筆畫的字形。
但通常一個特定的字體家族僅會包含少數(shù)的可用重量。若一個指定的字重不存在時，CSS會就近匹配其他字重：較重的字重映射到更重的重量、較輕的字重會映射到更輕的重量。
目前落地頁代碼中字體的設(shè)置，安卓使用的第一順位的字體字重僅2檔字重，所以在小字場景和分辨率較低的安卓機型上，會匹配到更粗的字重，出現(xiàn)文字沾粘的情況。
我們調(diào)整了font-family中的字體適配順位，在安卓端優(yōu)先適配字重更全的字體，保證安卓端加粗字體的展現(xiàn)，優(yōu)化內(nèi)容可讀性。
· 提升閱讀效率
· 優(yōu)化字間距和行間距
閱讀場景下，文字的間距是影響閱讀效率的關(guān)鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。
根據(jù)當(dāng)前現(xiàn)狀，再結(jié)合行業(yè)設(shè)計經(jīng)驗，我們選擇了字號與行高倍數(shù)組合的一系列方案，進行了眼動實驗和用戶訪談，確定用戶可接受的行間距為1.50-1.70的范圍，再通過對比不同機型下的屏幕顯示效果，以及不同檔位字體顯示效果、閱讀效率，最后確定了圖文落地頁正文文字在當(dāng)前方案基礎(chǔ)上縮字間距為0，擴大行間距1.70倍行號的設(shè)計方案。
· 段落間距適配字號
圖文落地頁的定位是長文閱讀場景，作者發(fā)文長度的中位數(shù)是600-700字的范圍，以目前用戶使用量最多的iPhone11舉例，600-700字的文章長度為2屏（純文字，無圖情況）。
對于長文閱讀，用戶往往是缺乏耐心的。為讓用戶減少對長文的“畏懼感”，調(diào)整文章段落間距，一篇長文通過合理的分段，成為一段一段的短文，每結(jié)束一段短文，用戶都有機會進行休息并獲得滿足感。
出于屏效考慮，當(dāng)前圖文落地頁段落間距不論用戶使用哪一檔字號，都為一個固定值。所以在調(diào)大字號的模式下，段落間距小，用戶難以區(qū)分；在小字模式下，段落間距又太大，降低了屏效。
優(yōu)化段落間距的設(shè)定，段落間距應(yīng)隨著字號的變化對應(yīng)做出變大或變小的調(diào)整。調(diào)整后的最大字號與最小字號段落間距都更合適，閱讀節(jié)奏更好。
· 頁面美觀，提升吸引力
書籍排版中“微觀字體排印”中一直都關(guān)注字距、行距、標(biāo)點符號等排版調(diào)整，這些排印規(guī)則大部分源于文字本身的規(guī)律，排版風(fēng)格和規(guī)范，并不隨著設(shè)計潮流而輕易改變，是需要在所有媒介上都應(yīng)遵循的規(guī)則。但是現(xiàn)在的UI排版中幾乎都沒有遵循，這也是我們經(jīng)常覺得UI頁面上的中文排版看起來不精致的原因。
通過學(xué)習(xí)W3C《中文排版需求》《中華人民共和國國家標(biāo)準(zhǔn)-標(biāo)點符號的用法》等中文排版規(guī)范文檔中對標(biāo)點等微觀排版的調(diào)整思路，并結(jié)合UI場景落地，希望從細(xì)節(jié)處提升頁面美觀度和吸引力。
· 優(yōu)化標(biāo)題，突出內(nèi)容
在標(biāo)點使用規(guī)范中對標(biāo)題中標(biāo)點符號的使用有嚴(yán)格的定義：標(biāo)題的作用是概括表明文章內(nèi)容，一般標(biāo)題中除書名號、引號等表示專用名詞的符號外，不應(yīng)該出現(xiàn)標(biāo)點符號，題中停頓可用空格表示。如確實因需要表明語意而必須使用標(biāo)點符號時，應(yīng)使用同號的半角標(biāo)點，標(biāo)題末尾除問號或嘆號外，一般不使用其他標(biāo)點符號。
但在實際UI界面中，我們無法在生產(chǎn)端對作者使用的不規(guī)范標(biāo)點符號進行逐一的確認(rèn)、修正。UI需要的是展示規(guī)則，保證多種內(nèi)容最后都能有良好的視覺呈現(xiàn)。
在不修改作者不規(guī)范標(biāo)點使用的前提下，優(yōu)化標(biāo)題中標(biāo)點符號的寬度：將標(biāo)題中引號、書名號使用半角標(biāo)點；連續(xù)標(biāo)點將前一位標(biāo)點使用半角標(biāo)點，其余標(biāo)點不變，目的是在保持標(biāo)題基本閱讀節(jié)奏感的同時，減少標(biāo)點在標(biāo)題中的占位，突出標(biāo)題內(nèi)容。
· 標(biāo)點首尾禁則
在中文排版規(guī)則中，為了保持閱讀順暢、體例一致，多數(shù)標(biāo)點符號的位置有限制，通常一個標(biāo)點符號依其性質(zhì)，禁止出現(xiàn)在行首或行尾。這項規(guī)則自活字排版時代開始通行。在中文排版里面這項標(biāo)點規(guī)則叫“標(biāo)點首尾禁則”。
如何執(zhí)行這種標(biāo)點規(guī)避，平面排版中處理遵守“先推入，后推出”原則，即不希望標(biāo)點符號出現(xiàn)在行首時，應(yīng)在已經(jīng)標(biāo)點擠壓的基礎(chǔ)上再次檢查是否有機會將其擠到前一行，如沒有擠壓機會再從前一行取最后一個字至下一行。前行多出來的空間需按照優(yōu)先順序拉伸，最后沒有拉伸機會再按平均拉大字距的方式處理。
但“先推入，后推出”原則在UI場景中實現(xiàn)難度太大，意味著在判斷每個標(biāo)點位置的時候，還需要進行多次邏輯判斷，技術(shù)成本太高。因此我們以效率優(yōu)先，將“先推入，后推出”原則修改為“推出式標(biāo)點避頭尾”，即從上一行推出一個字排在下行的行首，避免行首、行末出現(xiàn)禁排的標(biāo)點符號。
雖然由“先推入，后推出”退階為“僅推出式標(biāo)點避頭尾”，但整體文章還是避免了標(biāo)點出現(xiàn)在行首尾情況，遵循了中文排版基礎(chǔ)規(guī)范。
· 連續(xù)標(biāo)點擠壓
中文的標(biāo)點符號通常占1個字符寬度，便于識別、配置和排版，但當(dāng)頁面中連續(xù)出現(xiàn)2個及以上的標(biāo)點符號的時候，文章上會出現(xiàn)一塊空白，這些空洞會使在閱讀時候增加文字間距，使文字過于跳躍，增加讀者理解內(nèi)容的時間，造成腦眼勞累；同時會造成版心灰度的不均衡，影響視覺美感。
標(biāo)點符號字面分為“可調(diào)整”和“不可調(diào)整”兩類，“可調(diào)整”的標(biāo)點符號標(biāo)點本身在字面左、字面右、字面居中，可縮減掉標(biāo)點不占位部分的空間。
不可調(diào)整的標(biāo)點包括：半字連接號、間隔號、分隔號，因為這幾個標(biāo)點固定半個字寬。
在《中文排版標(biāo)準(zhǔn)》里面說明：當(dāng)文中出現(xiàn)連續(xù)標(biāo)點符號排列時，為了使文字更加緊湊、易讀，應(yīng)該對標(biāo)點符號的寬度進行調(diào)整。如果兩個符號占用2個字寬，應(yīng)當(dāng)縮減成1.5個字寬。在此原則上，允許排版風(fēng)格進一步調(diào)整讓兩個符號只占1個字寬。擠壓方向應(yīng)該是標(biāo)點符號緊靠內(nèi)容，擠壓掉離內(nèi)容遠(yuǎn)的空間。
根據(jù)這一原則，我們在代碼中設(shè)置當(dāng)連續(xù)出現(xiàn)兩個及以上的標(biāo)點時，擠壓第二位及以后的標(biāo)點為半角，縮減連續(xù)標(biāo)點時的占位，減少閱讀時候的視覺跳躍，減少文章中出現(xiàn)的“空洞”。
· 完整設(shè)計方案
回顧整個設(shè)計方案，包括了3個部分：
1、對比屏顯字體與印刷字體，結(jié)合字體的字重，優(yōu)化字體家族選擇范圍與展示順位，優(yōu)化內(nèi)容可讀性。
2、通過眼動實驗、可用性測試調(diào)整字間距、行間距和段落間距，優(yōu)化閱讀節(jié)奏，提升閱讀效率。
3、學(xué)習(xí)W3C《中文排版標(biāo)準(zhǔn)》等規(guī)范，吸取中文排印優(yōu)良傳統(tǒng)，通過對內(nèi)容中標(biāo)點符號等微觀細(xì)致的調(diào)整。使正文區(qū)頁面能夠保持字距均勻，版面齊整、灰度均衡。從標(biāo)點細(xì)節(jié)提升頁面美觀度和吸引力。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
當(dāng)我們設(shè)計Web表單時，往往用最直覺的設(shè)計經(jīng)驗本能驅(qū)動我們?nèi)ソ鉀Q一些看似在界面設(shè)計中最簡單的問題，但每每到細(xì)微之處，又會有無數(shù)疑問從細(xì)節(jié)中冒出來給我們的設(shè)計造成困擾。
例如：在表單界面Label（標(biāo)簽） 和 Input（輸入框） 上下還是左右排列合理、Label要不要加冒號、輸入框到底多寬合適等等......
以上這類問題看起來并不影響用戶完成任務(wù)，很久以來也少有人關(guān)心這些細(xì)微之處會不會對用戶有什么影響。
以至于，我表達想寫一篇探究這些細(xì)節(jié)的文章時，同事會偷笑說：你都開始研究標(biāo)簽?zāi)┪惨灰用疤柫藛?.....，太冷了——真是個冷知識！
確實如此，這些偏門、細(xì)碎的內(nèi)容，鮮少有人會去留意和思考。因此我在寫下這些分享內(nèi)容時期望可以達到目標(biāo)是：“冷知識雖然冷，但有用”。用我了解的這些表單設(shè)計冷知識：啟發(fā)你的冷思維、引出你的熱思考。
話不閑聊，我們開始討論第一個問題：
///
01.標(biāo)簽?zāi)┪惨用疤枂?/strong>
有個表單細(xì)節(jié)不知道你有沒有想過，標(biāo)簽?zāi)┪彩欠褚用疤枺?
這個問題在我前團隊發(fā)生過激烈爭論，有同事說：“不要加，占用間距，而且沒人會留意它......”,也有人說：“要加，從含義上講，冒號的作用就是提示上下文或總結(jié)上下文的停頓。加上之后能更好表示標(biāo)簽與輸入域的關(guān)聯(lián)......."。
聽起來好像都有些道理，那到底誰更對呢！
首先，我們追溯一下 Web 發(fā)展史，早期可訪問性核對清單中通常堅持要標(biāo)簽帶冒號，因為屏幕閱讀器一度必須依賴各種技巧才能理解標(biāo)記不明的表單。
而隨著技術(shù)發(fā)展，Web表單使用“l(fā)abel”標(biāo)簽（tag）可以做正確的標(biāo)記，那么屏幕閱讀器就能通過標(biāo)記（markup）把標(biāo)簽（label）和相應(yīng)的字段對應(yīng)起來則無需再借助冒號。
不過在客戶端又有些意外！曾經(jīng) Windows Vista 指南中明確要求使用冒號， Mac Aqua 也有此要求但規(guī)則會稍靈活一些。這種情況是因為某些情況下屏幕閱讀器在桌面環(huán)境與可閱讀源代碼的網(wǎng)頁標(biāo)記相比會遇到一些困難，桌面環(huán)境不會直接顯示代碼。也是這個歷史原因，造成 Vista 和 Aqua 各自都有大量其標(biāo)簽包含冒號的歷史表單。因為實在沒有必要把它們?nèi)扛牡?，直到今天客戶端的表單依舊延續(xù)這一規(guī)則。
通過Web發(fā)展史我們明白表單標(biāo)簽帶冒號的產(chǎn)生是為了解決早期屏幕閱讀器的識別，如今的屏幕閱讀器技術(shù)已轉(zhuǎn)變?yōu)樽R別標(biāo)簽的底層代碼，無需借助這種形式了。所以從這點來看要求標(biāo)簽帶冒號已經(jīng)站不住腳了。
那從情感角度分析標(biāo)簽帶冒號的是否對用戶體驗有影響呢？
回到最開始，我和同事們的爭論……
先簡單說下答案，無任何影響！
在《Web表單設(shè)計·創(chuàng)建高可用性的網(wǎng)頁表單》中，作者（卡羅琳·賈雷特）曾經(jīng)做過大量的表單測試，最終證明從未有一名用戶談?wù)撁疤柺欠癯霈F(xiàn)，即使是有些在其他環(huán)境中很介意標(biāo)點符號的人似乎在線上表單中也未曾注意到。
從以上兩個角度不難發(fā)現(xiàn)，無論是從技術(shù)發(fā)展還是情感體驗，都證明可不必要求表單帶冒號；因為可用性訪問清單不再有這樣的要求，用戶研究也證明幾乎沒有人會留意表單冒號是否出現(xiàn)。
這樣的結(jié)論，看似表單帶冒號是失敗了……，但這并不妨礙它作為一種習(xí)慣或傳統(tǒng)延續(xù)至今，無論在客戶端還是Web設(shè)計系統(tǒng)中仍然常見。例如：蘋果電腦的Mac系統(tǒng)，國內(nèi)阿里的Ant Design Web設(shè)計系統(tǒng)。
因此，得到以下幾點建議：
如果你希望自己的網(wǎng)頁表單與流行的桌面環(huán)境保持一致，請使用冒號。
如果你已有大量使用冒號的表單，請保持繼續(xù)使用下去。
如果你在建立一個新的系統(tǒng)，你也可以索性拋硬幣決定，不過要嚴(yán)格遵循一種方法。
///
02.哪種標(biāo)簽對齊方式更好
在表單中標(biāo)簽與表單域的對齊方式，如果你的團隊已有明確的規(guī)范和使用場景，你只要拿來主義即可?？扇绻程煊赡阒鲗?dǎo)定義一個新的表單規(guī)范時，不知道你會不會重新考慮哪種標(biāo)簽對齊方式更好，怎樣區(qū)分使用場景！
通過科學(xué)實驗發(fā)現(xiàn)，無論是在眼動儀的熱圖，還是在許多可用性測試的觀察結(jié)果中，用戶在填寫網(wǎng)頁表單時視線主要集中在輸入框的左側(cè)。他們的視線幾乎不會落到輸入框的右側(cè)，甚至都不會瞟上一眼。
以此為基礎(chǔ)，我們在網(wǎng)頁表單設(shè)計中有3種最常見的標(biāo)簽對齊方式：頂對齊標(biāo)簽、右對齊標(biāo)簽和左對齊標(biāo)簽。你可能會說還有混合對齊標(biāo)簽、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽等，這些確實存在但并不是最核心的幾種對齊方式，它們基本是在這3種形式上變化，不脫離本質(zhì)。
下面我們逐個分析一下：
1.頂對齊標(biāo)簽：
馬泰奧·彭佐從2006年7月進行眼動研究發(fā)現(xiàn)，從標(biāo)簽移動到輸入框只需50毫秒。比左對齊標(biāo)簽快了10倍，后者需要500毫秒；比右對齊標(biāo)簽方式快2倍，后者高達240秒。能迅速填完頂對齊標(biāo)簽表單的原因之一，是因為眼球只需要在標(biāo)簽和輸入框之間進行上下單向運動。
優(yōu)勢：
最利于減少表單填寫時間（標(biāo)簽和輸入框位置最為靠近）；用戶視線固定，動線一直向下（清晰的完成路徑）；節(jié)省大量橫向空間（可用于以多種方式組合的相關(guān)輸入框）。
劣勢：
占用額外的垂直空間（如果可提供使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對齊標(biāo)簽）；建議使用輸入框50%至75%的高度作為相鄰輸入框間距。
適用場景：
希望用戶快速填寫表單，完成任務(wù)；同時，當(dāng)輸入項存在主次之分時，對標(biāo)簽擴展性要求高。
2.右對齊標(biāo)簽：
如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。馬泰奧·彭佐的眼動研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運動）右對齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時間分別在170毫秒和240毫秒，而填寫完成時間比左對齊快2倍。
優(yōu)勢：
標(biāo)簽與輸入框相鄰（方便快速填寫）。
劣勢：
右對齊布局造成左側(cè)不齊，影響了快速游覽表單的效率問題；若標(biāo)簽文字寬度變寬，右對齊還存在靈活度問題。
適用場景：
既要減少垂直空間，又要加快填寫速度的場景。
3.左對齊標(biāo)簽：
在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費時間較長。根據(jù)馬泰奧·彭佐的研究，典型掃視時間為500毫秒，很長說明用戶經(jīng)歷了沉重的認(rèn)知壓力。
優(yōu)勢：
容易游覽標(biāo)簽；占用垂直空間較少。
劣勢：
標(biāo)簽和輸入框的相鄰間距增大；適合于用戶不熟悉表單要收集的數(shù)據(jù)或問題無法分成易處理的內(nèi)容組，左對齊標(biāo)簽游覽表單問題會更容易。用戶只要上上下下閱讀標(biāo)簽左欄，不會被輸入框打斷。
適用場景：
表單中存在較多的復(fù)雜或敏感信息，希望用戶放慢速度、仔細(xì)思考（在一些注冊類表單中較多使用）。
單從效率角度看，頂對齊標(biāo)簽>右對齊>左對齊，但是根據(jù)應(yīng)用場景，效率快并不是我們選擇標(biāo)簽對齊方式的唯一的指標(biāo)。
因此，得到以下幾點建議：
如果你希望用戶放慢速度，仔細(xì)思考表單中每個表單項，左對齊標(biāo)簽是個好選擇，特別是含有大量可選輸入框或高級設(shè)置的陌生數(shù)據(jù)時；
而頂對齊標(biāo)簽在一些國際化產(chǎn)品的表單設(shè)計時，會有更好的延展性；
至于，右對齊標(biāo)簽雖然與表單域聯(lián)系緊密，便于用戶填寫，但是要考慮好標(biāo)簽的長短不齊如何解決。能否精簡標(biāo)簽內(nèi)容，以及確定好表單與界面的邊距。
///
03.標(biāo)記必填與可選字段的困惑
許多表單設(shè)計中，有個常見問題：是否應(yīng)該標(biāo)記必填字段？如果表單中的大多數(shù)字段或全部都是必填的，我們是否仍然應(yīng)該標(biāo)記它們？
先簡單回答：是肯定的，用戶有時需要通過必填標(biāo)記來評估工作量，了解輸入信息量的最低限度。我會在下面具體解釋原因。
了解不標(biāo)記必填字段的誘惑
通常，設(shè)計師會覺得每個必填字段都有一個標(biāo)記是重復(fù)的、丑陋的、占空間，而且干擾界面，甚至可能看起來很擾亂（有認(rèn)知負(fù)擔(dān)?。?。因此通常采取以下一種或兩種策略：
1.在表單頂部顯示說明，說明中除非另有解釋，否則所有字段都是必填；
2.只標(biāo)記可選字段，因為它們通常較少；
3.在某些特殊情況下，也會什么都不做：相信用戶會神奇地知道需要填寫什么字段；如果不知道，那么只需要點擊提交報錯即可。
這些方法有什么問題？如果你這樣想，我來告訴你
1.用戶一般不喜歡閱讀表單頂部說明。不難想象，用戶不太可能閱讀表單頂部的說明。表單字段需要自給自足，畢竟，每個字段都有特定指令——它的標(biāo)簽，為什么用戶需要閱讀其他任何東西來填寫它呢？
2.即使用戶閱讀了說明，也可能忘記。你可能會說：用戶閱讀了頂部的說明，怎么就會忘記——這么簡單的事情？
的確容易忘記，特別是當(dāng)表單很長或填寫表單被打斷時（這種情況在移動端很常見）。即使用戶記得，但這占用了工作記憶，增加了認(rèn)知負(fù)荷。換句話說，你讓用戶完成任務(wù)更難了。填寫表單本身對用戶來說就相當(dāng)有挑戰(zhàn)性——為什么要讓它更具有挑戰(zhàn)性？
3.用戶必須掃描表單以確定是否為必填字段。不難發(fā)現(xiàn)，無論是否在表單頂部包含說明，結(jié)果都可能相同，用戶會忽略或忘記。他們會掃視表單，找到一個標(biāo)記為必填或可選的標(biāo)識。
而且有些用戶甚至不會費心去環(huán)顧四周，他們只會做出假設(shè)。他們會想——“嗯，郵箱——不需要我的郵箱吧？先空著呢”。即使用戶沒有留空，也不得不暫停來思考一個字段是否需要填寫，減慢交互速度并使過程看起來更長、更乏味。
想要解決以上問題很簡單：標(biāo)記所有必填字段。盡量明確和清晰展示每個必填字段，并標(biāo)記它。當(dāng)然，就像有些設(shè)計師所說：界面出現(xiàn)大量必填標(biāo)識（紅色星號*）確實會增加視覺噪聲。甚至重復(fù)的星號 * 會帶來一些認(rèn)知恐慌。但相比之下，兩害取其輕，這些負(fù)面因素是輕微的。
如何標(biāo)記必填字段？
這里包含至少有兩種方式：星號*（紅色）和“必填”提示。星號*在網(wǎng)頁上已經(jīng)很常見，用戶熟悉其含義。優(yōu)點是它不占用太多空間，也看起來與標(biāo)簽文字足夠不同，所以使用它。
可以使用其他標(biāo)記形式嗎？當(dāng)然可以，但是最好遵循市面上常見的形式（雅各布定律），這樣更符合用戶認(rèn)知。
星號應(yīng)該在字段標(biāo)簽之前還是在字段標(biāo)簽之后？
這不一定有實際影響，但將其放在標(biāo)簽之前的一個原因是，只需掃視標(biāo)簽的最左邊字符，就能輕松定位必填哪些字段。
星號*是一種視覺標(biāo)記，應(yīng)當(dāng)仔細(xì)考慮表單中的標(biāo)識位置。標(biāo)識在標(biāo)簽左邊能指引用戶迅速瀏覽界面，并判斷出必填項。如果在右側(cè)由于輸入框形式、長度各不相同，標(biāo)識和輸入框?qū)R會導(dǎo)致難以瀏覽和判斷。
是否也應(yīng)該標(biāo)記可選字段？
雖然這不是強制性的，但標(biāo)記可選字段確實減輕了用戶思考：如果沒有這個標(biāo)識，用戶要環(huán)顧四周，并根據(jù)其他標(biāo)記字段推斷該字段是可選的。如果“非必填”在字段標(biāo)簽旁邊，那該任務(wù)會變得更容易。不描述可選字段，這沒問題，但這樣做會是一個很好的額外幫助。
為什么登錄表單沒有標(biāo)記必填？
登錄表單很短，一般由兩個字段組成：用戶名和密碼，這兩個字段總是必填的。如果使用星號*，標(biāo)記這些字段的成本很低，并不會出錯。但是，絕大多數(shù)用戶都使用過很多登錄表單，他們是知道要登錄需要輸入郵箱/用戶名和密碼的。所以，在登錄表單中，可以省略這種形式。
而在注冊表中不標(biāo)記必填字段是危險的。注冊表單因產(chǎn)品而異——不同公司在創(chuàng)建帳戶時需要不同類型的信息。它不僅僅包含用戶名和密碼，所以請標(biāo)記所有必填字段（包括用戶名和密碼）。
因此，提出以下幾點建議：
基礎(chǔ)前提，盡量去除任何不需要回答的問題，特別是涉及到用戶隱私的內(nèi)容?？梢愿菀鬃層脩籼钔瓯韱巍?
為了增加表單填寫的機會，請盡量減少用戶需要付出的努力和他們需要記住的信息。有很多方面有助于解決這些問題，但標(biāo)記必填字段（以及可選字段）是最容易的方法之一。
///
04.表單域提供一些默認(rèn)值有必要嗎
先給出答案：這是肯定的！
在《選擇的悖論》一書中，作者巴里·施瓦茨討論了生活中選擇過多的影響。并提出策略應(yīng)付無處不在的過多選擇。他特別敘述了智能默認(rèn)的能量——即在滿足多數(shù)人需要的地方放置選擇——來幫助人們做出明智的選擇。
而在Web表單中也有很多地方能利用智能默認(rèn)減少不必要的選擇次數(shù)或輸入，加速表單完成過程。所以，只要合適就在表單域中預(yù)先為用戶填寫你認(rèn)為他們想要的輸入值。
通過提供合理的默認(rèn)，能有效節(jié)省用戶時間，就是這么簡單。應(yīng)用分擔(dān)了用戶思考或輸入答案的工作。填寫表單永遠(yuǎn)不是一件有趣的事情，如果這個模式能把表單填寫的時間減少一半，用戶會非常感激。
你可能會問：默認(rèn)值不是用戶想要的，誤導(dǎo)用戶怎么辦？
在設(shè)計有默認(rèn)值的表單域時，你要思考默認(rèn)值是否是大多數(shù)用戶可以接受的答案，如果不確信可以先去做一下用戶調(diào)研，了解用戶的心聲。
就算默認(rèn)值真的不是用戶想要的，至少你也為他提供了一個示例來告訴用戶答案應(yīng)該是什么樣子的。這一點也可以節(jié)省用戶幾秒的思考時間——或避免一條錯誤信息。
但并不代表所有的表單域都要給出默認(rèn)值，我們只是盡可能的讓用戶節(jié)省時間。
如何使用：
在第一次向用戶顯示表單時，用一個合理的默認(rèn)值預(yù)先填寫文本框、組合框或者其他控件。也可以使用用戶之前提供給應(yīng)用的信息來動態(tài)地給出默認(rèn)值（例：通過身份證自動識別出生日期；利用郵編，推導(dǎo)出對應(yīng)省/市）。
如果只是因為你覺得不應(yīng)該留下空白的輸入域，那么不要使用默認(rèn)模式。只有當(dāng)你有理由確信絕大部分用戶，在絕大多數(shù)情況下，不會修改這個取值時才提供默認(rèn)值——否則，這將會給用戶帶來額外的工作！
///
05.輸入框的寬度如何設(shè)定
有一個容易被忽視但實則舉重若輕的問題，表單中輸入框?qū)挾热绾卧O(shè)定？
在表單設(shè)計中，對于 Checkbox、Radio 等控件，很明確必須跟隨內(nèi)容自適應(yīng)處理。但對于Input、Select等你會不會產(chǎn)生困惑，是定寬處理還是跟隨內(nèi)容更好。
不知道你是否試圖這么理解過？輸入框作為用戶填寫信息的主要方式，其表現(xiàn)形式是否可以提供給用戶填寫表單的有用線索。
唐納德·諾曼的著作《設(shè)計心理學(xué)》中詳細(xì)講解過心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。
在真實場景中，大部分輸入框是存在理想長度的，那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負(fù)擔(dān)。
下圖就是典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理，反而容易誤導(dǎo)用戶對輸入金額的判斷，造成一種不安全感。
表現(xiàn)形式要為用戶填寫提供有用線索，采用不同長度的文本框提供了暗示；這種暗示是一種有用線索，當(dāng)輸入框長度長短不定時，用戶會很自然地思考為什么這樣；填寫輸入框時會自然考慮這些線索。
請注意！保證暗示效果的同時，不要設(shè)定太多的寬度，反而會讓表單顯得凌亂；太少又會讓表單看起來都像四四方方的盒子。最佳方法是找到適合產(chǎn)品的最佳模度值和數(shù)量。
什么是模度值和數(shù)量呢！
落在具體設(shè)計上要先梳理產(chǎn)品中常見的表單類型，然后設(shè)置一個默認(rèn)寬度。以此為基礎(chǔ)來有規(guī)律的增加長度，并考慮清楚它們的適用場景；從而定義出不同的模度，最終制定出整潔有序的模度規(guī)范。這樣就可以讓一線的設(shè)計師們跳過部分繁瑣磨人的細(xì)節(jié)思考，快速搭建出合適的表單寬度并合理有效。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
設(shè)計語言最底層是項目設(shè)計語言，具有典型特征和主題，比如醫(yī)療項目凸顯專業(yè)冷靜，節(jié)日項目凸顯熱鬧氛圍。往上一層是產(chǎn)品設(shè)計語言，強調(diào)個性品牌，比如小視頻的設(shè)計深色更沉浸，電商從結(jié)構(gòu)到色彩都凸顯熱鬧。很多產(chǎn)品隨著發(fā)展，形成一些系列平臺服務(wù)，平臺設(shè)計語言確保服務(wù)“統(tǒng)一規(guī)范”。最頂層是生態(tài)設(shè)計語言，跨設(shè)備跨平臺和硬件呈現(xiàn)的設(shè)計語言。
設(shè)計動手前，按照風(fēng)格基調(diào)具象化拆解分析必不可少，每一個元素的表達手法都要定位清晰。
圖標(biāo)體系化，多場景驗證一致性，發(fā)現(xiàn)方案一不夠極致，造型復(fù)雜；方案二具備良好的一致性，但破壞了物體固有的結(jié)構(gòu)，影響識別度。
在一致性的前提下，嘗試簡化、提高識別度。巧妙的將光影和結(jié)構(gòu)交匯，極簡到2個圖層呈現(xiàn)主體；語義清晰識別度高；角度漸變光影帶來舒適親和感，15°x角度的精準(zhǔn)把控傳達專業(yè)的品牌特性。因此總結(jié)出圖標(biāo)繪制要遵循的法則為識別性、品牌性、愉悅性、一致性。
初期直播品牌色繼承百度App品牌色，隨著業(yè)務(wù)逐漸中臺化，需要專屬直播色。運用色彩心理學(xué)傳遞給人不同的情緒及心理感受，尋找直播的專屬色相，而活力、溫暖的紅色色調(diào)，更能體現(xiàn)親和有力的產(chǎn)品氣質(zhì)。
紅色也有冷暖之分，此時提高色相、飽和度的顆粒度，H色相以350°為起點，以2°遞增或遞減，S飽和度以5°為階梯，生成更多色階（保持相同B明度100），在多界面和真機驗證，得出直播專屬紅（H350 S80 B100），冷暖適中符合平臺屬性。
這種量身打造的稀缺材質(zhì)運用在運營玩法上，如紅包雨玩法，即能凸顯平臺專業(yè)用心的態(tài)度，又能強化用戶消費行為轉(zhuǎn)化，助力變現(xiàn)增長。
用戶激勵體系，采用3D玉石潤澤質(zhì)感+動態(tài)折射光影，體現(xiàn)有內(nèi)涵不張揚的泛知識調(diào)性，凸顯用戶獨特身份感。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
伴隨短視頻平臺的崛起，移動互聯(lián)網(wǎng)的主流內(nèi)容消費形態(tài)向短視頻視聽語言轉(zhuǎn)變，視頻信息流廣告的時代已經(jīng)來臨。如何通過設(shè)計提升轉(zhuǎn)化，是視頻信息流廣告所面臨的挑戰(zhàn)。
為了提升廣告轉(zhuǎn)化效果，我們結(jié)合實際項目，通過大量的實驗與思考，梳理并總結(jié)了一套適用于視頻信息流廣告的轉(zhuǎn)化組件呈現(xiàn)原則，我們將其命名為“延遲增強”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場景。
///
延遲增強是什么？
視頻信息流廣告有三要素：內(nèi)容、框架、轉(zhuǎn)化組件。其中廣告內(nèi)容來源于廣告主投放的物料，基礎(chǔ)框架需對齊宿主保持一致性，所以僅有承載轉(zhuǎn)化信息和行為的轉(zhuǎn)化組件，是可設(shè)計部分。
而“延遲增強”就是針對“轉(zhuǎn)化組件”的一種伴隨視頻內(nèi)容分階段/漸進式的呈現(xiàn)方式。它由消費者決策時的理想心理動線，結(jié)合廣告行為推導(dǎo)得出，并經(jīng)過實驗驗證了其對于轉(zhuǎn)化提升的有效性。
“延遲增強”包括兩個階段：1.廣告展現(xiàn)初始階段，延遲展現(xiàn)廣告意圖，通過內(nèi)容吸引潛在用戶；2.廣告內(nèi)容逐步呈現(xiàn)階段，轉(zhuǎn)化組件漸進式增強，輔以增益信息，不斷強化，引導(dǎo)轉(zhuǎn)化行為。
它指導(dǎo)了轉(zhuǎn)化組件從“呈現(xiàn)”到“增強”的全流程，從時機（出現(xiàn)&增強時機）/引導(dǎo)（動效&互動引導(dǎo)）/前置（信息&轉(zhuǎn)化前置）三個部分，幫助提升廣告轉(zhuǎn)化效果。
///
時機-延遲增強如何呈現(xiàn)？
轉(zhuǎn)化組件的呈現(xiàn)時機包含“何時展現(xiàn)”與“何時增強”兩個部分，前者幫助增加廣告接收率，后者提升廣告轉(zhuǎn)化率。
01/ 出現(xiàn)時機：
延遲展現(xiàn)廣告意圖，可以提升廣告賣點的展現(xiàn)機率
互聯(lián)網(wǎng)的快速發(fā)展使得受眾被動卷入爆炸式增長的資訊信息體中，廣告借助這一媒介迅速發(fā)展，但也因為部分商業(yè)廣告的過度宣傳與其降低用戶信息獲取便捷性的本質(zhì)，不可避免的使受眾產(chǎn)生了心理上的逆反與抵觸情緒，從源頭拒絕了廣告信息。
所以對廣告來說，在廣告展現(xiàn)初始，延遲展現(xiàn)廣告意圖，融入內(nèi)容，可以緩解受眾的抵觸情緒，提升廣告賣點的展現(xiàn)機率。
02/ 增強時機：
通過用戶行為和視頻特征動態(tài)決定增強時機，可以有效提升轉(zhuǎn)化
對廣告來說，搭配廣告內(nèi)容進行增強，通過內(nèi)容積累購買欲/信任感，然后通過階段性的增強來提示操作，對比一成不變能起到更好的轉(zhuǎn)化效果。
我們首先嘗試了程序化的增強時機，在不增加技術(shù)成本的前提下，根據(jù)歷史經(jīng)驗，面向不同的廣告均采用固定時段的階段性增強。
但不同的廣告物料內(nèi)容不同，不同的用戶偏好也不同，固定的增強時機并不能很好的滿足所有廣告需求。所以在技術(shù)能力可以承載的時候，我們采用了動態(tài)時機策略，通過用戶行為和視頻特征動態(tài)決定增強時機，在程序化增強時機之后，再次實現(xiàn)了轉(zhuǎn)化提升。
///
引導(dǎo)-延遲增強如何引導(dǎo)轉(zhuǎn)化行為？
轉(zhuǎn)化組件如何引導(dǎo)轉(zhuǎn)化，則可分為基礎(chǔ)的視覺引導(dǎo)與進階的互動引導(dǎo)，前者幫助搶奪視覺注意力，后者則能夠在互動體驗中植入部分幫助決策的“小心思”。
01/ 視覺引導(dǎo)：
適當(dāng)增加視覺吸引點，可以有效引導(dǎo)點擊
延遲增強需要通過階段性的增強來提示操作，而如何增強能有效吸引注意則需要琢磨，已有實驗表明轉(zhuǎn)化按鈕增加掃光動效與智能取色，能有效吸引注意，引導(dǎo)點擊，對轉(zhuǎn)化提升有良好效果。
02/ 互動引導(dǎo)：
讓用戶主動選擇，可以增加廣告曝光，輔助轉(zhuǎn)化決策
互聯(lián)網(wǎng)產(chǎn)品設(shè)計對于用戶交互體驗的追求越發(fā)極致，如影視行業(yè)走向可交互網(wǎng)劇，本質(zhì)上是從用戶接收轉(zhuǎn)變?yōu)橛脩糁鲃訁⑴c，用戶本身對于獲得優(yōu)質(zhì)體驗的意識逐漸覺醒。商業(yè)化產(chǎn)品也需要緊跟“體驗”與“互動”，將廣告變?yōu)榛芋w驗或具備使用價值的信息，讓用戶從被動瀏覽到主動參與，掌握對廣告的選擇權(quán)。
以互動投票為例，我們通過用戶與用戶之間的觀點表達，以投票選擇的形式誘發(fā)群體性選擇，引起好奇心與同儕壓力。
若用戶選擇符合群體選擇，則帶來群體性背書，增強信任感；若用戶選擇不符合群體選擇，基于從眾心理，用戶極有可能對群體選擇產(chǎn)生好奇，從而瀏覽兩種選項的內(nèi)容，有效的增加了品牌曝光。
///
前置-延遲增強如何幫助轉(zhuǎn)化達成？
轉(zhuǎn)化組件的前置主要包含信息前置與轉(zhuǎn)化前置，前者輔助轉(zhuǎn)化決策，后者幫助便捷操作，更好更快的完成轉(zhuǎn)化。
01/ 信息前置：
增加增益信息或前置落地頁信息，可以輔助轉(zhuǎn)化決策
購買/轉(zhuǎn)化一定是需要足夠的信息積累信任感才能達成的，在前卡適當(dāng)?shù)脑黾淤u點信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級，二電類廣告可以增加價格信息，甚至可以前置優(yōu)惠劵、圖片banner等信息，均能實現(xiàn)轉(zhuǎn)化的正向提升。
02/ 轉(zhuǎn)化前置：
縮短轉(zhuǎn)化路徑，可以幫助轉(zhuǎn)化行為更便捷的達成
在信任感積累與階段性的增強都達成的時候，在當(dāng)前轉(zhuǎn)化對比跳轉(zhuǎn)落地頁再進行轉(zhuǎn)化，鏈路更短，用戶流失概率更小。比起實驗嘗試，更像是延遲增強的基礎(chǔ)能力配置。
首先，我們針對表單/咨詢/電話/安卓下載都進行了轉(zhuǎn)化前置，具有用戶明確意向的按鈕點擊會直接在當(dāng)前進行反饋。
除了直接將操作前置外，針對不同細(xì)分場景的需求，還可以通過交互形態(tài)的優(yōu)化在感官上縮短路徑。
這里以百度的視頻MAX廣告為例，我們針對重落地頁的商家，將MAX首屏（視頻頁）與H5落地頁的關(guān)系變拼接結(jié)構(gòu)為雙層結(jié)構(gòu)，通過浮層面板承載落地頁，延時自動彈出，強引導(dǎo)下方內(nèi)容，激發(fā)用戶上滑瀏覽興趣，解決了落地頁隱藏較深，轉(zhuǎn)化鏈路過長的問題，同時增加了落地頁曝光從而提升轉(zhuǎn)化。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
常規(guī)工作中，需求往往由PM發(fā)起，UE團隊到底如何跟PM、FE等團隊成員協(xié)同，達成目標(biāo)共識，是我們值得討論的。
因此建立一套科學(xué)的模型，通過對目標(biāo)的設(shè)定來倒推過程，結(jié)合定性和定量研究，與項目組就目標(biāo)可以達成共識，并且更加準(zhǔn)確的反應(yīng)出產(chǎn)品目標(biāo)中的用戶體驗質(zhì)量，這套模型就是GSM模型。
///
GSM模型的簡介與定義
“GSM”是Google提出的一種自上而下度量用戶行為的方法，通常用于衡量產(chǎn)品/項目目標(biāo)的實現(xiàn)程度。通過對目標(biāo)的設(shè)定來倒推過程，精準(zhǔn)設(shè)定指標(biāo)體系的一種量化研究方法。適用于產(chǎn)品設(shè)計中的各個角色。
目標(biāo)：需要解決的問題，通過對產(chǎn)品（項目）目標(biāo)拆解推導(dǎo)出用戶體驗?zāi)繕?biāo)，體驗?zāi)繕?biāo)輔助產(chǎn)品目標(biāo)達成；
信號：設(shè)計目標(biāo)實現(xiàn)后所產(chǎn)生出的現(xiàn)象，設(shè)計目標(biāo)是信號的必要條件；
指標(biāo)：是對用戶現(xiàn)象的量化，也就是信號所得出的可衡量的數(shù)據(jù)化現(xiàn)象。
///
GSM模型的使用場景
GSM模型可適用于產(chǎn)品設(shè)計中的各個角色，對交互設(shè)計師尤為重要，交互設(shè)計師作為連接產(chǎn)品、用戶、設(shè)計的中間一環(huán)，不斷在業(yè)務(wù)和體驗之間博弈，尋找平衡點。
通過GSM模型對產(chǎn)品目標(biāo)進行分析，結(jié)合業(yè)務(wù)目標(biāo)與用戶需求，找到改進機會點，在設(shè)計中幫我們斧正設(shè)計思路，對方案不斷優(yōu)化，上線后進行方案效果回收。
GSM模型帶來的價值
綜上所述，GSM模型基于項目目標(biāo)，找出設(shè)計目標(biāo)。并且可以辨別設(shè)計的優(yōu)良。
///
GSM模型的具體實施步驟
通過對目標(biāo)的設(shè)定來倒推過程，并精準(zhǔn)設(shè)定指標(biāo)體系。
| step 1 識別并明確目標(biāo)（Goal）
業(yè)務(wù)目標(biāo)、用戶目標(biāo)、設(shè)計目標(biāo)是什么？
用戶要完成什么任務(wù)？我們希望他們按照什么路線走？希望他們執(zhí)行什么操作？
這里以手機百度APP智能小程序業(yè)務(wù)端——創(chuàng)建小程序表單項目改版為例，提高表單審核通過率是整個項目目標(biāo)，通過拆分項目，設(shè)計目標(biāo)為表單填寫更快速和表單填寫更準(zhǔn)確。通過確定設(shè)計目標(biāo)繼續(xù)推到用戶表現(xiàn)。
| step 2 推導(dǎo)目標(biāo)對應(yīng)的表現(xiàn)（Signal）
什么用戶行為/態(tài)度指示了目標(biāo)達成？什么樣的感受與目標(biāo)失敗/成功相關(guān)？
從目標(biāo)——信號可以是一對多的關(guān)系，根據(jù)用 戶行為在不同的行為階段會有不同的信號表現(xiàn)，以用戶不同階段觀測用戶的不同行為表現(xiàn)。
進入 —— 通過各種途徑進入頁面
發(fā)現(xiàn) —— 在該頁面中瀏覽、查找自己所需要的信息
辨別 —— 然后通過圖片、標(biāo)題等內(nèi)容以及設(shè)計形式來識別有效信息
行動 —— 找到后用戶想了解詳情，點擊鏈接進入
這里還以手機百度APP智能小程序業(yè)務(wù)端——創(chuàng)建小程序表單項目改版為例，將設(shè)計目標(biāo)轉(zhuǎn)化為用戶行為。
| step 3 找出關(guān)鍵的數(shù)據(jù)指標(biāo)（Metric）
依照用戶的行為表現(xiàn)，觀測對應(yīng)的數(shù)據(jù)指標(biāo)，通過這些可量化、可衡量的數(shù)據(jù)指標(biāo)進行數(shù)據(jù)分析并指導(dǎo)下一步的優(yōu)化迭代。
1. 進入 —— 作為用戶進入的頁面，在這一步經(jīng)常發(fā)生的問題是退出，往往會產(chǎn)生兩個對應(yīng)的指標(biāo)
a. 作為用戶在網(wǎng)站或APP的著陸頁，用戶離開為跳出
b. 非網(wǎng)站或APP的著陸頁，用戶離開為退出
往往，在這一行為中“跳出”指標(biāo)可以衡量頁面內(nèi)容傳達與用戶目的匹配程度，是否符合用戶的心理模型，這也是絕大多數(shù)網(wǎng)站首頁最重要的數(shù)據(jù)指標(biāo)之一。
2. 發(fā)現(xiàn) —— 用戶來到頁面中都要先瀏覽的過程
在這一步，設(shè)計師關(guān)注的問題是頁面中的用戶視覺流，關(guān)鍵信息能否被用戶快速鎖定。
關(guān)于識別性的指標(biāo)，歸納出3點來進行衡量：
c.人均點擊次數(shù)（適用特殊控件，如篩選器等）
4. 行動 —— 用戶在站內(nèi)內(nèi)容的點擊
在首頁的分流數(shù)據(jù)中，作為設(shè)計師主要關(guān)注兩個指標(biāo)：
a.不同內(nèi)容的點擊占比
b.其后續(xù)路徑中的目標(biāo)轉(zhuǎn)化質(zhì)量
再次回到我們的工作案例中，根據(jù)用戶行為表現(xiàn)拆分成數(shù)據(jù)指標(biāo)。
綜上所示，通過表單可視化、精準(zhǔn)引導(dǎo)、組件升級的方式，完成項目與設(shè)計目標(biāo)，最終改版成功。
///
結(jié)語
GSM模型是一種綜合數(shù)據(jù)驗證模型，在使用過程中可以結(jié)合頭腦風(fēng)暴、市場調(diào)研、可行性測試等方式共同使用。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
業(yè)務(wù)性強，內(nèi)容復(fù)雜度高是To B產(chǎn)品的典型特征。新用戶需要快速認(rèn)知平臺能力并順利上手，老用戶則需感知信息的變化、功能的拓展并迅速響應(yīng)。體系化的幫助是通過在操作的不同階段提供差異化的引導(dǎo)及反饋，助力用戶在應(yīng)用中成長。
通過大量的案例積累及系統(tǒng)調(diào)研，發(fā)現(xiàn)“幫助”并不是單一的某個功能，而是一種體系化的能力，需要通過不同手段來實現(xiàn)。概括來說就是“在產(chǎn)品使用不同階段為用戶提供恰當(dāng)?shù)奶崾九c指引，通過組件的靈活應(yīng)用及能力創(chuàng)新，幫助用戶降低認(rèn)知成本，提升操作效率。”
用戶對產(chǎn)品的應(yīng)用周期經(jīng)歷前、中、后三個階段，每個階段的設(shè)計目標(biāo)都各不相同：操作前注重提升用戶的全局認(rèn)知，深化理解，助力精準(zhǔn)觸達；操作中助力提效，讓用戶知道做什么，怎么做；操作后明確反饋，幫助用戶明確結(jié)果。
用戶有新老之分，對系統(tǒng)的熟悉程度及應(yīng)用訴求不同。因此針對不同用戶各階段的使用訴求進行場景化的拆分，提供差異化幫助。
我們到陌生的地方會找導(dǎo)視標(biāo)識或者找人尋求幫助，新用戶到平臺內(nèi)也會面臨同樣的困境，遇到問題無從下手時會尋找含有【幫助】【客服】字樣的內(nèi)容，那么幫助中心、智能助手這類有明顯特性的功能則會成為用戶遇到問題時的第一選擇。通過業(yè)務(wù)思考及行業(yè)調(diào)研，以簡潔、高效、情感化為目標(biāo)最大化的發(fā)揮其屬性優(yōu)勢，讓用戶在使用過程中更易理解和接受，平穩(wěn)有效的幫助用戶渡過新手期。
1、幫助中心
幫助中心，一個時常被忽略并被嚴(yán)重低估的功能。它是平臺全量信息集合地，不僅能幫助用戶系統(tǒng)了解平臺概況，也能引導(dǎo)用戶行為，樹立品牌形象。為保證用戶高效、便捷的獲取幫助信息，在頁面表現(xiàn)上需突出內(nèi)容本身，忌過度裝飾。從設(shè)計角度來看，一個好的幫助中心應(yīng)該符合以下條件：框架簡潔清晰、信息突出并輔以錨點定位。在框架設(shè)計上一般將頁面分為導(dǎo)航區(qū)、內(nèi)容展現(xiàn)區(qū)兩部分，導(dǎo)航與幫助內(nèi)容對應(yīng)性強，層級簡單，能讓用戶在短時間內(nèi)了解平臺能力構(gòu)成；幫助文檔內(nèi)容一般復(fù)雜冗長，錨點定位可以充當(dāng)文章大綱，輔助用戶精準(zhǔn)定位。
2、智能助手
通過內(nèi)置的幫助和指導(dǎo)性說明來解答用戶使用產(chǎn)品過程中遇到的簡單、共性問題，降低人工客服響應(yīng)成本。智能助手包含兩部分：入口與懸浮窗口。入口一般懸浮于頁面右下角，點擊后觸發(fā)懸浮窗口。
市面很多助手能力較單一，僅能機械處理通用問題，無法提供多樣化幫助，很容易讓人覺得是個沒啥用的擺設(shè)，對它慢慢失去信任。為重新喚起用戶的信任，需要在設(shè)計上注入一定的生命力，讓用戶覺得易接受、有選擇、有溫度，從而真正用起來。
1）懸浮窗口能力多元化。作為承載智能助手核心能力的懸浮窗口，優(yōu)化方向有以下三點：首先，智能助手與用戶的交流不再局限于單純的問答，而是根據(jù)賬戶屬性向用戶提供高頻問題集合，并根據(jù)用戶的回應(yīng)拓展更多問題，提供多維化的幫助。這個主動性的幫助不僅讓用戶感受平臺的溫度，無形中也降低了用戶的思考成本，更快的熟悉平臺能力。
其次，每個問題旁邊都提供“是否有用”的按鈕供用戶評判。此功能不僅為平臺答案提供了優(yōu)化空間，也強化了用戶對平臺建設(shè)的參與度，讓助手與用戶共同成長。
最后，對話窗口也可拓展輔助能力，例如常見問題、快訊、快捷入口等，為用戶所想的同時也提供更便捷的站內(nèi)流動通路。
2）入口形象IP化、情感化。除了自身能力外，入口的設(shè)計則會提升功能的存在感，從而吸引用戶的關(guān)注。首先品牌ip形象的植入會讓入口更生動，在喚起用戶注意的同時強化品牌印象。其次擬人化的主動問候能提升平臺的親切感，拉近與用戶的距離。
新用戶對平臺相對陌生，恰當(dāng)?shù)囊龑?dǎo)能讓他們快速關(guān)注重點。老用戶對平臺的定位及能力相對熟悉，目標(biāo)性更強，但在應(yīng)用同時也抱有更高期待。因此恰當(dāng)?shù)囊龑?dǎo)能幫助他們快速了解平臺變化并精準(zhǔn)觸達。作為產(chǎn)品設(shè)計者，也希望對用戶行為進行有意識引導(dǎo)，讓用戶能發(fā)現(xiàn)、探索平臺新能力，或能夠按照我們的希望使用產(chǎn)品。公告彈窗、新手引導(dǎo)、全局提示這三類方法可幫助用戶高效獲取信息并助力精準(zhǔn)觸達。
1、公告彈窗
常用于系統(tǒng)升級告知，以模態(tài)彈窗表達，讓用戶聚焦當(dāng)前內(nèi)容并支持跳轉(zhuǎn)了解詳情。公告樣式根據(jù)內(nèi)容細(xì)分為三類：版本更新提示、重點升級告知、常規(guī)通告，不同類型需根據(jù)信息量多寡差異化表達。設(shè)計時可輔以插圖或其他視覺元素烘托氛圍，并在文案上注入情緒化的表達，從而提升用戶的關(guān)注度。
1）「版本更新提示」承載簡單介紹內(nèi)容，讓用戶關(guān)注且快速獲取變更信息。
2）「重點升級」當(dāng)有若干重要功能更新或新增時，可用此形式突出重點。
重點內(nèi)容露出建議2-4組為佳，彈窗寬度可根據(jù)內(nèi)容適配。
3）「常規(guī)通告」常用于文案較多的場景。設(shè)計上需要弱化視覺氛圍，突出內(nèi)容本身。
2、引導(dǎo)類
針對局部功能升級的提示說明，一般與元素綁定關(guān)系較強，可讓用戶直觀了解關(guān)注點，提升功能觸達率。雖然此類引導(dǎo)輕量便捷，容易幫產(chǎn)品提升數(shù)據(jù)指標(biāo)，但要注意適度應(yīng)用。根據(jù)功能重要度、操作復(fù)雜度將引導(dǎo)總結(jié)為分步式、氣泡、閃點、操作示意4類。
1）「分步式引導(dǎo)」常用于頁面多個功能升級的引導(dǎo)組。當(dāng)頁面有多個升級點，直接平鋪會讓頁面臃腫不聚焦。為了讓用戶高效獲取信息，建議一次僅顯示一條，通過「下一步」操作，逐步喚出剩余引導(dǎo)。為避免步驟過多導(dǎo)致用戶疲勞，建議最多不超過5步。
2）「氣泡式」相對輕量的引導(dǎo)，有足夠的提示性但不影響其他功能操作。
3）「閃點提示」微輔助型提示，常與氣泡引導(dǎo)配合使用。在需要關(guān)注的地方閃爍，點擊閃點后喚出關(guān)聯(lián)氣泡提示。不對用戶造成視覺干擾，又能引起一定的關(guān)注。
4）「操作示意」當(dāng)無法用圖文清晰描述操作路徑時，以動態(tài)形式表達。
3、全局提示
重點信息的匯總或提示。此類提示完美融合于頁面，醒目且對操作無干擾，用戶可根據(jù)披露內(nèi)容判斷是否處理。通過警示、徽標(biāo)的應(yīng)用向用戶傳達信息的變化并提供快速觸達的能力，無形中提升用戶響應(yīng)效率。
1）「警示」不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部，為用戶順利操作提供指引性幫助。既不打斷用戶當(dāng)前操作，又足夠明顯，一般需手動關(guān)閉或事件結(jié)束后自行消失。不同顏色屬性不同：一般藍色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯誤或異常等情況。另外，也可作為反饋應(yīng)用在一些需要明確指示的操作后場景，此處暫不展開討論。
2）「徽標(biāo)」形態(tài)各異的小紅點。常出現(xiàn)在圖標(biāo)、按鈕右上角的紅色圓點、數(shù)字或文字，簡單且醒目。表示內(nèi)容更新或有待處理的信息，此類提示符合用戶心智，無需教育就能向用戶精準(zhǔn)傳達提示意圖。
使用時注意無數(shù)字與有數(shù)字的應(yīng)用場景。有數(shù)字的徽標(biāo)給用戶帶來的心理壓力會更大，也會更吸引用戶注意力，同時需注意數(shù)字長度控制。
存在于操作的具體任務(wù)中，通過提示、推薦、預(yù)置信息等方式降低用戶的認(rèn)知及操作成本，提升填單效率。
1、文案提示
平鋪在元素附近，對重點或復(fù)雜功能提供直觀描述或建議。帶有引導(dǎo)性的文案處理，會促進用戶優(yōu)化填寫方案，輸入更合適的內(nèi)容。應(yīng)用類型有三：重點提示、輔助說明、占位提示。重點提示與輔助說明使用戶無需猜測；占位提示可使用戶能夠快速明確輸入規(guī)則。因表達側(cè)重不同，表單設(shè)計時三者搭配效果更佳。
2、工具提示
此類信息作為文本解釋層級較低，無需直接展示。通過懸浮或點擊元素觸發(fā)對應(yīng)說明，以氣泡形式出現(xiàn)。觸發(fā)式的展現(xiàn)既能避免非必要信息堆疊導(dǎo)致的頁面臃腫，又能保證需要的時候有跡可循。
當(dāng)一個系統(tǒng)背后的產(chǎn)品設(shè)計者考慮足夠全面，能夠預(yù)判用戶的預(yù)期，那么它就能主動的給用戶提供建議和幫助，甚至幫助用戶自動執(zhí)行一些任務(wù)，最大化減輕用戶的決策壓力。但值得注意的是，“智能化”需要一定的產(chǎn)品能力及豐富的數(shù)據(jù)作為支撐，設(shè)計時需結(jié)合實際情況應(yīng)用。
1、信息預(yù)置
系統(tǒng)根據(jù)賬戶屬性自動為用戶預(yù)置內(nèi)容。如下左圖可見，僅需要填寫一條內(nèi)容，其他對用戶利益無損的內(nèi)容可通過預(yù)置選項來提升填單效率。
2、智能推薦
此類設(shè)計的前提是平臺有足夠的數(shù)據(jù)積累，通過大數(shù)據(jù)或業(yè)務(wù)特色為備選內(nèi)容打標(biāo)簽建標(biāo)識。常用的設(shè)計方法有兩種-為用戶提供可視化標(biāo)簽，助力用戶快速決策；交互手段簡化，由多信息錄入變?yōu)橹苯舆x擇，強化推薦內(nèi)容展示性，從而降低操作中的思考和錄入成本。
場景一：「幫助決策」
表單中有大量需要用戶錄入的字段，在無任何參考的情況下用戶用于決策的時間及輸入內(nèi)容的合規(guī)性無疑對填單效率造成一定影響。下圖可見推薦標(biāo)簽?zāi)軒陀脩籼峁┓较蚣斑吔?，輔助用戶決策，降低思考成本。
場景二：「提升填單效率」
以單元創(chuàng)建為例，傳統(tǒng)路徑如下：新建>填寫表單>保存>再次新建>再次填寫表單…以此往復(fù)。用戶每建立一個單元均需要把同類型的內(nèi)容填寫一遍，耗時費力。而智能推薦將常規(guī)表單輸入變?yōu)槟０孢x擇，僅需2步就可完成多個內(nèi)容創(chuàng)建：輸入關(guān)鍵詞>選擇模版。選擇和瀏覽的成本遠(yuǎn)遠(yuǎn)低于數(shù)據(jù)的頻繁輸入，模版設(shè)計則通過簡潔的樣式及內(nèi)容層次化的展現(xiàn)提升信息獲取效率。通過路徑及交互方式的轉(zhuǎn)變，上線后數(shù)據(jù)反饋操作效率大幅提升。
3、預(yù)覽能力
當(dāng)操作過程較為復(fù)雜或結(jié)果難以預(yù)測時，可視化的預(yù)覽可及時展現(xiàn)結(jié)果樣式，方便用戶實時調(diào)整，提升操作安全感。
及時響應(yīng)操作成果，將功能的運行情況、數(shù)據(jù)的對錯反饋給用戶，及時有效的幫助修復(fù)輸入中的問題。常見的反饋有以下四類：toast、表單錯誤校驗、模態(tài)彈窗、獨占式頁面，每種樣式因干預(yù)強度不同而適用不同的場景。
1、Toast：一般3s左右消失，因體積小、展示位置靠上、自動消失等特點時常被用戶忽視。常用于操作結(jié)果、系統(tǒng)性等等無明確后續(xù)指引的反饋，例如“提交成功”、“操作失敗”、“服務(wù)器無反應(yīng)”。
2、錯誤校驗：當(dāng)表單出現(xiàn)輸入錯誤時，按照就近原則在錯誤附近為用戶展示明確的提示性消息，糾正和引導(dǎo)用戶的輸入內(nèi)容。
3、彈窗提示：提示性和阻斷性都很強，能夠讓用戶聚焦信息本身。通常提示內(nèi)容可為用戶提供指向性引導(dǎo)，需要強關(guān)注。
4、獨占式反饋：提交后頁面切變?yōu)楠毩⒄故镜捻撁婕墵顟B(tài)反饋。比彈窗的阻斷性更強，信息獲取更沉浸。在設(shè)計時建議搭配狀態(tài)插圖強化氛圍，并提供操作按鈕為用戶提供通路。
幫助體系的出發(fā)點就是在盡量降低人為干預(yù)的基礎(chǔ)上，減少用戶在不同使用階段中的刻意思考與尋找，從而提升操作的順暢性及用戶的認(rèn)可度。綜上就是在不同操作階段可用到的設(shè)計方法，盡管有些手段并不起眼，但也正是這些點滴的聚集和系統(tǒng)的應(yīng)用為用戶帶來無聲的幫助，讓B端產(chǎn)品使用體驗變得高效且富有溫度。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
設(shè)計師在接觸一個新的業(yè)務(wù)領(lǐng)域時，會習(xí)慣性地通過競品研究快速地了解行業(yè)，通過對比競品快速地找到體驗優(yōu)化機會點。但B端產(chǎn)品具有專業(yè)性強、功能復(fù)雜度高和操作鏈路長的特點，即便有競品可以對照，B端設(shè)計師也很難在短時間內(nèi)深刻理解業(yè)務(wù)邏輯，做出超越性的設(shè)計。
應(yīng)該如何去打破這個困局呢？除了深耕業(yè)務(wù)和修煉基本功外，本文嘗試從預(yù)判設(shè)計、表達清晰、操作可控 三個方面提供了一些助力B端產(chǎn)品體驗提升的小妙招。
在團隊活動時，從搭檔的一個眼神我們就能預(yù)判他接下來的動作，相互的默契配合能讓我們順利地完成任務(wù)，在產(chǎn)品設(shè)計中的預(yù)判設(shè)計也可以得到事半功倍的效果。
我們可以從歷史記錄、效果預(yù)知、智能輔助和行為慣性4個方面進行設(shè)計，輔助用戶決策，提升操作效率。
1.歷史記錄
a.用戶操作行為記錄
廣告優(yōu)化師通常會管理幾十至上百個賬號，需要在多個賬號之間頻繁切換去盯盤和新建廣告，頻繁的操作難免會造成信息遺忘和決策卡頓，從而會影響操作效率。在管理后臺的設(shè)計中可以通過記錄用戶最近操作行為，恰合時宜地為用戶提供幫助。
案例：在新建計劃環(huán)節(jié)，標(biāo)識出本賬號上次的選擇記錄（最近一次的投放目標(biāo)），輔助優(yōu)化師快速做決策。
b.基于操作習(xí)慣的系統(tǒng)預(yù)測
平臺系統(tǒng)可基于個體操作習(xí)慣和大數(shù)據(jù)分析來預(yù)測用戶需求，提供高概率的操作建議，給予用戶貼心指導(dǎo)。
案例：針對廣告平臺表格信息密集，不易快速獲取關(guān)鍵指標(biāo)的問題，Google提供了用戶自定義欄，而Facebook的表格欄會根據(jù)用戶列操作習(xí)慣和自定義欄行為進行大數(shù)據(jù)分析，預(yù)置一些高頻意圖的組合欄，一鍵切換即可查看關(guān)鍵指標(biāo)，操作更便捷。
2.效果預(yù)知
a.效果預(yù)覽
表單頁對填寫的物料內(nèi)容進行映射，展示真實效果預(yù)覽，降低用戶心理的不確定性。
案例：在進行廣告創(chuàng)意創(chuàng)建的過程中，優(yōu)化師填寫完標(biāo)題和上傳完物料后很難知道廣告投放到手機端用戶看的真實效果。而所見即所得的可視化編輯方法支持創(chuàng)意樣式實時預(yù)覽，可以輔助優(yōu)化師更好地進行創(chuàng)意優(yōu)化。
b.效益預(yù)估
針對一些需要效力評估的頁面，平臺通過預(yù)置好的算法對用戶內(nèi)容的表達及時給出估算值，給出建議，從而提高內(nèi)容填寫質(zhì)量，降低填寫的盲目性。
案例：Google廣告平臺在新建創(chuàng)意環(huán)節(jié)，對廣告素材資源的組合方式和數(shù)量進行估算，呈現(xiàn)當(dāng)前廣告與高質(zhì)量廣告設(shè)置的差距，輔助用戶進行高質(zhì)量的廣告制作。
3.智能輔助
用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區(qū)域提供輔助提示，通過自動補全或聯(lián)想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
4.行為慣性
在一些場景里，用戶的行為具有很強的關(guān)聯(lián)慣性，例如上班時間進到辦公區(qū)域打開辦公APP首要目的一般是打卡簽到。通過梳理主線任務(wù)或整理用戶體驗地圖可以挖掘出很多基于行為預(yù)判的設(shè)計機會點。
案例：預(yù)判用戶在工作臺內(nèi)截屏后大概率是去反饋遇到的問題，適時將反饋入口透出，可以提高反饋的效率和用戶體驗。
現(xiàn)實生活中，在與他人交往時，清晰的表達尤為重要。同樣是演講，有的演講者“詞不達意”沒有重點，或者內(nèi)容晦澀難懂讓聽眾感覺索然無味；而好的演講者則會用場景化的方式將邏輯復(fù)雜的事情講給聽眾，讓聽眾有身臨其境的畫面感。
好的設(shè)計也應(yīng)該是清晰好用的，能讓用戶沉浸其中輕松高效地完成自己的任務(wù)。
如何讓用戶通俗易懂地了解產(chǎn)品功能，并能快速上手？我們可以從功能易理解、內(nèi)容強吸引和選擇無負(fù)擔(dān)三個方面來降低用戶的操作門檻。
1.功能易理解
a.術(shù)語轉(zhuǎn)換
將一些晦澀難懂的詞匯轉(zhuǎn)化表達方式，轉(zhuǎn)化為更貼近用戶視角的文案描述，傳遞細(xì)節(jié)感受；
b.信息有效展示
透過需求背后的真實意圖分析和高效率的信息展示可以讓用戶更方便地獲取更多信息，提升產(chǎn)品的服務(wù)效益。
案例：服務(wù)器預(yù)警平臺從傳統(tǒng)的表格形式優(yōu)化成拓?fù)鋱D。將所有的云服務(wù)器都抽象成一個個矩形，矩形的顏色代表服務(wù)器監(jiān)控指標(biāo)的狀況。當(dāng)方塊顏色顯示為黃色，則表示該云服務(wù)器內(nèi)有監(jiān)控指標(biāo)出現(xiàn)了異常，這個時候目標(biāo)用戶就需要重點關(guān)注。
2.內(nèi)容強吸引
對于老用戶來說，從之前習(xí)慣的平臺遷移到新的平臺一般會有很大的抵觸心理。遷移前用戶考慮的關(guān)鍵點包括：不遷移是否有影響？新平臺有什么優(yōu)勢嗎？遷移起來麻煩嗎？
以百度營銷客戶中心遷移引導(dǎo)頁方案為例，初期方案首屏只告訴用戶平臺升級了，但是不能快速了解到升級后的核心優(yōu)勢有哪些，同時遷移按鈕設(shè)計得很弱，傳達的信息是遷移可能會很麻煩，很容易讓用戶止步于此。
所以在進入遷移導(dǎo)流頁面時，首屏首先要講清楚新版平臺的能力和遷移方式。對于當(dāng)下想遷移的用戶，明確遷移方式和入口；對于徘徊不定的用戶，告知遷移后的好處并做好最后下線時間的提示。這些信息不僅能夠消除用戶遷移前關(guān)于成本的顧慮，也能吸引用戶立即開始遷移行動。
3.選擇無負(fù)擔(dān)
B端產(chǎn)品操作鏈路通常比較長，用戶很容易迷失其中。對于邏輯復(fù)雜的功能在做頁面設(shè)計時需要突出主次和流程引導(dǎo)，盡可能提供一個主要觸發(fā)的主按鈕，讓客戶不用過多思考就知道模塊和操作的隸屬關(guān)系，降低認(rèn)知的負(fù)擔(dān)。
我們在執(zhí)行任務(wù)時總是希望有過往經(jīng)驗可借鑒，如果事情按照自己的預(yù)期發(fā)展了會覺得很踏實有可控感。同理，用戶在操作一個系統(tǒng)界面時也會有類似的心理變化，對于自己熟悉的功能希望主動權(quán)在自己手里，能復(fù)用之前的經(jīng)驗無需額外的學(xué)習(xí)成本；對自己不熟悉的功能希望有及時的引導(dǎo)，能很快地上手并能掌握主動權(quán)。
不可控的操作體驗會讓用戶在使用過程中產(chǎn)生很強的挫敗感，一旦有了這樣的心理感受就很難被扭轉(zhuǎn)。那如何保障體驗的基線確保用戶正向的感受呢？下面就結(jié)合操作一致性和明確指引性兩方面進行說明。
1.操作一致性
針對同類型的功能，在交互設(shè)計上要盡可能地保持邏輯對齊，保證平臺的一致性同時降低用戶的學(xué)習(xí)成本。一致性設(shè)計對產(chǎn)研提效也有很大的益處。
案例：下例中的批量操作項的邏輯，都是通過選中復(fù)選框之后在模塊上方展示批量操作欄且支持一鍵關(guān)閉。這樣該平臺的用戶無論在任何場景下只要注意到復(fù)選框就對批量操作功能有了預(yù)期，沒有額外的學(xué)習(xí)成本。
2.明確指引性
對于復(fù)雜的使?流程，最好能夠在客戶使?的過程中建立統(tǒng)一的指引，引導(dǎo)客戶?步步完成操作，從而提高任務(wù)的完成率，促成業(yè)務(wù)目標(biāo)達成。
案例：當(dāng)一個平臺需要用戶完成的任務(wù)繁多且流程性強時，需要把所有的核心任務(wù)按照層級進行呈現(xiàn)，并作為一個固定模塊展示在醒目位置。這樣用戶既可全局視角理解業(yè)務(wù)又能作為功能入口快速觸達。
B端業(yè)務(wù)中，交互設(shè)計的核心在于為特定場景設(shè)計擇優(yōu)的行為路徑；通過分析用戶當(dāng)前所處的階段和場景來判斷此刻遇到的關(guān)鍵問題。針對不同的問題去選擇對應(yīng)的解決策略，例如對于新手來說降門檻會是首要任務(wù)，對于熟手來說操作的效率會顯得更為重要。結(jié)合預(yù)判設(shè)計、表達清晰、操作可控三個維度的案例可以讓我們在對業(yè)務(wù)理解有限的情況下，產(chǎn)品設(shè)計能有更多思考角度，也能有更明確的設(shè)計主張。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
隨著媒體發(fā)展，商業(yè)廣告和產(chǎn)品運營活動設(shè)計中，五花八門的創(chuàng)意層出不窮，那么如何衡量商業(yè)廣告和產(chǎn)品運營活動設(shè)計的創(chuàng)意質(zhì)量，如何向受眾準(zhǔn)確的傳播產(chǎn)品的理念，如何判斷用戶是否接收到了產(chǎn)品的理念，是設(shè)計中所面臨的重要挑戰(zhàn)。因此我們需要通過用戶研究來對設(shè)計效果做出衡量，在廣告?zhèn)鞑ヮI(lǐng)域，針對品牌創(chuàng)意廣告，有相對成熟的方法論實踐，MEUX用研將通過本篇文章聚焦廣告前測用戶模型，分享該模型的指標(biāo)體系及應(yīng)用方式，為設(shè)計和研究工作提供借鑒思路。
一支廣告片的誕生通常需要經(jīng)過一個漫長的階段，從創(chuàng)意產(chǎn)生到初版動畫廣告，再到成片拍攝及投放，這其中的成本動輒幾百到幾千萬。進行廣告前測會為品牌營銷節(jié)約大量資金，對溝通和廣告創(chuàng)意的研究可以有效提升傳播效果，避免拍攝出來的廣告“自說自話”，而且在越早的階段介入其產(chǎn)生的收益越大。
所以很多品牌會在初版廣告成型時，會在消費者端進行測試，通過消費者對于廣告的反饋和建議，來進一步修改和調(diào)整方案，最終輸出廣告成片和投放市場。據(jù)凱度BrandZ統(tǒng)計，使用廣告前測的品牌比未使用廣告前測的品牌每500GRP（收視率）可多賣出180萬單位，且長期品牌價值也在持續(xù)增長。
既然廣告前測對于品牌如此之重要，那么我們要如何衡量廣告創(chuàng)意的好壞以及如何完善和修改呢？接下來跟大家介紹廣告前測的用戶研究框架：
通過三個關(guān)鍵維度可對廣告進行診斷：信息傳遞、廣告穿透力、說服力。
· 維度一：信息傳遞
衡量廣告成功與否的一大基石就是創(chuàng)意需要與品牌以及所要傳遞的信息緊密聯(lián)系在一起。消費者的思維容量是有限的，所以只有最顯著的最相關(guān)的信息才會被記住，因此我們要確保信息是故事線的核心或者是整支廣告中最有趣的部分，這樣才能使品牌/產(chǎn)品信息感知及記憶程度更加深刻。
信息傳遞通?？梢詥柧砘蛟L談的方式，向消費者在提示狀態(tài)下（以及無提示狀態(tài)下）對信息的回憶狀況來進行評估：
無提示印象：請您把這個廣告的所有內(nèi)容從頭至尾,包括您所看到的、聽到的,以及整個故事情節(jié)是如何串連起來的,都詳細(xì)地描述一遍好嗎？
提示后印象：這個廣告留給你的關(guān)于這個品牌的印象中最深刻的是哪一個？廣告還留給您其他什么關(guān)于品牌的印象嗎？
· 維度二：廣告穿透力
廣告穿透力指標(biāo)是由品牌關(guān)聯(lián)度、喜歡程度、投入程度三個細(xì)分指標(biāo)組成。品牌關(guān)聯(lián)度是這支廣告是否具有穿透力的基礎(chǔ)，喜歡程度和投入程度則是好的廣告的區(qū)隔點。
品牌關(guān)聯(lián)度通過廣告是不是吸引人，品牌是否能夠讓人記住，是否與品牌很好的連接來判定強弱，較強的品牌關(guān)聯(lián)度是造就廣告強大穿透力的基石；具體的實踐通常使用問卷打分方法計算。
喜歡程度是通過這個廣告是否使人愉悅，是否能夠帶動消費者的情緒來判定；具體的實踐通常使用問卷打分方法計算。
而投入程度則通過是否激發(fā)了消費者的興趣和投入感來判斷，具體的實踐通常使用面部編碼（facial coding）方法計算，受訪者越投入，面部表情對廣告的反應(yīng)就越多，可以直接通過受訪者觀看視頻的面部表情來衡量他們的情感反應(yīng)，針對不同的情緒（如驚訝、厭惡、微笑、傻笑等），會有各自的表達力曲線賦予不同的分值。
當(dāng)我們得到品牌關(guān)聯(lián)度、喜歡程度、投入程度三個維度分?jǐn)?shù)之后，通過將分?jǐn)?shù)擬合，得出廣告穿透力指數(shù)(Brand impact Index)。
· 維度三：廣告說服力
廣告說服力由短期購買意向和長期品牌影響兩個細(xì)分指標(biāo)組成。
短期購買意向通過詢問消費者廣告對其考慮該產(chǎn)品的購買會產(chǎn)生怎樣的影響來衡量，具體表現(xiàn)在價格考慮（Persuasion Price）、行動意愿（Call to Action）維度。長期品牌影響通過詢問消費者看過廣告后對于品牌的印象來衡量，具體表現(xiàn)在品牌吸引力（Brand Appeal）、品牌獨特性（Distinctiveness）維度。
最后通過將分?jǐn)?shù)擬合，得出綜合的說服力指標(biāo)(Persuasion Score)。
當(dāng)我們得出廣告穿透力指數(shù)(Brand impact Index)和說服力指標(biāo)(Persuasion Score)之后要如何衡量呢？如何知道廣告是否能夠投放的標(biāo)準(zhǔn)呢？這時我們會將兩個指標(biāo)放入九宮格中進行驗證，通常落在“非常好“區(qū)域的廣告對于傳播效果和市場份額均有較大的正面影響。
更進一步，我們也可以通過不同的細(xì)分人群來確定這個廣告是否更受我們的目標(biāo)人群（Target Audience）喜愛。例如某廣告分別測試了不同性別的用戶對于廣告創(chuàng)意的反應(yīng)，發(fā)現(xiàn)該廣告在男性數(shù)值落在了“非常好“，但是女性數(shù)值落在了一般，這說明廣告目前的創(chuàng)意對于女性消費者來說接受度比較低，仍然需要進一步改進。
改進的方向可從各個細(xì)分維度當(dāng)中尋找線索，比如在上述例子中分析發(fā)現(xiàn)，在投入程度的面部編碼微笑曲線中（如左圖），女性消費者對這支廣告中產(chǎn)品的呈現(xiàn)方式不太能接受，會感到害羞，因此大部分微笑曲線低于男性消費者，而相對來說厭惡曲線（如右圖）比較高，從而導(dǎo)致穿透力指數(shù)較低。
以上是廣告創(chuàng)意前測指標(biāo)方面的一些分享，這套方法論既可以成套使用在品牌視頻廣告創(chuàng)意中，也可以在其他的設(shè)計創(chuàng)意中酌情提取部分指標(biāo)單獨使用，我們也將秉持探索精神，隨著調(diào)研目的、用戶需求和市場發(fā)展變化不斷迭代更新模型和方法論，更科學(xué)有效的提升設(shè)計和研究價值。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
刷刷手機看看今天又發(fā)生了什么熱點大事，已經(jīng)成為現(xiàn)代人茶余飯后消遣時間的主要方式，而搜索熱點區(qū)別于其他社區(qū)類產(chǎn)品，最大的優(yōu)勢是能夠把大家關(guān)注的事件始末及相關(guān)知識服務(wù)快速聚合起來，幫助用戶更全面的掌握信息。設(shè)計師作為連接用戶與信息之間的紐帶，在項目實踐中也進行了系列的設(shè)計探索，除助力平臺高效聚合呈現(xiàn)信息外，并以更豐富的設(shè)計層次詮釋熱點，幫助用戶更便捷的獲取所需。
我們先要去了解用戶是如何消費熱點內(nèi)容的，基于用戶情景認(rèn)知鏈路分析用戶在事件消費的鏈路，可以分為三個重要節(jié)點：1.熱點環(huán)境的感知；2.熱點事件的理解；3.事件觀點的產(chǎn)生。
結(jié)合用戶的消費路徑，我們將設(shè)計邏輯框架拆分為三個層級：
1.氛圍背景層：分層呈現(xiàn)熱度氛圍，輔助用戶感知熱點環(huán)境；
2.信息內(nèi)容層：精細(xì)化拼裝管理，幫助用戶理解熱點事件；
3.功能互動層：輕互動玩法設(shè)計，激發(fā)用戶參與抒發(fā)事件觀點。
從氛圍表現(xiàn)層面，助力用戶更快速的辨別事件的熱度及重要程度。設(shè)計師結(jié)合搜索熱點使用場景以及業(yè)務(wù)時效性配置訴求，歸類了兩種設(shè)計表現(xiàn)層次：1.日常熱度氛圍 2. 大事件熱度氛圍
1）第一個層次：日常熱度氛圍
主要應(yīng)用于熱點新聞場景，時效性要求高，同時事件熱度也會在：“發(fā)酵--爆發(fā)--消退” 間實時變化，設(shè)計根據(jù)熱度“強弱”程度需求，劃分兩檔視覺展現(xiàn)階梯，以自動化的方式展現(xiàn)，滿足熱度的實時變化需求，輔助用戶感知當(dāng)前事件熱度?！暗蜔岱諊比鯓?biāo)簽設(shè)計用以展現(xiàn)上升/今日熱點，“高熱氛圍”色彩背景通頂效果+上榜標(biāo)簽用以展現(xiàn)上榜熱點。
如，“馬斯克收購?fù)铺亍?，搜索熱度持續(xù)上升，以第一階梯-標(biāo)簽方式展示低熱氛圍；在 “馬斯克收購?fù)铺亍?的事件熱度不斷增長，成為熱榜事件后，以第二階梯 - 高熱氛圍自動匹配 ，通過背景及榜單標(biāo)簽的呈現(xiàn)，明確告知用戶當(dāng)前事件的火熱程度。
2）第二個層次：大事件熱度氛圍
主要應(yīng)用于熱點大事件或運營活動場景，個性化展現(xiàn)要求高，同時事件關(guān)注度及重要程度也不同，設(shè)計根據(jù)事件的關(guān)注度及重要程度劃分為兩檔階梯，以人工配置的方式展現(xiàn)，超強的運營氛圍，可以讓用戶充分感知當(dāng)前事件的重要程度，“A級氛圍”頭部疊加場景元素設(shè)計用以展現(xiàn)大事件，“S級氛圍”整頁沉浸式視覺設(shè)計用以展現(xiàn)重大事件。
如，冬奧會，重大事件，選用第二階梯 S級氛圍，打造超強的運營大事件會場認(rèn)知。
近幾年我們不斷的經(jīng)歷各類突發(fā)大事件，如：疫情/暴雨/名人逝世等等，每次突然發(fā)生的事件都讓設(shè)計師措手不及，匆忙產(chǎn)出運營氛圍設(shè)計方案緊急上線，保時效就很難保障質(zhì)量，因此我們在想能不能總結(jié)事件類型提前儲備設(shè)計，以備不時之需。
不同突發(fā)事件會牽動網(wǎng)友不同的情感情緒，比如河南暴雨，我們?yōu)槭茈y同胞擔(dān)心，為救助工作加油，為逝者哀悼；火箭發(fā)射成功，我們驕傲喝彩；名人結(jié)婚，我們送上溫馨的祝福。不同事件帶來不同的情感情緒，也要求設(shè)計師要用準(zhǔn)確的視覺語言表達。
因此我們在前置設(shè)計時也充分考慮了事件情感因素，通過對近一年突發(fā)大事件的歸類梳理，并推導(dǎo)不同細(xì)分場景下的用戶情緒，通過情緒分類的方式，總結(jié)兩種視覺設(shè)計表達形式：1.實景圖合成效果滿足嚴(yán)肅/莊重/權(quán)威場景情感需求；2.手繪效果滿足積極/歡快/慶祝場景的情感需求。結(jié)合以上思路我們共儲備6大類20個子分類場景的前置氛圍+金剛位等運營物料設(shè)計，保障突發(fā)熱點運營設(shè)計質(zhì)效。
截至22年Q1，前置設(shè)計已在38個熱點場景應(yīng)用：
為滿足用戶不同事件場景下的信息需求，設(shè)計結(jié)合百度搜索：主要內(nèi)容區(qū)（主要需求滿足）+ 延展內(nèi)容區(qū)（延展需求滿足）的綜合聚合能力，通過組件分區(qū)布局+精細(xì)化規(guī)則管理，為熱點場景內(nèi)容的高效拼裝打好體驗基礎(chǔ)。
1）主要內(nèi)容區(qū)
主要內(nèi)容區(qū)，能夠幫助用戶快速了解事件的主題、時間及主要內(nèi)容，結(jié)合熱點事件長期的需求沉淀，設(shè)計將主要內(nèi)容區(qū)又細(xì)分為主題區(qū)域及內(nèi)容區(qū)域。主題區(qū)域可承載拼裝事件主題、事件倒計時、會場分發(fā)導(dǎo)航等主題類組件；內(nèi)容區(qū)域可承載拼裝圖文/視頻/直播等事件主體內(nèi)容分發(fā)組件。通過不同區(qū)域內(nèi)組件拼裝規(guī)則的制定，業(yè)務(wù)可以快速選擇所需組件進行頁面組織拼裝，達成分場景個性化滿足用戶主需求的目標(biāo)。
如：元宵晚會，熱點主要內(nèi)容區(qū) 以“ 晚會直播時間倒計時+ 各衛(wèi)視晚會分會場導(dǎo)航+圖文內(nèi)容 ” 組件支撐起重大晚會預(yù)熱期的事件主需求滿足。
因為有設(shè)計拼裝規(guī)則，不同大事件活動，各場景內(nèi)容可個性化滿足需求，交互布局設(shè)計上又可兼顧橫向一致性。
2）延展內(nèi)容區(qū)
延展內(nèi)容區(qū)，能夠幫助用戶了解事件相關(guān)知識信息或提供事件相關(guān)服務(wù)。業(yè)務(wù)可根據(jù)事件場景需求，選擇多個延展內(nèi)容模板與主要內(nèi)容區(qū)進行拼裝，搭建完整頁面以呈現(xiàn)不同熱點事件內(nèi)容。
如：俄烏戰(zhàn)爭-戰(zhàn)事場景，脈絡(luò)卡幫助用戶快速了解事件進展 ；冬奧會-賽事場景，數(shù)據(jù)卡幫助可視化呈現(xiàn)賽事進展；博鰲亞洲論壇-會議場景，百科卡幫助用戶科普相關(guān)名詞知識。
通過氛圍打造和內(nèi)容組織，已經(jīng)達成用戶需求滿足的目標(biāo)，但到此截止，搜索結(jié)果的體驗還是理智疏遠(yuǎn)單向的，搜索場景與用戶、用戶與用戶間也無法產(chǎn)生對當(dāng)前熱點的討論與態(tài)度表達。因此設(shè)計師對用戶的互動行為認(rèn)知習(xí)慣進行分析，并采取具體的設(shè)計策略逐步引導(dǎo)用戶參與互動。
1）互動喚醒 - 吸引圍觀增強互動意愿
優(yōu)化前的熱搜結(jié)果頁，用戶的討論內(nèi)容都是隱藏在資訊落地頁評論區(qū)內(nèi)，需要點擊進內(nèi)容落地頁內(nèi)才能參與“圍觀”或“討論”，除互動氛圍已脫離當(dāng)前場景外，也削弱了用戶對此事件表態(tài)的參與積極性。
通過彈幕滾動+輸入框組件組合外顯的交互設(shè)計方式，將用戶討論外露，不僅豐富熱點事件搜索場景的內(nèi)容維度，同時基于從眾心理，進一步刺激用戶的參與欲望。彈幕結(jié)合事件類型配色來更好貼合熱點事件整體環(huán)境氛圍。
2）情緒抒發(fā)-輕互動玩法降低互動門檻
而投票表態(tài)+彈幕輕互動組合效果設(shè)計，能進一步降低用戶交互心理門檻，讓用戶動一動手指就可以參與其中。在表態(tài)/投票抒發(fā)情感的同時也可以發(fā)彈幕聊聊對當(dāng)前熱點事件的看法，使用戶互動情緒表達更充分。
3）驚喜反饋-強化視效打造記憶點
原有設(shè)計風(fēng)格，無法在去世祭奠、頒發(fā)勛章等莊重嚴(yán)肅場景精準(zhǔn)的表達視覺情感，無互動反饋狀態(tài)僅有互動前后狀態(tài)變化。
結(jié)合熱點場景積極外放情緒及莊重內(nèi)斂情緒，視覺主要從形/質(zhì)兩個維度進行優(yōu)化升級，并增加互動反饋動效，同時運營可結(jié)合具體事件主題配置，綜合提升互動驚喜效果，打造產(chǎn)品記憶點。
視覺層：通過更立體的形態(tài)和更豐富的層次質(zhì)感，更精準(zhǔn)的表達情感
動效反饋層：以主圖形+輔助元素，通過符合場景氛圍的動態(tài)效果設(shè)計，更充分的表達情感
運營主題配置：在日常反饋基礎(chǔ)上，增加運營主題配置層級，為特定主題場景提供定制反饋效果
通過熱點環(huán)境感知分層呈現(xiàn)、內(nèi)容組件合理布局拼裝滿足等設(shè)計手段，助力搜索平臺以更高效豐富的內(nèi)容展現(xiàn)形態(tài)應(yīng)對全年3萬+熱點大事件運營。會場拼裝呈現(xiàn)系統(tǒng)的應(yīng)用場景也在不斷擴展，如營銷活動、品牌造節(jié)等。設(shè)計不會止步于此，我們將基于用戶需求不斷探索深耕，為用戶呈現(xiàn)更快速、準(zhǔn)確、全面、有溫度的搜索熱點體驗。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
你是否每天都在使用QQ音樂收聽歌曲，但是你有沒有觀察到QQ音樂的播放頁其實藏著很多功能。一個小小的播放頁，雖然看上去那么的不起眼，仿佛它的功能只是用來切歌、看歌詞和單曲循環(huán)，但隨著QQ音樂社交化、娛樂化的發(fā)展，如今這個播放頁已經(jīng)成為了一個重要的聚合頁入口。本期「設(shè)計大偵探」的「細(xì)節(jié)獵人」，為你解剖QQ音樂播放頁的37個功能，11種分享方式以及17種歌曲海報。
一、歌曲
「歌曲」是播放頁的默認(rèn)分類，這個分類的功能比較多，所以我把它拆分為「個性化設(shè)置」、「聽歌場景」、「音樂工具」和「分享方式」四種類型。「個性化設(shè)置」和「音樂工具」為用戶提供多種音樂偏好的設(shè)置，滿足各類用戶需求，特別是音樂發(fā)燒友；「聽歌場景」則是根據(jù)場景劃分聽歌需求，用戶可以K歌、發(fā)起跟聽，甚至邀請好友一起聽，把聽歌的行為社交娛樂化；「分享方式」則是利用騰訊強大的社交生態(tài)優(yōu)勢，為用戶設(shè)計了豐富多樣化的分享方式和個性化海報，吸引用戶分享，傳播，從而拉新引流。
1.1 個性化設(shè)置
1.1.1 銀河音效
「銀河音效」是為了滿足各種耳機發(fā)燒友對音質(zhì)的追求?！搞y河音效」按照重低音、環(huán)繞、曲風(fēng)等類型進行分類，多達數(shù)十種，完美解決各類用戶人群的需求。平臺還推出獨家定制音效，支持適配各類品牌耳機、音響和汽車，吸引用戶購買VIP會員，激活變現(xiàn)。另外QQ音樂還推出一個「聲音實驗室」的欄目，包含了智能煲機（幫助耳機快速達到最佳狀態(tài)）、4D震動和動感閃光，黑科技賦能，讓音樂更有趣。
1.1.2 播放設(shè)置
「播放設(shè)置」是一個為用戶提供對音樂播放進行個性化設(shè)置的功能，包括無縫播放、淡入/淡出、音量平衡、智能音質(zhì)增強等功能，可以滿足某部分有特定音樂需求的用戶。
1.1.3 播放器樣式
平臺為用戶提供了多種播放器樣式，包含了黑膠唱機（深、淺）、靜態(tài)方形、旋轉(zhuǎn)圓形、靜態(tài)圓形、歌手寫真等樣式，還支持智能光效和音樂影片的播放背景，滿足各類用戶對播放器樣式個性化設(shè)置的需求。
1.1.4 個性主題
「個性主題」為用戶提供了豐富多樣的主題裝扮和頭像掛件，包含明星、星座、影視、文藝等各種主題，當(dāng)用戶使用以后，整個QQ音樂的界面風(fēng)格都會隨之改變，這就像以前的QQ空間裝扮，一鍵換膚，個性又時尚，深受年輕用戶喜歡?！競€性主題」作為為QQ會員獨家專享打造的板塊，是實現(xiàn)商業(yè)變現(xiàn)的重要手段。
1.1.5 收藏和屏蔽
當(dāng)你喜歡某首歌曲的時候，你可以點擊收藏，自動添加到你的默認(rèn)歌單，這樣對用戶建立自己的歌單非常有幫助，從而提高用戶留存率。而如果你不喜歡它的曲風(fēng)，或者特別討厭，你只需要點擊屏蔽，平臺在播放時會自動跳過，非常方便。
1.2 聽歌場景
1.2.1 唱歌
「唱歌」是直接跳轉(zhuǎn)到騰訊的另外一款音樂產(chǎn)品全民K歌，當(dāng)用戶聽歌的時候突然想唱歌，那么可以直接進入全民K歌，有效降低用戶的流失率，滿足用戶多場景的需求。
1.2.2 跟聽
「跟聽」是一個非常有趣的功能，用戶進入跟聽模式以后，可以邀請朋友加入自己的播放列表，也可以跟聽其他用戶的歌單?！父牎篂槁牳柙黾恿松缃换拥膶傩?，目前功能還比較簡單，但讓聽歌的場景變得有趣、好玩。
1.2.3 一起聽
「一起聽」是一個社交互動式的聽歌功能，用戶可以邀請好友一起聽歌。當(dāng)朋友進入后，還支持發(fā)表情，就像一個聊天室。這就像是專門為一些年輕小情侶量身定制的聽歌場景一樣，平臺還會為用戶生成聽歌記錄，比如一起聽歌的時間，聽過的歌曲等，甚至還會生成一個心動等級，激發(fā)用戶為了更高等級使用這個功能。
1.2.4 駕駛模式
「駕駛模式」非常簡潔，系統(tǒng)會自動檢測用戶聽歌的環(huán)境自動切換。這個功能的設(shè)計充分考慮了用戶駕車時候需要換歌的場景，提供了語音找歌、個性電臺、我喜歡的歌單、最近播放和電臺，省去了用戶開車時候不方便換歌的痛點，用戶體驗非常友好。
1.2.5 評論
一邊聽歌一邊看評論已經(jīng)成為現(xiàn)在年輕用戶非常喜歡的聽歌方式，在評論里，可以找到這首歌很多感人的故事，引發(fā)共鳴，勾起回憶。用戶進入評論后，除了可以看見其他用戶的精彩評論，還可以進入歌手的撲通小組（類似貼吧），和其他歌迷一起交流，從而增加用戶時間，提升用戶留存率。
1.3 音樂工具
1.3.1 片段播放
「片段播放」提供按歌詞選和按音軌選兩種形式，用戶可以自由裁取需要循環(huán)的片段反復(fù)收聽。這有點像過去我們使用MP3或復(fù)讀機收聽歌曲那樣，功能雖然簡單，但可以滿足某些特定場景使用。
1.3.2 倍速播放
用戶可設(shè)置歌曲播放的倍速，支持0.5x到2.0x播放，這個功能在聽書的時候特別實用，非常方便。
1.3.3 定時關(guān)閉
用戶在音樂播放中可開啟定時關(guān)閉功能，比如15分鐘、60分鐘等，這個功能在助眠的時候非常方便，當(dāng)你慢慢睡著的時候，音樂也隨之關(guān)閉。
1.3.4 設(shè)備投放
「設(shè)備投放」就是支持音樂投放到電視等其他電子設(shè)備，當(dāng)一群朋友在家里為你過生日的時候，你可以把你的歌單直接投屏到電視，讓大家一起陶醉在美好的音樂夜晚。
1.3.5 設(shè)置鈴聲
當(dāng)你覺得某首歌曲特別好聽，想把它設(shè)置為鈴聲的時候，你不用去應(yīng)用市場搜尋其它工具，你只需要進入「設(shè)置鈴聲」，你可以自己截取喜歡的音樂片段，系統(tǒng)也會自動智能截選一段精彩的鈴聲。在右上角提供了詳細(xì)的鈴聲設(shè)置流程，教程非常簡單。其次QQ音樂還有一個鈴聲專區(qū)，里面提供了海量的鈴聲選擇。
1.3.6 查看曲譜
查看曲譜是一個非常實用的功能，對于很多音樂愛好者來說，當(dāng)在某個夜晚抱著吉他想彈奏某一首歌曲，你只需要打開「查看曲譜」，里面包含了智能吉他曲譜、智能尤克里里曲譜以及五線譜/六線譜/簡譜。進入曲譜后，你還可進行自由編輯，比如編輯和弦、更改時值等。這種實用不起眼的小功能，對提升用戶的滿意度非常有幫助，可以搶奪用戶時間，降低用戶流失率。
1.4 分享方式
1.4.1 分享給好友
用戶可以把歌曲分享給微信好友、QQ好友，還可以通過私信方式分享給QQ音樂好友。
1.4.2 設(shè)置聽歌狀態(tài)
利用騰訊強大的產(chǎn)品生態(tài)，用戶還可以把聽歌狀態(tài)同步到微信和QQ，這不僅可以滿足年輕用戶個性化的追求，還能通過外部觸發(fā)拉新引流。
1.4.3 分享到社區(qū)
用戶可以把歌曲分享到朋友圈、QQ空間、撲通動態(tài)和新浪微博，吸引用戶分享傳播，拉新引流。
1.5 歌曲海報
1.5.1 音樂卡片
「音樂卡片」為用戶提供了8種精美的風(fēng)格，有復(fù)古懷舊的磁帶、CD風(fēng)格，有黑白膠唱機風(fēng)格，還有專屬的VIP會員專享風(fēng)格?？ㄆ瑑?nèi)容包含歌曲的封面、歌名、歌手、音樂指數(shù)和過去24小時收聽人數(shù)等信息，目的是為了吸引更多的用戶掃碼聽歌，其次VIP會員卡片還加入了QQ音樂豪華綠鉆音樂卡片標(biāo)識，彰顯VIP會員地位。
1.5.2 歌詞海報
在以前磁帶、CD時代，抄歌詞是廣大音樂愛好者最美麗的回憶之一，「歌詞海報」就是利用這樣的分享場景，支持用戶選擇任意歌詞，然后生成個性化的海報。「歌詞海報」不僅提供了海量的背景圖片，還支持用戶自己上傳，甚至還提供歌詞字體選擇，吸引用戶主動分享。
1.5.3 高光視頻
「高光視頻」就是一段30秒的音頻，提供了6個精美的模版，用戶保存到手機后，可以短視頻的形式分享到視頻號、朋友圈等平臺，和靜態(tài)的海報不同，這樣的傳播形式更能引起其他用戶的關(guān)注，從而拉新引流。
1.5.4 微信狀態(tài)卡片
「微信狀態(tài)卡片」為QQ音樂綠鉆會員專享，為會員提供了多種精美的狀態(tài)卡片，用戶需要選擇兩行歌詞，然后才能生成。這樣個性化的設(shè)置同步到微信狀態(tài)后，更能引起追求個性的年輕用戶關(guān)注。
1.5.5 歌詞視頻
「歌詞視頻」相比高光視頻，功能更豐富，首先不限制用戶選擇歌詞數(shù)量，其次提供了風(fēng)景、科幻、自然等不同主題的視頻模版，而且還支持用戶自己拍攝。用戶還可以選擇音樂播放的起點，添加視頻動效和濾鏡。通過這樣短視頻的方式吸引用戶分享到視頻號以及更多的短視頻平臺，傳播拉新。
二、歌詞
3.2.1 彈幕
聽歌彈幕就像視頻彈幕，用戶可以邊聽歌邊發(fā)彈幕聊天，這是一個年輕用戶非常喜歡的功能，用巴甫洛夫效應(yīng)來解釋，這就是用戶對源源不斷彈出的彈幕充滿了期待，從而增加了聽歌樂趣，提升用戶使用時間。
3.2.2 歌詞動效
「歌詞動效」為用戶提供了多種個性化模版，滿足年輕用戶的各種個性化需求，其次也是實現(xiàn)商業(yè)變現(xiàn)的方式之一，用戶需要開通SVIP才能享受更多精美的動效模版。
3.2.3 歌詞設(shè)置
用戶可以調(diào)整歌詞的字體大小、簡繁轉(zhuǎn)換、調(diào)整進度，還可以制作歌詞海報進行分享。其中歌詞海報支持靜態(tài)圖海報和視頻海報制作，還提供了多種精美模版，吸引用戶分享傳播。
三、推薦
3.3.1 歌曲信息
用戶可以查看歌曲詳細(xì)信息，包括歌手、專輯、發(fā)布時間以及詳細(xì)的制作詳情。
3.3.2 音樂指數(shù)
「音樂指數(shù)」是一個非常創(chuàng)新的功能，QQ音樂根據(jù)用戶聽歌的次數(shù)、搜索的次數(shù)制定了一個官方的指數(shù)評級。用戶可以從這個頁面看到歌曲的實時數(shù)據(jù)，包括今日、昨日音樂指數(shù)、全站排名、上升趨勢和歌曲成就等。
3.3.3 相關(guān)推薦
根據(jù)歌曲的曲風(fēng)，平臺會推薦相關(guān)歌曲，這有點像私人電臺；其次平臺還收錄了歌曲的各種演繹版本，這真的非常方便，你可以輕松切換自己喜歡的版本；最后為用戶推薦包含此歌曲的歌單、節(jié)目和視頻，徹底搶占用戶的時間。
四、總結(jié)
QQ音樂的播放頁設(shè)計，可以說把騰訊系產(chǎn)品設(shè)計的風(fēng)格發(fā)揮得淋漓盡致。為用戶提供各種豐富多樣的個性化設(shè)置和音樂工具，播放器樣式、銀河音效、個性主題、歌詞動效、曲譜、鈴聲，只有你想不到的，沒有QQ音樂無法提供的。然后當(dāng)你想要享受更多特權(quán)，你就需要付費開通VIP，這簡直就是騰訊系產(chǎn)品的殺手锏，準(zhǔn)備了一千種方式和場景讓你很自然的掏腰包。
其次把社交基因發(fā)揮到極致。跟聽、一起聽、彈幕這些都是為了活躍度最高、消費意愿最強的小情侶、小年輕用戶準(zhǔn)備的。也許有部分用戶會質(zhì)疑，我從來不使用這些功能，但作為一個月活超過2億的平臺型產(chǎn)品，QQ音樂擁有眾多各年齡階段的用戶，這就像上期我們分享的《順豐速運為用戶準(zhǔn)備了18種寄件方式》一樣，看似多余復(fù)雜，但其實是為了滿足各類用戶人群的特定需求。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：廖爾摩斯 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://m.yvirxh.cn