2020年結(jié)束，此時(shí)正是一個(gè)很好的時(shí)間節(jié)點(diǎn)，我們共同探尋2021年即將擁有怎樣的未來(lái)。本文將帶你發(fā)現(xiàn)，即將在2021年流行的十種移動(dòng)用戶體驗(yàn)設(shè)計(jì)趨勢(shì)。

       看到知乎上的一個(gè)問(wèn)題：如何找到一家好的高端網(wǎng)站設(shè)計(jì)公司？

       把回答的內(nèi)容也轉(zhuǎn)過(guò)來(lái)記錄一下。

       首先回答：何為高端？



       高端與低端是對(duì)應(yīng)的，目前網(wǎng)站設(shè)計(jì)，中低端基本是用模板改改，相對(duì)價(jià)格低，有一些小型公司或不依靠網(wǎng)站運(yùn)營(yíng)收入的公司，“有個(gè)網(wǎng)站就好”，所以可以用這種低投入，內(nèi)容有就行的網(wǎng)站建設(shè)公司，特點(diǎn)是馬上就能用，三五天把內(nèi)容發(fā)布進(jìn)去就可以。備案可能需要一定時(shí)間。



       高端設(shè)計(jì)公司，一般是量身定做，為企業(yè)做網(wǎng)站策劃、分析，按照用戶研究、網(wǎng)站建站的目的來(lái)進(jìn)行網(wǎng)站的定制欄目頁(yè)的設(shè)計(jì)。做競(jìng)品分析、研究對(duì)方的優(yōu)缺點(diǎn)，設(shè)計(jì)的色系和企業(yè)標(biāo)準(zhǔn)色、情感表達(dá)、人物場(chǎng)景、用戶體驗(yàn)思維，越深入，思考越成熟，做的網(wǎng)站品質(zhì)越有保障。所以需要的時(shí)間、精力、投入相對(duì)多。



       因?yàn)橥度胂鄬?duì)多，所以經(jīng)營(yíng)業(yè)績(jī)好的企業(yè)、集團(tuán)公司、營(yíng)銷類大型網(wǎng)站來(lái)定制的比較多。



       我們公司“北京藍(lán)藍(lán)設(shè)計(jì)”就是為定制的高端企業(yè)用戶、政府網(wǎng)站、軟件公司來(lái)服務(wù)的。我們挺喜歡要求高的客戶，這樣能體現(xiàn)出專業(yè)設(shè)計(jì)的水平，這也是我們和其它建站公司區(qū)別開來(lái)的地方。



       我們主要是給大型軟件公司平臺(tái)、系統(tǒng)做UE、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)，用戶體驗(yàn)優(yōu)化，這個(gè)，比網(wǎng)站設(shè)計(jì)更難，更專業(yè)。 往往一個(gè)公司的核心產(chǎn)品，值得把精力金錢投入到上面，產(chǎn)出最大的回報(bào)。近年來(lái)，除了做軟件UI，大屏大數(shù)據(jù)可視化項(xiàng)目外，我們也擴(kuò)展了“愿意把公司網(wǎng)站做成核 心產(chǎn)品”這樣的公司成為合作伙伴，更好的為客戶提供全方位的服務(wù)。



       一旦成為我們的客戶，設(shè)計(jì)無(wú)憂。

       我們一定會(huì)把該做的事做好，并提供超值服務(wù)和額外附加值的。

藍(lán)藍(lán)設(shè)計(jì)( m.payeee.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

作者：藍(lán)藍(lán)

表格，是一種最常見的信息組織整理手段，常用于信息收集、展示、數(shù)據(jù)分析、歸納整理。

      UI軟件設(shè)計(jì)中最常用、最基本的是表格的設(shè)計(jì)，有些軟件中80%都是表格類頁(yè)面，可以說(shuō)，設(shè)計(jì)開發(fā)的是否易用，很影響口碑和用戶的使用感受。基礎(chǔ)的東西一定要做好，就像我們吃的主食一樣，雖然都是米和面，但是各地出產(chǎn)各種品種口味都不相同，要根據(jù)食客的喜好選擇、烹飪。今天就聊一聊最基礎(chǔ)的表格設(shè)計(jì)、變化和常見問(wèn)題。

一、基礎(chǔ)的表格設(shè)計(jì)美化

      基礎(chǔ)的表格可變化的地方很少，可以根據(jù)當(dāng)前軟件開發(fā)選擇的框架控件（ext/vue/jequery不同框架會(huì)有一些不一樣）做色彩和風(fēng)格的變化，如：加表格不同粗細(xì)的線、斑馬格，中間無(wú)豎線種種的設(shè)計(jì)，有的表格需要標(biāo)題很突出，有的內(nèi)文突出，這就和內(nèi)容焦點(diǎn)相關(guān)了。

為了操作直觀便捷，在操作區(qū)放一些圖標(biāo)“刪除、編輯、審核”，配合文字來(lái)使用，有的把操作類的圖標(biāo)放在最左邊，有的放在最右側(cè)，按行業(yè)用戶習(xí)慣而定。

可以用固定表頭（標(biāo)題位置不變），允許用戶排序，單元格內(nèi)有很長(zhǎng)的文字，設(shè)定最大字節(jié)，多內(nèi)容用……替代避免轉(zhuǎn)行，有小數(shù)點(diǎn)的數(shù)字右對(duì)齊，每列的大小可調(diào)整，這些也是設(shè)計(jì)開發(fā)中可以做好的細(xì)節(jié)部分。

二、特別寬的表格怎么設(shè)計(jì)？

有的表格的寬度，達(dá)到了屏幕的兩屏和三屏，出現(xiàn)寬寬的橫向滾動(dòng)條，又有長(zhǎng)長(zhǎng)的豎向滾動(dòng)條，但工作的人又必須看，可煩人了！很多軟件都因?yàn)檫@個(gè)原因被吐槽。下面就介紹三種方法解決這個(gè)問(wèn)題：

方法一

如果表格的標(biāo)題是可以定制的，允許省略的，可以從業(yè)務(wù)角度取舍去掉無(wú)關(guān)緊要的，不常用的內(nèi)容，把這部分放在點(diǎn)開的詳細(xì)頁(yè)內(nèi)容中即可。這就像一個(gè)房間的斷舍離：挑選、丟棄、分類、收納，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可無(wú)的？依次排序放在順手的位置，ui設(shè)計(jì)的道理也是相通的。

方法二

如果表格里面的內(nèi)容是確定的，不可省略的，比如銀行的報(bào)表就是這么長(zhǎng)，這么多，那我們就可以從設(shè)計(jì)的角度來(lái)優(yōu)化，做一個(gè)加高版的表格。

表格為什么一組信息只能一行呢？完全可以一組三行四行，在組中進(jìn)行重點(diǎn)信息，非重點(diǎn)信息以及符號(hào)化的直觀轉(zhuǎn)變。用大小、對(duì)比、濃淡、色彩、間隔這些平面設(shè)計(jì)的基本原則，讓一個(gè)普通的“山里娃”土土的表格變成一個(gè)“青春靚麗、人見人愛”自帶明星氣質(zhì)的表格。

方法三

大表格里面嵌套小表格，利用交互設(shè)計(jì)，巧安排空間。當(dāng)用戶光標(biāo)移至感興趣的那行的時(shí)候，關(guān)于它更多的內(nèi)容，在下方滑動(dòng)撐開出現(xiàn)或者右邊浮動(dòng)出現(xiàn)。這個(gè)方式雖然比較土，但也確實(shí)管用。早年在看某一招聘網(wǎng)站的時(shí)候，每一個(gè)人的簡(jiǎn)歷只要點(diǎn)名字就可以看到一組關(guān)鍵信息，便于迅速篩選，而另外一個(gè)招聘網(wǎng)站，就沒(méi)有這個(gè)功能，每個(gè)人都要打開之后才能看見整體信息，我后來(lái)就不怎么看那個(gè)網(wǎng)站了。多一步操作，對(duì)典型用戶就多了許多的工作量，網(wǎng)站和軟件的使用口碑，用戶粘度就是這樣在為用戶考慮中一點(diǎn)一點(diǎn)積累起來(lái)的。

 上圖：大表格里面嵌套小表格

     方法不會(huì)只有這三種，其他的方法要根據(jù)當(dāng)時(shí)的業(yè)務(wù)，用戶使用的習(xí)慣、重點(diǎn)，因地制宜的去設(shè)計(jì)了。軟件中的表格節(jié)省了許多程序工程師的工作量，如果做大的改動(dòng)或許是巨大的工作量，如果要做變動(dòng)，一定要在開始的時(shí)候就要讓ui設(shè)計(jì)納入開發(fā)體系，一生二，二生三，在前期第一批實(shí)施時(shí)越注重細(xì)節(jié)，后期就會(huì)越輕松，甚至省去幾倍甚至幾十倍的時(shí)間挨個(gè)頁(yè)面的去糾偏、修改。

      一個(gè)系統(tǒng)總是需要業(yè)務(wù)擔(dān)當(dāng)，顏值擔(dān)當(dāng)?shù)暮诵牟糠郑匾捻?yè)面要額外的對(duì)待、花更多的精力和時(shí)間。如果千篇一律，也就不能顯示出軟件產(chǎn)品的獨(dú)到之處了。

第三 與表格配合的部分設(shè)計(jì)

第一種  “搜索查詢”和“過(guò)濾”部分的設(shè)計(jì)

     大多數(shù)表格的前面都有搜索過(guò)濾功能，如果搜索條件相當(dāng)多，可以精選一部分主要的排成一行，其他的隱藏，點(diǎn)箭頭再出現(xiàn)。整個(gè)搜索區(qū)域也可以有隱藏／顯示的按鈕，來(lái)給下面的表格更多的空間。

     過(guò)濾條件區(qū)域可以定義好“條件名稱”一致寬度，一般在八個(gè)字左右，避免有的字節(jié)多，有的字節(jié)少，行數(shù)多了，參差不齊，區(qū)塊和區(qū)塊之間也要定義好統(tǒng)一的間距，這樣整體頁(yè)面就顯得整齊劃一、條理清晰。

上圖：搜索和卡片式信息的組合

第二種  表格操作部分的設(shè)計(jì)

       對(duì)表格的操作“導(dǎo)入，導(dǎo)出、批量導(dǎo)出”有的時(shí)候這類操作有10—20個(gè)，有的時(shí)候才幾個(gè)，多的時(shí)候很占地方，可以用隱藏的方法，over到表格上再出現(xiàn)，以節(jié)省空間。

       也可以分組把同類的操作聚合在一起，把常用的放在目之所及，不常用的點(diǎn)后下浮出現(xiàn)，以節(jié)省空間，

還可以光標(biāo)跟隨表格的某一行，點(diǎn)選自動(dòng)浮出一群小跟班，各種操作按鈕。即節(jié)省空間，操作移動(dòng)路徑又很短。只是不支持批量操作。

第三種  表格和卡片式設(shè)計(jì)、統(tǒng)計(jì)圖的整合切換

       表格是可以轉(zhuǎn)換成卡片式設(shè)計(jì)的，用一個(gè)卡片代替一行的展現(xiàn)信息，改變一種閱讀的方式。

有的也可以轉(zhuǎn)換圖統(tǒng)計(jì)圖表：曲線圖，柱狀圖讓用戶直觀的去解讀，而不必一直看枯燥的數(shù)字。

藍(lán)藍(lán)注：我非常喜歡這個(gè)風(fēng)格。

日前，在網(wǎng)上流行起了一種叫 Neumorphism 的新風(fēng)格，也有人稱為 Soft UI，這是一種類似于浮雕的效果。這種風(fēng)格的出現(xiàn)，給目前流行的扁平化設(shè)計(jì)增加了一種新的設(shè)計(jì)形式，很多媒體甚至還將這個(gè)風(fēng)格列為 2020 的設(shè)計(jì)趨勢(shì)，三星 Galaxy 系列的發(fā)布會(huì)宣傳海報(bào)也使用了這種風(fēng)格，可見這個(gè)風(fēng)格的火熱程度。那么一開始我們不討論這個(gè)風(fēng)格好還是不好，先來(lái)了解一下這個(gè)新風(fēng)格趨勢(shì)。

什么是Neumorphism？

最開始是一位來(lái)自烏克蘭的設(shè)計(jì)師 Alexander Plyuto 在各平臺(tái)發(fā)布了新的作品「Skeuomorph Mobile Banking」。這個(gè)作品自發(fā)布以來(lái)就獲得了數(shù)十萬(wàn)瀏覽量，數(shù)千點(diǎn)贊數(shù)，熱度持續(xù)飆升并登上 Popular 榜首。

作者是用 Skeuomorph 來(lái)命名這個(gè)作品風(fēng)格，評(píng)論區(qū)就開始了這種風(fēng)格的討論，有的人說(shuō)這是新的擬物風(fēng)格（New Skeuomorphism），也有人說(shuō)這是擬物風(fēng)格 2.0 版本（Skeuomorph 2.0），而后來(lái)就有設(shè)計(jì)師創(chuàng)出一個(gè)新的虛構(gòu)名詞，把 New Skeuomorphism 兩個(gè)詞組合，Neo 諧音 New 就是 Neuomorphism。

這個(gè)名字就這么火了。大家都開始用上了這個(gè)名詞出作品，成為了設(shè)計(jì)新趨勢(shì)。甚至連作者后面的作品，也使用了這個(gè)名稱。

再后來(lái)國(guó)外知名設(shè)計(jì)師 Michal Malewicz 發(fā)布了一篇關(guān)于這個(gè)風(fēng)格的文章，將 Neuomorphism，刪減了里面的字母「O」，改成了 Neumorphism。在大神的推動(dòng)下大家又開始爭(zhēng)先恐后地使用這個(gè)名稱。

目前有各種對(duì)名稱的說(shuō)法，Neuomorphism，Neumorphism，Skeuomorphism，Soft UI，在沒(méi)有實(shí)際確定的情況下，其實(shí)怎樣叫都無(wú)所謂，重點(diǎn)是我們要知道這種設(shè)計(jì)風(fēng)格趨勢(shì)，關(guān)注的不是名字，而是設(shè)計(jì)。

還記得擬物風(fēng)格嗎？

既然 Neumorphism 只是一個(gè)虛構(gòu)詞，也沒(méi)有任何官方認(rèn)定，那就先不糾結(jié)應(yīng)該叫什么，我們還是來(lái)說(shuō)說(shuō)它的前身吧，也就是 Skeuomorphism（擬物）。這是最早被 Apple 提出的設(shè)計(jì)概念，就是在界面中模仿現(xiàn)實(shí)物體紋理材質(zhì)的設(shè)計(jì)，目的是讓人們?cè)谑褂媒缑鏁r(shí)習(xí)慣性地聯(lián)想到現(xiàn)實(shí)物體的使用方式。

擬物寫實(shí)的設(shè)計(jì)風(fēng)格曾經(jīng)風(fēng)靡全球，當(dāng)時(shí)的 UI 設(shè)計(jì)師幾乎都對(duì)擬物作品著迷。

而在 2013 年的 WWDC 大會(huì)中，蘋果公司發(fā)布的 iOS7 系統(tǒng)，系統(tǒng) UI 使用更簡(jiǎn)潔的設(shè)計(jì)風(fēng)格。這場(chǎng)大會(huì)也使擬物風(fēng)格逐漸過(guò)時(shí)，直到現(xiàn)在扁平風(fēng)格的全面普及，擬物風(fēng)格就再?zèng)]有被廣泛應(yīng)用。

從前幾年的設(shè)計(jì)趨勢(shì)可以看到，扁平風(fēng)格作為更更簡(jiǎn)潔的風(fēng)格被設(shè)計(jì)師推崇，再加上蘋果系統(tǒng) iOS 7 設(shè)計(jì)風(fēng)格的面世和谷歌系統(tǒng)規(guī)范 Material Design 的普及，扁平風(fēng)格在 UI 設(shè)計(jì)中一直占據(jù)重要位置。

但設(shè)計(jì)的流行趨勢(shì)也一直在改變著，在蘋果公司發(fā)布的 iOS 13 系統(tǒng)中，就有出現(xiàn)輕擬物的設(shè)計(jì)手法，接著就有一大堆設(shè)計(jì)師猜測(cè)是不是擬物風(fēng)格的回歸，但我看系統(tǒng)中大部分界面設(shè)計(jì)也還是扁平風(fēng)格，并沒(méi)有把擬物風(fēng)格作為主要設(shè)計(jì)風(fēng)格，也許只是某種程度上解決了畫筆的視覺(jué)識(shí)別問(wèn)題。

擬物效果能否回歸，這個(gè)言之尚早，但是新的風(fēng)格趨勢(shì)也許可以在扁平同質(zhì)化的時(shí)候增添一點(diǎn)靈感與樂(lè)趣。

能用在實(shí)際項(xiàng)目中嗎？

1. 設(shè)計(jì)

其實(shí)要做到這個(gè)效果并不難，了解一下這個(gè)風(fēng)格的結(jié)構(gòu)。

主要有三個(gè)樣式組成，1 個(gè)背景+ 2 個(gè)投影。在這個(gè)基礎(chǔ)上，通過(guò)改變顏色和大小參數(shù)來(lái)達(dá)到不同效果。

我嘗試著使用彩色去做這個(gè)效果，使用淺色背景時(shí)還是有效果的，但使用深一點(diǎn)的顏色時(shí)，問(wèn)題就出現(xiàn)了，效果更像是外發(fā)光或者普通投影。這也可能是為什么大多數(shù)作品都采用比較素的顏色作為背景的原因。

2. 瀏覽

這個(gè)風(fēng)格最大的問(wèn)題就是缺少對(duì)比度。在色彩使用上比較克制，沒(méi)有大面積的平鋪顏色，僅在極少的位置進(jìn)行色彩點(diǎn)綴，作用是吸引眼球。從眾多設(shè)計(jì)師的作品可以看出，整體視覺(jué)是比較平的，缺少層次。

我拿其中兩張圖進(jìn)行了 15% 強(qiáng)度的模糊處理，可以看到除了點(diǎn)綴的位置以外，界面是沒(méi)有重點(diǎn)的。

3. 操作

因?yàn)樵诮缑嬷谐宋淖忠酝猓瑤缀跛性囟紤?yīng)用了這種效果，導(dǎo)致界面所有內(nèi)容看起來(lái)都是按鈕的錯(cuò)覺(jué)。界面中的主要操作按鈕也沒(méi)有被重點(diǎn)提亮。正常態(tài)和點(diǎn)擊態(tài)的對(duì)比度并沒(méi)有拉開，容易造成狀態(tài)混淆。點(diǎn)擊欲望比較低，不利于引導(dǎo)用戶進(jìn)行下一步操作。

4. 動(dòng)畫

跟擬物效果的動(dòng)畫有同樣的問(wèn)題，元素動(dòng)畫效果很難做得輕快，更適合按鈕的使用。由于視覺(jué)層級(jí)跟背景沒(méi)有實(shí)際分離開，就像固定在了背景上一樣，所以動(dòng)畫效果只要出現(xiàn)移動(dòng)，就會(huì)讓人覺(jué)得不合理，容易給人一種蟲子在皮膚底下蠕動(dòng)的感覺(jué)。

5. 開發(fā)

問(wèn)題跟當(dāng)年的擬物效果的實(shí)現(xiàn)類似，要實(shí)現(xiàn)這個(gè)風(fēng)格，主要有兩個(gè)方式。

切圖：對(duì)元素的每個(gè)狀態(tài)（Normal、Hover、Pressed），設(shè)計(jì)師都需要分別提供一張切圖，這個(gè)會(huì)導(dǎo)致資源庫(kù)增加大量的圖片。 代碼實(shí)現(xiàn)：這個(gè)風(fēng)格的實(shí)現(xiàn)效果是對(duì)元素增加兩個(gè)不同方向的投影，通過(guò)代碼可以實(shí)現(xiàn)。但是需要開發(fā)對(duì)每個(gè)元素添加投影，樣式代碼增多，繁瑣的工作量，開發(fā)也不會(huì)樂(lè)意。

附 CSS 實(shí)現(xiàn)新風(fēng)格的網(wǎng)站：Neumorphism 的生成器

綜合分析來(lái)看，這種設(shè)計(jì)風(fēng)格目前在項(xiàng)目中推廣和實(shí)現(xiàn)中并不合適。

總結(jié)

這個(gè)風(fēng)格的出現(xiàn)也確實(shí)給大家?guī)?lái)了一個(gè)新的思考，這個(gè)風(fēng)格會(huì)持續(xù)嗎？可用嗎？也許扁平風(fēng)格的多年流行后，設(shè)計(jì)潮流開始往回走，但并不是直接回到擬物風(fēng)格，而是在效率和視覺(jué)效果中找一個(gè)平衡點(diǎn)。不論這個(gè)風(fēng)格的對(duì)錯(cuò)，起碼引起了設(shè)計(jì)師的注意，也激發(fā)了很多設(shè)計(jì)師的靈感，就像當(dāng)年擬物風(fēng)格和扁平風(fēng)格的討論一樣，不分對(duì)錯(cuò)，設(shè)計(jì)師也不妨多留意一下這個(gè)風(fēng)格，試著做一下效果圖，或許會(huì)有新的發(fā)現(xiàn)。

藍(lán)藍(lán)設(shè)計(jì) 魏華寫

     在承擔(dān)ui設(shè)計(jì)項(xiàng)目中，常常碰到一些客戶不給設(shè)計(jì)師看己往的軟件或本公司設(shè)計(jì)師設(shè)計(jì)但沒(méi)有被客戶認(rèn)可的設(shè)計(jì)方案，怕限制設(shè)計(jì)師的思路。那究竟給設(shè)計(jì)師參考會(huì)不會(huì)限制設(shè)計(jì)師的思維呢？

     實(shí)際上不會(huì)的，這是更多維度了解客戶的思考和角度，排除己被嘗試過(guò)的選項(xiàng)。

     在進(jìn)行一個(gè)ui 設(shè)計(jì)前，深度方面應(yīng)該要了解業(yè)務(wù)，用戶角色，環(huán)境生態(tài)，交互流程，關(guān)鍵功能，核心價(jià)值，用戶體驗(yàn)的峰值點(diǎn)和難點(diǎn)在哪里…….總之了解的越深越好。

     寬度方面，要看到競(jìng)品分析，行業(yè)趨勢(shì)，國(guó)內(nèi)外優(yōu)秀案例欣賞，專業(yè)文章觀點(diǎn)，應(yīng)該是可以拓展設(shè)計(jì)師的思維。

     設(shè)計(jì)最核心的目標(biāo)應(yīng)該在于解決問(wèn)題，而不是單純的讓界面好看。

      優(yōu)秀的設(shè)計(jì)師要明確解決問(wèn)題的目標(biāo)，博采眾長(zhǎng)，獨(dú)立思考，看眾多的競(jìng)品是看眾多的解題思路，多方位角度看問(wèn)題。各產(chǎn)品資源，核心技術(shù)不同，取舍不同，理解信息架框，運(yùn)營(yíng)思路，用戶特征，技術(shù)實(shí)現(xiàn)可能性，不會(huì)只照著您給的資料比貓畫虎。

       因此，我認(rèn)為，放心的給設(shè)計(jì)師參考資料吧，互相的了解，溝通越多，越容易出好的作品。

這五張圖是最近藍(lán)藍(lán)設(shè)計(jì)的稿件，展現(xiàn)從一個(gè)模糊的概念性需求到一個(gè)可視化概念性方案的設(shè)計(jì)過(guò)程。

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

今天我們就來(lái)討論一下什么是顧客體驗(yàn)地圖。

一、什么是顧客體驗(yàn)地圖？

顧客體驗(yàn)地圖（ Customer Journey Map） 是一張超越時(shí)間和空間，從個(gè)體的視角得到用戶與企業(yè)、服務(wù)、產(chǎn)品之間的關(guān)系地圖。它能夠視覺(jué)化地描繪用戶在使用服務(wù)的整個(gè)過(guò)程中的流程、需求、痛點(diǎn)。它可以很好地幫助我們梳理和分析常見的場(chǎng)景可能存在的問(wèn)題。在營(yíng)銷、服務(wù)、產(chǎn)品的場(chǎng)景分析中CJM都能發(fā)揮很大作用。

我們來(lái)欣賞一些著名公司做的顧客體驗(yàn)地圖：

1. 星巴克：用戶到星巴克喝完咖啡的整個(gè)體驗(yàn)過(guò)程

• 圖中央的橫軸是用戶在體驗(yàn)過(guò)程中步驟：準(zhǔn)備（Anticipate）、進(jìn)入(Enter)、參與(Engage)、退出(Exit)、反饋(Reflect)，每一個(gè)步驟下還對(duì)用戶行為做了進(jìn)行一步細(xì)分，例如，“參與”步驟中包含了：排隊(duì)、點(diǎn)單、支付、坐下、喝、工作；
• 在圖上方，標(biāo)識(shí)出了用戶在體驗(yàn)過(guò)程中心情變化，以積極和消極的進(jìn)行劃分，對(duì)每個(gè)觸點(diǎn)（圓點(diǎn)）標(biāo)記了相應(yīng)的說(shuō)明，例如：在工作階段，免費(fèi)的wifi就是一個(gè)積極的觸點(diǎn)；
• 下半部分是從用戶視角描述了他在該動(dòng)作下的不同用戶故事，例如：8.f 我享用著免費(fèi)Wi-Fi，而且信號(hào)也夠用。

2. 樂(lè)高：“用戶體驗(yàn)環(huán)（Customer Experience Wheel）”

在整個(gè)體驗(yàn)中找到樂(lè)高沒(méi)？

• 雖然比畫成圓形，但是它本質(zhì)上也是顧客體驗(yàn)地圖；
• 在圖的中心是這個(gè)用戶角色的說(shuō)明；
• 圓周是用戶體驗(yàn)的整個(gè)旅程，體驗(yàn)的好壞用表情來(lái)表示體驗(yàn)的好壞；
• i 標(biāo)記出我們需要更多信息來(lái)幫助我們提升體驗(yàn)；

3. 英國(guó)政府：使用CJM解決公共服務(wù)問(wèn)題

受害人報(bào)案到打官司的體驗(yàn)流程

• 站在用戶的視角，評(píng)估用戶的滿意度；
• 尋找不同政府部門的服務(wù)邊界；

4. Desonance 繪制的CJM也很有特色

這張圖包含了很多便于瀏覽的視覺(jué)化信息：

• 用戶類型 （Customer Type）：“用戶類型”可以用“用戶角色分析法（Persona）”或者移情圖進(jìn)一步細(xì)化。
• 體驗(yàn)階段及旅程 （Experience Phases & The Journey）： 在不同的體驗(yàn)階段以圖文結(jié)合的故事化的方式來(lái)描述不同的行為活動(dòng)，圖中包含了痛點(diǎn)、觸點(diǎn)、機(jī)會(huì)點(diǎn)……
• 觸點(diǎn)詳情與交互動(dòng)作 （Specific touchpoint and interactions）：觸點(diǎn)的解釋說(shuō)明；
• 情緒變化 （What the service is like — nights and lows ）：通過(guò)高低來(lái)視覺(jué)化用戶情緒變化過(guò)程，從而體現(xiàn)服務(wù)效果；
• 痛點(diǎn)和機(jī)會(huì)點(diǎn) （Point of delight/opportunities & Point of pain/service barriers ）: 通過(guò)使用圖標(biāo)的方式標(biāo)記在旅程圖中 ;
• 要點(diǎn)說(shuō)明（ Key to explain the map）；

二、如何繪制？

了解完什么是顧客體驗(yàn)地圖后，我們開始學(xué)習(xí)如何創(chuàng)建它。顧客體驗(yàn)地圖的創(chuàng)建需要五步：明確目標(biāo)、探究、頭腦風(fēng)暴、繪制地圖、優(yōu)化迭代:

1. 確定目標(biāo)

考慮好產(chǎn)品或服務(wù)的整體目標(biāo)，以及期望顧客旅程圖反應(yīng)出具體目標(biāo)。在做之前，最好把原有的體驗(yàn)流程感受一遍。并且與利益相關(guān)者溝通，探尋背后真正的動(dòng)因。可以使用5W1H:

• what：我們希望通過(guò)顧客體驗(yàn)地圖解決什么問(wèn)題？
• why：為什么要解決這個(gè)問(wèn)題?
• where：這些問(wèn)題在哪些場(chǎng)合發(fā)生？
• when：時(shí)間截止期限是什么？
• who：涉及到哪些利益相關(guān)者？
• how：期望達(dá)到的愿景是怎么樣的？

2. 探究

（1）檢視所有相關(guān)的用戶研究資料，其中包括定性和定量的調(diào)查結(jié)果，以便于提供洞察客戶體驗(yàn)。也可以通過(guò)書籍資料做更多的研究。常用的研究方法包括客戶訪談、人種學(xué)和情境調(diào)查、客戶調(diào)查、客戶支持/投訴日志、網(wǎng)絡(luò)分析、社交媒體收聽和競(jìng)爭(zhēng)情報(bào)。

（2）移情映射，從各個(gè)方面描述一個(gè)角色在特定場(chǎng)景中的經(jīng)歷。這個(gè)練習(xí)幫助我們的團(tuán)隊(duì)加深對(duì)顧客體驗(yàn)的理解，并對(duì)顧客所需要的東西做出驚人的洞察力。移情圖也為顧客體驗(yàn)地圖的繪制提供了物質(zhì)基礎(chǔ)。我們的目標(biāo)是獲得一個(gè)全面的感覺(jué)，在這段經(jīng)歷中扮演那個(gè)角色的感覺(jué)，特別是關(guān)注他們的想法、感覺(jué)、視覺(jué)、聽覺(jué)、說(shuō)話和行動(dòng)。

（3）先生成一個(gè)客戶觸點(diǎn)清單以及這些觸點(diǎn)出現(xiàn)的場(chǎng)景。然后通過(guò)頭腦風(fēng)暴尋找被遺漏的接觸點(diǎn)或場(chǎng)景。例如，觸點(diǎn)可以是“付賬單”，與觸點(diǎn)相關(guān)的場(chǎng)景可以是“在線付費(fèi)”、“通過(guò)郵件付費(fèi)”或“親自付費(fèi)”。

3. 頭腦風(fēng)暴

為了收集更多的Idea，我們需要組建一個(gè)團(tuán)隊(duì)進(jìn)行頭腦風(fēng)暴。頭腦風(fēng)暴的目的是在短時(shí)間內(nèi)產(chǎn)生盡可能多的想法。我們可以選擇品牌屬性或心態(tài)的詞匯。頭腦風(fēng)暴的時(shí)候，圍繞這些詞進(jìn)行。我建議團(tuán)隊(duì)選擇3-5個(gè)詞（例如：可訪問(wèn)的，社交的，安慰的），然后每個(gè)單詞使用2分鐘的時(shí)間。每個(gè)人都會(huì)寫下他們當(dāng)時(shí)所能想到的許多想法。2分鐘后切換到下一個(gè)詞，直到所有的詞被用作靈感。

使用親和圖進(jìn)行整理。親和圖是通過(guò)視覺(jué)方式組織團(tuán)隊(duì)的思想，凝聚和發(fā)現(xiàn)概念中的的方法。親和圖解有助于我們從一個(gè)廣泛的網(wǎng)絡(luò)轉(zhuǎn)移到探索許多可能性，以獲得對(duì)這個(gè)觀眾的正確解決方案的重點(diǎn)。所有的團(tuán)隊(duì)成員都應(yīng)該把他們的想法放在墻上的頭腦風(fēng)暴活動(dòng)中。有人把這些想法分類并貼上標(biāo)簽。作為一個(gè)群體，開始考慮你可以在哪里組合，提煉，并刪除想法，形成一個(gè)凝聚力的未來(lái)客戶體驗(yàn)的愿景。

4. 描繪顧客的體驗(yàn)旅程

把所有的東西放在一起：時(shí)間線、觸點(diǎn)、頻道、情緒波動(dòng)，以及為如何改進(jìn)未來(lái)客戶旅程所產(chǎn)生的所有美妙的新想法。顧客體驗(yàn)地圖有5個(gè)關(guān)鍵要素：

• 角色：這張圖的主角用戶是誰(shuí)；
• 觸點(diǎn)：場(chǎng)景中服務(wù)與用戶接觸的關(guān)鍵點(diǎn)；
• 渠道：交互行為發(fā)生的地方是網(wǎng)頁(yè)端、App、電話、還是在線下某一個(gè)地方？
• 時(shí)間線：從服務(wù)的前、中、后的不同階段，可以進(jìn)行細(xì)分；
• 情緒：在體驗(yàn)過(guò)程中的情緒變化；

購(gòu)買場(chǎng)景下的顧客體驗(yàn)地圖

另外，這張圖還可以提供一些額外信息：

• 真實(shí)的瞬間: 通過(guò)照片拍攝一些能讓人留下足夠印象的積極的交互畫面。
• 服務(wù)提供者:對(duì)體驗(yàn)有影響的相關(guān)人員，如服務(wù)員、朋友、同事等；

#專欄作家#

PM熊叔，微信公眾號(hào)：PM熊叔，人人都是產(chǎn)品經(jīng)理專欄作家。教育類產(chǎn)品產(chǎn)品經(jīng)理出身，學(xué)過(guò)設(shè)計(jì)，做過(guò)開發(fā)，做過(guò)運(yùn)營(yíng)的產(chǎn)品經(jīng)理。

編輯：藍(lán)藍(lán)

設(shè)計(jì)思維是一種解決問(wèn)題的方法，運(yùn)用同理心,橫向思考,做原型,講故事,令人信服地澄清洞見。

2004年，斯坦福大學(xué)機(jī)械工程系的教授戴維·凱利（DavidKelley)創(chuàng)辦了D.School（斯坦福大學(xué)哈索普萊特納設(shè)計(jì)學(xué)院），并在D.School教授關(guān)于設(shè)計(jì)方法論的課程，他也是世界最著名的創(chuàng)業(yè)設(shè)計(jì)與咨詢公司IDEO的創(chuàng)始人。

什么是設(shè)計(jì)思維？

設(shè)計(jì)思維需要將人放回故事的中心。要學(xué)會(huì)將人放在首位，這就是設(shè)計(jì)思維的核心精神：以人為本的設(shè)計(jì)，也叫做以用戶為中心的設(shè)計(jì)（User-Centered Design）。設(shè)計(jì)思維，就是一套以人為本的解決問(wèn)題的方法論。解決問(wèn)題，要從人的需求出發(fā)，多角度地尋求創(chuàng)新解決方案，并創(chuàng)造更多的可能性。

在“設(shè)計(jì)思維”在被不同的學(xué)者提出之后，IDEO是第一家將設(shè)計(jì)思維應(yīng)用于商業(yè)問(wèn)題的解決之中。

D.School將設(shè)計(jì)思維分成五大步驟：“Empathy同理心思考”、“Define需求定義”、“Ideate創(chuàng)意構(gòu)思”、“Prototype原型實(shí)現(xiàn)”、“Test實(shí)際測(cè)試”，

接下來(lái)，就讓我們了解一下如何實(shí)施設(shè)計(jì)思維的五步驟！

1同理心思考（Empathy）

同理心思考，就是要獲得對(duì)你試圖解決的問(wèn)題的共鳴。簡(jiǎn)單來(lái)說(shuō)，就是換位思考。比如你希望改善學(xué)校的教室環(huán)境，那么，你就可以像學(xué)生一樣，坐在課桌后面上一整天的課。或者，你希望學(xué)生們來(lái)解決班級(jí)紀(jì)律的問(wèn)題，你可以讓一位學(xué)生來(lái)做一天的老師。這個(gè)步驟的目標(biāo)是深入解讀用戶，收集大量信息。

2需求定義 （Define）

在收集到的調(diào)查信息基礎(chǔ)上，我們需要更的定義需求。像“讓學(xué)生的成績(jī)更好”，這就不是一個(gè)的需求定義。而“提升學(xué)生在自習(xí)時(shí)間的專注力”，則是更精準(zhǔn)的，入手點(diǎn)明確的需求定義。只有精準(zhǔn)定義需求，我們才能開始入手解決問(wèn)題！

3創(chuàng)意構(gòu)思（Ideate）

這個(gè)步驟可以看做是頭腦風(fēng)暴的階段。圍繞上一步定義的需求，我們可以跳出局限，打破慣性思維，天馬行空的提出各種各樣的點(diǎn)子。不要一定要想到好點(diǎn)子，而是要在一百個(gè)點(diǎn)子里選出最好的。

4原型實(shí)現(xiàn)（Prototype）

這個(gè)步驟是要做出可以是粗糙、簡(jiǎn)單的產(chǎn)品或產(chǎn)品中的特定功能的原始模型，用于測(cè)試上一階段提出的解決方案。原型可以是一個(gè)具體的產(chǎn)品的模型，也可以是一個(gè)小規(guī)模的環(huán)境或過(guò)程的簡(jiǎn)單模擬。

5實(shí)際測(cè)試 （Test）

這個(gè)階段，我們會(huì)使用實(shí)現(xiàn)的產(chǎn)品原型，或模擬環(huán)境來(lái)嚴(yán)格測(cè)試問(wèn)題是否得到解決，需求是否得到滿足。這個(gè)階段非常重要，一些想法可能會(huì)在這個(gè)過(guò)程中被重新定義，甚至，發(fā)現(xiàn)新的問(wèn)題。

以上，就是實(shí)施設(shè)計(jì)思維的五大步驟。

第6步：重復(fù)以上步驟進(jìn)行迭代 

反饋——原型——測(cè)試——反饋——原型.......

編輯：藍(lán)藍(lán)

戰(zhàn)略設(shè)計(jì)中的一部分,是需要對(duì)自己和他人開誠(chéng)布公,讓大家清楚你真正想要從一項(xiàng)創(chuàng)新活動(dòng)中尋求什么。很多時(shí)候,團(tuán)隊(duì)都是在缺乏對(duì)于真實(shí)的目的和需求認(rèn)知清楚的基礎(chǔ)上被迫使做一些徹底改造或是重新想象的事情。

需要探素的問(wèn)題可能包括:

我們想要的解決方案的本質(zhì)是什么?

破壞性創(chuàng)新還是漸進(jìn)式創(chuàng)新?我需要很明確這點(diǎn)嗎?

我們是昨天需要還是明天需要？

我是否為我正投入做的挑戰(zhàn)耗費(fèi)了合適的資源?

破壞性創(chuàng)新是一些新的、之前沒(méi)有過(guò)的體驗(yàn),而漸進(jìn)式創(chuàng)新是在現(xiàn)有的給人們來(lái)的利益點(diǎn)的基礎(chǔ)上做的一些新的、改進(jìn)式創(chuàng)新。當(dāng)然，我們每大都在連續(xù)不斷地努力、改善我們提供的產(chǎn)品和服務(wù)。無(wú)論是哪一種創(chuàng)新変革,在不同的時(shí)間范時(shí)都有對(duì)它的需求。你希望哪種創(chuàng)新變革,以及你能花在上面的時(shí)間,都會(huì)影響到你如何實(shí)現(xiàn)創(chuàng)新。

變化的類型 ：短期、中期、長(zhǎng)期

破壞性創(chuàng)新、漸進(jìn)式創(chuàng)新、持續(xù)改進(jìn)

舉個(gè)例子,假設(shè)一個(gè)領(lǐng)導(dǎo)者確實(shí)想要“盡快”做出破壞性創(chuàng)新,那么關(guān)鍵是就把它盡快培育起來(lái)并推向市場(chǎng)，與所需要的資源、人力和資金的需求展開一番對(duì)話。這個(gè)簡(jiǎn)單的對(duì)話對(duì)于構(gòu)建你的戰(zhàn)略邊界是很重要的。沒(méi)有它,你可能會(huì)在一些不必要的努力上浪費(fèi)時(shí)間。時(shí)機(jī)很重要，不要等到太完美。

或許它不是人們想要放在首位的對(duì)話,但是從領(lǐng)導(dǎo)力的角度,確實(shí)最為重要的,也是會(huì)贏得參與挑戰(zhàn)的團(tuán)隊(duì)成員的高度贊賞的。

編輯：藍(lán)藍(lán)

另外一種探索需要被定義和解決的問(wèn)題的本質(zhì)的方法是圏問(wèn)題。

簡(jiǎn)單地說(shuō),我們向于用常具體的表達(dá)方式來(lái)定義問(wèn)題,這會(huì)嚴(yán)重限探索解決方案的機(jī)會(huì)空間。

你同樣可以運(yùn)用可視化的方法去“圈問(wèn)題”來(lái)跳出這個(gè)預(yù)設(shè)。

在運(yùn)用這個(gè)工具的時(shí)候,比起在不同利益相關(guān)方的視角之間切換,更多的是要變換看待挑戰(zhàn)的有利視角,例如從零距離、較遠(yuǎn)處、10000英尺去看,都會(huì)產(chǎn)生對(duì)問(wèn)題的不同看法,以及新的解決問(wèn)題的空間。

圈問(wèn)題的定義

首先,在一頁(yè)紙的中間,寫下你對(duì)問(wèn)題的定義,把它圈起來(lái)。現(xiàn)在考慮一個(gè)更廣泛的、更考慮問(wèn)題所處環(huán)境的定義,寫在第一層定義旁,然后把它圈起來(lái)。

這樣做一到兩次,每次都讓問(wèn)題的定義變得更像是放在環(huán)境中考慮的,當(dāng)然,要和原始的問(wèn)題定義相關(guān)。

例如,或許你的團(tuán)隊(duì)正在開發(fā)一種液體洗滌劑,瓶蓋有間題,液體很容易流出,搞得一片狼藉。

你可能把問(wèn)題定義成“瓶蓋封閉的問(wèn)題”。把它寫在中心,圈起來(lái),這是一個(gè)非常具體的問(wèn)題的定義,也很容易解決。

但就這樣的定義方式,該問(wèn)題解決起來(lái)可能是漸進(jìn)的、很枯燥的。現(xiàn)在寫一個(gè)更放在環(huán)境中考慮的問(wèn)題定義,也許這是一個(gè)“倒液體的便捷性問(wèn)題”,把它圈起來(lái)。

第三層再用更抽象的語(yǔ)言去定義:挑戰(zhàn)是“使用無(wú)憂,有樂(lè)趣”。毎個(gè)定義不同,指向的解決方案就不同,最后一個(gè)或許是給了足夠的開放的空間,以產(chǎn)生出創(chuàng)造性解決方案的,例如可分離式容器。

藍(lán)藍(lán)編輯

你可能會(huì)認(rèn)為,要建立同理心,最可靠的辦法就是選一些人,看看誰(shuí)是屬于“常態(tài)”用戶,或典型用戶，

這在做戰(zhàn)略設(shè)計(jì)時(shí)其實(shí)是會(huì)帶來(lái)麻煩的,因?yàn)榈湫陀脩艉苌倌茏屛覀兞私獾轿覀儾恢赖臇|西,我們需要的是異常值,極端的使用者和非使用者，從這兩類人身上是可以獲得的,我在把極端用戶作為我們的靈感設(shè)計(jì)目標(biāo)，在創(chuàng)新工作中，對(duì)極端問(wèn)題做同理心是比對(duì)處于舒適地帶的典型用戶做同理心更富有成效的。

當(dāng)你同理心的時(shí)候,如果可以走出你的舒適區(qū),你會(huì)學(xué)到更多。

一且你投入做極端用戶，并從他人的視角去思考這個(gè)世界,很重要的一點(diǎn)是要深入去做,而不僅僅是
在表面上聽他們說(shuō)什么和看他們做什么。

全身心投入進(jìn)去,捕捉到一些微妙的信號(hào),都可以幫助我們解讀他們的肢體語(yǔ)言和情緒,真正理解到他們的想法和感受。我們是天然能夠做到這一點(diǎn)的,因?yàn)樯窠?jīng)學(xué)的研究發(fā)現(xiàn),我們大腦里有“鏡像神經(jīng)元”,能夠賦子我們同理心的能力。

當(dāng)我們專注于某個(gè)人的時(shí)候,我們能夠確確實(shí)實(shí)地在大腦中感覺(jué)到他們的受。通過(guò)專注的觀察,我們可以知道他們?cè)谧?/span>什么以及他們的感受是怎樣的。然后,我們就可以超越事實(shí)和數(shù)據(jù),清晰地將他們的想法和感受描述出來(lái),用草圖的方式可以有效地把它們可視化呈現(xiàn)出來(lái)。

很重要的一點(diǎn)是,在早期的探索階段,你是專注在清晰地定義一個(gè)極端用戶個(gè)體,而不是一個(gè)用戶角色的總結(jié)。你希望他們獨(dú)特和的地方能夠被挖掘出來(lái),幫助你看到機(jī)會(huì)。他們不是具有典型代表性的,但是卻非常能給人以啟發(fā)。