定義：
1.同一頁面內不同模塊描述
文章來源：站酷 作者：體驗為王UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前人早已總結了讓動畫生動的技巧，早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則，該法則也是受用至今。法則雖是針對傳統動畫而制定，但對于我們日常需求中所接觸的動效/動畫需求也同樣受用。
1）動畫原則介紹
2）結合案例應用原則
3）流程方法論沉淀
4）結語
擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調物體的質感、重量、速度。擠壓和拉伸會給予物體運動時具備質量感和體積感的錯覺。例如當一個皮球正在進行下落運動，在運動過程中讓皮球體積產生一定拉伸來表現它的速度感，皮球落地后則因力的作用產生擠壓變形。
擠壓與伸展的幅度影響著物體的質感、重量。設計師們可根據物體的質感去決定擠壓伸展的幅度。動畫雖存在夸張性，但對于物體擠壓拉伸的體積盡可能保持視覺統一，避免較大的體積誤差導致運動的突兀。
預期動作可告知觀者物體運動即將發生，增強觀者的場景代入感，使運動更加生動真實。如果我們去除前期的預備過程物體所呈現的運動感知像是突然被前方磁鐵所吸引。
預期動作可對觀者視線進行引導，設計師可以根據預期動作所引導的方向來銜接鏡頭/場景的轉場。反之預期動作也可以用來欺騙觀眾，當用戶預期與畫面不符時也可增加動畫舞臺的趣味性。
每個角色/運動元素在運動過程中都會流露出獨特的態度和氣質。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節奏以及舞臺的編排技巧，傳遞貼合角色/元素氣質的動態感知。
在現今動畫工作流程中，考慮到流程效率及技巧利弊，我們可以使用兩者相互結合的方式。關鍵動作描述的是設計師們熟知的關鍵幀動畫的方式（類似AE）。在動畫設計前進行基本運動的關鍵動作提煉，再進行細化，一層層的遞進。底層的關鍵運動越完善，在后續添加細節時才不會耗費大量時間調整。而對于持續動作（逐幀動畫）的技巧，我們可以利用它處理一些復雜效果例如（涉及到運動空間的變化、形狀上的靈動變化等）。
逐幀動畫。
優點：自由且流暢的動態。
缺點：難以把控時間長短、體積大小。
關鍵幀動畫。
優點：清晰、可靠、規范。
缺點：修改成本略高。
跟隨動作指的是元素運動結束后不會立刻停止，會因為質量、慣性等因素，元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發生，主體與附屬部分的運動會因質感、外力等因素產生不同的速率。
當一個人跳躍的時候，自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應著運動的力量感和速度感，利用好跟隨與重疊動作，可以更好地表現角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候，跟隨與重疊的物體運動幅度大，反之則運動幅度小。
真實世界的運動遵循著緩動運動的規律，而并非勻速運動。根據物體運動情況、動態質感去編排元素合適的運動速率。關于運動的速率編排相關內容，可以看看過往的文章-《動效的質感》。
仔細觀察可發現自然界中的運動多為弧形運動的組合，而勻速運動只存在于機械運動中。
在人物運動過程中使用弧形運動增添角色動畫表現力。比如當人物抬頭或轉頭時，通過弧度的變化映射人物的情感，是充滿好奇心的還是沮喪的。
在交互動效中，弧形運動路徑會給予觀者運動表現力較年輕活潑的感知隱喻。設計師可根據品牌調性及產品屬性去選擇運動路徑類型。
當主體在運動時，設計師可通過附屬物運動來輔助表達主體運動氣質。比如人物敲門時，捏緊拳頭的敲（代表生氣）與翹起蘭花指敲的（代表精致）區別。
在上篇文章其實我們有提到影響動效質感的原因之一就是時間，控制好物體的運動時間也是表現良好動畫節奏感的關鍵。
使用「時間偏差」的技巧，可以讓你的動畫更加生動。因為受力、質感等因素影響，主體運動時附屬部分的運動不會同時發生。比如當人物正在打哈欠時，首先是從嘴巴發力，再擴散至五官眉毛。
為保持動效的連續性以及營造自然流暢的交互體驗，適當的使用時間偏差，可避免動效元素變化過程出現空檔期，提升信息傳遞效率減少認知負荷。
通過夸張手法增添動畫表現張力，加強運動元素的吸引力令動畫更有代入感和戲劇性。
動畫設計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果，提升畫面表現力。
一部好的動畫作品一定會有令人吸引的人事物，比如動態氣質或視覺風格等它們都能很好的吸引觀眾。除此之外，如何講好一個故事，通過趣味幽默的故事表達手法也可以增添動畫的吸引力。
通過對十二大基本原則的學習，我將技巧分為以下兩大類：設計技巧和表演技巧。
設計技巧：動畫設計的技法，增添動畫細節令動畫表現更生動自然。
表演技巧：舞臺表演的技巧，提升動畫舞臺全局的表現力。
接下來我們結合上述所提及的動畫原則，根據實際案例進行結合應用。一起來探討下當接到動效設計需求時，我們需要思考哪些點？才能使我們的動效表現力更上一層樓。
假設在項目中我們需要對設計元素（豬豬存錢罐）添加動效以提示用戶已省錢成功的情感氛圍。設計前我們先來分析下元素以什么動態/動作表現會更貼合元素性格?？紤]到豬豬的可愛屬性，采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。
將腳本確定后，我們在腦海里已經有大概的運動畫面。但在進入動效設計前，還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。
在添加動畫細節前，我分享下在項目中經常用到的兩個技巧。
實現擠壓與伸展的方式有很多種，最常見的是直接改變物體的縮放比例或形狀路徑來實現。但在設計項目中我們往往會遇到非矢量的設計元素，利用xxx可實現圖層的彎曲扭曲等變形效果。
質地堅硬的物體受外力的影響較小，質地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復靜止吋肉肉會有一個跟隨&重疊動作（抖動）。在處理這類抖動的效果除了使用常規的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節令物體運動更為生動自然。
當我們去除這些動畫原則后，再去作對比明顯的感知差異就出來了。
根據過往項目經驗，我總結了動效/動畫設計的流程思路。從業務目標的分析到動畫腳本的確定，層層遞進。前期的目標和框架確定后，之后進行動畫原則的梳理及最后的動效輸出。設計師們不妨在項目中嘗試上述的流程思路及原則技巧，將自身動畫的表現力提升一個檔次。
隨著動畫/動效的落地方式愈來愈完善，像Lottie、svga等新型的動畫落地形式所帶來的高品質畫面呈現。設計師們不能滿足于動畫僅僅只是動那么簡單，如何去塑造生動的動畫形象還有不少我們需要考慮的細節。恰好前人總結了相應的原則技巧，幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外，近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關于角色動畫的運動技巧及細節。其中部分技巧并不局限于角色動畫的設計中，下期文章我將分享關于角色動畫的知識沉淀內容。
文章來源：站酷 作者：Fiasc1
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶體驗設計是一個動態領域，每年都會為我們帶來新的趨勢，最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數字世界和現實世界之間的互動方式發生了突然的變化。人們不僅開始在網上花費更多的時間；他們的思考方式和表現方式也發生了不同。
本文主要闡述2021用戶體驗的趨勢，我們相信這將在新的一年里占據主導地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。
我們在2020年UX狀態預測中討論了語音用戶界面（VUI）。如今年所示，語音指令仍然是UX設計中最熱門的趨勢之一?？梢钥隙ǖ卣f，明年不應忽略它。
毫無疑問，到2021年，語音聊天機器人和虛擬助手將繼續流行。用戶在數字體驗方面一直在尋求簡單性和效率。市場需求，高期望值以及人工智能技術的迅速發展使品牌別無選擇，只能在其產品中包含基于語音的功能。
已經有許多企業為廣泛的VUI實施奠定了基礎。例如，星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。
極簡主義可能是當今視覺設計中最明顯的趨勢之一。用戶正在體驗越來越多的網站所有者想要傳遞的關鍵消息。Cookie彈出窗口，打折廣告和各種通知旨在吸引和轉化網站訪問者，但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設計應運而生的地方。
但是，“極簡主義”并不意味著“沉悶”或“原始”。意思是“優雅”和“高效”。盡管必須使用數量有限的顏色，設計元素和明亮的組合，但UX設計人員仍然有很大的發揮空間。此外，元素的功能最為重要，正確突出產品功能并傳達正確信息的能力需要大量的創造力。相反，僅具有裝飾目的的組件正逐漸失去其重要性。
內容，消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦，這意味著網站所有者應努力使自己的UX文字簡潔明了。
負空間是用戶體驗設計的一種大趨勢，它已經脫離了對簡約UI的市場需求。簡而言之，負空間是頁面布局中對象周圍（宏空間）或對象內部（微空間）的空白區域。它已經成為獨立的設計元素，在視覺美學和用戶體驗優化中起著至關重要的作用。谷歌的主頁，蘋果的官方商店以及一些用Webflow創建的網站就是很好的例子。
留出一定的空間，在設計中添加“寂靜的感覺”，必須是始終有意義的。否則，用戶可以將其視為缺少信息。負空間的主要功能是整理網頁，以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。
負空間有時也稱為“空白區域”或“留白區域”。所有這些術語都是可以互換的。當區域中沒有元素時，您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。
在發生COVID-19大流行之后的在線體驗將與我們習慣的在線體驗不同。UX設計以相關方式反映了缺陷。為了使品牌的數字化形象更具關聯性，設計師有意在版面設計中實現了一些“缺陷”。 它可以是任何東西，從手繪對象到構圖或頁面的不尋常元素。
通常，不完美的設計可以很好地證明品牌的身份并突出其獨特性。但是，如果要應用這種UX趨勢，則必須記住一個關鍵規則：必須保持平衡。如果你做得過多，那是行不通的。
中性風格是UI設計中其他兩種大規模方法（擬態和平面設計）的組合，它們通常被認為彼此相對。擬態化是關于模仿現實世界中的物體以及我們與物體交互的方式。
幾十年前，當需要使用超現實元素來創建直觀且用戶友好的UI時，它很流行。垃圾桶就是例子之一。另一方面，平面設計是一個更新的，簡化的概念，圍繞二維元素，極簡主義和鮮艷的色彩。
同質性兼顧了兩者的優點。它使用圖形強度大的元素，陰影和漸變來使按鈕和卡片類似于自然界中的對象，而不是精確地重新創建它們。中性風格不會將現實主義推到極致。取而代之的是，它努力實現淺色和微妙對比度的“柔和”外觀。
在過去大約一年的時間里，同質化一直是UI / UX專業人員中討論最多的主題之一。盡管仍然沒有很多真正的數字產品的用戶界面遵循這種方法，但許多設計人員對該概念感到興奮。像Behance和Dribbble這樣的專業平臺已經包含了許多同態的例子。因此，我們有充分的理由相信，這一趨勢最終將在2021年出現在我們的手機和筆記本電腦中。
視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是，我們仍然觀察到這些用戶體驗趨勢正在逐步普及。
首先，它的使用量顯著增加。如今，3D元素和視差效果已不再是網絡上奇特的事物。它們更為常見，特別是在代表著脫穎而出的時尚和電子商務品牌的網站和應用上。
另一種趨勢是嘗試在一個界面中結合視差效果和3D圖形。使用視差滾動時，網頁背景和前景元素以不同的速度移動。僅憑它就能產生深度感。通過為此添加3D對象，您可以創建一種真正的身臨其境的體驗，并將在用戶的記憶中保留很長時間。
隨著我們設備屏幕的變寬，UI / UX設計中出現了不對稱趨勢。通常，不對稱是野獸派的一種屬性，這是藝術和網頁設計中與極簡主義相反的一種風格。但是，如果與其他殘酷的設計元素分開使用，它可以使您的網站看起來有趣，同時使它保持微妙和優雅。
不對稱布局的UI / UX趨勢通常與其他創造性的Web設計技術一起實現，例如破碎的網格，重疊的元素和分割的屏幕。您也可以將不對稱性應用于排版。如果操作正確，它將使您的品牌信息更加引人注目和令人難忘。
但是，請務必記住，非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進，并幫助品牌強調重要信息。
今天，當我們在互聯網上進入隨機網站時，很可能會看到GIF，微型動畫，動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行，并且使用頻率不斷增長。
除了具有視覺吸引力之外，移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命，使它們更具個性。
如果要在用戶界面設計中使用這種軟件開發趨勢，那么明智地執行此操作至關重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑，從而促使他們甚至比計劃的要早離開網頁。動畫元素也不應使用戶界面不必要地復雜。它們始終必須是相關的，有價值的和平穩的。
信息體系結構是在頁面上組織和構造不同內容的方式。它是以用戶為中心的設計（UCD）的基本要素，旨在使用戶的數字環境更加舒適。與用戶研究和可用性測試一起，構建有效，有用且一致的信息體系結構是UCD流程的必不可少的階段。
為了創建一個實用的信息體系結構，UX設計人員需要對產品的目標受眾，其行為以及使用數字解決方案的原因有深入的了解。用戶應該無需花費太多精力就能獲得所需的結果。因此，在設計過程的線框階段始終必須考慮用戶的目標，清晰的導航和內容表示（包括盲點監視）。
我們創建此文章是為了讓您在當今競爭異常激烈的數字世界中站穩腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網站的用戶體驗。即使用戶期望很高，它們也可以使您的產品在視覺上對目標受眾更具吸引力。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力（無論是精神上還是物理上）。
理想情況下，我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本，并且是檢驗可用性的里程碑。
不幸的是，由于大多數站點和應用程序都提供了用戶可能想要做的許多事情，因此很少能達到零交互成本。大多數時候，用戶必須四處瀏覽，閱讀，可能滾動，找到有希望的鏈接，單擊它，等待頁面加載，然后重新進行整個過程。有時，一個新窗口可能會在現有窗口的頂部彈出，在這種情況下，用戶必須將注意力轉移到新窗口上，也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下，用戶可能需要記住一頁上的信息，然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。
可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說，它們最小化：
閱讀
滾動
環顧四周以查找相關信息
理解提供的信息
單擊或觸摸（不會出錯）
打字
頁面加載和等待時間
注意開關
內存負載-用戶必須記住的信息才能完成其任務
這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如，閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難，而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道，但是如果蜂窩網絡覆蓋較慢，則移動設備上的頁面加載可能會花費很長時間。
許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如，網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。
讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本，并且在啟動Dictionary應用程序后立即開始分析。
啟動應用程序后出現的第一件事是啟動屏幕。
在這一點上，交互成本包括等待幾秒鐘，以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間：
在此頁面上，互動成本來自定位搜索框。幸運的是，搜索框非常顯眼地位于頁面頂部，因此我們可以放心地認為，用戶只需很少的精力就可以找到它。找到后，用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標，因此交互成本也可能會降至最低。
接下來，用戶必須編輯搜索查詢。
當輸入焦點在搜索字段中移動時，自動建議的詞將自動顯示。
用戶必須查看自動建議并確定它們不相關，然后清除當前查詢。他們可以通過按右側的灰色x按鈕（如果他們熟悉iOS規則）來執行此操作，也可以通過按觸摸屏上的Delete鍵來逐個清除字符。
刪除后，用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時，關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。
選擇（或鍵入）單詞“ ceremony”后，用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面：
用戶必須推斷Origin可能包含有關單詞來源的信息。（對于大多數用戶而言，這是一個簡單的推論，因此認知成本很低；但是，如果改用“詞源”一詞，則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩；因此，“來源”是更好的選擇，因為它降低了交互成本。）
讓我們總結一下交互成本的各個組成部分，以找到“儀式”一詞的由來：
等待啟動頁面
搜索
輸入幾個字符
掃描自動提示列表，以查看所需單詞是否在其中
如果否，請輸入更多字符并在上一步中重復
如果是，請通過點擊選擇所需的單詞
找到搜索框，然后點擊將輸入焦點移至該搜索框
閱讀搜索框中顯示的查詢和自動建議
決定查詢不相關
刪除搜索框中顯示的查詢
鍵入或選擇自動建議
點擊搜索
等待結果頁面
在結果頁面上找到相關的詞源信息
向下滾動頁面并掃描內容以查找詞源信息
找到標簽并閱讀
請注意，右側還有更多隱藏的標簽
推斷詞源可能是隱藏的標簽之一
注意到滑動會向右暴露內容
向右滑動
閱讀Origin并將該單詞與目標聯系起來，以找到單詞的來源
點擊詞源
了解“儀式”一詞的來源
如您所見，一個相當簡單而輕松的過程需要很多步驟和子步驟；他們每個人都會產生互動費用。對于某些人而言，交互成本微不足道-例如，記住人們向右滑動即可顯示更多內容，因此交互成本非常低，因為人們在移動設備或Web上已經多次遇到水平滾動?？梢詢灮渌襟E以最小化交互成本；因此，在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣，將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。（當然，選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。）
請注意，對于前面各節中的某些步驟，用戶可以有多種選擇。例如，他們可以按灰色的x按鈕刪除當前字符串，也可以多次使用Delete鍵。或者，他們可以從自動建議列表中選擇建議，也可以在最后輸入字符串。
人們如何決定采取哪種行動？答案在于預期效用的概念：
預期效用=預期收益–預期交互成本
用戶嘗試最大化一項操作的預期效用：換句話說，他們權衡了每個操作的收益和成本，然后選擇收益與成本之間最佳平衡的方案。
當有幾種方法可以實現具有相似利益的相同目標時，用戶通常傾向于選擇使估計的交互成本最小的操作。
例如，許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞，而是可能會再鍵入一個（或幾個）字符，直到可見“儀式”一詞為止，因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。
這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標，則除非與初始站點進行交互的收益確實很高，否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子，如果用戶真的想購買Apple電腦，他們可能會堅持使用Apple的網站，因為他們不太可能在其他地方購買。在這種情況下，用戶的動機確實很高，因此他們可能愿意忍受很高的交互成本。但是，如果用戶要購買燒烤架，則可能不在乎是否從Home Depot或Lowe's或其他站點購買，并且會離開互動成本高的站點。
營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益；可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。
交互成本是可用性的直接度量。實際上，該概念早在人機交互時就被引入，以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。
從長遠來看，快速評估設計的交互成本可以節省大量資金，因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間的比較工具：通常，將交互成本最小化的方案具有更大的成功機會。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“今天吃什么啊？”
“不知道啊，看看大眾點評，哪家店比較靠前”
“一會去看什么電影？”
“我看豆瓣上，這部片子評分特別高，我們去看這個吧”
當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，面對的選擇越多卻越不知道如何做決定，或者當下做了決定覺會一直思考做的這個決定是不是最好的，選擇困難變成了大眾病。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？排行榜僅僅是用來降低用戶的選擇成本，為什么商家對排行榜也趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能都不知道，我們的生活正在被各種排行榜所支配！
排行榜的本質是一個沒有感情的信息篩選機制，某一相關的同類事物之間通過比較，反映同類事物客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應降低用戶自己的選擇成本，準備快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量和平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名。那這一切背后的原理是什么？
一個完整的排行榜需要平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。
在沒有各種應用前，當我們決定購買什么東西或去哪家消費，前期需要花費大量的人力、物力，搜集相關的信息進行整理集合后，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。
選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助降低選擇成本的同時，也會影響這用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）
比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要找到我身邊的耳機發燒友或數碼電子方面方面的內行人，收集信息建立備選集，但由于京東在電子設備方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東完成了前期的信息搜集及備選集建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。
在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。
無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了相通的談資。
在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感，滿足自己的社交需求。
過年期間各家app紛紛推出自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并分享到自己的朋友圈。在我們的平常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要了解自身在大數據下的自我確認，通過各種各樣的榜單，判斷自身的能力、情緒、價值等，來達到自我認同，否則就會感到焦慮不安。
加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。
我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，一起參與討論。
無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？
對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下。
從我們記事起，我們對世界的認識來自自己的父母或老師，而這些教導我們什么是對、錯，對當時的我們來說是權威的化身。長大后我們對于權威的認可更傾向于某一領域的專家，比如：醫生、律師、教授等。認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究問題的工作，做出更輕松的決定，雖然不一定是正確的。
搜索我們會第一時間想到百度，影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？
平臺權威性意味著說服力和影響力，在減輕用戶的決策壓力的同時，影響用戶做出平臺所需的決策方向；
每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度
排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值
平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。
在平臺完成建立權威性開始利用排行榜進行商業變現時，比如百度、58的競價排名，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。
上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。
由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。
而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。
排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。
對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。
不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。
當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。
面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。
在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。
在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。
知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。
而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。
首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。
其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。
用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）
當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。
沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。
在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。
平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。
朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。
不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫?，F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。
相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。
排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。
好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。
當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。
有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。
得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。
排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。
純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。
相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。
上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）
每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。
人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。
因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。
說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到）
榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；
信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。
排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。
文章來源：站酷 作者：9號自習室
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶的體驗感對于一個產品來說，是至關重要的。一個好的產品能夠充分照顧到用戶的感受，從而擁有大批的忠實用戶。用戶體驗地圖是幫助產品設計者站在用戶維度思考體驗優化，提升用戶體驗的重要工具。
那么，應該如何打造用戶體驗地圖及如何落地呢？我們在本文給出了解答。（本文對用戶調研、用戶行為路徑、使用場景等也做出了詳細解析）
它以可視化的形式，來表現一個用戶使用產品或接受服務的體驗情況，來發現用戶在整個體驗過程中的問題點與情緒點，從中提取出產品的優化點。
對于1-∞的產品來說，用戶體驗地圖是用戶增長策略的一部分，是產品優化的重要工具。
用戶體驗地圖一般由以下幾個部分組成：
用戶體驗地圖的組成部分大同小異，可以根據自身分析內容增加或簡化。小伙伴可以保存這張空白模板，直接拿去填內容哦~
我們給出了簡潔明了的回答：
背靠著中國鐵路總局，12306在基礎票務預訂服務上有著得天獨厚的優勢，但基于用戶日益增加的多樣化需求，以及越來越多的用戶愿意為優質體驗買單，競爭激烈的OTA們日益精進，與官方12306形成鮮明對比，本次優化就圍繞12306流失最多的年輕用戶群體展開。
本文以12306為例，主要針對購票流程（核心功能），提升交互易用性和用戶體驗，演示用戶體驗地圖如何落地。首先我們來看一下用戶體驗地圖的原型模板。
（上圖建議保存）
根據地圖原型的ABC區域，分別對應著A區的用戶特征與需求，B區是用戶行為、思考、情緒，以及C區的總結分析。A區+B區得出C區，A和B都基于用戶，所以，了解用戶——是梳理用戶使用問題的基礎和第一步。
經過我們團隊的經驗總結，得到繪制前的流程步驟如下圖，下文會拆分步驟一一講解。
體驗地圖的“用戶”不是主觀腦補出來的，而是通過定性調研和基于數據支撐所得出的，所以收集用戶的信息是十分必要的。
以下我們通過用戶群體數據和問卷調研數據（包括用戶畫像）來確定用戶模型。
本文根據以上數據，僅鎖定一線城市的主要用戶群體，也就是高線年輕人群的購票流程優化。
籠統的“對某類用戶使用產品的情況調研”是無法提供有價值的調研內容的，調研目的一定是顆粒度可細化的存在。
12306平臺的下單耗時長，年輕用戶流失率上升，對官方軟件槽點頗多，品牌影響較為負面。本次調研，主要針對年輕用戶在平臺的購票路徑，分析該用戶群體，在下單過程中的操作節點與關注點，探索用戶流失與差評的原因。
我們把社會屬性相關的樣本數據按不同維度歸類，劃分用戶人群。比如按年齡、行業、職位等維度的典型特征，可以將12306APP的主要用戶劃分為：在校學生、企業白領、自由職業。
再加以問卷結果描述，得到了高線年輕產品使用者的虛擬畫像。
在列問卷內容時，要注意12306是火車購票工具類軟件，用戶目的明確——剛性需求，所以問卷無需過多挖掘需求，而是鎖定調研目的，研究APP體驗本身，精準投放顆粒度較細的具體問題。如下：
團隊花了2天時間，總共發了335份問卷，回收率80%，拿到了268份。圖表較多就不詳細展示過程了，重在方法。
根據統計結果，我們最終總結出了下列重點問卷結論：
把這些痛點、滿意點，包括用戶實際接觸的界面或功能模塊，都歸納記錄下來，方便后續將這些痛點進行優化改進。
保存以上部分的相關數據和結論，我們已經了解了用戶（進入角色），接下來要確定用戶體驗場景了（模擬人生）。
在做使用場景前，先通過產品設計者視角梳理出產品目前的用戶行為路徑，這個步驟的主要目的是找出復雜節點，降低操作成本。
它需要我們對操作流程進行拆解，將一個流程拆解成幾個階段，階段又可以拆解成具體的操作節點。這樣一來，我們可以分析每個動作節點存在的必要性。
根據上圖的4步法，第一步——我們在確認主流程的情況下，羅列所有操作節點：
一定不能怕麻煩，用戶所有的動作節點都要羅列。
然后我們要找出復雜的操作節點，也就是可以優化用戶操作的節點，當然也不能主觀地“我覺得”，用交互量化的方法可以快速幫助我們找到問題點：
1. 把每個操作交互定一個數值，即為操作成本。越是高階越是隱藏的交互手勢越復雜，所謂的“交互成本”也越高。這里我們規則為：
2. 通過簡單的加減計算，就可以直觀地看到復雜節點在哪里。
3. 通過計算，我們能夠直觀地看到用戶操作最繁雜的部分集中于“選擇站點城市”“車次查詢”“選擇乘車人”這三個操作流程中。此時，重新審視這幾項繁雜操作節點，讓用戶在更少的步驟內完成操作是我們的目標，能一次點擊完成的操作絕不讓用戶點擊兩次。
4.降低操作成本，可以從2個方面入手優化：對于復雜的節點，降低操作難度，用簡單的操作替換復雜的；對于可有可無的節點，大膽地刪除，減少操作步驟。
（由于精力有限，這塊內容暫時不過多展開，因為還涉及很多知識點，以后慢慢講解。當然，感興趣的同學也可以自行查找資料，或在文章下方評論交流哦~）
明確了目標用戶后，接下來需要我們發揮共情能力，代入用戶視角走查產品。
從“帶著需求”來（我要買車票），到“完成目標”（買到票）走的核心場景路徑，梳理出來粗顆粒度的故事場景 。
【舉個栗子】：
場景的梳理，先從顆粒度大的骨干場景出發，舉個栗子：假如我們起床到公司這個場景，可以回想一下，在整個過程中我們經歷了哪些大的階段？
——經歷了：起床—洗漱—出門—路上—到達。
基于大的階段，我們可以繼續拆分出顆粒度較小的二級故事場景，比如“洗漱”還可以拆解：換衣服—刷牙—洗臉—梳頭。
拿到實例中，12306的購票流程是：查詢車次—篩選車次—填寫乘車信息—提交訂單付款—買到票了
切忌在使用場景時流程顆粒度過細，忽略用戶使用目的。
【加餐知識點】
這里先講解一下，場景設計主要分為2類：一是挖掘需求，挖掘用戶使用目的及動機；二是研究需求，在已有需求上深入研究和優化。
12306是從1-∞的出行工具類產品，用戶的使用目的非常明確——買車票，因此使用場景一定是圍繞【研究需求】展開。
運用4W1H場景分析法，我們得到用戶使用場景：
在已經了解用戶和確認了用戶使用場景的基礎上，根據以上得到的結論和機會點等資料，開始繪制用戶體驗地圖。
文章開頭拆解的組成內容還記得嗎？
現在召集團隊不同崗位的人員，共同努力填補網格空白處。最好從上到下從左到右開始，不用強求全部填滿，因為用戶體驗地圖并不是一錘定音的，它是不斷分析和反復更新迭代的。
我們得到了用戶體驗地圖成品：
用戶體驗地圖是產品用戶增長的策略工具之一，繪制完成后根據地圖針對用戶體驗情緒與機會點探索解決方案。
繪制好體驗地圖后，工作并沒有結束，還有2項重要的工作：
優化機會點：展開頭腦風暴，討論是否能有最佳方案，來滿足用戶的目標，提升用戶滿意度、優化體驗
安排后續工作：按照情緒曲線、機會點價值大小，梳理優先級，安排后續工作
然后根據用戶體驗地圖，按照用戶情緒的低（解決痛點）、高（放大爽點）、中（思考分析），分別探索優化。
把所有問題點按照上述分類，首先解決用戶情緒最焦慮的痛點問題，其次思考是否能把情緒高點繼續優化到極致，讓用戶更嗨，而用戶情緒平緩的地方，要研究分析，繼續思考優化空間。
· 中轉功能操作繁瑣，推薦方案不夠智能——減少交互步驟+增加智能方案推薦
· 視覺層級冗雜、票價信息不直觀——F型分析法優化+增加票價顯示
· 列表頁排序算法升級（與產品開發相關，不做案例展示）
我們增加了智能方案推薦，并把中轉車次與直達車次劃在同一頁面，優先展示直達車次。極大地增加了用戶操作的易用性，可直觀對比，減少頁面跳轉和加載等待時間。
通過多稿權重對比，在信息層級、功能突顯和視覺樣式中，擇優選擇了最終稿。
復雜節點降低操作成本，切換動效能直觀看出閱讀效率和易用性的提高。
通過F型視覺模型和十字交叉法梳理了信息層級，極大的提高了閱讀效率。
日期選擇由展開點按切換改為滑動切換，提高屏幕利用率的同時，更方便用戶操作。
——情感化設計，魅力型功能，讓嗨點更嗨。
情緒中線以下，都有優化空間。比如，
添加乘車人操作重復、耽誤搶票——默認常用已選+頁內抽屜拉起
篩選功能視覺較弱、觸點易錯——增加視覺識別與觸點面積
……
這是一部分可以不斷思考打磨的空間，雖然緊要程度低于用戶情緒低點，但是花時間將產品從滿足80%的用戶到滿足99%的用戶，即使在大多數人看來是一種性價比很低的行為，但卻是提升用戶體驗的絕佳方式。這也是大廠產品體驗良好的原因。
文章有點長，感謝閱讀。下面概括了一些文中的方法論知識點，方便讀者回顧。
市面上有很多關于產品體驗地圖的文章，但多數是基于已有產品的劣勢去直接繪制地圖，繪制地圖并不是目的，繪制好體驗地圖之后怎么分析優化才是目的，用戶體驗地圖本身只是一個可視化工具。我們努力去剖析過程、記錄方法論，希望初學者能夠知其然并知其所以然。
文章來源：站酷 作者：挖設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
01 什么是用戶畫像（what）
02 B2B用戶畫像的特色（what）
03 為什么要構建B2B用戶畫像（why）
04 如何構建B2B用戶畫像（how）
05 B2B用戶畫像的傳播與使用（how）
本文嘗試通過what-why-how的結構，結合自己的工作做一些實踐，和大家分享下B2B用戶畫像的整體概念框架以及構建方法。出于對我司數據的保密，無法直接分享給大家細粒度且對應的數據，所以分享過程中我會結合業界和其他前輩在網上分享的內容和數據作為案例，如有不足和錯誤之處，還望大家批評指正。
那在講B2B用戶畫像之前，我想先來說說用戶畫像的概念，在看一些文章時發現有些作者混淆了用戶畫像的兩種概念。可能很多人沒有注意到，用戶畫像這個詞包含了2種不同的含義，一種是User Persona，一種Use Profile。
User Persona是對一個用戶群體的整體抽象。這一概念最早源于交互設計領域，是Alan Cooper在《About Face：交互設計精髓》一書中提到的研究用戶的系統化方法。“贏在用戶”這本書將其翻譯為“人物角色”，目前業內使用“用戶畫像”這個術語。表達的意思一樣，是真實用戶的虛擬代表，是在深刻理解真實數據的基礎上得出的一個的虛擬用戶。
User Profile是對每一個個體的畫像，是在產品用戶量有一定規模以后進行的。利用用戶的行為數據或者填報的資料進行的用戶屬性標簽提取，更多被運營和數據分析師使用，它是各類描述用戶數據的變量集合。在大數據時代，企業通過對海量數據信息進行清洗、聚類、分析，將數據抽象成標簽，再利用這些標簽將用戶形象具體化的過程。
兩類畫像的對比如下圖：
明確了兩種畫像的區別，那本文我們就重點談談User Persona類型的B2B用戶畫像（后續文中簡稱“用戶畫像”）。至于User Profile，比較適合用戶體量大的產品，而B端產品除了頭部企業，很難達到這個量級，無疑用User Persona更合適，本文就不再贅述。
不管是B2B還是B2C產品也好，不論是商業層面上（比如在資源有限情況下聚焦關鍵用戶類型）、或是在產品層面上（更好理解用戶想要什么，確定功能的范圍和優先級），建立用戶畫像的本質都是為了輔助一些決策。
不同之處在于C端面向的是大量且分散的個人用戶，用戶畫像的主要目的是把用戶聚類，更好的了解不同類型用戶的特點和偏好。而B端產品，面向的是企業級用戶，滿足的是企業的管理或經營需求，關注的是成本和效率。畫像的目的是針對業務不同環節中、具有類似任務的用戶進行更立體、豐富的需求整理和挖掘，往往和角色相關。
其決定了B2B用戶畫像的幾個特點：
伊查克·愛迪思（IchakAdizes）提出了企業生命周期理論，企業的發展大致有初創期、成長期、成熟期和衰退期四個階段。不同階段的企業，其組織形態、關注點、管理方式等都會有所不同，產品需求側重點不同，用戶畫像的方向和調研方式也會有不同。
初創期：產品立項階段
這個階段往往指的是公司剛成立，此時產品、企業文化尚未成形，處于客戶積累階段，較為關注引流。需要通過用戶畫像定位細分市場、產品模式及功能，這個階段需做定性調研了解目標用戶，初步形成用戶畫像為需求做底層支撐，這個階段的用戶畫像顆粒度可以粗些，旨在幫助團隊快速就“我們的用戶是誰”達成共識。
成長期：產品運營中（已有數據積累）
這個時候產品已有demo或已上線迭代，產品處于完善、升級的階段?？墒褂谩?strong>數據挖掘+定量篩選+定性豐富”的方式，結合項目的已有數據，使用定量篩選用戶，做大量微觀且具體的用戶調研，基于后臺、第三方平臺監控發現問題，定位問題關鍵及原因分析，優化產品功能及運營模式，再通過調研訪談了解具體的行為細節和態度。該階段的用戶畫像可用來驗證問題、完善或發現新的機會點。
成熟期：產品相對穩定
客戶資源相對穩定，可能已有一定的規模，內部管理需求增長，市場地位趨于穩定，日常工作也大多以維護為主。且現有增長點已遇上了瓶頸，用戶活躍將不可阻逆地緩慢下降，即使你做再多產品優化、燒錢運營都無法改變產品終將走向衰退的命運，時間問題。企業急于尋找突破口和新的增長點，用戶畫像又將被賦予新的使命：基于用戶畫像進行“新增長點”的分析，定性挖掘藍海，再定量進行驗證。
衰退期：產品活躍度快速下降
進入到這個階段，說明產品沒有成功轉型。這時候再做用戶畫像的意義其實不大，如果一定要做，除了提高回流率、挖掘增長點外，可以定性了解原因，調整產品。
不同于C端產品的的用戶單一性，B端產品的用戶畫像對應的不是一個個體，而是一個組織或機構，同時涵蓋組織機構中不同的人員。產品面向的使用對象可能從普通員工到企業高層，覆蓋銷售、技術、行政人事部分等，基于工作場景不一樣，對產品的需求可能也大相徑庭。
以一個CRM系統為例，一個復雜的B端產品可能會涉及以下四種角色的用戶：決策者、主要使用者、次要使用者、間接使用者。如下圖所示：
決策者：下決策購買產品或服務的人，可能是業務線負責人，也可能是公司董事長、CEO，他們常常不是產品的使用者，使用頻次低甚至完全不用，他們通常都是從公司的整體利益出發，更關注產品能否給公司業務帶來幫助，降本還是提效了。其評價某個功能的好壞，往往與使用者的感受是相悖的，如釘釘的“DING一下”,他們并不太關注使用過程、體驗，更關注產品的核心價值，將利益最大化。
滿足決策者的需要是做好B端產品的前提，也是制作用戶畫像所要明確的方向；很多體驗做的不好、難看的產品之所以也能在B端市場有一席之地，就是因為滿足了企業的需要。比較理想的情況下，團隊對目標客群有一定深入的研究，形成趨于標準化的產品，就能打動目標客戶群的大部分決策者。
主要使用者：真正頻繁使用產品的人，也是產品/設計師想要提升產品體驗要瞄準的人群
他們可能更關注產品的具體使用，是不是易用，有沒有幫助他們更便捷地完成工作，有沒有提高他們的工作效率。主要使用者是最容易識別的，以CRM系統為例，如果沒有銷售日常在系統中錄入客戶數據，管理層就無法查看成單量、進度等他們所關注的信息。
次要使用者：使用產品頻率相對主要使用者更低，用到的功能也比較少，只在某個中間流程涉及少量操作。如CRM系統中人事、財務會涉及到其中錢或出差的審批對他們而言，主要需求是能快速找到自己的任務并完成就可以了。
間接使用者：不直接使用產品但會被產品影響的人群，產品和設計師在設計過程如果有資源和精力能兼顧他們的需求和體驗，那就太貼心了。如審計、政府人員，屬于不緊急，非必要需求。
B端用戶使用場景多和業務形態密切相關，產品通常要解決的是某類角色工作時發生的問題，所以不同于C端用戶畫像，從用戶視角出發，關注用戶個人的場景、訴求、痛點和情緒，核心是滿足用戶的需求，關注用戶的年齡、性別、收入、個性、習慣、消費模式等標簽。
但是在B端產品中，我們拋開了用戶作為個人存在的標簽，我們更關注用戶所代表的角色，他的崗位職責是什么，它在工作場景中需要完成哪些任務，這些任務要做什么的，其崗位職責決定了它完成任務的目標、場景、使用什么工具去，需要跟其他角色配合嗎等信息。
所以B2B畫像更關注角色的分類、工作/使用場景、用戶目標、操作鏈路、角色協同等信息，很難看到類似這個人是不是已婚，小孩多大這些不知道如何應用于產品設計的內容。而在一個C端產品用戶畫像上很少看到有哪些讓他壓力山大的KPI等信息。
仍然以CRM系統為例，其主要使用者-銷售的目標就是用該系統錄入商機、線索等，然后根據數據情況制定客戶溝通回訪計劃等，聚焦的是該系統能否讓他很好的履行了其崗位責任。和他這個人在哪個城市、已婚未婚等個人特性是無關的。
B2B產品面向的是企業用戶，滿足的是產業鏈中各企業的經營需求，這時B2B畫像應該具備行業、客戶屬性這一維度；但是最終購買者、使用者都是企業中的某一角色，這決定了B2B畫像還有角色這一維度。所以，小編認為，B2B用戶畫像是企業和多個核心角色共同構成的畫像，建立B2B畫像，需要客戶（企業）畫像和角色畫像兩部分的信息。
1）客戶畫像
客戶畫像指的是使用B端產品或服務的企業用戶，具有行業特征、企業特征及角色特征。其的目標是促成銷售，主要用來幫助銷售/運營人員他們快速定位目標企業，幫助他們更好的認識我們客戶是什么樣的人，讓他們的工作更有方向。
一個典型的客戶色畫像會包括：
基本信息：外在的標簽，如所處行業、地域、人員規模、收入規模（年營業額）
業務模式：線下的實際業務流程-視行業而定，如商業模式（靠什么賺錢）、業務模式（業務怎么運作）
組織機構：自上而下都有哪些機構，彼此之間的關系。
關鍵角色：各個機構里有哪些崗位/工種，決策鏈上有哪些角色、誰才是有價值的關鍵角色，角色話語權。企業的關鍵決策人隨企業大小而不同，一般中小型企業都是老板、合伙人等。而大型企業采購B端軟件都是需要經過內部流程的，最終審核人是老板，但其中影響決策最大的往往是商務經理負責人。
2）角色畫像
B端產品雖然面向企業，但是最終使用執行的還是人，這些執行層（終端使用者）也是產品的檢驗者。在企業決定購買產品之前，執行層沒有話語權，但是在續費的時候，他們的話語權比重會開始顯著提升。
因此在我們的產品設計階段，會更關注執行層的角色畫像。當我們討論產品、需求、場景、用戶體驗的時候，往往需要將焦點聚集在這類人群上。
一個典型的角色畫像會包括：
基本信息：如角色名稱、照片、角色/工種、平臺偏好、文化水平、辦公場地、使用頻次，角色名稱以及照片是為了更有代入感的個人情況說明，但值得注意的是，這里的情況更多圍繞職業情況展開，比如工作年限，工作職責，能力維度等，那些在C端中常見的家庭情況，幾個孩子什么的統統不重要。
用戶行為驅動：用戶的工作目標、工作任務和考核指標，B端角色通常是企業員工，為了薪酬，有一般都會有結合任務而完成的考核指標，了解考核指標可以在設計過程中更明確知道哪些內容是用戶最關注的東西；
使用場景：工作的時間、地點及工作內容是什么，使用場景是重要但容易被忽略的一個內容，尤其要搞清楚使用產品的場景有哪些、用戶平時的工作流程是如何的、主要使用什么功能?？捎靡粋€真實、普遍、易懂的故事勾勒一下
使用期望：日常工作面臨的挑戰和痛點，期望獲得的幫助。
角色畫像和客戶畫像之間沒有直接關系。因為目標不同，所以會有不同的用戶細分：客戶畫像的目標是成銷售，獲取利益；角色畫像是為了解決問題和為用戶創造價值，進一步為公司創造價值。但是在刻畫B2B用戶畫像時，如果只考慮執行者的話，沒有客戶畫像作為指引、摸清決策者的特征與行為，你的產品功能或者體驗設計上可能就會出現嚴重偏差，甚至方向錯誤。
產品和服務只是企業將價值傳遞給客戶的一種工具和媒介，無論產品形態如何，其本質都是在解決客戶的問題。如果沒法滿足客戶的業務需求，基本上該產品對客戶是沒有價值的?？蛻舢嬒褡饔秘灤┊a品生命全周期，產品/市場/銷售較為關注，它的價值主要體現有三點：
對產品：明確為誰服務，快速的了解客戶的需求和狀況，確定產品功能設計，學會識別用戶的解決方案和用戶在場景下的訴求，不斷迭代調整產品；
對市場/運營人員：建立對客戶盡量全面的了解并基于客戶畫像確定營銷內容、營銷策略和渠道選擇，使產品的服務對象更聚焦；
對銷售人員：幫助銷售進行客戶篩選，找到有效客戶，提高轉化率，確定業務方向和銷售打法。合理配置團隊，完成KPI。
客戶畫像越早建立越好，但是務必注意控制深度和成本，因為不同階段的企業其側重點有所不同。在初創期，產品團隊可以通過關注典型客戶來積累定性數據，從而低成本搭建客戶畫像；而到了成長期和成熟期，在擁有大量客戶數據的前提下，企業可以逐漸過渡到使用定性&定量相結合的方式來形成更為清晰的客戶畫像。
以前業界有種說法，做B端，能用是第一位，用戶體驗不重要。所以除了一些成規模的SaaS公司，設計師在B端幾乎無用武之地，成了組件化的搬運工、工具人。所以大部分的企業在跑馬圈地時期是不注重用戶體驗的，企業有客戶畫像，卻未必有角色畫像。
還說用戶體驗不重要的人，可以看看有贊CEO白鴉的公開說明。
圖片來源于網絡
2020年，疫情為企業級SaaS帶來流量，在今年2月宣布延期復工后，釘釘搜索量激增數倍，無論中大型企業還是小微企業都紛紛加入了遠程辦公的行列，協同辦公SaaS獲得了大量的“試用客戶”，加快了市場激活的進程，但接下來，流量轉化和用戶留存成為后疫情時代的核心關注點。
后疫情時代，對企業來說，改善產品用戶體驗，了解使用產品的終端用戶，構建角色畫像愈加重要。而角色畫像作為產品和設計師比較關注的畫像，有以下三點價值：
設計前：幫助確立設計目標、設計策略與準則
設計中：解決架構混亂問題，明確需求功能的合理性和優先級；解決需求爭議問題和溝通問題，與團隊成員就服務目標達成共識，
設計后：解決可用性測試問題，幫助我們鎖定合適的測試用戶；
總結一下就是角色畫像是產品的根基，客戶畫像是產品的外延生命力的象征，兩者相輔相成。
對于這個章節。我將以我所負責的一款企業產品為例，來講述用戶畫像的創建過程。在這個項目中我們通過定性研究創建了用戶畫像，當然如果必要，大家也可以在后期再通過定量研究對得到的用戶畫像進行驗證。
用戶畫像的創建可分為以下幾個步驟：
B端用研和C端有一點不同，企業用戶的使用場景基于業務，背景復雜、角色多樣、使用工具特殊（如企業自有后臺系統）等，導致無法在可用性實驗室中切實地模擬出來，所以我們得接近用戶、基于業務場景去了解用戶。
小編大致總結了一下，B端用研有以下3大痛點：
信息獲取難：B端產品主要針對用戶工作和業務開展，一般都是強制使用產品不存在“挑剔”的選擇空間，導致用戶的反饋就非常少，信息的獲取壁壘較高。“深度訪談”是最核心也是獲取信息性價比最高的一種方法，但是出于對信息用途的不了解，對商業隱私、生意經驗泄露的擔憂，B端用戶可能不愿意配合調研或不信任你。
業務復雜：缺乏行業經驗，難以理解業務，這會讓用研對象覺得你不專業，仿佛雞同鴨講、對牛談琴。而且在不理解業務的情況下，設計師在訪談過程中會過于關注基礎業務，無法進行更深層次的訪談，采集的信息并非用戶的真正需求。
視角不同：設計師視角容易缺乏框架性思考，搞不清每個業務模塊/功能的邊界以及它們之間的關系，不能站在用戶（決策者、使用者）的角度思考問題，以至于被用戶牽著鼻子走，用戶說什么就是什么，能和用戶產生共鳴的部分極少。
俗話說“磨刀不誤砍柴工”，針對以上三大痛點，項目伊始有必要進行一輪全面的桌面研究，幫助我們快速建立對行業的全局認知并了解業務，另一方面，也有助于我們更好地和用戶進行溝通。
研究內容：
研究途徑：
此處有2個注意點：
針對以上2三點，下文將依次展開說明。
1、如何篩選出目標用戶？
Cooper指出，不能為超過3個以上的用戶畫像設計產品，這樣容易產生需求沖。當有多個用戶畫像的時候,需要考慮用戶畫像的優先級。前面講B2B畫像特點的提到過，由于是企業產品，僅僅產品中一條業務線，角色也是多樣的，所以在篩選目標用戶時有一點尤其要注意：應識別出關鍵的用戶畫像。
以我公司的招聘業務為例，為了便于大家在宏觀上確定什么樣的企業是我們主要的目標用戶，我們的做法是按企業類型定義了三個KA客戶畫像。由產品、市場、以及各組leader一起來完成用戶畫像的優先級排序工作。確定用戶畫像優先級時，我們可以主要從以下幾個方面來考慮：
然后再找關鍵的角色畫像，即角色畫像中的決策者和主要使用者，次要使用者和間接使用者因時間、金錢的關系，現階段不做考慮。我司產品的客戶主要是勞動密集型企業，作用是幫助客戶解決藍領用工問題和發薪合規問題。以招聘業務線為例，想把這個產品賣給某企業，首先要打動該企業的HR總監，再說服CEO/董事長，再讓招聘部員工-HR試用。
那么這條決策鏈上的關鍵人就包括了HR總監、CEO/董事長、HR。那在這個案例中，HR總監是決策鏈的關鍵人物，因為只有他認可之后，才會申請購買或在CEO面前夸這個產品。而HR是最終產品的使用者，雖然他們在企業購買產品前沒有話語權，但是在續費階段，他們的話語權最大。對于處于成長期的產品來說，我們現階段的調研目標也是為了獲取HR總監和HR兩類角色的用戶畫像，每個角色訪談4～6人；
2、畫像維度有哪些？
篩選出了目標用戶，那畫像維度有哪些呢？。以本案例為例，在本次用戶畫像的設計中，因我司產品處于優化迭代階段，做用戶畫像的目的是了解用戶的使用情況，比如各功能的使用頻率、使用中遇到的問題，定位問題關鍵及原因分析，優化產品功能及運營模式，同時也希望通過了解用戶的具體行為細節和態度，發現新的機會點。
對于企業，主要了解其企業規模、行業屬性、業務流程、組織架構、機構里有哪些崗位/工種。這個信息主要由產品或銷售采集，應該前置于角色畫像。而我們第一步的業務研究中，很大一部分內容也來自于此。
對于決策者，主要向其了解企業管理、業務等方面的需求信息，對于本產品決策者關注的是營收增長、效率提高還是減少成本等方面的問題。
對于主要使用者，側重了解用戶特征、產品認知、使用場景與痛點，各功能的使用頻率、使用中遇到的問題等
根據前面前文提到的的用戶畫像構成要素和自身業務情況，有選擇性的摘取，最終梳理出本案的用戶畫像維度如下：
明確了調研對象后，就可以展開調研了。一般有三種方式：
定量和定性調研究雖各有優劣，但定量較為昂貴、費時，也需要有精通統計分析的認為協助，在B端調研方式中并不太實用。對大多數團隊而言，定性是性價比最高、最合適的。它不僅提供了“用戶是誰、他們想要什么”，還是基于數據、經濟高效較為快捷的一種方式。
采用何種研究方法，主要根據企業生命周期、研究目的、項目時間和經費等進行綜合考量，本案中我們選擇深度訪談收集一手資料。
在明確目標與方法后，需要對整個研究進行細化，制定具體詳實的執行計劃并開始招募用戶采集資料了?？赏ㄟ^前中后三個階段性策略的來進行訪談。
1. 訪談前：搭建信任基礎
在構建用戶畫像的step 1中，我們已經對業務和要訪談的用戶角色有了一定的了解。只需在訪談時間的4-7天前，根據確定的畫像維度來設計訪談大綱。設計大綱的目的是避免訪談過程中對話內容發散、混亂而無法收集到足夠多的有效信息。
需要注意的是：大綱需要針對訪談的每一條需求，做到詳細、縝密，同時要考慮用戶對訪談題目的理解，可根據產品使用順序，由易到難、客觀到主觀、概括到具體的順序展開，比如產品功能的使用頻率就可以作為一個客觀問題放在問題的開始。且要考慮訪談的時間，因為訪談的時間不易過長，所以訪談提綱也不能過于冗長，典型的訪談大綱模板如下圖所示：
并提前將訪談目的告知受訪者，能讓他們看到訪談的直接或間接價值（提高工作效率、降低成本等），也就能更好地建立雙方的信任。因此，我們需要提前確認整個訪談的規劃，并主動將相關信息告知受訪者，包括訪談的時間、地點、方式、目的、流程，還有過程中可能涉及的問題、后續發放的獎品等。
2. 訪談中：表現專業特質
開場介紹
跟C端訪談一樣，正式訪談開始之前的開場白非常重要！除了再次介紹自己（不管是什么崗位，此刻我就是用戶研究員），說明這次訪談的目的，一定還要強調訪談的隱私性和數據安全性，畢竟他們面對的是真金白銀的生意。
暖場
在正式訪談前，可以先和用戶閑聊2~3分鐘，通過一定的溝通活躍氣氛，讓用戶更加放松，同時增強用戶對我們信任。暖場和開場介紹可穿插進行，沒有絕對的先后之分，在訪談者自我介紹完成之后，也可以讓被訪者進行自我介紹。
一般問題
一般問題是指一些比較基礎性問題，用戶不需要進行太多思考即可回答，比如“你最常用的功能是哪些”、“使用時間多長”。
深入問題
深入問題是用戶行為和想法更加深入的探索，會更關注用戶行為細節和行為背后的動機。一般在問這些問題時，訪談者需要不斷地詢問用戶為什么，直到用戶無法繼續回答。深入問題是整個訪談的核心，也最容易挖掘到用戶需求和痛點。
回顧與總結
每部分的訪談結束后可進行簡單的小結。訪談者通過回顧訪談過程對用戶的行為和態度進行客觀闡述，一方便有助于訪談者梳理思路，另一方面讓用戶對訪談結果再次確認。
3. 訪談后：實現長線共贏
最好和訪談對象建立長期聯系，尤其是一線業務人員。人和人面對面聊過后，會產生基本的信任感和好感，要借助訪談的機會，拉近和業務人員的距離。如果后續項目中遇到問題，想獲取最真實的一線反饋，可以聯系之前的訪談對象，尋求幫助。
1）根據角色對訪談對象分組
將用戶訪談后得出的重點信息寫在便利貼上（或Excel表中打印后切片），設計師需要根據產品用戶角色不同，將受訪的用戶歸類分組，如HR和HR總監。
2）找出行為變量
分組后，需要識別關鍵的行為變量，將調研到的用戶與行為變量進行一一對應，并識別差異化行為模式。如下圖所示
3）映射訪談對象與行為變量的關系
再將不同的角色間同類行為模式歸納（合并同類項），進行行為描述。此處需注意以行為變量為依據進行用戶對應時，不必追求絕對的精準，只要相對能映射清楚即可。梳理完后，觀察可發現某些用戶群體聚集在幾個行為變量上，它們構成了一個顯著的行為模式，由此聚類出某個角色類型。依此類推，可以發現幾個不同的行為模式。為保證全面，映射完最好遍歷一下，檢查是否有用戶或變量的遺漏。
4）找出共性行為模式
完成映射后，尋找在變量軸上的對象群。梳理完后，如果一組對象聚集在多個不同的變量上，則可以代表一類角色存在顯著的共性行為表現（通常每類角色會有2～3個共性行為）。共性行為能幫我們識別標準化產品需要滿足的用戶需求，而差異化行為可以根據企業需求做定制化服務，一個B端產品是不太可能滿足所有用戶的需求的。
一旦我們找到共性行為，就可以創造用戶畫像了。梳理出每類角色的行為、目標、痛點等維度特征，形成畫像的基本框架。最后再完善用戶畫像，此時我們需要做的事情主要是：
最終客戶畫像呈現如下圖
數據已脫敏，非真實數據
最終角色畫像呈現如下圖
數據已脫敏，非真實數據
用戶畫像作為一個強大的設計和交流工具，能夠讓利益相關人目標始終保持一致，它的價值在于傳播與使用。舉個例子，90年代，庫珀將用戶畫像的描述做成一頁紙貼在墻上，一個產品的一個用戶畫像做一頁紙，這樣設計團隊成員每天走進辦公室就能看到。
用戶畫像制作出來后，與整個項目團隊共享定義的用戶畫像是很重要的，千萬不要讓他在共享文檔里積灰或掛在墻上當擺設。你要做的是讓用戶畫像從紙上躍起，走進你同事的心里，讓他在每次討論、每個決策時，自然、自發地被提起。所以用戶畫像的使用也是極其重要的，不然前面的工作都是無用之功。
所以，你可能需要：
向團隊介紹用戶畫像。花點時間介紹研究的過程，展示照片給他們看，聊一聊畫像的需求，期望，痛點，性格等。最好以故事性的方式進行引導，并長期地在會議里提到并討論它
在你的用戶故事中使用用戶畫像?！叭绻沂?*業務招聘員，我想要快速識別出今天某門店招聘的人數和到崗的人數”。設計時，花點時間想象一下軟件會被用戶在工作中如何應用。
造訪不同團隊，介紹用戶畫像，包括它從何來，如何用。教他們怎么招募有代表性的用戶進行測驗，如何寫用戶情景來啟發設計或作為可用性測試任務
總的來說，在你能力范圍之類的地方，宣傳用戶畫像的商業價值，提升大家的信任。畢竟用戶畫像可以幫助產研團隊跳出自己的需求，了解真正使用產品的人的需求。當越來越多的團隊使用用戶畫像，那么用戶畫像就會越來越像一個真實的用戶，幫助團隊從用戶的角度出發去設計產品。
值得注意的一點是，用戶畫像并非一成不變的，很大程度上受環境和周期的影響，所以我們要定期回顧自己的用戶畫像，對他們進行一些更新，確保和現實一致性。市場變化和策略的變化可能會重新定義你的業務受眾，也可能出現其他的細分，這也是重新調整用戶畫像的好機會，否則它們最終將失去生命力。希望你的用戶畫像也能始終對業務起到幫助，為體驗助力。
文章來源：學UI網 作者：小紐扣
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶體驗設計是一個動態領域，每年都會為我們帶來新的趨勢，最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數字世界和現實世界之間的互動方式發生了突然的變化。人們不僅開始在網上花費更多的時間；他們的思考方式和表現方式也發生了不同。
本文主要闡述2021用戶體驗的趨勢，我們相信這將在新的一年里占據主導地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。
我們在2020年UX狀態預測中討論了語音用戶界面（VUI）。如今年所示，語音指令仍然是UX設計中最熱門的趨勢之一?？梢钥隙ǖ卣f，明年不應忽略它。
毫無疑問，到2021年，語音聊天機器人和虛擬助手將繼續流行。用戶在數字體驗方面一直在尋求簡單性和效率。市場需求，高期望值以及人工智能技術的迅速發展使品牌別無選擇，只能在其產品中包含基于語音的功能。
已經有許多企業為廣泛的VUI實施奠定了基礎。例如，星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。
極簡主義可能是當今視覺設計中最明顯的趨勢之一。用戶正在體驗越來越多的網站所有者想要傳遞的關鍵消息。Cookie彈出窗口，打折廣告和各種通知旨在吸引和轉化網站訪問者，但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設計應運而生的地方。
但是，“極簡主義”并不意味著“沉悶”或“原始”。意思是“優雅”和“高效”。盡管必須使用數量有限的顏色，設計元素和明亮的組合，但UX設計人員仍然有很大的發揮空間。此外，元素的功能最為重要，正確突出產品功能并傳達正確信息的能力需要大量的創造力。相反，僅具有裝飾目的的組件正逐漸失去其重要性。
內容，消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦，這意味著網站所有者應努力使自己的UX文字簡潔明了。
負空間是用戶體驗設計的一種大趨勢，它已經脫離了對簡約UI的市場需求。簡而言之，負空間是頁面布局中對象周圍（宏空間）或對象內部（微空間）的空白區域。它已經成為獨立的設計元素，在視覺美學和用戶體驗優化中起著至關重要的作用。谷歌的主頁，蘋果的官方商店以及一些用Webflow創建的網站就是很好的例子。
留出一定的空間，在設計中添加“寂靜的感覺”，必須是始終有意義的。否則，用戶可以將其視為缺少信息。負空間的主要功能是整理網頁，以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。
負空間有時也稱為“空白區域”或“留白區域”。所有這些術語都是可以互換的。當區域中沒有元素時，您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。
在發生COVID-19大流行之后的在線體驗將與我們習慣的在線體驗不同。UX設計以相關方式反映了缺陷。為了使品牌的數字化形象更具關聯性，設計師有意在版面設計中實現了一些“缺陷”。 它可以是任何東西，從手繪對象到構圖或頁面的不尋常元素。
通常，不完美的設計可以很好地證明品牌的身份并突出其獨特性。但是，如果要應用這種UX趨勢，則必須記住一個關鍵規則：必須保持平衡。如果你做得過多，那是行不通的。
中性風格是UI設計中其他兩種大規模方法（擬態和平面設計）的組合，它們通常被認為彼此相對。擬態化是關于模仿現實世界中的物體以及我們與物體交互的方式。
幾十年前，當需要使用超現實元素來創建直觀且用戶友好的UI時，它很流行。垃圾桶就是例子之一。另一方面，平面設計是一個更新的，簡化的概念，圍繞二維元素，極簡主義和鮮艷的色彩。
同質性兼顧了兩者的優點。它使用圖形強度大的元素，陰影和漸變來使按鈕和卡片類似于自然界中的對象，而不是精確地重新創建它們。中性風格不會將現實主義推到極致。取而代之的是，它努力實現淺色和微妙對比度的“柔和”外觀。
在過去大約一年的時間里，同質化一直是UI / UX專業人員中討論最多的主題之一。盡管仍然沒有很多真正的數字產品的用戶界面遵循這種方法，但許多設計人員對該概念感到興奮。像Behance和Dribbble這樣的專業平臺已經包含了許多同態的例子。因此，我們有充分的理由相信，這一趨勢最終將在2021年出現在我們的手機和筆記本電腦中。
視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是，我們仍然觀察到這些用戶體驗趨勢正在逐步普及。
首先，它的使用量顯著增加。如今，3D元素和視差效果已不再是網絡上奇特的事物。它們更為常見，特別是在代表著脫穎而出的時尚和電子商務品牌的網站和應用上。
另一種趨勢是嘗試在一個界面中結合視差效果和3D圖形。使用視差滾動時，網頁背景和前景元素以不同的速度移動。僅憑它就能產生深度感。通過為此添加3D對象，您可以創建一種真正的身臨其境的體驗，并將在用戶的記憶中保留很長時間。
隨著我們設備屏幕的變寬，UI / UX設計中出現了不對稱趨勢。通常，不對稱是野獸派的一種屬性，這是藝術和網頁設計中與極簡主義相反的一種風格。但是，如果與其他殘酷的設計元素分開使用，它可以使您的網站看起來有趣，同時使它保持微妙和優雅。
不對稱布局的UI / UX趨勢通常與其他創造性的Web設計技術一起實現，例如破碎的網格，重疊的元素和分割的屏幕。您也可以將不對稱性應用于排版。如果操作正確，它將使您的品牌信息更加引人注目和令人難忘。
但是，請務必記住，非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進，并幫助品牌強調重要信息。
今天，當我們在互聯網上進入隨機網站時，很可能會看到GIF，微型動畫，動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行，并且使用頻率不斷增長。
除了具有視覺吸引力之外，移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命，使它們更具個性。
如果要在用戶界面設計中使用這種軟件開發趨勢，那么明智地執行此操作至關重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑，從而促使他們甚至比計劃的要早離開網頁。動畫元素也不應使用戶界面不必要地復雜。它們始終必須是相關的，有價值的和平穩的。
信息體系結構是在頁面上組織和構造不同內容的方式。它是以用戶為中心的設計（UCD）的基本要素，旨在使用戶的數字環境更加舒適。與用戶研究和可用性測試一起，構建有效，有用且一致的信息體系結構是UCD流程的必不可少的階段。
為了創建一個實用的信息體系結構，UX設計人員需要對產品的目標受眾，其行為以及使用數字解決方案的原因有深入的了解。用戶應該無需花費太多精力就能獲得所需的結果。因此，在設計過程的線框階段始終必須考慮用戶的目標，清晰的導航和內容表示（包括盲點監視）。
我們創建此文章是為了讓您在當今競爭異常激烈的數字世界中站穩腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網站的用戶體驗。即使用戶期望很高，它們也可以使您的產品在視覺上對目標受眾更具吸引力。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當我們設計師輸出了精美的設計稿，然后附帶了一個流暢的手勢動畫，交付給開發的時候，也期待著開發大佬搞出和自己預期一樣體驗流暢。但是等到實際體驗的時候，卻發現有一種說不出的鬧心。
“這個感覺不好按...”
“劃起來咋這么費勁呢？”
“怎么感覺動畫怪怪的?！?
當你正準備和開發一通友好探討的時候，這個時候開發向你發起了一系列靈魂拷問：
“你這個左滑的手勢，劃多少才算觸發？劃多快才算觸發？如果劃了一半劃回去算不算觸發？如果我先點擊后滑動算不算觸發？松手之后的動畫是多快的速度？什么速度曲線？要不要回彈效果？回彈阻尼系數是多少？”
這個時候你發現，自己提出的設計需求根本太天真了。
剛才的問題真實原因是，在做很多手勢識別或者一些我們看起來日常的效果，其實是蘊含了很多復雜邏輯的。
這些復雜邏輯原本被封裝在操作系統內，在系統內時可以隨時調用。但是一旦脫離了操作系統，那手勢的處理邏輯就會比較簡陋，導致最終的體驗不佳。
那這個時候也許你會想問，我們怎么會脫離操作系統呢？我們的手機不都是iOS和Android的嗎？不都是操作系統嗎？其實這里指的操作系統，是指操作系統的原生組件。這類組件只有在原生開發中才能被調用。
如今，很多App都使用前端語言來開發內部頁面(HTML/CSS/JS)。隨著Web混合開發，Flutter等跨端技術棧的出現，越來越多的團隊開始擁抱這樣的跨平臺技術棧。在節約了開發成本的同時，隨之而來的就是，在日常開發過程中，離純原生組件越來越遙遠。
在這樣的背景下，研發團隊的體驗設計師需要自己來研究用戶行為，手勢、組件和動效，實現原生組件類似的復雜邏輯，才能最大程度的接近甚至超越原生組件的體驗。
其實使用各個技術框架，也是有內置一些接口的。例如一些事件監聽器 / 動效曲線等。這也是騰訊文檔之前一直在使用的，但是會遇到一些問題。總結下來，主要有以下幾個問題：
無法精確操作：用戶的操作和操作反饋被自己的手指擋住，無法完成精確操作。
手勢識別誤觸：同一熱區支持了多個手勢，可是用戶的實操時的手勢動作又沒那么標準，導致用戶誤觸其他手勢。
手勢觸發費力：滑動費勁，需要滑動很長距離才能觸發預期的動作。
動畫不流暢：各個技術框架自帶的動畫曲線和插值器，良莠不齊，體驗不統一且不夠流暢。
對于原生組件，我們習以為常的系統控件和手勢設計，里面蘊含的智慧遠比我想象的更多。
舉個簡單的例子：iOS系統的首頁，它可以支持橫豎各個方向的滑動，并且在觸發一個方向的手勢之后，就無法再觸發其他手勢了。
但是其實有個問題，手指和平時演示的不太一樣。
就是手指貼合上屏幕的時候，手指與屏幕的貼合面，并不是均勻向四周擴散的，而是向下的擴散更大一些。對于觸摸中心點，在觸摸的過程中，就會有向下的一個偏移。
如果直接識別，這個偏移直接被識別為向下滑動，那就會無法觸發左右滑動的手勢。
例如在iOS內的手勢識別，有一個專門的接口來做識別：PanGestureRecognizer，這個接口會在10px內先判定手指移動的方向和距離，再對具體觸發的手勢來做定義。例如下圖，雖然剛開始手指位置有些許下移，但是最終還是可以左滑判定成功。
所以你會發現，如果在iOS桌面上輕微的向左右滑動(10pt內)，桌面是不會有任何響應的。就是因為在10pt內，系統還無法確認手勢的方向。
另外，系統還自帶了很多手勢反饋操作，包括回彈效果，甩出效果。里面的小邏輯設計需要非常精準。并且對于滑動的手勢還帶了回彈效果，看起來非常爽。
騰訊文檔是基于Web / Flutter的應用，并且接管了很多原生系統的能力，包括排版能力、光標選區能力，拖動能力等。因此，很多基于Native開發能很簡單解決的問題，在Web下就要重新打磨一套我們日常習以為常卻邏輯復雜的組件。
由于騰訊文檔是基于Web的的應用，接管了很多原生系統的能力，所以不能使用系統的Gesture Recognizer，也不能使用系統的選區光標能力。
如果是簡單的使用前端的操作監聽器，那會要求用戶使用極其標準的手勢操作才能觸發，否則就會觸發失敗。因此需要設計更精準且適應性的規則，來包容用戶不那么標準的實操手勢。需要幫助用戶在粗糙的實操手勢下，猜測用戶原圖，并精準完成的操作。
可能你以為手勢操作并不常用，其實并不是的。
一個單擊，一個雙擊，其實本質上都是手勢。
不過，很多人可能會認為，按說這些操作都有原生的監聽器，不需要再去定義。但是其實如果不做一些進階定義，就會出現操作不靈敏的問題。例如下面這個問題。
在很多安卓手機上，或者是我們自己的騰訊文檔里，時常遇到一個問題：就是原本以為雙擊文本區域可以選中文字，可是卻發現這個雙擊成了一個玄學事件。雙擊有時生效而有時不生效。
理想的雙擊大概是這樣的，是需要2次有效的Tap事件：
這個Bug讓我們來定位一下。讓我們還原一下事情的經過：
哦！原來是因為雙擊的其中一稍微偏移了一下，拖動到了光標，導致系統判定是一次Tap一次Drag的行為，這樣就沒有辦法觸發雙擊行為了。
解決方法也很簡單。把10px偏移距離內的滑動行為都判定為點擊行為就可以了。從這里看，我們其實需要做的是，規范“點擊”這個手勢的定義。
因為原來的系統自帶定義，容易造成誤操作，而且手指貼上屏幕的時候，都會產生輕微位移，或者一不小心滑動了頁面，或者不小心拖動了光標，導致手勢識別的不靈敏。
原定義：“點擊并在500ms內在原處松手”。
需重新定義為：“點擊并在在500ms內，在10px以內處松手”。
另外，文檔移動端也定義了一系列更進階的手勢的操作，在這樣對手勢的進階定義后，操作可以被更精準和智能的判斷。這些定義被寫在了設計規范中，包括了單擊 / 雙擊 / 長按 / 拖拽
騰訊文檔的整個文本編輯區域都是使用Canvas實現的，由前端自主控制渲染。因此，選區光標就無法直接使用系統能力，需要設計師來設計一套選區光標，并且支持系統的各種選區光標的手勢。
由于騰訊文檔的光標選區是非?；A基礎的編輯組件。這個組件在一般的產品中，都是直接復用的系統組件，但是在騰訊文檔中，就需要重新去考慮光標組件。
首先有個需求，光標是可以在文本中快速拖動的。
經常會遇到拖動。無論是光標拖動，還是長按選中，我們都希望能清楚的看到光標的位置，所以我們在用戶拖動光標和選區的時候，使被拖動的組件放大1.5倍，使用戶可以看到拖動效果。
這就夠了嗎？不夠的。
如果用戶想要精準的控制光標，首先要讓用戶完整的看到光標。用戶在拖動光標的時候，手指經常會不自覺的向下移動。這是為了讓自己看清光標，這個時候，我們不應該把這個移動當做是把光標向下移動一行，光標本身不應該跟隨向下，應該只在同一行，并且只響應左右移動。
但是當我向下拖更多距離的時候，光標就應該一直保持在手的上方，以確保用戶可以精確操作。
同樣，我們定義了長按后可以拖動選擇的手勢。在拖動的過程中，允許用戶向下偏移一定的區域，來看清選區的具體邊界位置。
手機端的光標選區，一個我們日常習以為常的光標，里面竟然有那么多小細節在里面，才能讓光標變得好用。
當一個滑動手勢被觸發時，我應該如何判斷這個手勢已經被觸發了呢？這個判斷并非簡單的橫劃豎劃，而是針對的不同的場景，去做特殊的處理的。
案例1：向下滑動手勢
例如說，一個非常簡單的手勢，半屏向下滑動關閉。我們通常來說我們的日常體驗，會是一個對距離的判斷，當手指拖動容器超過一定的距離，然后松手，就可以觸發手勢。
但是僅僅判斷距離是不夠的。因為手勢是對現實世界的映射。很多時候用戶希望滑動很短的距離，把東西“甩”出去。
如果僅僅判斷距離，那就很難“甩”出去。這時候就還需要判定用戶手指在離屏時的速度了。最后能達成一個比較輕松就能觸發手勢的結果。
案例2：左右切換相機
這是騰訊文檔的文檔掃描頁面。上半屏是大面積的取景畫面，底部是文檔類型的選擇。
因為取景頁面可以點擊對焦和測光，因此輕微的滑動不應該導致整個取景頁面或者底部Tab的滑動，應當是當整個頁面檢測到一個比較大的滑動動作之后，才自動移動切換。
但是如果需要離手才能觸發，如果用戶劃動的速度比較慢，整個體驗也會隨之變得過于拖沓。所以這里還加了一條邏輯：當手指滑動速度的加速度急劇減小時，不用松手也可以觸發手勢。這樣的體驗感會覺得流暢很多。
在騰訊文檔中，點擊、滑動、懸浮、長按等手勢操作貫穿用戶的使用過程，動畫效果是所有交互操作的視覺反饋，也許它沒有那么的「高逼格」，但它卻是這臺精密儀器運轉不可缺少的“潤滑劑”，流暢愉悅的動效能夠讓體驗更美好。
但是由于騰訊文檔起初是基于web混合開發，后面又加入了Flutter框架，這就導致多個平臺、框架的動效邏輯混在一起，在這個背景下，設計師們就需要從多方面重新梳理并定義動畫的基礎規則。
自然流暢是騰訊文檔內所有動效運行的基礎原則。
由于騰訊文檔是基于Web、flutter等多框架混合開發的應用，動畫曲線又都是基于各自框架自帶的貝塞爾曲線（cubic-bezier），這就經常導致一些同類型的手勢操作，最后所呈現的動畫效果卻相差很多。并且原生的動畫曲線，在實際使用上并沒有達到很好的效果，只是能夠比沒有動畫要強上一些。因此，確定一套統一、自然并且適合騰訊文檔的動畫曲線，是設計師優先要解決的問題。
為此我們根據動畫使用的場景，定義了四種標準曲線。同時輸出給開發同學，作為標準可調用的曲線。
緩動曲線應用的場景最為廣泛，也是騰訊文檔的默認曲線。相對于傳統web端或者flutter框架內的默認曲線，騰訊文檔的緩動曲線開始時會比較迅速，這樣能給用戶及時反饋、高效運行的感受；在運動快結束的階段，為了避免快速反饋帶來急躁的負面感受，曲線會更加平緩，進而使正在運動的元素吸引用戶的注意力，并讓用戶能夠有一定的思考時間，保證動畫的合理性。
即減速曲線。運動元素在開始階段時位移變化會很大，但是后面會越來越小。緩出曲線前期快速運動，不需要過多讓用戶留意，在結束的時候逐漸減慢速度，讓用戶關注到其新的狀態，用戶就可以提前切入到定位尋找的階段，等動畫停止后就可以立即進行操作。這種類型的曲線通常是用在元素進入界面時使用。
彈性曲線是一種基于阻尼彈性振蕩的原理實現的復雜曲線，阻尼比決定了曲線具體動畫感受，根絕阻尼比的不同，彈性曲線可以分為三種，分別是欠阻尼運動、臨界阻尼運動及過阻尼運動。在騰訊文檔中，通常只會使用到欠阻尼運動及臨界阻尼運動。
彈性曲線卻并不適合在所有的使用場景中，因為這種運動一般情況會需要相對多一些的時間來完成整個運動過程，讓整個過程變得過于拖沓。同時過于活潑的彈性動畫也會過分的吸引用戶注意力，打斷主進程的操作，影響效率。
時長是元素移動所需的時間，在創建自然流暢的動畫中起著重要作用。如果動畫太慢，會使用戶感到卡頓和厭煩；但是如果速度太快，就會給人緊張急迫的感覺。因此動畫的持續時間應該給與用戶充分的反應時間，同時又不用過久等待為標準。
在移動端上，我們設定動畫的持續時間在300-400ms。而在web端上，我們設定動畫的持續時間在200-300ms內。具體的運動時長視具體動畫而定，時長并不一成不變。
曲線是動效的靈魂，有時候你覺得平凡的動畫，或許只需要簡單地撥動那條運動曲線，就可以讓這個動畫瞬間變得充滿靈氣。盡管曲線可以解決大部分動效問題，但在動畫的實際落地中，還是有一些問題，是它無法解決的。這就會涉及到動畫更底層的渲染及邏輯。比如說在web端，前端動畫卡頓與否其實是和動畫本身實現性能有關系的，瀏覽器的屏幕刷新率都可能被代碼拖慢。這也是騰訊文檔在初期并沒有在web端增加太多動畫的原因，過多的動畫效果其實意味著需要更多的性能資源傾斜到動畫上。
在動畫上除了希望提供自然流暢的積極體驗，我們也希望繼續深入，“讓工具褪去冷冰的外殼，走進與智能隔空對話的新世界”。讓體驗更有情感，讓用戶更愉悅。
在待辦事項上，優化前每當用戶點擊完成一項事項時，完成動畫僅僅是機械的從未完成向完成圖標的替換，反饋效果非常“高效”的完成了它的任務，但是這樣就足夠了么？不一定，當一項事項被列為待辦時，就證明這件事對于用戶來說是重要的。在現實中，當重要的事情完成時，我們都是歡欣的，就像心里在放煙花，完成待辦時候的動畫理應如此，讓用戶在完成的那一刻體驗到“煙花”的綻放。
但是總有一些產品，或者是通用性的考慮，或者是一些歷史原因，或者是一些成本考量，走上了非原生開發的路，這樣的產品在未經打磨的情況下直接一把梭搞出來，的確會顯得卡頓，或者難用。
這其中不僅需要工程師一點一滴的性能優化，這也對體驗設計師對細節的把控提出了更高的要求。只有對用戶的行為處處關照，才能無限接近最極致的體驗。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近負責的新項目快上線了（感覺我好像一直在做 0-1），給大家總結了5個一定會遇到的新項目盲區及最新的解法，希望能幫助大家在交付開發前就順利完成設計輸出。
2020 年 4 月后，我們在設計 iOS 登錄界面的時候都知道必須加上蘋果官方強行要求的 Apple 賬戶登錄按鈕，但關于這個按鈕的設計規范其實有比較硬性的規定，沒有注意的話到了開發還原的時候就容易踩坑。
在國內的 iOS 登錄設計中通常突出的主流登錄方式是“微信”，手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現。
蘋果官方是允許對 Apple 賬戶登錄按鈕進行一定的自定義的，其中就包含將其弱化為一個圓形的圖標按鈕，只是圖標與圓形按鈕的大小比例是官方固定的比例（這個大家直接下載官方提供的圖標，它是自帶留白的區域的，保持圖標與高寬一致就符合要求了）。
而國外的 iOS 登錄設計中通常沒有那么多的第三方登錄方式并存，主要的“Facebook”與手機登錄通常會與 Apple 賬戶登錄按鈕同一級出現在界面中。
這個時候需要特別注意的是，蘋果官方對于這種大按鈕的限制主要在于 3 個部分：
剩下的按鈕樣式，比如顏色和描邊也非常有限，只可以使用白色填充黑色描邊與純黑色底這 2 種。
想了解更多具體內容，可以參考官方貼：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
還記的早幾年做安卓項目的時候上架應用商店的啟動圖標輸出還是和 iOS 差異不大的，基本就是尺寸換換。這次輸出啟動圖標，被安卓的開發大大告知，安卓可以出這種帶動效效果的啟動圖標了，它的原理和效果，如下圖：
實現這個效果的設計配合輸出也很簡單，只需要整理一下的具體啟動圖標輸出就可以：
1. 啟動圖標（前景，不帶背景的）-108dp（324px）
當然以上僅針對純色背景，可以與 logo 主體輕易分隔的啟動圖標。如果是混為一體的話就需要調整輸出方式為以下：
想了解更多具體內容的鐵汁，戳底下官方傳送門：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
這次新項目又遇到了開發中改稿的問題，大部分都因為全屏的背景圖切圖大小問題。
個別全屏視覺的界面，比如閃屏、登錄頁、音視頻語音等等，我們通常設計時不考慮切圖的大小問題就會比較放飛去設計。
但實際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右，就算把壓縮率提到 80%+（市面上大部分壓縮軟件的壓縮率都很有限，比如大家常用的 tinypng、pp 鴨等），就算你重復壓縮，也有至少 200 多 KB，遠遠超出開發 100k 以內的切圖大小限制。
所以不得不要求我們在輸出格式的時候拋棄 png 格式，啟用 JPG。
不過實際設計時候我們可能仍然會遇到不能用 JPG，必須用 PNG 格式的情況（透明度蒙層），那么建議大家可以嘗試以下 2 個小技巧：
最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會不會超標嚴重（盡量控制在 100k 以內），不然無法落地再好看也沒有用咯。
目前關于移動端界面里個別小動效的導出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。
Gif、逐幀、包括前幾年流行的 Lottie 大家應該都比較熟悉了，這里稍微科普 2 個陌生一點的格式：
目前我覺得性價比最高的就是 webp，它的優勢主要在于：
唯一的 2 個問題在于：
我度娘過一些導出 webp 的方式都不是很好用，問了我司的動效設計師，推薦一個比較簡單靠譜的方式分享給大家：
1. 先從 AE 導出逐幀圖（記得需要循環的動效做好循環）
不知道如何到逐幀圖的看這里：渲染→渲染設置→格式→選擇“PNG”序列→導出即可
2.下載 isparta
3. 直接將 AE 導出的逐幀圖文件包拖到 isparta 里導出 webp 格式（可選）
設計交付的協同平臺現在市面上很多，很多大廠也有自己內部的協同平臺來承載設計交付，俺們豬廠用的叫 dbox（非常滴不好用），在強推之下開始申請經費改用 Figma 了。之前為了更換協同平臺，把交付的協同平臺都做了一番調研，這里給大家直接看表格吧。
看完圖大家就會發現除了 Figma 大家的使用情況不會差很多，差的主要還是錢?？偟膩碚f的建議就是，如果已經從sketch改用Figma的土豪團隊就可以直接分享Figma文件鏈接給開發搞定切圖標注以及文件存檔這2件事兒了。
如果還在用 sketch 和 XD 的鐵汁，交付型的協同平臺我個人比較推薦 Zeplin，雖然有的人會說它服務器在國外很卡，我覺得其實還好吧，同時 Zeplin 近幾年還解決了 Win 系統適配的問題。
然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的，因為高清度、流暢度到美感幾乎都比較完美。一直到我發現了它居然是個完全開放的交付協作平臺，也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項目文件，瞬間安全系數降為 0。作為一個明顯對標企業級的協作平臺這么瘋狂的植入社交功能，到底是企鵝的社交基因太強大還是怎么肥四？
文章來源：優設網 作者：Nana的設計錦囊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn