客戶購買我們的產品，服務解決方案的目的就是這幾個。要么賺錢，要么省錢，要么提高效率或者節約時間。
因此我們一般需要考慮這幾個問題：
客戶通過購買公司的產品，服務或解決方案，得到了一些結果，這些結果推動公司整體戰略的前進，最終實現了公司的愿景。
客戶成功，用一句話來總結?？蛻敉ㄟ^購買解決方案而獲得最大的價值。
客戶尋找的不是產品、不是解決方案，而是成功。
以SaaS行業為例：
在經營層面上，目前的SaaS業務有兩種不同的經營視角，分別如圖1和圖2所示。
圖1常規的經營過程
圖2 SaaS的經營過程
在圖1的經營價值鏈中，客戶成功的價值權重不大；交付之后整個生意就定型了，有沒有客戶成功差別不大。換句話說，在客戶成功上加大投入，收益并不會同步提升，這就是為啥軟件企業不強調客戶成功的原因。
圖2的經營價值鏈中，客戶成功的價值權重至少超過50%。因為客戶成功承擔了除初次收入之外，后續所有訂閱收入責任。如果SaaS企業在客戶成功業務上不加大投入，就可能承受半截生意的風險。
SaaS生意即使在簽約交付之后，這事兒也沒算完；在SaaS收入模式下，不能把產品賣給客戶后就一走了之。因為交付之后與客戶就“失聯”了，為了收回剩下客戶訂閱費，或者想要回更多的增購款，就必須有客戶成功業務。
說到為什么國內的客戶成功沒有那么熱了，相反還被嫌棄了；于是有人認為是因為國內客戶成功的姿勢不對，沒有理解老外的客戶成功精髓。
國外SaaS公司對客戶成功的要求，無非也就三個：培訓、使用、增購。其實不是姿勢的事，而是國內外客戶成功的業務背景不一樣；即使姿勢一樣，結果也會天差地別。
以SaaS行業為例，如果按照圖2的經營邏輯，客戶成功對應的是留存；而衡量收入的留存指標是NDR，即凈收入留存率。NDR的計算公式為：
NDR=(beginningrevenue+upgrades-downgrades-churn)/beginning revenue
從NDR公式可以看出：能把SaaS生意搞砸的是churn，即客戶流失。恰好在流失這點上，中外SaaS企業面臨問題很不一樣。
國外的SaaS客戶，訂閱付費天經地義。所以churn并不是客戶成功的重點，CSM做好基本動作就OK；而如何提升upgrades，才是客戶成功的業務重點。因為這不但補償了churn帶來的損失，還能使NDR>100%。所以國外SaaS公司的客戶成功團隊，是一個不折不扣的盈利組織。
但國內的情況完全相反，SaaS客戶“跑單”是大概率事件。所以，國內客戶成功的業務重點還真不一樣，與老外的姿勢不一樣，也不是沒有道理。
所以，當前國內客戶成功業務的首要目的，還不是為了贏利；而是為了止損，即 止住客戶流失造成的收入損失。雖然這樣做公司盈利水平會降低，但這也只是增長慢的問題，不至于影響公司的生存。
從這個意義上來說，國內的SaaS企業，比國外SaaS企業更需要客戶成功。
所以說確保用戶續購，增購，轉推薦就成了客戶成功經理最重要的事情。
增長的秘密就是新老客戶雙翼齊飛?；蛘呓须p輪驅動。
作為客戶成功經理，客戶的留存率是最重要的一個衡量指標。
2015~18年領英的會員擁有客戶成功經理頭銜的人數。是一個快速攀升的一個狀態。據領英的一個統計顯示，客戶成功經理是最有前途的職業之一。
在Google上搜索客戶成功經理短語的一個增長趨勢。也可以看到這幾年是有一個非常迅猛的增長。
將客戶成功作為一種實踐的公司，會比競爭對手增長得更快?？蛻舫晒浝淼慕巧彩菙底只D型的中心。
客戶成功經理就在這個經常波動的消費差距內工作。
如果要用一句話來總結客戶成功經理，就是客戶成功管理就是實現價值，真正的價值是讓自己和客戶都越來越成功。
客戶成功經理最主要的內容分為三塊。
橫軸：客戶對交付成果的一個期望
縱軸：是客戶體驗的一個程度
客戶成功等于客戶的成果加上客戶的體驗。
CS（客戶成功）=CO（客戶成果）+CX（客戶體驗）
有三個動作可以提高續約率：
這里涉及到三個關鍵期：
如果你想知道客戶的滿意度，又想用最簡單的辦法。那就可以用NPS凈推薦值這個指標。
它是一種大多數公司用來衡量總體客戶滿意度的核心的指標。
NPS=支持者人數百分比 — 貶低者人數百分比。
客戶成功經理的任務需要把客戶從『活躍使用用戶』變成『忠誠客戶』，最后變成了高NPS客戶。如果用一句話總結就是：
客戶成功經理要讓客戶取得成功并且體驗出色。
最后對未來做個展望。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文將分享另一個更為深層全面的B端用戶研究方法——用戶訪談。通過面對面的溝通，以及觀察用戶的表情、行為去挖掘更深層的需求。
下面是本次分享的文章結構，標??的為重點部分。
用戶訪談通?？梢圆捎?span style="font-weight:700;">線上會議、電話或者線下面對面交流兩種形式。
線上會議和電話訪談的優勢顯而易見，可以不受地域限制展開調研訪談，整體的成本也比較低，設計師可以自己找領導或者協調資源去推動。
缺點也是比較明顯，溝通起來效率低下，比如我們一定有過“電話里說不清，我們見面詳談”的經歷。
所以，相較而言線下訪談無疑是最佳的調研形式。首先當面溝通更加高效，其次對于搭載硬件設備的產品來說，讓受訪者在真實場景里操作演示，可以發現更多隱性問題。
在訪談過程中通常會接觸到以下3種類型的受訪用戶，不同類型的用戶我們應該怎么接觸交流呢？
話癆型的受訪者占大多數，通常就是想法、意見比較多。他們不僅有一大堆不滿意的點要訴說，甚至連對應的解決方案都想好了。
整體接觸下來，我覺得該類型的受訪者，可提供的有價值信息會更多一點。只不過我們要學會過濾信息。因為他們的修飾用詞通常比較多，例如：“太難用”、“超級麻煩”、“哎 我真的是受不了啊”…
訪談話癆型的受訪者，我們需要注意無論怎么聊都要緊扣主題，防止變成了吐槽專場。
其次也要表達肯定，安撫情緒，并對問題進行進一步提問：“您的這些建議真的很棒，也給我們提供新的思路，我都記下來了，我還想確認下，剛才您說的3個關于結算環節的問題，哪一個給您造成的困擾最大？”
顧名思義，受訪者可能是因為性格內向或害怕說錯了不好意思等緣故，在受訪過程中問一句答一句，比較容易冷場。答案的價值也比較低，例如：“對，是的”、“還行吧”、“沒啥感覺啊”、“反正就這樣用用吧”、“說不上來”。
這種情況下要嘗試緩解下氛圍壓力，換個形式溝通：“就是隨便聊聊，公司派我們來呢，就是因為非常關注用戶的使用感受，想收集一波用戶反饋與建議，您有啥不滿意的地方都可以跟我講講，越多越好。”
其次我們在提問的時候也要帶有引導性，例如：“還有呢、然后呢、具體說說呢”，如果對方實在說不出所以然，最有效的辦法就是進入上機操作環節，通常操作過程中那些問題也會隨之暴露出來。
專業型的受訪者一般是老板或者店長、經理崗位的員工，他們對于產品或整個門店乃至行業都了解得比較透徹。
和這樣的受訪者溝通，不僅是局限于產品的一些問題挖掘，他們會從這個行業的角度闡述一些個人的見解觀點，給我們提供一些有價值的優化方案或者改進方向。
例如餐飲的老板其實并不是很關心點餐、結算的流程有多么的順暢高效，畢竟他們不需要親自去做這些執行，而且坦率的說，對于絕大部分產品而言，好用并不能成為其核心競爭力。
他們關心的是如何帶來更大的商業價值，類似于如何提升坪效，如何提升門店會員的儲值能力等等。而這些老板的關注點，也會給我們未來的產品優化方向打開新的思路，去思考如何給我們的用戶創造更高的商業價值。
我們在做訪談之前，首先一定要熟悉產品業務的相關背景、受訪商戶的基本情況。
訪談過程中可能會提及一些專業名詞，例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎相關知識以后，省去了不必要的解釋環節，可以使訪談推進地更順利。
其次建議要了解下行業相關的基礎知識。尤其是餐飲業態，華南、北方、四川等地都因為飲食習慣的不同，在產品的功能和使用上的需求也是相差很大。具備了這些知識點以后，在提問過程中，也更利于提出一些深刻的問題，而不是浮于表面的提問。
行業相關的分析報告，可以去艾瑞、36氪、發現報告等網站進行查詢收集，在此不做贅述。
在訪談初期，需要準備一份訪談框架，但并不意味著我們整個過程只能按提綱來提問。尤其是B端這種千載難逢的訪談機會，只按規定的框架提問屬實是太吃虧了。所以在時間允許的情況下，除了框架以內的問題，盡可能多發散地去提問。
例如餐飲業態，會有各種不同載體的終端設備聯動使用，一體機POS、手持的POS、廚房KDS、廚顯大屏、各類打印機等等都可以順便了解、調研下，讓我們對于全鏈路的協作流程也會有更深刻的認知。
再例如后廚會涉及到KDS大屏顯示，可以問問目前的大屏顯示是否夠清晰（字夠大），也可以和負責海鮮稱重的工作人員聊聊，海鮮的售賣、計價流程，以及菜品雙單位（例如：1【條】魚，重量1【公斤】）的使用等等。
在溝通過程中，一定會有一些觸類旁通的收獲與問題被發現。這些問題也許來自一個模塊、或者某個特定角色，又或者是主產品關聯的其他后臺產品。
在提問的時候要考慮到受訪者的年紀和理解能力，如果措辭過于專業，可能會導致受訪者理解不到位，因此溝通的過程中要盡可能的說大白話。
我們都知道沒有經歷過的事，很難感同身受。有時候看到客戶群里，因為產品的各種原因導致商戶情緒激動，我們理智上非常理解，但是情感上很難共鳴。
因此每次的門店調研，我都會抓住機會觀察整個門店的運營情況，去感受那種忙碌的氛圍。
有時候開始進入營業高峰期，機器出現卡頓或者外賣不接單等情況時，自己的情緒都會一下子緊張起來，也能夠深刻感受到產品給客戶帶來的困擾。
當再次有產品迭代優化時，這些體驗總能讓自己能更容易代入用戶的角度思考問題。
除了去體會產品對情緒的直接影響，還可以關注下整個門店的布局、收銀產品的數量與擺放位置、不同產品的協同使用等等。
這些都會幫助我們發現，到底什么是門店運營環節里最重要的模塊。
在訪談過程中，不排除受訪客戶會反饋一些暫時無法解決的問題。這時候一定要告訴受訪商戶：“您的問題我已經記錄下來，回去會針對這個問題反饋上報，最遲X天我會讓顧問給您回復的”。
這么做一方面也是細節處維護公司品牌的整體售后體驗，其次也有助于我們再次回訪時，受訪商戶樂意花時間跟我們聊。
了解了用戶訪談的一些基本信息和注意點以后，到了本文核心部分，關于整個訪談的推進過程，一共分為3個階段。
1）訪談的3種類型
首先明確訪談的類型，用戶訪談的類型主要分為以下三種，最常見的就是第三種類產品使用回訪。
①新品場景調研新品調研的訪談，一般是由于業務的發展，可能需要升級或者打磨一款新產品來滿足市場的需求。
在訪談的過程中，我們需要關注的點就是用戶畫像、商戶訴求、使用場景、終端載體等一系列因素。
②潛在商戶拜訪當去往一個城市進行批量客戶調研的時候，偶爾會有拜訪潛在客戶的調研機會。這種類型訪問的關注點集中在商戶的痛點與需求上。
由于是潛在客戶，我們勢必是要了解他們想要購買或者替換產品的前因后果。也是借此機會了解到競對的優劣勢，他們放棄競對的原因，以及我們當前產品的功能是否滿足客戶的需求，還有哪些點不滿足，客戶重點關注的是什么。
③產品使用回訪
使用回訪是最常見的訪問類型，主要目的是對商戶進行售后維護、提升使用體驗。
且由于B端產品的復雜性和遠距離特點，以及新功能同步給商戶存在的滯后性，公司會安排定期的上門回訪。如果有這樣的機會，UED一定要盡量申請跟著去門店調研。2）問題設計3步走
到了最關鍵的一步，就是關于訪談的問題設計。
總結一下，問題的設計渠道來源主要有3種。主要還是根據調研目標進行問題設計，另外兩種方式，作為輔助。
那具體問題應該怎么設計，這邊我們分為3個步驟，從面到點依次拆解進行問題設計。
第一步：了解產品全場景能力
B端產品的特點可以借用《U一點料》的9個字概括，“多場景、全鏈路、多角色”，所以設計問題前，我們可以從場景+鏈路+角色/節點功能的維度來設計問題。
以餐飲行業的產品舉例，首先建議了解自家產品的全場景業務能力。
即從商家端到消費端會經歷的產品模塊和具備的現有功能，做到心中有數即可，畢竟不會一下子調研這么多模塊和功能。
第二步：確定要調研的流程主線
其他ToB產品同理，可根據某個操作鏈路為主線，確定主流程后進行問題設計。其實就可以理解為確定調研的目標。例如下圖要調研的主流程，就是提取點餐>下單>結算為主線。
第三步：關鍵節點問題展開設計
根據剛才確定的主流程，我們找到所有關鍵節點進行問題框架設計。
以上3個步驟可以理解為，如何在功能極其復雜的B類產品當中，篩選出與訪談目標緊密相連的功能鏈路。避免我們的訪談提綱做的過于冗余沒有核心。
3）2種提前準備工作
①提前告知
這點也非常重要，每一次去門店調研之前，先由當地負責的顧問與受訪商戶提前溝通。
一方面是需要與對方預約時間，另外一方面這種訪談對商戶而言就相當于優質的售后服務，會有受訪商戶提前列框架，準備問題。
那么這種情況更有利于調研，因為受訪者明確自己的問題點在哪里，就等著調研團隊（售后團隊）來門店后，好好拉扯一番。
②準備材料與設備
萬事具備，只欠東風。我們再盤點確認下本次訪談的各類工具是否備齊，準備進入訪談階段，大致需要準備的東西是以下4種材料工具。
在了解了受訪者類型、采訪者需要注意的點，以及帶著我們設計好的問題，下面正式進入訪談階段。
1）開場白
到達門店后，我們的顧問會給受訪客戶做一下來訪成員介紹，并講明此次到店的目的。一般都是產品使用回訪，或者新功能推薦培訓。
通常來說，受訪商戶對來訪團隊總是有很多”心里話“想嘮一嘮，因此暖場氛圍比較容易起來，也有助于我們接下來的溝通。
2）訪談中
進入正題以后，我們會先大致了解下受訪者最近使用的體驗以及遇到的問題，而后會根據問題框架進行提問。在整個過程中也需要注意觀察用戶在描述問題時候的表情和肢體語言，搜集用戶對于產品的真實態度。
其實整個訪談流程我們歸納一下，需要關注的就是四個關鍵點，手+口+心+顏。
①手-實操演示
關于實操演示放在第一個講，是因為這個環節非常重要。線下訪談時強烈不建議“脫機訪問”，這種形式對受訪者而言需要花更多的時間去思考問題的答案。
會遺忘甚至想不起來當時的具體情況，隨便的敷衍回答“嗯，還行”、“挺好的”，或者干脆彼此都不在一個頻道上。
其次，在操作過程中，建議用手機進行拍攝記錄。因為每個人對產品的理解方式與程度不同，在用戶操作的過程中，會發現一些有意思的代償方案。這些也是思考的切入點。代償方案是否比原先設定的實現方法更便捷。
回去通過視頻仔細分析受訪者的操作路徑，以及每個操作之前是否有遲疑等等。并且將問題點一一記錄下來。
②口-問具體操作
這個就是根據問題框架進行提問。在這個過程中，通常會穿插著上機操作演示，在現場記錄的時候可以先記錄個大概，等結束后再仔細整理。
③心-問心里感受
問受訪者的心理感受，其實就比較偏主觀了，我們可以從“我們家的產品”和“人家的產品”兩個維度去對比詢問心里感受。值得注意的是，即使是這樣開放式的提問，也有提問技巧。
比如“你覺得現在還有什么不好用的地方”就比“你感覺現在的產品好用么”這樣的提問方式更有效。
因為產品一定是有可有優化的空間，“有什么不好用的地方”這樣提問的方式就是具體到了某個點上面，具體什么點不好用。
而后者的提問方式是基于整個產品，受訪者可能會出于不好意思等原因直接說“你們的東西還行吧，還可以”。
④顏-關注動作表情
當我們提問產品優缺點的時候，受訪者大部分都會帶上表情和肢體語言，并且情緒表現和性格有比較大的關系。
性格比較雷厲風行、急躁一點的，通常會像連珠炮一樣瘋狂輸出，并且措辭會比較極端。例如：“真的太難用了”、“太麻煩了”、“嚴重影響門店營業了啊”。
接受到這種信息我們首先要做的就是安撫對方的情緒，其次對于這些信息要學會剔除一些夸張描述。
而性格溫和一點的受訪者，在闡述問題的時候也會比較婉轉?！安皇翘奖恪薄ⅰ斑@個改動沒啥感覺”、“也還行、都可以”，如果某個高頻操作真的很影響日常工作效率，往往會表現得很無奈，甚至還有點委屈。
那么無論是哪種表現，其實都要考驗采訪者的經驗，結合產品的功能去考慮，找到反饋中真實有效的部分。
通過以上4個環節，其實就可以收集到很多有用的信息，語言信息、視頻信息、動作表情信息等等。接下來的任務就是信息的梳理歸納。
3）結束語
訪談結束后，我們需要做個簡單的總結回顧。將關鍵問題再次復述確認，進行查漏補缺并且再次感謝受訪者，表達他們今天提的建議價值很大，后續會梳理出可落地的點優化到產品當中。
如果說聊得比較開心，大多數的受訪商戶都會邀請來訪團隊吃個飯再走，也算是額外的福利。在就餐過程中的非正式場合交流，也可以聊聊門店的一些運營情況等等，幫助我們更深入的了解這個行業。
1）資料梳理
我們在訪談過程中會有大量未整理的一手記錄，結束后需盡快地梳理，盡可能詳細地記錄下用戶描述的細節、肢體動作表情語言等等。建議使用石墨、語雀、騰訊文檔等在線編輯工具，方便分享修改。
如果是連續訪談幾位商戶，我會在訪談結束以后，迅速地將剛才的訪談內容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒有的問題，去下一家受訪商戶的時候可以驗證下該問題的普遍性。
2）整理落地
輸出后我們需要再次進行提煉，將有價值可落地的問題點提取出來，進行匯報分享，并找到相對應的產品研發進行探討排期，這樣就形成了一個完整的閉環，真正做到了發現問題、解決問題。
3）流程概括
前文絮絮叨叨說了很多，其實關于用戶訪談這事用6個字就可以概括，簡單理解：
問誰？問啥？答啥？改啥？
能夠回答清楚這4個問題，那么這就是一次有價值的訪談經歷。
ToB業務的特點就是會有一定的行業壁壘，設計師在剛接觸的時候一定會有很多茫然時刻。對于各種專業詞匯的一臉懵，對于行業的不了解。
或者很多人對于B端的認知還停留在，B端好像沒啥好設計的，都是現成的組件庫拖一拖，成就感比C端差遠了。
那么做訪談、體驗優化的意義是什么呢？
作者：B端設計情報局
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文介紹了一個案例研究，是作者在一家擁有 60 多年歷史的產品導向型公司中實施服務設計的旅程，本文將著重介紹如何在大型國際數字支付技術組織 IDPTO（化名）中建立服務設計創新中心。這份經驗希望傳遞到每一個正在用服務設計影響公司內外部的朋友們。
在擁有 25 年的設計實踐經驗后，我收到了一份具有挑戰性的邀請，成為一家全球性公司的執行董事，并通過設計領導其轉型。選擇巴西是因為它負責拉丁美洲 75% 的支付交易。該公司已經針對該市場實施了加速增長計劃，因為他們認為這是正確的創新計劃的測試市場。在六個月的時間里，我從自己的服務設計咨詢公司轉行到 IDTPO。
在那段時間里，我有機會參觀了該公司位于美國的公司總部。這種面對面的互動對我來說至關重要：
2016 年 3 月，在圣保羅，我開始了為期三個月的組織問題診斷，以及另外三個月的定義問題階段。然后，我正式開始確定公司的痛點、局限性和全球領導層的戰略目標。我參與了公司接下來一年、三年和五年周期的整個戰略定義。
自過渡過程開始以來，我一直致力于競爭對手研究并繪制生態系統地圖。我還收集了有關公司直接面向消費者市場和幾項趨勢研究的可靠材料。在第二個月，我向領導層提交了一份戰略計劃，其中包括我們將如何工作的大綱，該計劃基于三個層面的行動：戰略、戰術和行動。
組織診斷的結論是，該公司已經在對設計原則的基本理解和應用的基礎上致力于以技術為中心的創新。
根據設計階梯 1，我確定該公司處于“界面設計”階段。如下所示，除了更改其圖形表示之外，我還修改了該工具并添加了另一個“設計作為文化”步驟。這是對上述模式的重要升級，更符合當前的創新戰略。
這一步（第4階梯）很重要，因為這是在組織中實施設計策略時的最終部分，即通過設計優化組織使其成為組織文化的步驟。
在我看來，“設計作為文化”分為三個層次：
我提出的戰略計劃包括兩個三年一次的周期性循環策略和相關的年度目標。第一個周期側重于通過開發獨特的創新流程來整合組織內的設計。
第二個周期側重于發展組織的能力，以從“設計作為過程”過渡到“設計作為戰略”。在最初執行的六年后，我們將能夠衡量組織中以設計為主導的變革的進展和收益。
評估指標后，我們將能夠繼續下一步（即“設計作為文化”）。
第一個周期從為組織的創新中心定義五項創新原則開始。這些原則已經與組織的領導團隊共同制定。
這不僅改變了交付方法，還引發了大膽的組織轉型，因為它改變了組織過去工作的范式。
甚至在創新中心正式啟動之前，我們就嘗試了兩種開發形式來解決問題。第一個是用經典五天設計沖刺模型幫助一家重要地區性銀行。第二個是為電子商務平臺開發聊天機器人。最后一個解決方案經歷了一個更長的七周時間，使我們能夠測試初創公司的融入，以幫助我們采用開放式創新方法。
在這個周期的第一年，三點很重要：
這就是為什么我選擇服務設計作為創新過程的基礎，同時參考了 Richard Buchanan 教授的工作。如圖 3所示，過去 20 年是從基于人工制品的物質性的實踐到為解決復雜問題而開發的“非物質解決方案”的設計思維轉變的時刻。
我們的經濟現在建立在象征價值的交換之上。經驗決定了每個人在這種交換中投入的價值。在過去的二十年里，我們看到了一系列新公司的出現，例如 Uber 或 Airbnb，它們誕生于數字環境中，專注于我們所說的體驗經濟 。
因此，服務設計和交互設計等主題近年來受到關注，因為它們是這種新經濟發展的基礎。僅六個月后，我們就協助五家金融科技公司將 IDPTO 技術應用于他們的流程。之后，其中三家金融科技公司能夠開發出現成的市場解決方案。在第 1 年末，我們向整個組織展示了流程（圖 4）。
該活動在公司的美國總部舉行并引起了很多關注，因為在一年內我們有項目要展示、成功指標和接下來兩年的路線圖。
創新過程不一定是線性的。該過程以簡報會（與不同利益相關者的協作研討會）開始，以最終確定和實施的解決方案結束。
到第 3 年末，我們超越了指標，贏得了獎項，并開始為公司的第二個創新周期做好準備——在戰略層面采用設計。創新中心戰略的一部分是將其工作方法擴展到整個拉丁美洲地區。2018年，我們對區域團隊進行了培訓，并準備了文件，包括經驗、教材、方法和工具。其他一些地區也采用了部分方式，例如美國和亞洲的加速計劃以及歐洲和亞洲的服務設計。盡管如此，還是存在挑戰：創新中心位于組織的產品領域內。
在第一個周期的最后一年，由于全球項目和獎項，我在內部和外部獲得了很多知名度之后，我與全球首席產品官討論了：
次年，他決定將該領域的名稱從“產品”改為“解決方案”。
在業務加速數字化的背景下，成功的戰略規劃為城市交通、公共交通、即時支付、新支付技術和新信息交易技術等領域的項目設定了總體目標。
我們有幾個項目要管理，我們需要使用對公司文化產生重大影響的項目管理方法。實施了新的高管培訓課程。加大投資力度，竣工項目穩步增長。
設計現在是公司戰略的一部分。設計已成為開發新服務和新技術的戰略決策的主要因素。
以下是我領導下的兩個創新周期后的一些數字：
這篇文章無疑是給了我們在自己的組織中運用服務設計的一針強心劑，讓我們有更多的自信去運用服務設計和影響組織，我們要相信服務設計方法論帶來的作用，相信其本身有強大的能力。
記得之前做項目的時候，小伙伴有說過一句：之所以可以反復成功，其實是方法論本身的能力，而我們更多的是在運用罷了。希望大家以此共勉。
作者：陳昱志Yeutz
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多情況下，用戶選擇一個產品的理由是有沒有某個功能，但棄用的理由卻常是產品好不好用。能否打造優質的B端用戶體驗，成了影響B端產品用戶續約的一個關鍵因素。
(1）流程越短越好。 我們在上班、逛街的時候，傾向選擇一條最短的路線，希望用最少的時間到達目的地。用戶操作系統時也希望這樣。
(2）整合功能場景。 某個功能由誰、在什么場景下操作，以及可能會遇到什么問題、需要什么關聯功能來解決，如果功能點相互獨立， 關聯很少，會讓用戶用起來很不順手，有種斷層的感覺。
（3）有效指導異常。Saas 有一個特點是功能模塊間會盡可能相互獨立，基礎數據的設置和業務上面的使用往往是在不同的功能模塊內。這會導致B端用戶在遇到空數據的情況下， 可能不知道該怎么操作。這時，需要要提示用戶按具體步驟操作來順利完成任務。
交互體驗，對上承接了業務，對下承接了視覺。好的交互體驗能讓業務流程簡捷，更關注用戶習慣。 B端產品的交互和C端產品差異較大，C端常用的移動客戶端屏幕小，可顯示的內容較少，需要不停地跳轉完成操作，但B端產品大多用電腦來操作，一頁可顯示的內容較多。所以做B端產品交互一般需要注意下面幾點：
(1）少跳轉。曾有用戶反饋，說某個功能操作流程太長了，操作起來很麻煩。通過走查發現流程其實是沒有問題的，不能再縮減流程了。通過可用性測試發現是因為跳轉頁面導致，用戶在操作時去了另一個界面，然后再返回來，讓用戶在操作時感覺流程更長。于是就把頁面跳轉優化成了彈窗，彈窗里面操作完點擊關閉即可， 改后用戶覺得流程縮短了，操作效率更高了。
B 端產品能用彈窗的時候，不要跳轉，哪怕彈窗里面加彈窗，只要不跳出這個頁面，用戶都會覺得沒有阻斷他的操作。雖然，從交互的角度講，彈窗里再加彈窗不符合規范，但在實用性面前是可以商榷的。
(2）少彈窗。 相比彈窗，在某些場景下，有更好的處理方式。比如，直接放頁面上。 彈窗是點擊按鈕觸發的，自動完成操作后關閉，或者用戶手動關閉。雖然比跳轉好，但比不上在頁面上直接呈現高效。
頁面上直接呈現是理想狀態。但是往往因為內容太多，很多時候不得不隱藏起來。直接呈現對于頁面的布局和設計都有極高的要求，原則是高頻且重點的內容外露。
（3）交互形式統一。 整個系統里面的交互規則要保持一致，大到彈窗的出現形式是居中彈出還是右側滑出，小到多選控件是不是一致。 在整個系統里面相同的業務都用同一個控件。雖然可能由于一些業務的特殊性， 需要對控件做個性化處理，但不要影響整體的一致性。
(1）信息清晰。 信息清晰不僅指信息結構的層次，還包括頁面的內容，最好讓用戶一眼就能看到上面寫了什么，有什么功能。有些設計師不喜歡加黑、大、粗的字， 覺得不夠高級，而是根據自己的美感把字體設計為一些個性化字體，且字號不大。
很多時候B端用戶的操作時間比C端用戶長，他們需要長時間盯著頁面，所以頁面信息清晰就能減少他們的疲勞。
(2）信息緊湊。 當頁面上想要呈現的內容較多時，設計師一定要壓縮空間，使布局合理緊湊。
(3）少用圖標。 有時候，設計師會使用圖標來代替文字表達，并花大精力設計很好看的圖標。圖標的應用在C端產品中非常常見，一是為了節省空間，二是為了美觀。但在B端產品中，大多數情況下，圖標越少越好，有時文字的簡寫比圖標來得直觀易懂。圖標過多用戶需要使用很多遍才能記住每個按鈕的含義。
B端產品設計需要非常重視用戶體驗。這直接影響到用戶的工作效率，轉而影響到軟件的續約率。 為打造好的用戶體驗，我們通常從業務層面、交互層面、視覺層面來著手提升用戶體驗。 很多時候，有些好的交互方案會受到技術框架的限制，導致方案無法實施。
但是為了產品獲得更好的用戶體驗，首要考慮的依然是用戶的使用流暢度、易用性，而不是實現的復雜程度、系統現有框架的限制、現有規范的標準。 系統上的難點應當留給內部去解決，把最大的便利性留給用戶。這樣我們才能獲得更好的產品口碑、更高的續約率、更大的市場。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前端工程化指的是：在企業級的前端項目開發中，把前端開發所謂的工具，技術，流程，經驗等進行規范化，標準化。
企業中的Vue項目和React項目，都是基于工程畫的方式進行開發。
好處：前端開發自成體系，有一套標準的開發方案和流量。
概念： webpack是前端項目工程化的具體解決方案。
主要功能：它提供了友好的前端模塊化開發支持，以及代碼壓縮混淆，處理瀏覽器端JavaScript的兼容性性能優化等強大的功能。
好處：讓程序員把工作的重心放到具體功能的實現上，提高了前端開發效率和項目的可維護性。
注意：目前Vue，React等前端項目，基本上都是基于webpack進行工程化開發的。
步驟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> ul>li{這是第$個li}*9 </body> </html>
import和require導入模塊的區別
1、require對應導出的方法是module.exports,
import對應的方法是export default/export
2、require 是CommonJs的語法
import 是 ES6 的語法標準。
3、require是運行運行時加載模塊里的所有方法（動態加載），
import 是編譯的時候調用（靜態加載），不管在哪里引用都會提升到代碼頂部。
4、require 是CommonJs的語法，引入的是的是整個模塊里面的對象，
import 可以按需引入模塊里面的對象
5、require 導出是值的拷貝,
import 導出的是值的引用
6. require是node.js帶有的 CommonJS語法里的東西，可以在終端中運行
如果要在瀏覽器端運行 我們要使用import這個es6語法
js代碼
//導入模塊 // const $ = require('jquery') import $ from "jquery"; //定義jquery入口函數 $(function () { $('li:odd').css('background-Color', 'red') $('li:even').css('background-Color', 'pink') })
將js文件導入index.html之后，發現沒有效果，這時我們就需要webpack工具了，將語法進行重新編譯，把es6語法轉化為es5語法。
npm i webpack@5.42.1 webpack-cli -D
生產依賴
創建webpack.config.js配置文件并寫入
//使用node.js的導出語法向外導出一個webpack的配置對象 //導入模塊并進行導出內容，這樣寫會比直接導出內容多一個記錄信息的txt文件，當然我們也可以使用es6語法進行導入導出，大家可以私下去了解。 const { Module } = require("webpack"); Module.export = { mode: 'development' } //也可以直接導出內容 // module.export = { // mode: 'development' // }
在package.json配置文件中的script中寫入聲明
最后執行npm命令進行編譯，有一個注意點就是node.js版本需要是17版本以下的不然會出錯，當然應該有其他解決辦法，但博主不會，只好退回版本
執行 npm run dev 這個命令，可以看到src里的index.js和jquery.js都被壓縮了。
會生成一個編譯后的文件夾
將main.js文件導入index.html.，不用導入index.js。
打開頁面就可以成功顯示了
mode的可選值
mode節點的可選值有兩個，分別是：
當我們使用npm run dev這個命令的時候，會執行package里的dev里的內容，
dev里寫的webpack，那么它就會執行weboack.config.js這個文件里的內容，根據里面的內容再進行打包。
webpack中的默認約定
大家可能有個疑問，就是打包的時候為什么會打包index.js這個文件，它是怎么尋找的路徑等問題。
在webpack4和5的版本中，有如下的默認約定，找不到就會報錯。
注意：可以在webpack.config.js中修改打包的默認約定。
自定義打包的入口和出口
在webpack.config.js配置文件中，通過entry節點指定打包的入口，通過output節點指定打包的出口文件夾和出口文件。
// 使用node.js的導出語法向外導出一個webpack的配置對象 const path = require("path"); module.exports = { mode: 'development', entry: path.join(__dirname, 'src/index.js'), //設置打包輸出路徑，以及輸入文件名稱 output: { //指定存放目錄 path: path.join(__dirname, 'dist1'), filename: 'new.js' } }
生成的文件就變了。
當我們修改js文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，這就很麻煩我們可以 通過安裝和配置第三方的插件，可以擴展webpack的能力，從而讓webpack用起來更方便，常用的webpack插件有如下兩個：
安裝webpack-dev-server
安裝命令
npm install webpack-dev-server@3.11.2 -D
配置webpack-dev-server
注意：webpack-dev-server會啟動一個實時打包的http服務器。
這樣當我們每次修改index.js文件時，保存后就會自動打包，摁兩次ctrl+c就可以終止運行。
這種打包實際上時虛擬打包，并不是每次保存打包之后將main.js進行了修改，當我們修改代碼保存自動打包之后，我們發現頁面UI并沒有變化，那是因為main.js實際上沒有修改，訪問自動打包修改后的頁面需要訪問本地8080端口
在這個http服務器內才能訪問到修改后的內容，我們前面說了修改后的js并沒有保存到main.js中，那它保存到哪里去了？它其實被保存到了根目錄中，以內存的形式進行了保存。
文件名跟你前面設置的打包文件名一樣，雖然看不到這個文件但是可以進行訪問，我們需要把頁面引入鏈接從 new.js改成新生成的保存到內存中的new.js，完成這兩個步驟就可以真正的實現自動打包并實時演示了。
當我們開啟了自動打包服務功能，訪問服務器后，顯示的是根目錄，需要點擊一下文件夾，才能顯示頁面文件index.html，我們只需要把頁面文件copy一份兒到根目錄，這樣點開網頁就能直接顯示，這個webpack插件就可以實現相應的功能。
安裝
npm install html-webpack-plugin@5.3.2 -D
使用代碼
//導入相應模塊 const HtmlPluginConfig = require('html-webpack-plugin') //實例化 const HtmlPlugin = new HtmlPluginConfig(); //實例化 const HtmlPlugin = new HtmlPluginConfig({ //被復制文件的路徑 template: './src/index.html', //復制到哪 filename: './index.html' });
最后再向外暴露對象
//插件的數組，將來webpack在運行時，會加載并調用這些插件 plugins: [HtmlPlugin] //將實例化對象寫入。
執行 npm run dev命令，進行自動打包，然后進入本地8080端口網頁，就可以直接看到頁面了。
當你修改js之后也會實時更新。
注意點以及個人建議和理解
我們可以在scripts里設置兩個屬性，dev是用來開發實時瀏覽觀看內容的，dev2是用來進行物理打包的（當你完成項目需要打包的時候）。
這里我需要說一下html-webpack-plugin這個插件，上面我們可以直接看到頁面是因為這個插件復制了一份兒index.html到根目錄所以可以直接訪問。
這個插件里面 有個屬性叫filename，就是你將文件復制到什么位置。
兩個注意點
第一個就是它的值，屬性值寫的相對路徑是根據你打包文件的位置為基準的，并不是webpack.config.js的文件位置，./就跟你的new.js文件在同一個文件夾里，…/就在new.js的上級文件夾里，所以當你打包的時候會發現除了new.js之外還有index.html
第二個就是輸出方式，如果執行的是dev2，那么就跟new.js進行物理復制，如果執行的是dev那么就跟new.js一樣，以內村存儲的方式進行保存。
生成的html文件里會自動導入同時打包的js文件
在webpack.config.js配置文件中，可以通過devServer節點對webpack-dev-server插件進行更多配置。
其中有一些屬性設置可以更方便我們進行開發。
devServer: { open: true, //打包完成后默認打開瀏覽器 port: 8080,//修改端口號 host: '127.0.0.1' //修改主機地址 }
轉自 csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在B端產品設計中，理解并設計好流程，對產品的體驗非常重要。通常涉及到有三個方面的流程：業務流程、審批流程、操作流程。
在企業的日常經營中，為了對業務過程進行更好的管理，企業會梳理出一系列流程、規范以及作業標準。流程化能夠幫助企業各崗位的員工更好地分工合作，使企業效率更高。對于 B端產品，設計師首先要讀懂業務流程，然后才能設計好產品。 業務流程，是指為達到特定的業務目標而由不同的人分工合作完成的一系列活動?；顒又g不僅有嚴格的先后順序限定，而且活動的內容、方式、責任等也都必須有明確的安排和界定，以使不同活動在不同崗位角色之間進行流轉交接。
下圖是某企業的采購流程，涉及了五個部門、多個崗位角色、多個業務活動。
業務流程大多是企業根據業務特征、自身經營特點以及資源配置情況而制定的，在業務上具有一定的通用性，但在具體應用上又充滿了企業的個性。業務流程和單據是經典搭檔，可以說“流程 + 單據=業務”， 每個環節的工作形成一張單據，記錄著時間、地點、參與人、業務狀況。當這個環站的工作完成后，進入到下一個環節的工作時，單據也會隨之流轉到下一個系統中對應的功能節點，并形成一張新的單據，記錄新的信息。
下圖是某企業采購流程中從采購到結算部分涉及的單據：
除讀懂業務流程外，我們還需要應用“場景驅動的設計”方法，整理出每個環節中涉及的用戶、場景，以及作業的特征，并大膽地通過設計來改造流程，最后通過設計減少人員工作量，減少流程中的多余環帶， 提升企業效率。這樣才能設計出對客戶有價值、用戶體驗好的產品。企業的收貨流程，要經過到貨簽收、質檢、 收貨入庫等過程，每個環節都會有諸多問題。下面是梳理了某企業收貨流程的簡易體驗地圖：
經過對場景和可行性分析后，設計了一套新的業務流程。流程簡化為貨車司機直接將貨物送入指定倉庫的電子圍欄，并全自動質檢、入庫，大幅降低了人工成本并提升了工作效率。這一步通常是產品經理去完成，作為用戶體驗設計師在調研的過程中發現有好的流程優化方法，或者看到好的競品值得參考，可以和產品經理溝通一起推動產品業務流程用戶體驗的提升。
在企業中，出于對重點業務的管理需求，除了會制定固定的業務流程方便大家協作，還會對業務關鍵節點做審批。簡單的審批只需要在流程進行到關鍵節點時，將重要結果發給相應業務管理者審批。但是，由于一些企業組織機構復雜，管理嚴格，為了保證業務的合規與安全，需要多個角色、多個環節的審批，這個流程即是審批流程。
（1）首先員工提交需要審批的材料（系統中是提交單據)。
(2）各環節審批者會根據流程分別對材料進行審批。
(3）審批通過后會自動進行到下一步。
(4）審批不通過，就此流程結束。
(5）退回則打回到流程起點，待改進后重新走流程。
(6）審批都通過后，審批流程結束。
在實際應用中，可能會有非常復雜的流程與功能。比如除常規的審批通過、不通過、退回功能外，還會有改派、加簽、抄送等。
(1）改派：當前審批人將審批材料轉給其他人。
(2）加簽：增加審批的步驟，在一些企業中還會有前加簽、后加簽。
(3）抄送：將材料同時抄送給某人或某角色。
以上只是列舉一些常用的動作，在一些大型企業或者國企，流程和功能更復雜。當面對復雜而多變的審批需求時，需要將審批流程設計得更加靈活、自由，具有自定義功能。另外，需要將審批流程設計得更加模塊化，可以在任何一個業務環節中加入審批過程。
在審批流程的設計中， 根據企業制定的審批規則，自動判斷是否符合標準，自動審批。尤其對一些每天都在發生、經常重復而不重要的事情，可以完全省去人工審批的過程，采用自動審批，自動觸發業務流程，以此來提高審批效率。
前面兩個流程主要基于企業業務制定，在企業沒有信息化前就已經存在了，在改造優化上還有一些阻力和困難。作為用戶體驗設計師，可以通過對操作流程的優化來改進用戶體驗。
以上文中的收貨案例為例子：
（1）系統中收到若干個質檢任務。
(2）逐一打印質檢單。
（3）帶著質檢單來到倉庫，尋找需要質檢的貨品。
(4）找到貨品，逐箱打開進行檢查，業務操作不熟練的還需要詢問老員工。
(5） 將質檢結果隨時記在打印出的質檢單上。
(6） 逐一檢查完畢，回到辦公室，將信息錄入系統。
這個過程繁瑣，而且在操作的過程中，容易出錯。因此根據實際工作中的業務場景，對操作流程進行了優化如下：
整個操作流程省去了“打印單據”“重復記錄單據”“詢問老員工” 的過程，并簡化了“尋找單據”的過程及記錄結果的過程。
在對操作流程的設計過程中，也應遵循“場景驅動設計”的方法，并將物理實體、數字實體統一考慮，充分利用各自的特點，盡最簡化用戶的 操作流程，并降低操作的復雜度。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家好，我是二哥呀。
想必大家都感受到了，很多網站、APP 在昨天都變灰了。
先來感受一下變灰后的效果。
這種灰色的效果怎么實現的呢？如何做到圖片、文字、按鈕都變灰的效果呢？
方案 1，換一套灰色的 UI，那顯然成本太大了，用腳指頭想一想就知道不太可能。
方案 2，用魔法！
不好意思，還真被你猜中了！在網頁端按下 F12，打開開發者模式，用元素選擇器定位到 HTML 標簽上，在「樣式」的面板中往下翻，就可以看到這樣一段代碼。
我把它復制過來大家看一下。
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
打開二哥的網站《Java 程序員進階之路》，定位到 HTML 標簽，此時可以看到頁面是正常的顏色。
然后把之前的代碼添加到 HTML 上，然后就可以看到色系變成灰色了。
那這段代碼是什么意思呢？
直接把 filter grayscale 復制到搜索引擎里看一下。
當參數為 0 的時候，顏色是正常的。
然后依次試一下 60%：
100%：
MDN 是怎么解釋 grayscale() 函數呢？
The grayscale() CSS function converts the input image to grayscale. Its result is a .
大致的意思就是，grayscale 是一個 CSS 函數，可以把圖像轉成灰色，參數是個百分比，結果返回一個 filter 函數。
The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.
filter 函數可以用來改變圖像的顯示效果，用于 CSS 的 filter 屬性。 除了 grayscale 函數，可選項還有以下這些：
可以看到，目前的主流瀏覽器版本都支持 grayscale 函數，比如說 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。
沒有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣，我是不系之舟。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數據可視化
數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律
關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。
1. 分析數據關系
根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。
構成關系
構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯與流轉
流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。
常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉化、關系”
2. 分析數據特征
按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類
層級特征
多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。
流程特征
流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。
1. 強化數據特性
使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。
我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調來進行分類
數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調內在順序
如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。
1. 布局框架適配
在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結語
數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn