相信身為設計師的我們，在工作中肯定遇到過自己加班加點，絞盡腦汁設計出的方案被質疑、挑戰，在宣講自己設計方案時，總會出現以下聲音：
起初的無言以對到有理有據的辨析設計方案都體現出對設計方案更加全面的思考。
想要讓自己的設計方案更合理，獲得大家認同，可以分為 4 個步驟：
1、 樹立自己用戶思維
2、充分辨析用戶需求
3、嚴謹打磨設計方案
4、精準有趣的文案
我們常說吃飯不積極，思想有問題。看似玩笑話，但是蘊含的是對于吃飯是本能，是刻在腦子記憶中的。而設計師在做設計時，也需要有這種“本能思維”。
用戶思維最基本就是 圍繞用戶 幫助他們 解決實際問題。如果用三個字來概括的話：人、場、事。
人：目標用戶
場：在什么情況下？
事：要干嘛？
例：筆者 因為在家寫文章沒時間出去吃飯 ，所以需要點外賣 讓別人將飯送到家里。
一個合理的設計方案，必然是將人、場、事很順暢的串聯下得出的結果。
用戶之所以有需求一定是遇到了問題（需求源于問題），只要找準問題所在就能明確用戶需求，那我們的設計便成功大半。辨析用戶需求可以從兩反面：
2.1、確定問題
2.2、清晰表述問題
2.1、確定問題
除了常見訪談、問卷、測試等調研手段，設計師可以采用【同理心圖譜】的方式推導用戶需求
從 說了什么、做了什么、想了什么、感覺到什么 四個維度去勾勒用戶真實的想法感受。
例：日常支付場景
想要將問題表述清楚，還是回到第一部分我們講的：人、場、事上，通過陳述句將用戶面臨問題和期望狀態（目標）的差距描述出來。
如：小明在QQ群里搶發紅包中，由于當前支付流程冗余導致他支付效率較低，影響了大家氛圍。
用戶與他們的需求是問題陳述的核心，避免：我們應該怎么做、產品應該...作為開頭。
保持陳述的寬泛性，不要過早拋出細致的解決方案、技術限制等內容，避免團隊發散受限。
專注一點不要試圖在一個問題陳述中解決太多用戶需求，一次解決一個就很好了。
在打磨解決方案上，設計師需要考慮 易用性、易理解性、及著力提升用戶任務效率，給用戶一個更好的體驗。在打磨設計方案時，我們不必在一個方案上求多表現，一個方案能能夠將你所要表達的設計要點表達清楚即可，主要注意：
健康碼主要是為了讓工作人員快速辨別人員是否安全，但在眾多人中需 快速判斷，這個轉化到設計上解決方式：通過大面積的 色塊直觀反饋；通過實時的 滾動時間+滾動背景反饋真實性；在結合下方核酸與疫苗輔助判斷，整體非常貼合實際訴求，重點突出，有節奏感。
通過體驗核心信息，將內容合理布局，重點突出，操作劃分明確，有助于信息獲取與確定。
人的認知資源有限，天生不善于處理復雜信息，在面對復雜信息時需將內容以一定秩序邏輯管理，分而治之，減少用戶的選擇，讓正確的行為變得自然和明顯。
在58二手車頁面的改版中，頂部按鈕直接 分流 不同目的用戶；中間模塊展示用戶 最關心的維度：價格、品牌、車類型；下方 透出推薦內容 吸引用戶往下逛。
如上圖百度網盤的分層設計（圖片來源：大牙的設計筆記）中，設計師根據不同的會員周期，改變以往的“多人一面”，打造出“多人多面”靈活分層頁面布局，將復雜狀態很好的根據不同時期進行拆解。
多考慮用戶使用場景，挖掘一些場景是可以通過我們的設計 幫助用戶多走一步，幫他們排除障礙，減少負擔。
打車軟件在特定時間點自動浮出目的地，微信聊天窗自動出現截圖、驗證碼直接在鍵盤上方等都是通過用戶的行為預判了用戶下一步的行為，極大的提高了效率。
情感化不一定都是很精美的插畫、動效等表現層面上的，有時候 貼心的記錄、舒緩的內容、小游戲...... 也可以起到 情緒調節 的作用，提高用戶看到復雜信息的 忍耐度。
----------------------------------------------------------------------------------
所以在具體設計方案上，需要不斷的去思考打磨設計方案，讓自己的設計：
①、顯而易見的，讓用戶體驗后覺得「沒錯，就應該是這樣」；
②、有價值的，它為用戶解決實際的問題；
③、與用戶的心理模型相符，它不意味著更多的設計。
文案這塊本應該屬于上一個模塊額范疇，之所以單獨講是因為文案對于體驗而言太重要了，優秀的文案不僅可以減低用戶理解成本，還可以讓用戶感到興奮、溫暖、愉悅，并感嘆：臥槽，牛脾。
身為交互設計師，不需要做到像杜蕾斯那樣上熱搜的文案、solgan，但設計稿中的文案必須要做到：表達精準無歧義、適當趣味化。
我們是通過屏幕與人交流的人，屏幕上的文案觸點之一，因此簡潔精準的表達出我們要說的內容很重要。這設計中，首先應該避免一些專業術語、“高大上”的詞語，應該簡單直白，用最簡單的詞語，去掉那些不需要出現的詞。
①、直接告知行動：在微信發語音按鈕文案（按住 說話，松開 發送），非常直白的告知用戶需要做什么，且文案中的空格這個細節也將先后順序表達的十分清晰；而QQ在長按時沒有進行文案的提示著點體驗上就不如微信了。
②、文案盡量簡短：成年人 1s 可閱讀 7 個字左右，豆瓣的評論引導就非常簡短，直接三個字：寫評論，明確引導用戶點擊；而知乎為了營造良好的社區氛圍，引導用戶言行友善，但文案較長，相比寫評論而言顯得不夠簡明扼要，如果改成：友善評論... 是否會更好？
③、避免使用雙重否定的句式：在微信撤回的反饋文案中采用了雙重否定的句式（是否撤回該條消息）這樣的句式容易增加認知負荷；而淘寶刪除記錄反饋文章中，則直接詢問：確認刪除？這樣的句式更直接，更好理解。這里我嘗試將微信撤回反饋改成：撤回該條消息？下方操作文案也直接使用撤回，這樣看起來是否更明確了呢？
結合自身產品定位：上述兩個案例續費文案都是展示了自身產品的定位進行設計的，相較于冷冷的會員到期提示，這樣的方式更顯趣味性。
文案適當擬人化：擬人化的文案可以拉近用戶距離，會顯得產品更有溫度而不是冷彬彬的機器，有時還顯得有些小可愛~(#^.^#)
----------------------------------------------------------------------------------
所以在具體交互方案上，設計師對于文案的把控記住以下幾條原則：
①、字詞簡單，用用戶看得懂的字；
②、表意準確無歧義；
③、字數簡短，陳述語句，避免使用雙重否定類句式；
④、必要時可適當擬人化、趣味化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你是否在面試有中被問到，你設計的頁面需求是如何獲取的? 需求是如何聚焦篩選的？需求是如何做優先級排期的？在互聯網產品的全生命周期里都會涉及到很多的需求。企業的CEO、甲方客戶，用戶調研各方得到的需求時常扎堆，就算是一個小功能也會有很多問題，呈分散式、零星式。
哪個需求對用戶來說最重要？用戶對我們的新功能是否滿意？我們究竟要先做哪些需求？在企業里，大多數時候項目排期內，我們都面臨著開發、設計、測試等人力資源有限的境地。用戶什么都想要，但是不可能所有功能都一起開發、上線。作為用戶體驗設計師或者高級UI設計師，我們有充分地理由掌握一個科學系統的方法可視化需求排期。到底有沒有一個科學的方法論把需求劃分優先級，去說服你的老板、甲方、產品、技術和你自己？
廢話不多說 ，我們直接上干貨！
維基百科對KANO模型的定義如下：
The Kano model is a theory for product development and customer satisfaction developed in the 1980s by Professor Noriaki Kano, which classifies customer preferences into five categories.
KANO 模型是東京理工大學教授狩野紀昭(Noriaki Kano)發明的對用戶需求分類和優先排序的有用工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。
“用戶滿意度”是用來衡量需求實現后，用戶的滿意程度。具體可以分為以下幾個等級。
“功能完善程度”是用來衡量某個功能被實現的程度。具體可以分為以下幾個等級。
通過“用戶滿意度”以及“功能完善程度”兩個維度，我們可以劃分五種不同類型的需求：
（M）基本型質量 —— Must-be Quality
（P）期望型質量 —— Performance Quality
（A）興奮型質量 —— Attractive Quality
（I）無差異型質量 —— Indifferent Quality
（R）反向型質量 —— Reverse Quality
（1）必要型：產品必須要有的功能，屬于用戶的基本需求，即用戶的痛點。需求滿足時，用戶不會感到滿意；需求不滿足時，用戶會很不滿意；當投入達到一定程度時，不需要再過多的投入。
比如：我們生活中常見的必需品。手機要可以打電話，汽車需要能加速和剎車；微信的聊天功能、抖音的短視頻功能、百度的搜索功能等等一系列產品必須的功能。
（2）期望型：（線性增長）用戶希望有的功能，用戶在其他產品上使用過并養成了一定的用戶習慣后，作為期望的標準也希望產品能具備此功能。需求滿足時，用戶會感到很滿意；需求不滿足時，用戶會很不滿意；這類需求與用戶的期望契合度極高，需求實現程度越高，用戶的滿意度也越高。我們要集中投入。
比如：手機的儲存容量、續航能力越高，用戶的滿意度越高。當地服務類生鮮外賣產品，騎手的實時定位以及距離送達時間就屬于期望型需求。但也隨著整體功能不斷完善也在慢慢從期望型需求轉化為基本需求。
（3）興奮型：超出用戶預期的的功能。是產品差異化的亮點，如果沒有該功能，用戶的滿意度不會降低，但是如果有了該功能用戶的滿意度則會大大提升。能極大的提高用戶的滿意度，但是同時也要付出大量的研發成本。興奮型需求一般是目前市面上沒有的功能，用戶沒有接觸過，也沒有養成用戶習慣。
比如最近網易云音樂、QQ音樂等推出的一起聽功能，bilibili推出的一起看功能就屬于興奮型需求。早年間里第一次使用微信便捷的語音交流，第一次使用抖音等，會讓我們在初次使用時出乎我們的意料。
（4）無差別型：用戶不在意的功能，這類需求的有無對用戶來說無關痛癢，用戶并不關注。
在APP中一般為特定目的而產生的多余設計，如提醒你續費會員頁面，屬于引導消費。這類需求要避免投入過多，將精力轉移到其它類型的需求上面去。
（5）反向型：會引起用戶反感的功能，是指用戶不希望出現在產品或服務上的功能。出現時，用戶的滿意度不增反降。比如在進入一款APP時有四五個彈窗活動入口引導充值和誘導消費，需要逐個點擊關閉才能進入頁面，這類設計越多用戶的負面體驗就越強。
Tips：比如我們做一款手機，打電話功能是基本型需求。我們需要花費大量的時間去夯實這個功能，把它做的穩定準確。如果一款手機打電話交流都有問題，而去花費大量精力去優化它的拍照，視頻等功能。就是失去了一款手機最基本的使用。這與產品設計初期優先考慮產品的可用性與易用性，是否能打中用戶痛點同理，先把精力集中做好基本型需求，而不是過度關注在產品設計細節等期望型、興奮性需求上。
根據前面“用戶滿意度”作為縱坐標，“功能完善程度”作為橫坐標得到這張Kano品質要素圖
Tips：在圖像中可以看到，魅力屬性和期望屬性是會慢慢發生變化的。魅力屬性會隨著時間推移、用戶習慣的養成、競品的影響等，慢慢轉化為期望屬性。一部分的期望屬性會隨著時間推移、用戶習慣的養成、操作流程的影響等，慢慢的轉化為基本型屬性。
首先我們選擇要進行排序的需求。
在實際的工作場景中，我們往往在一個工作周期內可能同時會接到很多的需求。我們面臨項目時間緊，開發、設計人手資源有限的境況。我們首先就需要篩選出適合Kano模型的需求類型，才能更好的進行下面的評估過程。
我們的需求池中往往有著不同類別的需求，有的是需求是關系到最終用戶，有的需求是運營、管理層、甲方客戶。按照常規的需求類型大致可以分為這幾類：
（1）軟件問題（技術類）：這類問題多為軟件BUG，這類問題通常涉及到我們的產品是否為用戶提供了良好的可用性（產品功能初期一般優先考慮的是可用性和易用性）體驗，一般屬于基本型需求，因此屬于需要緊急處理的問題。
（2）用戶問題 （交互體驗類）：這類問題多為交互體驗問題，例如用戶使用產品過程中出現的不知道如何使用某功能（沒有做功能引導、不符合用戶心智、學習成本高），或者某功能找不到在哪（功能個入口不清晰、信息入口層級過深）等類似問題。
（3）產品建議：這類問題基本上屬于期望型需求，例如用戶希望增加某某功能或在某個操作流程感到缺少什么功能。
（4）其他問題：Kano模型適合與最終用戶可以直接操作、感知、相關的需求。而不是針對于產品的運營人員、管理層、甲方客戶等的需求。
Tips：因為KANO模型只從用戶滿意度及功能完善程度這兩個維度出發去分析需求價值，所以并不適用于當價值衡量需考慮其他維度因素，如需要將戰略、商業收益納入考慮等等。
選擇我們產品的目標用戶。
可以在問卷題目中增加條件篩選，在后續問卷收集后進行數據清洗。比如產品的目標用戶為18-36歲女性用戶，就可以在問卷中增加詢問年齡問題，在收集上來的數據結果中篩選掉這一部分非目標用戶數據。為我們下一步的問卷設計投放做準備。
針對第一步梳理后的需求集，進行正反向的發散。KANO問卷每一個功能或需求問題是由正向和負向兩個子問題構成，分別是用戶在具備或不具備某項功能做出的反應。問題選項按照：非常喜歡、理所當然、無所謂、勉強接受、很不喜歡，進行評定。
對此我們問用戶3個問題：
（1）正向問題：
如果我們增加【功能1】，你的感受是?
（2）反向問題
如果我們不增加【功能1】，你的感受是?
（3）重要程度
【功能1】對你來說有多重要？
Tips：在實際調研中，產品具有某個功能，大部分人不會表示“不喜歡”或“無可奈何”?！盁o所謂”一般是態度的下線，即很少會有人會覺得“很不喜歡”或“勉強接受”。所以在問卷設計階段為了提高用戶填表的效率，在選項設定中正反向只設定3個選項。
可以采用定量調研的方式，使用“問卷星”設置好問題發在產品用戶交流群中或私域流量群中。
Tips：
如何向用戶提問，如何收集用戶的回答將直接影響到需求排序的結果。這一步非常重要。
提醒用戶正反問題之間的區別，注意強調“增加”還是“不增加”，防止用戶看錯題意。
在實際題目設置中，當功能數量比較多（大于5個時），有比較接近類似的，建議對用戶進行分組，每個用戶最多回答5個功能點，且盡量是區分度大的功能點。
有時需要對功能進行解釋，確保用戶能夠理解。
調研后需要對數據進行清洗，處理掉一些用戶亂填或錯誤的數據。比如所有題目都選一樣和一些可疑結果的數據。
基于收集的問卷量化的結果，進行需求分類分析。每組正反向問題的排列組合一共是25種，得到需求類型參照表。這張表格中，將重點關注正向的回答（即 > 0 的部分），這樣我們可以幫把注意力放在最重要的正向需求上面。（避免關注到“具備功能時”用戶覺得“勉強接受”和“很不喜歡”的需求上）
Tips：Q：代表可疑結果。對于一個功能的提供與否，用戶都表現出了很喜歡或者很不喜歡這種自相矛盾的情況。所以，這樣的結果在最終統計時，一般都需要排除掉。
需求優先級排序為：基本型 ＞ 期望型 ＞ 興奮型 ＞ 無差別型 ＞ 反向型
在需求數量不是很多只需確認需求分類時，到這里就可以結束了。只需要基于以上結果進行統計，根據少數服從大多數的邏輯，最多比例的屬性作為統計后的結果，即該需求分類。
比如：【功能1】最后收集數據為，基本型42、期望型28、興奮型0、無差異型7，【功能1】為基本型需求。再根據需求排序確定優先級。
如果涉及到較多需求，或者同類型需求有多個需要優先級排序時，你還需進行下一步。
我們引入better-worse系數的概念，表示某功能可以增加滿意或者消除不喜歡的影響程度。
Better系數=（期望數+興奮數）/（期望數+興奮數+基本數+無差異數）
= （P+A）/(P+A+M+I)
Worse系數= -1 *（期望數+必備數）/（期望數+興奮數+基本數+無差異數）
= -1 *（P+M）/(P+A+M+I)
Bette系數，可以簡單理解為滿意系數，代表如果產品提供某種功能，用戶滿意度會提升。Better值越大/越接近1，則表示用戶滿意度提升的效果會越強。
Worse系數，可以簡單理解為不滿意系數，Worse的數值通常為負，代表產品如果不提供某種功能或服務，用戶滿意度會降低。其絕對值越接近1，則表示對用戶不滿意度的影響最大。
1. 橫坐標為Better系數，縱坐標為Worse系數絕對值。根據實際得到結果將最大值均分依次放入兩個坐標軸上。
2. 分別計算Better系數平均值、Worser系數絕對值平均值，將其作為參考警戒線加入圖表中。
3. 將各個需求的對應的Better系數值、Worser系數絕對值放入圖像內。
4. 我們將根據需求的重要性，來調整上圖中點的大小。這時我們引入功能重要程度概念（在前文問卷問題中有提到），這里可以量化功能需求的重要程度，從“不重要”到“非常重要”，1到9分依次可對應需求點的直徑大小，比如“非常重要”點為90px直徑的圓，可根據具體情況靈活運用。
5. 根據需求優先級排序為：基本型 ＞ 期望型 ＞ 興奮型 ＞ 無差別型 ＞ 反向型 。同一需求類型再根據重要程度二次排序。
6. 至此各個功能需求優先級排序一目了然。
最后，我以“呱呱生鮮”產品為例子回顧整個Kano模型可視化需求的流程。
這次我們有10個需求需要做需求可視化。分別為：
Q1：在點擊訂單結算后提供優惠換購功能；
Q2：詢問上次購買訂單是否滿意反饋彈窗；
Q3：會員每日可領取免費菜功能；
Q4：進入APP提醒不在常用定位地址功能；
Q5：商品詳情頁面菜品推薦做法功能；
Q6：有辣味的商品圖片提醒辣度指數；
Q7：商品詳情頁面菜品直播功能；
Q8：商品列表顯示菜品榜單排名參數；
Q9：購物車結算提示可以免費領取小蔥；
Q10：猜你喜歡你的常購清單功能；
因為KANO模型只從用戶滿意度及功能完善程度這兩個維度出發去分析需求價值，以上10個需求功能均為用戶可直接感知。符合Kano模型條件。
選擇產品的目標用戶進行問卷投放。
對此我們問用戶3個問題：
（1）正向問題：
如果我們增加【功能1】，你的感受是?
（2）反向問題
如果我們不增加【功能1】，你的感受是?
（3）重要程度
【功能1】對你來說有多重要？
使用“問卷星”設置好問卷問題投放在產品用戶交流群中或私域流量中。
對調研后收集上來的數據進行數據清洗，處理掉一些用戶亂填或錯誤的數據。比如所有題目都選一樣和一些可疑結果的數據。
（1）基于收集的問卷量化結果，對照需求類型參照表,進行需求分類分析。
（2）結合需求優先級排序：基本型 ＞ 期望型 ＞ 興奮型 ＞ 無差別型 ＞ 反向型 。
（3）計算better-worse系數，計算Better系數平均值、Worser系數絕對值平均值，將其作為參考警戒線加入圖表中。
（4）將各個需求的對應的Better系數值、Worser系數絕對值放入圖像內。
（5）我們將根據需求的重要性，來調整上圖中點的大小。
（6）得到最終的需求可視化排期圖，至此各個功能需求優先級排序一目了然。
我們設計師需要在自我能力范圍內，不斷提升為企業團隊服務，增加自己對內話語權以及對外影響力。成為自我驅動高級體驗設計師。在工作中也需要對需求做一個設計價值和優先級的排序，搭建需求可視化體系。對不同的需求進行品質類型劃分，列出屬于自己排出的需求列表，在更有價值的需求上花費更多的時間精益求精。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當下互聯網進入以內容運營為核心的時代，市場競爭激烈，需要對于市場的熱點進行快速反應，持續迭代。不管是大廠還是小廠的UI設計師多多少少需要支援運營需求。U1S1 做簡單運營圖對于體驗設計方向的設計師來說，性價比確實有點低，一般難度較高的運營設計需求都由專業的視覺設計師來做，體驗設計師一般接到的都是比較簡單或者緊急的需求，這對于設計的能力提升來說是比較有限的，大量的時間被占用在運營設計上，持續被榨干，有些本末倒置，但人生就是這么操蛋，總得想辦法解決。
就目前大部分互聯產品的Banner而言。
其構成一般由標題文案、主體元素（人物、物品等）、背景（場景、底色等）元素構成。
面向設計師：模板化運營設計 + 素材資源同步盤
第一種方法是本文的核心方法，原理很簡單，其實就是利用Sketch和或者Figma的組件化（為了統一語義本文統一稱為組件，其子集為用例）進行設計。
我們將這些元素分別打包成組件.
把組件的用例調整后放置在預覽區所有不同尺寸的畫板中。
當出現需要特殊調整的時候可以解綁微調。如果希望給畫面添加一些細節的話，再另外添加即可～
這么一波操作，大概1個多鐘就可以輸出一整套7個圖，足以應付一周22套運營圖的需求了（悲傷的故事）
當然要達到這種速度還需要一個通用素材庫的加持?？臻e時間把一些KV的圖素拆出來放到Eagle共享盤，這樣你和你的小伙伴們就可以高效愉快地拉圖了...
面向運營同學：創客貼等第三方設計平臺
在創客貼搞個團隊模式，然后設計師把常用的一些模板上傳上去，運營同學只要自己改改文案，換換人就可以啦
雖然有了模板化的設計工具，但如果缺少了設計規范的引導，就會宛如脫韁野馬，設計出各種偏離業務需求或風格不一致的Banner出來。
設計規范需要與運營同學共同協商制定，比如標題最長長度、排版構圖、圖素尺寸等等。具體規范需要根據不同的業務需求進行定制化。
下面就以我們團隊的制定方式作為范例說明一下。
排版構圖
常規的排版構圖模式有居中式構圖、左右構圖。
居中式構圖：居中式構圖是將主體放置畫面的中心進行構圖。這種構圖方式這種構圖方式的最大優點就在于主體突出、明確而且畫面容易取得左右平衡的效果
左右式構圖：左右構圖將文字標題元素和主體物按照比例分割進行位置安排。符合用戶閱讀習慣：閱讀視線要符合用戶從左到右或從上到下的瀏覽習慣。
尺寸
Banner的尺寸需要根據UI界面的需求進行制定。
例如針對我司的產品，一個活動最多有7個運營位的樣式，分別在首頁、搜索位、文章封面、活動中心、閃屏等。
標題長度限制
由于運營同學有時候對于標題的長度沒有經過精簡優化，標題特別長長長長長長長長，加上Banner本身就小，在手機屏幕上基本看不清，也就沒有意義了。因此需要共同制定好主標題副標題長度限制，超過就直接打回重改。
出血設置
制定出血位的原因是某些尺寸的圖素可能出現在多個不同的入口，以及不同尺寸的手機屏幕可能會出現裁剪的現象。
不論是設計師也好，運營同學也好，完成設計之后最好建立一個視覺自查表進行對照，目的是盡量減少一些原則性錯誤，減少來回改稿的情況。
為了更完美的提升整個流程效率，不僅需要升級中部流程，前后端的流程都需要進行優化。
首先是最好在需求的前端建立需求排期表進行需求的篩選。
分門別類地將需求的詳細信息進行可視化展示，對應的需求文檔接入。這里不得不吹一波飛書文檔，太**好用了。
針對需求的后端即設計交付環節，最好是在設計稿導出的時候使用工具進行壓縮，更小的體積意味著更快的加載速度，這對于提升產品的用戶體驗是毋庸置疑的。這里推薦2個工具：
1.imageOptim
2.Picdiet https://www.picdiet.com/zh-cn (個人推薦JPG使用這個網站，壓縮的質量最高)
最后，如果實在人力不足的情況下，就把項目外包出去吧，畢竟占用UI設計師太多時間產出如果沒什么價值的話，其實roi也是很低的，設計師的人力成本也是錢！
“能用錢解決的問題，就用錢解決！”—— 魯迅
如果運營經常提出很多無理的需求，比如量很大，沒有什么依據都是拍腦袋想的，那可以考慮把項目外包出去，一旦外包出去，花的就是真金白銀，讓運營也知道，這是設計師嘔心瀝血畫的，市場的價格就擺在那，整天搞些有的沒的是否真的能對項目帶來價值。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們在設計中經常會遇到新版本或改版的設計，從創意想法到設計初稿的過程可能會花費比較長的時間。而作為設計師除了自己思考設計之外，還需要與產品、設計老大溝通我們的一些設計想法。因此，我們需要在不同的階段輸出不同的內容反饋進度并達成一些共識。
首先我們要明確什么是情緒版？我的理解是：情緒版既不是初稿也不是最終的風格方向，而是設計師在了解了相關的產品背景后，基于自己對于產品的理解給出的一個較為初始的設計建議，并且希望可以通過這個初始的建議與產品側達成一些相關的設計共識。
情緒版的設計流程大概分為前中后三個階段，前期：分析-收集，中期：篩選-組合，后期：打磨-呈現。
主要是分析產品相關背景或需求本身的方向，結合產品背景及需求本身再進一步分析大概的設計方向并收集相關素材內容。
當我們收集完成后需要對現有素材進行二次篩選并組合，基于現有素材組合大概的設計方案結構。
基礎方案組合完成后需要進行二次打磨，細化方案的內容表現，檢查整體的一致性及完整度，最后呈現給產品方。
可能很多設計師會疑惑為什么要做情緒版，直接設計初稿不就好了嗎？如果有這個疑問，可能還沒實際了解到情緒版到作用。但我們可以試著從我們在設計過程中遇到的痛點來了解情緒版的作用或者意義。
在設計的過程中你是否會存在下面幾個問題：
從這幾個問題中，我們可以得到一個比較統一的結論就是：前期設計呈現內容不夠，導致溝通不足而產生方向不統一。因此基于這個關鍵點，我們再來看情緒版的作用。
在前期，世界觀、背景方面的內容大多是以文字的方式呈現，因此設計師可以通過情緒版的方式，來輸出對應的世界觀設計表現，這樣可以更加直觀的表現出對應的視覺語言。
在初期與產品側溝通時，單純靠語言表達的方式很難讓對方達到一種腦補的狀態。因此借助情緒版的方式更加直觀的呈現設計想法，通過具象的圖形或者圖形，大大降低雙方的溝通成本。
基于第二點的溝通，我們可以明確的了解到產品側的一些喜好。為后續設計初稿時起到一個清晰的方向作用。
從零到一設計一套完整的方案往往需要耗費較長的時間，借助情緒版設計的方式來快速響應一些想法及創意，這樣可以大大提高前期的輸出效率。
從多次的嘗試中，我總結梳理了幾個基本原則，了解這些原則可以讓我們在做的時候更加嚴謹，輸出更加準確的設計方案。
情緒版的設計與我們日常設計一樣，需要給出不同的方向建議，單一的方案往往難以抉擇。多方案輸出除了提升抉擇空間之外，還可以增加方案碰撞的情況，往往可能是方案A的某部分內容疊加方案B的某部分內容才能產生最初的方向。
此階段的所有輸出皆屬于嘗試與探索，因此不必過于考究設計細節，重點在于表達出需要相關的設計概念及思考想法，把更多的時間留作設計思考及方案嘗試。
情緒版的輸出重點在于前期溝通而達到一個比較好的共識，因此在保證質量的情況下，避免花費過多的時間而影響輸出的效率性。盡量做到快與準。在過往中項目組，基本上是以半天（4個小時左右）為一個單位來完成一套方案。
情緒版是一種非常有效試探產品側想要往那種方向去推動的方式，因為我們在實際的設計過程中，產品側可能也對整體的設計大調并不少特別有明確的腦補，因此設計師可以借助情緒版的設計來挖掘產品側想要往哪個方向進行發力。
這里總結情緒版的設計方法大概有這幾種：1.借助圖像/插圖、2.結合實際場景引申、3.借鑒摘取同類型設計、4.繪制草稿。
在我們設計一些專題活動或者繪制插圖相關的一些設計時，可以考慮使用這種方法來輸出你的情緒版設計，可以通過借鑒一些設計網站或插圖網站上的現有素材來拼接，并表達自己在這方法的一些設計意圖及想法。
從更概念化的角度出發，通過引用一些實際場景、物品、圖像，來拓展相關的圖形、質感、色彩方面的設計，并且輸出相關的設計雛形。例如我們在設計LOGO或者圖形類的一些設計，使用這種方法就可以幫助我們突破一些現有的認知壁壘。
在設計之初，我們通常會有一個大概的思考雛形，但如果直接開始設計往往效率上并不高。因此可以借助一些設計網站上的設計，通過摘取組合的方式呈現自己的初步想法。我通常會在UI新版或者改版的時候使用這種方式，但只能表達大概的想法且不能代表最終的初稿設計。
當我們想要表達一些溝通或者框架的設計時，我們可以使用草稿繪制的方式來表現，這個方式簡單快捷，可以很有效率的對齊大部分的設計共識。
基于原則及方法，我們可以來簡單了解下情緒版設計中需要注意的一些事項，通過這些內容讓你在實際操作過程中少踩一些坑。
設計方案控制在2-3個左右即可，前期大多是屬于試探性方案呈現及找方向，太多則容易導致選擇困難。
篇幅過長往往容易降低別人閱讀的耐心，對于情緒版的輸出也是如此。結合過往的經驗，建議以16:9的畫面為一頁來呈現一個方案。
在一頁內呈現的方案避免過于平均，可以適當突出某些想要重點表達的內容，例如在這個方案中想要重點突出圖標、顏色等，那么這里需要突出這部分在畫面中的比例，適當縮小其他模塊的尺寸。
在輸出情緒版設計方案時還可以適當考慮結合產品的世界觀，通過一些具象化的圖形或者插圖來表現相關的內容。例如我們之前在游戲中心改版的嘗試中，就發散了幾個相關的世界觀，因此我們在輸出方案時，則只需要把對應的世界觀作為方案，通過情緒版的方式表現出來即可。
一致性是表現一個設計師是否具有系統化、全局觀的思考思維，因此我們在表現情緒版時也需要關注這方面的內容，避免整體的調性不匹配。
在呈現方案時，盡量多維度的進行對比，呈現一個完整性、系統性的設計。例如我們在設計UI相關的內容，從圖標、顏色、字體等等一系列的內容需要細致的闡述清楚，讓人更加能夠了解你的意圖。
由于我日常以設計UI為主，因此可以給大家重點分享我在UI情緒版設計的經驗。希望可以幫助到大家快速上手。
當你在做UI設計情緒版時，需要明確了解UI設計中的結構，更系統性的去思考整體的內容。我們在UI設計中往往需要包含以下這些內容：圖形系統（圖標+輔助圖形）、顏色系統、字體字形系統、質感形態、界面形態、插圖風格、動效系統、影像系統，等等這些部分的內容。
案例一：整體風格比較偏個性一些，頁面嘗試用深色的背景設計
優點：整體風格比較酷，配色比較未來感符合年輕的人的審美，深色的背景讓內容更加聚焦。
案例二：整體風格3D化的設計，包括頁面的一些體驗上都可以增加視察的效果來設計
優點：整體設計風格比較新穎，符合現在的設計趨勢，整體感覺也比較年輕多彩
缺點：3D的制作成本相對較大
案例三：整體風格比較清爽，白色融入漸變的設計也會顯得比較年輕
優點：整體頁面清爽，可以滿足任何內容的透出，漸變色的圖標和按鈕的設計補充了細節
很多時候我們會覺得情緒版設計可有可無，或者因為時間的關系不允許我們經過這一步。但，如我一開始提到的點，情緒版可以在前期幫助我們去打通很多思考的壁壘，輔助設計師在前期直觀的與產品側進行方向上的探討，從而找到大方向上的共識。
以上都是屬于我個人總結的一些經驗，因此建議大家在日常項目中多去嘗試，并在嘗試中找到適合自己的方法。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
信息架構這篇是本人在現階段覺得較難學習與闡述的知識點，網上關于信息架構的知識內容也是參差不齊。在學習與探究的過程中查閱了很多資料，反復修改多次，盡量用直白的語言結合實例來闡述信息架構。目錄如下：
大家可以根據上述目錄來進行選擇性閱讀，當然全文閱讀也是極好的～
這篇文章的起源，來源于最近看到的話題“B端設計師會被組件庫取代嗎？”。從表面上看，在組件庫越來越完善的時代，很多頁面設計依靠組件庫就能夠快速搭建。
那么在這種情況下，B端設計師存在的意義和價值到底體現在哪里呢？其實B端設計的重點并不在頁面的視覺上，視覺只是作為設計師最終輸出成果的一小部分。個人認為B端設計師工作重心體現在做「正確的設計」，比如以下幾個方面：
1.這個設計能否完成對應的商業目標和產品目標；
2.我們的信息呈現是否合理以及能否解決當前需求；
3.用戶能否在頁面上快速找到想要的信息；
而想要弄清楚并解決上述這些問題，在眾多的話題闡述之下，我發現其論述本質上都逃離不了「信息架構」這個概念。因此我認為設計師都需要對這個概念有充分的認知，這能夠幫助我們做出正確且出色的設計。
關于信息架構的概念，在百科上面的定義大部分都比較晦澀難懂，比如維基百科和百度百科的解釋：
相信大部分人都很難明白其中描述的意思。在這里換種思路，將信息架構拆分為信息與架構去理解。
信息指的是內容的載體，常見的文字、圖像等都是信息；架構的含義則形容對應的組織和結構。那么信息架構就是將信息通過一定的形式組織起來，然后呈現出來。其本質就是研究信息的表達與傳遞。
通俗點講，信息架構就是讓用戶可以更容易的理解我們的產品，讓用戶在使用我們的產品時可以更順利、更自然。因此信息架構沒有一個具體的呈現形式，它更多的是體現在產品設計的各方面。具體主要表現為組織系統、標簽系統、導航系統和搜索系統。
為什么需要信息架構？我們都知道B端產品設計的核心是「降本提效」，在設計這一側的可以將其理解為降低認知成本，提升使用效率。
降低認知成本需要我們更好的表達信息，讓用戶能看明白我們的產品能夠做什么，如何用；提升使用效率需要提升信息的傳遞效率，讓用戶能夠很容易的找到需要的功能；
而信息架構從本質上來講也正是研究信息的表達和傳遞。因此我們需要通過它來幫助我們更好的完成B端產品設計。如果沒有信息架構來作底層支撐，那么我們在頁面上看到的可能就只有功能的堆疊，讓產品陷入難以上手或者不知道怎么用的尷尬境地。
一個強大信息架構是產品質量的保證，是作為設計支撐點的骨架，它會減少可用性問題，提升整體導航行，創造對用戶友好的體驗。比如舉一個工具層面的例子：
PS的工具欄堆疊在界面各個部分，而Figma的工具欄則集中在右側且只出現當前需要的功能。很明顯Figma在信息架構中的信息組織部分做得更為友好，PS則會顯得遜色一些。這也是我們在學習PS的時候會顯得比較吃力的原因之一。
可以說良好的信息架構是高效用戶體驗的基礎。視覺元素，功能，交互和導航都是在信息架構的基礎上構建的。因此想要做出體驗好且合理的頁面設計，我們就需要參與到信息架構這個過程中來，和產品一起完成對應架構的梳理。而不是只完成從原型到頁面這個部分。
如果想要搭建一個好的建筑，我們需要知道其建造的目的，是按照什么樣的結構搭建，內部有哪些系統，以及最后呈現的模樣。
那么信息架構也同理，我們首先需要知道信息是為了什么目標服務，然后我們通過怎樣的結構來組織這些信息，以及過程中會用到的信息元素，最后如何呈現它們。這都是我們在搭建信息架構中需要進行的必要步驟。如果某些環節沒有做好或者沒有了解透徹，那么在輸出信息架構時往往會出現方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現的。
B端行業對于業務理解的要求是比較高的，只有在理解業務的基礎上，將業務需求轉化為對應的設計目標，我們才能夠輸出合理的信息架構方案。
個人認為理解業務的基礎，就是能夠用一句話講清楚當前設計的產品。這句話可以描述為：誰在什么地方想要完成什么目標。比如「用戶想要不出門就能夠吃到東西」，這就是外賣軟件提供的產品服務。
雖然看上去這句話很簡單，但其中包括了三個要素：用戶、場景和目標。因此我們在分析和梳理業務的過程中首先要弄清楚的就是這三個要素。
用戶永遠是排在第一位的，也是我們首先需要弄清楚的。在B端設計中，本質上可以分為兩類角色：客戶和用戶。比如我們常用的釘釘或企業微信，購買客戶是企業，實際用戶是員工。
對于企業：「我想要有一款軟件可以更好的管理員工」
對于員工：「我想要這款軟件能夠更好地提高工作效率」
客戶決定了我們產品的購買（部分情況下也兼顧使用），而用戶則決定了后續產品的復購率。因此在業務理解中，我們需要弄清楚當前產品所處的服務階段，比如初期為了打開市場肯定更傾向于客戶，而中后期為了提高產品的使用體驗又會偏向于用戶。
因此我們首先需要弄清楚的就是當前產品是為哪些「目標用戶」服務，這也就決定了我們在設計信息架構時對應的不同側重點。
場景是指需求產生的某種條件，這個條件包括但不限于環境、時間、地點、空間等，只有上述條件滿足，這個需求才能成立。這里可以把場景理解為產生該問題的原因。
比如當用戶提出「她需要一件衣服」，那么我們就需要弄清楚用戶為什么需要添加衣服，是她感冒了自身覺得冷還是因為外界環境冷。這兩種場景涉及到的解決方案是完全不一樣的。
在平日的工作中我們可以通過以下兩種方式來更好的了解業務場景：
1.通過業務方文檔進行業務背景的初步理解。業務文檔中一般都會包括需求背景，我們可以通過文檔進行初步了解。
2.通過業務溝通進一步加深業務背景的理解。由于很多B端業務離設計師本身的生活比較遠。因此對于需求背景中不理解或者比較模糊的部分，我們可以通過與業務方或產品多次溝通來挖掘最底層的背景。
畢竟需求背景是理解業務的重要步驟，我們只有知道需求產生的原因，才能夠針對性的給出解決方案。
目標決定了我們的產品最終的方向。我們首先接觸到的一般都是業務目標，而我們要做的就是將業務目標轉化為我們此次的設計目標。
A.業務目標
業務目標就是此次業務想要解決的實際問題，它通常是一個宏觀上的描述。比如打車軟件的業務目標簡單概括來講就是讓用戶能夠更快速地打到車，減少等待焦慮。我們一般通過文檔或者溝通來了解該目標。
B.設計目標
設計目標是我們基于業務目標而給出的設計策略，是一種更具體的實現方式。比如我們要讓用戶快速的打到車，那么這個時候我們的設計目標就是通過將用戶位置和司機位置進行快速匹配，并通過超時補貼紅包的方案來降低用戶焦慮。從而實現業務目標。而這一過程涉及到的信息點就有：司機位置、乘客位置、等車時間、補貼金額等元素，并需要思考它們之間的關系和呈現方式。
可以發現從業務目標轉化到設計目標這個過程，實際上就是在確定功能和信息點的過程。這樣才能讓我們更好地設計信息架構。
從前文可以看出我們會在整體設計過程中出現很多的信息元素。如果不經過對應的組織和處理，直接堆疊在一起，那么信息含義會比較亂且難以調用。比如下方：
而右側圖片信息的組織過程可以理解為通過將零散的數據信息進行分類，再以某種結構化的形式將它們重新組合排布的過程，直白一點就是先分類，再結構化呈現。我用一張圖來表明這個過程：
那么這個過程中「信息組織」和「結構呈現」到底應該怎么做，也就是接下來要講的組織方式和結構類型。
組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進行分類，比如位置、字母表、時間、類別、層級等方式進行組織。一些工具類應用例如滴答清單內容信息都是按照時間來進行組織的：
而模糊分類則是按照更為主觀的邏輯對信息進行分類, 如主題、任務、用戶、隱喻等來進行歸類，比如我們常用的APP商城是按照不同的主題類別來進行區分的。
但在很多時候，產品傾向于將兩種組織方式結合起來形成復合型組織方式，從而能夠使我們的整體組織形式更符合用戶的使用習慣。比如藍湖的信息組織，其中既包含了模糊分類（按使用類型等分類），也包含了精確分類（按上傳文件時間等）。
其實在大部分B端產品中，大都按照模糊分類來進行處理，比如按照任務、流程等方式。而精確分類更多用于在頁面內的局部信息模塊，比如創建時間和文件大小等。
歸根結底，我們分類方式的選擇需要結合我們前面提到的用戶、場景和目標，這樣才能讓我們的分類更具說服力。
當信息按照分類維度組織后，我們接下來就是把整體信息進行結構化，這樣才可以將信息整體連接起來并呈現出來。一般分為以下四種組織方式：
A.層級結構（最重要的結構）
這是信息架構中最為常見的結構，也是比較符合用戶認知的結構。有時也稱為「樹狀結構」。以子父節點的形式一層一層延展。
層級結構的優勢就在于可以承載復雜的多層級內容，通過層級遞進的方式將復雜的多層級拆解得更簡潔。
但我們需要把控好內容的廣度和深度，廣度指的是在層級結構中每一層的數目，最好控制在7個以內。如果廣度太寬意味著每個頁面會給用戶展示太多的信息，增加尋找內容的負擔。深度為縱向結構，建議一般3層，最多不超過5層。過深的層級會讓用戶點擊很多次，且不容易被用戶發現。比如飛書的基本信息架構也是主要以層級結構來進行的。
B.矩陣結構（多維度結構）
矩陣結構是各個節點都相互連接的一種信息架構方式，通俗來講就是用戶既可以通過多個維度去觸達同一信息，也可以從單個維度連接多種信息。
這種結構其實就更類似于我們在做相關功能時：比如當你進入電影全屏時想要退出時，既可以通過點擊按鈕退出，還可以通過鍵盤的Esc返回到，通過多點觸達同一操作。
又比如我們的聯系人功能，我們既可以通過輸入數字撥打電話，也可以查找聯系人進行撥打，還可以查詢電話記錄進行回撥。
矩陣結構最重要的意義在于給用戶提供多種路徑，使用戶能夠在不同路徑中尋找各自想要的東西。
C.自然結構（隨機性）
自然結構不遵循任何一致的模式，節點都是被逐一連接起來的。
自然結構一般都具有隨機性和不確定性。這種更傾向于泛娛樂化的C端應用。比如我們常見視頻網站的在推薦流都是應用的自然結構。比如打開B站等視頻平臺，你很難猜到剛進入看到的是什么。
但一般自然結構不會單獨存在，比如B站在自然結構中也綁定了層級結構來進行層級上的劃分。
D.線性結構（單一性）
線性結構是非常單一的一個結構，整體是一層一層向下遞進。比較強調先后順序的一種結構。
這種結構通常用于我們常見的軟件安裝程序等，也可以用于部分功能結構，比如網站的視頻發布，一般都是經過上傳-編輯-發布這三個步驟來依次進行。
大家可以發現在進行信息架構時，我們在很多情況下可能會運用多種組織結構方式，我們需要根據對應的用戶決策場景來考慮讓最適合的幾種方式相結合。但最終目的都是為了讓用戶能夠更快速的獲取信息。
在信息的組織過程中，我們需要注意用戶的心智模型。比如當我們看到紅點就知道有新信息通知，看到下拉箭頭就知道可以展開。這是互聯網產品在無形中給用戶建立的底層習慣認知。用戶目前對于普遍產品的一些基礎布局、功能名稱和交互邏輯都形成了一定的習慣，這都屬于用戶的心智模型的內容。
因此我們在組織信息時盡可能不要去打破用戶常見的心智模型，否則必然會導致用戶的不習慣。我們常見的「掃一掃」功能，微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。
這樣會導致用戶難以發現該功能。因為用戶接觸新的信息時，會以最初接觸的局部信息為依據展開并形成初步認知，而用戶認知中的信息組織邏輯和實際信息的吻合度越高, 他在進一步查看或尋找信息的過程中體驗會更順暢, 反之, 若一開始形成的認知與實際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實就是用戶心智模型。
雖然建議在一定程度上遵循用戶心智，但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業術語，我們需要通過靈活有效的提示（比如標記注釋等）來引導用戶就可以了。比如我們剛才提出的抖音掃一掃，它的應用場景其實是用于抖音官網后臺登錄，且在后臺登錄時已經給出了對應提示，那么這樣的設計也是合理的。
當經過上面的信息組織，其實我們已經能夠歸納出一個大體的信息架構框架。但在信息組織之外，我們還需要關注以下三點：標簽、導航和搜索。這對于信息架構的完整性也有非常重要的意義。
標簽系統，通俗來講就是要我們對當前整個系統信息節點的命名，從而讓信息的呈現更容易識別。拿個最簡單的例子來進行說明：
可以看到左側和右側關于衛生間的信息標示，可能左邊你能一眼區分，右邊可能就需要反應半天才能猜出到底代表什么含義了。
這其實就是關于我們的信息命名是否能夠被大多數用戶所接受的場景，也就是我們標簽作用所起的作用。標簽可以分為圖片和文字標簽，都需要考慮用戶對該信息命名的認知程度，也就是前面提到的心智模型。那么如何能夠更好的去定義標簽名稱呢，這里需要注意2個方面：
A.優先選用被行業廣泛接受的詞或圖標
在進行標簽定義的時候，盡量選擇已經被用戶所熟知的詞語，比如「工作臺」「通訊錄」等已經被運用得非常熟練，對于類似功能就直接以該形式命名，比如我們的設計軟件中，很多圖標和功能名稱都是通用的：
這樣做能夠很大程度減少用戶的學習成本。因此在B端設計中我們也需要注意到我們所在的行業，哪些名詞已經達成了共識，就無需再造新名詞。
B.不確定的詞語可以參考競品或調研來決策
當某類功能或場景的標簽難以確定時，我們就可以嘗試去找一下競品是否有類似功能，或者找該行業的領頭羊（比如聊天工具的巨頭微信），那么在進行標簽定義的時候，可以參考它的命名體系。因為它已經替我們教育了一部分用戶，會間接降低學習成本。
如果某些標簽在上述過程中還是無法確定，那么我們結合自己經驗或者與咨詢業務相關人員來進行討論，在必要時候可以在標簽旁邊添加注釋來進一步說明。
導航系統其實應該是大家比較熟知的一個系統了。就像使用導航系統來規劃行程一樣，導航系統都會存在于每個網站中。比如我們常見的側邊導航、頂部導航等。
因為網上關于導航系統已經有很多資料的講解了，在這里闡述下四類導航的含義：
1.全局導航：位于頁面最上層的導航，用戶幾乎在頁面的每個地方都可以看見，是最高層級的導航系統；
2.局部導航：位于最高導航的下級子類導航，子類導航并不是必須的導航，根據場景進行取舍；
3.情景式導航：通過點擊文字鏈接進行跳轉的導航，比如在個人資料里面植入其它網站的鏈接地址；
4.輔助導航：這里包括網站地圖，網站索引，網站指南等輔助類型的導航。
輔助導航的網站指南包括新手引導和演示教程等?，F階段更巧妙的功能引導，是當用戶在進行某些功能的操作時及時進行提示，這樣不僅達到了為用戶引導的效果，還減少了一連串的新手引導對于用戶的打擾。比如figma在進行組件更新后，只有當你調用組件功能時，才會及時進行提醒。
搜索，是我們平日最常用的查找信息的功能，它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要，但并不是每個系統每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點：
1:內容復雜度：當前頁面承載的內容復雜度如果較少，對于簡單內容頁面往往不需要搜索；
2:內容性質：當前頁面的性質是偏向于用戶瀏覽還是查找，根據用戶行為來決定是否需要搜索；
3.搜索場景：如果搜索場景很簡單，考慮是否只用篩選或分類就能夠解決問題；反之如果搜索內容很復雜，我們還可以搜索結合篩選來更好的查找信息；
上述3點決定了我們是否需要考慮搜索功能。而關于搜索的其他細節點，比如搜索規則和搜索結果等，在這里不做進一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。
我們通過上述方法已經知道如何梳理信息架構了，那么我們應該如何呈現它呢。這部分其實也是很多資料中比較模糊的點。
在學習的過程中，發現部分資料認為信息架構就是單純的指思維導圖，但實際上信息架構并不能單純只用思維導圖就能夠完全表示。
因為信息架構包含了很多部分的內容。只能說思維導圖可以是信息架構的一種表現形式，其可以幫助我們在思考階段梳理整體產品的信息構成。
這里拋出一個很有意思的觀點，那就是「功能結構圖」和「信息架構圖」到底什么關系，這里用兩張圖示例：
可以看到，功能結構圖更多體現的形式是功能闡述，一般形式為名詞+動詞，比如頭像設置；而信息架構圖重點呈現的應該都為信息元素，一般為名詞，比如頭像圖片。
但在大多數時候我們看到的產品架構圖，其實更偏向于功能結構圖和信息架構圖的結合。因為在很多時候闡述信息構成時需要依賴功能進行輔助說明。
因此這篇文章講述的信息架構更偏向于基于產品的整體架構。其實信息架構對于呈現形式并沒有特別的限制，只要能夠幫助你清晰表達產品整體結構就行?！缎畔⒓軜嫞撼絯eb設計》第4版中其實也并沒有對表現形式這一塊進行嚴苛的定義，其用「顯示信息元素間的關系——站點地圖」的說法概括了信息架構的呈現形式，其表達如下：
可以看到其表達形式包括思維導圖和流程圖等形式：思維導圖的優勢是能夠總覽全局信息，查看信息的深度和廣度，而流程圖的優勢則更能夠表達整體的邏輯關系。
因此信息架構的呈現需要根據你的產品場景選擇合適的視覺框架表達。不必讓形式限制了我們的發揮，而是應該形式追隨于我們的架構表達。其只是一個信息梳理結構的說明結果（類似于中間態），我們需要借助它來更好的闡述思路與溝通想法。
在輸出信息架構之后，其實這里想聊一聊頁面的呈現。因為當梳理好大的框架后，剩余的頁面細節其實都需要通過原型圖來進行體現。這個過程是從框架到頁面的階段，其實對于設計師來說也是很重要的部分。在這里根據自己的理解列出了以下幾方面的注意點：
A.頁面能夠讓用戶看懂
這其實就是涉及到我們的信息組織和標簽系統。如果當我們的某個頁面不能讓用戶第一時間獲取到該頁面表達的信息，反思一下是在哪個方面做得不好。是標簽系統含義模糊呢，還是信息的組織分類方式不對。從頁面呈現倒推信息架構。
綜合來說就是設計時的排列要考慮用戶的心智模型（比如網頁的常規排版和通用名詞定義等），對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產品想要完全避免學習成本是不可能的，但我們可以盡量減少其學習成本。
B.考慮用戶的視覺動線
當我們在進行信息排列時，這時需要思考的就是用戶的視覺動線，也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說，采用不同的動線模型能夠讓用戶更好地查找信息。
F模型和Z模型的使用區分其實就是在使用場景上，對于內容頁面來說F模型會更為合適（比如文章或者搜索結果），適合文本類的內容。但對于非文本的頁面，則更適合用Z模型，Z型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右，從上到下，能夠更好引導用戶的視線。
C.掌控好適度的信息層級
B端由于在視覺的發揮空間不多，那么相對來說保持良好的信息層級能夠讓整體的體驗變得更為良好。
不管是原型圖還是視覺，整體的視覺層級要體現得更為清晰。按理說最好的視覺層級控制在三級左右。如果發現視覺層級過多，需要考慮是不是因為信息架構設計時縱向層級過深，通過調整架構的形式來更好的呈現信息。以及對同頁面的信息進行重要程度分級。
當我們做完或者聽別人闡述對應的信息架構時，該如何評判呢，到底怎樣的信息架構才算優秀呢。個人認為可以從3方面去進行判斷：
業務層：
1.設計目標合理：能平衡商業目標和用戶的目標，保證客戶和用戶都有較為良好的體驗；
2.核心任務目標：能夠讓用戶順利完成產品的核心任務，需要通過用戶測試來進行驗證
結構層：
1.平衡廣度和深度：在進行功能使用時不會隱藏的太深而找不到，是否有冗余步驟
2.保證拓展性：當前信息架構在面對未來新增或者刪減信息時能夠穩定拓展
體驗層：
1.保證易讀性：用戶不經過介紹，通過頁面信息呈現能夠看懂該產品是用來做什么的
2.保證易查找性：用戶在需要某個功能時能否快捷的找到，是否有多種查找方法（比如搜索或篩選）
合理的信息架構需要具備以上條件，我們需要在做設計呈現時也盡量保證以上條件。但在很多情況下其實并不能完全滿足，這個時候我們需要根據業務目標的重要性來選擇某些點進行滿足。
梳理一下整體文章的架構，其實是按照「是什么-為什么-怎么做」的形式來進行拆分的：
這篇文章想要表達的觀點，不是讓設計師獨立去梳理整體信息架構，而是讓設計師擁有信息架構意識，了解其是如何進行并產生的。這樣你在看到整體架構時，有足夠的理論支撐去判斷它的好壞，并通過自己的理論認知去理解和改進不好的地方。
當我們對信息架構有足夠的認知時，我們在設計頁面時才能有合理的思考方向，做出「正確的設計」，避免成為無情的作圖機器。信息架構作為產品交互視覺最底層的支撐，只有骨架搭好，對于用戶的使用體驗才能夠有本質上的提升。
注：文章中不可避免會存在不足之處，如果對文章中內容有更好建議，歡迎隨時交流。
參考資料：
《web信息架構》第四版
《信息焦慮》
《用戶體驗要素》
《信息架構設計》
「從設計前/設計中階段，了解信息架構知識點」
「互聯網產品如何搭建信息架構」
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源：站酷 作者：進擊的M
關鍵詞：搜索框，UI，UX交互，用戶體驗，響應式設計，網頁
題外話Tips: 在寫Amazon案例時，看到了歪果仁對國貨馬應龍的評論，簡直太歡樂（以前看過人家翻譯的帖子，但自己看一遍還是太搞笑了）。于是就寫跑偏了，翻譯了下貼了上來。隨便樂樂~ （CTRL+F頁內搜索可直達）
目錄：（CTRL+F頁內搜索可直達）
第一章 搜索框-默認狀態
一、 位置
二、 寬度（包含響應式設計）
三、 按鈕樣式
四、 展開 or 隱藏？
五、 默認要有提示文字??！
六、 推薦詞
七、 有很多分類怎么辦？
八、 一個頁面里有2個搜索框怎么處理？
第二章 搜索框-光標觸發的狀態
一、下拉框中，歷史記錄+熱搜詞是標配
二、下拉框中，標配+額外內容
三、下拉框中，純個性化內容
第三章 搜索框-搜索中的狀態
一、 默認交互
二、 個性化交互
三、 搜索下拉框中的多選功能
四、 回車 or 不回車？
正文：
以下都是從Web端角度寫的總結，Web的空間比APP大，相對來說，交互可發揮的余地更大。APP端如果有時間，就另外再寫吧。
搜索框簡單吧，也就輸入框+按鈕。但是就那么點小元素，里面也是注滿了無數的小心思，死光了無數產品經理/交互設計師的腦細胞，只是為了讓交互更流暢，產品體驗更好。
搜索框的默認UI/UX樣式，取決于網站的業務性質，取決于搜索功能的重要性，取決于頁面布局。
一、位置
搜索框的位置放在哪里，取決于搜索功能對于網站的重要性。
N年前，就有很多小伙伴引用過如下研究報告了，我重復下吧。
Dawn Shikh 與 Keisi Lenz 的研究：展示了在142個參與者的調查中，網站搜索框的期望位置。研究發現，對用戶來說最方便使用的地方是網站的左上角與右上角位置。用戶可以使用常見的F形掃描模式輕松找到它。
如圖，搜索框要放置在網站的右上角或者中間位置，這是用戶所期望的位置。
目前大部分網站在UI布局搜索框時，也是大致遵循這個規則的。但總體來說，搜索框的位置，還是可以分為如下幾種：
1. 頁面-居中
2. 頁面-頂部居中
3. 頁面-頂部右邊
4. 其他
那么，分別討論：
1. 頁面-居中
為啥居中？當然因為對于網站，搜索是核心功能。如果沒有搜索功能的話，業務幾乎無法開展。它最最最重要啦！
1）絕對居中
這種一般適用于搜索引擎的首頁。頁面基本就是一屏，搜索是最主要功能，其他內容不重要。
比如Google, 百度。
Google的界面就相當干凈清爽。嘿，我就是純搜索的，趕緊搜唄！
百度，可以只顯示一個搜索框。
如圖所示的搜索框下的大塊資訊，是可以在設置中隱藏的，不想看，關掉就好。
2）相對居中，垂直略靠上部。
適用于數據庫網站的首頁。
因為數據庫的數據量動不動就是千萬、上億的，搜索是極其重要的功能，99%的用戶都是帶著目的來的，直接通過搜索找數據的。搜索框需要極其醒目，需要占據首屏大部分的位置。
但考慮到數據庫網站的首頁也需要展示其他信息，來增加用戶粘性，一般會有好幾屏，比如最新信息，熱點信息之類的。這些就放在搜索框大區塊的下方了。
比如 官方司法權威網站-中國裁判文書網，全國的1億多個案件都在這個數據庫里，供免費查閱。搜索數據是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。
2. 頁面-頂部居中
為啥頂部居中？因為網站業務中，搜索是重要功能，但不是全部。不用夸大顯示，但頂部的居中好位置要留給它。
一般適用于電商平臺，資訊平臺。
這些網站中，展示商品、廣告、信息才是重點，是為了促成交易，增加流量的。搜索是工具，比較重要，但不是重點，只是為了達成目的的一個手段。因此可以放在頁面頂部且居中的顯眼好位置，重要，但是不過分夸張。
用戶場景：
如果用戶是漫無目的的瞎逛，可以隨便瀏覽頁面中提供的大量信息。
如果用戶是有目的的找某個商品或信息，也能很容易的在頁面頂部找到搜索框，定位目標。
比如，電商平臺-京東
比如，視頻平臺-Youtube
看到了嗎？頂部中間，不太顯眼的那個灰色搜索框。
3. 頁面-頂部右邊
為啥頂部右邊？因為網站業務中，搜索只是輔助功能，居中這么好個位置沒必要，放右邊看得見就行了。
比如， Dribbble
Dribbble，設計師都知道。一般大家都是去隨便看看找靈感的，瀏覽信息是重點，搜索功能不太重要，放邊上就行了。
比如，小米
提問：有同學會問，嗯哼，這是電商網站呀，要賣產品呀。為什么不像淘寶京東一樣放頂部居中呀？
回答：因為，這是品牌自己的平臺呀，就那么幾個品類，在頂部導航條內，側邊導航條內都已經展示得清清楚楚了，鼠標點點就行了。搜索是次要的功能。
根據設計原則——奧卡姆剃刀原理（簡單有效原理）
* 只放置必要的東西
* 給予更少的選項
頂部的品類導航條本身就能幫用戶找到產品了，可以直達分類頁面，是非常重要的入口，也是重要的產品宣傳，需要放在頂部首行的位置。
搜索是輔助功能（此處相信小米的PM是分析過search usage的），放在次要位置就可以了。
不需要同時突出搜索框+品類導航條，來增加用戶的選擇成本。
另外，要是搜索框居中了，那展示品類的重要導航條就得布局在第二行。Web/APP的第一屏都是黃金位置，能省一行是一行。
4. 其他
1）可以放logo的右邊。
比如google的搜索結果頁
從設計理念上說，google的搜索框和logo放在一起，也能組成品牌和搜索引擎之間的強關系。即google=search. 用戶們不也早就說，“你google一下”，而不是“你搜索一下了”嘛!
從UI上說，搜索引擎的內頁一般只有列表，這樣搜索框也能和列表左對齊，布局清晰。
2）其他位置，根據情況判斷。
比如Figma界面，文章最后有圖。此處不贅述。
二、寬度
搜索框的寬度（包括input box + search button），同樣取決于搜索功能的重要性。其中，大概率取決于上文所述的搜索框的位置。
其次，也需要考慮輸入的關鍵字的字符數。
另外，根據整體布局決定。
一般情況下，220px<寬度<650px。 請注意, 這是建議的相對值，不是絕對值。只表示搜索框在大部分Web中的情況，具體需根據自己的頁面情況調整。實際應用中，也有搜索框最長到1000px的情況。也有比220px更短的。
根據搜索框在頁面中的不同位置，搜索框寬度分別如下：
1. 如果搜索框位置在頁面居中，那搜索功能也極其重要，那當然寬一點。
比如上文提到的google，百度。搜索框寬度通常固定在650px以內，保證在所有分辨率中都能顯示全。也保證了可顯示的關鍵字字符數大于60個（即60個字母，30個中文字），大大的足夠了。
2. 如果搜索框位置在頂部居右，那搜索就是輔助功能，那當然短一點。
具體寬度，需要考慮頂部UI布局情況。但一般不小于220px（大概數值，自己平衡）. 不然就不太方便輸入關鍵字了，或者關鍵字就顯示不了幾個了。
3. 那如果搜索框位置在在頂部居中呢？則可長可短，根據業務情況和頁面布局判斷。
如果為了用戶體驗好的話，搜索框寬度也需要考慮「響應式設計Responsive Design」。
既然都說到 「響應式設計」了，那么就提一下吧。
概念：
響應式設計（Responsive Design）是頁面布局可以「響應」不同尺寸屏幕的設計方法。通常我們說起響應式設計都是針對網頁設計的。同一個頁面，隨著屏幕尺寸的改變，自適應地改變頁面布局。
通俗來說，這個網頁就可以自動適應手機，平板，和電腦的各個分辨率。用戶在各個設備上瀏覽這個web頁時，頁面布局和交互都是自動調節的，相當舒適。
以頁面中的單個功能區為例：
* 比如，內容區塊的在一定程度上能夠自動調整，以確保填滿整個頁面。
* 比如，網格排布，能夠減少/增加排布的列數。如圖片布局在“1行1列” 到“1行N列” 之間，自動調整列數。
* 比如，能夠適應比例變化的圖片。圖片自動調整大小。
* 比如，篩選功能在網頁里是在頁面左側一列，全部展開顯示的，在手機里就可以隱藏顯示，通過按鈕點擊，有滑出菜單之類的。
Tips: 做響應式設計，需要公司舍得投入資源，因為涉及到很多額外的工作量。最起碼有以下：
* Designer | 設計——做3套設計。
* Frontend Engineer | 前端——寫響應式設計的代碼，可寫1套，可寫3套（方便維護）。
* QA Engineer | 測試——測不同的分辨率，最起碼測3套。這還沒算fix bug后的retest.
為啥3套？因為針對分辨率需要做2個節點。我司一般是792px<X<1440px
好了，響應式設計就大概講一下吧。不然又能寫好幾頁。收~
以Youtube為例，大家可以感受下搜索框的響應式設計。
搜索框的寬度是會自動調節的。最小的時候就一個放大鏡圖標（此時為適應手機分辨率），但最寬也就是固定到640px，不然太寬了，輸入關鍵詞時，搜索按鈕離得太遠，點擊也會很不方便。
三、 按鈕樣式
搜索框的按鈕樣式，同樣取決于搜索功能的重要性。也需要平衡整體頁面布局。
按鈕樣式大致情況，如下圖所示：
* 色塊帶圖標的
* 只有一個圖標的
* 沒有按鈕的
* 色塊帶圖標+文字的。
* 其他（比如就一個放大鏡圖標等。圖片中沒做展示）
具體怎么應用，詳見后文：
四、 正常顯示 or 簡化顯示？
九、 一個頁面里有2個搜索框怎么處理？
四、正常顯示 or 簡化顯示？
有些Web中的搜索框，因為各種原因，可能就會做簡化。而不是整個顯示，這個需要根據情況決定，就是——隨機應變~
比如，Apple官網，只顯示一個放大鏡圖標。
此處跟上文提到的小米官網的情況類似。商品品類就這些，導航條突出品類，搜索功能弱化。
但蘋果在此處更弱化了搜索，只放一個放大鏡圖標。（從UI上看，目測是由于導航條中品類太多，放不下搜索框了。） 等用戶點擊了放大鏡圖標后，才使用CSS / JS特效，滑動顯示完整的搜索框，且居中顯示。
再比如，Airbnb 愛彼迎，全球民宿短租公寓預訂平臺。
網站中，搜索功能很重要，是用戶預定，增加銷售的入口。因此需要突出搜索框。
* 首頁，默認顯示完整的搜索框。
* 當頁面滾動時，搜索框置頂顯示，方便用戶查詢和預定，增加潛在銷售可能。但是這個搜索框的內容太多，硬要在置頂層中全部顯示的話，這個始終置頂的層的高度就會很高，會影響用戶瀏覽頁面內容。
那么就把搜索框略微簡化，相應的高度也就小了。（不建議只放一個放大鏡按鈕，太弱化搜索功能了。會流失潛在客戶，流失潛在銷售可能）
* 搜索框在置頂層中居中顯示，點擊簡化版搜索框后，才動效顯示完整的搜索框。
五、默認要顯示提示文字?。?/strong>
在輸入框中可以提示搜索示例，告知網站支持哪些內容的搜索，以及如何使用功能。防止用戶一臉懵，優化用戶體驗。
通常適用于數據庫，資訊類這些內容類型較多的網站。
比如，天眼查。（垂直頂部居中的搜索框）
比如，網易云音樂。 （右上角搜索框）
六、推薦詞
基于業務需要，搜索框內經常會有推薦詞，方便用戶不用輸入關鍵詞就可以直達結果。同時，也是一種對商品的促銷，對資訊的推廣。根據不同需要，可以有不同的顯示方式。
Tips: 推薦詞，熱搜詞，促銷，廣告都可以這么處理。
1. 框內
1）單個推薦詞交替顯示
比如，小米官網
截圖為動態圖哦，大概5秒換一個推薦詞。個人覺得間隔時間有點長了。
2）多個推薦詞同時顯示
比如，LexisNexis 全球頂級法律數據庫 中國站
沒有和小米一樣，做1個推薦詞的動態交替顯示，是因為用戶場景不同。
考慮到LexisNexis的用戶都是律師群體，工作中時間寶貴。使用網站不是閑逛，而是為了快速查詢數據，沒有時間等待。因此一次性顯示2-3個推薦詞，方便用戶直接看到，直接點擊。
提示：推薦詞可能會大于3個的，比如有8個。那就在用戶每次回到首頁后，顯示一批新的推薦詞。
或者，直接顯示在框外，如下文所述。
2. 框外
比如，淘寶
七、有很多分類怎么辦？
如果要針對很多內容類型分別搜索怎么辦呢？搜索框怎么處理呢？有很多方法。
按復雜程度，依次進階如下：
1. 下拉框型
一般用下拉框了，那通常分類對于搜索不是太重要，不用突出顯示。
2.Tab型
如果用tab來展示分類了，那目的通常是：
* 推廣產品或內容
* 引導用戶，優化用戶體驗
1）橫版顯示。比如 某房產網站
2）豎版顯示。比如 知網
搜索框的左側的3個Tab為內容類型分類。
搜索框中展開的下拉框中是字段，此處一并展示。
3）豎版+橫板顯示。比如 某房產網站
如上圖，是豎版分類+橫版的兩個搜索按鈕。
如上圖，是豎版的分類+橫版的分類。橫版的分類還做了2級分類。分類太多，相信設計師們在處理時也挺頭大。
八、 一個頁面里有2個搜索框怎么處理？
回答：哪個重要，就突出顯示哪個唄！
以Amazon為例，
該頁為商品評論頁面。
* 頂部搜索框為全站搜索，非常重要。因此寬度較長，按鈕為亞馬遜的主色調黃色，醒目。
* 頁面內的搜索框，為針對評論內容的搜索，則相對弱化。
搜索框的默認狀態講完了。那么當鼠標點擊搜索框，此時還沒有輸入任何內容，那么光標觸發的狀態是怎樣的呢？通常，根據業務情況，大多數搜索框都會自動彈出下拉框。
我們此處只討論下拉框中的顯示情況。
一、下拉框中，歷史記錄+熱搜詞是大部分網站的標配。
比如，B站。
二、 下拉框中，在歷史記錄+熱搜詞的基礎上，再添加些網站自己想推廣的內容。
比如，Zcool本酷。
三、下拉框中，根據網站自身業務情況，顯示個性化內容。
1. 比如 Zillow, 美國知名房產估價網
網站業務就是估房價。下拉框中，第一行就是“當前位置”，點擊后跳轉到結果頁，顯示定位地址的相關結果。優化用戶體驗。
2. 比如，攜程。
攜程的業務結構相對復雜，搜索也就相對復雜。搜索項同時也涉及到很多字段/參數，其實也類似表單了。后面有機會可以講下表單的交互，此處不延伸討論了。大家有興趣可以去逛逛攜程。
在搜索框中，一旦開始輸入字符，那新一輪的交互又開始了。
一、 默認交互
目前通用的規則——搜索聯想功能，Google已經定義好了。我就不重復寫了，如下摘自UXPlanet：
Google自2008年以來掌握并實施了“搜索聯想”。
“搜索聯想”（自動建議）可以幫助用戶通過已輸入的文本來預測可以找到的查詢結果，為用戶節省了時間并創造了更加便捷的體驗。
交互細節如下：
* 確保搜索聯想是有效的，設計不完善的搜索聯想會混淆和分散用戶的注意力，所以使用拼寫自動更正、詞根識別、語義識別和預測，可以改進搜索體驗。
（Lu傾傾 注：中文搜索還要識別拼音）
* 盡可能快速的提供搜索聯想，例如輸入到第三個字的時候，就給用戶提供相匹配的聯想詞匯，以此減少用戶數據錄入的工作。
（Lu傾傾 注：現在其實輸入第1個字就可以提供聯想了。）
* 只提供少于10個項目的聯想詞句（不建議使用滾動條），否則信息將會變得難以承受。
* 允許用戶通過鍵盤的上下鍵控制選擇列表。
（Lu傾傾 注：
百度在使用“鍵盤”（鼠標不行）上下選擇列表時，如果高亮在某個聯想詞上停頓2秒以上，則等同于“回車鍵”，整個頁面的搜索結果刷新。 Google不支持此功能。
這是用戶體驗的差異）
* UI上，已輸入文本和建議文本視覺上保持差異（例如，通常情況下建議的詞匯通過加粗表示）
二、 個性化交互
1. 比如，Google
（Google作為搜索引擎的燈塔，搜索交互亮點的地方太多太多了，這里只舉個小例子。）
如上圖，不只在下拉框中展示搜索聯想的關鍵詞。
還把關鍵詞作為一個詞條顯示給客戶，比如電影，比如品牌。還同時顯示各自的參數，比如 圖片，字段。
可以幫助用戶了解信息，精準定位。
2. 比如，維基百科。
由于網站的定位不同。維基百科是一個百科全書，其中都是各類詞條相關的知識/信息。因此下拉框中的聯想，都是以詞條形式顯示的。包含了圖片，詞條名， 參數/字段。
3. Amazon 亞馬遜
亞馬遜的用戶體驗也是做到極致了。搜索下拉框除了提供搜索聯想的關鍵詞，還按照不同的特殊關鍵詞，提供不同的參數選項，方便用戶一步到位，不用再到搜索結果頁里做一次篩選了。優化用戶體驗。
比如，想搜索“chair”, 輸入了關鍵詞“chai”(注意，還沒打全 chair)，下拉框中除了顯示chair相關的商品。還直接把chair的價格區間顯示出來，方便用戶點擊后，直接顯示相關搜索結果。
相信此處亞馬遜的PM們是做過usage分析的，chair列表頁中，應該是 “價格”篩選的usage是最高的，并且極有可能用戶進入chair列表頁的第一個用戶行為就是對價格做篩選。PM們就干脆把篩選項放到了搜索下拉框中了。
針對關鍵詞”ipad”, 也是同樣的交互處理方式，此處是顯示“尺寸”區間。
針對關鍵詞“alarm”,下拉框中按照鬧鐘的不同“功能”，顯示“圖片+分類“，方便用戶直接點擊。
【亞馬遜篇 番外】
在收集亞馬遜案例的時候，好玩就去搜了搜國貨之光“馬應龍“，歪果仁們的評論簡直是太歡樂了，看著看著我都笑出了鵝叫聲。
于是就跑偏了，翻譯了2個評論，貼了上來。大家看文章看久了，休息下~
以上，討論的都是輸入單個關鍵詞搜索的情況。
那么輸入多個關鍵詞的交互該怎么處理呢？
N年前，我在《交互設計稿-純實例》之前我寫過，此處不再贅述了。
如有興趣，請戳，https://www.zcool.com.cn/work/ZMjY4Nzg3MDA=.html
大部分的網站的搜索功能，都是需要在輸入關鍵詞后，點擊“搜索按鈕“ or “回車”，才展示新的搜索結果頁的。（此處不討論百度中，鍵盤移動到聯想上就刷新結果頁等特殊情況）
即一定要有個確認的命令，才觸發搜索。這里面有很多考慮。比如：
* 數據量大，如果是實時響應+即時加載搜索結果頁，對服務器和代碼質量的要求都太高。
* 用戶體驗不太好。因為用戶還沒輸入完，或者還沒確定。頁面就在不停的刷新，會干擾用戶。
但，也有個別工具軟件中，不用按回車，就實時刷新搜索結果。比如，Figma.
在軟件中，都是自己的存檔文件，數據量本身就不大。此時邊輸入關鍵字，邊實時響應，刷新搜索結果頁，讓用戶隨時看到自己的文檔。這種情況下，不用按回車，用戶體驗還更好。
以上，終于寫完了。
暫時寫到這吧，總結太累，但是值得！
最后，附上Amazon貝索斯的原話：
翻譯如下：（沒有太直譯，不然有點拗口）
“以用戶為中心”有很多優點，但最大的一個就是：用戶是美麗的、棒棒的、不會滿意的，即使他們說我們的商業很贊，他們表示很開心很滿意。但他們其實想要更好的東西，不過他們自己并不知道。那么你的讓用戶愉悅的渴望，會驅使你代替他們去發明創造。
——杰夫*貝索斯，2016年給股東的信
額，還是拗口。簡單來說，就是：
筒子們，為了讓用戶高興，發揮你們做產品/交互的主觀能動性吧，自己研究創造去，做個好產品出來。不用指望用戶告訴你做什么/怎么做，他們也不知道。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
若想戰勝競爭對手，產品無疑需要在設計上做好提前規劃，并時刻樹立優化意識，盡量滿足用戶的體驗期望。然而研發團隊有時總容易陷入誤區，本篇文章里，作者就產品研發過程中可能忽略的、對用戶體驗具有破壞性的因素做了總結，一起來看一下。
毫無疑問，要想獲得出色的用戶體驗 (UX) 需要在數字世界中保持競爭優勢。盡管如此，由于某些關鍵盲點，改善用戶體驗的努力并不總能取得成功。如果忽略這些盲點，那么無論預算大小和團隊的努力如何，失敗都會預先留存在項目中。事實上，如果實施不準確，可能會導致所謂的“經驗差距”造成的設計上的損失。
上圖所示的具體案例：某銀行投資了近 50 萬美元改進其手機銀行應用程序，卻導致整體客戶滿意度下降。其根本原因是金融公司未能發現和預防不同級別的內部經驗差距。那么，該如何及時識別和避開這些盲點，以保障耗資巨大的大規模數字化項目的成功呢？
在過去十年中，大量研究證實，用戶體驗對公司市場效率存在優先影響。根據甲骨文的一份報告，如果糟糕的用戶體驗導致多個業務問題，那么積極的用戶體驗會增加推薦、保留率和收入，因為 86% 的客戶愿意為更好的用戶體驗支付更多費用。
看起來一切都很簡單——只要增加預算和成本，就足以提供最好的體驗？但在實際操作中，這并不容易。根據貝恩公司的研究，80% 的 CEO 認為他們提供了卓越的體驗，而只有 8% 的客戶同意這一點。
其主要原因可以用“經驗鴻溝”來解釋——這是客戶期望的體驗與他們從數字服務中獲得的體驗之間的負面差異。如果體驗比預期的差很多，就會產生許多令人不快的后果，比如客戶忠誠度下降、大量負面評論，甚至客戶決定離開品牌。
在大多數情況下，人們往往無法認識到真正的經驗鴻溝。
即使公司的領導和員工覺得有些地方不對勁，他們也往往不明白“要改進什么”以及“為什么要改進”。如果沒有意識到某件事，就不可能管理它。
為了解釋“經驗鴻溝”可能導致麻煩的基本原理，我想分享一個現實生活中的例子。
幾年前，一家知名且受人尊敬的中歐銀行開始了大規模的數字化轉型之旅。當時，該銀行的應用程序的評級為 3.5，并且已經過時。所以，為了實現數字化、提升銀行形象，并在不斷增長的數字市場中獲得競爭機會，管理層打算緊急創建并推出一款現代化的銀行應用程序。因此，最初的設計和開發周期為 6 個月。
盡管如此，銀行還是花了三倍時間（1 年零八個月）自主構建新應用程序。無論從時間來說，還是從投資預算來說，這都可以稱得上是一個重要項目。從項目的范圍、所做改進和時間表來看，總成本估計在 50 萬左右。
然而，結果完全沒有達到預期。新應用發布后，它從之前的 3.5 下降到 2.4，并且因為它沒有改進，以至一年后，其評分仍在下降，其用戶體驗也日漸惡化。
銀行盡一切努力改善用戶體驗，整個團隊努力工作近兩年，怎么會發生這種情況？
這種情況的產生，正是由于“經驗鴻溝”的存在。盡管該銀行啟動數十名頂級專業人士花費了 20 個月和 50 萬來改良產品，但它仍未滿足用戶的期望。
雖然客戶不滿意的真正原因是無意識的“體驗鴻溝”，但公司往往傾向于通過指責外部環境來解釋它。例如市場的變化、競爭對手的活動、創新的出現、消費模式的變化。當然，這也是客觀事實，但一家適應性強的公司應該考慮將這些因素用于其增長，而不是作為“替罪羊”。
但衡量適應效果的最重要方式是公司服務在多大程度上滿足甚至超過了消費者的期望。沒有意識到他們服務和客戶期望之間存在差距的公司注定無法適應外部環境的變化。
在某些情況下，公司的行為甚至會導致經驗鴻溝擴大到臨界水平。這通常會導致目標客戶對公司產品和服務的需求急劇下降。
如果我們回到這個例子，似乎管理層對重大改進是否可以成功充滿信心，并投入了大量資金和精力進行廣告宣傳。同時，那些宣傳此應用程序現代、創新和友好的廣告，激發了消費者的高期望，以至于大大超出了其服務的實際質量。
結果，當產品最終發布時，客戶驚訝地發現他們的期望落空了，新應用程序比改良前更糟糕。并且相關的負面評論不僅出現在 App Store 和 Google Play 上，也在社交媒體上大量涌現，人們在推特上不斷諷刺該銀行失敗的數字化項目。
接下來，讓我們探討一下數字服務和用戶期望之間的鴻溝是如何形成的，以及為什么沒有人能夠阻止它。
事實上，最大的挑戰是大家往往很難注意到這些差距。他們的原因并不明顯，并且可以同時存在于各個組織架構之上。此外，它們的影響令人難以察覺，以至于最終會導致意想不到的破壞性后果。最終，直到團隊面對產品在市場上的失敗，才有人明白原因是什么。
彌合鴻溝的主要困難在于，級別越高，對經驗鴻溝的不了解程度越高。實際上，在組織架構的頂部，通常會找到造成鴻溝的根源。級別越低，離用戶越近，員工越能覺察到問題和差距，但他們往往沒有權力和能力去消除它們，他們受制于文化。
在這種特殊情況下，售后部門每天都會接到數千個關于產品問題的電話，但由于業務流程分散，他們對此也無能為力。
客戶的挫敗感變得更加強烈。即使是最簡單的日常場景，他們面臨的問題也難以執行，但他們從銀行員工那里得到的反饋是，他們并不是唯一產生困惑的人，而且目前銀行正忙于交付新功能，而不是修復當前問題。
使事情變得復雜的是，經驗鴻溝背后的內部流程，是由過去促進公司生存和增長的相同機制引起的。該公司受制于過去的成功。就像諾基亞一樣，這家全球最大的以硬件為中心的手機工廠，在蘋果智能手機引領的軟件革命中被徹底擊敗。
由于任何組織都有惰性，這些機制受到內在信念和價值觀的影響，對適應市場和彌合經驗鴻溝造成了阻礙。
首先，應該在管理層面解決鴻溝。因此，級別越低，離領導層越遠，離客戶越近，就越能感受和認識到鴻溝的存在。自然，一線員工將擁有從那些期望沒有得到滿足的客戶那里得到最多的數據。
主要的體驗鴻溝可能是由組織中七個層次（文化、反饋、執行、設計、價值、品牌承諾、情感聯系）中的一個或幾個盲點造成的。
在文化層面缺乏以顧客為中心的理念，員工無法使服務更接近客戶期望，導致了“文化鴻溝”。在具有“文化鴻溝”的公司中，有助于以客戶為中心的流程和活動都是處于低優先級的，相應的，它們也不會得到相關的資源。
缺乏關于客戶期望和他們對產品或服務的體驗數據會造成“反饋鴻溝”。在這種情況下，公司可能經常收集數據，但沒有對其進行分析，也沒有采取任何措施來改善這種情況。
即使優先考慮以客戶為中心的方法，并且收集了大量有關客戶期望的數據，但在設計能力和方法上仍可能存在鴻溝。擁有合適的專業知識，就可以構建高質量的數字產品生態系統，從而根據客戶需求提供最佳服務。
這種鴻溝與糟糕的設計執行有關。如果不優先以用戶為中心的來設計產品，那么創建最終產品和服務的決策和努力將注定是低質量和低效率的。這決定了公司在數字時代創造有競爭力的服務和產品的能力。
如果設計生態系統在 價值金字塔的五個層次（功能、可用性、美學、地位、使命）上不符合用戶的期望，就會形成價值鴻溝。
正如我在上述銀行案例中所表明的那樣，如果一家公司只顧著積極推廣其服務，承諾一些產品無法提供的東西，它會導致用戶對期望的更大失望。因此，由于廣告承諾與現實不符，對該服務的負面評價可能會翻倍。
如果品牌傳播是純粹的信息傳播，專注于功能特征，那么就無法與用戶形成情感聯系。由于人類基于情感做出決策，因此基于情感構建服務價值會對客戶期望和最終用戶體驗產生積極影響。
每個客戶都會不知不覺地根據自己的期望來評估他們所接受的服務。用戶體驗質量所引發的情感將形成品牌的聲譽。
在現代世界，數字渠道已成為品牌的主要“營銷”和公關渠道。
一個應用程序，即使有一百年的服務客戶歷史和其他渠道的優質服務，負面體驗也會破壞品牌推廣的所有努力。
這僅僅是因為在數字時代，移動渠道占主導地位，對于某些人來說，它正在成為與品牌互動的唯一途徑。這就是為什么了解如何彌合數字產品出現的七個體驗鴻溝的方法如此重要。
在文化方面，轉型基于高層心態的改變，并將這種影響滲透到整個的公司文化和內部價值觀。特別是，可形成“以客戶為中心”的體驗思維模式。
在銀行案例中，開始彌合反饋鴻溝的第一步，是深入了解社交媒體上的負面評論以及致電售后部門的電話。接近這些客戶才容易消除反饋鴻溝。事實上，他們比管理層更了解應解決哪些問題，并且往往渴望積極分享自己的情緒并希望得到傾聽。如果一家公司足夠開放并準備好接受批評，它可以使用這些數據來彌合鴻溝并提高產品迭代的敏捷性。
通過整合設計方法和設計思維來制定彌合鴻溝的策略，可以使用設計金字塔。該框架從五個層次（流程、團隊、行動、結果和價值）確定了能夠提高公司整體效率的設計集成。
組織必須將經過驗證的設計執行方法（例如設計思維、HCD 或 UX 設計方法）與分步系統相結合，以設計符合客戶期望并能夠彌合執行鴻溝的數字產品。
產品的功能級別為客戶創造真正的價值和利益，并通過提供卓越的可用性進行功能擴展；美學 ——令人驚嘆的視覺識別；狀態 —— 針對產品特定受眾的個性化，最后是建立產品的價值觀與使命。
數字時代的客戶要求透明、關懷、誠實和開放的溝通。由于網絡效應，幾乎不可能銷售劣質產品，因為每個人都可以在社交媒體上發布負面反饋，而這些負面反饋將深深地損害客戶的信任。因此，做出不僅可以兌現，甚至可以超額兌現的承諾至關重要。
對客戶的同情和關懷比以往任何時候都更加重要。在品牌與客戶之間建立情感聯系對于確保長期忠誠度和需求至關重要。這種聯系是通過之前涵蓋的所有階段建立的——將客戶放在第一位的正確心態；收集反饋并在此基礎上進行改進；使用正確的工具和方法來創建產品設計和生態系統；創造真正的價值和利益，最后，通過誠實和超額兌現承諾。
該途徑涵蓋了可能破壞數字產品創造的 7 個主要體驗鴻溝，以及可以幫助避免和解決這些鴻溝的 7 個橋梁。如果一個品牌能意識到這些盲點，它可以立即獲得比仍處于盲點的競爭對手的顯著市場優勢。
僅憑意識就可以產生巨大的差異，但將意識與行動相結合會導致長期成功，成為一個需求量很大和深受喜愛的品牌。
本文翻譯已獲得作者的正式授權（授權截圖如下）
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今日，有消息稱字節跳動將會推出一款名為“飛樂”的音樂流媒體產品。字節跳動的入局，或將引起音樂行業的新波瀾。本文作者對此發表了自己的觀點，一起來看看吧。
擅長“四路出擊”的字節跳動，又雙叒叕出手了……
長期以來，關于字節跳動擴張的消息就一直不斷。前有抖音內測“心動外賣”進軍外賣領域，后有字節跳動收購VR公司的消息登上熱搜……近日，有報道稱字節跳動將于今年下半年推出一款音樂流媒體產品，產品的名稱暫定為“飛樂”，項目內部代號為“luna”。而字節跳動的再次入局，或將引起音樂行業的新波瀾。
今年4月，字節跳動成立了音樂事業部；7月份的時候，字節跳動將音樂升級為P1優先級業務，與游戲業務和教育業務平級；不久之后還內測了音樂代理發行平臺“銀河方舟”。除了自身做音樂之外，字節跳動還投資了校園音樂平臺。這一系列動作無一不展現了字節跳動發力音樂領域的決心，而字節跳動之所以如此看重音樂業務也是有一定原因的。
首先，音樂業務有助于字節跳動獲取新流量。據CNNIC發布的第47次《中國互聯網絡發展狀況統計報告》顯示，截至2020年12月，我國的網絡音樂用戶規模達6.58億，與2020年3月相比增長了2311萬，占網民整體的66.6%。其中，手機網絡音樂用戶規模達6.57億，與2020年3月相比增長了2379萬。隨著短視頻領域流量見頂，字節跳動亟需找尋到新的流量增長點。
其次，音樂行業用戶的付費意愿在逐步增強。據前瞻產業研究院發布的相關報告顯示，我國的網絡音樂付費用戶規模已經由2016年的2017萬人，增長至2020年的7192萬人，網絡音樂付費滲透率也由2016年的4.0%增長至2020年的10.9%。網絡音樂用戶的月度消費金額也由2017年的8.5元，增長至2020年的9.5元。
以騰訊音樂為例，據其最新發布的二季度財報顯示，截至2021年6月30日，騰訊音樂的在線音樂付費用戶人數達到了6620萬，同比增長了40.6%，與今年一季度相比凈增長了530萬人；付費率為10.6%，與去年同期和今年一季度的付費率相比均有所提升。
最后，音樂業務與字節跳動旗下的短視頻業務相輔相成。配樂是制作短視頻必不可少的環節之一，配樂和內容契合度極高的優質短視頻往往能收獲很高的播放量，但也正因短視頻配樂使抖音多次陷入侵權局面，不少短視頻也因其所使用的音樂無版權而被做下架處理。倘若字節跳動推出音樂產品，就能夠為短視頻用戶提供更為方便的曲庫支持，有利于短視頻用戶進行創作。
7月24日，國家市場監管總局責令騰訊音樂解除其網絡音樂獨家版權；8月31日，騰訊發布了《關于放棄音樂版權獨家授權權利的聲明》。眾多音樂平臺不再被音樂版權“卡脖子”，字節跳動于此時再度發力數字音樂，自然也能享受到行業大環境變化所帶來的重大利好。除此之外，還有其他原因也會對字節跳動發展音樂業務產生積極影響。
其一，是其擁有龐大的流量優勢。據抖音發布的《2020抖音數據報告》顯示，截止2020年12月，抖音的日均視頻搜索次數突破4億；截止2020年8月，抖音的日活躍用戶數量突破6億。有抖音這一巨大流量池為其引流，無論是音樂流媒體產品的用戶獲取，還是音樂作品宣發都會容易一些。
9月9日，工信部相關業務部門召開了“屏蔽網址鏈接問題行政指導會”，提出有關即時通信軟件的合規標準，要求9月17日前各平臺按標準解除屏蔽。隨著屏蔽外鏈的解除，字節跳動也將從中獲益，迎來新一波流量增長。
其二，是創作者扶持計劃成效顯現。早在2018年，抖音就啟動了“看見音樂計劃”以扶持原創音樂，隨著不斷進行的音樂扶持計劃，抖音的音樂生態也在逐漸完善。據《2020抖音音樂生態數據報告》顯示，2020上半年抖音的音樂人入駐數量增長近3萬；近半年抖音音樂人漲粉累計超3億，其中漲粉超1000萬的音樂人有6位，漲粉超500萬的音樂人有23位。
而抖音扶持音樂計劃的成功，也給字節跳動的音樂流媒體產品打了樣。字節跳動在發展音樂業務時，也可以采用類似的策略進行音樂產品內容生態的完善。另外，部分抖音音樂人也可能成為字節跳動音樂業務的潛在音樂人，為字節跳動音樂業務的發展添磚加瓦。
其三，算法優勢助力音樂業務發展。眾所周知，算法是字節跳動的一大特色，今日頭條和抖音能取得當前的成績，與字節跳動的算法推薦不無關系。據悉，字節跳動的音樂業務主要由前臺和市場、算法兩大中臺支持構成。在中臺方面，由抖音的市場團隊承擔國內音樂人合作與版權宣發，算法團隊負責提供智能配樂、安全風控等技術支持。
無論是后版權時代的來臨，還是字節跳動自身的優勢都對其發展音樂業務大有裨益，但機遇與挑戰并存，字節跳動在迎來重大利好的同時，依然面臨著不小的挑戰。
一方面，騰訊音樂的霸主地位難以動搖。在“取消網絡音樂獨家版權”尚未落地之前，騰訊音樂憑借海量的正版歌曲曲庫以及持續建設的內容生態，穩居行業頭部。據騰訊音樂發布的財報顯示，今年二季度騰訊音樂的在線音樂月活躍用戶數為6.23億，僅月活躍用戶數這一項指標，字節跳動在短時期內就很難與之相匹敵。
另一方面，網易云音樂的音樂社區文化別具一格。在被音樂版權“卡脖子”的時期，網易云音樂憑借其音樂社區文化，成功地從眾多音樂平臺中脫穎而出，濃郁的社區氛圍也極大地提高了用戶的黏性。另外，網易云音樂不斷推出的扶持計劃也增強了其內容競爭力。
網易云音樂的這些特色化優勢，也將為其在今后的發展中提供助力，但對字節跳動來說，擁有這些差異化優勢的網易云音樂，無疑是一位強勁的對手。
另外，快手也在音樂領域有所布局。早在2018年的時候，快手就推出了一款音樂產品“光音Mulight”；今年2月26日，快手推出了音樂K歌APP“回森”；5月份的時候，快手推出了音樂APP“小森唱”，該軟件的核心功能是AI創作詞曲用戶進行演唱，在演唱之后還可以通過點贊評論等方式進行互動，最終達到社交的目的。隨著快手在音樂領域的不斷加碼，也會對字節跳動音樂流媒體產品的發展產生影響。
目前來看，隨著行業大環境的變化，在線音樂領域的競爭愈發激烈已經是無可辯駁的事實。無論是穩居頭部的騰訊音樂，還是擅長打情懷牌的網易云音樂，亦或是跨界而來的快手，都是字節跳動音樂流媒體產品的強勁對手。而字節跳動能否在強手如云的音樂行業闖出一片天，仍待時間驗證。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做好行業研究，有助于企業或個體從業人員更好地洞察市場，進一步發現機會，或者找準產品定位，推動企業戰略決策和后續實施。本篇文章里，作者就行業研究的分析框架與思考維度做了總結和梳理，一起來看一下。
以始為終，構建行業研究的方法論和分析框架，需要從目的出發，下面列舉幾類典型的行業研究報告目的。
券商的報告（二級市場），分析某個行業是否有投資價值，從行業賽道的選擇過渡到這個行業賽道中的值得被投資的公司，說明這個行業中哪些公司更有投資價值。報告結果是要用于股票投資服務的。二級市場由于公司財務報告的披露性質，公司的財報分析在行業報告中也是重要的構成部分。
互聯網戰略投資部門/VC的報告（一級市場），互聯網戰略投資部門通常以公司的戰略發展目標為出發點，布局上/下游產業鏈，或通過收購競品公司，鞏固和發展公司在行業的競爭力，提升市場占有率，開拓新的市場；VC通過布局細分的賽道，選擇合適的投資標的，參與風險投資。
值得注意的是在互聯網初創企業的財報分析通常不作為重要參考因素，多數互聯網公司在初創期將投入大量資金，長期處于虧損狀態，此時，市場份額和估值與傳統二級市場的分析方式有較大差異。
咨詢公司的報告，目的是為行業內的公司服務的，說明該行業的行業規律、行業風險、行業機會、行業發展趨勢等。在行業研究的內容方面，咨詢公司常見的模式還包括訪談調研行業內公司高管。
基于行業研究的目的，常規的行業研究框架，包括一下幾個核心部分：宏觀分析、行業分析、公司分析、消費者分析、競爭者分析，其中宏觀分析和行業分析的視角都是從賽道鏈路的角度，進行整體分析，而公司、消費者和競爭者則是從市場參與者的角度進行分析。
1）宏觀分析思考的維度
2）宏觀分析考慮的內容：
宏觀分析中考慮的因素點對行業環境的影響，因素點可采用PEST模型分類，但不必拘泥于PEST模型，因素點間可能是組成多因素，從而對行業環境產生間接或直接影響。基于PEST模型，因素點可以分為：
① 經濟類
包括經濟發展水平、社會經濟結構和宏觀經濟政策，其中經濟發展水平可以通過較為典型的量化指標進行衡量，例如GDP\CPI\進出口規模等；宏觀經濟政策主要包括貨幣政策和財政政策；社會經濟結構主要體現在經濟體制和產業結構構成。
② 政治類
包括政治體制、政局穩定性、和相關的政治政策。
其中政治體制包括資本主義、社會主義和中國特色社會主義等，政治體制對行業的影響為間接影響；政策包括投資政策、環保政策、進出口政策、貨幣政策和財政政策等，也有針對具體行業的政策，例如近期發布的教育“雙減”政策就對在線教育行業產生了不小沖擊，網絡安全隱私數據保護政策對互聯網公司獲取用戶使用偏好數據，產生了非常大的影響。
其次，除了政治政策，政局的穩定性對行業發展穩定產生重要影響。
③ 文化環境類
包括人口因素、社會流動性和消費心理，此類因素可與消費者分析關聯，對消費者細分市場和市場定位產生了重要的影響，主要從聚類的角度，對消費群進行分析。
人口因素主要考慮人口總數、年齡構成、性別比例、教育水平、人口地理分布等，社會流動性主要考慮社會階級流動性和貧富差距；消費心理主要包括生活方式、文化傳統和價值觀等，對消費者偏好心理產生影響，從而影響消費者的行為決策。
④ 科技類
主要包括專利技術數量和質量、相關產業技術等，科技對一個產業的生產效率與產品更新，甚至一個產業的萌芽和滅亡都將產生巨大的影響，例如智能芯片對手機行業產生了巨大的沖擊，原有的非智能手機迅速被智能手機取代，生產非智能手機的廠商迅速破產。
綜上，宏觀類因素多數為混合因子對產業產生直接或者間接的影響。
1）產業分析思考的維度
① 整體市場分析
整體市場分析除了關注靜態的存量市場，也需要關注動態的增量市場。市場的現有市場規模和增速決定了市場的規模，體現為市場的“寬”度和市場的“長”度，行業壁壘和驅動因素影響參與市場的玩家數量，體現為市場的“陡”度。
② 市場參與者
市場參與者從各個角度，在產業分析上有不同的分析時間，例如從產業鏈角度，分析上下游供應商和購買者、從行業參與者的角度，分析競爭者和行業集中程度。
③ 影響因素
產業影響因素和宏觀影響因素的區別在于，產業影響因素從供給需求、驅動和壁壘的角度分析更為直接的影響因素對產業產生的影響。
2）宏觀分析考慮的內容
① 產業規模
產業規?？梢詮目臻g維度進行解析，產業的寬度代表現有市場規模，產業的長度以時間為維度，代表增長率和增長率增速，而產業規模=現有市場規模*增速。
由此可見產業規模的衡量有兩個重要的衡量標準和指標，即市場規模與復合年均增長率（CAGR），市場有多寬指行業規模有多大、增長的天花板有多高，是衡量一個行業現有市場容量和將來市場發展空間的最重要的標準，現有市場容量決定了該市場有多少蛋糕可以分，而市場增速決定了行業發展潛力，行業增速可與行業的成熟度曲線緊密聯系。
② 產業生命周期
產業的生命周期以時間為維度，一般分為導入期、成長期、成熟期和衰退期。產業生命周期在導入期、成長期、成熟期和衰退期的不同階段，可以從經營風險、財務風險、產品差異、單位利潤、產品特征等不同維度進行分析，詳見下圖。
③ 產業鏈
產業鏈分為上游供應商、下游購買者、潛在進入者和現在競爭者，將企業放在產業鏈進行分析，需要對供應商和購買者有較高的議價權，能有效面對競爭者。
其中，影響供應商議價能力的影響因素包括市場占有率、轉換成本和供應商戰略，影響購買者議價能力的影響因素包括價格敏感度，相對議價能力等，影響潛在進入者的障礙有結構性障礙和行為障礙，影響替代品威脅的主要因素包括產品同質化程度和勞動生產效率等。
④ 產業驅動因素與行業壁壘
產業的驅動因素主要分為兩個部分，第一是生產要素驅動，第二是相關支持性產業驅動，其中，生產要素包括高級生產要素和初級生產要素，而相關支持性產業，則表現為產業鏈上下游的聚集驅動。
行業壁壘：行業壁壘分為限制性要素和市場壁壘，可以通俗理解為一只“看得見”的手和“看不見”的手，即政策限制和市場限制。
政策限制如進出口限制、許可證、配額等，實現限制如規模效益使得成本降低，對新進入的小規模玩家形成行業壁壘，又比如缺乏品牌技術，而只能成為代加工企業，獲取最低的生產制造利潤等。
如果行業的門檻很高，競爭者難以進入市場，行業的壟斷程度也相應比較高，通常用行業集中度來分析衡量，即CR5（行業中前5名的企業占據的市場份額）。
但是，壟斷程度越高，企業越有機會獲得超額利潤，但行業的壟斷程度并非僅僅由行業壁壘所決定，消費者的需求差異也會對壟斷程度產生重要影響，例如手機行業的壟斷程度較高，而餐飲行業卻很難出現寡頭壟斷，因為餐飲的消費者偏好差異非常大。
⑤ 供求分析
供給側主要包括產能分析，同時也受行業集中程度的影響，即上文所述的行業壟斷程度，產能分析包括產能利用率水平、庫存周期、產品使用壽命、訂單周期，這里比較典型的行業是電子產品生產制造業。
需求側主要從消費者市場出發進行分析，同時考慮替代品，需求預測包括消費者整體購買力和細分需求市場，這里的消費者整體購買力受到宏觀因素的影響，例如人均可支配收入、貧富差距等；替代品的細分影響因素包括國家進出口和國內市場替代品。
⑥ 產業結構
產品結構：產品結構可以從加工階段和主導構成不同的視角進行分析，加工階段主要以產業鏈維度為分析視角，從初級產品、中間產品和最終產品進行分析，主導構成主要從驅動因素進行分析，分為勞動密集型產品、資金密集型產品和技術密集型產品等。
市場結構：市場結構從分類上可以分為市場主體結構、市場客體結構、市場空間結構和市場 時間結構，從行業集中程度，可以分為完全競爭市場、完全壟斷市場、壟斷競爭市場和寡頭壟斷市場等，影響行業集中程度的因素在前文已經提及。
1）公司思考的維度
① 戰略
戰略需要將企業放置在宏觀和產業的角度，通過對賽道、競爭者和消費者的分析，制定戰略，從整體分配資源，規劃產品和服務。
② 經營分析
經營分析從數據量化的指標，動態指導經營過程中的業務發展。運用定量分析、業務分析和行為分析相結合的方法，對企業進行綜合分析的一種現代經營分析體系。包括:經營基礎分析、財務分析、市場分析、勞務分析、生產分析、物資分析等。從業務單元的視角優化運營。
2）公司分析考慮的內容
① 戰略分析
戰略分析包括企業能力與資源分析、價值鏈分析、產品組合分析、外部分析、內部分析、財務指標分析和商業模式分析等。
② 戰略選擇
戰略選擇可以從總體戰略和智能單元戰略出發，如果業務涉及海外業務，需要分析選擇國際化經營戰略。
3）競爭者思考的維度
4）競爭者分析考慮的內容
1）消費者思考的維度
細分市場與精準營銷：在互聯網數字化的革新下，原有的消費者聚類分析越來越精細化，不僅有群體的聚類標簽，個體消費者的標簽也能層層穿透，為精準營銷運營提供了條件。
2）消費者分析考慮的內容
基本屬性：基本屬性包括年齡、收入、性別、受教育程度和地域分布等。
購買動機和購買行為：根據MBA智庫的定義，營銷學家把消費者的購買動機和購買行為概括為6W和6O，從而形成消費者購買行為研究的基本框架。
① 市場需要什么（What）——有關產品（Objects）是什么。通過分析消費者希望購買什么，為什么需要這種商品而不是需要那種商品，研究企業應如何提供適銷對路的產品去滿足消費者的需求。
② 為何購買（Why）——購買目的（Objectives）是什么。通過分析購買動機的形成（生理的、自然的、經濟的、社會的、心理因素的共同作用），了解消費者的購買目的，采取相應的市場策略。
③ 購買者是誰（Who）——購買組織（Organizations）是什么。分析購買者是個人、家庭還是集團，購買的產品供誰使用，誰是購買的決策者、執行者、影響者。根據分析，組合相應的產品、渠道、定價和促銷。
④ 如何購買（How）——購買組織的作業行為（Operations）是什么。分析購買者對購買方式的不同要求，有針對性地提供不同的營銷服務。在消費者市場，分析不同的類型消費者的特點，如經濟型購買者對性能和廉價的追求，沖動性者對情趣和外觀的喜好，手頭拮據的購買者要求分期付款，工作繁忙的購買者重視購買方便和送貨上門等。
⑤ 何時購買（When）——購買時機（Occasions）是什么。分析購買者對特定產品的購買時間的要求,把握時機，適時推出產品，如分析自然季節和傳統節假日對市場購買的影響程度等。
⑥ 何處購買（Where）——購買場合（Outlets）是什么。分析購買者對不同產品的購買地點的要求，如快速消費品，顧客一般要求就近購買，而選購品則要求在商業區購買，一邊挑選對比，特殊品往往會要求直接到企業或專賣店購買等。
綜上所述，行業研究的框架可從宏觀、賽道、市場參與者進行分析。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
登錄是進入一個應用程序 、網站或服務的入口。幫助用戶建立他們的賬戶。
讓我們花點時間來定義一下“登錄目標”這個術語，這是在做設計決策時的關鍵。
登錄目標是指用戶進入登錄流程的意愿。以有聲思維來表達，它可以是 “我想登錄”、“我想檢查我的電子郵件”、“帶我去那里”，等等。
當用戶進入到登錄頁時，他們可能沒有登錄意愿。可能會產生“嗯，我不在乎，以后再做”或“這太麻煩了”或“呀，我現在該怎么辦？”的想法。忘記密碼、半路遇到困難或切換到另一個頁面/設備，都可能是缺乏登陸意愿的跡象。
我們得到了登陸目標
保留或增強登錄流程中的登陸意愿是很好的目標，下面的準則都是為這個目標量身定做的。
設計熟悉的體驗，雖說不是設計師最喜歡的設計準則，但是與整個生態系統中最好的體驗保持一致是非常重要的。例如使用簡單、公認的布局，使用眾所周知的術語和文案，都有助于用戶自信而輕松地進行熟悉的操作。
保持通用的設計也有助于將頁面輕松擴展到不同的形式和設備。
Pinterest 有一個傳統的、居中的覆蓋式登錄頁。它有一個亮紅色的主要登錄按鈕，并提供 Google 和 Facebook 作為額外的社交登錄選項。
滑到最后，有我對網絡上流行的成功登錄經驗的總結。這就把我們帶到了下一個問題 —— 創新的界限在哪里？
登錄是一個品牌展示的絕佳機會點。在視覺上，它可能使用品牌色、品牌照片、品牌插圖，甚至是營銷信息。和大多數設計問題一樣，登錄頁品牌展示的關鍵在于平衡。登錄操作應該一直占據中心位置。頁面上的其他元素必須謹慎規劃好，不應該奪走登陸操作的注意力。
一條優秀的經驗之談：用戶在登錄頁面上花費的時間越少越好。幫助他們繼續前進，盡快發現產品中的優點和價值。
快速回顧一下：用戶在登錄頁面上花費的時間越少越好。根據這一點，登錄（或恢復）操作應當占據用戶的全部注意力。
在恢復體驗中，將一套復雜的操作分解成多個步驟是很有效的。安排用戶一次只做一件重要的事情！例如：輸入你的手機號碼和輸入發送到你手機上的驗證碼是兩個獨立的步驟。
Facebook 在頁面中保持用戶信息在右側，并將恢復流程分解為多個步驟。
亞馬遜把它的恢復流程分解成多個步驟。它將次要的恢復選項設置為 “我需要更多幫助 ”的可擴展部分，這有助于保持注意力集中在主要操作。
保持注意力集中在主要操作的技巧：
在登錄過程的每個階段，用戶都可能失敗。電子郵件地址輸入錯誤、密碼輸入錯誤或忘記密碼、網絡問題，所有這些都可能導致登錄意愿的急劇下降。因此，登錄界面以最恰當的方式回應用戶是非常重要的。清晰、及時、精心編輯的錯誤提示信息能起到很大幫助。
錯誤信息包含有用的提示/暗示，指明你在失敗時可以做什么
當你密碼登陸失敗，但你有一個 Gmail ID 時，Facebook 會增加一個 “用 Google 賬號登錄 ”的功能
指導用戶恢復的技巧：
重點是讓用戶知道平臺識別出了他們，并提供一個歡迎回歸的體驗。這有助于提升用戶的登錄意愿。
保留登錄痕跡的方法：
對于你的平臺應該提供哪些登錄方法，沒有一個放之四海而皆準的方案。最好是提供一到兩種額外的方法（除了用戶名+密碼），這樣用戶就有了選擇，以防他們忘記密碼。這些方法可以是基于電話號碼的登錄、人臉識別，或最常見的社交登錄，如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考慮社交登錄，思考為平臺添加最流行和最安全的方案。
需要注意的是 —— 增加很多的登陸方法會使頁面變得混亂，可能會導致登錄意愿降低！將額外的選項限制在 2 或 3 種。
針對最常用的登陸方式進行優化，并明確區分主要和次要方式。這些選項通常被證明是需要重置密碼（以防用戶忘記密碼）的很好的替代方法，但同時也被認為是一個乏味的步驟。情況允許時，應智能地浮現其他登陸選項并進行個性化處理。例如：如果用戶是通過電子郵件登錄，提供一個帶有一次性鏈接的登錄選項可能會有效。
在此提供 Medium 登錄頁的案例。雖然清晰且設計良好，但它確實有太多的登錄方法。不得不回訪 Medium 的設計者，如果這個設計對他們來說是好的！
無密碼登錄正火速流行起來。特別對于只有移動端的應用程序來說，基于電話號碼的認證已常態化。指紋和 FaceID 在許多地方出現，使認證流程變得快速、安全。為平臺找到最適合（且可開發）的方法，并將其作為主要登錄選項。
登錄涉及到用戶輸入敏感的個人數據，如電子郵件、密碼和電話號碼 —— 這是決定了他們與平臺關系的敏感時刻。
登錄框代表了品牌，任何視覺上的改變都必須緩慢進行——因為整體的視覺變化可能會失去用戶信任。
登錄也是（有用的）保障 —— 足以讓壞人無法進入系統!
雖然減少普通用戶的操作是很重要的，但如果我們懷疑用戶可能是黑客，那么出現額外的認證也變得很重要。這可能是一個很好的機會去提醒用戶能夠采取哪些措施來加強他們賬戶的安全性 —— 例如：強密碼、雙重認證等。
之前有提到過，投入足夠的時間去調研用戶，有助于提高登錄意愿！這一點是很重要的。
登錄是一種體驗，你的用戶角色可以是各種各樣的 —— 每個人都可能擁有一個你平臺的服務賬戶！如果可能的話，縮小你的角色范圍。
情況允許時，像我這樣（為社交媒體平臺設計），可以嘗試以下方案：
以下是我對網絡上我最喜歡的登錄頁進行的總結，包含一些我經常訪問的平臺。歡迎推薦更多登錄頁！
Google（谷歌）打破了標識優先的格式 —— 改成了分步式登錄模式，在不同的步驟中輸入電子郵件和密碼。這種模式對于 Google 有安全優勢，也可以使他們在接下來的步驟中為用戶提供個性化的選擇。頁面也是最小的、全白的、聚焦的。
Uber 的登錄頁是簡單且聚焦的，允許用戶輸入他們的電話號碼并進入下一步。
Facebook 有幾個登錄方案，他們用這些方案進行實驗和 A/B 測試 —— 這是一個右對齊的登錄框案例，它很好地突出了重點。左側的空間被用來打造積極的品牌形象 —— 總體來說是成功的登錄體驗。
Pinterest 做了 一個簡單居中的疊加表單，有碩大的輸入框 —— 不斷吸引用戶！還有一個亮紅色的登錄主按鈕，以及一些額外的社交登錄選項。
盡管 Airbnb（愛彼迎）在很多方面都做得很好，但它的登錄頁讓人感到操作繁多，這也許是因為基于手機號碼登錄，也許是因為大量的次要登錄選項，導致相當多的認知負荷！
LinkedIn（領英）很好地保持登錄框的簡介、聚焦和居中，有一個醒目的主登錄按鈕。
我對 Dropbox 的登錄頁面持猶豫態度——插圖很好看，但它的顏色與界面按鈕的顏色相似。這是附加元素分散注意力的案例。就我個人而言，我喜歡在界面中大膽使用插圖，但評估插圖的使用環境也很重要。
Amazon（亞馬遜）的登陸頁視覺設計上有些老舊，但對于管理用戶注意力是一個很好的案例，巨大的黃色“繼續”按鈕以及頁面上沒有任何干擾，使登錄任務看起來簡單快速。
在登錄頁面上放置廣告可能不是一個好主意，但同時 Yahoo（雅虎）有一個與眾不同的標識在登錄框中，其中設計了一些巧妙的功能，幫助用戶減少輸入。(參考下圖)
我想把 Figma 納入優秀的登錄案例中，該頁居中于浮層，Google 登錄被突出展示（也許是 Figma 的首選和推廣的登錄形式？），它非常簡潔，幾乎是線框式的。用戶體驗非常好。
感謝我的產品合作伙伴 Apurva 和我一起學習。采取微小的步驟進行用戶識別，并且使用戶易于接受。這會使你的用戶登錄成功率越來越高！同時這也會為平臺帶來更多的活躍用戶。:)希望你能從這篇文章中得到啟發，并應用于你自己的產品和設計工作中。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn