最近工作中接觸的需求類型，除了金融相關(guān)的，還接觸了不少新零售相關(guān)的需求。發(fā)現(xiàn)新零售的需求相比較以前接觸過的其他類型需求，設(shè)計(jì)思考的側(cè)重點(diǎn)存在部分差異。

今天就聊一聊關(guān)于新零售的項(xiàng)目，在設(shè)計(jì)過程中應(yīng)該更注重什么？

一、從接觸點(diǎn)到體驗(yàn)旅程

做設(shè)計(jì)經(jīng)常會(huì)聽到“接觸點(diǎn)”這個(gè)詞，通常的體驗(yàn)設(shè)計(jì)流程，無非就是找接觸點(diǎn)、分析痛點(diǎn)、提供動(dòng)力。

不過今天要說下“體驗(yàn)旅程”，設(shè)計(jì)師應(yīng)該聚焦于體驗(yàn)旅程的思考，而不僅僅是接觸點(diǎn)。

當(dāng)用戶走進(jìn)商家的大門時(shí)，就已經(jīng)開始了體驗(yàn)旅程——在貨架上尋找想要的商品，到收銀臺(tái)排隊(duì)付款，最后帶著商品離開。

每一個(gè)環(huán)節(jié)的體驗(yàn)做得不好，都會(huì)讓用戶流失，甚至留下負(fù)面印象。

比如：用戶興高采烈的帶著商品，到收銀臺(tái)排隊(duì)付款，等了5分鐘，發(fā)現(xiàn)隊(duì)伍一動(dòng)不動(dòng)，原先購物的樂趣就會(huì)減少；再等5分鐘，發(fā)現(xiàn)隊(duì)伍還是很慢，很可能就直接放棄付款，轉(zhuǎn)身離店了。

我們可以先把用戶體驗(yàn)的完整流程列出來，再根據(jù)需求的內(nèi)容，將體驗(yàn)分為前、中、后三個(gè)主要階段。

第一階段，為用戶進(jìn)行核心操作的預(yù)熱階段，挖掘這過程用戶的需求，可以創(chuàng)造機(jī)會(huì)，為用戶提供進(jìn)入下一階段的動(dòng)力。

第二階段，為核心階段，這一階段很重要，決定了用戶的轉(zhuǎn)化。設(shè)計(jì)上建立清晰的主流程，并減少用戶的擔(dān)憂。

第三階段，為體驗(yàn)的收尾階段，這一階段主要為了讓用戶有個(gè)良好的結(jié)束，從而轉(zhuǎn)化為?？?。

這里還需要特別留意下，在體驗(yàn)旅程的分析過程中，減少用戶遇到負(fù)面的受阻概率，比為用戶創(chuàng)造出乎意料的好體驗(yàn)更重要。

因?yàn)橛脩粼隗w驗(yàn)過程中，會(huì)產(chǎn)生情緒的波動(dòng)，出乎意料的良好體驗(yàn)會(huì)讓用戶感覺高興。而體驗(yàn)過程受阻，則會(huì)讓用戶產(chǎn)生負(fù)面的情緒。

當(dāng)用戶完成體驗(yàn)旅程后，會(huì)根據(jù)整體的情緒波動(dòng)，留下相對應(yīng)的印象，特別是那些峰值和谷值。

對于用戶而言，在體驗(yàn)旅程產(chǎn)生的負(fù)面情緒，印象會(huì)更深刻，因?yàn)槿祟愋睦淼谋举|(zhì)，都擁有損失厭惡。

關(guān)于用戶情緒的變化曲線，還需要留意下，當(dāng)相關(guān)行業(yè)體驗(yàn)都提升時(shí)，每一次用戶的體驗(yàn)分值都會(huì)被拉高。久而久之，就會(huì)提升用戶對商家服務(wù)體驗(yàn)的預(yù)期值，這時(shí)候用戶的情緒變化，起點(diǎn)就不再是0，而是更高的分值。

二、借助技術(shù)實(shí)現(xiàn)數(shù)字化

新零售說白了，就是傳統(tǒng)零售行業(yè)在當(dāng)前時(shí)代發(fā)展中，一次順勢而為的迭代更新。

那么在當(dāng)前時(shí)代發(fā)展中，最熱門的一個(gè)領(lǐng)域，就是互聯(lián)網(wǎng)技術(shù)。所以對于新零售來說，要好好借助技術(shù)，完善自身的發(fā)展。

我們可以通過技術(shù)來優(yōu)化用戶旅程。

比如：掃碼購的付款方式，用戶自助用手機(jī)掃碼商品條形碼，通過直接線上支付，就是完成付款流程。相對傳統(tǒng)的人工付款方式，不僅減少了流程耗時(shí)，還減少了商家人力，以及支付過程出錯(cuò)的概率。

通過運(yùn)用互聯(lián)網(wǎng)技術(shù)，還可以強(qiáng)化會(huì)員信息，實(shí)現(xiàn)數(shù)字化改造。

比如：家樂福會(huì)員合并的需求，將傳統(tǒng)線下家樂福會(huì)員與線上家樂福小程序會(huì)員合并，還實(shí)現(xiàn)了積分的打通，讓會(huì)員價(jià)值得到更顯著的提升。

某商家的會(huì)員系統(tǒng)，除了基本的會(huì)員積分功能，還包含錢包功能。實(shí)現(xiàn)付款出示二維碼，商家掃碼一次后，支付加積分一步到位。再也不用付款時(shí)，向收銀員報(bào)手機(jī)號或出現(xiàn)會(huì)員卡，再進(jìn)行支付了。這也是一個(gè)借助技術(shù)的設(shè)計(jì)改良方案。

其實(shí)新零售最大的核心在于——將傳統(tǒng)“以商品為中心”的觀點(diǎn)，轉(zhuǎn)移成“以消費(fèi)者體驗(yàn)為中心”。

而體驗(yàn)設(shè)計(jì)并非簡單的交互設(shè)計(jì)或視覺設(shè)計(jì)。就像前面說的，它是一個(gè)整合設(shè)計(jì)，在用戶的體驗(yàn)旅程中，每一個(gè)環(huán)節(jié)都影響著最終的結(jié)果。

設(shè)計(jì)師了解技術(shù)原理后，并不是為了親自去寫代碼，而是為了更好的把控方案，找出最優(yōu)的解決思路。在有些場景下，也能以設(shè)計(jì)為主導(dǎo)，去推進(jìn)產(chǎn)品完善用戶的體驗(yàn)旅程設(shè)計(jì)。

三、不要遺忘一線員工

在新零售的體驗(yàn)旅程設(shè)計(jì)中，還有一個(gè)重要的角色容易被設(shè)計(jì)師忽略，那就是最接近用戶購物場景的一線員工，他們可能是商城里的普通員工，也可能是品牌商的導(dǎo)購員。他們可能不是最懂用戶的群體，但是他們是最接近用戶的群體。

1. 最后一根稻草的角色

回想自己去線下超市買東西時(shí)，在貨架面前遲疑，不知道選A好，還是選B好。這時(shí)候?qū)з彽囊痪湓?，就成為你下決定選擇買哪個(gè)商品的最后一根稻草了。

如果體驗(yàn)過海底撈的服務(wù)，也許就會(huì)印象深刻?？墒菫槭裁春５讚频姆?wù)能做到那么出色呢？

除了海底撈的文化之外，還有一個(gè)重要的因素，就是海底撈一線員工的權(quán)限挺高。門店里普通的員工，都可以在無需上報(bào)的情況下，擁有100元的主動(dòng)使用權(quán)。

比如：當(dāng)員工覺得顧客吃完某道菜不滿意時(shí)，只要這道菜價(jià)值不超過100元，都可以直接決定是否讓用戶免單。

2. 讓設(shè)計(jì)參與其中

聽起來一線員工好像在體驗(yàn)旅程中挺重要的，但是一線員工如何去服務(wù)好用戶，好像是公司高層決定的，跟設(shè)計(jì)師又有什么關(guān)系呢？

在微會(huì)員與各個(gè)商家的合作項(xiàng)目中，有一家商家叫中百。

除了通用的微會(huì)員功能外，該商家還額外設(shè)計(jì)配套了員工激勵(lì)的工具。由員工介紹并開通會(huì)員的新用戶，將帶給員工對應(yīng)的獎(jiǎng)勵(lì)。最后，方案就像意料之中的結(jié)果，該商家的會(huì)員開通轉(zhuǎn)化率比其他合作商家要高出不少。

身為設(shè)計(jì)師，在新零售相關(guān)的項(xiàng)目中，不要忽視一線員工這個(gè)重要的角色。我們可以跟產(chǎn)品經(jīng)理商量，針對一線員工，打造一些員工激勵(lì)的功能。這樣更有利于產(chǎn)品的轉(zhuǎn)化，也有助于激勵(lì)員工主動(dòng)去幫忙受阻的用戶。

而這個(gè)環(huán)節(jié)的設(shè)計(jì)，需要多留意以下幾點(diǎn):

（1）線下物料的設(shè)計(jì)，需要考慮多種不同的展示內(nèi)容和形式。

最好就是去線下場景走走看看，比如：我們通常理解中，紅色是挺突出的顏色，線下物料如果用紅色，用戶肯定會(huì)留意到的。

但在實(shí)際場景中，商店的環(huán)境普通，而且會(huì)同時(shí)線上多個(gè)活動(dòng)。

如果在功能推廣期，剛好有另一個(gè)活動(dòng)也是紅色為主色調(diào)，那么就會(huì)相互影響轉(zhuǎn)化率。造成用戶在商店中，不留心看，是無法關(guān)注到兩個(gè)活動(dòng)的內(nèi)容差異。

（2）考慮員工的非專業(yè)型，設(shè)計(jì)盡量簡單的操作流程，以及易于復(fù)制的素材展示。

如果只提供一個(gè)簡單的二維碼，而商店的員工將直接打印在A4紙上，去跟用戶介紹，并引導(dǎo)用戶掃描操作，那么用戶將會(huì)覺得產(chǎn)品可信度低。

這個(gè)場景并不是只存在想象中，而是某項(xiàng)目最早期，沒有較好的設(shè)計(jì)方案，員工自己想出來的解決方式。

如果設(shè)計(jì)時(shí)，就將二維碼圖片設(shè)計(jì)得更美觀些，并在圖片里加入品牌元素，就像微信支付的收款碼一樣，那么用戶對產(chǎn)品的可信度會(huì)更高，更有利于開通的轉(zhuǎn)化。

當(dāng)然，這種用于開通的引導(dǎo)圖片，可以直接保存到手機(jī)，也可以員工自行打印出來，以易于復(fù)制的形式存在，傳播以及轉(zhuǎn)化效果會(huì)更好。

四、為細(xì)分化流程建立導(dǎo)航

新零售未來的趨勢是從單渠道轉(zhuǎn)向多渠道，從傳統(tǒng)的單一線下門店渠道，轉(zhuǎn)向線上App、小程序或H5等新載體銷售，利用互聯(lián)網(wǎng)工具的便捷性，來更好地觸達(dá)用戶。

總的來說，“戰(zhàn)場”已經(jīng)不再是單一形式，甚至有不少新零售都開始了跨領(lǐng)域的多品牌合作。

這些對設(shè)計(jì)來說都是一種挑戰(zhàn)，因?yàn)橛脩羰褂脠鼍白兊枚鄻佑謴?fù)雜了。在這種細(xì)分化流程的場景下，設(shè)計(jì)好導(dǎo)航，做好用戶引導(dǎo)就顯得極為重要。

設(shè)計(jì)可以嘗試用講故事的方式，來重組頁面的信息層級結(jié)構(gòu)，以及建立一個(gè)清晰的導(dǎo)航形式。

1. 先整理好內(nèi)容信息的層級結(jié)構(gòu)

一般來說，可以把想展現(xiàn)的信息分為三個(gè)層級——重要信息、次要信息、輔助信息。

將內(nèi)容信息分類后，初步得到抽象的文字概念，還需要進(jìn)一步處理成視覺層級的分層，也就是交互稿呈現(xiàn)出來的區(qū)域信息。

整理好信息層級，能確保用戶更容易的理解界面，找到想要的信息，順利完成操作任務(wù)。

2. 開始構(gòu)建故事情節(jié)

進(jìn)行信息層級框架整理時(shí)，把操作流程按敘事的方式來描述出來。

1. 首先主角懷著某個(gè)目的出場了；
2. 后來經(jīng)過一系列的偶遇奇緣，克服了各種危險(xiǎn)；
3. 接下來主角學(xué)會(huì)了高深莫測的武功；
4. 最后過上了幸福的日子。

是不是有點(diǎn)眼熟，好像很多電影或者小說都是這樣的套路。如果在導(dǎo)航設(shè)計(jì)中呢？

（1）要有引導(dǎo)來承上啟下，讓用戶知道接下來準(zhǔn)備做什么事。

（2）要為用戶提供動(dòng)機(jī)，收集用戶操作過程中會(huì)遇到什么障礙，盡量減少用戶的障礙。

（3）要讓用戶理解界面上的內(nèi)容，敢于去嘗試操作。還要在適當(dāng)?shù)臅r(shí)候，給用戶的積極結(jié)果來個(gè)強(qiáng)化鼓勵(lì)。

如：一個(gè)完美的“對勾”圖標(biāo)，一句積極的文案反饋。萬一失敗了，就弱化負(fù)面提示，避免用戶產(chǎn)生受責(zé)備的感覺。

（4）最后確保用戶能順利完成主流程的操作，并形成了回頭客。

其實(shí)，有時(shí)候用戶形成回頭客也不一定能證明設(shè)計(jì)方案是成功的。

如果這個(gè)需求屬于壟斷型功能，例如12306的訂票功能，因?yàn)闆]有其他替代品，再糟糕的體驗(yàn)，但還是有用戶去使用。所以成為回頭客，有時(shí)候并不能用來衡量設(shè)計(jì)方案的成果。

如果想驗(yàn)證設(shè)計(jì)方案，可以通過簡單的用戶測試，利用凈推薦值（NPS）去驗(yàn)證。

3. 簡單的視覺軌跡走查

在用戶測試中，有時(shí)候會(huì)用到眼動(dòng)技術(shù)來追蹤用戶的眼球運(yùn)動(dòng)軌跡。但日常工作中，無法做到每一個(gè)項(xiàng)目都進(jìn)行眼動(dòng)測試。那么設(shè)計(jì)師有什么方法去驗(yàn)證視覺層級是否設(shè)計(jì)合理呢？

可以利用簡單的視線軌跡，來驗(yàn)證界面的視覺層級是否設(shè)計(jì)合理。只要將界面中，希望用戶操作的功能按數(shù)字順序排列下就行了，再觀察得出的視線軌跡是否符合用戶的認(rèn)知習(xí)慣。

需要特別說明下，采用此方式得到的視線軌跡，是設(shè)計(jì)師主觀的把功能操作順序，抽象的轉(zhuǎn)化為視線軌跡；并不是通過眼動(dòng)設(shè)備，客觀的獲取用戶的眼動(dòng)軌跡。

因此要留意視覺效果對視線軌跡的影響，可以將頁面轉(zhuǎn)為灰階的顯示效果，在根據(jù)圖片在頁面中的對比度，來輔助衡量圖片對視線軌跡的影響。畢竟用戶的視覺注意力，更容易被視頻和圖片吸引，而不是文字。

五、模塊化的擴(kuò)展眼光

新零售的商家大多數(shù)都是連鎖店的形式存在，商家在盡量統(tǒng)一標(biāo)準(zhǔn)的服務(wù)流程中，又會(huì)根據(jù)當(dāng)?shù)氐奶厣?，做大同小異的本土化設(shè)計(jì)。

因此對于設(shè)計(jì)來說，要用發(fā)展的眼光去看待方案，多點(diǎn)考慮擴(kuò)展性的問題。

這時(shí)候，模塊化這個(gè)耳熟的概念，又顯得十分重要了，特別合適目標(biāo)用戶和場景多樣化的新零售需求。

總的來說，模塊化設(shè)計(jì)有以下優(yōu)點(diǎn)：

1. 有利于跨平臺(tái)設(shè)計(jì)，保持一致性。
2. 提供工作效率，更好維護(hù)設(shè)計(jì)稿。
3. 有利于和開發(fā)溝通，以及將設(shè)計(jì)稿轉(zhuǎn)化為代碼。
4. 有利于界面加載的優(yōu)化。

1. 將理念融入設(shè)計(jì)過程

既然模塊化這個(gè)概念那么熟悉了，為什么今天還要提到它呢？

因?yàn)槲野l(fā)現(xiàn)一件有趣的事，在日常工作中，設(shè)計(jì)師們所用的軟件為Sketch，然后我發(fā)現(xiàn)一些設(shè)計(jì)新人都知道模塊化的好處，但是并沒有將模塊化理念融入工作中。

體現(xiàn)出來主要有以下兩個(gè)問題：

（1）全平臺(tái)統(tǒng)一的通用控件，難以用規(guī)范去定義。

（2）雖然可以用規(guī)范去定義控件的使用規(guī)則，但在Sketch中沒有通過符號（Symbols）去同一控制。

第一個(gè)問題，其實(shí)是因?yàn)樵O(shè)計(jì)初期，沒有建立比較好的原則。設(shè)計(jì)中期，缺失了走查統(tǒng)一性的過程。導(dǎo)致了通用控件，并不通用，從而引發(fā)難以用規(guī)范去定義的問題。

第二個(gè)問題，說到底，還是模塊化設(shè)計(jì)的理念沒有融入設(shè)計(jì)之中。這就導(dǎo)致了有些場景下可以形成統(tǒng)一控件去管理，卻設(shè)計(jì)了多個(gè)自定義樣式。在后期更新設(shè)計(jì)稿時(shí)，也容易出現(xiàn)改漏了，頁面前后不統(tǒng)一的表達(dá)問題。甚至在開發(fā)環(huán)節(jié)，出現(xiàn)回爐優(yōu)化設(shè)計(jì)的情況。

2. 借助工具優(yōu)化控件

在做新零售的項(xiàng)目時(shí)，我將頁面都進(jìn)行了模塊化的處理。然后就發(fā)現(xiàn)有些頁面，并不能輕松地形成Sketch中的符號（Symbols）。看起來這些頁面都大同小異，不過它們之間又存在一點(diǎn)差異，導(dǎo)致模版化后無法通用。

如：有些品牌商需要積分系統(tǒng)的搭建；有些因?yàn)樯碳冶旧硪呀?jīng)有積分系統(tǒng)，所以需要去掉積分相關(guān)的功能。

那又怎么解決呢？當(dāng)時(shí)我反思了下，把核心功能都模塊化處理了，再把這些模塊打包成通用獨(dú)立模版。

最后實(shí)現(xiàn)了，在面對不同商家的需求時(shí)，可以復(fù)用同一個(gè)模版，只需要選擇對應(yīng)的功能配件就行。相當(dāng)于通過嵌套多個(gè)控件的方式，來實(shí)現(xiàn)模塊化的理念。

六、總結(jié)

上文也提到過，新零售是將傳統(tǒng)“以商品為中心”的觀點(diǎn)，轉(zhuǎn)移成“以消費(fèi)者體驗(yàn)為中心”。

同時(shí)，新零售是以消費(fèi)者體驗(yàn)為中心的數(shù)據(jù)驅(qū)動(dòng)的泛零售業(yè)態(tài)。

這句話聽起來可能不太好理解，簡單點(diǎn)說就是——涉及行業(yè)范圍更大了，覆蓋人們生活的場景更多了，可以提供更多樣化的服務(wù)，甚至真正做到最近很火的概念——“千人千面”。

對于設(shè)計(jì)師而言，在做新零售相關(guān)項(xiàng)目時(shí)，可以重點(diǎn)考慮：

1. 建立體驗(yàn)旅程，而不是聚焦在單一的接觸點(diǎn)。
2. 了解相關(guān)技術(shù)，在數(shù)字化的浪潮中，就相當(dāng)于掌握了設(shè)計(jì)的邊界線。
3. 關(guān)注一線員工，借助設(shè)計(jì)的力量去輔助他們，能讓設(shè)計(jì)方案更有價(jià)值。
4. 擁有清晰導(dǎo)航，在細(xì)分化場景以及操作流程越來越復(fù)雜的環(huán)境下，導(dǎo)航則是人與界面之間的燈塔。
5. 重視模塊化設(shè)計(jì)，更注重?cái)U(kuò)展的可能性，提前規(guī)劃好設(shè)計(jì)方案的演變路線。

作者：mufly

來源：https://www.ui.cn/detail/439772.html

本文由 @mufly 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議