這篇文章很好，提供了一種“以用戶為中心”把自己和項目組成員隨時假定為一個用戶的身份，去思考，提出一系列問題，把這些問題編號，去一一解決，注重用戶體驗，以此為基本框架，嚴格遵守，一旦設立不增加臨時的多余的功能，不把沒有用戶故事的界面元素放在界面上，保證了精簡的內容圍繞確立的框架中，井井有條。這篇文章值得看十遍。
隨著大數據的興起，數據價值的不斷挖掘，圖表作為數據呈現與分析的有效手段，正扮演著越來越重要的角色。我們在進行B端平臺設計時也在思考：如何讓圖表清晰的傳達信息，同時帶來美觀的視覺感受。
為了達到清晰傳達和視覺美觀的目標，我們結合實際項目，進行大量探索及思考，梳理總結了一套適用于B端后臺類產品的圖表設計思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。
圖表視覺層級
圖表能夠承載大量數據信息，同時視覺元素較多，如果只是憑借設計師的審美喜好進行視覺設計，沒有整體信息讀取考量，可能會導致重要信息未能凸顯，降低用戶讀取效率。
為清晰傳達信息，進一步提升讀取效率，我們采用元素重要程度與視覺強度相綁定的方法。依據元素重要程度，將圖表元素分為三類，分別為“底層元素”、“中層元素”和“頂層元素”，并依據不同視覺強度分別設計三類元素。底層元素最弱，頂層元素最強。通過這種方法，梳理圖表元素的前后關系，能夠清晰把握元素視覺層次，保證信息傳遞效率。
| 底層元素設計
在各類圖表中，我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺干擾，最大程度突出主圖形，底層元素全部使用淺灰色進行設計。我們發現，當元素與背景顏色的明度對比在1.2:1時，人眼較難看到元素；當對比度在2.0:1時，視覺強度過強，易吸引用戶注意力。通過元素視覺強度的調研及視覺嘗試，最終確定元素與背景對比度在1.6:1左右，視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀，只在需要查看時可以被發現。
| 中層元素設計
中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素，是圖表中表達數據的關鍵元素。與底層元素相比，中層元素采用更低明度與更高飽和度的數據色來表現，使元素從頁面中凸顯出來，保證可讀性。同時在樣式上適當加入漸變、描邊等樣式，豐富視覺層次，帶來美觀的視覺感受。
| 頂層元素設計
我們把頂層元素定義為圖表高亮信息，內容包括懸停樣式、懸停后的詳細數據說明等。在設計上為保證視覺樣式突出，使用深灰色、強調色等強對比度樣式，并輔以動畫、投影等手法保證明顯的視覺強調效果，保證頂層信息最有效的傳達給用戶。
| 最終效果
通過層級梳理，并綁定元素重要程度和視覺強度的方法，設計后圖表主次信息均按重要程度進行對應視覺強度的展示，讓用戶能夠在第一時間接收到最重要的信息，提升信息讀取效率。
圖表排版設計
圖表排版是指各元素在圖表中的尺寸及布局等，對于B端后臺類產品來說，不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規范保證用戶的使用體驗？我們經過大量討論推敲，梳理出一套針對B端后臺類產品的排版規則，力求保證用戶圖表的使用體驗。
| 圖表尺寸
圖表尺寸指圖表整體長寬高。在項目中我們發現不同尺寸的圖表對數據展現效果影響巨大，例如巨量數據的圖表擠在名片大小的區域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環視”、“詳情分析”三類典型場景，并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸，針對不同尺寸優化圖表的信息展示密度，以達到高效讀取信息的目的。
“迷你圖”尺寸最小，舍棄了Y軸等不必要信息，利用小面積展示最關鍵的圖表信息，并控制數據密度，保證信息高效讀取。
“中號圖表”尺寸受限，限制坐標軸刻度數量和數據的密度，例如曲線圖數據點不高于每4像素1個數據點，Y軸坐標刻度不超過5個，以確保信息密度不過載，這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。
“大號圖表”尺寸最大，不限制數據信息密度，給予最全最詳細的展示，這類尺寸通常用在數據詳情頁等詳細分析場景中。
最后考慮到多圖表混合排列時，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺感受更加膨脹。我們縮小了填色類圖表的實際高度，保證多種圖表混合排列時，視覺感受的均衡。
| 坐標軸
坐標軸在圖表中出現的頻率較高，那么坐標軸常見的設計問題有哪些呢？
第一是橫縱坐標軸的刻度出現過密情況。
如果坐標軸所承載的是連續數據（連續數據指可量化的，連續不斷的，在區間內可任意取值的數據，如時間、金額、人數等），設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據（離散數據指不可量化的，無關聯的，不可在區間內任意取值的數據，如分類、軟件版本、省份等），可采取增加坐標軸縮放功能以解決.
第二個常見問題是刻度的說明文字過長。
如果是X軸（橫軸）文字過長，除了在可控范圍內減少刻度，還可采取文字傾斜45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜90°)，緩解信息過密看不清的情況。
如果是Y軸（縱軸）文字過長，需聯合研發一起調整數據的單位，比如把“元”調整為“百萬元”。
如果不能調整，那就要根據所使用的圖表庫有針對性調整。例如常用的Echarts圖表、D3圖表等開源圖表庫，需要提前預估刻度文字長度并預留出來，否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是AntV等可自適應的圖表庫，則不必提前處理，圖表庫會自動按刻度長度進行整體調整。
| 圖例
圖例作為圖表中不可或缺的部分，在各類圖表庫中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當布局擺放，但在同一產品或頁面內，過于隨意的擺放圖例，會導致頁面統一性較差，同時增加用戶的瀏覽成本。我們團隊所負責的B端商業產品矩陣，作為面向用戶的產品集合，產品間聯系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題，我們基于業務特點，針對B端商業產品矩陣制定了圖例布局指導原則。
我們以提升屏幕信息密度為目標，分析不同場景的頁面排布，制定了頂部和右側兩種較為寬松的指導原則，供設計師在沒有明確的更優方案時選用。
當圖表是左右兩端對齊的類型，例如折線圖、柱狀圖時，建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統一排布，減少占用空間。當圖表本身左右都有空余空間時，例如餅圖，建議將圖例放置于圖表的右側。也能夠節省頁面的空間。
數據色板設計
色板作為常見的數據表達手段，能夠利用不同顏色明確體現分類信息、數值高度、狀態信息等。但目前市面上鮮有專業用途圖表的配色工具。我們經過大量探索嘗試，梳理總結出圖表色彩的兩個關鍵維度：辨識度與統一性。既需要顏色間突出強烈可清晰辨別，又需要顏色整體能形成統一風格，以達到清晰傳遞和美觀的目標。如何平衡辨識度與統一性，是我們遇到的難題。
| 辨識度
辨識度在圖表中有兩方面：顏色與頁面底色的辨識度，各顏色之間的辨識度。對于第一種，我們采用控制顏色的明亮程度來確保色彩辨識度，尤其對于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識。
對于第二種也就是各顏色之間的辨識度，通過實驗發現單純的顏色色相變化，例如紅色與橙色的區分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，既深紅色與亮橙色，深藍色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標中，運用歐幾里得距離公式測算顏色間的距離長短，來衡量各顏色間色差數值。顏色間距離越遠代表色差越大，利用數據輔助衡量辨識效果。
| 統一性
色彩統一性的作用在于確保圖表整體風格一致，色彩搭配舒適，從而帶來美觀、統一的視覺感受。為達目的，我們首先提煉商業產品設計風格為明亮、強對比，其次把設計風格轉化為色彩數值。經過實驗，把顏色明度限制在50%-70%，把飽和度限制在75%-85%，并在區間內不斷波動。這樣既保證了色彩視覺感受的統一，各顏色間又能夠有清晰的辨識度。
| 顏色量化與工具
量化顏色，將色彩轉化為數值，利用數值來驗證設計師的「感覺」，能夠保證方案合理性，保證設計質量。但通過嘗試，我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料，我們最終決定以小眾的HCL色彩模式來衡量色彩。其中H表示色相、C表示飽和度、L表示明度。HCL區別于傳統的RGB或HSB模式，它能夠將人眼對顏色的感知精確的量化為數值，例如黃色相比藍色明度更高，都能如實的反饋到數值上。也由于此特性，HCL模式在誕生距今不到20年間，已被一些先鋒設計師用于數據可視化的呈現中。
但是HCL作為小眾色彩模式，目前設計軟件鮮有支持，造成了HCL色彩不直觀、不方便調色等的問題。為解決此問題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動生成圖表色版，并在風格上與品牌色匹配，達到整體色彩的統一。我們也將一套調配好的色板及HCL實用小工具附在文末，幫助大家直觀的查看和使用HCL模式顏色。
結語
數據價值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數據背后。而圖表則是開啟寶藏的鑰匙，是發掘數據價值的強有力武器。通過對圖表的不斷探索優化，我們希望能夠最大化數據的價值。通過圖表，讓數據最直觀的展現；通過圖表，讓其背后的規律浮出水面被人探知；通過圖表，讓B端不再有難懂的數據。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很久以前我寫過一篇講「用戶體驗」的文章，文中提到電影的觀影體驗是可以通過燈光、鏡頭、腳本、臺詞、道具、特效等等手段去塑造出來的。比如，《教父》中對燈光塑造角色形象的首次運用，營造出陰暗、冷酷、深不可測的角色形象，幫助觀眾去建立更立體的角色印象。
所以許多學習電影的同學會去分析電影里的某個鏡頭或某個片段的細節，聊這個鏡頭的拍攝用了什么樣的手法，演員的表演傳遞出了一種什么樣的信息，以值得我們去學習。于是許多學電影的新人就會以為，學好這些東西，就能拍出一部好電影。
但是作為一名導演，如果只關注這些細節去學習所謂的理論知識，而不知道這部電影背后的宗旨，支撐起整個故事脈絡的重要信息，眾多人物角色的復雜情感關系，以及劇本背景所表達的時代現象等等，那么就不可能在自己的電影里代入那些細節理論。甚至連如何推進到這樣的場景都做不到，試問又怎么可能去聊某個鏡頭下的細節呢？
這叫缺乏上下文聯系，也是任何行業的從業人員在學習該行業所需要具備的理論知識時，都會忽略掉的重要條件。
說一個真實故事。設計師 Teisanu Tudor 前陣子在 Instagram 上做了個實驗。他扮演成一位資深 UX，每天通過網上找來的幾張圖片組成各種設計案例、教程、原則等帖子，分享在上面。受歡迎程度遠超他的預期，而其中熱度最高的帖子，是案例改版對比圖，以及兩個方案比較圖，再加幾句簡單的總結。比如：
通過這樣的說法，難道就能認為現在所有 App 或網頁上的 banner 設計都是錯誤的？當然不能這么隨意下定論。
許多人都以為通過這種簡單的幾個步驟就可以學會設計，且認為這個學習過程是有趣且輕松，可以速成的。
Teisanu Tudor 說：這種速成貼如此火爆，不免讓人有些擔憂。這些帖子里的案例幾乎都是脫離改版目標的上下文背景去探討體驗的，可許多人都忘了目標才能決定設計改版后的效果，而不是單獨看起來如何。
或者這類：
A 與 B，真的是 B 更好么？在不同設備與不同用戶的條件下，僅僅通過視覺理論得出這樣的結論，未免也過于倉促。
我們都知道，一個設計方案不可能適用于所有場景，設計師的主要能力之一就是在具體限制條件下，平衡好不同利益相關者，以及多個變量，產出合理方案。而類似這種帖子的火爆似乎在傳遞出一種信息，就是設計是不需要具體問題具體分析的，甚至通過這種細節的通用解法就能解決絕大多數設計問題。這就屬于誤人子弟了。
我經常會在一些地方看到有人在整理某個頁面當中的設計細節，然后有模有樣總結一遍，試圖將其當做產品設計的某種理論或準則。比如截一張某款產品中的界面，說它的按鈕擺放有問題，會導致用戶如何如何，而依據就是之前得出的設計準則。其中最有趣的一次是，有個人拿著一款產品的設計方案去吐槽另一個產品的方案，說沒對上…
在前面兩篇理論文章里，我反復說過理論知識的重要性，它可以幫助我們產出設計方案。但是有一個點是沒有被提及的，就是「理論知識的連接性」。
許多人會把自己看到或學到的東西看作是一個獨立的知識模塊，且希望在工作時能運用上，然而卻事與愿違。于是漸漸排斥理論，覺得理論無用，形成一種認知，就是理論無用論。再也不去讀書，不去學習理論知識，以至于在知識體系層面停滯不前，無法說明白自己產出的方案，只能說感覺：我感覺可以。
這些人再也不會去思考自己為什么做這個需求，以及這個需求的利益相關者是誰，用戶的目標，企業的目標，甚至是這次需求的指標，而只是看界面從某個原則上來說是否合理……而這所謂的原則，只是一些無關緊要的東西，卻被人當做設計圣經。
這就是理論知識逐漸被人輕視的原因，許多人本末倒置，再也回不到正確的那條路上。
比如，前陣子有位讀者問我：呆總，你看 QQ 這里把一些未開通的特權放出來，吸引用戶去開通，但是絕大多數直播產品的勛章體系也挺豐富的，卻很少看見會這么做的，是為什么呢？
類似這樣的問題，在缺乏業務背景，商業目的，需求指標等前提下，是不可能得出一個絕對結論去證明其他產品為什么不這么做的。這是現在大多數人面臨的問題，但卻不自知。
就像我這個系列文章里說的一樣，理論知識當然重要，但是破碎的理論，是有反作用的，所以需要串聯，從全局角度出發，再深挖到細節。而不是只聊大方向，或只聊細節。
舉個例子。當我們拿到一個需求，說要從 0-1 做一個長視頻產品的彈幕體系?？赡芎芏嗳司蜁o從下手，第一直覺想的是去找所謂的競品抄一下?？赡苓€會像上面那種對比圖一樣，把幾個產品的彈幕界面截圖下來比較下，試圖從界面元素角度判斷哪個設計得更合理。但是會發現，即使是抄，也會抄不到位，甚至會被老板質疑這個方案的合理性。而你能反駁的只是：別人也是這么做的。
而關于不同用戶發布彈幕的權限，比如次數、時間限制、字符差異等重要信息，就被忽視掉了。包括各種違規彈幕，以及如何判斷違規的彈幕，甚至是彈幕在屏幕上出現的密度、形式、速度等信息可能都無法考慮到。這就是現在許多設計師存在的問題 —— 過分專注界面元素，忽視其背后的信息。
雖然我在之前一篇文章里提到，注重細節的重要性，但是理論知識，從來都不是相互獨立的，尤其是與項目相關的，更不可能從某個單點出發得出全面的設計方案理論。
如果你是剛入行的設計師，這么做無可厚非，就像學習電影的學生一樣，它確實是學習理論的一種途徑，只不過缺乏連接。但如果你已經入行一些日子，覺得自己進步緩慢，甚至感到迷茫，且讀完我寫的文章也意識到了這個問題，那你就要開始反思，自己對于理論知識的學習是否有主動去將它們串聯起來。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：呆呆U理
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
人的時間精力都是有限的，建立良好的信息架構和層級，能讓用戶在有限的時間里快速獲取和理解有用的信息，并進行下一步操作。
一張圖上有四句話，讀者根據 字號 判斷先讀哪一句。在從測試和調研中收集來的用戶需求和期望的基礎上，首先明確內容和交互的優先級，確認信息的先后順序和關聯性后，才能夠設計出有重點的交互界面。這些行為是為了引導用戶在閱讀過程中 一眼獲取重要信息。
用視覺語言來說，上面的例子只是通過調整 文案的尺寸 去探索如何設計頁面層級。同時，通過調整其他平面設計元素例如 字重、顏色、透明度 等等也可以達成同樣的效果。當然，這種行為同時適用于 按鈕、菜單欄、表單 等其他控件。
通過距離劃分視覺元素展示它們之間聯系的基礎前提是 格式塔心理學 組織原則，這是在構建數字界面時所考慮的設計系統的基礎指導理論。因為用戶一般通過 視覺元素的位置 來判斷閱讀順序，設計視覺元素和控件的位置是為了促使用戶完成任務，同時在某些情況下，也會引導用戶去做他們所期望的事。在很多情況下，用戶會自己選擇想看的信息。
“在網絡上，人們會一目十行而不是逐字逐句的閱讀內容。他們一般傾向于付出更少的精力，以高效的方式達成目標?！?
這意味著在一個擁有很多功能的頁面上，用戶會一目十行的迅速尋找他們的目標，因此 大部分的視覺信息會被屏蔽。
用戶在網絡上的閱讀方式高度取決于：
用戶的任務目標
用戶習慣
頁面層級
頁面內容形式
這就非常明顯了：最后兩個因素是設計師可以控制的，并且考慮到網絡設計越來越先進，運用知識和技術推動用戶行為，而不是使電子產品成為用戶的阻礙?；谶@個原因，我提出一個設計原則。
有一些人說如果需要在圖標旁邊放一個文字說明，圖標就沒有存在意義了，因為它的認知優先級被降低了，成為了識別序列里的一個負擔。因為圖標視覺系統是建立在 邏輯原則 上的（和文字表達的意思相同），所以無論是對于有沒有相關交互經驗的用戶而言，圖標被認為是可以幫助用戶迅速理解功能的。
一個只有文字說明的軟件菜單和同時擁有圖標和文字的菜單相比，圖標可以幫助用戶更快的理解。在上圖中，根據用戶所期望的功能，可以看到菜單中的圖標帶有要訪問頁面的標題名。接下來，當用戶習慣圖標后，圖標將會更加簡單的引導用戶快速的在界面中尋找到所需要的內容。
當設計一個新界面時設計師需要知道，頁面必定會被有不同閱讀習慣的人使用。為了促進理解，我會把用戶分成三種人并且定義為：新手用戶、中間用戶、專家用戶。
新手用戶 — 就像你所想象的那樣，這是一個 第一次接觸 這個界面的用戶。如果這個界面是某個系統中的一部分，那意味著始終有某些功能點是他第一次接觸到的。這個趨勢是說，這個等級的用戶 理解頁面的速度會低于用戶理解頁面的平均值，并且花費更多的時間去理解語句直到找到所需的內容為止。
中間用戶 — 比新手用戶多一些數字產品的使用經驗，但并不是一個界面使用專家，理解界面的時間大概是處于平均值左右。
專家用戶 — 他們已經使用這個平臺很多次了，所以可以較快的閱讀，而且并不需要通過閱讀所有的內容去理解界面，可以 快速識別元素、布局和交互的視覺呈現。也許正因為這些原因，很多用戶 對產品界面的突然改變抱有抵觸心理。
現在，想想看如果一個投資 APP 每周通過 Email 將以下這個界面發送給用戶。用戶會不會閱讀上面所有的內容呢？每次打開都會閱讀嗎？或者只是閱讀對他比較重要的內容？
這個來自金融 APP 的卡片信息展示了用戶的收入?？纯催@個例子，你的閱讀順序是怎么樣的？我可以通過元素的擺放位置、比重、尺寸大小…所形成的視覺層級邏輯來理解它。由于缺乏明確的層級關系，有一些內容無法被精準獲知，必須在事后實際運營的過程中調試，通過用戶使用數據反饋來決定內容的優先級和必要性，并進行修改（使用 Hotjar，Crazy Egg 之類的熱點地圖可以收集數據）。
請注意在這些內容中：唯一的 動態信息 就是整個【 3 】模塊中的重要信息【 4 】中的內容。所有的郵件頁面中位于【 1 】的內容都是一樣的?！?2 】中的信息是不變的，并且重復出現在每一封這類型的郵件中，它們都是其認知標識的一部分。
第一次看到的用戶需要理解這是關于什么內容的信息，所以信息全面是非常重要的，但是 并不需要把所有信息都放在突出的位置上?？紤]到這點，通過 減少色彩飽和度、改變字號大小 等降低視覺重量的方式，是不打斷用戶閱讀過程的選擇。
一張展示了用戶收入的來自金融 APP 的 Email 卡片，它應用合理排版促進用戶更好的理解信息。
在上面這張卡片里，簡單的改變了內容排布，突出了最重要的內容。他們展示了 層級關系 對用戶體驗的影響。一味格式化的信息傳遞被更具個性化、同理心的方法所取代。頭部和底部信息與主體信息相合并，通過這種隔離降低了被突出的可能性。最后，將主按鈕更改為次級按鈕（具體情況要根據點擊率來決定，主按鈕可能是最好的方式，有背景色的主按鈕更能激起用戶點擊欲望）
在商業軟件環境中，確切的說是在大量的表格中，更多見的是列表標題比每一行的內容更加突出。因為標題是固定信息，而且用戶可能每天都會看到，而不是將重要等級修改為 主要和可變內容（列表內的內容信息）。
認識到設計界面時成本和實現功能之間的復雜性，遵循這一思路可以幫助設計師確定元素優先級，并且創建層級關系以提升用戶的使用體驗。同時，因為引導對新用戶來說是必須的，所以在設計產品的時候，重要功能需要結合良好的入門教程、功能提示和及時反饋。這樣便建立了可以提升用戶日活及留存的高效、友好的用戶體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
唐·諾曼提出了情感化設計的3個方向：本能層、行為層、反思層。但如何在一個項目中，通過情感化設計，讓用戶切實感受到這樣的情緒，一直沒有很系統的理論。恰逢58同城交友業務中有這樣的項目，可以實踐一下這方面的思考。本次活動中，嘉賓分享了直播禮物的價值與意義、直播情境情緒，并以此為基礎，探討了理性化搭建情感化禮物的設計體系。
禮物的價值是什么？有什么意義，為什么不直接用錢？禮物和金錢的不等價感受，決定了禮物是很好的消費載體；不同場景需要不同載體，禮物的多樣性滿足了不同場景的需求；直接送錢可能會讓用戶不爽。
禮物要匹配情境情緒出現，送錢也不太合適，而當前平臺已存在30多款禮物，但是用戶的使用次數較少，期望通過本次項目更新直播間的禮物，并提升ROI。因此需要重新探索直播間會出現的情境情緒，并設計與之匹配的禮物。
這款產品面向下沉市場、25~40歲、單身/離異的用戶群體。
設計情感化禮物的靈感來自于彼得·MA·德斯梅特的理論模式。
情感產生的過程：用戶對產品的關注點和產品所呈現的信息相結合會引發用戶對產品的評估，而評估的結果會最終決定用戶對產品的情感是什么樣子的。由于個體的動機、價值觀、態度的不同，情感產生的差異是不可控的，導致設計師在設計的時候處于一個相對被動的位置。因此期望可以為設計師提供一些方向性的指引，幫助他們更好地完成產品的設計。因此通過模型推導，了解用戶對產品的情感和關注點，從而推導出產品應該呈現什么樣的信息，從而幫助設計師做出更好的設計。
2.1 規劃思路：
2.2 實施步驟：
基于上述結論，給到設計師合理的方向性指引，快速上線了一部分禮物。在產品逐漸趨于成熟之后，需要對最初建立的情感指標進行核準，了解真正用戶在使用過程中對產品的情感訴求和關注點，進一步調整情感。
通過1V1電話訪談，對11名真實用戶進行了深訪。
在階段二中，主要探討了以下四點：
結合上述分析，提煉出了情感訴求和產品關注點兩個層面的信息。情感訴求層面，通過送禮場景和送禮動機的分析，將原來的5個情感指標重新定義為3個情感指標：自豪、愛慕、情欲。這3個情感指標將成為后續建立禮物庫的基礎。
產品關注點層面，從功能、體驗層面為設計師提供了方向性的引導。
用研通過上述一系列的研究和分析，僅僅可以給設計師一些方向性的引導，設計師在設計層面需要進一步結合分析結論進行拆解和設計。
情緒與意象具有一定的關聯性，它可能是生活習得的。例如：秋雨、孤獨的老人、掩面哭泣等都可以表達悲傷；又或者是被競品教育的，例如：火箭、跑車等，用于表達自豪，均是來自競品的教育。
我們可以從情緒誕生的場景來剝離構成意象的維度：
基于上述維度及元素，設計、產品、運營團隊內收集意象，主要方式包括以下兩類：
另一方面，也要收集競品的意象，同時需要將前面頭腦風暴產生的意象以及競品的意象進行形象類型、禮物形態、價格定位的分析和提取。
以此為基礎，可以構建情緒意象庫。某一種形象，在不同的場景和不同的關系下，可以表達不同的情緒。例如同樣是煙花，小仙女棒式的煙花和宏偉的漫天綻放的煙花所表達的情緒是截然不同的。因此我們根據所要表達的情緒，將所對應的形象、場景、關系收納到對應的意象庫中，這可以幫助一些視覺設計師快速給出設計方向。
下一步，即可為意象進行設計形態的處理。我們將需要處理的意象，以單一-復合 和 具體-抽象 為坐標進行了分類，從而劃分小禮物、中禮物、大禮物，以提供定價參考。
由于直播間涉及的禮物品類繁多，同時參與設計的視覺同學也較多，為了使得最終的產出有視覺風格上的一致性，針對每一種情緒進行了配色、光效、樣式、質感上的定義。
禮物定價趨勢方面，對競品的禮物進行了分析，將競品的禮物按表達的情緒聚合，并分析在這種情緒上，禮物價格的分布，來幫助我們了解競品針對不同情緒表達的禮物的定價規則，以指導自己產品的定價。
最后，禮物上線后，銷售量top10的禮物中，新禮物占比達到60%。同時同檔位中效益最好的一款，收益提升了1035.4%。
以上是關于理性思維搭建情感化設計體系的分享。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：UXRen 作者：寶珠
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在工作中常常被問到如何表達講述自己的設計，為了讓自己的設計有理可依，對接上下游匯報工作的時候，總結以下一些方法和觀點，幫助不知從何講述自己設計的人一些語言技巧。
以下僅是個人觀點，用作探討交流，文中所有舉例均為本人工作設計輸出。
設計師能做出好的設計，卻缺乏系統化的語言包裝，“如何講設計”不該讓它成為難題，做一個有產品思維的設計師，讓你的設計以理服人，我們要不止停留在視覺表層，更要從多緯度看待產品設計，本文將從以下三點簡述：01.產品設計的五個層面，02.講述設計的流程，03.關于本次總結
做好產品設計的第一步，是了解產品， 要對于產品的需求如何確定、產品定位如何決定有一個基本的認識，在產品常識里面最重要也最常用的就是產品設計的五個層面，也簡稱用戶體驗五要素——
作為UI設計師，所處的視覺設計是表現層，是確定產品的最終形態，因此也處于產品設計的頂層（能被看到），是一個具象畫的呈現；其次，往里推框架層，是確定產品外觀，將界面信息和導航設計有序歸類，讓用戶使用或者理解；結構層是為用戶設計一個結構化的體驗，將零散的元素轉化為有序立體的空間；范圍層確定產品的功能和需求；最后戰略層是確定產品目標和用戶需求；底層邏輯結構決定上層意識形態表現，因此在設計前我們要知道產品是屬于洞察階段，設計中是屬于產品設計解決方案階段，整體的產品設計是一個概念通過無數個層面的努力，經過時間，轉化為具象表現的過程，所以我們在完成一項設計時，應該講述一個完整的設計思路 ，不要讓自己的設計思路僅停留在表面。
整個產品的設計產出是一個抽象到具象化的過程，設計的前期屬于產品洞察階段，這個時候一般由團隊的老板領導結合當下市場需要，有用戶的需求就有商機，想出產品大致的方向（戰略層）然后通過產品經理整合梳理高層的意見確定產品大致的功能和內容輸出原型（范圍層），交給交互設計師優化產品細節邏輯和信息具體框架，經過研發評估能夠技術實現產出交互稿（結構、框架層），這里已經過渡到設計解決問題執行階段，最后是給到界面設計師美化視覺產出高保真（表現層）。
也就是到我們自己設計輸出之前要經歷這么多，如果能在講述自己設計的時候，提前去了解這些，那么設計內容就不愁沒法兒講，光是闡述自己的設計思路就可以講出一個故事，這也是為什么現在很多品牌賣貨都開始營銷產品背后的故事由來。我們設計能做好，也要會用語言推銷自己的設計成果。
設計是對于某件事精心準備的過程。好的設計作品，應該擁有完整的設計流程，因此我們在講述自己設計作品的時候，有一套完整系統化的方式是非常有效的。完整的設計流程包含以下4個步驟：
第一是我們需要去了解設計的需求背景，知道大概的方向——
來源（簡單理解就是誰提出的問題）需求有可能是你的老板、你的產品經理、或者交互設計、或者視覺上的問題···
背景（籠統一點，就是這個需求是新需求還是原來有然后進行改版優化）需求的基層性質是什么，原本調性是什么，我們要做什么樣的產品···
目標（目標一般都是需要解決什么問題）搞清楚為什么做這個需求，能解決什么痛點，不做無用功。
誰提出的問題，是新的需求還是舊的問題，或者我們要解決什么？圍繞這幾個方向將你的設計概述出來，會讓非專業的人也能聽懂你做了什么，舉個簡單的例子，我們公司后臺一個很小的產品bug需求，往往這種需求就是產品經理的一個截圖和他標注的兩句話——
然后你完成了這個需求單，在傳達給非產品經理以外的人的時候，你有可能是以下轉述方式——
毫無疑問，你就是將需求者的意思一字不落的轉達了，但是對于其他的聽者來說，你的轉述平平無奇、毫無意義，甚至都沒有印象你做了什么，所以你應該講清楚這個需求的背景——
設計需求來源是誰，原本屬于產品哪個模塊（來源），他原來功能是怎么樣的，界面上展示的結構哪里有問題（背景），視覺用了什么樣的方式改成什么樣，解決了什么痛點（目標）
講清楚誰給的需求，需要解決什么問題，是在原來的基礎上不變動邏輯的情況下增加了什么達到了什么目的，才讓你的敘述更完整，聽起來更有邏輯。如果是一項新的需求，沒有背景，那還得從設計分析說起，設計分析就是讓你更專業的去做事，設計分析分為——用戶分析，設計目標，和設計手段三個要點：
首先用戶分析就是，分析你做的東西給誰看，而用戶又分為群體用戶和獨立用戶，在c端常見的就是獨立用戶，他們通常不定性，且有很多特征；在b端，目標用戶一般是群體，他們大多數是有場景特性和行業特性，針對獨立用戶和群體用戶，我們得出的用戶特征、基本信息、需求結論也是不一致的，所以我們應該結合產品的調性分析一下我們做出來的設計究竟給誰看給誰用。常見的用戶分析方法有：用戶畫像、用戶訪談、問卷調查、焦點小組、眼動測試、用戶反饋以及大數據分析，這些方法中最簡單的是用戶畫像，就是舉實際的例子列出真實用戶的特征信息及使用場景。B端用戶分析方法常用大數據分析和用戶反饋，這兩種方式通過對接需求的上下游就可以得知。
通過用戶分析得出需求結論，滿足需求就能達成設計目標——
設計目標結合卡諾模型來分析，卡諾模型—反應產品性能和解決用戶需求的滿意度的一種非線性關系，具體想了解的可以自行百度，站在巨人的肩膀上我們看得更遠。 卡諾模型具備4種屬性 ：1.必備屬性：滿足這個需求，用戶滿意度不會上升，但不滿足這個需求，用戶不滿意會大幅度降低 ；2.期望屬性：提供個性化需求，用戶滿意度會上升，不提供此需求，用戶滿意度會降低； 3.魅力屬性：用戶意想不到的效果，提供此屬性，用戶滿意度大幅提升，不提供也不會降低 ；4.無差異：無論提不提供，用戶滿意度都不會改變，根本不在意；因此在做需求的時候我們應該盡力滿足基本需求和期望需求，而可有可無的需求盡量不去做，降低效率。幸福需求是不容易達到的，如果能滿足是非常棒的～這里就像是滿足了設計心理學的三個層次——本能、行為、反思。
接下來是大家都熟知的設計手段，適當的講一些述專業的設計技法，用不同的手段去實現的主畫面，最后達到完成設計目標這樣的結果，會讓你顯得更專業。設計的手段有很多種，這里主要講述常用的三種，構圖排版（采用什么構圖方式，為什么這樣構圖是因為什么設計原則）、色彩運用（為什么使用這個顏色，因為這個顏色給人的心里感知是什么樣的）、設計風格（采用什么風格最貼近產品調性，為什么用這個風格），但是講設計時一定要記住產品的調性，不能偏離產品本身，不要盲目套用絢麗的技法，否則是不合適的。
很多時候面對非專業需求方收稿時，可能看到如下話語————
（心里是不是xxxx····“萬馬奔騰”，用個文明點的詞）
非專業人士無法理解這二者的區別，他們認為他們的設計手段能達成設計目標，而作為專業設計師的我們就應該引導對方說出設計目標，再用我們專業的手段去滿足對方的目標，去實現減少改稿次數，而不是讓非專業人士去指導專業人士修改設計手段。分清這兩者的區別，我們就可以在設計引導中更加主動。用設計分析的方法來講述設計，舉個例子——
會議管理——會議預約移動端優化，因為這是我們原有產品EKP里面的模塊，PC端和移動端都有，因此用戶可能是群體也可能是個人。所以針對獨立用戶和群體用戶都做一個用戶畫像，得出他們的一些需求結論，然后目前幸福需求是沒有的，純屬個人建議，日后如果有此功能，想必用戶的滿意程度也會大大提升。
概括一下已完成的整體主要頁面，分析設計目標：
頭部屬于流量量較高的區域，采用卡片式設計，將會議內容置于此處，作為頁面信息關鍵層，采用左對齊方式排版，突出會議標題和時間提醒用戶。
通過不同的顏色標簽，區分參會人員狀態——
待進行未有操作反饋，選用橙色，屬于可以持續進行并有明顯提醒作用
已做反饋屬于成功操作，選用已有用戶認知心理的綠色
已知信息拒絕參與，是不太重要的，屬于不再進行的階段，選用灰色
接下來是設計作品的產出過程，一般情況下不可見的過程，為什么要去講， 因為一個東西從無到有是很不容易的一件事，如果能講述過程，就可以引燃情緒共鳴，讓別人記住，讓自己的設計作品也能有始有終——
設計過程一般分為四個階段：初期階段、中期階段、最終定稿；具體的關鍵詞和描述可以通過以下方式提煉出來，這里就不做詳細說明了。
拿運營宣傳來舉個例子，我們公司中秋節月餅禮盒包裝主視覺設計——
整個過程應該是有一個系統化的說明的，省略為寫字的地方是我們可以插入的具體圖片和過程，步驟差不多就是上述這些，可以有最初階段的頭腦風暴-提取關鍵詞-清晰定位到中期階段的團隊合作—風格擬定-精選方案-細節刻畫以及和物料方溝通對接的打樣確定工藝等等過程…再到最后定稿的體驗還原-問題優化…主畫面的誕生是不容易的，強化這種過程參與，讓不被看見的事也能展現。如果實在不好記錄，你可以從一開始就截圖你繪制的過程——
上圖是用PS截圖，再用時間軸將每一幀動態循壞播放，導出GIF然后截一張不變的底圖合成就可以了。
最后是數據驗證階段，這個是設計落地的直觀證實，包含主觀認可和客觀數據，具體內容就是通過用戶或者專業的人士反饋給你設計落地的好壞，來判定你做的是否優秀成功。通常這一塊的數據決定你驗證你前面所有的過程，只要按照該流程認真做了，最后效果通常不會太差，如果出現很大的偏差也往往是意料之外的，因該尋求團隊一起解決，不是某一個人的問題。
根據以上最后我們總結，好的設計就是滿足以下4個方面：好看，好用，好記，能實現。設計師要考慮的維度不僅僅在視覺層面，什么是有產品思維的設計師，就是在執行時候要考慮上下游不同職能的工作內容，如果你的設計不能實現，再好看也是白費功夫的～從產品交互視覺多層面談設計，會讓你的設計包裝顯得不那么單調，系統化的方法總結到此，不足之處多多包含～謝謝你的閱讀！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：YiVi_eleven
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
年少時，經常聽到身邊的同事聊一些名詞概念，羨慕之余猶豫羞于提問，導致我經常會陷入其中無法自拔，痛苦不已；過了這么多年，大多數概念都隨著工作的原因慢慢被理解和消化，或逐漸消失或不再提及。但唯獨，“設計系統”這個詞陰魂不散，反反復復的出現在我的面前，特別是在面試這個場景下，幾乎每一場都會有這個詞被提到。
也源于最近做B端稍微多一些，不如今天就以toB產品為例來嘮嘮我認知下的設計系統是什么以及如何幫助設計落地執行的。
理論上來講，設計系統分為兩個大部分，一部分是指導思想，另一部分是實際產出；前者去指導后者執行，二者的關系像極了競技運動中的教練安排的“戰術”和球員場上的“執行動作”，如果用一張圖來表示，大概就是這么個事：
需要強調的是，要設計一套“設計語言”，首先需要聚焦到“語言”這個詞上，通常我們認知里的語言無非是一套溝通方式，因為我們對他習以為常，所以并沒有更進一步的了解，我試圖去查了下語言的來源，以及為什么世界上會出現這么多語言之類的問題，搜過出來的結果很多很復雜，但概括來說就是支撐一套語言的核心分為“語言特性”以及“語言構成”這兩大部分。
第一塊，詞匯：ta的作用是讓你表達出想法，就好比如果你跟我一樣English is not good的情況下，還嘚嘚瑟瑟的出國游玩，一定也經歷過用“蹦單詞+比劃”的方式去問路、點菜吧，典型的通過word的方式傳遞信息。
另一趴，語法，ta會讓你更順暢的表達出自己的想法，通過對詞匯的重組和編排，信息傳遞的有效性被大大增加，你可以通過“主動賓”來陳述觀點或表達疑問，盡可能的豐富此刻你的所思所想。就像上面的例子，按照語法規則稍微調整一下，看起來就順暢多的多了~
那么如果映射到設計上，顯而易見，組件庫對應詞匯，交互流程對應語法；所以你會發現當我們不斷迭代產品的時候，我們無非就是想把產品當做一件事情講清楚罷了。
再就是當一套組件被創造出來，ta需要遵循一定的規則形成一個完整的頁面，跟我們造句幾乎一模一樣；所以這個時候充當語法的交互流程就至關重要?，F實情況下，往往交互形態是千變萬化的，經常性的會因為業務場景的不同創造一些流程出來；但如果是基于語言的背景下，我們需要盡可能的抽練一些標準化的規則形成語法，我們稱之為“設計模式”：
我從中挑了搜索這個比較通用的模式來簡單講下；拋開組件的“點”思維，需要我們定義的是“信息交互”的“線性”流程，我試著把其中的每個環節提煉了出來，抽練了一個流程出來：
通過上圖也許你會發現“模式”注重的是流程節點的體驗感知（用戶跟產品交互的一來一往），并注重封裝成標準化方案。另外有一點，我把整個搜索的過程分為了2個個小線程——輸入行為和消費行為，這是為了以后團隊協作更好的理解這條模式的運作方式，以及之后的拓展，舉個例子：產品經理決定加一個歷史搜索（就是顯示用戶過往的搜索結果），這個時候設計師就可以把這個功能當做一個拓展包，直接扔到這個主干里來：
另外，toB CRM鼻祖salesforce在自己的設計網站上公布了他們的設計模式，給出了一些特定的場景下的解決方案，不過寫的相對更偏組件流程一些：
PS . 插個有的沒的的小話題，一個很好玩的事，如果你細心琢磨的話，也許會發現其實組件本身也是帶有一定的潛在交互，這種交互不需要你特意安插，天生就有，就好比一個按鈕擺在那，在沒有任何引導的情況下，正常人也知道點一點。所以映射到語言里，語法貌似并不是必要的（當然ta的存在是為了設計系統更完整，產品更好），比如這個爛大街的梗：
這種現象是著名的“貝葉斯理論”，利用相關信息總結出未知信息，也就是說我們的大腦是可以通過殘缺的信息來補足未知的信息的，人類的大腦真的是奇奇妙妙啊~
相比構成，特性這個就好理解多了，相當于設計原則這類的，我們需要通過一定的規則約束對語言有一個明確的指向；比如現代漢語就具備適應性、開放性兩大特征。
但不得不說，作為面試官我個人不是很喜歡作品集里描述設計原則的時候就3個詞：“簡潔”“高效”“清晰”。并不是討厭這三個詞，而是當我追問候選人為什么是這三個的時候，我得到的回復基本是Material Design（或其他大廠的設計系統）就是這么寫的亦或是其他很蒼白的回答，這無疑是暴露了對設計系統的認知殘缺，是一個非常掉分的互動過程。其實，當google、IBM、salesforce在對外宣講他們的設計原則的時候，也許就只有兩個字“清晰”，但背后或許有非常多的思考，甚至超乎你我的想象。
但...異乎尋常的是，AntDesign 的設計原則寫的很"深奧"，憑我的功力真的看不出背后的東西，也不知道如何指導設計（也許他們是在探索設計哲學吧哈哈哈哈）：
當我們對上述各方訴求梳理清楚后，首先要精準的概括和整理這些內容的權重和占比（需要注意的是，雖然允許多個原則存在，但也要有一定的側重和比例，這種做法在順暢的環節上不會有所建樹，但在多個原則沖突的情況下為了保全大局，順應占比最大的原則是相對穩妥的選擇，一定程度上可以幫助設計師規避掉不必要的糾結或撕逼的過程）；再然后基于當下的情況產出相應的原則，形成整套設計系統的王炸：
但在實際操作中，高度整合后的設計原則雖然指明了方向，但缺失了可衡量性，這就會導致“認知偏差”的情況，因為每個人對圖例中的“高效”或“靈活”理解不同，會對同一個事物有不同的理解，就跟“小馬過河”這個典故一樣，小松鼠覺著水很深，小馬卻覺著也就那樣；也正是基于此，需要設計師們在此基礎上拆分明確的細則，幫助整個團隊建立統一認知：
到這一步基本上設計系統就被定了調了，我們可以明確對一個設計進行評判和衡量，以“清晰”為例，我們有個B端產品里面有個表單填寫的頁面，需要用戶提供一些個信息，前兩天，團隊一個設計師做了個方案是把表單新開tab，但產品覺著不夠清晰，反而覺著蒙版的形式更清晰。他就很疑惑，明明信息獲得了更好的展示咋就不清晰了？
說到底，是我們在做設計定義的時候，對“清晰”的認知就是偏薄的，這個案例里面顯然第一個方案對信息的展示更加充分明了，但在這個場景下“清晰”并不僅僅指的是信息呈現，產品經理希望用戶透過浮層能確認當前處在哪一步（或哪個頁面）也同樣是一個維度；從這個case里，你會發現，定義一個原則真的不僅僅是搬運一個名詞這么簡單，所有的原則和特性必須遵循易于操作且合理，這樣才是一條合格且優秀的原則。
ps . Salesforce的Lightning設計系統是我最喜歡的design system之一，原因很多，其中很重要的一條是因為他們真的是把“美”作為一個很重要的原則：
色彩體系的定制往往是重災區，最常見的做法是把顏色用色塊的方式一字排開，一排叫做品牌色，一排叫做輔助色，還有一排是灰度：
這種定義存在很大的風險，就跟菜譜只告訴你需要哪些食材，不告訴你配比一樣，做出來的菜大概率是一塌糊涂，難以下咽。所以如果你正在建設一套團隊協作級別的設計規范，務必要把“協作”當做最重要的事，用比例的方式來告訴你的隊友他們應該怎么做：
同理，其他的模塊，比如字號，間距，圖標，我都建議盡可能的“場景化”，讓設計規范有一定的代入感，這樣會大大提高設計的效能和品質。
拋出這個問題，是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點；我個人是很難以認同這個的，對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合，需要調動整個團隊的想象力和創造力，最終達到一個統一共識才有可能被實施和執行；其次，創造力并不全是設計個btn或者彈窗，真正能展示創造力的是像樂高一樣，通過零件（組件）拼裝成各種各樣的令人嘆為觀止的創意，那才是我理解的創造力：
另外從系統性思維上講，如果在不考慮資源的情況下，我倒是挺支持每一位設計師都自己去設計一套設計系統，因為在我們平時看來，2/3年經驗的設計師和10年的設計師他們的產出物或許不會差太多，但對設計觀架構的能力千差萬別，前者依賴感覺和直覺素養做事，后者更靠縝密的邏輯和推理來做事；我更喜歡后者多一些，并不是因為他們講起自己作品的時候聽起來多么高大上，而是因為依據推理方法可以時刻保持輸出的穩定性。
我無意詆毀這兩大巨星，也無意內卷，只是想說，做事，終究不能托付給“天賦”和“靈感”，勤奮和努力在一定程度上也許可以幫你飛到更高。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：負能量補給站
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
RayData作為一個系列的可視化工具，內容資產作為基礎的構成發揮著重要的作用，在日益更新迭代的過程中，會發現每條產品線對圖表組件的需求都很繁重，無法避免地重復開發。通過開發通用型組件可以一定程度的解決問題，但是存在靈活性差，組件庫維護困難等問題，而且內部產品圖表庫各自獨立，缺乏統一的設計語言。
通過對類似競品的調研，發現圖表做為承載數據信息的組件，本身只是工具，它的使用體驗優劣還往往取決于業務需求、數據類型、圖表本身的視覺效果接受度等因素。而且圖表類型的豐富和靈活程度，使用的框架及響應時間，商業或免費和開源狀態也都是評判標準之一。
無論是小而美的個人項目還是大數據可視交互管理系統，項目生命周期的前四分之三階段，進行的緩慢糾結，充斥著大量需求變更，新想法的臨時加入。當多個項目同時展開，圖表組件效果是否靈活多變、復用性的高低對制作人員生產力、客戶方耐力、項目最終達成時雙方的消耗力有極大考驗。
通過對類似競品的調研，發現常見的可視化圖表庫都存在自身的局限性，體量大，功能冗余，更新緩慢。最終促成了我們從兩個維度入手，提煉關鍵詞，簡化并轉化成圖表庫系統的功能點。
圖表存在很多分類方式，基于形狀命名、作者命名、抽象概念命名和數據結構命名等。
為了更好的幫助使用者快速定位，我們簡化了圖表大分類，依據人對形狀輪廓最初的感知，調動直觀的感受來進行分類和命名。
整個圖表庫的設計層包含顯性和隱性的兩種，顯性的規范面向用戶，隱性的規范面向開發。
通過調研常見的工具類產品，結合對產品易用性的理解，我們把產品的顏色方案提出來單獨定義一個全局的顏色方案，以便一套配色貫穿整個項目使用，然后對通用的設置和個性化設置分開設計。
可視化的組合來源有四種：視覺暗示、坐標系、標尺以及背景信息。
其中視覺暗示是比較重要的組成，以直角坐標系結構為例，對大分類下的參數進行深入挖掘。
從設計的角度出發，我們希望賦予圖表樣式更多的可能性，開放高度自定義的調節參數。
通常用戶在初次瀏覽圖表時會把注意力放在圖形的差異化上，比如突出的顏色、突出的圖形，但并沒有及時將所有的數值聯系起來，之后才會進行比較，然后再看整體、分布和多變量關系。在顏色和屬性系統中單獨設置最大值、最小值的顏色和樣式，可以使得圖表展示信息的信息維度更高一層。
數據可視化是基于物理世界反饋的信息，通過用各種視覺變量（例如圖形、顏色、維度）把數據進行編碼、再現的過程。
色彩是數據可視化中濫用和忽視最嚴重的變量之一，也是所有視覺變量中最富于變化的一種。
信息圖表除圖形外感官最明顯的就是顏色，為了能夠達到圖表設計的高度自定義，色彩的搭配、自定義的程度，每個圖元都有對應的顏色設置。
從設計的角度出發，嘗試在顏色系統中加入陰影、發光、全局陰影等結構，進一步還原設計的圖形處理習慣，豐富圖表的表達。
可視化項目的配色一般來源于實際需求和3D場景效果的搭配，通常是不能預判配色的。
在這種情況下如果需要幫助項目的快速搭建，預置方案就要做到覆蓋面廣，適應性強，控制取色范圍，由此提出以下原則。
制定規范時候我們確定了默認的布局方式，綜合實際使用，以柱狀圖為例，寬度滑塊的最大對應100%寬度，圖形撐滿，更貼近使用者的直覺，另外考慮到多端融合，涉及到一些放大預覽的功能，默認選用百分比布局更合理。
在實際配置圖表時候，圖形和文字的位置關系千變萬化，為了應對這種情況我們引入了文字基線位置和相對位置作為位置參照。使用中配合偏移量調節基本能覆蓋所有的情況。
為了應對項目靈活配置的需求，我們把圖表編輯和Config參數結合，可視化控制生成的圖表Config參數，直接導出到項目使用。
除了勻速動畫，為了達成更自然的動態效果，引入緩入緩出速度曲線，同時為了達成更豐富的表達，增加了一條簡潔的回彈曲線
動效是圖表數據表達的一個重要構成，針對圖表的動效，通過總結圖元的運動方式，結合Material Design的一些處理方式，整理了一套圖表元素動效規范集合。
針對缺乏靜態數據等真實數據源，檢驗生成圖表的視覺效果的問題，我們為用戶提供了指定范圍隨機數生成功能，可以快速生成與應用項目數據相類似的效果。
顏色配置方案能在同一項目中起到控制整個顏色風格的作用，可以快速應用到圖表上。
圖表庫在項目中的應用
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者:RayData實驗室
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著信息碎片化趨勢的加強，用戶的注意力也呈碎片化趨勢，本文主要分析了用戶注意力的類型以及如何合理吸引用戶注意力。
在界面設計中，我們常常能看到許多產品以各種形式搶奪用戶注意力，比如彈窗、通知提示等，亦或者通過色彩、大小等設計方式。大部分情況下，這些搶奪注意力的方式簡單粗暴，如果不能在適合的場景采用相應的設計手法，不僅達不到期望的目標，反而影響瀏覽體驗。 
在信息量極其龐大的當下，信息被割裂得更加碎片化，現在可以滿足用戶訴求的產品太多了，許多產品的拉新成本高得離譜，關鍵是拉新后，留存也是令人頭禿的問題。
每個企業都希望自己的產品可以獲取更多用戶流量、提升用戶活躍，自然就需要想方設法吸引用戶注意力。這是一個酒香也怕巷子深的時代，產品能滿足用戶需求、有著極致優秀的體驗還不夠，還需要讓用戶知道你的好，讓自身產品吸引更多目標用戶，是每個產品的愿望。
用戶的注意力也呈碎片化趨勢，很容易受到外界的影響，并且這種注意力分散的趨勢會越來越明顯。可能用戶上一秒在看公眾號，下一秒就打開了抖音，然后看到微信消息，點進去回兩句...一天過去了，最后發現好像什么事都沒有干成。
這就是矛盾的地方，一方面產品希望留住用戶，另一方面用戶在各產品間反復橫跳，就是不在你的產品里面待著。
研究表明，用戶的注意力只能維持在 10 分鐘左右，大腦在短暫休息后可以再次集中注意力 7-10 分鐘，7-10 分鐘差不多是人對任何任務保持專注的時間上限。
用戶容易受到各種信息的影響這不假，但是如果采用錯誤的設計方式吸引用戶，非但不能如愿以償，反而可能引起反感。
作為交互設計師，我們要了解用戶的注意力是如何被吸引的、如何通過設計在不阻礙用戶的基礎上適當吸引用戶注意力、哪些場景不該干擾用戶注意力，這些都是我們需要面對的問題。
現階段，由于體驗設備的限制，大家大部分情況下還只是與手機、電腦等設備進行交互，此時我們接收信息的方式主要包含：視覺、聽覺、觸覺。我們借助這些感官與世界和設備交流，下面會介紹設計師該用什么方式合理獲取用戶注意力。
界面設計的組成部分主要是控件、圖標、文字信息、色彩等組成，而要想獲取用戶注意力，設計師必須清楚哪些信息應當突出，哪些應當弱化，如果所有信息都想突出，那就相當于沒突出。
大腦有兩種處理信息的注意力機制。
一種是通過視覺、聽覺、觸覺等感官獲取信息，這種機制是“自外而內”（自下而上）的，即我們從外界感知的，此時的影響因素是外界刺激而非內心驅動，甚至人們自身在這個過程中都沒有發現被吸引了注意力。
另一種是來自我們自身的，如記憶、想法等，是由我們的主觀能動性進行驅動，比如你在專注思考今晚吃什么（這真的是一件糾結的事），這是“自內而外”（自上而下）的，沒有這種注意力，就沒法專注起來。
這兩種注意力并沒有孰好孰壞之分，都在我們生活中起到至關重要的作用。區分這兩種處理信息的機制并不難，問題主要出現在我們了解這個有什么作用？
那當然是有用的，舉個簡單的例子：
馬蜂窩的首頁是內容信息推薦，用戶在這個場景中，如果是瀏覽首頁的旅游地點信息流，沒有攜帶特別明確的目的，就會更容易受到信息流推薦的影響，比如有吸引的圖片、標題、按鈕等，都很容易吸引用戶，此時的注意力屬于“自外而內”的。
此時設計形式以圖片為主，文字在界面中的占比相對較小，起輔助作用，在這種場景下，圖片相比于文字更容易吸引用戶。
而如果你想去成都旅游，于是你搜索了成都，想看看成都相關的游記，這時情況就不同了，因為你在搜索時具備了比較明確的目的。
你會關注搜索的內容哪些是和成都相關并且你感興趣的，此時你注意力可能在搜索結果是不是能滿足需求，這時注意力屬于“自內而外”的。
因此，頁面設計的關鍵就不是整些花里胡哨的操作，而是讓用戶便于高效搜尋，比如把你的搜索關鍵詞高亮突出，信息采用高效的列表排列。
說到這里，我們了解到了注意力的“自下而上”是被動的（外界的刺激），“自上而下”是主動的（個人意愿），而且針對這兩種不同的注意力機制，有不同的設計方式。
這次我們主要講的是：外界刺激下的“自下而上”的注意力類型，討論哪些設計可以更快、更直接、更合理地獲得人們注意力。
人們每天醒來就要與外界進行各種“溝通”，只要一走出門，就是面對外界的各種變化和信息，觸覺的、視覺的、嗅覺的...所以人們不可能注意到所有事物，比如馬路上的車在跑，你可能只會關注到法拉利。
一般來說，人們更傾向于關注事物的顯著特征，比如顏色和大小，心理學家稱之為“顯著線索”（salient cue）。人們的注意力有限，所以大腦會關注比較重要的、差異化的信息。
人們不擅長區分細節信息，因為在大多數情況下，顯著線索已經足以幫助信息之間的差異。不信，你看看下面哪個是小米的新 logo，拿來檢測視力，用的都說好！
所以，不要指望用戶一定會關注你界面中設計的關鍵信息，你所認為的“顯著線索”對用戶來說未必很明顯。如果你擔心人們會過濾某些信息，可以嘗試用以下的方式吸引他們的注意力。
大腦有自身的信息處理注意機制，我們需要了解其基本運作規律，在設計中更好突出我們的重點信息，弱化次要信息，在合理吸引用戶注意力的同時，盡可能降低對用戶的干擾。
視覺是一切感覺之首，大腦的大量資源都用于接收和解析眼睛見到的信息，上文講到，差異化的信息更容易吸引注意力。在設計中，有許多種方式可以達到這種效果，從視覺的角度看，有顏色對比、大小對比、形狀對比、清晰度對比、陰影對比、運用圖片、動態信息等方式。
如果設計師想吸引用戶進行某個操作，顏色一定是最常用的手法，但這里的關鍵在于，加強顏色的對比，而非整個界面都用重點色突出。沒有對比，就沒有傷害，顏色也一樣，沒有對比，就沒有突出。
下圖中，美團外賣“我的”界面，盡管“我的功能”、“我的服務”、“更多推薦”都是采用黃色高亮色，但由于缺少對比，所以在這幾個模塊中，并沒有哪個功能顯得更為突出。其次，一屏之內，出現了 8 個小紅點，看起來更像是在玩消消樂，用戶看了，也不知道先點哪個后點哪個，那么干脆就不點了吧，如此一來，反而達不到預期的效果。
反觀懂車帝的界面，突出高亮顯示的功能，只有“發布”、“任務中心”，界面相比起美團更清爽，減少了許多視覺壓力，此時用戶更容易聚焦到對應的功能。
我們常能看到網上的鄙視甲方的話，甲方說標題一定要大！要粗！但實際上，一般情況下，加強元素的大小、粗細對比，能夠豐富設計的層次，人們的視覺總是更容易受到更大視覺面積的影響，因此文字大小、粗細對比確實能夠讓用戶的視覺有非常清晰的聚焦點。
在大廠的設計中，我們能看到非常多設計都是遵循這種理念，比如 Apple、小米等。
apple 官網
小米官網
看看下面的圖片，你會注意到什么元素？
是的，我們的注意力會很自然地聚焦在差異性的圖形上，而忽略相同的視覺信息。形狀結構差異性，在引導用戶視覺瀏覽動線上，也是常用的手法。
以知乎為例，在知乎會員頁中，列表整體上均以左圖右文的形式展示，在這種相同結構下，用戶瀏覽動線相對比較統一，而界面中間配置了 banner 圖片，在結構上形成了差異化，則更容易在視覺上形成突出效果。所以，就算這張圖片換成小圖，或者其他的結構形式，也同樣可以達到區分的效果。
當清晰的物體和模糊的物體放在一起時，人們會先注意到輪廓清晰的物體，而模糊的信息則容易形成背景。
iOS 是模糊效果運用最多也是效果最好的系統，這種效果不僅使界面整體更沉浸，減少頁面層級變化的視覺割裂感，還能將邊緣輪廓清晰的內容凸顯出來。
陰影效果可以讓元素在原有界面的 Z 軸方向上進行突出，可以與界面其他未添加陰影效果的元素有明顯區分，在視覺層級上更高。
在 Material design 上，陰影被用來體現元素層級高度，陰影大小反映 Z 軸的卡片高度。感知上距離界面越高，陰影越大。
以美團會員頁為例，頂部的會員卡片由于加上陰影效果，信息層級上顯得更高。
毋庸置疑，圖片信息相比于文字信息，更能吸引用戶的注意力，因為人們對于圖像識別能力幾乎是與生俱來的，有時候圖片傳遞信息會比文字更快速、更直接。許多信息（比如情緒、氛圍感）很難靠文字傳遞，恰巧這些正是圖片最輕松傳達的。
以 App Store 為例，當圖片與文字放置在一起的時候，圖片的吸睛效果會比文字更強。盡管圖片并非在頁面最上方，用戶未必會第一時間知道這是一張什么內容的圖片，但知道視覺有一張圖片，視覺吸引到該處的概率會更大。
此外，人們對于圖片中人臉的識別更為突出，據研究，在大腦有一處特殊區域，專門用來識別人臉，稱為梭形臉部區，可以讓人臉識別繞過通常的視覺解析渠道，從而得到快速識別。
視覺對運動物體有一種特殊的處理機制，當視線中出現了運動物體，眼睛就會不由自主地轉向運動物體，視覺焦點中心也隨之移至運動物體，這是反射性注意。在設計中，合理地使用動態設計效果，能夠很輕松地引導用戶注意力。
以下面優酷信息流為例，界面中的動態圖片更容易獲取用戶的視覺注意力。
視頻也是動態信息的一種呈現形式，在視覺媒介中，按照吸引用戶注意力的程度排序，分別是：視頻、圖片、純文字，視頻由于本身的動態特性，在對靜態信息的對比中，吸引注意力的效果尤為明顯。
在手機上，許多產品都會采用視頻作為宣傳的形式，視頻能夠承載較大的信息量，同時傳達的效果又直截了當。
聽覺在設備中的運用也很頻繁，常見有提示音、鬧鐘等，比如支付寶、微信在收款時，也有收錢的提示音。
特別是在手機上使用聲音作為交互的某種反饋時，需要注意選擇恰當的聲音，避免引起用戶反感，在聲音的使用上要謹慎。
固定的聲音（如鈴聲）對于用戶而言可以形成條件反射，下課鈴聲響了，你會意識到是下課了；鬧鐘響了，你會意識到今天又是元氣滿滿的一天。需要注意的是，倘若聲音的出現與用戶沒有存在關聯，久而久之，這種聲音就容易被用戶忽略。
對于視障人士而言，聲音還是接收信息的主要渠道，比如 iPhone 的旁白功能，此時用戶操作的注意力會集中在對聲音的感知。
與觸覺相關的接收信息方式主要是振動，在與設備交互功能中，人們對于振動反饋的要求越來越高。在手機設備領域，許多廠商開始有意識地采用更好的振動馬達，目前就是提升振動反饋。
振動也是在關鍵節點吸引用戶注意力，當用戶操作成功、失誤的時候，給予輕微的振動反饋，能夠加強用戶對當前狀態的感知。
一次只做一件事，盡管許多人認為自己可以一腦多用，同時處理多件事，但是研究表明，人們在大部分情況下，很難同時完成多個任務。大家在一定有時會遇到很煩躁的情況，比如一下子要做設計，一下子又要開會，時間被分散，注意力無法集中。同樣是，當用戶面對復雜的界面時，也會出現這種情況。
在設計界面時，倘若界面有太多干擾項，就會增加用戶的認知成本，無法快速辨別該執行什么操作。
以 App Store 和潮汐為例，下面這兩個頁面都可以看出信息的專注性，App Store 以卡片形式清晰呈現每一個專注或應用；潮汐首頁只突出了底部的四個操作。這些都讓用戶盡可能減少無謂的信息干擾，專注于當前界面的操作。
你以為我講了 App store 和潮汐的例子就完了嗎？上面的 App 由于定位和商業化程度的不同，才有了這種簡約的設計形式，大多數設計師面對的界面是產品極力要求把所有信息都在一屏之內塞得滿滿當當。
面對商業化，許多設計師可能會認為毫無有心無力，但是日常處理復雜的信息量才是許多設計師的常態，大部分業務由于商業化等原因，都會往界面塞進更多內容。
交互設計師除了了解產品功能，還需要考慮如何組織、轉移這些復雜的信息，如果信息組織得當，也可以強化重點功能模塊，合理引導用戶的注意力。
以貓眼為例，首頁承載著功能入口和電影資源推薦等功能，但是通過合理的信息布局，仍然可以使界面結構變得清晰。
Krug 可用性第三定律提到：去掉每個頁面上一半的文字，然后把剩下的文字再去掉一半。
盡管上述提到的定律有點夸張，但是，繁雜、多余的信息文案，確實會讓用戶花費更多時間理解，當用戶無法快速了解內容信息時，注意力就容易漂移。在設計時，設計師尤其要記住，在保證信息完整性的前提下，盡可能讓文案更加簡短，做到讓用戶快速領會到設計所表達的意思。
信息易讀性，是獲取注意力的基本，用戶是懶惰的，不要期待用戶會在如何了解你的產品這種事情上花費太多時間。
以下圖為例，左邊文案“你必須先登錄才能提交訂單”明顯就不如“登錄并提交”來得直觀，在交互文案中，要格外注意信息表達的精簡性，當然不能以犧牲表達的信息完整性為代價。
內容相關性，即推薦的內容與用戶相關，許多內容型產品，通過算法等方式，根據用戶的偏好進行內容推薦。
抖音視頻推薦、頭條資訊推薦、網易云歌單推薦、淘寶商品推薦...你會發現，我們生活在一個所有資訊信息與我們相關性極高的世界，因為他們推薦算法，很大程度上就是基于我們歷史行為而推薦的，如果是不相關的信息，我們可能壓根就不會看，我們被這些信息吸引注意力，這些信息確實幫助我們降低了篩選的成本。盡管另外一方面，這些信息也可能限制了我們發現更多其他的信息。
本文介紹了注意力的主要類型：“自外而內”、“自內而外”，并且就“自下而上”的注意力類型進行了分析。
在設計中，無論是無法讓用戶集中注意力，還是到處都在搶占注意力，都不算是好設計。作為設計師，我們需要了解如何合理吸引用戶注意力，以兼顧用戶體驗和商業化。人們大多通過視覺、聽覺、觸覺與設備進行交互，同時從信息設計的角度也進行了分析。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：熱風_
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著互聯網的發展，近這幾年設計圈子里大家都在討論UGD（User Growth Design），要向UGD轉型等等，以用戶為中心，以增長為導向，這個概念本身并沒有問題，而且是對UED的一種非常棒的進化和升級，要求設計團隊需要具備更綜合的專業能力與視野。本著對團隊的升級優化，我也以UGD的思路對團隊有了新的更高的要求，然而在這個過程中卻發現在很多問題。
隨著各種社交平臺的傳播普及，什么閉環、串聯、顆粒度等等這些互聯網黑語，滿大街飛來飛去，設計師們的PPT、匯報資料是越來越豐富多彩，但項目效果卻并不明顯。數據、增長的概念確實是鋪開了，但卻成了PPT里的裝飾，并沒有真正落地生根。
經過很長時間的摸索，我們終于有了一套適合團隊自己的UGD思路，也一步一步的在不斷的優化提升，下面以我們做過的一個項目（用戶投資路徑優化）為例來說說我們對UGD的思考，以及設計師對數據分析以及場景化設計的思路。
作為設計師，最常關注的用戶數據就是轉化率、點擊率、停留時長、跳轉路徑等等，從單一數據來看，都是一些常見的簡單的數據，但要真正能夠分析用戶，還需要結合實際場景來分析。
案例：
我們在分析交易線的數據時發現了一些問題，并對數據做了對比分析。
[ 項目列表頁 ]
用戶的點擊主要集中在前十個投資項目，占據整個頁面點擊的80%。
[ 項目詳情頁 ]
用戶通過列表頁進入到詳情頁，詳情頁的瀏覽率較高，但轉化卻很低，另外優惠券的點擊率十分高，超過85%，意味著進入到詳情頁的用戶，基本上都進入過優惠券頁面，而最終促成成交卻很低。
以上是整個交易環節最初始的兩個頁面，也是最核心的頁面，從單個頁面的數據（點）來看都屬于正常漏斗數據表現，接下來我們從用戶路徑（線）的角度來繼續分析。
我們從用戶當中，抽取了部分最終完成了交易的用戶，對整個交易路徑的進行分析，結果發現用戶在列表頁——詳情頁——優惠券這三個步驟之間反復切換。
不難看出，用戶在列表頁、詳情頁、優惠券選擇頁來回切換，即使最終產生交易，但整個路徑耗時長，反復操作，跳轉不合理，導致大量流失，這是目前數據所呈現出來的情況，也是問題的核心所在。
案例：
這是最典型的購物交易場景，通過上面的分析，我們再結合場景化的思路進一步整理思考用戶的操作行為目的。
用戶為何反復的從列表頁進入詳情，又跳轉回列表頁再進入詳情頁？這就是突破口了，想清楚這一點，解決思路也就清晰了。
我們舉一個現實生活中的購物場景來幫助思考分析（靈感來源于生活）。
購物路徑1：想買東西-找到對應的貨架-使用優惠券并買單；
購物路徑2：有優惠券-到超市看看有沒有想買的-使用優惠券并買單；
在現實生活中，除了”有想買的東西”這一主觀需求外，對交易產生一定決策作用的，就是優惠。
結合前面對投資用戶路徑的分析來看，用戶交易路徑如此反復，實際上就是在同樣的資金投入的前提下，對比不同的項目、不同的優惠，如何搭配才能利益最大化，這就是用戶的最核心需求。
基于場景化的分析明確用戶的核心需求，確定需要增長（優化）的數據指標，我們提出來了兩個解決方向。
[ A方案——詳情頁的快速切換（優化） ]
，在原有的路徑上，保持用戶的操作習慣，新增詳情頁左右滑動切換的功能，用戶學習成本低，開發成本低，可快速上線，但對于路徑優化、數據對比不夠直接，治標不治本；
[ B方案—— 設計新的快速路徑（創新）]
結合前面分析的兩種現實生活中的購物場景，在原有的路徑上，針對平臺老客對平臺項目的規則詳情已經清楚了解的特點，設置多一條快速通道，減少干擾，對比直接，加快老客的決策速度，但用戶學習成本高，開發成本高，雖然治本但風險也大。
案例：
A方案直接開發上線即可，上線后就可以收集數據進行分析了，經過兩周的時間，從數據表現來看，交易總時長稍有所下降但并不明顯，約下降了2%，而交易率基本持平。
[ B方案最終UI稿 ]
在此期間B方案完成設計開發后，協調產品運營推廣等業務方，選擇確定部分渠道進行ABtest，經過一個多月，持續收集數據反饋優化方案，多輪ABtest后，從數據反饋來看，B方案數據提升明顯，有效的降低了用戶的決策時長（降低了近20%） ，提升交易成功率（老客轉化提升1%），說明方案的可行性強，隨即全量更新。
在后續工作過程中，持續根據數據表現，分析，發現并提出問題，提出解決方案，測試驗證，不斷的循環重復，持續提升用戶體驗，以數據為依據，以增長（優化）為目標，這就是我們對于UGD的一些思考跟嘗試。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：包大佬
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn