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