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