眾所周知，黑帕云這樣的產品幾乎使用了所有類型 B 端的組件。
由于我司設計資源有限，所以在擁有了組件庫、設計師定好了設計規范之后，作為產品經理就直接可以手擼設計稿了。
這是是前面一文《 B 端產品中，一個 Epic 基本功能設計的過程》 提到，作為一個長大了的產品經理，有時候沒有資源給你做交互沒有資源給你畫 UI 的，你要自己學會自給自足。
這個系列就是作為產品經理的我，在這兩年中“自給自足”做設計的的一些總結與發現。
自給自足的前提是，前面說的組件庫和設計規范，即擁有一個設計體系（Design System）。
關于設計體系的定義和內容各家都不同，我找出來了以下案例供參考。
Tilio（一個寫作和筆記應用）聯合創始人，有十年 UX 設計經驗的阿拉·霍爾馬托娃在《設計體系：數字產品設計的系統化方法》一書中這么定義：
設計體系是為了實現數字產品的目的而組織起來的一套相互關聯的模式和共享實踐。
模式指的是界面中那些重復的要素：用戶流程、交互方式、按鈕、文本框、圖標、配色、排版、文案，等等。
實踐則是我們如何創建、捕獲、共享和使用這些模式，尤其是在團隊協作時做這些事情的方法。
書中將設計體系分成以下幾個部分：
設計目的、設計原則、組件庫、樣式指南，以及用于提高設計師和開發人員溝通效率的工作流程和實用工具。
整理之后，可以參考下圖：
可以發現，以上設計體系無論如何定義概念，都是由設計原則+設計指南+一些基礎的元素（比如 Design Token、Material Foundation、Icons）+組件庫+其他資源工具構成。
形成這些內容的目的都是為了給自己產品建立一套保證設計質量、提升設計決策、提升溝通效率的“工具包”，從而讓產品形成自己的符合設計原則的風格。
所以設計體系是什么不重要，重要的是如何在遵循設計原則下，能夠高效做出高質量的設計。
一個開源設計原則和方法的網站 Design Principle 這樣定義設計原則：
Design Principles are a set of considerations that form the basis of any good product.
譯為“設計原則是構成任何好產品的一套基礎考慮因素?！?
比如 Salesforce 的設計原則是：清晰、高效、一致、美觀。并且優先級由前到后。
可以理解為 Salesforce 會追求清晰大于高效、一致、美觀，比如在產品設計中，讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。
這個準則很容易理解，可以推論出 Salesforce 在度量體驗時，將“易用性”放在了第一位，即作為一個 SaaS 產品，不能有任何讓用戶產生疑惑的地方。如果在設計上的美觀而要犧牲清晰，這就是不可取的。
有了設計原則之后，下一步是需要一個組件庫。這里說的組件庫囊括了無論是原子化的顏色、字體、陰影、Icon 這些基本的元素，還包括了已經封裝好的組件，如 Button、Alert、Toast、Text Input。
關于為什么要組件化，也不多說了，之前看過一篇閱文體驗設計 YUX 的《組件化思維—— 適應并推動業務及產品變革的設計案例》寫的非常清楚。
接下來我通過 Minecraft 這個游戲來總結了組件庫。
玩過生存模擬類游戲大家都知道，在游戲中會有一些可以靠雙手勞動得來的基礎材料，比如砍樹砍來的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎材料可以合成一些簡單處理過的材料，比如把木頭合成為木板。然后可以再把半成品進一步加工，比如木棍。
在 Minecraft 這個游戲中，如果玩家要制造一個弓箭，需要一個弓和一個箭。弓和箭的合成又需要一些半成品和成品或者原材料來加工制作，如下圖：
對應在設計組件庫中可以對照查看，一個完整的頁面是可以通過一些元素、控件、組件、大組件組成：
在系列開始之前，先聲明一下文章的范圍和適用人群。
關于 「B 端設計總結」這一系列，主要是我個人在已有了我們的設計規范和組件庫后，“自給自足”的情況下探索出來的一些組件使用規則，更偏向產品經理或者交互設計師來參考。
所以系列中不會寫設計規范，比如說字號、顏色、間距等等這些屬于設計規范中內容。而是基于已有的規范，總結之前我們功能中涉及到的該使用哪些組件，也可以稱之為狹義上的設計指南（Design Guidelines）或者設計模式（Design Patterns）。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多人認為設計思維是全新的概念，這其實是一種常見的誤解。設計已經實踐了很長時間：紀念碑、橋梁、汽車、地鐵系統都是設計過程的最終產品?？v觀歷史，優秀的設計師都應用以人為本的創意過程來構建有意義且有效的解決方案。
在 1900 年代初期，夫妻設計師 Charles 和 Ray Eames 實踐了“邊做邊學”，在設計他們的 Eames 椅子之前探索了一系列需求和限制內容，即使在 70 年后的今天仍在生產中。1960 年代的裁縫師讓·繆爾 (Jean Muir) 以她對服裝設計的“穿著設計”方法而聞名，她非常重視自己的衣服在他人看來的穿著感受。這些設計師都是他們那個時代的創新者。他們的方法可以被視為設計思維的早期例子——因為他們每個人都深入了解了用戶的生活和用戶未滿足的需求。著名的 I ? NY 標志背后的設計師 Milton Glaser 很好地描述了這個概念：“我們一直在尋找，但我們從未真正意識到......正是對人的注意讓你真正掌握那些東西。”
盡管有這些以人為本產品的早期例子，但設計在歷史上一直是商業世界的事后想法，是僅用于修飾產品的美學。這種主題設計應用程序導致公司創建的解決方案無法滿足客戶的實際需求。因此，其中一些公司將他們的設計師從產品開發過程的下游（他們的貢獻有限）轉移到了起點。他們以人為本的設計方法被證明是導致公司差異化的一個因素：那些使用它的公司已經從創造符合人們需求的產品中獲得了經濟利益。
為了在大型項目中能夠采用這種方法，需要對其進行標準化：一種將創意設計過程應用于傳統業務問題的正式框架。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語“設計思維”，并將多年來醞釀的方法和想法封裝成一個統一的概念。
設計思維是一種伴隨著過程而生的意識形態。
定義：設計思維是一種思想主張，一種注重實際操作，以用戶為中心的設計方法來解決問題的思路。這種以用戶為中心的設計想法有可能會帶來創新，而創新可以帶來產品差異化和競爭優勢。設計思維包括 6 個不同的階段，如下所示：
設計思維框架遵循 1) 理解、2) 探索和 3) 實現的總體流程。在這些更大的范圍內分為 6 個階段：同理心、定義、構思、原型、測試和實施。
同理心：進行研究以了解用戶所做的、所說的、所想的和所感受的。
想象一下，你的目標是改善新用戶的入職體驗。在此階段，你將與一系列真實的用戶交談。直接觀察他們的所作所為、他們的想法以及他們需要什么，問自己諸如“什么激勵或阻礙了用戶？”之類的問題?；蛘摺坝脩粼谀睦锝洑v了挫折？” 目標是收集足夠的觀察結果，以便可以真正理解你的用戶及他們的觀點。
定義：結合所有研究并觀察用戶存在的問題。在確定用戶需求時，開始尋找創新機會。
在定義階段，使用在“同理心”階段收集的數據來定義需求。整理所有觀察結果，并在用戶當前的體驗中進行比較分析。不同的用戶是否有一個共同的痛點？識別那些未能滿足用戶的需求。
想法：集思廣益，提出一系列瘋狂的創意想法，以解決在“定義”階段確定下來的未能滿足的用戶需求。給你自己和你的團隊完全的言論/想法自由；在此階段沒有任何想法是不合適的，收集大家的各種想法，此階段想法的數量超過質量。
在這個階段，把你的團隊成員聚集在一起，勾勒出許多不同的想法。然后，讓他們彼此分享想法，混合再混合，在彼此的想法上再產生新的想法。
原型：為想法子集構建真實的視覺展示。此階段的目標是了解以上幾個階段形成的想法中，哪些是有效的，哪些是無效的。在這個階段，通過輸出原型的過程，來權衡想法的影響與可行性。
讓你的想法可操作。比如，做一個新的登錄頁面，畫一個線框圖，并在內部尋求大家對此的反饋。根據反饋對其進行更改，然后用快速而簡單的方式繼續進行原型設計。然后，與另一組人分享。
測試：把原型給到你的用戶來獲取用戶的真實反饋。問問自己“這個解決方案是否滿足用戶的需求？” “它是否改善了他們的感受、想法或完成任務的方式？”
將你的原型展示給真正的客戶，并驗證它是否實現了你的目標。用戶的觀點是否有所改善？新的登錄頁是否會增加用戶在網站上花費的時間？在用戶操作原型時，持續測試和觀察用戶。
實施：將設計付諸實施。確保你的解決方案得以實現并觸及到最終用戶的生活。
這是設計思維中最重要的部分，但也是最常被遺忘的部分。正如唐諾曼所宣揚的那樣，“我們需要做更多的設計工作。” 設計思維不是魔法，并不能讓你從實際的設計中解脫出來。Milton Glaser 的話引起了共鳴：“沒有“創造性”這樣的東西。仿佛創造力是一個動詞，一個非常耗時的動詞。這是在你的腦海中思考一個想法，并將這個想法轉化為現實的東西。這將永遠是一個漫長而艱難的過程。如果你做對了，那感覺就像是在創作?！?nbsp;盡管設計思維對產品的影響很大，但只有執行設計想法才能帶來真正的創新。設計思維的成功在于它能夠改變最終用戶生活的某個方面。第六步：實施——至關重要。
為什么我們要引入一種新的思維方式？采用設計思維的原因有很多，足以值得單獨寫一篇文章，但總而言之，設計思維實現了這些優勢：
這是一個以用戶為中心的思考過程，從用戶數據開始，創建滿足真實的而不是想象的用戶需求的產品，然后用真實用戶測試這些產品。
它利用集體的專業知識并在團隊成員中建立了一種大家都認同的想法，并得到廣泛支持。
它通過為同一問題探索多種解決途徑的過程而來帶來創新。
Jakob Nielsen 說：“一個解決錯誤問題的漂亮界面將會失敗。”設計思維解放了創造力，并將它們集中在正確的問題上。
上面的過程一開始會覺得很深奧，千萬不要認為這就是打開成功之門的鑰匙，相反，應該把它當作梯子，在需要的時間和地點為產品提供支持。
每個階段都意味著迭代和循環，而不是嚴格的線性過程，如下所示。在構建和測試初始原型后，通常會返回到理解和定義兩個理解階段。這是因為直到線框原型化并且想法把變為現實，才能真正體現您的設計。很難一次性就準確評估您的解決方案是否真的有效，在這一點上，循環進行用戶研究是非常有幫助的。為了做出正確的決策或確定開發順序的優先級，還需要了解用戶的哪些信息？之前沒有研究過的原型產生了哪些新用例？
也可以重復階段，通常需要在一個階段內多次進行練習，以達到進入下一階段所需的結果。例如，在定義階段，不同的團隊成員具有不同的背景和專業知識，因此看待問題的方法也不同。在定義階段花費大量時間來使團隊成員對問題的認知達成一致是很有必要的。
設計思維具有可擴展性。對以前那些無法改變思維方式的公司，現在有了一個大家都可以理解的指南，并增加了產品成功的可能性。這不僅適用于產品設計等傳統的“設計”主題，還適用于各種社會、環境和經濟問題。設計思維很簡單，可以在各種范圍內實踐；即使是棘手的、未定義的問題。隨著時間的推移，它可以應用于改進搜索等小功能，也可以應用于設計顛覆性和變革性的解決方案，例如：重組教師的職業階梯，以留住更多人才。
我們生活在一個體驗的時代，無論是服務還是產品，我們都對這些體驗抱有很高的期望。隨著信息和技術的不斷發展，它們在本質上變得越來越復雜。每一次迭代都會帶來一系列新的未滿足的需求。雖然設計思維只是解決問題的一種方法，但它增加了成功和突破性創新的可能性。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
小伙伴們畫好視覺稿后，是不是頁面的交互/視覺規約經常丟三落四，常常在設計宣講時被開發測試提問？自己表面鎮定，內心慌的一筆：這個...我沒想到，那個...我沒想到...
要想在宣講時能夠從容應對各種問題，就需要在設計稿完成后，把設計規約提前想好，那么設計規約要從哪些方面寫起呢？往往B端產品的頁面更加復雜，要補充的交互規約更多，小Zi就從實際工作中總結一些，供大家參考～
先來看個列子：
一個頁面，交互和標注規則很長很長，很多同學反饋說不知道交互規約從何寫起，看了上面的列子，大概從以下幾個方面來書寫規約：
大方面我習慣于分成【整體】和【具體內容】來寫。
首先從整體來考慮，首先要考慮頁面是如何布局的，是自適應？還是定寬？常用的網頁布局有：靜態布局、百分比布局、響應式布局；頁面的整體布局方式，也決定了頁面具體內容規約的撰寫；
參考文章《3種常用網頁布局與設計注意點》：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html
1.頁面整體滾動區域
滾動區域是從哪里開始？是頁面級滾動嗎？
2.滾動條的樣式
需要給出滾動條的視覺和交互
舉例：
頁面“加載”是做設計時常常忽視掉的，因為大家肯定是重點考慮有內容的情況，并且頁面數據是否需要加載、加載時長等等需要根據前后端接口返回情況確定。
1.補充初始狀態的頁面；初始頁面是骨架圖還是保持不變，是否添加頁面引導？等都是需要考慮的；
2.補充頁面數據為空的樣式；
舉例：
頁面級加載的樣式是什么樣的？也需要補充到設計稿中；
舉例：
比如“無權限查看”“記錄已被刪除”“已被拉黑”等等情況；
舉例：
當補充完頁面整體上的規則之后，就可以著手補充頁面具體內容的規約了。具體內容的規則其實和整體規則從大方向是差不多的，也是那幾個方面，只是更細節：
如果頁面整體是定寬的，那么內容也是定寬的，就不需要考慮內容隨著頁面拉伸或縮小帶來的變化；如果頁面整體是自適應的，那么具體模塊可以根據功能需要來設置哪些區域自適應，自適應的規則是什么；
舉例：
B端產品設計場景更復雜，內容更加不可控，再加上電腦屏幕大小適配，頁面寬度可自由拉伸，種種因素都要我們更加仔細的考慮頁面的各種極限值情況，如何寫全面設計規約是難點。相信在設計評審會上開發和測試最常問到的一個問題也是：這里內容過多怎么展示？雖然我們在設計的時候是按照80%的場景去考慮，但是剩下20%的極限場景也需要我們給出設計規則。
內容過多，具體劃分還可以分成以下幾類：文字過多、選項過多、彈窗內容過多、按鈕/標簽過多、表格內容過多、功能過多等等情況，每種情況下有哪些解決方式呢，可以參考文章《B端交互設計之內容太多怎么辦》：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
舉例：
用戶反饋，頁面中肯定不少，我們畫頁面時也會畫出大部分提示，但是缺少提示/反饋依然是設計師常忽略的內容，主要是提示的場景非常非常的多，而且有很多細分情況：
1.數據處理慢的提示
問題舉例:操作的數據過多時，后臺數據處理慢是否有提示？
2.操作后的提示
成功、失敗、進行中等，還有部分成功，部分失敗的情況
問題舉例:啟用失敗時如何提示？
3.無權限、禁用等的提示
問題舉例:項目列表-階段沒有權限時，需要添加tips提示；
4.缺少二次確認提示
問題舉例:新建頁面點擊取消是否需要二次確認提示?
1.校驗的時機：是失焦后還是提交按鈕時，還是實時的
問題舉例:表單的必填校驗，是失焦實時校驗，還是在提交時校驗？
“實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查全部輸入：
驗證消息顯示在靠近輸入的區域，并一起顯示；
2.校驗的樣式：是在下方出提示，還是全局提示，還是什么的；
舉例：
不僅要考慮頁面整體的滾動區域，有些模塊也是單獨需要滾動的；
滾動區域是哪里？包不包括表頭？標題？有沒有內容需要鎖定？滾動條的樣式？這些問題都要給出規則。
問題舉例:信息內容過多時，容器內展示不下怎么辦？--答：展示不下時容器內出現滾動條，滾動區域是整個內容區；
1.數字輸入超長的顯示
問題舉例：極限數字如何顯示，比如篩選結果超過三位數：999+
2.數值是0時，是否有特殊的規則
問題舉例：數值為0時，是否顯示此模塊？
3.是否有輸入限制，比如，限制正整數、小數，小數精確到幾位等等；
我們一般默認熱區就是觸發控件的區域，但是有時可能視覺上圖標需要小一點的，但是熱區需要更大一點，就要特殊標注出來。總之，方便用戶操作為上。
舉例
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
顏色會潛意識地為觀看者提供有關應用程序的大量信息，即使他們從未閱讀過任何文字。
什么是色彩心理學？
不同的顏色實際上可以對人類的情緒甚至行為產生深遠的影響。這是全球各城市許多綠色和藍色倡議者背后的想法：綠色和藍色使觀看者感到更加平靜和放松。
綠色對減輕壓力（和其他因素）的影響如此深遠，以至于實際上可以幫助人們延長壽命。
這對應用程序設計意味著什么？
嗯，顏色的影響不僅僅是觀眾喜歡與否，還會影響他們的感受。例如，深淺不一的藍色會激發忠誠和可靠的感覺。綠色激發舒適和幸福。黃色與快樂和刺激有關。紅色讓人興奮并引發欲望。
但是那些不一定是感覺的東西呢？人們是否也傾向于將某些價值觀與顏色聯系起來？
這項調查要求人們選擇與某個詞相關的顏色。他們發現：
信任 = 藍色（34% 的受訪者）
速度 = 紅色 (76%)
便宜或便宜 = 橙色 (26%) 和黃色 (22%)
高品質 = 黑色 (43%)
高科技 = 黑色 (26%)、藍色 (23%) 和灰色 (23%)
可靠 = 藍色 (43%) 和黑色 (24%)
樂趣 = 橙色 (28%) 和黃色 (26%)
恐懼、恐怖 = 紅色 (41%) 和黑色 (38%)
應用程序設計人員在開發應用程序時最好牢記這些關聯。然而，這些都不是應用程序開發人員絕對必須遵循的硬數據。相反，它們是開發人員可以遵循的指南，并結合下面討論的其他設計原則。
圍繞顏色的文化差異
在選擇顏色時，牢記應用程序的受眾始終是至關重要的。
例如，在西方文化中，白色往往代表純潔或純真。然而，在亞洲的某些地區，白色是用來表示哀悼、厄運和死亡的。顯然，如果應用不當，這可能會產生嚴重的意外后果。
為此，設計人員應該了解他們的受眾并相應地選擇顏色，這在日益全球化的社會中并非易事。
選擇主調色板
應用程序設計人員和公司等都應該在確定其品牌的主要調色板之前進行仔細研究。最重要的是考慮觀眾和他們想要傳達的內容。
藍色是一種流行的顏色，因為它與信任和可靠性有關，但它也變得有點過度使用了。
橙色可以與廉價聯系在一起，但也可以與樂趣聯系在一起。
紅色可以令人興奮和振奮，但也代表恐懼。
更好的使用顏色來設計應用將有助于塑造觀眾的感知。設計人員需要了解顏色關聯以及用戶如何下意識地查看設計以創建成功的調色板。
色彩和諧
一旦應用程序設計人員確定了主要顏色，就該選擇其他顏色了。使用一種顏色很簡單，通常不會很引人注目。
但是，選擇的顏色需要很好地搭配。
沖突的顏色會讓觀看者感到不安或有壓力。相反，應用程序設計者應該尋求創造一種賞心悅目的組合。一種會讓用戶感興趣并讓他們對應用程序感覺良好的應用程序，從而引導他們嘗試它。
這里有一些設計師可以遵循的基本原則，以在他們的設計中創造和諧的色彩。
單色
首先是在整個設計中堅持使用相同的顏色，但使用不同的色調。這增加了產品的興趣但又不會很突兀。
類似色
另一個流行的選擇是使用類似的顏色。這種方案也很難搞砸，盡管設計人員確實需要了解每種顏色的飽和度。
此方法可以使用色盤上彼此相鄰的顏色。例如，綠色和藍色，或橙色和紅色。
互補色
互補色方案使用調色板上彼此相反的顏色。例如，黃色和紫色或藍色和橙色。
使用互補色時，設計師必須仔細選擇陰影和色調。如果做得不好，很容易創建一個視覺上不和諧的方案。
但是，如果做得好，互補色可以使應用程序設計真正流行起來，并在眾多其他不那么吸引人的應用程序圖標中脫穎而出。這可以使用戶更有可能選擇該應用程序而不是其他類似功能的應用程序。
分裂互補色
這種方法有點復雜，但可以產生一些引人注目的結果。它采用三種顏色，一種顏色和兩種相鄰顏色的互補色。例如，從紫色開始，然后添加橙色和綠色。
設計師必須小心使用這種方法，錯誤的組合會使設計從有趣變成突兀。
正確的應用程序設計顏色
總而言之，應用程序設計中的顏色世界非常復雜。沒有一種顏色會吸引所有觀眾，也不會適合所有品牌。然而，選擇正確的顏色絕對意味著一個成功的應用程序和一個普通的應用程序之間的區別。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在貝殼，有店東、圈經、CA等多種服務角色依賴數據信息作業，各種各樣的數據被用于管理、分析和制定目標。但是，房產垂直領域的數據非常龐雜，數據體量也在急劇增長，圖表的應用場景越來越復雜，除了pc和移動端的數據看板，還出現了線下門店大屏場景。
與此同時，數據展示一直處于無可視化規范的狀態，導致頻頻出現“數據堆疊”“數據出界”“數值無單位”等可讀性低的問題。因此，把這些復雜、抽象的數據，通過更直觀更容易理解的可視化方式展示出來，建立一套專注于房產領域的可視化組件規范，變得尤為重要。
圖1 數據部分展示現狀
Kecharts項目從匯總和梳理數據展示問題出發，聚焦并抽象問題點，旨在建立起統一的可視化規范。同時，我們還對極端數據的展示進行計算規則處理，從人工配置的效率考量，系統性地幫助用戶進行高效分析和決策。
數據規范的第一步，解決“知道什么數據用什么圖表，了解顏色的使用規范、數據排版展示的要點、適配性原則”等基礎規范，從配色、布局、基礎展示規則上，滿足數據展示的美觀度和可讀性。
最難解決但也最有價值的痛點是：數據體量大、維度多帶來的“不確定性問題”，想要把海量、高維的數據以準確有效的方式展示，需要建立高質量的交互和配圖規則。因此，我們在梳理基準展示規范的基礎上，也對極端情況進行了一系列的規則處理。
數據往往是由平臺自上而下傳達到城市，再由專業的商業分析師對數據進行分析和處理，很多數據需要人工繪制和展示。因此，Kecharts在設計數據規則展示的同時，也要考慮數據的可配置輸出規則，盡可能減少人工操作成本，降低由于人工分析水平不同導致的報告質量方差。
建立基礎可視化規范，是為了將圖表展示拉到基準線水平，也是當前要做的第一步。基礎的規范建立，可以讓圖表迅速換身衣服，第一時間提升用戶的感受。所以，第一步首先解決配色的使用、基礎的布局、圖形的基本表達等方面的規范問題，滿足數據的基礎美觀度。
圖2 配色色板圖示（局部）
優化前，Kecharts各種配色之間關聯性低，與整體平臺的表現層形式不統一。優化后色板的樣式與KeDesign（貝殼設計系統，“UXD筆記”公眾號后臺回復“貝殼”，領取VI規范文檔）無縫融合?，F有配色方案飽和度更協調，閱讀體驗更友好。
由于數據體量大，我們嘗試將8種常用色擴展成10種常用色以及24種擴展色來更好地滿足業務需求。并且根據不同品牌主色，進行明度調整。除此之外還增加了更沉穩的商務主題以及暗黑主題配色，滿足特殊業務場景的使用。
圖3 配色的概念圖
基礎布局
圖表的構成，由一系列獨立的圖形與法元素結合而成，如包含標題區、操作功能區、面包屑、圖例區、單位區和圖表區，通過合理的基礎布局增強圖表的秩序性和一致性，同時規范標題、圖例等元素的展示適配規則。
圖4 數據基礎布局規范（局部）
精細圖形
整體的圖形展示細節也做了統一調整，從整體排布、字體、字號、圓角、描邊粗細、數據軸、標簽等方面進行了優化設計，使整個圖表看起來更加精細。
基礎的配色、字號、布局調整之后，基本滿足了數據的展示基準，從基礎合理性展示和視覺感提升上，有了一定的改良。
圖5 基準規范后的對比
圖6 柵格化設計圖示
定義圖表的適配規則
定義四種圖表卡片的適配方案，當圖表放大或縮小到某一區間時，內部布局會根據圖表大小變化進行有權重的刪減，使圖表在多種區間內能夠將核心數據表達的更清晰。
圖7 柵格化設計圖示
滿足了數據的基準展示，并沒有達到完整的可視化展示規范，海量和高維帶來的展示問題依舊存在。所以，在建立基準規則的基礎上，結合貝殼數據的特色，需要集中處理極端情況帶來的問題，從基準線提升到具有易用性的“標準線”。
圖8 以餅狀圖為例的極端情況分析
過濾數據
首先從底層數據進行過濾，過濾底層占比0%的數據，減少數據呈現量。將占比為0%的大部分數據在圖表的可視化展示中去除，轉移到圖例中展示，滿足了用戶需要完整數據的訴求外還大幅度提升了圖表的可視化程度。
元素優化
優化標簽、線條、指示等元素的展示規范，從定義邊界位置、規范標簽的展示內容上，對圖表內元素的極端情況做適配處理。
智能檢測
為了消除信息過載帶來的標簽碰撞，我們制定了標簽的智能檢測規則，當兩個標簽重疊超過1/3時，自動化地隱藏部分標簽，被隱藏的部分可以通過懸停展示詳細信息，不經意間大幅度的提升圖表的展示美感和用戶的瀏覽體驗。
圖9 餅狀圖為例的處理過程
從單點問題擴展為通用性規范處理，在不同類型圖表的極端情況處理過程中，從全局的角度出發，對極端情況下出現的核心問題做匯總并抽象，在顏色、碰撞、超圖形等方面，輸出極端情況處理規范。
圖10 通用性智能檢測規則（局部）
數據分析和傳達的過程，依托于人工過濾、處理、繪制和展示，考慮數據的配置輸出，人為水平難以把控，盡可能減少人工不必要的操作成本，從而提升數據報告產出的質量。
在配置自由度時結合產品定位、屬性和功能進行思考。用戶希望數據通過配置層處理后轉化為可視化圖表。普通用戶期望通過簡單的操作快速搭建數據看板；高級用戶希望對可視化圖表有精細化的自定義需求。
我們盡量用智能處理代替人工對數據無效數據的篩選，對數據的展示做智能的適配，如指標卡的展示，前置設置了一系列的展示模版，在用戶選擇指標數據的同時，會根據指標的數量做自動化貼合排布。與此同時，保留了一定的人工可配置自由度，支持用戶可自由配置指標卡的細節展示等。
圖11 指標卡用戶配置示意
因此，針對大量雜亂的數據，數據的呈現通常需要兩層呈現給用戶。第一層是數據庫和數據源，會自動過濾掉存在的垃圾數據和無效數據。
第二層是數據分發層，盡可能的通過自動化的配置去輔助操作員進行數據的分發和最終數據面板的呈現效果。通過簡化操作流程和匹配人為操作習慣，降低學習成本，提升操作效率，為操作者提供“順其自然的設計”。
圖12 數據處理分層圖示
Kecharts的初衷是保證數據的真實、高效展示數據、遵循美學原則。我們遵循數據能夠真實呈現的原則，在可視化表達中確保不遺漏、不誤導，確保數據準確性。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
它們是一種體驗洞察和形成參考材料的工具，能夠幫助業務人員探討決策使用，它們都是結合真實用戶反饋形成的。另外這些地圖本身并不能直接提供答案，而是用于促進對話或作為決策導向，它能跨部門讓人們聚在一起討論業務目標，指出潛在的機會或達成一致的價值觀與目標，使解決方案更可行。即促進共同參與、共同思考、共同目標、共同發力。像心智模型、空間地圖、服務藍圖、用戶體驗地圖、客戶旅程地圖都屬于體驗可視化地圖，也有稱為對齊圖。
用戶畫像 本身可以反映出服務對象的特征，便于改進業務服務，幫助研究用戶需求或產品痛點，因此在一些體驗可視化地圖中會配合使用。并且可以幫助設計師指導產品功能、導航、交互、甚至視覺設計方面的決策，是一種聯系用戶訴求與設計方向的有效工具，總之它能讓你知道產品是給什么人用的，他們有什么特征或訴求。
用戶體驗地圖 以個體在某個產品或領域中的體驗經歷為主，關注產品是如何契合個體用戶體驗的，通過用戶個體的行為觸點與視角來洞察商業機會。是一種比較視覺化、有助于引發共鳴和聚焦用戶體驗的工具，比較貼合情感化設計的理念，適用于洞察用戶視角下與產品系統交互的可視化地圖。
所以在作品集里經?？匆娺@些體驗地圖就能夠理解了，一方面是作為戰略層的研究報告說明，用于佐證設計或決策的依據。另一方面是為了其他讀者達成共識，便于共情設計目標。當然豐富和美化作品集也是一方面，更多的則是希望不要濫用起來，形同虛設，成了一個沒有深入作用的裝飾工具。
方便直觀易懂的去解釋用戶畫像與用戶體驗地圖之間的關系作用，這里我通過流程、相互作用來解釋一下；
體驗地圖是基于用戶研究開展的，所以要考慮研究誰，研究什么問題，在什么場景或領域進行，因此就需要借助用戶畫像去界定范圍，以及形成用戶材料，再去考慮用何種體驗可視化地圖展現，而用戶畫像也將一直貫穿始終提供可參考的用戶信息；
用戶體驗地圖一般都是聚焦于既定范圍的目標群體，一份完整的用戶體驗地圖應該包含用戶畫像信息，應交代清楚目標用戶的背景、場景、需求、痛點等關聯信息，方便讀者了解，以便于代入用戶視角深入到用戶體驗地圖的討論中。
而用戶畫像盡管提供了由外而內的視角或部分設計見解，但并不能滿足項目多樣化視角的需求，且不足以形成一系列的設計見解洞察，所以用戶畫像始終需要與心智、情景、體驗地圖或研究報告等結合使用。也就是說用戶畫像需要與用戶體驗地圖配合輸出，兩者誰也替代不了誰。
一個正式且有效的體驗可視化地圖一般必須經過四個階段才能完成，最后再得出結論達成一致；
一、項目啟動；通過內部識別或收集用戶反饋找到需求點，計劃研究目的，制定目標。
二、開始調研；通過研究手段向用戶收集優化資料或數據，為創造體驗可視化地圖提供可靠的數據。
三、闡述分析；選擇闡述方式，通過體驗可視化地圖將研究結果與核心價值進行呈現，為后面探討做準備。
四、達成一致；使相關業務人員共同參與研討，結合地圖報告進一步的思考，指出潛在機會或達成一致的觀點。
五、展望未來；根據研討結果設計解決方案，提出價值主張，進一步跟進和實施起來。
真實應用中不用急著畫圖準備填充，先明確目標再從用戶研究或資料收集開始。如果沒辦法找到目標用戶進行訪談或測試研究，那么至少找到一線的人員進行訪談或測試，不要依賴自己的見解或認知套用，這些地圖的精髓在于打破內部視角建立起一場具有包容性的對話，不同部門的參與者多多益善，所以這些地圖只是研討中心的參考物。
構建和使用畫像時大致可以分為兩類；
1. 根據用戶研究建立正式的用戶畫像
2. 建立人物角色原型
具體取決于用途與條件情況等，制作任何一組用戶畫像都非依托想象力，都是基于事實或用戶研究的。并且不只是簡單的人口數據或個人信息描述，如果一組不能達到共情效果的用戶畫像也就失去了核心價值《如何有效快速共情-點擊查看》，就像一份簡歷，沒能體現出個人能力與專業素養一樣。
制作一個正式的用戶畫像是一個漫長的過程，還需要開展用戶研究，如果你沒有現成的調研對象或調研條件，你就可以采用人物角色原型，該方法是由《Lean UX》的作者Jeff Gothelf提出的，他描述到；
“人物角色原型是一個正式人物角色的變式，其最大不同在于人物角色原型不是用戶研究的結果，而是更多的源于頭腦風暴的結果。公司成員會從公司理念出發，基于自身領域的專業性和直覺，來明確誰是公司產品或服務的目標用戶，用戶的動機和需求是什么?！币篔eff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)
這類角色原型不用花費大量時間去做用戶調研，它們是基于已知的特征情況或預期的目標用戶，適合臨時性使用，便于開展前期工作或達成一致的見解，但是人物角色原型并不能代替基于可靠數據的用戶畫像。
就是跨部門集體參與貢獻觀點與數據來構建。前線相關業務人員是必備的，人數控制在5-8個人就行，要有主持人把控節奏和參與度，盡可能收集到不同業務視角下的問題反饋，討論開始前可以提出一兩個角色原型來激發討論，然后充實起來，盡管最后可能形成了多個角色甚至有些看起來有沖突，不過沒關系，重點是讓這些人物角色清晰明確下來，不一致的地方可以進一步的討論。
一般人物角色原型在一頁的篇幅內就可以顯示完，主要五個板塊。值得注意的是，一定不要脫離了產品主題的范圍；
一、角色基本資料：角色頭像、姓名、頭銜、單位或一些可用的輔助資料。
二、人口統計特征：一般包含性別、年齡、職業、收入等與主題相關的人口統計指標（類似簡歷中的個人信息）。
三、心理統計特征：與主題相關聯的因素，主要指不可輕易觀察的心理活動、態度、信仰、動機、觀念的個人特征。
四、產品相關行為：指與產品體驗有主要關系的行為或是行動，包括興趣愛好、個人習慣、專業活動等。
五、需求與痛點：用戶有哪些與主題相關的需求或痛點，你的設計可以滿足用戶那些需求和痛點緩解。
用戶畫像本身可以幫助發現問題或進行決策，同時也反應出了對用戶或用戶視角的共同理解，并且可以在日常研發工作中持續使用，例如一些材料歸檔、分享、更新、輔助其他可視化地圖等，以發揮出更多的余熱。
根據產品需求選擇定性還是定量分析，亦或者結合，一般定性適用于用戶需求深挖或業務創新等情況，講究的是“為什么”，而定量更像是通過數據驗證“有多少”，常用于數據分析、趨勢分析、數據驗證、做精細化運營和用戶精準投放。
定量需要足夠的數據支撐，如果項目需要畫像且企業不穩定、用戶量級不夠不能滿足數據需求，則可以借助市場數據報告、白皮書、第三方數據服務平臺、調研服務公司等來參考，這些數據也都是可靠的。大數據殺熟就是數據畫像的反面引用，通過畫像對用戶進行分層，再挑出用戶中的軟柿子或老實人欺負。
對目標群體要有認知，要根據特征劃分層級或類型，例如典型用戶、潛力用戶、專家用戶。這些用戶的界定范圍需要業務相關人員去制定，類似一份簡歷我們可以根據能力對標級別，一般我們可以通過4個比較有影響力的指標進行劃分，至于權重我們可以采用常見的四象限或卡諾模型；
在制作用戶畫像前可以合理的根據人物角色原型的特征過濾目標用戶群體，但不要過分依賴，你只是需要找到符合的目標群體，而不是根據原型找到理想的那個人。
最終調研對象的關系表呈現；
定性類畫像不用邀請很多用戶參與研究，一般在5人左右，只有研究資源充沛時才會考慮邀請更多研究對象，一方面是研究發現5人左右就能反映出絕大多數問題了，另一方面是出于時間精力和預算情況考慮。
一、確認研究對象的優先級，根據需求背景或目標確認重點跟次要群體來挖掘不同用戶視角下的問題；
二、通過線上招募(APP內或相關平臺發布有償邀請，亦或者尋求第三方服務公司幫助)、客戶群(相關的用戶答疑群邀請)、論壇社區(發布招募帖子等)、專家咨詢、產品線上推送等方式，尋找目標群體并建立聯系；
三、選擇線上訪談、可用性測試、問卷調查、焦點小組等有效的用戶洞察方式，并設計好相關問題或材料準備與用戶進行深入研究(主要圍繞已知問題或新的設計方案驗證，再就是新的業務需求洞察為主)；
四、整理用戶資料，圍繞研究主題建立用戶畫像信息，完成主要信息模塊，可以根據業務需要，將用戶技術特征、職業特征、環境因素進行補充(需要考慮是否與業務有一定關聯或影響，否則無意義)；
五、完善用戶畫像的細節，將價值信息同步到畫像中，并對有效信息的細節進行補充，增加可信度還原真實性；
用戶畫像并沒有一個模版標準，具體還是要看業務需求，而且網上的模版挺多的，自己甄別吧。另外在用戶洞察的過程中，我們可以結合可用性測試、繪制故事板（這兩種研究方法有興趣可以查閱資料，一兩句講不清楚，有機會展開講）等方式一同進行，而不只是把目的停留在建立用戶畫像上，這樣反而獲取的有效信息受限了。
一、數據采集
通過有效途徑將用戶產生的數據集中，不論是產品數據庫、數據埋點、第三方數據統計或是定量調研的結果，這些數據都是重要構成部分，同時也決定了信息的范圍，比如你拿不到用戶的出行數據，那么就根本沒辦法構建相關標簽或指標。
二、數據定義
對數據進行清洗整理，識別出用戶行為數據、用戶偏好、生命周期等數據，并進行標簽化分類整理，這些標簽或指標可以體現出某些維度的趨勢或用戶行為預測。不過值得注意的是，在構建這些標簽或指標時盡量結合業務流程或生命周期來梳理，考慮畫像建成目的與業務場景同時，也要思考標簽的權重問題，標簽不等于越多越好。
三、構建畫像
根據產品階段或業務需要，把相關業務標簽結合用戶群特征信息整合成用戶畫像，一般的業務標簽類型有增長策略、用戶偏好、用戶價值、營銷觸點等，這類畫像可以包攬多個維度信息，還能對周期數據可視化顯現趨勢變化，但是在用戶痛點或需求上，可能不會很直觀，需要進一步的結合用戶場景帶入思考。
通?；ヂ摼W產品前期，沒有構建標簽或數字畫像的經驗，可以考慮讓團隊引入相關第三方數據畫像服務，它們可以更便捷的接入到你的產品中并幫助你打標簽做統計；
以下截圖來自第三方大數據畫像工具(神策)
*第三方數據分析輔助產品也不少，這里只做交流使用
畫像中的角色應該更加生動，能夠讓我們感受到真實的存在，只有這樣才能產生共鳴，賦予畫像價值，為此我們可以通過控制以下六點來做的更好。
一、不要特殊化
特殊能加深印象，但是特殊化并不代表產品的典型群體，同時在實際應用時容易擾亂共情或分散注意力，例如用戶群體是普通青年，就不要描述成一個帥氣的學霸，也不要為用戶添加一些奇怪的癖好，這些不相干的信息并不能讓畫像更加生動；
二、合理應用頭像
通常作品集中的頭像都比較美觀個性，這沒事兒。但實際畫像應用中，頭像也是很重要的一部分，會馬上映入眼簾，這些頭像不要使知名人群的，且貼合真實用戶標簽，不用暴露性感或是丑陋異樣的，也不要使用插畫、卡通、3D形象，不要有奇怪或不自然的行為動作。
三、充實細節
以一款線上教育產品作為背景，舉例原本我們的用戶信息寫到：
那么即可根據產品屬性結合實際情況進行豐富補充，例如調整為以下描述；
雖然沒有過大的變化，但是已經將貼合教育產品的地域信息、課程階段、收入情況進行了完善刻畫；
接著再例如，虞溪女士的需求寫到；
簡單來看確實是透出了線上教育產品的需求，但是需求并不深刻，也沒有刻畫出虞溪女士的核心訴求，為此我們可以結合創造情景故事的方法，融合角色、場景、行動、事件、評價、情節這些元素去深度刻畫描述，例如以下調整；
結合創造情景故事的辦法是為了刻畫出更多細節，不僅可以讓瀏覽者更好的沉浸在角色視角，也能在完善的過程中深挖出更多有價值的思考；
四、創造情景故事
情景故事不會很枯燥會更抓人心，能夠傳達更多信息的同時，將產品信息與真實情景交融在一起，方便團隊記憶理解以及更好的促進討論。創造情景故事的元素通常有：角色、場景、行動、事件、評價、情節?？雌饋砭拖袷窃诿枋觥拔遗cxx產品的一天”。
角色：故事的主人翁或是參與者，不可缺少的重要部分；
場景：故事發生的時間地點物理環境，例如早上八點半我在擁擠的地鐵上搶到了座椅，并打開了手機；
行動：能夠觀察到且與主題有影響的行為動作，例如我被這個問題難住了，解鎖手機并打開了這個APP；
事件：發生了什么事兒，角色間做出了什么反應產生了何種結果；
評論：角色怎樣評估并作出決策，有了怎樣的目標，并如何進行下一步。其中任務目標是驅動的核心；
情節：一系列行為與事件的演變過程再到結果，從問題的發生到角色推進目標到結局。例如經典的戲劇結構：
*創造情景故事是要花費時間精力的，如果時間充裕你可以慢慢將相關描述進行轉換，時間有限責挑取重點轉化；
五、不要孤立使用畫像
在前文就有描述到畫像需要配合其他體驗可視化地圖一起才能更好的發揮效用，畫像通常始終保持著個體視角，而且沒有辦法傳達一系列完整的體驗報告，所以為了更好的滿足項目多樣化視角的需求，盡量不要孤立的使用畫像。
六、定期更新
產品發展中，會經歷不同的階段與市場變化，用戶群體自然會變。如果說產品在研發新的功能去開拓年輕化的市場，那同樣意味著目標群體趨向年輕群體，這種時候就需要變更或新增用戶畫像，就不要使用舊的畫像起步了。
基本上做好以上細節，你的用戶畫像就大功告成了，這就像是結合STAR法則優化項目經歷一樣。最簡單的標準就是業務人員能夠去理解這些角色并代入角色視角思考，可以有效共情或決策。
首先我們回顧一下用戶體驗地圖的關鍵詞：既定的用戶群體、應用場景或領域，用戶以某個持續性目標驅動與你的產品或服務發生交互，并且涉及多個階段來實現目標，地圖會通過由外而內的視角洞察產品服務是否契合用戶的體驗。
由此可見在與用戶研討時，我們的問題或測試任務應該覆蓋相關階段或重要的任務流程，以此來獲取體驗地圖的相關重點信息。另外很多產品比較龐大，服務頗多，因此控制好體驗的階段范圍也很重要，不僅會拉長工期也會使得焦點分散。
用戶體驗地圖主要包含三個層面的內容，一、用戶目標階段，二、用戶與產品服務交互，三、痛點機會洞察；
其實礙于不同產品和服務類型，體驗地圖的構成元素也有差異，不過在漫長的應用發展中也逐步趨于穩定。
常見的構成元素：
一、用戶需求或目標：
在體驗地圖中，用戶以需求或目標驅動與產品發生交互，需求或目標既定了要做什么，應該需要什么服務。
二、行為階段：
行為階段是界定場景的重要部分，以目標任務階段的生命周期或者關鍵節點展開，不一定所有階段托盤而出，階段太多則不聚焦，細分太多則費時間也不一定快速見效。
三、采取的行為觸點或步驟：
用戶使用產品或服務展開的行為或接觸的設備、泛功能應用等。
四、想法與問題：
在體驗服務的過程中出現的問題或是一些真實的想法感受。
五、情緒波動與精神狀態：
情緒和精神狀態通常是反映服務好壞或用戶滿意度的重要因素，但同時也難以觀察或量化，通常會根據用戶對問題的描述來共情情緒，亦或者向用戶提供情緒表情標簽。
六、痛點或機會揭示：
結合上層階段行為與用戶的反饋信息向下垂直洞察產品服務的痛點或機會。
七、設備或其他圖例補充：
例如跨端跨設備或包含特殊標簽信息的補充說明。
*示例模版
表情包早已成為網友互動和情緒表達的重要部分，但是在實際的可用性測試或訪談中，用戶會相對拘束一些，也不會把各種各樣的表情掛在臉上，所以才說用戶情緒很難研究和洞察，更別說量化執行了。有些人可以進行表情管理，情緒更是難以琢磨；
就用戶體驗地圖中的情緒塊來講，通常一定不只是表情icon來做表達，這樣費解還缺乏實際價值，所以一定會加上相關描述來揭示用戶情緒與觀點。心智模型中用戶情緒感受便是靠的文本描述來傳達。
早期Pieter·Desmet在其《Designing Emotions》一書中提出了如何衡量情緒的研發方法，他開發了一款叫做產品情緒度量儀的工具，其原理就是為用戶提供各種表情表達的卡通形象，用戶在體驗過程中根據自己情緒選出最匹配的那個卡通形象來示意自己情緒。這個工具經過不斷迭代并豐富聲音后已授權到：https://www.premotool.com/，我們可以在度量用戶情緒或其他體驗可視化地圖中配合使用。
另外在使用表情標簽應用時，并不大推薦常見的微信表情、QQ表情等，這些表情在長時間的使用中，用戶都會形成一些偏好，這會影響使用決策
在服務體驗的過程中，很多時候情緒變化并非是單一線型上起伏變，例如：
我在觀看電影高潮的部分突然網絡異常，那么我的情緒應該是多樣化的，一邊是代入高潮部分的激動，另一方面是網絡帶來的失落感，同時還有等待網絡恢復的焦急。
為此我們通常有兩種方法來傳遞情緒變化；
1、將喜、怒、哀、樂、悲、恐、驚或需要的情緒標簽化，每種情緒用一個顏色表示，然后使用同軸的趨勢圖結合用戶行為階段來表示；
2、即使一次展示多種情緒，也難免有積極情緒與消極情緒同時出現的情況，這種時候可以圍繞一條分界線劃分兩類情緒區間，使用情緒曲線結合關鍵因素描述來顯示更加全面而復雜的情緒心理，對應每個關鍵情緒節點可以使用不同表情圖標細化輔助，使得情緒起伏的信息更充實有價值；
1、建立正確的項目目標是第一步，用戶體驗地圖的優勢與作用都有在前面講過(如果忘了可以在“兩者工具的差異與特性”中開始回顧)，使用用戶體驗地圖是有目的性地，它不是優化體驗的萬金油，通常都是收集用戶反饋知道某一些階段或環節存在問題，而建立優化目標開展的工作；
2、鎖定存在問題的階段，建立用戶問卷、焦點小組或用戶測試進行聚焦研究，嘗試收集用戶的意見或優化方案；
3、通過白板或線上協作工具建立簡易的用戶體驗地圖框架，并將研究用戶的畫像信息與碎片信息填入地圖。白板共創的辦法其實就是根據用戶體驗地圖的框架，結合用戶視角將自己的觀點寫到便簽貼到對應的區域，避免你一句我一句難以記載和整理；
4、關注每個階段的過渡，通常問題很容易出現在這些地方，例如付費前到付費后階段，如何進入后者階段就成了關鍵點，另外沒啥優化空間或體驗良好的階段可以折疊起來留出更多空間關注核心；
5、用戶體驗地圖的畫龍點睛之處在于跨部門協作完成，而不是閉門造車，邀請一兩個其他部門的人說明要求和完善地圖并不是什么難事，只有這樣最后的結果才能達成戰略一致，而不是自己繪制完后要求其他人被動接受結果；
一、首先看你是否與用戶建立聯系，用戶體驗地圖的個體對象是用戶不是你自己，盡可能的獲取真實的用戶的信息。
二、一個產品運作是需要多個部門協作的，所以至少要有三個不同部門的人員參與進來。
三、協作完成用戶體驗地圖和達成共識后，你會驚奇的發現問題如何解決，各個部門該怎么配合實現都清晰明朗了。
前一陣子跟UXren社區主理人寶珠老哥討論過，就如截圖所示，更重要的是將企業各部門協同在一起，達成一致的戰略目標，共同參與探討出解決方向為業務賦能，這才是體驗地圖的精髓所在。
用戶體驗地圖通常包含了一系列階段，而每一個階段都會由多個觸點編排成一段微型體驗，而觸點模板工具將會很好的為你建立和打開一片微型的體驗模型，這種模型是由羅伯特·羅斯曼(j·Robert·Rossman)[美]與馬修·迪尤爾登(Mathew D·Duerden)[美]在《最佳體驗》中提出的一種體驗洞察工具，它可以很好的結合體驗地圖去進一步的深挖某段流程或階段里需要優化的體驗，它們之間的關系就像一條路線圖與一份詳細的指引說明。當你完成某個觸點模版時，你會對該觸點上的體驗設計有清晰的認識，并且會形成一份書面報告與執行團隊共享和交流，觸點模板可以很好的解釋體驗是如何設計的，并且將相關執行團隊的角色聯系在一起，這不是噱頭，你可以根據后文指引進行嘗試。
體驗是復雜的，在用戶觸點模版工具中，體驗被劃分為平淡的、專心的、難忘的、有意義、革新性五種類型，并且它們具有連續性，是通過關鍵特征與關鍵屬性定義出來的，它們結合了心理學理論基礎，目的是方便更好的理解體驗，并在設計實踐中起到指引作用促進交流，因此我們在設計時也應該對用戶體驗結果有意向性的去設計，框架如圖；
*關于參與感的兩種系統思維是兩種不同的思維狀態，系統1更像是慣性思維，憑借認知或經驗更加快速和自動化的思考，而系統2就會開始更主動的更深入的進行思考，參與階段越高思維越深思。
而三個階段分別是；
一、接受：個體意識到和接受體驗過程中正在發生的事情。
二、思考->處理->計劃：個體開始積極的思考體驗，并對正在進行中的事物做出處理與反應，同時可能開始計劃各種應對方案。
三、行動：深入的參與到體驗中并引入新的觸點和元素來維持互動，從而共同創造體驗，例如《魷魚游戲》上映后，影片中的“扣糖餅”又帶火了糖餅。
當新的事物被第三階段引入后，又會重新開始接受并循環，不過這并不代表所有的體驗都能夠完整經歷這三個階段。
觸點是用戶進行交互的重要部分，其周期可長可短，會產生不同感受，而一系列的心理感受會促成最終階段或完整的體驗。觸點模版由11個部分組成，它們互相作用指導和揭示體驗設計的方向與細節，并把設計結果引向預期的體驗方向。
編號：對應到體驗地圖的階段編號或是觸點編號，隨著觸點設計逐步完善，對應的位置可能會發生轉移。
標題：對應該觸點模版主題的標題或是任務觸點的名字。
體驗類型：觸點的體驗類型或整體的體驗目標，從平淡的到革新性的五個體驗類型。
期望的反應：我們把期望的反應視為觸點預期結果的北極星指標，它可以是多個。我們通過用戶反應逐步提煉出預期的結果供予用戶體驗，例如期望的反應是笑容，那么我就可以提煉出“講個笑話、開黑游戲”等可以促成反應的體驗結果，同時期待的反應應該盡可能的傳遞用戶價值。
期望的結果：根據期望的反應，我們要提供給用戶哪些體驗來實現。同時期望的結果應該跟類型相匹配。一般我們可以根據 “1. 產生積極情緒、2. 吸引注意力、3. 幫助發展和加強關系、4. 從更宏大的視角給人來帶意義、5. 提升能力、6. 孤立自由選擇” 這些類型內容作為起點，并根據體驗項目的情況細化，例如“心情低落想要刷刷手機產生積極情緒”Change“在App上刷會兒短視頻，看點有趣搞笑的段子來緩解下低落的情緒”。
體驗場景元素：觸點模板工具沒有特定的行業或業務模式，因此這些元素根據需要完善即可。而實際的元素應用中也會有不同的權重，注意重點元素的設計應用。
互動設計：可以是人與人互動、人機交互或更為復雜的互動，就是有意向性的將元素進行編排與用戶產生互動獲取必要的信息或傳遞。
貢獻者：整個體驗階段中，可見的幕前服務人員與后臺的服務員，他們是組成完整體驗的重要部分，例如餐飲店的服務員與傳菜員就是可見的幕前服務貢獻者，而廚師們就是幕后的貢獻者。
共同創造：共同創造和可供性是促進用戶參與的兩個重要的方法，并且參與度有高有低。好的體驗更多是與用戶共同創造的，建立合適的觸點與用戶共同創造體驗是重要的！以微信的“拍一拍”來看就是個很好的例子，拍一拍功能本身是加強了微信聊天的可供性，給用戶提供了更多的互動可能，同時用戶可以自己編輯被拍以后的文本，加強了體驗的趣味性，這便是共同創造的過程?？晒┬詾橛脩籼峁└嗷芋w驗的可能，而共同創造為用戶提供DIY的空間。
優化：對觸點進一步的優化，加深體驗感受。一般分成了兩大類型，一類是技術優化、一類是藝術優化。例如讓一個App加載短視頻更快更流暢，這就是技術型優化，如果為一個服務器未響應的404界面配上緩解焦慮的插圖，這便是藝術型優化。
過渡：觸點與觸點之間的過渡可能波動、異常、緩慢、復雜等，如何引導用戶正常的過渡到下一個觸點也是重要的一部分，它可以是自動化的隱式過渡也可以是引導性的顯式過渡，就像是安全通道的指示燈一樣將用戶從一個地點帶往另一個地點。
*觸點模版（可直接下載原圖進行打印使用）
通過一段音頻聊天室互動體驗之旅來揭示觸點模版用法與效果，音頻聊天室大家應該都熟悉了，這里就不聚焦用戶畫像與用戶體驗地圖了，觸點發生在用戶第一次進入歌廳音頻房間，那么應該怎么設計體驗來為用戶留下好印象呢？
觸點是發生在注冊后的第二個階段，即首頁房間列表(編號A02)，完成注冊階段后見到的第一個界面。標題則暫定為“一次非凡的音頻互動之旅”，我們希望新用戶在選擇好一個房間進入后能夠有一次愉悅難忘的體驗經歷，而相應的期待反應則是“有人帶我玩真棒！這個聲音我好喜歡，下次還來找Ta們”。體驗類型則希望是從平淡的體驗類型升華到難忘的。
其中體驗場景除了設備自身與軟件環境，更多真實的環境因素碰撞我們無法預測和控制，因此僅鎖定軟件自身的場景元素?；釉O計則是關鍵，軟件本身更多是工具支持，我們需要利用好運營資源跟用戶產生互動來促成體驗結果，這里我們會根據技術可行性優先考慮能為用戶提供的體驗結果，再到互動設計部分。其次就是過渡部分，預期的過渡觸點實際上會有多個方向，我們優先以充值消費作為一個觸點(轉化)、私信關注為另一個觸點(形成互動聯系方式)，完善后的觸點模版如圖；
在該觸點模版中，主要揭示了如何為用戶打造理想的體驗之旅，不僅涉及到運營方法也包含了軟件的重點優化部分，它很好的展示了如何通過角色之間在軟件中的互動來促成體驗與商業價值，當你把這份資料在團隊里分享后，完全可以清晰的對體驗設想進行解釋，以促進團隊內的深入討論與細節推進。至于相關功能的細節推敲同樣可以采用觸點模版繼續深入。
接著A02觸點模版中提到的標簽體系優化，我們再一次的結合觸點模版進行標簽的體驗設計，編號設定為“A03”，這是一個泛觸點，它涉及到用戶注冊進入時、房間互動、系統消息、消費與充值、裝扮標簽的著落頁，但歸根還是在應用內。標題為“讓標簽為用戶賦能意想不到的體驗”，在這段泛觸點中我們期望圍繞標簽為用戶打造難忘的體驗，讓標簽產生更多的價值與業務轉換，經過初步的體驗設計后，新的觸點模版如下；
在這個觸點模版上我們對標簽的作用價值進行了定義，并對功能及業務流程上進行了設想，已經初步的形成了標簽體驗的設計，接下來只要將裝扮標簽的著陸頁與房間內的應用進行完善設計，在輔以條件判斷與消息通知打通閉環就算是完成主要工作了，再此后的內容你是繼續用觸點模版還是設計交互原型都是可以的，至少目標是明確的。相信寫到這里，觸點模版的應用與功效你已經一目了然了。
觸點模版的板塊跟信息維度較多，但是考慮到觸點或項目的實際情況，模板內的信息填充不用完整。并且它的確可以很好的將體驗設計的思路整理出來并形成材料分享，對于多個觸點只需要根據體驗地圖上的順序打上編號后，即可將多個觸點模版的關系連接起來，你可以將打印填充后的模版依次排列或張貼在白板上的體驗地圖上。
觸點模版就像是一份交互自檢表，它從多個維度去考慮和解釋了觸點體驗的設計，盡管沒有勾畫出詳細的設計細節，但是體驗設計思路與執行團隊的任務已經很明確了。
另外完成觸點模版時，并非是要按照模版里的板塊順序作業，比如有時候我們是根據體驗結果考慮運用哪些體驗場景，如果有固定的場景，那么你就可以根據場景情況開始考慮，一般更傾向于先設定體驗結果進行倒推。再就前面啰嗦過的，我們根據項目情況完善需要的模塊即可。
更完整的服務流程可視化工具，可以結合用戶體驗地圖對服務流程進行優化或調整，相比傳統的業務流程圖，它在用戶角色關系與前后端分離上有明顯優勢。是一種服務可視化的工具，利于讓產品保持精益（識別價值點、優化流程）
多角色的引入，雖然使得藍圖更加復雜，但是能夠反映出更多角色的交互與流程關系。
客觀來講，這些體驗地圖時常保持爭議，特別是逐步大范圍在業內曝光后，形式化、假把式、濫用等標簽也愈發明顯吶，這些體驗洞察工具并不總是能夠在項目中發揮預期作用，它們也需要區分使用場景跟項目需求情況，如果你沒有嘗試過，可以積極引用，當你熟悉應用后你會發現收獲更多的是一種體驗設計的思維，一旦需求或痛點擺到面前時不再像一只無頭蒼蠅。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今年的“雙十一”，朋友圈異常安靜，沒有了以前電商活動的氛圍，沒有漂亮的數據，沒有曬圖，有人說是用戶消費疲軟了？數據不會騙人，今年”雙十一”一天的GMV還是比去年高了將近500億，而且一大波尾款人在11月1日就已經結束。再加上直播電商，用戶購買渠道變多了。李佳琦直播帶貨一晚就超100億的GMV，說明用戶的消費意愿和消費力還是很強的。算一下，50個李佳琦直播一晚上就能抵上“雙十一”一整天的GMV，有點厲害。中國偉大復興的道路還在繼續，隨著人民生活水平的提高，文化素養提高，互聯網普及，消費力只會增不會減，只是戰場在變化。
前些日子發了PP微助手的優化作品，本篇將結合改版思路和最近對互聯網設計行業的思考進行一些分享，希望對大家有一定的幫助，歡迎大家來指正吐槽~
互聯網產品最重要的就是流量，沒有流量，就算產品設計的再好，早晚也會運營不下去?？v觀這些年移動互聯網的發展，市場已經被分割的差不多了，各個行業都有龍頭企業（社交：微信、購物：京東淘寶、出行：滴滴哈羅、外賣：餓了么美團、旅游：攜程等等），各大互聯網公司業務也趨于穩定，紅利期已經過去，流量市場已經變成了“留量”市場。就像淘寶這種大流量的產品，也在吃流量老本。
回歸到設計，在互聯網公司做設計，一直在強調需要有產品思維、用戶思維，然而在“留量”的時代，更需要我們具有運營思維，同行業的業務趨同、需求趨同，可挖掘的需求少之又少，可以打開同一行業的各類app一看，就知道產品形態大同小異。所以只能在“留量”里下功夫，既要減少存量用戶的流失，還要在這基礎上讓存量用戶創造更大的價值。必然，我們在做設計改版的時候就需要結合一些運營知識。
“曝光”一詞相信大家都聽過，在拍照時，“曝光”時間越長，照片細節就越豐富，當然過度“曝光”，也會讓照片失真。在運營一個互聯網產品時，也需要用到“曝光”，這里的“曝光”是指產品內容的“曝光”。
用戶在進入某款產品的時候，都是帶有一定目的性，通常情況都會經歷三步操作，從看見內容，到與產品互動，最后得到想要的結果。
這里的“看見”，就要說到產品承載信息的曝光，合理的信息曝光才能更精準快速的觸達用戶。同時，運營同學最關心的數據和流量，也是需要安排合理的信息曝光才能有有效的數據和流量。在手機這么一小塊屏幕想把所有內容都曝光出來，是不太現實的，就算能，也不合理。把過多的信息一下子全部曝光給用戶，效果反而會很差。通常做法就是對頁面進行樓層的分割，流量進行合理的分發。大流量的產品，每個樓層都需要單獨部門去運營的，這樣就會出現業務主次和優先級，不然各部門就會為了爭奪"屏幕地盤"，無限撕逼。
1、樓層怎么分割，哪些樓層是產品部門控制，哪些樓層是運營部門控制，每個樓層顯示哪些內容，設計師需要根據每個樓層的重要性，去定義屏占比
2、哪些模塊需要首屏曝光，哪些是需要第二屏曝光，依此類推，這個至關重要，設計師就要考慮各類機型適配問題，比如iPhoneX一屏能顯示下的內容，在其他手機未必能顯出來，這樣會直接影響曝光，導致數據不好（等著背鍋吧～），嚴格來講要根據實際用戶使用機型占比去定義首屏顯示的內容。
3、每個模塊內容的信息層級，明確信息優先級才能結果為導向去做交互布局和視覺呈現，這時候就是你發揮的時候，對比、親密關系、留白等等，都可以上了。
這里結合PP微助手的一些改版優化（非全套），分享一些改版思路。
項目背景：PP微助手是取代電視遙控器一部分功能開發的一款小程序，核心需求有幾點
1、賬號統一，PPTV時代的用戶，大多都是使用的PPTV的賬號，為了方便管理蘇寧易購賬號體系，會引流把PPTV尚未升級的賬戶統一升級合并至蘇寧易購賬號。
2、投屏功能，看影片終端還是以電視機為主，所以只做投屏，不做在線播放功能
3、智能語音，結合蘇寧小biu智能語音系統，可以和電視機語音互動，實現交互功能
4、會員業務，移動端開通會員比電視端更方便，同時可以用一些運營手段促進用戶開通會員
5、推送活動，電視機打開頻次不如移動端，推送活動給用戶，移動端可以實時看到
電商行業通常會把用戶分成“大明”、“笨笨”、“小閑”三大類用戶，在視頻類產品，絕大多數用戶都是“小閑”用戶，來平臺都是找樂子打發時間的。
PP微助手本來就是輔助電視機的，用戶覺得用遙控器操作麻煩才會選擇用小程序操作。在設計的時候，把用戶當成是一個并不想動腦子并且很懶的傻子，產品設計越簡單越好，否則用戶干嘛要用小程序，遙控器挺好的，遙控器的大多交互都已經習慣，也沒啥學習成本。
從用戶角度分析，進入小程序無非就是找片源、看片以及看片過程中的一些基礎控制操作（播放、暫停、快進等等），所以簡化了產品整體框架，從原來底部5個tab（首頁、片庫、遙控、搜索、我的），改為3個tab（首頁、遙控、我的）。產品呈現給用戶的樣貌更加簡單直觀，也相應的培養了用戶心智，讓用戶對PP微助手這款小程序有個基本定位。
首頁改版前，按照iPhoneX的尺寸，首頁第一屏也就曝光了3個分類，而且下滑到底總共也就幾個分類，片源的曝光度不高，banner呈現也相對普通，就是那種正常電商類頭部banner。同時交互成本也高，要點擊“更多”才能看該分類影片的全部列表，要知道多一步操作就會多損失一部分用戶轉化。
改版后，針對第一樓層推薦影片采用電影宣傳時的大海報樣式，視覺焦點更強烈，同時曝光也更強烈一些，你去電影院的時候，看到的電影宣傳海報，大多都是這類豎版的，用戶已經有一定的心智模型，所以在這里采用豎版更為好一些。這些推薦影片在這里也作為“hook”，后面會講。當然像電商類產品，首頁需要考慮嚴謹的屏占比，這類尺寸肯定不合適。
第二樓層是影片的分類，采用文字tab左右滑動的方式，這種分類方式雖然沒啥設計感，也普普通通，但是在一個分類眾多的產品里，這種處理方法相當不錯。減小了樓層的沖突，也提高了內容的曝光。像騰訊視頻、愛奇藝、優酷，分類tab都是吸頂固定的，很直觀的傳達給用戶影片信息。下拉的時候，這里采用feed流，用戶在交互習慣上，連續操作時，對同一種交互會有慣性和依賴，上滑時查看更多影片，能滿足用戶的預期，也不會因為調整新的交互（上述的點擊跳轉查看更多）方式讓用戶反感。在視覺形式上，采用了橫版的樣式，是為了和第一樓層形成對比，也是為了節省屏幕空間，能曝光更多的內容。二樓的影片內容也可以分布一些“hook”
搜索也是一種用戶找片源的方式，后面再講，這里要考慮到流量分發的情況。
按照福格模型B=MAT，完成行為的三要素：動機、能力和觸發器。
用戶進了影片詳情，說明已經有動機了，這時候需要抓住機會，按照產品需求可以完成兩個行為目的，一個是讓PPTV賬號升級成蘇寧易購賬號，二是轉化成會員用戶。
這里要看一下進入詳情的數據，是“hook”進來的用戶多還是非“hook”進來的用戶多。如果是“hook”進來的多，說明用戶主觀意愿不是很強，這部分用戶可能會流失，如果是非“hook”或者搜索進來的更多，說明平臺用戶主觀意愿更強，有較高的粘性，更容易促進會員的轉化。
1、未登錄的用戶，點“推送”和“開通會員”按鈕，進入下一步登錄或者升級賬號流程。當然這一步會流失用戶，部分用戶會反感登錄這種操作。
2、已登錄的用戶，可以快速推送影片，完成自己的看片目的，如果是會員影片，這里就需要用戶先開通會員，當然只是引導，還會有一部分用戶不想開通會員，選擇離開。
1、沉浸式體驗，進入詳情，頭部區域自動播放影片花絮或者預告，快速讓抓取用戶眼球，增加下一步操作的意愿。
2、醒目的豆瓣評分，“hook”影片選擇一些評分高的，用戶針對豆瓣評分已經有一定的認知，評分優質的影片，用戶更有意愿觀看，更容易促進下一步動作，提高會員的轉化率。
3、各類標簽，比如：首播、獨家、會員免費、會員半價、4K高清等等，能清晰定位影片，捕捉各類用戶看片心智。
4、會員相關信息展示，未登錄的提示“登錄領券、限時活動等”，非會員提示“會員權益、開通會員的利益點等”刺激用戶。
改版前優惠券和體驗券在不同入口，流量分散了，券的目的就是要讓用戶去使用，需要縮短路徑，更直觀的展示給用戶，能讓用戶快速做決策。如果券種類多的話，還需要區分各種券樣式，需要讓用戶快速定位想使用的券。
其中已使用和已過期的券對用戶來說就是已經沒用的券，并不需要再用單獨的tab分類，并且弱化處理。因為PP微助手會員券相對比較少，不像電商一樣，會送很多商品券，所以用最簡單的形式展示給用戶就行。
值得注意的一點，不是說已過期的券就沒用了，如果運營把控好節奏，發券有一定規律，用戶看到過期的券會有一定的挫敗感，就會經常來關注券?！皬U券再利用”也能增加用戶的粘性。針對快過期的券，必要時候可以做二次提醒，給用戶造成緊張感，會激發用券欲望。
說服用戶下決定，一般從以下三個點去考慮：時間緊迫性、暗示稀缺性、后果恐嚇性
產品的流量來源有很多，除了自身用戶進入產品的流量，還有線下廣告、線上廣告、分享鏈接等等各種來源。目前主要的流量分發方式包括：搜索分發、算法分發、社交分發、人工分發、付費分發。PP微助手主要應用算法分發、搜索分發、人工分發。
先講一下“hook”，在電商里是“鉤子商品”，這里我把“hook”當做是“鉤子影片”，運營精準推薦的一些“hook”，會取到不錯的轉化效果。
用戶在產品內的行為路徑是不可控的，一大波流量進入首頁，每個用戶都有自己的目的，所以需要對用戶進行分流。一部分用戶去了搜索，這類用戶目的很明顯，知道自己想看的影片名稱，這部分就是搜索分發的流量；一部分用戶被“hook”勾走了，"hook"激發了用戶的看片動機，這部分就是人工分發的流量，需要運營去干預；一部分用戶在不停的瀏覽，在瀏覽過程中找自己的影片，產品會分析用戶行為，顯示千人千面的首頁，這部分就是算法分發的流量。
有流量分發，那必然就有流量承接，流量承接都是相對流量分發的，在電商產品里，站內的流量承接一般都在商詳，以及對應的后置鏈路（訂單確認、結算等等），從各渠道進來的流量，最終匯總在商詳。在商詳，會突出各種利益點和產品自身優勢去刺激用戶下單。至于利益點，活動時候的各種優惠信息就是典型例子，產品自身優勢，比如：淘寶的先享后付、京東有京東物流次日達等等。在PP微助手這里流量承接就是影片詳情以及后置鏈路會員套餐頁，具體可以看上面的“思路三”的分析，怎么去承接流量，怎么去促進轉化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一、設計和藝術的區別
藝術：
藝術是感性、天馬行空、富有創造力的，表達創造者的個人意識。
設計：
設計是理性、精密的，為了解決用戶的問題
（你看得懂嗎？你有什么見解？為什么大家見解不一樣？這就是藝術的魅力）
二、用戶體驗及用戶體驗設計
什么是用戶體驗？——————使用一個產品時的主觀感受
用戶體驗設計？———————為了提升用戶體驗而做的設計
1.用戶體驗設計
首先要解決用戶的某個實際問題--讓問題變得容易解決--最后給用戶留下深刻的印象。（視覺只是其中一部分，并不是設計的全部）
Eg：充電插座的苦惱--錯開位置
尿液四濺--廁所里放一只蒼蠅，用戶會去瞄準上廁所（設計美觀且有趣味性）
2、用戶體驗設計的特征
(1)嚴謹、理性、創意
先關注要解決的問題----其次思考有趣的創意幫助用戶得到更好的體驗。
(2)提供特定問題的解決方案
設計目標是什么，為什么人解決問題，如何解決
Eg:鋼鐵俠u盤死死按住關機鍵；樓梯是為殘疾人設計的嗎，我懵了？
(3)不讓用戶思考
用戶感到挫敗，會放棄。你的設計不要用戶一頭霧水。
(我到底怎么走?)
(4)趣味橫生
尿液四濺貼提示語效果不好，放一只蒼蠅效果很好？
因為：抓住了用戶的心理和行為習慣，同時充滿趣味，吸引用戶
Eg：path推出的商店功能，在里面買自己喜歡的貼紙，搖晃手機貼紙也搖晃，感覺很好玩吧～帶來好的體驗感
3.用戶體驗設計師遇到問題如何思考
三、各種設計師的區分
1.怎么和別人解釋用戶體驗設計師
A：“你用一個網站的時候，有沒有出現：某個功能找不到了，點擊按鈕沒有反應，填寫的信息不知道哪里錯了總是不能提交成功？”
B：我們的工作就是改善這種情況，讓你使用網站時有一個好的體驗，同時能讓用戶感到愉悅和不受打擾。
工作中：除了考慮用戶還要讓公司有利可圖
2.交互設計師
通過分析用戶心理模型、設計任務流程、運用交互知識把業務邏輯（需求/功能）以用戶能理解的方式表達給用戶，最終實現產品戰略（公司需求和用戶需求的平衡點）的過程。
即：從公司戰略角度考慮問題，在公司需求的基礎上讓用戶覺得好用、易用
交互設計師的產出物：不是原型，你不是畫圖的工具，重要的是解決問題的能力
工作內容：競品分析文檔、用戶反饋整理、流程圖、設計草圖、原型...
3.視覺設計師
原畫：設計者很強的手繪能力，作品充滿藝術表現力
平面：傳達思想，較強的感染力
推廣運營設計師：突出重點抓眼球
UI：良好的審美、具備一定的交互知識
(原畫) (平面) (推廣運營)
4.用戶研究員
通過各種分析和研究，深入了解用戶特征，用戶行為習慣，為產品運營推廣提供必要的方向
工作內容：市場分析、競品分析、創建人物角色、問卷調查、焦點小組、用戶訪談、可用性測試
四、用戶體驗設計師的作用和價值
1、用戶價值商業價值
用戶通過優秀的設計快速達到目標，企業也會財源滾滾
eg：改變一個按鈕的顏色，點擊率提高35%；優化操作流程，轉化率提高50%...
2、項目價值
跟進各個環節，保證產出物質量
推進統一及標準化，提升設計效率
促使項目流程合理，有規劃
五、交互設計師的作用和價值
1.工作內容
分析重塑需求;與用研配合，了解用戶特征與行為；設計結構、流程、界面、動態效果；跟進視覺、前端、開發；及時整理上線問題，準備下次迭代...
2.品牌價值
維護和突出品牌形象，統一的設計理念
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在千禧年來臨之前，我們首先開始在單一視圖屏幕中進行UI設計，這類屏幕在當時最流行的尺寸是640x480。大多數時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區域或文本局部區塊中設置了內部滾動條。毋庸置疑，當時的大部分網頁也是用Flash或HTML創建的，并帶有用于布局的表格。那是在智能手機出現之前，隨著事物的發展，我們經歷了第一個向“響應式”設計的根本轉變。我們已經走了很長一段路，CSS已得到長足的發展，“響應式”網頁設計從2010年開始才真正獲得了專有工具。
圖表來源: https://www.webdesignmuseum.org/web-design-history
隨著CSS3的發布，我們獲得了對“媒體查詢”（Media Queries）的訪問權限（譯者注：隨著移動互聯網的興起,我們需要適配多種移動端設備,這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創造了“響應式設計”一詞。十多年來，我們一直使用“響應式網頁設計” (RWD) 創建網頁布局，作為一種網頁設計方法，僅需基于一種屏幕尺寸進行設計，“響應式”使我們的設計能夠適配各種設備和屏幕尺寸。
在早期，當移動電話還不兼容媒體查詢或JavaScript時，“移動優先”和”漸進式增強”的概念就成為了非常流行的方法，當時有很多CSS完全不受支持。
用我們今天的話來說響應式設計，我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設計從桌面端調整為移動設備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。
很快，使用這種“響應式”設計方法可能會被認為與使用表格進行頁面布局一樣過時—就像我們在90年代所做的那樣。
我們通過基于viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們缺乏響應“用戶需求”的能力，也缺乏將“響應式”樣式注入“組件”本身的能力。
當我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內容，每個“塊”都由各種更小的“構建塊”組成。這些組件拼湊在一起構成我們的網頁。我們可以使用 global viewport information（全局視口信息）來設置這些組件，但它們仍然無法擁有自己的風格。當我們的設計系統是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。
好消息是這個生態系統正在發生變化，而且它正在迅速變化，這需要我們進行一些思維轉變：考慮如何設計和定義組件樣式以及它們如何適應周圍環境。
CSS正在不斷發展，“響應式”網頁設計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應式網頁設計” (RWD) 以來，僅僅10多年的時間，這個生態系統已經準備好迎接CSS發生一些相當大的改變。
讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設計方法，以及我們如何考慮界面設計。
簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應”用戶。它們將使我們能夠根據用戶自己的特定偏好或需求來設定網頁樣式。這將使我們能夠根據用戶的體驗偏好來調整用戶體驗。
這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：
這些將幫助我們構建更具活力和個性化的網頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網站易于訪問的用戶。更進一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經在操作系統設置的偏好。舉個例子，當用戶的操作系統偏好設定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應先尊重他們的偏好，并為其他人提供“動效增強”的體驗。
另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設定），它允許我們根據用戶的偏好和操作系統中的設置將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發生。
CSS 中最令人興奮的新興領域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應式”設計到基于“容器”的“響應式”設計的轉變對發展“設計系統”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發展方向。
簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設置規則。這意味著任何組件都更加獨立，與現代設計系統保持一致，真正成為“即插即用”模塊，可以轉移到任何頁面或布局，而且無需根據新環境重新考慮所有內容。
“容器查詢”為我們如何規劃、設計和構建特定組件提供了一種更加動態的方法，因為組件本身擁有它的響應信息。
甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要，我們應該研究一下。
由于各種“形態因素”（form factors）的變化和擴展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內容中，請記住，這是最具實驗性的，并且只是一項正在進行的工作，仍在嘗試解決我們可能遇到的任何復雜問題，同時考慮未來“形體因素”可能會如何發展。
在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們如何讓內容根據新環境進行適配。例如，你可以在一個屏幕上放置一個收起的側邊欄（或菜單），并允許內容在另一個屏幕上展開并隨頁面滾動。
我知道你在想什么，我們已經從事網頁設計并使用“響應式”來進行網頁設計10余年了。我們對其相當滿意，那么為什么要改變呢？如果我們真的以終局視角來看響應式設計，那么它就是關于個人用戶的用戶體驗設計。我們正朝著一個與每一位個體用戶高度相關的時代邁進。我們的網頁體驗應該去適應用戶的需求偏好。隨著設計系統的發展以及我們如何創建更便攜的網頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基于各個層級來確定用戶的最佳體驗
考慮到這一點，這意味著我們現在可以使用基于頁面的媒體查（包括跨越屏幕的細微差別）來設計宏觀布局；使用容器查詢的組件設計微觀布局；使用基于用戶偏好的媒體查詢，根據用戶獨特的偏好和需求定制用戶體驗。
對于新的響應式設計，有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協同工作的方式需要我們從根本上轉變我們對設計和用戶獨特體驗的看法。我們需要更加適應這樣一個事實：即我們的設計不是靜態的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學會在這種模糊性中做出計劃。網頁和設計的未來變得越來越復雜，我們需要適應和挑戰自己，理解“新響應式”體驗的意義。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做一個完整C端項目前，從產品思維得理解、需求分析到場景分析，通過以上分析得出結論，進而制定我們的設計目標，把設計目標落地到解決實際的設計問題，內容較多，大家可以根據上述目錄來進行選擇性閱讀。
了解用戶心理：“心理”主要是指用戶的情緒，只有了解用戶的心理狀態，才能知道他們在接觸到或者使用我們的產品時是正面的情緒還是負面的情緒。正面情緒需要我們引導去實現轉化，負面情緒需要我們安撫以避免跳出和口碑的損失。
把控用戶行為：最終目的還是引導用戶行為，讓用戶按照我們的計劃進行產品的交互、操作，從而實現對用戶的有效管控和轉化。例如：上品店慶推出“購物省錢節”的概念，聯合商家推出各種優惠活動，就是抓住用戶在購物時想省錢的心理，通過降價、優惠券等方案讓用戶在選購商品、提交訂單和結算階段都保持高漲的情緒，從而推動用戶最終完成付款。
解決用戶痛點: 在完成上面的分析后，我們最終需要把調研和分析結論落地為設計方案，前提是要關注用戶當前的情緒是負面的還是正面的，如果是負面的情緒，我們可以通過補償、安撫等方案對用戶進行留存。例如：在等待外賣送達時，配送信息頁一般都會有預估時間、位置等信息，讓用戶有一定預期。同時如果遲到時間過長，也會通過準時寶等規則給予用戶優惠券補償，這些都是負面情緒的安慰。
項目思維主要指，我們要具備極強的發現問題、輸出方案、推動落地的能力。這就是設計師的項目思維和推動力，可以保證自己的想法快速落地、推動設計優化并盡快上線。
商業思維是指，拉新：通過產品、運營和營銷策略讓用戶下載產品。留存：讓下載的用戶保持活躍度，留住用戶，便于轉化。轉化：讓用戶按照我們的業務規劃去注冊、分享、下單、付款等動作，一步步帶入我們的圈套，完成關鍵操作。變現：將用戶行為變現，內容產品的活躍度可以帶來廣告營收，電商產品的成交額就是業務收益。
相同點：在實際工作中，設計師和產品經理的目標在本質上是一致的，都是解決用戶的痛點、滿足用戶的需求，為用戶提供體驗更好的產品，并在此基礎之上完成用戶轉化，實現收益。作為一個設計師，我們對產品了解的深度不一定比得過產品經理，但是廣度上你應該要求自己和產品經理保持一致。只要掌握產品的架構、流程和業務的模式、原理即可。
不同點：UI設計師更注重通過用戶體驗來留存用戶，產品經理更多地考慮轉化用戶和變現的途徑。
沖突點：這時就會產生一些沖突和矛盾，有時為達到業績目標，產品經理或其他業務方可能會提出有損用戶體驗的方案或者策略。
想要解決與產品沖突得問題，就要充分調動自己的產品思維，保持習慣性的產品思維，才能始終保持和業務一致的目標。和業務方站在一起，才能找到設計和業務的共同目標，并將業務目標轉化為可執行的設計目標，才能為設計帶來更高的價值。
這里就繞不開這個話題----產品思維。別人眼里的UI設計師，很多人會認為設計師的工作就是設計流程頁面、視覺效果。這些工作看起來只是錦上添花，即使沒有專業的設計師來設計，可能只是流程、控件位置不太合理、樣式和顏色不太好看而已，并不會影響產品的開發和上線。其實，設計師的價值不僅是藝術價值，更重要的是為業務帶來價值。
UI/UX設計師，關鍵在于對用戶場景、對產品細節的敏感度，這也是其他崗位不具備的技能。實際工作中這些細節問題，很容易區分出來專業性的差異，因為UIUX設計師是距離用戶最近的人。我們設計頁面，用戶在頁面上操作和獲取信息。我們設計流程，用戶通過流程完成各自的需求。我們設計的產品流程、頁面，是用戶直接接觸和使用的東西?；谶@個原因，設計師對用戶的需求、反饋是最了解和最敏感的，我們可以通過用戶的反饋、操作數據把控用戶的心理狀態和行為方向。無論是在方向上還是從細節出發，挖掘和洞察用戶需求，設計師有明顯的優勢。
所以UI設計師真正的價值就是通過自己對細節和場景的思考，自我驅動，找到設計優化、產品迭代、業務提升的機會點。想要找到這些機會點，你需要培養自己的產品思維、項目思維和商業思維。
01、多與需求方、業務方（產品經理、運營、市場等崗位的同事）溝通，在參加需求評審的時候，深入了解業務和產品的特點、原理。
02、了解產品流程：在接手某項業務或產品時，先利用思維導圖對產品的架構做一次梳理，通過功能結構圖你可以清晰地看到產品應該有的功能。在掌握架構的基礎上，對產品的核心流程再進行一次梳理，包括線上、線下所有的流程節點、體驗接觸點和不同用戶端的流程觸點。
03、多做競品分析，從競品中尋找靈感和產品感。怎么做競品分析具體可查看我的其他文章，競品分析維度的確定。
04、持續不斷地培養自己的思維能力，深入思考、多做歸納總結和分析。在做設計的時候我們也可以讓自己的思維慢下來，多去思考：思考一下為什么做這個需求？對用戶有什么價值？對產品有什么價值？對業務有什么價值？設計、產品、運營應該怎么做才能達成這個目標？我們的做法對業務、對產品有什么影響？設計方案能不能很好地平衡業務和體驗的關系？
01、用戶不知道自己真正想要什么。
02、用戶難以說出自己的真實需求，用戶在闡釋自己的需求時，就會不自覺地粉飾和解釋自己赤裸裸的本質需求。例如：那些刷視頻就能領紅包得產品，但為什么它最近不火了，這類產品的人群，本質需求是：通過刷頁面領紅包，獲取更多的錢，這類人根本不關心內容是什么、內容質量怎么樣，這就造成了內容的觸達效果非常差。
01、了解我們產品的目標用戶群體和現有產品用戶群體，掌握用戶基本信息，分析用戶特征。（Who）用戶是哪些人：性別、年齡、地域分布、學歷收入等。(What) 用戶有什么共性。（Why）為什么選用我們的產品。（Where/When）在什么場景下使用我們的產品。
02、通過了解用戶得到的所有信息，然后創建用戶畫像，得出結論。那么如何創建用戶畫像呢？
001、人物創建：創建一個虛擬的用戶群體中的一員，利用我們上面提到的用戶相關信息，可以給他/她一個插畫風格的照片幫助我們具體化這個用戶的人格和形象。然后列出他/她的基本信息，給他/她定一個社會角色，比如：小王，男，28歲，銷售經理，我們產品的熟練用戶，月收入2萬，學歷本科。
002、分析動機：這個人物用我們的產品想干什么；這個人物對我們產品某個功能使用較多，需求較強的原因是什么，想達成什么樣的個人目標。
可以通過用戶畫像推測用戶的心理特征和行為偏好，積累了以上信息，你就比較容易進行需求的分析和挖掘了，提煉出解決用戶需求的核心的痛點。例如：解決了用戶在特定場景下的某一個核心痛點，滿足了用戶在當前場景下特定的訴求/需求。例如：共享單車產品就是解決了從車站、地鐵站到家、工作單位最后一段距離的出行痛點。例如：地圖軟件解決的是陌生地區找不到路和易違章的痛點。
01、了解人性：做設計就是做人性，只有把握好人性的特點才能更好地滿足用戶心理，進一步引導用戶行為。馬斯洛需求層次理論，人的需求從低到高可分為 5 個層次：我們就可以試著洞察用戶在特定場景下的本質需求到底是什么了。生理需求（呼吸/食物/水）：現代社會其實就是對生存條件的追求；安全需求（避免自己受到傷害）；
社交需求（愛與被愛/社會關系/地位）對情感的需要；尊重需求（被自己認可/被他人認可和尊重）對穩定社會地位的需要；自我實現需求（道德層面/內心層面的追求和滿足）。
所以用戶的本質需求無外乎：生存、金錢、情感、名利、心理滿足這幾個方面。
02、將用戶敘述的需求，轉化為本質需求：比如：有的用戶說，上品商場最近優惠券怎么少了？我都不想去上品買東西了。用戶表意是嫌優惠券少，如果我們草率得出：增加優惠券運營力度的結論太過于表面，其實用戶的本質是嫌商品太貴了，他們的本質需求是省錢，少花錢且買到想要的東西。而這類用戶是對價格極其敏感的用戶，增加優惠券只是其中一個策略，是無法滿足他們根本需求的。根據他們省錢的本質需求，我們可以給他們更多地推薦低端商家，哪怕沒有優惠券，還是能提升一波 GMV。
進而轉化成設計目標為，要通過我們的設計能力，給用戶營造一個很省錢的氛圍，而不是一味地給用戶降價或是發優惠券。規劃更多的秒殺、每日特價、分享領券等活動專區，在設計頁面時增加優惠券、紅包等元素，突出省錢、低價等文案，可以有效地吸引此類用戶，引導他們下單付款。這就是本質需求的應用方法。
工具——KANO 模型問卷調研，主要依據是用戶調研，可以通過定性訪談的方式，對部分用戶進行了解，大概了解用戶對需求的態度；也可以通過定量問卷的方式，通過問卷獲取比較有參考價值的數據信息。不同類型的需求和用戶滿意度之間的關系，將影響用戶滿意度的因素分成五類：
基本型需求：無此功能，用戶滿意度會顯著降低；有此功能，用戶滿意度不會顯著提升。
期望型需求：無此功能，用戶滿意度會降低；有此功能，用戶滿意度會提升。
興奮型需求：無此功能，用戶滿意度不會降低；有此功能，用戶滿意度會有顯著提升。
無差異需求：有無此功能，用戶滿意度都不會有太大變化。
反向型需求：無此功能，不會影響滿意度；但有此功能用戶滿意度會下降。
經過需求分析我們會拿到大量用戶需求的相關信息，在取舍和決策時我們可以使用三個原則 + 一個工具：01、
圍繞本質需求和痛點；關注與業務不相悖的需求；解決影響用戶峰值體驗的問題；在做分析時可以利用 KANO 模型，重點關注模型定位出的基本型、期望型需求，適當關注興奮型和反向型需求。
至此，我們掌握了產品分析的第一步，也就是找到設計的方向和基本依據——用戶需求；下一模塊我們將進入需求分析的第二步——場景分析，來找到設計可以利用的機會點、切入點！
01、任何產品的誕生都是基于用途，牙刷為了刷牙、菜刀為了切菜、汽車為了出行……生產這些產品是為了滿足用戶的需求，而生產產品時需要考慮的因素如外觀、材質、設計細節等則源于用戶場景。
02、互聯網產品其實也是一樣的道理，產品基于用戶的一些需求或者痛點而誕生，基于用戶的使用場景做功能和細節體驗。
站在用戶的立場思考細節：必須首先知道用戶需要什么、喜好什么、討厭什么、不能接受什么，才能進一步改善我們的產品?；谟脩舻哪康?、行為偏好等研究用戶在場景里的行為、情緒，從而深入場景，做出正確的決策。
避免主管的質疑和批判：有的用戶會有各種各樣“奇葩”的反饋，所以我們要多理解用戶的選擇和立場，避免主觀的質疑和批判。
學會聆聽和關注反饋：在日常工作的溝通、對用戶的訪談中，我們可以試著多用心傾聽對方的表達。
01、還原用戶體驗產品的流程（分析的是場景中的線，包括流程線、行為線等。）02、列出用戶與產品、與線下場景有聯系的所有觸點。03、通過這些觸點掌握用戶的操作軌跡和行為特征。04、分析用戶的體驗感受。
01、明確分析對象：最重要的是確定一條明確的流程線，分析的產品某個功能或者某個服務/體驗流程，并非用戶。
02、拆解體驗流程：把分析的流程進行拆分，拆成一個個體驗節點，實際場景設置節點。比如網約車的產品，要根據用戶在線下叫出租車的體驗場景來拆分，可以拆成走到路邊、招手攔車、上車、行程中、支付下車等幾個重要節點，然后根據這些節點來考慮和分析是否有優化或者需要顛覆的地方。
03、創建用戶畫像：主要從用戶的基礎特征、用戶的心理和偏好等信息去做畫像，最后可以形成一個稍稍具體的角色。
04、分析階段：制作表格，把每個節點的信息進行分析推測和記錄。例如下面表格：
橫向：是第二步拆解出來的所有的流程節點。
縱向：用戶與產品的觸點：就是用戶如何操作我們產品，點了哪里、在哪里停留時間較長，這都是通過埋點數據可以看到的。
用戶目標：從用戶的使用數據和用戶訪談中獲取相關的用戶信息，通過用戶的行為和他們表述的信息找到他們的立場、目的和利益點，從而分析他們想要什么。
用戶行為：為了這個目標會怎么做。
結果：看我們的產品頁面信息、流程及功能能不能滿足用戶上述的目的和行為即可。
用戶情緒：用戶的目標和我們觸點是否契合，最終的結果是否能滿足用戶的需求和目的，沒有滿足的時候情緒低落到什么程度，滿足的時候情緒會高漲到什么情況，哪里是最低谷，哪里是最高峰。
05、得出結論：重點要看的是用戶情緒的起伏。找到最低點，看哪些節點影響了用戶的體驗，就是產品的痛點，也是我們的設計發力點和機會點。
同理心模型適合分析我們產品體驗流程中的某個節點或細節功能，不適合進行流程化的分析。包含所看、所聽、所做、感受、所想。
01、明確我們分析的對象是什么：比如：網約車用戶在打車等待接單的環節；比如電商產品確認訂單的環節；這些環節這些環節和節點都有共同的特點，就是集中在有限的一到三個頁面中，用戶的核心操作比較簡單。
02、首先把圖表畫在白板上，用便利貼寫出所看、所聽、所做、感受、所想，五個維度的想法，
03、然后進行集體討論，把這些便利貼提煉總結，歸納出重點信息，通過這種方式可以避免一個人悶頭思考的局限性，也可以保證思考的全面性。
04、接下來對這個圖進行行為總結，找到用戶行為的原因，分析用戶的偏好和習慣。
05、最后通過用戶情緒和感受，分析我們產品體驗的問題。
親切：通過情感化設計，營造親切的氛圍，拉近與用戶的距離。比如：百度地圖可以在導航設置里將導航車標設置成自己的汽車品牌，當看到自己車的車標在地圖上移動，用戶就會感覺非常親切和熟悉。
安全：讓用戶感到人身、隱私的安全。比如：嗶哩嗶哩在登錄界面輸入密碼時的二次元形象會有捂眼睛的動作。
互動：我們的產品流程和功能的實現需要用戶的參與。比如：用戶刷新網頁時，由于網速較慢、需要較多的加載時間，在加載的過程中，有很多網站會提供一些互動小游戲。用戶參與進來了，整體等待的時間也就顯得沒那么漫長，這種互動既可以緩解用戶的焦慮情緒，又能有效防止用戶跳出。
驚喜：人們對一件事物的判斷往往會基于最初的信息。所以如果我們在提供最初的信息時就給予用戶更好的結果，一定可以給用戶帶來驚喜。花小豬在打車時先出現原價，然后彈出優惠券動效，價格數字也嘩啦嘩啦往下降，這個不斷下降的數字就利用了錨定效應，給予用戶一定的驚喜。
關懷：考慮用戶的使用場景，在場景下給予用戶細節上的功能推薦或操作建議。比如：美團外賣，在天氣惡劣時會提前提醒用戶：為避免延誤用餐時間，請提前下單。比如：滴滴出行，在用戶經常通勤的時間段也會自動提示：由常用起點至常用終點的路線派車大概需要XX分鐘，點擊即可叫車
預期：難以避免需要等待、甚至反復操作的情況，此時為避免用戶跳出，你需要在細節上做好預期管理。比如：我們在用支付寶還信用卡時，支付完成后我們能看到已提交——待銀行處理等環節的流程提示。比如：我們在填寫一個需要補充大量信息才能注冊的網站賬號時，網站頂部一般會有注冊步驟的導航。當然以上只是最基礎的預期管理，如果你的文案能更俏皮一點，視覺效果上增加一些 IP 、甚至動畫就更好了。
反饋：對用戶的操作及時給予回應，尤其是異常場景，需要使用用戶更容易接受的方式給予反饋。
情懷：能給用戶帶來情感上的力量。
品牌：在產品的配色、排版、控件樣式上體現品牌的統一調性。在產品的體驗流程中貫穿品牌的價值。比如：在京東自營的店鋪購物、使用京東物流的產品會標明“京東物流”，在確認訂單頁也有“京準達”的功能選項，京東通過這種方式，將自營物流、快速到達的品牌特性一一表達。
價值：實現更大的社會價值，從而提升企業形象。比如：商城的包裝箱、騰訊的 404 網頁上都能看到一些被拐兒童的尋人啟事，因為這些網頁和包裝材料的傳播力極大、傳播范圍極廣，可以帶來良好的社會公益效益。
故事版：體驗地圖和同理心模型，可以分別從流程到節點對場景進行分析，那么這些場景如何歸納和表達，以供大家決策和評審呢？需要站在用戶需求的角度講故事。故事板這種漫畫/故事的形式易于被受眾接受，在闡釋需求、說明方案時具有更強的親和力和說服力，
描述過程：創建的虛擬人物；明確關鍵節點；找到虛擬人物在整個故事中所有行為和目的。
產品思維、需求分析、場景分析這三部分是產品設計三個基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。接下來我們要做的就是明確設計目標。
01、一接到需求就馬上打開軟件開始往上鋪圖，遇到被卡住的情況，沒有辦法繼續做下去，總在糾結。
02、有時候產品經理對某個需求也提不出很明確的方向，我們設計的時候能搞出幾個方向的方案，但是不知道如何決策。
03、我們在著手設計的時候就沒有想好我們輸出這個設計圖的目的是什么，比如需要促進產品什么轉化、解決用戶什么痛點、解決體驗上哪些問題？
04、我們做這些工作的目的是XXX，只有達到這個目標我們做了這么多工作才有意義、有價值。
05、在日常工作中你也會發現，產品設計不等于純創意設計，產品設計的關鍵價值在于發現和解決問題，通過對體驗流程和頁面細節的處理/優化，得到我們期望的用戶反饋和業務數據。
01、設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標；
02、然后是將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標；
03、上線后，及時收集和整理設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標；
04、然后規劃下一步的迭代方向。
01、明確用戶目標和產品目標：設計目標的根本是產品目標，產品目標的根本來是業務目標和用戶目標，也就是業務的規劃和用戶的需求、痛點。因此在實際操作中，第一步我們要先明確我們的產品目標是什么，產品目標大多和用戶的轉化、功能的使用率有關，我們朝著這些方向分析一般不會有較大偏差。
02、通過上面目標找到與之相關的關鍵用戶操作：比如點擊加購按鈕、比如完成付款驗證操作、比如填寫全部表單信息。
03、將關鍵的用戶操作轉化成可以衡量的數據指標：將這些關鍵的用戶操作轉化為可以衡量的數據指標，比如加購 BTN 的點擊量、訂單提交后的付款成功率、比如表單信息的完整率。因此設計目標必須是可量化的，產品使用數據和業務數據，比如點擊量、退出率、取消率、跳出率等，才能在設計方案上線后正確評估我們的方案有沒有完成設計目標。
01、先去定位設計難點，找到設計重點，再著手設計。完成主流程后再去解決小問題。
02、接著列出流程或需求點，對設計方案有大致框架；
03、然后針對流程中每個節點列舉可能會出現的問題把精力放在影響設計目標和用戶核心體驗的重點問題上。
精益創業模式里有一個 MVP 的概念，我們現在產品研發中的敏捷模式也是源于這個概念。簡單來講，就是用較小的成本先做出一個產品，然后快速上線，驗證業務模式、產品策略和用戶體驗等問題，然后小版本快速迭代，進行優化。
參考資料：
《用戶體驗干貨筆記》
《用戶體驗要素》
《騰訊產品法》
《交互設計知識體系》
C端設計前的準備工作，其中重點在于學會需求分析和場景分析。具體掌握需求分析的核心方法步驟，和場景分析中用到的三個工具用戶體驗地圖、同理心模型、情感化設計、和故事版。需求分析、場景分析是產品設計的基本要素，做好這些分析能幫助我們了解產品、業務與用戶之間的聯系，從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。
接下來我們要做的就是明確設計目標，設計目標的來源是用戶目標、業務目標和產品目標，依據這三個目標，我們將其轉化為設計目標，然后將設計方案朝著既定目標實施，在方案的流程和細節里體現/實現我們的設計目標，在產品上線后，及時收集和整理和設計目標、產品目標相關的數據和用戶反饋，驗證我們的設計方案有無達到目標，然后規劃下一步的迭代方向。以上內容，感謝觀看。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn