小伙伴們畫好視覺稿后，是不是頁面的交互/視覺規(guī)約經(jīng)常丟三落四，常常在設計宣講時被開發(fā)測試提問？自己表面鎮(zhèn)定，內(nèi)心慌的一筆：這個...我沒想到，那個...我沒想到...

要想在宣講時能夠從容應對各種問題，就需要在設計稿完成后，把設計規(guī)約提前想好，那么設計規(guī)約要從哪些方面寫起呢？往往B端產(chǎn)品的頁面更加復雜，要補充的交互規(guī)約更多，小Zi就從實際工作中總結一些，供大家參考～

先來看個列子：

頁面

交互規(guī)約如下

一個頁面，交互和標注規(guī)則很長很長，很多同學反饋說不知道交互規(guī)約從何寫起，看了上面的列子，大概從以下幾個方面來書寫規(guī)約：

大方面我習慣于分成【整體】和【具體內(nèi)容】來寫。

整體

一、頁面自適應規(guī)則

首先從整體來考慮，首先要考慮頁面是如何布局的，是自適應？還是定寬？常用的網(wǎng)頁布局有：靜態(tài)布局、百分比布局、響應式布局；頁面的整體布局方式，也決定了頁面具體內(nèi)容規(guī)約的撰寫；

參考文章《3種常用網(wǎng)頁布局與設計注意點》：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html

二、滾動條/滾動區(qū)域

1.頁面整體滾動區(qū)域

滾動區(qū)域是從哪里開始？是頁面級滾動嗎？

2.滾動條的樣式

需要給出滾動條的視覺和交互

舉例：

三、初始狀態(tài)/空狀態(tài)

頁面“加載”是做設計時常常忽視掉的，因為大家肯定是重點考慮有內(nèi)容的情況，并且頁面數(shù)據(jù)是否需要加載、加載時長等等需要根據(jù)前后端接口返回情況確定。

1.補充初始狀態(tài)的頁面；初始頁面是骨架圖還是保持不變，是否添加頁面引導？等都是需要考慮的；

2.補充頁面數(shù)據(jù)為空的樣式；

舉例：

四、加載樣式

頁面級加載的樣式是什么樣的？也需要補充到設計稿中；

舉例：

五、其他特殊情況的處理

比如“無權限查看”“記錄已被刪除”“已被拉黑”等等情況；

舉例：

具體內(nèi)容

當補充完頁面整體上的規(guī)則之后，就可以著手補充頁面具體內(nèi)容的規(guī)約了。具體內(nèi)容的規(guī)則其實和整體規(guī)則從大方向是差不多的，也是那幾個方面，只是更細節(jié)：

一、考慮是否自適應，自適應的規(guī)則

如果頁面整體是定寬的，那么內(nèi)容也是定寬的，就不需要考慮內(nèi)容隨著頁面拉伸或縮小帶來的變化；如果頁面整體是自適應的，那么具體模塊可以根據(jù)功能需要來設置哪些區(qū)域自適應，自適應的規(guī)則是什么；

舉例：

二、考慮內(nèi)容過多時的樣式

B端產(chǎn)品設計場景更復雜，內(nèi)容更加不可控，再加上電腦屏幕大小適配，頁面寬度可自由拉伸，種種因素都要我們更加仔細的考慮頁面的各種極限值情況，如何寫全面設計規(guī)約是難點。相信在設計評審會上開發(fā)和測試最常問到的一個問題也是：這里內(nèi)容過多怎么展示？雖然我們在設計的時候是按照80%的場景去考慮，但是剩下20%的極限場景也需要我們給出設計規(guī)則。

內(nèi)容過多，具體劃分還可以分成以下幾類：文字過多、選項過多、彈窗內(nèi)容過多、按鈕/標簽過多、表格內(nèi)容過多、功能過多等等情況，每種情況下有哪些解決方式呢，可以參考文章《B端交互設計之內(nèi)容太多怎么辦》：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

舉例：

三、考慮極限情況下的提示/反饋

用戶反饋，頁面中肯定不少，我們畫頁面時也會畫出大部分提示，但是缺少提示/反饋依然是設計師常忽略的內(nèi)容，主要是提示的場景非常非常的多，而且有很多細分情況：

1.數(shù)據(jù)處理慢的提示

問題舉例:操作的數(shù)據(jù)過多時，后臺數(shù)據(jù)處理慢是否有提示？

2.操作后的提示

成功、失敗、進行中等，還有部分成功，部分失敗的情況

問題舉例:啟用失敗時如何提示？

3.無權限、禁用等的提示

問題舉例:項目列表-階段沒有權限時，需要添加tips提示；

4.缺少二次確認提示

問題舉例:新建頁面點擊取消是否需要二次確認提示?

四、考慮校驗的時機和樣式

1.校驗的時機：是失焦后還是提交按鈕時，還是實時的

問題舉例:表單的必填校驗，是失焦實時校驗，還是在提交時校驗？

 “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查全部輸入：

驗證消息顯示在靠近輸入的區(qū)域，并一起顯示；

2.校驗的樣式：是在下方出提示，還是全局提示，還是什么的；

舉例：

五、考慮是否缺少滾動條的樣式

不僅要考慮頁面整體的滾動區(qū)域，有些模塊也是單獨需要滾動的；

滾動區(qū)域是哪里？包不包括表頭？標題？有沒有內(nèi)容需要鎖定？滾動條的樣式？這些問題都要給出規(guī)則。

問題舉例:信息內(nèi)容過多時，容器內(nèi)展示不下怎么辦？--答：展示不下時容器內(nèi)出現(xiàn)滾動條，滾動區(qū)域是整個內(nèi)容區(qū)；

六、數(shù)字方面的問題

1.數(shù)字輸入超長的顯示

問題舉例：極限數(shù)字如何顯示，比如篩選結果超過三位數(shù)：999+

2.數(shù)值是0時，是否有特殊的規(guī)則

問題舉例：數(shù)值為0時，是否顯示此模塊？

3.是否有輸入限制，比如，限制正整數(shù)、小數(shù)，小數(shù)精確到幾位等等；

七、點擊熱區(qū)的范圍

我們一般默認熱區(qū)就是觸發(fā)控件的區(qū)域，但是有時可能視覺上圖標需要小一點的，但是熱區(qū)需要更大一點，就要特殊標注出來?？傊?，方便用戶操作為上。

舉例

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

什么是體驗可視化地圖

它們是一種體驗洞察和形成參考材料的工具，能夠幫助業(yè)務人員探討決策使用，它們都是結合真實用戶反饋形成的。另外這些地圖本身并不能直接提供答案，而是用于促進對話或作為決策導向，它能跨部門讓人們聚在一起討論業(yè)務目標，指出潛在的機會或達成一致的價值觀與目標，使解決方案更可行。即促進共同參與、共同思考、共同目標、共同發(fā)力。像心智模型、空間地圖、服務藍圖、用戶體驗地圖、客戶旅程地圖都屬于體驗可視化地圖，也有稱為對齊圖。

用戶畫像&用戶體驗地圖介紹

用戶畫像 本身可以反映出服務對象的特征，便于改進業(yè)務服務，幫助研究用戶需求或產(chǎn)品痛點，因此在一些體驗可視化地圖中會配合使用。并且可以幫助設計師指導產(chǎn)品功能、導航、交互、甚至視覺設計方面的決策，是一種聯(lián)系用戶訴求與設計方向的有效工具，總之它能讓你知道產(chǎn)品是給什么人用的，他們有什么特征或訴求。

用戶體驗地圖 以個體在某個產(chǎn)品或領域中的體驗經(jīng)歷為主，關注產(chǎn)品是如何契合個體用戶體驗的，通過用戶個體的行為觸點與視角來洞察商業(yè)機會。是一種比較視覺化、有助于引發(fā)共鳴和聚焦用戶體驗的工具，比較貼合情感化設計的理念，適用于洞察用戶視角下與產(chǎn)品系統(tǒng)交互的可視化地圖。

所以在作品集里經(jīng)?？匆娺@些體驗地圖就能夠理解了，一方面是作為戰(zhàn)略層的研究報告說明，用于佐證設計或決策的依據(jù)。另一方面是為了其他讀者達成共識，便于共情設計目標。當然豐富和美化作品集也是一方面，更多的則是希望不要濫用起來，形同虛設，成了一個沒有深入作用的裝飾工具。

兩者工具的差異與特性

用戶畫像的因素

用戶體驗地圖的因素

如何打通用戶畫像與用戶體驗地圖

方便直觀易懂的去解釋用戶畫像與用戶體驗地圖之間的關系作用，這里我通過流程、相互作用來解釋一下；

從流程上看

體驗地圖是基于用戶研究開展的，所以要考慮研究誰，研究什么問題，在什么場景或領域進行，因此就需要借助用戶畫像去界定范圍，以及形成用戶材料，再去考慮用何種體驗可視化地圖展現(xiàn)，而用戶畫像也將一直貫穿始終提供可參考的用戶信息；

相互作用上看

用戶體驗地圖一般都是聚焦于既定范圍的目標群體，一份完整的用戶體驗地圖應該包含用戶畫像信息，應交代清楚目標用戶的背景、場景、需求、痛點等關聯(lián)信息，方便讀者了解，以便于代入用戶視角深入到用戶體驗地圖的討論中。

而用戶畫像盡管提供了由外而內(nèi)的視角或部分設計見解，但并不能滿足項目多樣化視角的需求，且不足以形成一系列的設計見解洞察，所以用戶畫像始終需要與心智、情景、體驗地圖或研究報告等結合使用。也就是說用戶畫像需要與用戶體驗地圖配合輸出，兩者誰也替代不了誰。

體驗可視化工具的一般流程簡述

一個正式且有效的體驗可視化地圖一般必須經(jīng)過四個階段才能完成，最后再得出結論達成一致；

一、項目啟動；通過內(nèi)部識別或收集用戶反饋找到需求點，計劃研究目的，制定目標。

二、開始調(diào)研；通過研究手段向用戶收集優(yōu)化資料或數(shù)據(jù)，為創(chuàng)造體驗可視化地圖提供可靠的數(shù)據(jù)。

三、闡述分析；選擇闡述方式，通過體驗可視化地圖將研究結果與核心價值進行呈現(xiàn)，為后面探討做準備。

四、達成一致；使相關業(yè)務人員共同參與研討，結合地圖報告進一步的思考，指出潛在機會或達成一致的觀點。

五、展望未來；根據(jù)研討結果設計解決方案，提出價值主張，進一步跟進和實施起來。

真實應用中不用急著畫圖準備填充，先明確目標再從用戶研究或資料收集開始。如果沒辦法找到目標用戶進行訪談或測試研究，那么至少找到一線的人員進行訪談或測試，不要依賴自己的見解或認知套用，這些地圖的精髓在于打破內(nèi)部視角建立起一場具有包容性的對話，不同部門的參與者多多益善，所以這些地圖只是研討中心的參考物。

如何正確Get用戶原型與畫像

構建和使用畫像時大致可以分為兩類；

1. 根據(jù)用戶研究建立正式的用戶畫像

2. 建立人物角色原型

具體取決于用途與條件情況等，制作任何一組用戶畫像都非依托想象力，都是基于事實或用戶研究的。并且不只是簡單的人口數(shù)據(jù)或個人信息描述，如果一組不能達到共情效果的用戶畫像也就失去了核心價值《如何有效快速共情-點擊查看》，就像一份簡歷，沒能體現(xiàn)出個人能力與專業(yè)素養(yǎng)一樣。

人物角色原型

制作一個正式的用戶畫像是一個漫長的過程，還需要開展用戶研究，如果你沒有現(xiàn)成的調(diào)研對象或調(diào)研條件，你就可以采用人物角色原型，該方法是由《Lean UX》的作者Jeff Gothelf提出的，他描述到；

“人物角色原型是一個正式人物角色的變式，其最大不同在于人物角色原型不是用戶研究的結果，而是更多的源于頭腦風暴的結果。公司成員會從公司理念出發(fā)，基于自身領域的專業(yè)性和直覺，來明確誰是公司產(chǎn)品或服務的目標用戶，用戶的動機和需求是什么?！币篔eff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

這類角色原型不用花費大量時間去做用戶調(diào)研，它們是基于已知的特征情況或預期的目標用戶，適合臨時性使用，便于開展前期工作或達成一致的見解，但是人物角色原型并不能代替基于可靠數(shù)據(jù)的用戶畫像。

構建人物角色原型的方法

就是跨部門集體參與貢獻觀點與數(shù)據(jù)來構建。前線相關業(yè)務人員是必備的，人數(shù)控制在5-8個人就行，要有主持人把控節(jié)奏和參與度，盡可能收集到不同業(yè)務視角下的問題反饋，討論開始前可以提出一兩個角色原型來激發(fā)討論，然后充實起來，盡管最后可能形成了多個角色甚至有些看起來有沖突，不過沒關系，重點是讓這些人物角色清晰明確下來，不一致的地方可以進一步的討論。

人物角色原型的構成內(nèi)容

一般人物角色原型在一頁的篇幅內(nèi)就可以顯示完，主要五個板塊。值得注意的是，一定不要脫離了產(chǎn)品主題的范圍；

一、角色基本資料：角色頭像、姓名、頭銜、單位或一些可用的輔助資料。

二、人口統(tǒng)計特征：一般包含性別、年齡、職業(yè)、收入等與主題相關的人口統(tǒng)計指標（類似簡歷中的個人信息）。

三、心理統(tǒng)計特征：與主題相關聯(lián)的因素，主要指不可輕易觀察的心理活動、態(tài)度、信仰、動機、觀念的個人特征。

四、產(chǎn)品相關行為：指與產(chǎn)品體驗有主要關系的行為或是行動，包括興趣愛好、個人習慣、專業(yè)活動等。

五、需求與痛點：用戶有哪些與主題相關的需求或痛點，你的設計可以滿足用戶那些需求和痛點緩解。

用戶畫像

用戶畫像本身可以幫助發(fā)現(xiàn)問題或進行決策，同時也反應出了對用戶或用戶視角的共同理解，并且可以在日常研發(fā)工作中持續(xù)使用，例如一些材料歸檔、分享、更新、輔助其他可視化地圖等，以發(fā)揮出更多的余熱。

如何打造可用的用戶畫像

定性還是定量類型

根據(jù)產(chǎn)品需求選擇定性還是定量分析，亦或者結合，一般定性適用于用戶需求深挖或業(yè)務創(chuàng)新等情況，講究的是“為什么”，而定量更像是通過數(shù)據(jù)驗證“有多少”，常用于數(shù)據(jù)分析、趨勢分析、數(shù)據(jù)驗證、做精細化運營和用戶精準投放。  

定量需要足夠的數(shù)據(jù)支撐，如果項目需要畫像且企業(yè)不穩(wěn)定、用戶量級不夠不能滿足數(shù)據(jù)需求，則可以借助市場數(shù)據(jù)報告、白皮書、第三方數(shù)據(jù)服務平臺、調(diào)研服務公司等來參考，這些數(shù)據(jù)也都是可靠的。大數(shù)據(jù)殺熟就是數(shù)據(jù)畫像的反面引用，通過畫像對用戶進行分層，再挑出用戶中的軟柿子或老實人欺負。

識別用戶群體優(yōu)先級

對目標群體要有認知，要根據(jù)特征劃分層級或類型，例如典型用戶、潛力用戶、專家用戶。這些用戶的界定范圍需要業(yè)務相關人員去制定，類似一份簡歷我們可以根據(jù)能力對標級別，一般我們可以通過4個比較有影響力的指標進行劃分，至于權重我們可以采用常見的四象限或卡諾模型；

在制作用戶畫像前可以合理的根據(jù)人物角色原型的特征過濾目標用戶群體，但不要過分依賴，你只是需要找到符合的目標群體，而不是根據(jù)原型找到理想的那個人。

最終調(diào)研對象的關系表呈現(xiàn)；

定性類畫像不用邀請很多用戶參與研究，一般在5人左右，只有研究資源充沛時才會考慮邀請更多研究對象，一方面是研究發(fā)現(xiàn)5人左右就能反映出絕大多數(shù)問題了，另一方面是出于時間精力和預算情況考慮。

定性類用戶畫像要做什么

一、確認研究對象的優(yōu)先級，根據(jù)需求背景或目標確認重點跟次要群體來挖掘不同用戶視角下的問題；

二、通過線上招募(APP內(nèi)或相關平臺發(fā)布有償邀請，亦或者尋求第三方服務公司幫助)、客戶群(相關的用戶答疑群邀請)、論壇社區(qū)(發(fā)布招募帖子等)、專家咨詢、產(chǎn)品線上推送等方式，尋找目標群體并建立聯(lián)系；

三、選擇線上訪談、可用性測試、問卷調(diào)查、焦點小組等有效的用戶洞察方式，并設計好相關問題或材料準備與用戶進行深入研究(主要圍繞已知問題或新的設計方案驗證，再就是新的業(yè)務需求洞察為主)；

四、整理用戶資料，圍繞研究主題建立用戶畫像信息，完成主要信息模塊，可以根據(jù)業(yè)務需要，將用戶技術特征、職業(yè)特征、環(huán)境因素進行補充(需要考慮是否與業(yè)務有一定關聯(lián)或影響，否則無意義)；

五、完善用戶畫像的細節(jié)，將價值信息同步到畫像中，并對有效信息的細節(jié)進行補充，增加可信度還原真實性；

用戶畫像并沒有一個模版標準，具體還是要看業(yè)務需求，而且網(wǎng)上的模版挺多的，自己甄別吧。另外在用戶洞察的過程中，我們可以結合可用性測試、繪制故事板（這兩種研究方法有興趣可以查閱資料，一兩句講不清楚，有機會展開講）等方式一同進行，而不只是把目的停留在建立用戶畫像上，這樣反而獲取的有效信息受限了。

定量類用戶畫像要做什么

一、數(shù)據(jù)采集

通過有效途徑將用戶產(chǎn)生的數(shù)據(jù)集中，不論是產(chǎn)品數(shù)據(jù)庫、數(shù)據(jù)埋點、第三方數(shù)據(jù)統(tǒng)計或是定量調(diào)研的結果，這些數(shù)據(jù)都是重要構成部分，同時也決定了信息的范圍，比如你拿不到用戶的出行數(shù)據(jù)，那么就根本沒辦法構建相關標簽或指標。

二、數(shù)據(jù)定義

對數(shù)據(jù)進行清洗整理，識別出用戶行為數(shù)據(jù)、用戶偏好、生命周期等數(shù)據(jù)，并進行標簽化分類整理，這些標簽或指標可以體現(xiàn)出某些維度的趨勢或用戶行為預測。不過值得注意的是，在構建這些標簽或指標時盡量結合業(yè)務流程或生命周期來梳理，考慮畫像建成目的與業(yè)務場景同時，也要思考標簽的權重問題，標簽不等于越多越好。 

三、構建畫像

根據(jù)產(chǎn)品階段或業(yè)務需要，把相關業(yè)務標簽結合用戶群特征信息整合成用戶畫像，一般的業(yè)務標簽類型有增長策略、用戶偏好、用戶價值、營銷觸點等，這類畫像可以包攬多個維度信息，還能對周期數(shù)據(jù)可視化顯現(xiàn)趨勢變化，但是在用戶痛點或需求上，可能不會很直觀，需要進一步的結合用戶場景帶入思考。

通?；ヂ?lián)網(wǎng)產(chǎn)品前期，沒有構建標簽或數(shù)字畫像的經(jīng)驗，可以考慮讓團隊引入相關第三方數(shù)據(jù)畫像服務，它們可以更便捷的接入到你的產(chǎn)品中并幫助你打標簽做統(tǒng)計；

以下截圖來自第三方大數(shù)據(jù)畫像工具(神策)

*第三方數(shù)據(jù)分析輔助產(chǎn)品也不少，這里只做交流使用

如何讓畫像角色更生動

畫像中的角色應該更加生動，能夠讓我們感受到真實的存在，只有這樣才能產(chǎn)生共鳴，賦予畫像價值，為此我們可以通過控制以下六點來做的更好。

一、不要特殊化

特殊能加深印象，但是特殊化并不代表產(chǎn)品的典型群體，同時在實際應用時容易擾亂共情或分散注意力，例如用戶群體是普通青年，就不要描述成一個帥氣的學霸，也不要為用戶添加一些奇怪的癖好，這些不相干的信息并不能讓畫像更加生動；

二、合理應用頭像

通常作品集中的頭像都比較美觀個性，這沒事兒。但實際畫像應用中，頭像也是很重要的一部分，會馬上映入眼簾，這些頭像不要使知名人群的，且貼合真實用戶標簽，不用暴露性感或是丑陋異樣的，也不要使用插畫、卡通、3D形象，不要有奇怪或不自然的行為動作。

三、充實細節(jié)

以一款線上教育產(chǎn)品作為背景，舉例原本我們的用戶信息寫到：

那么即可根據(jù)產(chǎn)品屬性結合實際情況進行豐富補充，例如調(diào)整為以下描述；

雖然沒有過大的變化，但是已經(jīng)將貼合教育產(chǎn)品的地域信息、課程階段、收入情況進行了完善刻畫；

接著再例如，虞溪女士的需求寫到；

簡單來看確實是透出了線上教育產(chǎn)品的需求，但是需求并不深刻，也沒有刻畫出虞溪女士的核心訴求，為此我們可以結合創(chuàng)造情景故事的方法，融合角色、場景、行動、事件、評價、情節(jié)這些元素去深度刻畫描述，例如以下調(diào)整；

結合創(chuàng)造情景故事的辦法是為了刻畫出更多細節(jié)，不僅可以讓瀏覽者更好的沉浸在角色視角，也能在完善的過程中深挖出更多有價值的思考；

四、創(chuàng)造情景故事

情景故事不會很枯燥會更抓人心，能夠傳達更多信息的同時，將產(chǎn)品信息與真實情景交融在一起，方便團隊記憶理解以及更好的促進討論。創(chuàng)造情景故事的元素通常有：角色、場景、行動、事件、評價、情節(jié)?？雌饋砭拖袷窃诿枋觥拔遗cxx產(chǎn)品的一天”。

1. 角色：故事的主人翁或是參與者，不可缺少的重要部分；

2. 場景：故事發(fā)生的時間地點物理環(huán)境，例如早上八點半我在擁擠的地鐵上搶到了座椅，并打開了手機；

1. 行動：能夠觀察到且與主題有影響的行為動作，例如我被這個問題難住了，解鎖手機并打開了這個APP；

2. 事件：發(fā)生了什么事兒，角色間做出了什么反應產(chǎn)生了何種結果；

1. 評論：角色怎樣評估并作出決策，有了怎樣的目標，并如何進行下一步。其中任務目標是驅(qū)動的核心；

2. 情節(jié)：一系列行為與事件的演變過程再到結果，從問題的發(fā)生到角色推進目標到結局。例如經(jīng)典的戲劇結構：

*創(chuàng)造情景故事是要花費時間精力的，如果時間充裕你可以慢慢將相關描述進行轉(zhuǎn)換，時間有限責挑取重點轉(zhuǎn)化；

五、不要孤立使用畫像

在前文就有描述到畫像需要配合其他體驗可視化地圖一起才能更好的發(fā)揮效用，畫像通常始終保持著個體視角，而且沒有辦法傳達一系列完整的體驗報告，所以為了更好的滿足項目多樣化視角的需求，盡量不要孤立的使用畫像。

六、定期更新

產(chǎn)品發(fā)展中，會經(jīng)歷不同的階段與市場變化，用戶群體自然會變。如果說產(chǎn)品在研發(fā)新的功能去開拓年輕化的市場，那同樣意味著目標群體趨向年輕群體，這種時候就需要變更或新增用戶畫像，就不要使用舊的畫像起步了。

基本上做好以上細節(jié)，你的用戶畫像就大功告成了，這就像是結合STAR法則優(yōu)化項目經(jīng)歷一樣。最簡單的標準就是業(yè)務人員能夠去理解這些角色并代入角色視角思考，可以有效共情或決策。

如何用好用戶體驗地圖

首先我們回顧一下用戶體驗地圖的關鍵詞：既定的用戶群體、應用場景或領域，用戶以某個持續(xù)性目標驅(qū)動與你的產(chǎn)品或服務發(fā)生交互，并且涉及多個階段來實現(xiàn)目標，地圖會通過由外而內(nèi)的視角洞察產(chǎn)品服務是否契合用戶的體驗。

由此可見在與用戶研討時，我們的問題或測試任務應該覆蓋相關階段或重要的任務流程，以此來獲取體驗地圖的相關重點信息。另外很多產(chǎn)品比較龐大，服務頗多，因此控制好體驗的階段范圍也很重要，不僅會拉長工期也會使得焦點分散。

用戶體驗地圖的構成簡述

用戶體驗地圖主要包含三個層面的內(nèi)容，一、用戶目標階段，二、用戶與產(chǎn)品服務交互，三、痛點機會洞察；

其實礙于不同產(chǎn)品和服務類型，體驗地圖的構成元素也有差異，不過在漫長的應用發(fā)展中也逐步趨于穩(wěn)定。

常見的構成元素：

一、用戶需求或目標：
在體驗地圖中，用戶以需求或目標驅(qū)動與產(chǎn)品發(fā)生交互，需求或目標既定了要做什么，應該需要什么服務。

二、行為階段：

行為階段是界定場景的重要部分，以目標任務階段的生命周期或者關鍵節(jié)點展開，不一定所有階段托盤而出，階段太多則不聚焦，細分太多則費時間也不一定快速見效。

三、采取的行為觸點或步驟：

用戶使用產(chǎn)品或服務展開的行為或接觸的設備、泛功能應用等。

四、想法與問題：

在體驗服務的過程中出現(xiàn)的問題或是一些真實的想法感受。

五、情緒波動與精神狀態(tài)：

情緒和精神狀態(tài)通常是反映服務好壞或用戶滿意度的重要因素，但同時也難以觀察或量化，通常會根據(jù)用戶對問題的描述來共情情緒，亦或者向用戶提供情緒表情標簽。

六、痛點或機會揭示：

結合上層階段行為與用戶的反饋信息向下垂直洞察產(chǎn)品服務的痛點或機會。

七、設備或其他圖例補充：

例如跨端跨設備或包含特殊標簽信息的補充說明。

*示例模版

用戶情緒板怎么用才對

表情包早已成為網(wǎng)友互動和情緒表達的重要部分，但是在實際的可用性測試或訪談中，用戶會相對拘束一些，也不會把各種各樣的表情掛在臉上，所以才說用戶情緒很難研究和洞察，更別說量化執(zhí)行了。有些人可以進行表情管理，情緒更是難以琢磨；

那么體驗地圖中的情緒板怎么搞定呢？

就用戶體驗地圖中的情緒塊來講，通常一定不只是表情icon來做表達，這樣費解還缺乏實際價值，所以一定會加上相關描述來揭示用戶情緒與觀點。心智模型中用戶情緒感受便是靠的文本描述來傳達。

早期Pieter·Desmet在其《Designing Emotions》一書中提出了如何衡量情緒的研發(fā)方法，他開發(fā)了一款叫做產(chǎn)品情緒度量儀的工具，其原理就是為用戶提供各種表情表達的卡通形象，用戶在體驗過程中根據(jù)自己情緒選出最匹配的那個卡通形象來示意自己情緒。這個工具經(jīng)過不斷迭代并豐富聲音后已授權到：https://www.premotool.com/，我們可以在度量用戶情緒或其他體驗可視化地圖中配合使用。 

另外在使用表情標簽應用時，并不大推薦常見的微信表情、QQ表情等，這些表情在長時間的使用中，用戶都會形成一些偏好，這會影響使用決策

在服務體驗的過程中，很多時候情緒變化并非是單一線型上起伏變，例如：

我在觀看電影高潮的部分突然網(wǎng)絡異常，那么我的情緒應該是多樣化的，一邊是代入高潮部分的激動，另一方面是網(wǎng)絡帶來的失落感，同時還有等待網(wǎng)絡恢復的焦急。

為此我們通常有兩種方法來傳遞情緒變化；

1、將喜、怒、哀、樂、悲、恐、驚或需要的情緒標簽化，每種情緒用一個顏色表示，然后使用同軸的趨勢圖結合用戶行為階段來表示；

2、即使一次展示多種情緒，也難免有積極情緒與消極情緒同時出現(xiàn)的情況，這種時候可以圍繞一條分界線劃分兩類情緒區(qū)間，使用情緒曲線結合關鍵因素描述來顯示更加全面而復雜的情緒心理，對應每個關鍵情緒節(jié)點可以使用不同表情圖標細化輔助，使得情緒起伏的信息更充實有價值；

怎樣完善用戶體驗地圖

1、建立正確的項目目標是第一步，用戶體驗地圖的優(yōu)勢與作用都有在前面講過(如果忘了可以在“兩者工具的差異與特性”中開始回顧)，使用用戶體驗地圖是有目的性地，它不是優(yōu)化體驗的萬金油，通常都是收集用戶反饋知道某一些階段或環(huán)節(jié)存在問題，而建立優(yōu)化目標開展的工作；

2、鎖定存在問題的階段，建立用戶問卷、焦點小組或用戶測試進行聚焦研究，嘗試收集用戶的意見或優(yōu)化方案；

3、通過白板或線上協(xié)作工具建立簡易的用戶體驗地圖框架，并將研究用戶的畫像信息與碎片信息填入地圖。白板共創(chuàng)的辦法其實就是根據(jù)用戶體驗地圖的框架，結合用戶視角將自己的觀點寫到便簽貼到對應的區(qū)域，避免你一句我一句難以記載和整理；

4、關注每個階段的過渡，通常問題很容易出現(xiàn)在這些地方，例如付費前到付費后階段，如何進入后者階段就成了關鍵點，另外沒啥優(yōu)化空間或體驗良好的階段可以折疊起來留出更多空間關注核心；

5、用戶體驗地圖的畫龍點睛之處在于跨部門協(xié)作完成，而不是閉門造車，邀請一兩個其他部門的人說明要求和完善地圖并不是什么難事，只有這樣最后的結果才能達成戰(zhàn)略一致，而不是自己繪制完后要求其他人被動接受結果；

檢驗用戶體驗地圖的標準

一、首先看你是否與用戶建立聯(lián)系，用戶體驗地圖的個體對象是用戶不是你自己，盡可能的獲取真實的用戶的信息。

二、一個產(chǎn)品運作是需要多個部門協(xié)作的，所以至少要有三個不同部門的人員參與進來。

三、協(xié)作完成用戶體驗地圖和達成共識后，你會驚奇的發(fā)現(xiàn)問題如何解決，各個部門該怎么配合實現(xiàn)都清晰明朗了。

前一陣子跟UXren社區(qū)主理人寶珠老哥討論過，就如截圖所示，更重要的是將企業(yè)各部門協(xié)同在一起，達成一致的戰(zhàn)略目標，共同參與探討出解決方向為業(yè)務賦能，這才是體驗地圖的精髓所在。

什么是觸點模版工具

用戶體驗地圖通常包含了一系列階段，而每一個階段都會由多個觸點編排成一段微型體驗，而觸點模板工具將會很好的為你建立和打開一片微型的體驗模型，這種模型是由羅伯特·羅斯曼(j·Robert·Rossman)[美]與馬修·迪尤爾登(Mathew D·Duerden)[美]在《最佳體驗》中提出的一種體驗洞察工具，它可以很好的結合體驗地圖去進一步的深挖某段流程或階段里需要優(yōu)化的體驗，它們之間的關系就像一條路線圖與一份詳細的指引說明。當你完成某個觸點模版時，你會對該觸點上的體驗設計有清晰的認識，并且會形成一份書面報告與執(zhí)行團隊共享和交流，觸點模板可以很好的解釋體驗是如何設計的，并且將相關執(zhí)行團隊的角色聯(lián)系在一起，這不是噱頭，你可以根據(jù)后文指引進行嘗試。

體驗類型的框架

體驗是復雜的，在用戶觸點模版工具中，體驗被劃分為平淡的、專心的、難忘的、有意義、革新性五種類型，并且它們具有連續(xù)性，是通過關鍵特征與關鍵屬性定義出來的，它們結合了心理學理論基礎，目的是方便更好的理解體驗，并在設計實踐中起到指引作用促進交流，因此我們在設計時也應該對用戶體驗結果有意向性的去設計，框架如圖；

*關于參與感的兩種系統(tǒng)思維是兩種不同的思維狀態(tài)，系統(tǒng)1更像是慣性思維，憑借認知或經(jīng)驗更加快速和自動化的思考，而系統(tǒng)2就會開始更主動的更深入的進行思考，參與階段越高思維越深思。

而三個階段分別是；

一、接受：個體意識到和接受體驗過程中正在發(fā)生的事情。

二、思考->處理->計劃：個體開始積極的思考體驗，并對正在進行中的事物做出處理與反應，同時可能開始計劃各種應對方案。

三、行動：深入的參與到體驗中并引入新的觸點和元素來維持互動，從而共同創(chuàng)造體驗，例如《魷魚游戲》上映后，影片中的“扣糖餅”又帶火了糖餅。

當新的事物被第三階段引入后，又會重新開始接受并循環(huán)，不過這并不代表所有的體驗都能夠完整經(jīng)歷這三個階段。

觸點模板框架

觸點是用戶進行交互的重要部分，其周期可長可短，會產(chǎn)生不同感受，而一系列的心理感受會促成最終階段或完整的體驗。觸點模版由11個部分組成，它們互相作用指導和揭示體驗設計的方向與細節(jié)，并把設計結果引向預期的體驗方向。

抬頭信息

• 編號：對應到體驗地圖的階段編號或是觸點編號，隨著觸點設計逐步完善，對應的位置可能會發(fā)生轉(zhuǎn)移。

• 標題：對應該觸點模版主題的標題或是任務觸點的名字。

• 體驗類型：觸點的體驗類型或整體的體驗目標，從平淡的到革新性的五個體驗類型。

• 期望的反應：我們把期望的反應視為觸點預期結果的北極星指標，它可以是多個。我們通過用戶反應逐步提煉出預期的結果供予用戶體驗，例如期望的反應是笑容，那么我就可以提煉出“講個笑話、開黑游戲”等可以促成反應的體驗結果，同時期待的反應應該盡可能的傳遞用戶價值。

核心組成部分

• 期望的結果：根據(jù)期望的反應，我們要提供給用戶哪些體驗來實現(xiàn)。同時期望的結果應該跟類型相匹配。一般我們可以根據(jù) “1. 產(chǎn)生積極情緒、2. 吸引注意力、3. 幫助發(fā)展和加強關系、4. 從更宏大的視角給人來帶意義、5. 提升能力、6. 孤立自由選擇” 這些類型內(nèi)容作為起點，并根據(jù)體驗項目的情況細化，例如“心情低落想要刷刷手機產(chǎn)生積極情緒”Change“在App上刷會兒短視頻，看點有趣搞笑的段子來緩解下低落的情緒”。

• 體驗場景元素：觸點模板工具沒有特定的行業(yè)或業(yè)務模式，因此這些元素根據(jù)需要完善即可。而實際的元素應用中也會有不同的權重，注意重點元素的設計應用。

• 互動設計：可以是人與人互動、人機交互或更為復雜的互動，就是有意向性的將元素進行編排與用戶產(chǎn)生互動獲取必要的信息或傳遞。

• 貢獻者：整個體驗階段中，可見的幕前服務人員與后臺的服務員，他們是組成完整體驗的重要部分，例如餐飲店的服務員與傳菜員就是可見的幕前服務貢獻者，而廚師們就是幕后的貢獻者。

• 共同創(chuàng)造：共同創(chuàng)造和可供性是促進用戶參與的兩個重要的方法，并且參與度有高有低。好的體驗更多是與用戶共同創(chuàng)造的，建立合適的觸點與用戶共同創(chuàng)造體驗是重要的！以微信的“拍一拍”來看就是個很好的例子，拍一拍功能本身是加強了微信聊天的可供性，給用戶提供了更多的互動可能，同時用戶可以自己編輯被拍以后的文本，加強了體驗的趣味性，這便是共同創(chuàng)造的過程?？晒┬詾橛脩籼峁└嗷芋w驗的可能，而共同創(chuàng)造為用戶提供DIY的空間。

• 優(yōu)化：對觸點進一步的優(yōu)化，加深體驗感受。一般分成了兩大類型，一類是技術優(yōu)化、一類是藝術優(yōu)化。例如讓一個App加載短視頻更快更流暢，這就是技術型優(yōu)化，如果為一個服務器未響應的404界面配上緩解焦慮的插圖，這便是藝術型優(yōu)化。

• 過渡：觸點與觸點之間的過渡可能波動、異常、緩慢、復雜等，如何引導用戶正常的過渡到下一個觸點也是重要的一部分，它可以是自動化的隱式過渡也可以是引導性的顯式過渡，就像是安全通道的指示燈一樣將用戶從一個地點帶往另一個地點。

*觸點模版（可直接下載原圖進行打印使用）

如何構建一個觸點模版

通過一段音頻聊天室互動體驗之旅來揭示觸點模版用法與效果，音頻聊天室大家應該都熟悉了，這里就不聚焦用戶畫像與用戶體驗地圖了，觸點發(fā)生在用戶第一次進入歌廳音頻房間，那么應該怎么設計體驗來為用戶留下好印象呢？

觸點是發(fā)生在注冊后的第二個階段，即首頁房間列表(編號A02)，完成注冊階段后見到的第一個界面。標題則暫定為“一次非凡的音頻互動之旅”，我們希望新用戶在選擇好一個房間進入后能夠有一次愉悅難忘的體驗經(jīng)歷，而相應的期待反應則是“有人帶我玩真棒！這個聲音我好喜歡，下次還來找Ta們”。體驗類型則希望是從平淡的體驗類型升華到難忘的。

其中體驗場景除了設備自身與軟件環(huán)境，更多真實的環(huán)境因素碰撞我們無法預測和控制，因此僅鎖定軟件自身的場景元素?；釉O計則是關鍵，軟件本身更多是工具支持，我們需要利用好運營資源跟用戶產(chǎn)生互動來促成體驗結果，這里我們會根據(jù)技術可行性優(yōu)先考慮能為用戶提供的體驗結果，再到互動設計部分。其次就是過渡部分，預期的過渡觸點實際上會有多個方向，我們優(yōu)先以充值消費作為一個觸點(轉(zhuǎn)化)、私信關注為另一個觸點(形成互動聯(lián)系方式)，完善后的觸點模版如圖；

在該觸點模版中，主要揭示了如何為用戶打造理想的體驗之旅，不僅涉及到運營方法也包含了軟件的重點優(yōu)化部分，它很好的展示了如何通過角色之間在軟件中的互動來促成體驗與商業(yè)價值，當你把這份資料在團隊里分享后，完全可以清晰的對體驗設想進行解釋，以促進團隊內(nèi)的深入討論與細節(jié)推進。至于相關功能的細節(jié)推敲同樣可以采用觸點模版繼續(xù)深入。

接著A02觸點模版中提到的標簽體系優(yōu)化，我們再一次的結合觸點模版進行標簽的體驗設計，編號設定為“A03”，這是一個泛觸點，它涉及到用戶注冊進入時、房間互動、系統(tǒng)消息、消費與充值、裝扮標簽的著落頁，但歸根還是在應用內(nèi)。標題為“讓標簽為用戶賦能意想不到的體驗”，在這段泛觸點中我們期望圍繞標簽為用戶打造難忘的體驗，讓標簽產(chǎn)生更多的價值與業(yè)務轉(zhuǎn)換，經(jīng)過初步的體驗設計后，新的觸點模版如下；

在這個觸點模版上我們對標簽的作用價值進行了定義，并對功能及業(yè)務流程上進行了設想，已經(jīng)初步的形成了標簽體驗的設計，接下來只要將裝扮標簽的著陸頁與房間內(nèi)的應用進行完善設計，在輔以條件判斷與消息通知打通閉環(huán)就算是完成主要工作了，再此后的內(nèi)容你是繼續(xù)用觸點模版還是設計交互原型都是可以的，至少目標是明確的。相信寫到這里，觸點模版的應用與功效你已經(jīng)一目了然了。

觸點模版小結

觸點模版的板塊跟信息維度較多，但是考慮到觸點或項目的實際情況，模板內(nèi)的信息填充不用完整。并且它的確可以很好的將體驗設計的思路整理出來并形成材料分享，對于多個觸點只需要根據(jù)體驗地圖上的順序打上編號后，即可將多個觸點模版的關系連接起來，你可以將打印填充后的模版依次排列或張貼在白板上的體驗地圖上。

觸點模版就像是一份交互自檢表，它從多個維度去考慮和解釋了觸點體驗的設計，盡管沒有勾畫出詳細的設計細節(jié)，但是體驗設計思路與執(zhí)行團隊的任務已經(jīng)很明確了。

另外完成觸點模版時，并非是要按照模版里的板塊順序作業(yè)，比如有時候我們是根據(jù)體驗結果考慮運用哪些體驗場景，如果有固定的場景，那么你就可以根據(jù)場景情況開始考慮，一般更傾向于先設定體驗結果進行倒推。再就前面啰嗦過的，我們根據(jù)項目情況完善需要的模塊即可。

服務藍圖介紹

更完整的服務流程可視化工具，可以結合用戶體驗地圖對服務流程進行優(yōu)化或調(diào)整，相比傳統(tǒng)的業(yè)務流程圖，它在用戶角色關系與前后端分離上有明顯優(yōu)勢。是一種服務可視化的工具，利于讓產(chǎn)品保持精益（識別價值點、優(yōu)化流程）

多角色的引入，雖然使得藍圖更加復雜，但是能夠反映出更多角色的交互與流程關系。

服務藍圖的因素：

服務藍圖的構建元素：

結語

客觀來講，這些體驗地圖時常保持爭議，特別是逐步大范圍在業(yè)內(nèi)曝光后，形式化、假把式、濫用等標簽也愈發(fā)明顯吶，這些體驗洞察工具并不總是能夠在項目中發(fā)揮預期作用，它們也需要區(qū)分使用場景跟項目需求情況，如果你沒有嘗試過，可以積極引用，當你熟悉應用后你會發(fā)現(xiàn)收獲更多的是一種體驗設計的思維，一旦需求或痛點擺到面前時不再像一只無頭蒼蠅。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

寫在前面

今年的“雙十一”，朋友圈異常安靜，沒有了以前電商活動的氛圍，沒有漂亮的數(shù)據(jù)，沒有曬圖，有人說是用戶消費疲軟了？數(shù)據(jù)不會騙人，今年”雙十一”一天的GMV還是比去年高了將近500億，而且一大波尾款人在11月1日就已經(jīng)結束。再加上直播電商，用戶購買渠道變多了。李佳琦直播帶貨一晚就超100億的GMV，說明用戶的消費意愿和消費力還是很強的。算一下，50個李佳琦直播一晚上就能抵上“雙十一”一整天的GMV，有點厲害。中國偉大復興的道路還在繼續(xù)，隨著人民生活水平的提高，文化素養(yǎng)提高，互聯(lián)網(wǎng)普及，消費力只會增不會減，只是戰(zhàn)場在變化。

前些日子發(fā)了PP微助手的優(yōu)化作品，本篇將結合改版思路和最近對互聯(lián)網(wǎng)設計行業(yè)的思考進行一些分享，希望對大家有一定的幫助，歡迎大家來指正吐槽~

點擊可以查看   PP微助手改版優(yōu)化

流量變“留量”

互聯(lián)網(wǎng)產(chǎn)品最重要的就是流量，沒有流量，就算產(chǎn)品設計的再好，早晚也會運營不下去?？v觀這些年移動互聯(lián)網(wǎng)的發(fā)展，市場已經(jīng)被分割的差不多了，各個行業(yè)都有龍頭企業(yè)（社交：微信、購物：京東淘寶、出行：滴滴哈羅、外賣：餓了么美團、旅游：攜程等等），各大互聯(lián)網(wǎng)公司業(yè)務也趨于穩(wěn)定，紅利期已經(jīng)過去，流量市場已經(jīng)變成了“留量”市場。就像淘寶這種大流量的產(chǎn)品，也在吃流量老本。

回歸到設計，在互聯(lián)網(wǎng)公司做設計，一直在強調(diào)需要有產(chǎn)品思維、用戶思維，然而在“留量”的時代，更需要我們具有運營思維，同行業(yè)的業(yè)務趨同、需求趨同，可挖掘的需求少之又少，可以打開同一行業(yè)的各類app一看，就知道產(chǎn)品形態(tài)大同小異。所以只能在“留量”里下功夫，既要減少存量用戶的流失，還要在這基礎上讓存量用戶創(chuàng)造更大的價值。必然，我們在做設計改版的時候就需要結合一些運營知識。

曝光

“曝光”一詞相信大家都聽過，在拍照時，“曝光”時間越長，照片細節(jié)就越豐富，當然過度“曝光”，也會讓照片失真。在運營一個互聯(lián)網(wǎng)產(chǎn)品時，也需要用到“曝光”，這里的“曝光”是指產(chǎn)品內(nèi)容的“曝光”。

用戶在進入某款產(chǎn)品的時候，都是帶有一定目的性，通常情況都會經(jīng)歷三步操作，從看見內(nèi)容，到與產(chǎn)品互動，最后得到想要的結果。

這里的“看見”，就要說到產(chǎn)品承載信息的曝光，合理的信息曝光才能更精準快速的觸達用戶。同時，運營同學最關心的數(shù)據(jù)和流量，也是需要安排合理的信息曝光才能有有效的數(shù)據(jù)和流量。在手機這么一小塊屏幕想把所有內(nèi)容都曝光出來，是不太現(xiàn)實的，就算能，也不合理。把過多的信息一下子全部曝光給用戶，效果反而會很差。通常做法就是對頁面進行樓層的分割，流量進行合理的分發(fā)。大流量的產(chǎn)品，每個樓層都需要單獨部門去運營的，這樣就會出現(xiàn)業(yè)務主次和優(yōu)先級，不然各部門就會為了爭奪"屏幕地盤"，無限撕逼。

作為設計師，就需要和運營部門做好以下確認：

1、樓層怎么分割，哪些樓層是產(chǎn)品部門控制，哪些樓層是運營部門控制，每個樓層顯示哪些內(nèi)容，設計師需要根據(jù)每個樓層的重要性，去定義屏占比

2、哪些模塊需要首屏曝光，哪些是需要第二屏曝光，依此類推，這個至關重要，設計師就要考慮各類機型適配問題，比如iPhoneX一屏能顯示下的內(nèi)容，在其他手機未必能顯出來，這樣會直接影響曝光，導致數(shù)據(jù)不好（等著背鍋吧～），嚴格來講要根據(jù)實際用戶使用機型占比去定義首屏顯示的內(nèi)容。

3、每個模塊內(nèi)容的信息層級，明確信息優(yōu)先級才能結果為導向去做交互布局和視覺呈現(xiàn)，這時候就是你發(fā)揮的時候，對比、親密關系、留白等等，都可以上了。

這里結合PP微助手的一些改版優(yōu)化（非全套），分享一些改版思路。

PP微助手改版思路解析

項目背景：PP微助手是取代電視遙控器一部分功能開發(fā)的一款小程序，核心需求有幾點

1、賬號統(tǒng)一，PPTV時代的用戶，大多都是使用的PPTV的賬號，為了方便管理蘇寧易購賬號體系，會引流把PPTV尚未升級的賬戶統(tǒng)一升級合并至蘇寧易購賬號。

2、投屏功能，看影片終端還是以電視機為主，所以只做投屏，不做在線播放功能

3、智能語音，結合蘇寧小biu智能語音系統(tǒng)，可以和電視機語音互動，實現(xiàn)交互功能

4、會員業(yè)務，移動端開通會員比電視端更方便，同時可以用一些運營手段促進用戶開通會員

5、推送活動，電視機打開頻次不如移動端，推送活動給用戶，移動端可以實時看到

電商行業(yè)通常會把用戶分成“大明”、“笨笨”、“小閑”三大類用戶，在視頻類產(chǎn)品，絕大多數(shù)用戶都是“小閑”用戶，來平臺都是找樂子打發(fā)時間的。

思路一：架構改變（產(chǎn)品思維）：

PP微助手本來就是輔助電視機的，用戶覺得用遙控器操作麻煩才會選擇用小程序操作。在設計的時候，把用戶當成是一個并不想動腦子并且很懶的傻子，產(chǎn)品設計越簡單越好，否則用戶干嘛要用小程序，遙控器挺好的，遙控器的大多交互都已經(jīng)習慣，也沒啥學習成本。

從用戶角度分析，進入小程序無非就是找片源、看片以及看片過程中的一些基礎控制操作（播放、暫停、快進等等），所以簡化了產(chǎn)品整體框架，從原來底部5個tab（首頁、片庫、遙控、搜索、我的），改為3個tab（首頁、遙控、我的）。產(chǎn)品呈現(xiàn)給用戶的樣貌更加簡單直觀，也相應的培養(yǎng)了用戶心智，讓用戶對PP微助手這款小程序有個基本定位。

思路二：樓層分割（運營思維）：

首頁改版前，按照iPhoneX的尺寸，首頁第一屏也就曝光了3個分類，而且下滑到底總共也就幾個分類，片源的曝光度不高，banner呈現(xiàn)也相對普通，就是那種正常電商類頭部banner。同時交互成本也高，要點擊“更多”才能看該分類影片的全部列表，要知道多一步操作就會多損失一部分用戶轉(zhuǎn)化。

改版后，針對第一樓層推薦影片采用電影宣傳時的大海報樣式，視覺焦點更強烈，同時曝光也更強烈一些，你去電影院的時候，看到的電影宣傳海報，大多都是這類豎版的，用戶已經(jīng)有一定的心智模型，所以在這里采用豎版更為好一些。這些推薦影片在這里也作為“hook”，后面會講。當然像電商類產(chǎn)品，首頁需要考慮嚴謹?shù)钠琳急?，這類尺寸肯定不合適。

第二樓層是影片的分類，采用文字tab左右滑動的方式，這種分類方式雖然沒啥設計感，也普普通通，但是在一個分類眾多的產(chǎn)品里，這種處理方法相當不錯。減小了樓層的沖突，也提高了內(nèi)容的曝光。像騰訊視頻、愛奇藝、優(yōu)酷，分類tab都是吸頂固定的，很直觀的傳達給用戶影片信息。下拉的時候，這里采用feed流，用戶在交互習慣上，連續(xù)操作時，對同一種交互會有慣性和依賴，上滑時查看更多影片，能滿足用戶的預期，也不會因為調(diào)整新的交互（上述的點擊跳轉(zhuǎn)查看更多）方式讓用戶反感。在視覺形式上，采用了橫版的樣式，是為了和第一樓層形成對比，也是為了節(jié)省屏幕空間，能曝光更多的內(nèi)容。二樓的影片內(nèi)容也可以分布一些“hook”

搜索也是一種用戶找片源的方式，后面再講，這里要考慮到流量分發(fā)的情況。

思路三：引導用戶（運維思維）

按照福格模型B=MAT，完成行為的三要素：動機、能力和觸發(fā)器。

用戶進了影片詳情，說明已經(jīng)有動機了，這時候需要抓住機會，按照產(chǎn)品需求可以完成兩個行為目的，一個是讓PPTV賬號升級成蘇寧易購賬號，二是轉(zhuǎn)化成會員用戶。

這里要看一下進入詳情的數(shù)據(jù)，是“hook”進來的用戶多還是非“hook”進來的用戶多。如果是“hook”進來的多，說明用戶主觀意愿不是很強，這部分用戶可能會流失，如果是非“hook”或者搜索進來的更多，說明平臺用戶主觀意愿更強，有較高的粘性，更容易促進會員的轉(zhuǎn)化。

對平臺來說，希望用戶進來完成兩條路徑：

1、未登錄的用戶，點“推送”和“開通會員”按鈕，進入下一步登錄或者升級賬號流程。當然這一步會流失用戶，部分用戶會反感登錄這種操作。

2、已登錄的用戶，可以快速推送影片，完成自己的看片目的，如果是會員影片，這里就需要用戶先開通會員，當然只是引導，還會有一部分用戶不想開通會員，選擇離開。

防止用戶過多的流失，就需要平臺一定的干涉，加強登錄或者開通會員的意愿，可以從以下幾點入手：

1、沉浸式體驗，進入詳情，頭部區(qū)域自動播放影片花絮或者預告，快速讓抓取用戶眼球，增加下一步操作的意愿。

2、醒目的豆瓣評分，“hook”影片選擇一些評分高的，用戶針對豆瓣評分已經(jīng)有一定的認知，評分優(yōu)質(zhì)的影片，用戶更有意愿觀看，更容易促進下一步動作，提高會員的轉(zhuǎn)化率。

3、各類標簽，比如：首播、獨家、會員免費、會員半價、4K高清等等，能清晰定位影片，捕捉各類用戶看片心智。

4、會員相關信息展示，未登錄的提示“登錄領券、限時活動等”，非會員提示“會員權益、開通會員的利益點等”刺激用戶。

思路四：優(yōu)惠券吸引用戶（運維思維）

改版前優(yōu)惠券和體驗券在不同入口，流量分散了，券的目的就是要讓用戶去使用，需要縮短路徑，更直觀的展示給用戶，能讓用戶快速做決策。如果券種類多的話，還需要區(qū)分各種券樣式，需要讓用戶快速定位想使用的券。

其中已使用和已過期的券對用戶來說就是已經(jīng)沒用的券，并不需要再用單獨的tab分類，并且弱化處理。因為PP微助手會員券相對比較少，不像電商一樣，會送很多商品券，所以用最簡單的形式展示給用戶就行。

值得注意的一點，不是說已過期的券就沒用了，如果運營把控好節(jié)奏，發(fā)券有一定規(guī)律，用戶看到過期的券會有一定的挫敗感，就會經(jīng)常來關注券。“廢券再利用”也能增加用戶的粘性。針對快過期的券，必要時候可以做二次提醒，給用戶造成緊張感，會激發(fā)用券欲望。

說服用戶下決定，一般從以下三個點去考慮：時間緊迫性、暗示稀缺性、后果恐嚇性

流量分發(fā)和流量承接

產(chǎn)品的流量來源有很多，除了自身用戶進入產(chǎn)品的流量，還有線下廣告、線上廣告、分享鏈接等等各種來源。目前主要的流量分發(fā)方式包括：搜索分發(fā)、算法分發(fā)、社交分發(fā)、人工分發(fā)、付費分發(fā)。PP微助手主要應用算法分發(fā)、搜索分發(fā)、人工分發(fā)。

先講一下“hook”，在電商里是“鉤子商品”，這里我把“hook”當做是“鉤子影片”，運營精準推薦的一些“hook”，會取到不錯的轉(zhuǎn)化效果。

用戶在產(chǎn)品內(nèi)的行為路徑是不可控的，一大波流量進入首頁，每個用戶都有自己的目的，所以需要對用戶進行分流。一部分用戶去了搜索，這類用戶目的很明顯，知道自己想看的影片名稱，這部分就是搜索分發(fā)的流量；一部分用戶被“hook”勾走了，"hook"激發(fā)了用戶的看片動機，這部分就是人工分發(fā)的流量，需要運營去干預；一部分用戶在不停的瀏覽，在瀏覽過程中找自己的影片，產(chǎn)品會分析用戶行為，顯示千人千面的首頁，這部分就是算法分發(fā)的流量。

有流量分發(fā)，那必然就有流量承接，流量承接都是相對流量分發(fā)的，在電商產(chǎn)品里，站內(nèi)的流量承接一般都在商詳，以及對應的后置鏈路（訂單確認、結算等等），從各渠道進來的流量，最終匯總在商詳。在商詳，會突出各種利益點和產(chǎn)品自身優(yōu)勢去刺激用戶下單。至于利益點，活動時候的各種優(yōu)惠信息就是典型例子，產(chǎn)品自身優(yōu)勢，比如：淘寶的先享后付、京東有京東物流次日達等等。在PP微助手這里流量承接就是影片詳情以及后置鏈路會員套餐頁，具體可以看上面的“思路三”的分析，怎么去承接流量，怎么去促進轉(zhuǎn)化。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

一、設計和藝術的區(qū)別

藝術：

藝術是感性、天馬行空、富有創(chuàng)造力的，表達創(chuàng)造者的個人意識。

設計：

設計是理性、精密的，為了解決用戶的問題

（你看得懂嗎？你有什么見解？為什么大家見解不一樣？這就是藝術的魅力）

二、用戶體驗及用戶體驗設計

什么是用戶體驗？——————使用一個產(chǎn)品時的主觀感受

用戶體驗設計？———————為了提升用戶體驗而做的設計

1.用戶體驗設計

首先要解決用戶的某個實際問題--讓問題變得容易解決--最后給用戶留下深刻的印象。（視覺只是其中一部分，并不是設計的全部）

Eg：充電插座的苦惱--錯開位置

尿液四濺--廁所里放一只蒼蠅，用戶會去瞄準上廁所（設計美觀且有趣味性）

2、用戶體驗設計的特征

(1)嚴謹、理性、創(chuàng)意

先關注要解決的問題----其次思考有趣的創(chuàng)意幫助用戶得到更好的體驗。

(2)提供特定問題的解決方案

設計目標是什么，為什么人解決問題，如何解決

Eg:鋼鐵俠u盤死死按住關機鍵；樓梯是為殘疾人設計的嗎，我懵了？

(3)不讓用戶思考

用戶感到挫敗，會放棄。你的設計不要用戶一頭霧水。

(我到底怎么走?)

(4)趣味橫生

尿液四濺貼提示語效果不好，放一只蒼蠅效果很好？

因為：抓住了用戶的心理和行為習慣，同時充滿趣味，吸引用戶

Eg：path推出的商店功能，在里面買自己喜歡的貼紙，搖晃手機貼紙也搖晃，感覺很好玩吧～帶來好的體驗感

3.用戶體驗設計師遇到問題如何思考

三、各種設計師的區(qū)分

1.怎么和別人解釋用戶體驗設計師

A：“你用一個網(wǎng)站的時候，有沒有出現(xiàn)：某個功能找不到了，點擊按鈕沒有反應，填寫的信息不知道哪里錯了總是不能提交成功？”

B：我們的工作就是改善這種情況，讓你使用網(wǎng)站時有一個好的體驗，同時能讓用戶感到愉悅和不受打擾。

工作中：除了考慮用戶還要讓公司有利可圖

2.交互設計師

通過分析用戶心理模型、設計任務流程、運用交互知識把業(yè)務邏輯（需求/功能）以用戶能理解的方式表達給用戶，最終實現(xiàn)產(chǎn)品戰(zhàn)略（公司需求和用戶需求的平衡點）的過程。

即：從公司戰(zhàn)略角度考慮問題，在公司需求的基礎上讓用戶覺得好用、易用

交互設計師的產(chǎn)出物：不是原型，你不是畫圖的工具，重要的是解決問題的能力

工作內(nèi)容：競品分析文檔、用戶反饋整理、流程圖、設計草圖、原型...

3.視覺設計師

原畫：設計者很強的手繪能力，作品充滿藝術表現(xiàn)力

平面：傳達思想，較強的感染力

推廣運營設計師：突出重點抓眼球

UI：良好的審美、具備一定的交互知識

                      (原畫)                              (平面)                                              (推廣運營)

4.用戶研究員

通過各種分析和研究，深入了解用戶特征，用戶行為習慣，為產(chǎn)品運營推廣提供必要的方向

工作內(nèi)容：市場分析、競品分析、創(chuàng)建人物角色、問卷調(diào)查、焦點小組、用戶訪談、可用性測試

四、用戶體驗設計師的作用和價值

1、用戶價值商業(yè)價值

用戶通過優(yōu)秀的設計快速達到目標，企業(yè)也會財源滾滾

eg：改變一個按鈕的顏色，點擊率提高35%；優(yōu)化操作流程，轉(zhuǎn)化率提高50%...

2、項目價值

跟進各個環(huán)節(jié)，保證產(chǎn)出物質(zhì)量

推進統(tǒng)一及標準化，提升設計效率

促使項目流程合理，有規(guī)劃

五、交互設計師的作用和價值

1.工作內(nèi)容

分析重塑需求;與用研配合，了解用戶特征與行為；設計結構、流程、界面、動態(tài)效果；跟進視覺、前端、開發(fā)；及時整理上線問題，準備下次迭代...

2.品牌價值

維護和突出品牌形象，統(tǒng)一的設計理念

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

我們生活在一個信息大爆炸的數(shù)據(jù)化時代，隨著網(wǎng)絡科技的飛速發(fā)展，產(chǎn)品和用戶之間的互動也日趨復雜，新功能不斷涌現(xiàn)，帶來便利的同時也導致用戶對功能的認知摩擦日益加劇。在這種情況下，人們對交互設計的需求就越來越大，市場對交互設計師的需求也越來越多。許多公司都注意到交互設計對品牌創(chuàng)建、用戶滿意度以及回頭率等方面的影響。那么，什么是交互？交互設計應該做什么？希望今天這篇文章，能夠加強你對交互的理解。

交互就是與另一個人或者物進行交流互動，比如你說話或按動鼠標，對方給你反饋，這就是交互。對于設計師們來講，交互多指用戶與計算機、手機等產(chǎn)品進行的交互。

交互設計是一個頁面或者一個界面的內(nèi)容規(guī)劃，例如哪里放圖片，哪里放按鈕，哪里出現(xiàn)文字；或者說是一個龐大網(wǎng)站以及產(chǎn)品的整體邏輯梳理，例如如何安排信息層級，如何讓用戶更輕松地找到自己想要了解的信息，如何讓整個網(wǎng)站或產(chǎn)品更加合理、有效地運轉(zhuǎn)。

一個城市有合理的規(guī)劃交通才會便利，城市里面的人才會覺得更加舒適，而一個合理的交互設計也直接影響著一個網(wǎng)站、一個產(chǎn)品甚至一個品牌。

視覺設計是感性的，更注重一切表象的東西，比如顏色、版式、形狀、調(diào)性等，視覺設計最終的成品是視覺的效果圖設計稿。

交互設計相對來說更加理性，交互設計更加注重用戶是誰，通過需求分析得出問題、解決問題，交互設計的最終成品是原型圖。

看過了文字解釋，再讓我們一起來看看生活中無處不在的交互設計。

疊貓貓、蓋樓、星秀貓……每年雙11，天貓都會創(chuàng)新活動，激發(fā)用戶對雙11購物節(jié)的期待，營造蓄勢。

今年的雙11的主題為喵糖總動員，用戶通過組隊一起做任務賺喵糖，通過擲骰子的方式獲取糖果數(shù)，占領格子，擊敗對手。獲取喵糖的過程中，營銷或引流設置無處不在。除了做每日簽到獎勵的簡單任務外，最簡單的方式就是用15秒的時間去瀏覽平臺推送給你的主會場、各大分會場、各細分品類、各個商家店鋪等頁面。通過這樣的任務設計，可以引導用戶瀏覽會場店鋪或各品類商品，最大程度地完成各個淘寶店鋪的曝光需求。

 

天貓雙11-喵糖總動員活動頁面

新冠疫情還在持續(xù)蔓延，飛豬App貼心的在行程頁面，添加了防疫工具引導欄，通過點擊按鈕，可跳轉(zhuǎn)至支付寶中行程碼、核酸預約等界面，為用戶出行提供便捷的準備工作。

用戶在滑動頁面時該導航欄會被隱藏，靜態(tài)時則顯示兩個應用，點擊展開才能查看更多。設計采用浮層式引導，提供便利的同時，且不會對用戶產(chǎn)生干擾。

 

飛豬App界面

一切交互設計所要達到的效果就是形成良好的用戶體驗，讓用戶在使用界面時更方便找到自己感興趣的東西。

通過地圖及定位，通過氣泡及icon的區(qū)別，把附近的美食等進行排名，讓用戶更快知道自己的距離。還設置了點擊卡片展示店鋪信息同時支持查詢路線等功能。

 

美團App界面

“優(yōu)秀的設計是考慮周到且不放過每個細節(jié)”。往往在那些不易被察覺的細微之處，傾注了設計師的諸多巧思與心血，嗶哩嗶哩在設計中做了以下一個有趣的小細節(jié)。

在賬號登陸頁面，當我們輸入賬號或者手機號的時候，頁面插畫中的22和33是睜大眼睛的，而當我們輸入密碼或者驗證碼的時候，他們則用手捂住了眼睛。這個有趣的設計生動地傳遞了App對用戶隱私的尊重與保護。

 

嗶哩嗶哩App界面

當你使用百度搜索物品，查看圖片時，左右滑動即可切換下一張圖片，上劃即可關閉圖片，這樣的操作手勢，更加方便快捷。

在查看物品圖片時，下方還會出現(xiàn)商品推薦購買鏈接，仿佛“一站式”購物的貼心服務。

 

百度App界面

交互設計的核心目的是信息的傳遞，無論如何設計交互圖、如何設計交互流程，我們要思考的核心和準則是如何把想要傳遞給用戶的信息以最簡單、最容易的方式讓客戶接收，反之用戶也能用最簡單的方式找到自己想要的信息。

這些信息包括內(nèi)容、按鈕、文字、圖片等一切信息的載體。我們要明白在進行交互設計時的前提是如何去梳理信息更好地傳遞。

那么，如何才能讓信息更好地進行傳遞？我們要搞明白信息傳遞時需要營造什么樣的氛圍，哪些信息元素需要突出，目標用戶是誰，根據(jù)這些才能以一個正確的方向有邏輯地進行交互設計，而這一切的最終結果就是實現(xiàn)一個良好的用戶體驗。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷  作者：全速設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

本文將從理論到實踐，從軟件到插件，再到不同應用場景拆解和團隊協(xié)同的重構，一步步教你如何搭建產(chǎn)品KIT組件庫。也給大家?guī)砟嫣斓腁nima插件教程，組件化設計的必備插件，目前國內(nèi)還比較少有文章講到。手把手！嘴對嘴！堪稱全網(wǎng)最細保姆級教程！

01. 什么是KIT組件庫？

一個成熟的設計團隊，都會為產(chǎn)品制定設計規(guī)范，搭建產(chǎn)品KIT組件庫，組件化思維也是設計師的必備思維之一。組件庫會讓團隊協(xié)作變得高效且一致，讓團隊成員專注于深耕體驗和細節(jié)，實現(xiàn)設計向產(chǎn)品賦能。極大的節(jié)省設計和開發(fā)成本，優(yōu)化用戶在界面流轉(zhuǎn)間的感知差異體驗。

02. 原子設計理論

將普遍存在的人性用戶心理規(guī)律運用于設計，增加設計的溫度。

近來對用戶心理比較感興趣，去看相關設計資料的時候發(fā)現(xiàn)相關內(nèi)容重復性較高，多方搜集資料結合自己的一些分析總結出一篇補充。

定律是鑰匙，在遇到讓我們上癮，持續(xù)付出或獲得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能為我們的后續(xù)的設計吸收。

最后想說，設計師的價值不僅僅在視覺，好的設計必是好用好看好懂用戶的。跨領域?qū)W習補充自己的視野，多思多想，掌握鑰匙，開啟用戶不同的心門。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務