<nav id="guqao"></nav> <nav id="guqao"></nav> 
企業多產品線模式下，UI體驗文化打造、UI設計質量品控5個方面闡述項目快速、規模化提升多產品線整體體驗中的方法論和實踐經驗。
SaaS 產品體驗要求越來越高，用戶體驗已經成為產品競爭力的重要組成部分，怎樣在多業務線的產品環境中做好體驗設計，本文從貼合業務線的設計規范、敏捷易用的前端組件庫、產品研發協作流程保障、UI體驗文化打造、UI設計質量品控5個方面闡述項目快速、規模化提升多產品線整體體驗過程中方法論和實踐經驗。
關鍵詞：
用戶體驗設計；UI設計規范；多產品線；體驗文化；UI設計落地
面對多產品體系，多產品線，需要積極尋找和探索適合我們客觀情況的最佳實踐，我們面臨的問題有：
1.過往以功能堆砌為主、基本“能用”，缺乏平臺規范和一致性，體驗不足。
2.產品線多、體量大。
3.客戶對產品體驗要求越來越高。
4.產品歷史包袱、修復改動困難。
5.對用戶體驗認知不一，協同、溝通成本高。
6.重復的開發成本。
7.第三方組件與業務的匹配度不佳。
解決以上幾大難題，我們啟動了UI 設計規范的搭建、UI組件庫的開發等，讓規范和組件庫成為各產品線堅實底座的一部分，使用戶體驗文化賦能前端和產品經理，協同 QA 力量一起推動產品體驗升級，以下整理分享的實踐方法適用于中小型UED團隊支撐復雜、多業務線的企業，本文嘗試從以下幾個方面總結和提煉實踐經驗，跟業界同行探討。
設計規范體系的搭建對于新的團隊，如何從復雜海量的業務場景中制定出一套適用于自己產品的UI設計規范，是第一道待翻越的高墻，完整的設計規范應該是包含視覺規范與交互規范，本文主要針對設計規范實踐過程進行闡述。
貼合場景的設計規范：
雖然市面上已經有眾多成熟的設計規范體系可供使用，但是當前我們所處的產品階段、多業務 線以及復雜的業務場景等綜合因素，決定了需要重新搭建一套符合我們自己業務場景的設計規 范體系。
UI規范效益最大化：
一旦我們決定制作規范，就要把規范當成一個產品去做。去梳理一套高效合理、可復用的制作流 程，去分析產出什么樣的「規范產品」才能產生最大的價值。 依據規范效益模型，在規范的制定中盡可能的提高規范的通用性至90%，先解決統一性，再解決場景細分，打造高質量通用的模式庫以提高質量和效率，并力求讓更多人從這套設計體系中獲益， 從而讓規范體系發揮更大的價值。
UI規范制定的策略：
明確用戶對設計規范的訴求，構建適合產品的UI設計規范，首先，需要明確規范體系的用戶群體經過設計團隊多輪調研，確定設計規范面向的目標用戶群、基于核心用戶的訴求，為后續規范內容框架的制定提供依據。
確定UI設計價值觀：
產品歷史包袱重，系統結構復雜，在提升用戶體驗時，內容表達「清晰明確」是第一要務，例如尊重已經形成的用戶習慣，優化改造時，注意版本之間的銜接，讓用戶「清晰明確」，這也是為什么將「清晰明確」作為價值觀之首，另外提升效率是企業級產品用戶體驗的永恒主題，同時兼顧系統的簡潔與一致。
梳理UI規范框架：
UI設計規范包括設計價值觀、全局規則、組件庫、模式庫、典型頁面、移動端規范和設計資源框架整理主要從以下3個方面進行：
1.梳理現有組件，剔除不使用的部分 。?
2.同類競品的框架借鑒，查漏補缺。 ?
3.場景驗證，與業務場景深度結合經過充分論證和梳理，對規范框架做了重新定義，增補了業務缺少的內容。
如上圖所示，例如對高頻的工具欄組件的補充，典型頁面的補充，增加模式庫以及全局規則，當前第一個版本的規范框架是基于業務場景優先級最高的內容進行制定，更多的規范內容的增加依托于不斷的迭代，逐漸完善規范框架。
規范內容的制定及評審：
組件規范包含：變更記錄、組件定義、何時使用、組件的類型、組件的響應。
規范內容制定的原則： ?
1.有明確場景可依。?
2.精簡不必要的分支 例如在定義表單規范時，對于表單標簽的對齊方式做了統一的約束，標簽右對齊，輸入框左對齊全局保持統一。
邏輯正確、規則明確易懂： ?
例如常見的alert （警告提示）名稱調整為常駐提示，語義更貼合場景，便于理解。
規則的可拓展性，多場景的兼容性： ?
產品架構是PC端到移動端的自動適配，因此在組件設計的時候需同時考慮PC端與移動端的對應關系以及兩端場景的兼容性。
協作及敏捷迭代： ?
規范發布后，伴隨著實際項目的檢驗，業務場景的擴充變化，如何高效的對設計規范進行迭代，決定了設計系統能否持續的走得更遠，規范內容定期評審，必須通過業務、技術、設計評審，確保規范是可用的、可落地并且易于使用的規范后期不同的規范模塊專屬人負責，同時有backup，可以幫助走查復盤雙重保障規范的質量。
敏捷易用的前端組件庫： ?
復雜的業務場景和多產品線特點，快速打造一套敏捷易用、高質量并符合實際業務場景的前端組件庫，是提高產品研發效率、改善UI質量、提升用戶體驗的關鍵。
復雜的業務場景和多產品線特點，快速打造一套敏捷易用、高質量并符合實際業務場景的前端組件庫，是提高產品研發效率、改善UI質量、提升用戶體驗的關鍵。
前端組件庫建立目標： ?
1.提高開發效率，對高頻使用、通用組件進行代碼化封裝，避免重復開發工作。 ?
2.提高開發質量，通過各類業務場景和業務線的錘煉，沉淀組件代碼最佳實踐。 ?
3.提高產品體驗，組件封裝代碼化，減少在多角色協同中因為理解偏差、信息傳遞問題等導致的不確定性和結果不可控性，不同業務線、不行項目、共用一套基礎代碼，保證體驗的一致性，組件的組織形式： 結合實際業務場景和原子設計理論，將組件劃分為不同顆粒度：基礎組件、業務組件、典型頁面 組件，以適用于不同研發場景使用。
1.基礎組件，基礎組件為組件庫最小顆粒度，構成系統界面的基本構件。 ?
2.業務組件，在基礎組件的基礎上，結合具有共性業務特征的業務場景，梳理出具有業務特征的 業務組件。 ? 3.典型頁面組件，梳理具有業務特點的典型頁面，相比基礎組件和業務組件，典型頁面更加具體， 為用戶提供具有代表性的內容和框架，并準確描述用戶最終看到的內容。如列表和左樹右表典型 頁面組件，作為最為常見的頁面結構，各業務場景可復用頁面組件，保證了頁面組件內各基礎組 件的一致性，最大程度的實現不同產品線產品中頁面體驗的一致性。
推進前端組件庫落地執行： ?
前期設計規范落地到組件庫過程中，面臨諸多問題和阻礙，比如開發落地質量不高、內容遺漏、 各方理解不一致、驗收及修復問題不到位等問題。處理這些問題對UI團隊資源造成很大消耗， 通過總結復盤前期組件庫落地時的經驗和教訓，梳理落地執行流程，在新的協作流程下，新一 批的組件開發不論在協作效率和開發質量上都有質的提升。
分層推進： ?
組件庫開發是一個持續迭代的過程，考慮到組件庫開發資源極為有限且無專職負責人員，在跟組 件庫開發團隊協同過程中，我們通過分步開發來解決組件庫更新優化的問題并通過不斷優化協作流程來助力組件庫高效落地。
前端組件庫分步開發原則： ?
1.優先級原則，優先開發適用于業務線普適場景的組件。 ?
2.緊急性原則，對于急需的業務線所需組件優先開發。 ?
3.快速可實現原則，開發實現成本高的組件暫緩處理。
自查走查驗收： ?
組件UI責任人梳理出下屬組件需開發落地的細節點，整理為文檔，待開發人員完成組件開發后，自行參照UI提供的自查文檔，查漏補缺，保障進入UI驗收環節的前端組件不會出現較多的缺陷，降低后期走查和溝通修改的工作量，同時監督開發人員提高組件落地還原度和質量。
組件庫的持續迭代： ?
UI團隊通過一套標準的流程來把控組件庫迭代的質量，在日常工作中經常會收到產品經理或項目 方提出新的組件需求或對現有組件的優化。UI部門作為推動組件庫搭建的核心環節，需要以全局 和更深入的視角加以判斷把關，保證前端組件庫內容的普適性和高質量，避免組件庫內容冗余， 降低研發維護成本。
產品研發協作流程保障： ?
好的過程是好的結果的有力保障，一個業務需求從產生到開發落地需要經過多角色協同、一系 列環節。必須依靠規范的研發協作流程，確保各角色清楚自己職責以及如何跟上下游銜接，同 時我們也希望協作流程能夠確保設計資源可以向重點業務模塊傾斜，以及發揮各個角色可以發 揮的作用去共同提升產品體驗。
UED團隊建立之初，我們面臨的首要問題是：需求隨機，完全取決于各產品線和產品經理 個人，為了解決這個問題，我們制定了UI融入研發體系的流程以解決合理、有效利用UI資 源的問題。
企業級產品特點、多業務線、大量面向管理員用戶的具有相似頁面結構和交互模式的業務 模塊、產品經理跟交互團隊人員配比等因素都決定了并非所有需求都需要流轉到UI團隊進 行設計，在判斷哪些需求需要流轉至UI團隊設計時，我們給出了如下指導性方向： ?
1.用戶量角度，大量終端用戶使用的場景，例如訂票、報銷、采購頁面 。 ?
2.用戶重要程度角度，核心、重要用戶使用的場景 eg.公司領導、決策層。 ?
3.通用性角度，通用組件或框架，需要UI通盤考慮各個業務線場景需求進行設計。 其他需求則主要由產品經理進行設計，UX以評審方式輕度參與。
協作流程迭代，UI驗收成為必要一環： 隨后我們又面臨新的問題：設計還原度差，被公司老板生動的形容為：看設計稿是“精裝修”， 開發落地后就成了“毛坯房”了。為盡可能確保設計還原質量，我們在研發流程中明確了所有涉 及前端頁面的功能需求都需要在研發協同工具中流轉到UI負責人驗收，在產品團隊TAPD中記 錄UI缺陷、標明嚴重程度，對于 “嚴重” 級別以上UI缺陷，禁止發版。
UI工期評估合理化：
為了既能盡力配合各產品線迭代計劃又要爭取合理UI設計時間、保證產出質量，合理評估設計周期對UI人力管理尤其重要。對此，我們對設計需求分成了ABC三級進行評估。 對于A和B級需求，通常模塊較大，先有UI設計方案再去分期迭代開發，對于這兩類需求，在評估 模型中給出了大致工期概念，比如以月為單位，大于1個月或2個月。
對于C級需求，通常為產品經理先排進某個迭代再來提UI設計需求，設計范圍相對明確，我們則結合典型頁面數量因子和設計難度因子給出了UI工期大概評估公式，以天為單位。 ?
1.設計難度因子：根據業務線的復雜程度而定，范圍為（0.8~1.5）。 ?
2.典型頁面數量因子：評估需求范圍規模（N）。
UI設計團隊在協作過程中面臨諸多挑戰：產品線多、產品邏輯復雜、研發鏈路長、各級人員對產品認知及重視程度不一、好的體驗設計難落地、溝通成本高等問題，想要解決這些問題，若僅靠UI團隊自身力量是不夠的，需要動員公司各個環節和人員重視用戶體驗，共同促進產 品體驗提升。
搭建體驗文化灌溉機制：
UI部門通過多維度的體驗知識內容矩陣、多渠道多場景全員覆蓋，普及和加深各級對產品體驗 價值的認識，提升產品體驗思考力和洞察力，幫助企業以新的視角思考業務、產品研發和用戶 體驗的關系，賦能產品經理及研發人員高質量的輸出，“以用戶為中心”和“打造產品極致體驗” 的價值觀根植與企業文化中，指導研發流程中各項工作最終影響到產品的戰略層、范圍層、結 構層、框架層和表現層這5個產品體驗維度，以實現企業產品的“極致產品體驗”目標。 通過搭建體驗文化灌溉機制，提升全員體驗意識，能為產品研發帶來長久的價值： ?
1.提高設計還原度 ?
2.減少培訓成本 ?
3.提升跨部門溝通效率 ?
4.提升UI團隊影響力 ?
5.提升客戶滿意度
體驗文化落地實踐：
針對不同類型的體驗知識，我們采取不同的傳播渠道進行透，以期達到最好的效果，避免形式化， 將體驗文化滲透、學習落到實處，最終影響產品研發的各個環節。
以下為UI團隊在企業體驗文化 推廣的主要渠道和方法： ?
極致體驗公眾號主要發布產品體驗的基礎原理，體驗價值、項目復盤、常見體驗問題等深度長文。讓公司各級人 員認識用戶體驗及價值，讓用戶體驗理念深入人心。 ?
體驗知識小卡片整理產品體驗小的知識點，閱讀學習成本低。利用員工碎片時間，對細小體驗知識點的學習，積 跬步，至千里。 ?
直播宣講針對重點且復雜的產品體驗內容，如交互規范宣講、重點問題復盤、產品經理及開發人員應知應 會的知識點，采用宣講直播的方式，更好的對內容進行詳細解說和疑難問題溝通。 ?
體驗調研分享UI部門成員對核心競品進行體驗調研，整理分析后對產品經理及相關人員進行分享，賦能產品經 理，為產品的體驗設計提供新的思路。
UI團隊專業水平一定程度上決定了公司產品體驗的上限，持續提升UI自身專業輸出能力可以從源頭提升公司產品體驗。
設計自查：
企業級產品的大量體驗問題都是設計基礎問題。因此需要設計師不論在內審前，還是內審過程中都要牢記設計原則，查漏補缺，守住底線。我們在部門內部制定了一套適合企業產品的UI自查表來檢查設計方案，通過這些自查點來避免產品中出現基礎體驗問題，從UI設計師自己這里 把好第一道關。
在日常工作中，UI自查表始終占據工區的醒目位置。在評審過程中，大家也會通過線上文檔的形 式來對設計原則的條目進行逐一檢查。
做好UI內部評審：
設計團隊內評審（Design critique）是幾乎所有國內外設計團隊的普遍、經典做法，可以有效提 高設計產出水平、保證團隊對外輸出質量。方法是普適的，但具體執行時如何做才能有更好的效果卻各有各異。 在如何做好內部評審上，我們進行了如下嘗試。 從“全員參與” 到 “組成內部評審委員會” 團隊內評審時邀請全員參加，但發現只有少數同事發言，另外一些同事因資歷淺、不了解評審產品或者積極性不高給不出建議。同時隨著團隊成員數量從幾個增加到十幾個，評審會議的時間成 本大大增加。
選取團隊內相對資深和積極提出問題、建議的同事組成內部評審委員會，以月為周期輪流進行， 可以有效分散評審委員在團隊內部評審上的工作負荷，并明確一次UI內部評審除了內部評審委員 會還有哪些關聯同事需要參加。 關于邀請評審內容關聯同事，比如“消息中心” UI評審跟另外一位同事負責的“討論消息”有關聯，則需要邀請這位同事一起評審，以便發現關聯問題，整體考慮設計方案。
以上參與評審機制明確在團隊內部協作工具上，做到人人清楚。另外，對于評審建議，要做到有 記錄、有回應、有跟蹤，確保有效發揮了內部評審的價值。
UI設計師的能力模型：不言而喻，UI設計師自身能力的培養是UI品控的重要一環。因此對于設計師能力培養通道上，我 們引入了以下模型。
我們將UI設計師能力歸納成了3x3能力矩陣。這可以設計師在工作中也可以有目的提升自身薄弱環節，同時也讓企業對UI設計師的要求更加清晰，除此之外，我們要求UI設計師也需要多了解業務和前端知識，往前多走一步，跟上下游角色更好的銜接，一方面，UI設計師需要理解業務，要能夠有半個產品經理的業務知識儲備， 如果能站在更高的行業視角對自己所服務的業務領域（向 業務產品經理再邁進一點）有一定的理解是更好的了，另外一方面，UI設計師跟自己的下游-前端 開發工程師也需要很好的銜接上，知道相關前端技術概念、基本頁面布局和交互實現邏輯、方法，能夠無縫地將界面和交互設計翻譯成前端可理解的語言。
2022 原創輸出第 15 篇，我們互相努力。
作為設計師都會時刻關注設計趨勢，以 UI 設計來說每年都會出現很多相關的趨勢總結，基本是結合預測和實際相結合的。趨勢可以讓我們把控設計的方向，帶給用戶更好的感官體驗。
最近黑馬哥結合落地產品所呈現出來的設計趨勢，進行了這方面的探索，今天以其中之一的趨勢-極光風和大家先聊一聊。
一、極光風趨勢的來源
二、UI 場景中的極光風設計
三、實現極光風設計的方法
四、極光風案例實戰
五、小結
極光（Aurora），是一種絢麗多彩的等離子體（發光）現象，在夜間出現燦爛美麗的光輝。在南極被稱為南極光，在北極被稱為北極光，視為自然界中最漂亮的奇觀之一。（來源于百度百科）
這樣的自然奇觀被攝影師捕捉到靜態的影像中，設計師再結合這樣的影像作品，視覺化之后出現在了一些設計作品中。在 2021 年被廣泛運用，形成一種流行的視覺風格。在眾多的互聯網產品設計中，也經常運用這種類似極光的視覺影像風格，稱之為 Aurora UI。
在產品設計底層需求獲得滿足之后，感光體驗的提升被重視，視覺感的強化對 UI 設計師來說至關重要。基于不改變本身的結構層，在背景層和裝飾性元素上面發揮，使得 Aurora UI 得到了發揮的空間。
富有創意的極光風在背景層和裝飾性元素上面發揮得淋漓盡致，助推了其成為 UI 設計趨勢的關鍵，下面就讓我們一起來看看落地產品中的 Aurora UI。
由于在眾多落地產品中被廣泛運用，形成了近些年影響 UI 設計趨勢的風格。極光風和彌散光在表現形式上類似，也有設計師將該風格歸類為彌散光，下面就看一下具體的運用場景。
2.1、強化導航欄設計的視覺感
如果想要強化頂部導航欄的視覺感，通常是利用品牌色作為背景顏色，這樣也會顯得頂部比重較大。通過白色或者淺灰色作為背景屬于比較弱化的處理方式，而極光風的處理形式處于輕重之間的理想狀態。不僅可以豐富視覺表現力，也能使得整體風格更加年輕化。
2.2、強化個人中心頂部視覺區域
隨著互聯網用戶年輕化的趨勢，在配色上面逐步趨近于年輕化，眾多產品在個人中心界面的設計上面亦是如此。利用極光風效果呈現出的設計比較符合年輕化的趨勢，可以是同色系的飽和度變化，也可以是不同色相的相互融合。利用低飽和度高明度的配色原則，使得整體的視覺感更加輕量化，視覺效果清新自然且通透力更強。
也有基于品牌色結合極光風進行融合，相對單色來說效果更加豐富自然，使得背景的變化更加多樣。
2.3、豐富背景設計的視覺感
除了在頂部區域進行運用以外，也有一些產品會在背景層面進行強化，相較于白色或者淺灰色的背景來說色彩感更豐富。運用到整個界面背景層相對比較少，在局部背景層上的運用比較多些，可以強化局部模塊的視覺感。
2.4、點綴彈窗設計局部
極光風的設計表現也會出現在一些局部功能的細節處，比如運用到彈窗的色彩處理中，作為背景局部或者插畫部分等的襯托。帶來的視覺感更加親和自然，也不會過度干擾其他元素的呈現。
2.5、強化卡片式設計局部
卡片式設計也是近些年運用比較多的設計趨勢之一，基本是以白色卡片居多，具有整合信息的好處。在卡片的邊緣位置強化色彩，可以使得卡片色彩更加豐富，也有一些電商產品是起到與商品形成色彩呼應的作用。
2.6、突出搜索設計的差異化
搜索框的設計在大部分的認知里面都是白色或者淺灰色，也有一些是帶有邊框的形式，利用低飽和度高明度的配色原則來進行設計，帶來的效果更加年輕化。也是一種差異化設計的嘗試，打破常規的設計認知。也可以舉一反三，在一些按鈕或者標簽設計中運用。
2.7、分類標簽的裝飾設計
這是一個裝飾性的設計嘗試，在突出模塊分類的當前狀態時，通常都會通過裝飾元素來進一步強化。可以通過字體粗細、顏色深淺、字體大小和裝飾元素來強化，裝飾元素除了線段和一些圖形元素以外，極光風的背景元素也是一種不錯的表現手法。
2.8、圖標設計中的運用
運用到圖標設計中通常是出現在質感類圖標，輔助強化圖標的色彩感和層次感。有時候無法通過常規的漸變形式達到要求，就可以嘗試運用極光風的處理技巧，將顏色通過模糊和剪切蒙版的形式融入到圖標中，可以使得圖標色彩豐富和強化光影變化。
2.9、深色卡片色彩強化
以上案例屬于在淺色或者白色的環境中運用，在深色主題中依然會用到極光風進行設計強化。在界面背景和卡片背景中運用，效果也是非常不錯的，可以給深色的卡片一些色彩感和豐富度。
2.10、作品包裝中的背景強化
除了在 UI 設計場景中運用以外，最近發現在設計師作品包裝中的運用也是非常普遍，用于背景層的渲染帶來的視覺體驗度也是非常不錯的。在作品包裝環節中作為背景運用和局部裝飾，也有在封面設計中重點運用，使得作品集緊貼設計趨勢，提高作品的打開率。
2.11、其他場景中的應用普及
在 UI 場景還有很多運用場景，這里僅為拋磚引玉，無論是作為背景強化還是元素裝飾，都能帶給用戶更加年輕化的感官體驗。
除了在 UI 場景中呈現以外，極光風的設計也會出現在更多其它場景中。在 Banner 設計、海報設計、專題頁設計等視覺設計層面也是運用廣泛，是一個影響范圍比較廣的設計趨勢之一。
通過一些線上的案例欣賞和分析，相信大家對于極光風在 UI 場景中運用都有一定的了解，在項目設計中也能輕松嘗試。這一類風格從技法實現的角度來說并不難，關鍵因素在于控制好配色原理，下面就為大家總結幾種實現的方法。
方法 01 ：利用不透明度漸變融合
不透明度漸變在設計中的運用比較普遍，利用的是不透明度從 100%-0% 之間形成漸變，讓色彩逐漸消失或者淡化。
畫一個圓形，選擇徑向漸變，漸變兩端的顏色選擇同一個色相。然后設置中間顏色不透明度為 100%，另一個顏色不透明度設置為 0%，這里顏色適合選擇低飽和度的范圍。同樣的方法反復繪制幾個不同顏色的圓形進行組合，即可完成極光風背景設計。
方法 02 ：利用模糊度變化融合
這個方法是結合了形狀和模糊設置（高斯模糊等），繪制幾個大小不等的圓形進行排版組合，然后選擇所有圓形一起進行模糊設置。形狀的繪制上面最好是有大小差異，排版錯落有致，這樣形成的效果比較富有變化。
在顏色的選擇上面需要根據背景的強化程度選擇，低飽和度的顏色融合性更高，適合作為弱化性質的背景使用。
方法 03 ：利用背景模糊融合
背景模糊在 Sketch、Figma 等設計軟件中有該功能，是一個影響設計趨勢較為常用的功能，特別是在實現玻璃質感和一些質感圖標上面非常實用。
在背景層繪制圖形，顏色和形狀均可自由發揮，然后再繪制一個形狀作為調節層，調節層是用于控制模糊效果的。在調節層的形狀上面設置一個帶有透明度的顏色（必須要帶有透明度），然后再設置背景模糊，背景模糊數值的大小決定模糊的程度，不透明度的大小決定整體效果的亮度。
方法 04 ：利用圖片模糊融合
以上的方法都需要進行配色處理，如果色感方面比較薄弱的設計師，也可以挑選一些不錯的圖片來實現極光風效果。
挑選一張色彩符合要求的圖片，然后在 Photoshop 等設計軟件中執行高斯模糊，半徑值的多少決定了模糊之后的自然度。我們在選擇圖片的過程中除了整張圖片進行操作以外，也可以截取其中的一部分，也許可以帶來意想不到的效果。
除了這幾個方法以外還有更多不一樣的實現方法，大家可以根據自己的探索選擇最適合自己的方法。根據使用軟件的差別選擇最簡單的形式，根據想要實現的效果選擇最靈活的方法，這樣才能便于后期的反復調整。
五、小結
研究落地產品的設計細節和視覺趨勢，將有助于提高我們對于當前有效設計趨勢的把控，而不僅僅只是停留在概念化的預測階段，而是行之有效的真實案例。
極光風是近些年運用在落地產品中的 UI 設計趨勢之一，通過大量案例驗證之后的有效方法，希望大家能夠掌握并靈活運用到項目設計中。落地產品的 UI 設計趨勢還有很多，本次分享的僅為拋磚引玉，后續將和大家探討更多的有效設計趨勢，輔助提高我們的設計能力。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創發布。未經許可，禁止轉載。
搜索框的設計并不簡單，很多的細節需要設計師去注意和思考的。下面總結一下我在設計搜索框的經驗，分享給大家。
你可能認為，搜索不就是一個矩形框+放大鏡圖標再加一個占位符不就搞定了嗎？
經過多年的設計工作頻繁設計搜索功能后，我發現在不同類型的產品中搜索框的交互方式、視覺樣式都有所不同，且用戶在搜索前、搜索中、搜索后都需要注意用戶在搜索各個流程中的可能操作，包括正向流程、反向流程。
搜索框的設計并不簡單，很多的細節需要設計師去注意和思考的。下面總結一下我在設計搜索框的經驗，分享給大家。
友情提示：文章尾部有福利相送，不要錯過~
搜索是用戶將查詢的信息輸入搜索器中，搜索引擎就會在約定的規則下將獲取到的信息反饋給用戶的過程。
搜索是B端產品中非常重要的一個功能模塊，通過搜索框用戶可以快速找到或者篩選出自己想要的內容，在引導用戶走向方面起到了絕對性的作用。
體驗設計中有個概念叫用戶分層，即便是同一個頁面，我們也需要去細分不同的場景對用戶做分層，為不同的用戶做設計，搜索功能就是最好的為有明確目標的用戶分層的設計。
搜索功能的用戶分層可分為幾種場景：
搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等...
有明確目的型用戶在進行了搜索這個行為后，便生成了搜索歷史。因此，我們可以通過挖掘用戶搜索行為背后的目的，來分析為什么使用不同的布局。
模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，可根據產品場景選擇。
搜索功能可以簡單地輸入，快速輸出，只要幾個關鍵字就可以獲得符合用戶需求的內容，將原有的用戶行為成本轉移給系統，從而讓使用體驗更加快捷、輕松。
同時語音輸入和拍照搜索進一步降低了用戶行為門檻。
搜索功能可以幫助用戶快速定位信息，從而提高了用戶對內容的觸達效率。常見的例子就是：bi?r用戶有明確的購物需求時，不需要一步步點擊商品分類，選擇商品類型、品牌等信息，就可以快速直達自己所需的商品。
所以，搜索框的體驗如何，決定著B端產品解決問題的能力、效率以及用戶的使用頻率。
好的搜索框一方面能幫助用戶節約時間成本，讓用戶在大量且復雜的信息中篩查所需目標，提升用戶體驗；另一方面，還能協助產品收集用戶行為目標并做好數據埋點，為后期的更新迭代提供強有力的依據。
除了設計方式外，搜索還涉及到結果信息的數據匹配規則，受到算法精準性、商業化干預程度的影響，設計師同樣需要關注搜索結果如何更好地匹配用戶的精確搜索、模糊搜索需求，以從信息設計層面提升用戶體驗。
搜索流程，即搜索前、搜索中、搜索后的頁面跳轉以及搜索框形態的變化。
對應的就有：搜索入口——搜索推薦頁——搜索聯想頁——搜索結果頁——搜索結果頁返回。
設計師想要設計流暢的搜索體驗是無法避開梳理搜索流程的，考慮完整的搜索鏈路和用戶關鍵體驗路徑，并且設計出對應的所有細節，將搜索功能的價值發揮到最大化。
對于搜索系統來說，整個流程可以分為三步，分別是：
B 端業務中搜索使用的場景有兩類：一類是全局搜索，一類是頁面局部搜索（常見的有列表搜索、表單搜索）。
對于B端系統中模塊分類較多，所涉及到的內容比較全面的，一般會選擇全局搜索，全局搜索是通過關鍵詞匹配全局范圍內的信息來搜索的。
優勢：無學習門檻，用戶無需考慮內容對應的分類只需輸入關鍵詞；
劣勢：精準度不夠高；搜索出來內容泛；需用戶二次查找目標內容。
注意：設計全局搜索時要注意搜索后的結果展示邏輯，如果分類較多，界面還可以根據分類tab分別歸類不同。
tips：搜索功能在頁面中的重要程度及搜索范圍，決定了搜索的位置和樣式。
目前大部分網站在布局搜索框位置時，大致遵循以下幾個規則：頁面居中、頁面頂部居中、頁面頂部右邊、頁面頂部左邊
知乎的搜索入口位于頂部導航欄的顯著位置，引導用戶進行搜索，并且搜索框內的占位文字根據算法會間隔一段時間改變，引導用戶發現新的內容，促進用戶在知乎上的使用時長。
最常見的搜索方式之一，將搜索以輸入框的形式居于頁面頂部（狀態欄或標題欄下方），在視覺上非常醒目，用戶進入應用即能快速找到，很符合用戶的視覺瀏覽動線，也是C端產品提高轉化率的流量入口。
形態相對比較簡單，通常以“放大鏡”樣式的 icon 出現在界面右上角，視覺上不會過于突出，常用于搜索行為不是特別頻繁的場景，需點擊后才會跳轉至搜索框頁面。
Icon 搜索入口相較于上述提到的類型在視覺引導方面略遜一籌，相對弱化了搜索功能，但節省了更多的導航欄空間，呈現位置比較靈活，可單獨呈現、也可與其多個其他功能 icon 并列組合展示。
指的是在頁面中的某個模塊加入搜索的功能。
常見在數據列表頁面加入搜索的功能，搜索的目標只在該模塊該內容中進行搜索，搜索的信息具有局限性，當然也是更加準確地搜索用戶想要的目標信息。
下圖是一個美團商家后臺的列表頁面，此頁面加入了搜索的功能。
另外，B端常見在表單頁面加入搜索的功能，搜索的目標只在表單選擇內中進行搜索，搜索的信息同樣具有局限性，可以通過控制某個字段或者某幾個字段的信息來展開搜索。
B端業務中復雜的場景中存在同一個頁面中有多個搜索入口（如上圖美團），設計前需梳理清楚每一個搜索入口的交互邏輯，不同搜索入口覆蓋的搜索范圍、搜索過程、搜索結果是否一致，在占位文本上也需體現出該搜索入口的搜索內容。
模糊搜索是用戶搜索意圖不明確時，將用戶的查詢與待檢索的內容進行模糊匹配。
模糊搜索無法精確理解用戶的查詢意圖，搜索結果可能有大批量用戶不想要的信息，使用模糊搜索時一定要結合實際場景，慎重使用。
優點：只要有相關的內容都會被檢索出來，減少了精準搜索帶來的記憶負擔；
缺點：容易把相關的信息也帶出來，例如檢索186，把相關號碼也匹配出來。
精確搜索是指用戶在搜索時，針對某一數據字段搜索，來查找所需要的數據。
根據業務場景不同，我們會查找某一字段，或者是用標簽切換不同字段來查找。可以幫助用戶在巨大的信息池中縮小目標范圍，快速而準確的定位到目標數據，并速獲取需要的信息。
優點：搜索匹配精準度高。
缺點：每次只能對單一條件進行搜索。
總結：
我們可以根據產品的發展階段、需求側重、用戶的專業度和使用習慣來綜合決策使用哪一種方式更合適。如果側重查詢效率且用戶是有專業門檻的使用者時，可以優先考慮精確搜索；如果側重查詢結果的豐富度，可以優先考慮模糊搜索。
基于搜索欄的表現形式，可以分為以下四種類型：單屬性搜索、切換屬性搜索、多屬性模糊搜索以及多屬性組合搜索。
類型之間沒有優劣之分，根據業務場景使用對應的類型即可。
單屬性精確搜索：通過某個特定屬性就可以快速定位到目標數據，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
適用場景：表格單一數據信息特征突出，可以用此數據標簽快速定位目標數據。
切換屬性搜索也被稱為定向搜索，是由用戶主動選定搜索范圍后再進行搜索；
優勢：搜索精準度高。
劣勢：增加了部分用戶的學習成本及操作步驟。
適用于注重搜索結果的精準性或展示產品搜索能力等場景，定向搜索適用的幾種場景：
a、產品數據量足夠大且重搜索功能，用戶對于搜索有明確目標，定向可以幫助用戶提高搜索的精準范圍和效率；
b、搜索時輸入的內容無法通過同一套搜索交互方式和后臺計算邏輯承載；如單次搜索和批量搜索的輸入格式不同，搜索結果存在多樣性；
c、需外露產品亮點功能，有多個常用的搜索屬性，對于前置條件的數據計算能力和開發成本更高。
明確并固定選項類別，降低用戶操作難度。下拉篩選適合的選項類別有限，不適合多類別、復雜維度的分類。
平鋪展示搜索條件內容，每個 Tab 標簽代表一個篩選維度，操作便捷。Tab 標簽的數量不宜過多。
B 端類產品數據量豐富，在實際使用時，簡單的方式很難全面覆蓋到各個搜索場景，精準定位搜索結果。所以通過多個篩選維度的結合，形成多屬性的組合搜索，能夠大幅提升搜索結果的準確性。
B端系統還有一種比較常見的搜索類型，是在定向搜索的基礎上，進一步豐富了搜索選項，比如指定搜索的時間范圍、數據類型等，設置的選項越詳細越能夠提升搜索結果的效果和準確性。
在設計時需要注意，B 端系統用戶角色多，層次不同，所以更加需要注重搜索前的引導，針對搜索規則、搜索限制等，應該適時的以簡練易懂的語言提示。
多標簽模糊搜索：表格多個數據都具有特征，往往業務要求對數據的精確度較高。
適用場景：業務類型多樣用戶可能記憶不精確且有多個數據特征，對搜索的便捷性要求高精確性要求低。
多屬性組合搜索：可以輸入多個字段進行組合搜索（取并集），對空間的利用率高，適合更加復雜的列表內容。
適用場景：綜合篩選項，對空間的利用率高，多標簽組合搜索可以得到較為精準的搜索結果。
聊了這么多搜索內容，與設計師密切相關且對外輸出的首要就是搜索欄設計。
對于用戶來說，搜索是為了解決用戶明確或者不明確的搜索需求，讓用戶能夠快速準確搜到想搜的內容。設計欄設計的目的就是，讓搜索能夠提高用戶獲取信息、內容的效率。
常見搜索框設計樣式
1、填充色：通常選用與頁面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶查找。
2、線框：多用于干凈簡潔的背景頁面。
3、投影：常用于風格簡潔輕量的風格頁面，同時搜索功能級別較高的場景。
4、透明度：常用于背景色復雜的場景，目的是為不破壞背景頁面的整體效果，在視覺上更和諧。 無外框：用于風格簡潔的大留白的頁面。
完整的搜索流程包含了各種細節：例如搜索欄的形式、光標停留、輸入狀態、異常數據、搜索結果、二次篩選等等。整個過程包含很多交互的細節設計，下面從激活搜索欄、輸入反饋、觸發方式來展開說明。
搜索激活指用戶激活搜索框時出現的搜索下拉面板，B端業務中搜索激活內容常見以下三種：
搜索記錄通常以標簽或列表的形式顯示，以時間順序從新到舊排列，一般不會完全展示，可以滑動查看更多，或者折疊展開。
注意：搜索記錄會涉及對用戶行為的記錄，關系到用戶的搜索隱私，所以應當允許用戶手動刪除。
在 PC 端產品具有頁面空間優勢，用戶的搜索過程完全是通過搜索欄完成的。
搜索欄中會增加歷史搜索記錄，下方增加推薦關鍵詞，幫助用戶快速完成搜索。同時也可以喚醒用戶對某些商品的興趣和記憶，從而挖掘用戶潛在的搜索需求，這一點電商產品用得偏多。
在面板中展示“搜索歷史”和“最近瀏覽”，增加相關內容曝光，去給用戶提供更多選擇以觸達目標內容，該交互形式通常出現在全局性搜索或多維度搜索功能中。
搜索發現是系統基于用戶的搜索記錄，依據算法向用戶展示的搜索關鍵詞推薦，但并不是必需模塊，可以基于產品定位進行考量。常規的c端產品上用得多，B端產品用得少。
由于搜索發現也涉及用戶隱私，但應用一般不會讓用戶直接刪除，所以應當允許用戶對搜索發現進行隱藏，不然極其容易引起用戶的反感。淘寶、京東都有搜索發現，并且也允許用戶進行關閉/顯示的操作。
熱門推薦是搜索推薦頁里面內容推薦的總稱，可以演變成多種推薦形式，比如“熱搜推薦”、“推薦活動”等，熱門搜索是應用商業化的重要手段，許多應用都有這種模塊，并且內容形式多樣。
知乎的熱搜就是結合熱搜、時事熱點等進行推薦。
搜索反饋指用戶輸入本文時未確認搜索執行的中間過程狀態。在B端場景下搜索反饋具備很強的引導作用給予用戶當下的狀態提示；
是通過已輸入的關鍵詞來預測可以找到的搜索結果，為用戶創造更加便捷的體驗。
搜索聯想承載的不止顯性的設計呈現，還有背后的算法邏輯；例如是否可以識別拼音、不同搜索方式呈現的聯想詞范圍，都需要提前確認落地可行性后再統一定義相關交互規則，并在產品中的所有搜索場景中保持相同的交互邏輯。
用戶在搜索時輸入了錯誤的詞匯，系統經過判斷后會展示正確詞匯的搜索結果給用戶，并友好地告知用戶正確的搜索方式。特殊狀態包含無結果狀態、網絡不佳狀態等。
實時搜索+實時顯示；搜索只有一個文本輸入框，沒有按鈕可點擊，這樣的搜索交互是通過輸入關鍵詞后，系統自動檢測所有內容中符合關鍵詞的目標信息，隨著關鍵詞的持續輸入，與之相匹配的結果會逐漸減少、直至找到目標，類似自定義篩選功能。
這種交互一般對于數據信息比較少的情況下會比較友好，加載的速度更快，避免服務器的壓力太大、影響反饋效率，例如地址搜索、查找聯系人等。
關鍵詞輸入完成后，需要手動點擊搜索按鈕向服務器發送指令才會得到相應的搜索結果，這種方式適合大部分表格場景，更加適合B端產品復雜且龐大的數據場景。
搜索結果頁是用戶搜索的落腳點，在這個頁面，用戶會有目的性地瀏覽搜索結果。
搜索結果中隱含著搜索邏輯，全局搜索場景下多數為模糊搜索，即把與搜索關鍵詞詳盡的內容頁反饋出來，匹配度低，需要花時間對結果二次篩選。
1. 快速瀏覽數據，并能夠準確找到數據。
2. 需要經常變換條件的組合迭代查詢數據，對查詢結果精準定位。這就需要搜索結果后，不要清除用戶的查詢內容。
3. 對數據進行操作，如收藏、刪除、下載等。
不同的內容需要不同的頁面布局來支撐的，b端場景中最常見的兩種布局，篩選上下布局和左右布局，當然內容部分又分列表布局和柵格布局。
1、凸顯關鍵信息：
為了便于用戶找到精準高效的信息或者進行便捷操作，在搜索聯想頁狀態時，當用戶輸入的信息足夠清晰可預測，可以將關鍵信息凸顯呈現，以引起用戶的注意力，在進入搜索結果頁之前就可以提升轉化的可能性。
此外，這種關鍵信息凸顯的形式，在搜索的商業轉化方面也有明顯的作用。
2、沒有結果，如何設計
搜索沒有結果會讓用戶感到非常沮喪的，尤其是當用戶進行了好幾次搜索之后，依然沒有結果，應當為他們提供有價值的替代品。
一般出現無結果的狀態有兩種情況：
a. 用戶輸入錯誤，一般會提用戶正確的搜索方式，并且自動幫助用戶糾錯，
b.搜索結果無，這種情況一般設計會以空狀態提示用戶，采用友好的方式提醒用戶更換關鍵詞。
在使用中，搜索本身應該是0思考成本的，否則就失去了索引的核心價值，基于此，總結一下5個設計注意點：
當用戶輸入搜索文本，點擊搜索按鈕，就進入了搜索結果頁流程，此時搜索框內應當保留搜索文本，以便于用戶明確搜索的內容（不要依賴用戶的記憶力），同時，也便于用戶再次編輯搜索文本。
考慮到輸入/清除的便捷性，應用也應當提供一鍵清除按鈕，點擊一鍵清除搜索的文本，減少用戶的操作成本。
搜索項目不可避免的比較多時，可以進行分類展示，降低尋找成本，常用的有兩種分類方式：
無效的自動建議讓整個搜索體驗降低，而精準的自動建議會讓整個體驗好上許多，它會根據用戶用戶的輸入內容（詞匯詞根和后臺數據）為用戶提供有用和精準的輸入內容建議，這有助于幫助用戶提高搜索過程的精準度，提升整個搜索體驗。
輸入錯誤絕對是最常見的錯誤，如果用戶錯誤地輸入某個關鍵詞，而你的檢測到了，并且針對錯誤提供更正之后的結果，這樣就成功的規避了因為錯誤的關鍵詞所導致的不良后果，用戶也不用再次進行搜索了。
即使用戶熟知搜索引擎的全部功能，也需要借助大腦記憶來挑選關鍵詞，進行搜索。
想要找出有意義的、可用的搜索關鍵詞搭配，用戶需要結合他們的搜索方向，最近的查詢，聯想相關的屬性和關鍵詞，使搜索體驗更便捷流暢。
總結
搜索是我們日常中頻繁接觸的功能，看似簡單，背后都隱藏了很多流程與邏輯，不建議設計師盲目遵從原型依葫蘆畫瓢。
設計師更應該在設計之初從業務類型、功能定位、使用場景等多維度綜合分析選擇，從交互體驗層面去深思搜索功能，因為搜索除了數據匹配精準度、搜索內容廣度之外，搜索體驗的便捷性也會影響用戶搜索的感受。
每一處細節背后的設計思路就變得尤為重要。
本文總結梳理了搜索功能，從搜索基本屬性、應用場景，到搜索分類，再到搜索欄設計，都進行了闡述，最后再總結了搜索設計的一些注意點。希望你能夠幫忙理解搜索功能的設計。
作者：三原設計社
鏈接：https://www.zcool.com.cn/article/ZMTUzOTE0OA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
本文將從對當下常見banner的設計規則等進行剖析，并融入自己的思考和總結，著重從用戶的角度去思考一張banner廣告的設計規律。
你一定也發現了，在這個時代下只要處在同一賽道的產品，大多數免不了日趨同質化，不論是功能還是形式、內容還是算法。就拿內容型產品來舉例：去掉顏色，以下四個產品的首頁，你能分得清誰是誰嗎？
雖然可以做品牌差異化，但很多產品在招牌打響前，也會經歷相當漫長的一段成長期。而在大家都卷的分不清誰是誰的時候，通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。
之前在團隊有幸負責過一次產品趣味性的探索，雖未全部落地，但沉淀了不少經驗。今天，我將這些經驗以文章的方式分享給你，希望對你有所啟發。
為什么產品需要趣味性
1.符合本能需求
馬斯洛的“需求層次理論”（Hierarchy of Needs）你一定聽過。這個理論提出人類的需求狀態是持續不斷的，一段時間內，個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看，人類的需求永遠不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后，自然會需要情感的滿足。
尤其現在這個相對嚴峻、內卷成風的時代下，大家都渴望在上了一天班之后，自己用的產品可以給自己解壓，而不只是個單純的冷血工具。
2.影響用戶行為
產品傳達趣味性的信息，那么這些信息便更容易被用戶接受、甚至激發興趣。正如用戶關系和精準化運營的先驅——史蒂文·貝萊格姆的那句話：“趣味是設計產品中最人類化,最直接,最能引起人們興趣的因素。”
根據艾達模型這個經典理論，一旦用戶對某件事產生興趣后，則更容易促成他的決策、乃至最后行為的發生。畢竟我們絕大多數的決策并非源自理性。
另外，《瘋傳》這本書提及過一個重要的概念：情緒喚醒。當情緒喚醒度較高時，往往會更容易激發用戶的分享行為（比如愉悅、驚喜這樣的正面情緒，當然也會包括憤怒、恐懼這樣的負面情緒）。而產品所呈現的趣味性，很大程度上更容易引發用戶的高喚醒情緒，從而主動采取一些產品希望他實施的行為。
3.緩解負面情緒
使用一款產品的過程中，必然會出現不夠正向的反饋，比如404、斷網、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力，很容易造成行為中斷甚至流失。
但此時如果通過一種趣味性的方式呈現，很大程度上可以緩解用戶的負面情緒。
比如readme的登錄頁面，當你輸入密碼時，貓頭鷹捂住雙眼，很好得緩解了用戶的不安全感。再比如餓了么，惡劣天氣下會實時記錄當前的天氣狀態，通過同理心的觸發也可以緩解用戶等待時產生的焦慮。
4.實現情感鏈接
對應諾曼在《情感化設計》中的「反思層」，通過品牌差異、獨有內涵等方式來喚起用戶深層的記憶和情感，產生情感共鳴，從而形成認知，建立起深厚的情感鏈接，以讓用戶越來越忠實于產品。此時產品作用更多的是作為一個承擔情感的載體。
我們旅游時經常會購買一些貌似沒什么實用性的紀念品，明信片、木雕、徽章等等，可能最多只能放在房間當裝飾。但是紀念品的關鍵意義，在于承載著旅游時的記憶。類似的還有單機游戲發售時，除了標準版外，往往會同步發售包含手辦、美術設定集等物品的豪華版，同樣用來承載玩家的情懷。
最典型的例子，就是Google的Doodle設計，在不同的節日、紀念日、或者緬懷一些先驅、藝術家時，會投入很高的成本起設計各種趣味性的插畫logo，豐富有趣，而且很多時候可以支持互動游戲。比如18年的萬圣節，就做了一個有趣的多人對戰的小游戲。
Doodle不僅是Google文化、價值觀的象征，也通過這種趣味性的創意讓用戶實現更深層次的情感交流，建立情感紐帶并增加粘性，不會輕易得流失到其他替代品中。
趣味性是什么
關于這個概念，有三條相對客觀專業的說法。
德國古典哲學創始人康德《實用人類學》中，指出趣味性是人類由于受到外部環境的影響而對客觀事物產生的直接的感性反應，不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思，從而心理產生愉悅的變化。
另外，康德在《判斷力批判》也指出，趣味是指主體以積極主動的姿態，在超功利的層次上對某一對象表現出喜愛和愉悅的情緒狀態。
《漢語詞典》將趣味釋義為：使人感到愉快，能引起興趣的特性。
看似各不相同，但根據這三個概念提煉下，可以發現他們都是在融入一種正向的情緒加以解釋。
那么，趣味性背后的情緒到底是什么？
趣味性背后的情緒
情緒這東西千變萬化，為了避免主觀臆斷的不準確，我搜羅了關于情緒的研究資料，目前相對權威的有三個：plutchik情緒輪、日本感性工學、諾曼的三層理論。
后兩者未對情緒進行指標的定義，所以這里只聚焦在情緒輪上。
情緒輪由羅伯特·普洛特契克開創，這個理論指出人類的基本情緒一共由8種，生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負面情緒，能夠符合趣味性帶來的情緒基本就三種：愉悅、期待和意外。
為了為產品所用，就需要提煉出更具象的特征。下面，我通過腦暴的方式對每類情緒進行發散聯想。
聯想了大量可以引發愉悅情緒的事物，比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。
我發現這些事物，一般具備了以下特征：
1.會給予我們即時反饋；
2.擬人化，比如帶有人類才有的表情，或者是人類的動作語言；
3.柔軟的、毛茸茸的、圓潤的、有溫度的；
4.會動的、解壓的
聯想了大量可以引發期待情緒的事物，比如被買爆的泡泡瑪特盲盒，商家售賣的福袋，各種諸如擲骰子、老虎機的隨機性游戲，各類抽獎活動，一些游戲開局roll屬性點的環節（比如金2、河洛等游戲，當年玩的時候我驚訝得發現我居然能roll上一整天）
這些事物大致會帶有這些特征：
1.未知的、神秘的；
2.滿足人類的好奇心的；
3.對結果能滿懷希望的；
4.隨機的正向獎賞；
5.只需要一步簡單到發指的操作（打開容器、拉動拉桿、點擊按鈕等等），不需要任何的行動門檻，也沒有等待時間
比如《設計中的設計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細節、電影或者游戲中突然出現的彩蛋、iPhone第一代的發布現場、突然發現的世外桃源、突襲的生日驚喜等等。
這些事物大致會帶有這些特征：
1.超出原有預期的；
2.未提前告知的；
3.正向結果的；
4.產生共鳴的
那么，這些特征又該如何更具象得落地成策略，產品中又是如何利用這些策略，引導用戶產生這些情緒的呢？
下面，我將基于這三類維度，并結合大量的大廠案例來為一步步你抽絲剝繭。
如何制造愉悅感
基于上面的挖掘，我發現能引發愉悅感的一個明顯特征，就是擬人化，這個非常有意思。
克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點：人們對待電腦的方式，與我們在與他人交流時使用的社會規范是一致的。我們對電腦的反應，就好像它們是人類一樣。
也正因此，很多原本沒有生命體征的物體，一旦被賦予了擬人形象，就容易被大家所接納、引發愉悅。
做一下細分的話，擬人化基本涵蓋了三個方面：語言、形象和表情。
1.1擬人化的語言
人對于具體的擬人形象更容易產生情感，其中便包含擬人化的口吻。使用這種口吻與用戶交流，而非冷冰冰的設備語言，就可以提升產品溫度，引導用戶對產品產生正向情感，關于這塊我總結了兩方面。
一方面，文案盡量得接地氣、輕松。
拿京東這款產品舉例，文案從口吻上都會采用一種很輕松、接地氣的擬人語氣，來拉近和用戶間的距離。比如在引導詞后加入“哦~”“~”這種輕松的語氣詞。
另外，「京東問答」版塊的引導詞：傳統產品是“添加問答”，是不是平平無奇。但京東使用了“我來助你一臂之力~”
QQ瀏覽器的評論暗提示，也不是傳統的“寫評論”“輸入評論”，而是像日常聊天那樣“我來說兩句”，非常接地氣、生活化。知乎直接套用了流行語，詼諧的同時引導用戶注意言論。
另一方面，人類富有情緒變化，所以一旦用戶觸發了某個正面/負面行為，就可以給與情緒反饋。
在用戶完成商品評價后，京東不僅僅是很傳統得反饋“評價成功”，而是又加入了“感謝您！”的感謝詞。看似加了三個字，但行動過后的正向感激反饋，和我們日常生活中受到正向反饋一樣，被喚起正向的愉悅情緒。并愿意繼續這個行為。
知乎的圈子業務，在用戶完成簽到后，反饋完成的基礎上，使用了正向的情感反饋“ 我就知道你會再來看我”，仿佛是一位關系不錯的老朋友，來喚起用戶正向情緒。
另外，知乎在改版后，回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言，而是“已收到你的喜歡，謝謝！”并且配以作者頭像，非常形象得傳出對對方對我們的感謝反饋。這種正向反饋，相比”點贊成功“更有效得喚起正向情緒，形成正向激勵。
當然，用戶的消極行為也可以產生情緒反饋。
比如現在很多產品的取關反饋，不是傳統的“確認”“取消”，而是用“殘忍取關”和“給個機會”這種融入情感的文案來做挽留，就好像真的有個活生生的人，在被你否定后反饋給你的情緒，請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。（雖然這種做法過于業務導向，且有綁架用戶的嫌疑）
人對于具體的擬人形象更容易產生情感。因此，樹立一個擬人化的品牌形象（也就是我們常說的IP），可以使用戶對產品快速建立情感聯系，也可以強化品牌感知。比如優酷的猴子、高德地圖的老鷹、釘釘的燕子、linefriends等等。
世界杯的吉祥物也是同理，每一屆的吉祥物必定會融入擬人化的特征，憑著親切、可愛的形象和全世界的觀眾一起熱情互動。
說到產品，以京東的這只狗子為例，兜底頁、缺省頁、啟動頁，都做了狗這個擬人形象的貫穿。
如果你記得沒錯的話，形象改版之前這只狗還是四腳坐地上的，但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」，以此提升愉悅感，拉近距離。
再比如夸克，它甚至單獨新增了底tab入口，通過3d品牌形象，實現與用戶的智能交流。另外，卡片和語音搜索都做了形象貫穿，后者還使用了形象的眼睛，來通過眼睛的變化進行情感交流。
一段文字在加入了表情后，我們就能迅速了解到對方的情緒（比如我們日常的聊天）。因此表情這一招，也可以用以加深用戶與產品的情感交流。
它可以和語音、形象靈活結合使用。通過全面的擬人化，來大幅提升用戶對產品的形象感知，促進用戶情感的產生、加深用戶和產品的情感鏈接。
比如用語言輸入，當系統未識別清楚時，傳統的方案可能是一個錯誤圖標加上「未識別聲音，請再試一遍」的文案，但夸克中則使用了品牌形象的雙眼來傳達失落的表情，并結合了擬人化的語言。
同樣做法的還有百度的未開麥提示、段子頭圖，快速傳達產品的情緒，和用戶情感交流。
另外，閑魚設置昵稱時，正在輸入時、以及超出了限定字數，右側的形象表情也會發生變化。
除了擬人化能引發愉悅外，還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。
提起動畫的作用，我們更多人首先想到的可能是強引導、注意力吸引，但動畫同樣能觸發用戶愉悅。比如當動畫更加貼近現實，或者結合擬人化的特征時。
最典型的例子，就是蘋果appstore從卡片到詳情頁的轉場過渡，點按的預備動作、卡片的放大展開、緩出的曲線、轉場完成的慣性等等，都很貼近現實物理世界的運動規律。而這種自然的絲滑也更能引發用戶的愉悅。
比如知乎的加載動畫，結合了擬人化的特征，讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產品的定位。
如何制造期待感
根據我們對期待感的腦暴，發現能觸發這種情緒最典型的特征，就是隨機性。
在產品中，則可以通過隨機給予用戶有價值的內容來引發用戶的關注。結果的不確定使過程充滿神秘，這種狀態讓用戶興奮和滿懷期待，不會輕易離開。
比如網易新聞在進行新聞加載的操作時，會在加載動畫上加入一個隨機的小貼士。內容大致有三類：黃歷、名言和一句話新聞。而且這些內容完全是隨機出現，這種刷新過程好像在開盲盒，你無法預知會給你什么內容，非常有趣。而且它們入口深，不干擾；內容對用戶也具有價值。
同樣的還有丁香醫生。在首頁每次下來刷新后，都會出現不一樣的健康類的小貼士。隨機性很強，富有趣味。而且可以很好得滿足求知欲。
雪球的個人頁上，上劃時也會隨機給一條關于投資、市場的名言和網友的熱門觀點。
把現實生活中的游戲搬到了手機，同樣能激發用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。
如何制造驚喜感
格雷戈里·伯恩斯曾做個關于腦部區域的研究，發現大腦不僅探尋未知，而且實際上還渴望未知。相比那些已知的日常慣例，新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動，不但能引起注意力，而且也會帶來驚喜感。
產品中的驚喜感設計，可以說是使用瞬間能夠觸達我們內心的一種短暫性愉悅，一個體驗的峰值。
根據對驚喜感的挖掘，一個典型的特征就是超出預期，并且未提前預料。
比如Figma使用過程中，團隊成員和你同時長按鼠標，并且靠在一起后，就可與觸發擊掌的動畫彩蛋，非常有意思。
比如京東在五星好評后，會放煙花慶祝。
比如很多內容型產品，在詳情頁長按點贊按鈕后，會觸發全屏的「爆贊」動畫。
再比如用戶生日當天，通過啟動頁、彈窗等場景送上生日祝福等等。
這些能夠超出用戶預期的細節，即便多么細枝末節、出現頻率多低，但只要能夠被觸發，都可能因為驚喜感而生成情緒峰值，加深用戶和產品的情感鏈接。
最后
以上，便是趣味性背后的情緒挖掘和案例講解。
作為設計師，我們在工作中總是強調以用戶為中心，通過不斷的調研、跟訪、可用性測試來了解、分類用戶，但更多的結果可能只是讓產品不斷得貼合用戶的心智、符合預期。但如何增加粘度、建立深層鏈接，就需要通過趣味性這種情感化表達方式，來為用戶制造愉悅、期待甚至驚喜。
正像諾曼在「情感與設計」中說的那樣，每個產品都需要令人更放松、更愉悅的設計，以此來增強產品的適用性。
希望這篇文章能對你有所啟發。
本文將以有駕導流體驗升級的項目為例，分享導流增長探索的設計思路與實踐經驗。
// 寫在前面
端到端導流是指在產品矩陣體系內引導優質產品的用戶使用另外一款產品，帶來使用量的提升，從而實現用戶規模提升的一種增長手段。隨業務快速增長，有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產品矩陣，依托各端流量實現矩陣產品間的導流，逐步積累用戶規模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導流體驗升級的項目為例，分享導流增長探索的設計思路與實踐經驗。
// 為什么要做導流
導流的目的
對于業務本身而言，隨著移動互聯網流量紅利期的結束，獲取新用戶的成本越來越高，不管是新產品還是成熟型產品，都需要通過導流的手段來持續擴充新用戶。其次，對于有駕產品生態而言，需要各端產品間的相互聯動，協同發揮優勢，實現流量價值最大化。
導流的優勢
成本低，相較于投放、活動等渠道流量獲取方式，矩陣導流成本低；
高意向，用戶購車意向明確更容易實現商業轉化；
可共享，用戶數據及行為關聯互通。
// 如何做好導流設計
1.問題分析
通過梳理核心場景的4種導流條，發現各個場景導流形式各異，用戶缺乏統一認知，導流引導語單一內容吸引力弱。在用戶在瀏覽頁面時，點擊功能入口或想要繼續查看更多內容，需要下載APP才能繼續阻礙用戶瀏覽：
缺乏統一認知：視覺表達形式不成體系，用戶感知不夠；
內容吸引力弱：內容單一缺乏吸引力，用戶沒有點擊欲望；
阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗。
從導流鏈路的用戶行為來看，整個流程下載路徑過長，發現用戶流失較大的轉化點：
從小程序落地頁到下載頁：在進入小程序瀏覽頁面時，用戶沒有注意到導流條就滑走了；
點擊導流條進入下載頁：點擊導流條會先調起導流彈窗，點擊確認后再進入到下載頁，用戶未選擇下載就退出了。
2.明確設計方向
針對導流現狀缺乏統一認知，內容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題，我們搭建了一個完整的導流鏈路圖，根據用戶增長模型，把用戶生命周期各節點的用戶行為與產品觸點一一羅列出來，找到增長路徑的設計機會點。
通過以上的問題分析，如何建立用戶和產品的鏈接，保障友好的體驗，是本次導流升級要解決的問題。根據用戶關鍵行為，我們可以將整個導流鏈路拆分為3個階段來挖掘主要機會點：
下載前：興趣激發導流吸引，建立用戶穩定認知；
下載中：強化用戶轉化動機，刺激用戶完成下載；
下載后：保障還原體驗暢通，提升首次使用體驗。
下面將分別介紹導流下載前階段的設計落地實踐，以及下載中、下載后階段的延伸設計思考。
// 下載前
1.強化觸點吸引
是否能成功引起用戶注意，是轉化開始的第一步，統一的視覺風格和滿足用戶訴求的內容，有利于增強導流條的吸引力。
1）收斂導流條類型
針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉預期的體驗問題，下線了阻斷式和截斷式兩種體驗不友好的導流類型，將原來4種導流類型收斂為2種，僅保留通用導流條和功能延展導流條，基于這2種導流形態進行深入的設計探索。
2）建立通用視覺標準
針對【缺乏統一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題，建立了通用導流條標準化規范。統一視覺形態，優化為頁面內通欄嵌入式，同時融入品牌色強化用戶感知，根據頁面布局制定了不同的展示規則。
上線后，內嵌導流條在展現受限的情況下，導流轉化數據與改版前基本持平，為了進一步提升導流的點擊效果，開始探索場景化定制提轉的設計方向。
3）定制場景化內容
針對【內容吸引力弱】內容單一缺乏吸引力、用戶沒有點擊欲望的內容問題，在通用標準化形態的基礎上，根據不同場景用戶訴求點，豐富導流內容。分別從內容定制、按鈕文案優化、以及氛圍強化3個方向驗證對轉化的影響。
內容定制：豐富導流利益點、場景化內容更能激發用戶興趣，促進轉化達成；
按鈕文案：轉化按鈕文案導向性明確、內容與導流利益點匹配，可以助力按鈕轉化提升；
氛圍強化：導流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導流條點擊。
2.拓展場景擴量
復利通用標準導流條的成功經驗，應用到功能延展類導流條中繼續驗證有效性，從產品價值點出發，挖掘高流量場景的機會點從而帶來轉化增量。
1）價值傳遞
根據小程序和APP兩端各自的不同點，分別從功能差異及體驗差異兩個方向進行優化。
APP特有功能：APP完善的功能體驗可以更好滿足用戶訴求，例如參配瀏覽場景下，引導用戶體驗搜索及橫屏查看的高頻功能，對于導流轉化有正向幫助；
各端體驗差異：小程序和APP兩端體驗存在差異，例如圖片瀏覽場景下，APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗，能夠刺激用戶轉化。
2）價值延續
當用戶完成核心內容消費后，是否可以引導用戶去APP繼續瀏覽更多相關內容，進而引導用戶下載呢？
服務透傳：平臺服務內容傳遞，例如在內容落地頁文末增加品牌廣告導流條，幫助用戶建立品牌認知；
相關推薦：引導相關內容消費，例如在文章或視頻頁增加相關推薦導流條，引導用戶瀏覽更多相似內容。
// 下載中
當用戶通過導流條進入到下載流程時，還有哪些手段可以刺激用戶激活減少流失呢？
強化下載動機：下載頁前置APP落地頁內容，例如將通用下載頁優化為場景化下載頁，給用戶超前產品體驗吸引轉化；
減少用戶流失：縮短鏈路簡化流程，例如可在下載中間頁完成應用下載，同時退出下載頁時增加挽留。
// 下載后
當用戶在應用商店下載完成后，我們還能做哪些提升首次啟動APP的體驗呢？
還原鏈路暢通：提升場景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導新用戶探索功能，根據用戶興趣推薦適合的內容。
以上內容是下載中和下載后階段導流優化方向的一些延伸設計思考，為大家提供可以繼續探索的方向。
// 寫在最后
總結一下本篇文章關于導流的體驗設計要點：
全鏈路洞察，對導流鏈路進行拆解，通過盤點導流鏈路的用戶行為，明確每個節點的設計方向；
降低廣告干擾性，減少用戶瀏覽過程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導，讓用戶專注于產品本身傳遞的價值，引領用戶完成對產品的探索從而完成下載激活。
希望以上的設計思考，可以帶給大家一些啟發。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
對于產品設計師來說，在同質化的環境中我們需要具備突破創意的思維，這樣才能輸出差異化的設計方案。而創意離不開優秀作品的靈感啟發，發現有意思的設計細節也能提高我們的設計思維。
今天黑馬哥將會繼續為大家帶來一些優秀的設計細節，我們一起來反思一下，這樣的設計想法為啥自己沒有想到呢？
分享目錄
一、營造頂部區域視覺感與情感化
二、主題化配圖增強視覺感
三、彈幕式標簽提高關注度
四、IP 強化底部標簽欄圖標設計
五、強化動態發布的引導設計
六、連貫性的插畫突出卡片特色
七、動態表情化的評價設計
八、場景化的推薦設計
九、上下輪播的 Banner 設計
十、情感化的氛圍營造
一、營造頂部區域視覺感與情感化
產品頂部區域的視覺感是吸引用戶的關鍵，在一些功能單一的產品中，強化視覺表現力也是提升產品豐富度的有效形式。
比如麥當勞 App 首頁的設計中，頂部區域結合溫馨的場景插畫進行表達，讓你早上打開麥當勞就有種心情愉悅感。動態的太陽微笑畫面給你一天好心情，情感化的設計不僅增強了視覺感，也帶給用戶美好的產品使用體驗。
二、主題化配圖增強視覺感
封面圖在產品規范中相對比較難約束，通過構圖、比例、固定元素和配圖質量等，在一定程度上可以提高感官體驗。如果是在重點突出的內容上面，結合主題化配圖也可以增強視覺感。
之前在使用優酷 App 時，當時在重點突出熱劇的設計中，就將主題化的內容融入到宮格的配圖中。以統一的畫面風格和設計表現形式填充封面，增強了視覺表現力，以此突出熱劇的吸引力。
三、彈幕式標簽提高關注度
在固定的結構布局中如何提高局部內容的關注度，我們需要在不改變結構的前提下進行創意融入。比如動態畫面、突出視覺感、內容特異化等等，而最近發現彈幕式標簽也是一個不錯的選擇。
在體驗優酷 App 時，在動漫欄目中針對推薦的熱播新番，想要突出的動漫結合了彈幕式標簽進行強化。動感的節奏會提高用戶的關注度，在不改變當前結構的基礎上，不失為一種有效的解決方案。
四、IP 強化底部標簽欄圖標設計
底部標簽欄圖標是產品設計師經常發揮的場景，在一些節慶主題或者活動中都會定制設計。
優酷 App 在元旦促銷活動期間，就將底部標簽欄圖標設計與 IP 形象結合，默認以促銷主題文字展示，點擊狀態以 IP 形象顯示。圖標與活動相結合，不僅突出圖標視覺表現，也營造了活動氛圍感。
五、強化動態發布的引導設計
對于靠內容吸引用戶參與度的產品來說，提高用戶發布動態的意愿度至關重要，突出動態發布的吸引力也能起到促進作用。
會玩 App 在動態發布的引導設計中給出了不錯的思路，未發布動態時會以形象化的空狀態設計進行引導。動態發布的按鈕旁以俏皮可愛的形象進行引導設計，提高了按鈕的吸引力，讓用戶有種參與的沖動。情感化設計的引導不僅可以增強感官體驗，也更容易攻破用戶的防備心理。
六、連貫性的插畫突出卡片特色
卡片式設計已經成為主流的產品設計趨勢，信息的歸納感可以提高識別效率。探索卡片設計的表現特色尤為重要，重點在于卡片造型和內部視覺表現力的發揮層面。
麥當勞 App 在主內容的卡片設計上運用了配送場景插畫，連貫性的插畫突出了卡片特色。插畫場景結合了品牌圖形，增強了麥當勞的品牌曝光度；白天和晚上還以不同配色風格和細節進行差異表現，無論是想法還是設計細節都非常不錯，是一個挺有創意的案例表現。
七、動態表情化的評價設計
用戶評價可以反饋服務的質量，進而做出產品迭代或者服務調整的思路。如何提高用戶參與評價的積極性，需要產品設計師多多探索啦！
最近在使用順豐速運小程序時，完成快遞業務之后進行評價，表情化的星級評價非常有意思。不同等級以不同的表情呈現，動態表達非常形象生動，讓人不由的挨個體驗。動態表情的形式提高了評價的關注度，情感化的表達讓用戶更愿意參與評價，提高了評價的體驗度。
八、場景化的推薦設計
針對電商類產品來說，商品/店鋪推薦模塊出現頻次較高，吸引用戶關注度自然成為了設計的首要目標。
在體驗 Mars App 時，在生活超市推薦的設計中，模擬了便利店的場景形象。真實感的場景表達帶給用戶親切自然的購物體驗，同時也提高了用戶對于該模塊的關注度。
九、上下輪播的 Banner 設計
輪播 Banner 圖算是產品設計中最常見的模塊，在移動端的設計中通常左右輪播為主，最近體驗到上下輪播的案例，打破常規也不失為一種新的設計思路。
在 Mars App 的首頁 Banner 圖以上下輪播進行交互，左側固定展示定位城市的天氣等信息，提高了 Banner 位置的利用率。Banner 與金剛區懸浮在特定的背景上，帶給用戶沉浸式的感官體驗。
十、情感化的氛圍營造
情感化的設計可以讓產品更有溫度，增加用戶對產品的好感度。配合傳統節日或者節氣主題進行表達是相對比較普遍的形式，會在產品主題和視覺區域進行氛圍營造。
在清明節期間體驗飛豬旅行 App 時，頂部區域以踏春的場景營造氛圍感，還在搜索區域以青團（青團是江南人家在清明節吃的一道傳統點心）替代搜索按鈕。情感化的設計營造不僅體現了產品的溫度，也帶給用戶對于節日的場景體驗。
小結
禁錮我們思維的不是我們的技術，而是我們的眼界和設計感知。發現優秀的設計并總結和轉化，才能讓我們打開禁錮的思維，在優秀的基礎上輸出更好的設計解決方案。
本文對于設計的理解闡述屬于個人見解，不足之處歡迎大家留言補充，我們互相進步。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創發布。未經許可，禁止轉載。
這期內容依然是關于設計中的細節處理。基于我平時的工作經驗，下面給大家整理了10個排版小貼士，希望能為你帶來幫助。
藍藍設計的小編 http://m.gerard.com.cn