把握中心目標

大多數網頁設計是以目標為導向，也就是網頁做出來能為用戶提供什么、能解決用戶的哪些問題。例如電商網站的終極目標是賣出更多的商品，資訊類網站的目標是讓用戶能更多地閱讀最新訊息，目標不同，兩類網站在設計上也會有截然不同的差異。

在設計上，電商網站會更注重頁面氛圍的營造，把紅紅火火的促銷氛圍搞起來，用戶看到會更興奮。

在電商網站中，設計重點放在幫助用戶瀏覽店鋪并輕松找到特定商品上，放在詳情頁上用盡可能好的方式展示商品；付款流程也經過簡化和仔細計算(例如某寶最近更新的訂單頁把價格聚集在一起)，因此用戶不需要經過太多思考就能快速下單購買。

打造平衡的效果

網頁中炫酷的視覺效果能讓用戶印象深刻，但效果實現需要付出更成本。能明確知道什么時候更簡潔的視覺效果能讓整個設計變得更好，能讓用戶專注于正確的事情，這一點很重要。

有時候在網頁中添加過多元素，會分散有價值的信息，用戶也難以識別他們想看的內容。

對齊和對稱是頁面保持平衡的重要因素。對齊既保證了布局統一，又將有聯系的元素緊密連接起來；對稱營造一種平衡的感覺，元素整齊有序。

網站的登錄注冊頁往往都設計得很簡潔，有大面積的留白處理，只保留關鍵的信息輸入框，這樣用戶能更專注于輸入內容。

在宜家網頁中，清晰的視覺層級結構以及留白的運用讓整個頁面看起來非常整潔有序。好的結構能讓用戶知道他們在看什么，留白提供了視覺上的緩解作用，有助于引導用戶的注意力。

了解基本的設計原理

格式塔原理基本上定義了我們感知事物的六種不同的認知規則。在網頁設計中，這意味著需要以一種合理的方式來安排元素，幫助用戶從整體上理解設計。

設計中需要考慮不同元素的對齊關系、相似元素或按鈕的排放位置、一組信息要如何展示、列表類信息該如何展示…

另一個重要的原則是希克定律，也就是向用戶展示的選項越多，做出決定需要的時間就越長。因為我們的大腦需要考慮和分析所有選擇，然后再選出最好的選擇，當選擇太多時，這就會成為一個問題。

這就像我們在餐廳里點菜一樣，如果拿來一個 20 頁的菜單，我們可能會從頭到尾把這 20 頁全看了，仍然不知道該點哪個，然后又把這個 20 頁的菜單重新翻一遍。去餐廳吃飯是件放松高興的事，我們肯定不想在點餐上給自己帶來壓力，這樣吃飯的樂趣也會大打折扣。

如果需要填寫很長的表單，考慮將長表單拆分成幾個短的問題，讓用戶按步驟依次作答，避免一下看到過多問題給用戶帶來負擔。

了解面對的用戶

網頁設計需要知道面對的用戶是誰、他們想獲取什么、想處理什么問題以及他們是想法是什么等等。

對最終用戶的印象越清晰，越有可能創造出成功的設計，就像設計一個面向兒童的網站與設計一個供老年人使用的網頁會完全不同。所以在一開始，要先學會把自己的觀點先放在一邊，傾聽目標用戶的意見，然后再慢慢驗證自己的想法。

抖音千人千面的推薦機制，能為用戶精準推送他們感興趣的內容，把握住了用戶的興趣，產品才能越來越受歡迎。

排版很重要

排版需要長期的積累和沉淀，如何合理地安排頁面中的品牌標識、圖片、文字等元素，是始終需要考慮的事。比如不管網頁設計的目標是什么，或者選擇什么樣的視覺效果，在選擇字體時我們總要考慮字體的粗細、大小或對比度等因素。

根據設備不同，最佳字體的選擇可能會發生變化。在移動端設計中，文字可讀性是首要的，屏幕越小越要保證信息的可讀性。

信息架構和導航

網頁的導航設計和信息架構共同構成了產品的主干，讓用戶能夠了解產品和功能并找到需要的信息。

無論信息的長短如何，合理的層級結構有助于在產品中創建邏輯結構，以便用戶可以查找信息。導航能反映出產品架構，這樣用戶無需花費大量精力，就能輕松找到主要信息和功能。

點擊按鈕之后會切換到哪一頁、怎么返回到當前頁、點擊哪些按鈕頁面不跳轉。架構流程不僅自己要明確，更需要用戶看得懂。

降低認知成本

咱們前面提到，如果面臨的選擇太多，就需要經過大量思考，這樣用戶很可能會變得有壓力甚至困惑。其實這里面還包含著另一層意思，過多的選擇會增加用戶的認知成本。

只有降低認知成本，才不會給用戶帶來過多壓力，才能快速做出判斷。在網頁大框架已經設計好的基礎上，降低認知成本的地方往往更在于細節。

準確拿捏細節。在面包屑導航中，鼠標懸浮上去是一種狀態，點擊后又是一種狀態；選中的標簽與未選中的標簽在顏色上做出區分；當前頁碼重點突出的同時，告知用戶前后頁碼還支持左右切換。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

什么是體驗可視化地圖

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

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

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

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

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

兩者工具的差異與特性

用戶畫像的因素

用戶體驗地圖的因素

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

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

從流程上看

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

相互作用上看

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

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

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

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

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

二、開始調研；通過研究手段向用戶收集優化資料或數據，為創造體驗可視化地圖提供可靠的數據。

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

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

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

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

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

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

1. 根據用戶研究建立正式的用戶畫像

2. 建立人物角色原型

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

人物角色原型

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

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

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

構建人物角色原型的方法

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

人物角色原型的構成內容

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

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

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

三、心理統計特征：與主題相關聯的因素，主要指不可輕易觀察的心理活動、態度、信仰、動機、觀念的個人特征。

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

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

用戶畫像

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

如何打造可用的用戶畫像

定性還是定量類型

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

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

識別用戶群體優先級

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

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

最終調研對象的關系表呈現；

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

定性類用戶畫像要做什么

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

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

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

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

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

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

定量類用戶畫像要做什么

一、數據采集

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

二、數據定義

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

三、構建畫像

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

通?；ヂ摼W產品前期，沒有構建標簽或數字畫像的經驗，可以考慮讓團隊引入相關第三方數據畫像服務，它們可以更便捷的接入到你的產品中并幫助你打標簽做統計；

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

*第三方數據分析輔助產品也不少，這里只做交流使用

如何讓畫像角色更生動

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

一、不要特殊化

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

二、合理應用頭像

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

三、充實細節

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

那么即可根據產品屬性結合實際情況進行豐富補充，例如調整為以下描述；

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

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

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

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

四、創造情景故事

情景故事不會很枯燥會更抓人心，能夠傳達更多信息的同時，將產品信息與真實情景交融在一起，方便團隊記憶理解以及更好的促進討論。創造情景故事的元素通常有：角色、場景、行動、事件、評價、情節。看起來就像是在描述“我與xx產品的一天”。

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

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

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

2. 事件：發生了什么事兒，角色間做出了什么反應產生了何種結果；

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

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

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

五、不要孤立使用畫像

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

六、定期更新

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

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

如何用好用戶體驗地圖

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

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

用戶體驗地圖的構成簡述

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

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

常見的構成元素：

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

二、行為階段：

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

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

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

四、想法與問題：

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

五、情緒波動與精神狀態：

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

六、痛點或機會揭示：

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

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

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

*示例模版

用戶情緒板怎么用才對

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

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

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

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

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

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

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

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

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

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

怎樣完善用戶體驗地圖

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

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

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

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

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

檢驗用戶體驗地圖的標準

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

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

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

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

什么是觸點模版工具

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

體驗類型的框架

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

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

而三個階段分別是；

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

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

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

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

觸點模板框架

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

抬頭信息

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

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

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

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

核心組成部分

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

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

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

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

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

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

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

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

如何構建一個觸點模版

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

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

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

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

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

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

觸點模版小結

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

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

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

服務藍圖介紹

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

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

服務藍圖的因素：

服務藍圖的構建元素：

結語

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

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

寫在前面

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

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

點擊可以查看   PP微助手改版優化

流量變“留量”

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

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

曝光

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

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

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

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

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

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

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

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

PP微助手改版思路解析

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

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

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

3、智能語音，結合蘇寧小biu智能語音系統，可以和電視機語音互動，實現交互功能

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

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

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

思路一：架構改變（產品思維）：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

思路四：優惠券吸引用戶（運維思維）

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

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

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

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

流量分發和流量承接

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

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

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

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

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

1.準備工作

設計工具

Sketch

精不精通Sketch，就看插件用的溜不溜，推薦個網站：http://sketch.cm/

無論是學習Sketch，還是搜插件、找素材，都是Sketch使用者的優選項。

Sketch是OS X平臺獨占，需要下載Sketch可以到這個網站去下載。

這里推薦個Mac平臺應用的下載網站，使用Mac的小伙伴可以去這里下：http://xclient.info/

我個人是很推薦使用Sketch做UI設計的，軟件本身已經提供了大量的IOS和Android系統設計資源，配合各類插件，幾乎無所不能。

Photoshop

相比于Sketch來說，體型胖了點，在UI設計上略遜一籌。不過因為Sketch是OS X獨占，所以因為平臺限制的原因，用PS設計也沒有問題。

我很久沒用它做UI設計了，也沒啥可推薦的了。

Adobe XD

全稱為Adobe Experience Design；這是一款集原型、設計和交互于一體的小清新時代風格的設計軟件。雖然有人說，Adobe XD將會是Skech的勁敵。然而在windows系統當中，Adobe XD的確是產品原型設計領域最順手的設計軟件。它使用簡單，界面整潔，雖然之前一直使用的是Axure 8.0，但看來，Adobe XD在界面、素材以及設計操作上的確甩了Axure好幾條街，至少它成功的吸引到了我。

做好版本管理、文件歸檔的工作

專業水平不僅體現在設計能力之上，優秀的管理能力也是重要的職業素養。

合理規劃好設計版本，進行明確的文件歸檔工作，有助于提高設計師的工作效率。

這里不贅述了，每個人有自己的版本管理方式，不過目標只有一個：清晰高效。

2.關于手機的基礎概念

這里的概念性內容不要強行記憶，理解即可，它是做移動UI設計的理論常識。

手機分辨率

手機屏幕的像素點數。比如750*1334、720*1280等等，細分還有物理分辨率和邏輯分辨率，這里不擴展講解了，想了解自行百度吧。

手機分辨率牽扯到的就是工作時設計稿的尺寸，只要記住設計尺寸就可以了。

屏幕尺寸

手機對角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

屏幕尺寸和設計其實關系不大，主要是用來計算屏幕密度的。

屏幕密度(DPI或PPI)

每英寸的像素點數。簡單理解就是屏幕密度越大，畫面越逼真細膩。

下面是屏幕密度的計算方法，范例是5英寸，分辨率為1920*1080的手機：

屏幕密度牽扯最多的是安卓系統，安卓手機屏幕本身的密度種類非常多，這也是導致了安卓系統需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題，這個我們下面會提到)

3.基礎設計規范——IOS系統

這是蘋果的開發者官網：https://developer.apple.com/

這里有持續更新的最新設計規范和資源模板，雖然是全英文的，但并不影響閱讀。

設計師應該學會從官方獲得設計資料，這比其他途徑獲得的資料更加全面和權威。

最新系統版本：IOS 11.4.1

中文字體：蘋方黑體

英文字體：San Francisco

官方系統設計模板下載：

https://developer.apple.com/design/resources/

官方系統設計字體下載：

https://developer.apple.com/fonts/

下圖是截止到目前，可能還需要支持的機型和對應的設計尺寸：

設計稿尺寸

只推薦750*1334的尺寸來做設計稿，這是向上向下都最容易適配的尺寸，包括用這個尺寸去適配Android版。

除了IPhone X的比例特殊外，其他的IPhone比例幾乎差不多的，比較容易適配。

Sketch設計

使用375 * 667尺寸即可，開發在Xcode里也是使用這個尺寸。

導出的@2x圖適配IPhone 5/5S/5C/SE   6/6S/7/8

導出的@3x圖適配Iphone 6/6S/7/8 Plus    IPhone X

Photoshop設計

畫布就建成750 * 1334尺寸的即可，在這個前提之下，

導出原尺寸圖片加后綴@2x，適配IPhone 5/5S/5C/SE   6/6S/7/8

導出1.5倍圖片加后綴@3x，適配IPhone 6/6S/7/8 Plus    IPhone X

常用數據

下面的內容蘋果官方提供的模板文檔其實都有對應的數據，可以去官網下載。

字號使用建議(這個不是硬性規定，根據視覺效果酌情使用)

導航文字            34-38px

標題文字            28-34px

正文文字            26-30px

輔助文字            20-24px

Tab bar文字       20px

圖標尺寸建議

APP應用圖標，建議使用1024*1024尺寸去做，逐級縮小去應用到各種場景中。

SKetch已經提供了IOS和Android系統的APP尺寸圖標模板，直接使用就可以了。

界面適配

程序內部的功能界面：這種界面通過寫成自適應的界面可以很好的適配各種機型；如果有特殊的布局要求，也可以讓開發根據特定機型去調整，不需要單獨為各類機型再做設計稿。

覆蓋全屏類的界面：比如閃屏、啟動頁、引導界面、插畫頁面等等，這類覆蓋全屏的界面必須要單獨為IPhone X的比例重新繪制或者調整設計稿。

其他的IPhone機型，遇到這種界面，整體放大縮小、微調之后按照各機型的設計尺寸輸出對應的切圖就可以了。

IPhone X的安全區域：IPhone X的安全區域就是扣除頂部劉海狀態欄和底部虛擬home鍵之后，中間的內容顯示區域。如果你不得不使用IPhoneX的尺寸做設計稿，請一定設置好參考線，不要把內容做進這兩塊區域內部。

IPhone X規范：iPhone X 人機交互指南及其設計細節

簡單理解APP構成

下圖是IOS開發工具Xcode里的一個空白頁面，圖片的文字標注請仔細閱讀。

本質上，開發寫APP界面和設計做設計稿是一樣的，只不過兩者實現方法不同。

APP的構成遠遠要比上圖寫的復雜的多，我們這里使用最簡單的理解方式。

設計稿的標注

根據上圖我們可以理解設計稿和程序之間的關系：

設計稿里的按鈕、文字、圖標、列表、背景色、線條等等所有的設計元素，

在Xcode里都有對應的控件，設計元素必須使用對應控件，才能在APP的界面里顯示出來。

設計稿的標注，實質上是標注的各類控件的屬性以及相對于其他控件的關系：

設計稿中：

文字的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；

圖片的自身屬性：寬高、間距、距離、透明度。

至于標注在上篇文章有詳解：一款APP從設計到切圖標注適配全記錄，這里就不累贅了！

程序的對應控件

Label的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；

Image View的自身屬性：寬高、間距、距離、透明度。

實際上各類控件的屬性也要比這個復雜的多，這里是最簡單理解的舉例說明。

如今使用本地化插件Sketch Measure，幾乎不用手工標注，標注導出HTML后，扔給開發，他們想看什么屬性自己點擊查看就是了，所以我們這里了解下標注原理就行。

而一些線上工具的插件，比如藍湖、墨刀、Mockplus等等，功能更加豐富，各位根據自身情況靈活運用吧。

Sketch Measure去http://Sketch.im下載

設計稿的切圖

IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴，是為了在Xcode導入圖片資源時，識別對應機型所用的圖片。

Xcode里提供了相應的位置，相同命名圖片會根據后綴填入到對應的位置。

目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。

但是對于UI設計來說，常用的圖片格式就以下幾種：

PNG      常用圖片格式，沒什么解釋的，目前大部分產品還在使用此格式；

WebP    安卓的圖片格式，同等質量圖片下體積非常小，非常推薦給安卓使用；

SVG      矢量格式，完美解決適配問題，但也有部分缺點。

想具體了解WebP和SVG，可以查看之前的文章。

切圖輸出規范

前提：同一類型、位置的切圖，請保證切圖尺寸、規格一致，圖片尺寸為偶數大小。

1.有操作功能、可點擊的功能性切圖：最小點擊區域問題

蘋果官方提供的能準確點擊的最小點擊區域：88 * 88px;

小于這個范圍也可以點擊，但是點擊不靈敏，體驗較差。

對于比這個范圍小的可點擊按鈕，周圍需要用透明區域填充后再輸出切圖。

解釋下為什么用透明區域填充來擴大點擊區域范圍：

圖標這東西，對設計師來說沒區別，都是圖片。

但對開發來說，可操作和不可操作的圖標是兩種類型的控件，圖標的樣式不過是傳給該控件的顯示圖片罷了。

可操作的功能圖標在Xcode對應控件是UIButton。

對控件來說，如果不在代碼里明確固定控件的大小、點擊區域等等各類屬性，設計師傳給我多大的圖，這個控件就會被這張圖撐到多大。

你給我一張40*40的按鈕切圖，如果開發什么都不做，那這個UIButton在手機界面里就被撐到40*40的大小。

我也可以在Xcode里寫幾行代碼，固定圖片的大小就是40*40，擴大UIButton這個控件的大小變成88*88，這樣這個控件的點擊區域也擴大了。

但是一張規范的切圖就能解決的事情，為什么還要在代碼里再手動加幾行呢？

一個可點擊按鈕需要加一行代碼，整個APP就可能多加上百行上千行的代碼。

規范的切圖也是可以提升產品開發效率的。

2.非功能性切圖，比如列表圖標、說明圖標等，按統一規格的最小尺寸切。

這么切還可以減少一些程序因圖片資源大小導致的體積大小問題。

這類切圖，對應的是UIImageView控件，就是一張圖片，無操作，只是占位和顯示。

所以你按照相同規格，最小尺寸切就可以了。

有朋友問：一定要切正方形的嗎？如果圖標都是30*20的，那我統一切30*20的行不行

答案是：可以，這個沒有完全的硬性規定。雖然我是設計師，但也會去寫一些IOS程序。正方形規格切圖就是為了方便開發，當然還是推薦你使用正方形規格來切圖。

但實際開發過程中，只要保證同一位置，切圖規格統一就可以。

切圖輸出狀態：

同一按鈕、元素的不同狀態，要明確命名對應狀態之后，分別輸出對應圖片。

下圖示例按鈕的選中狀態多出現在游戲APP中，這里僅表示說明。

命名規范

不要使用中文、特殊字符，請使用英文、下劃線、數字對切圖命名，數字不要打頭。

命名方式盡量清晰，推薦采用：種類_位置_功能_狀態

示例說明：

btn_homepage_seach_normal@2x.png

開發看到就會明白：這是位于首頁，處于正常狀態的搜索按鈕2倍切圖。

4.基礎設計規范——Android系統

這是Android Material Design中文版的地址

https://www.mdui.org/design/

Android的英文版地址

https://material.io/

最新系統版本：Android 9.0

中文字體：思源黑體

英文字體：Robot

Android不整理各類機型的尺寸規范了，數據零散，難以整理。所以我們從屏幕密度這里理解設計規范就可以了。

Android手機屏幕密度

上文我們提過屏幕密度的計算方式，安卓手機因為各種屏幕尺寸和分辨率，導致如果單純按照數值計算，可能屏幕密度種類會多到讓設計師崩潰。

所以為了解決這個問題，安卓手機出廠時，屏幕有自己初始的固定密度，系統會根據這些屏幕密度自行適配，下圖是對應的屏幕密度表：

Android的開發單位以及設計尺寸

正因為Android手機分辨率多樣，為了保證同一設計在不同屏幕密度的手機上顯示效果一致，Android系統使用了下面兩個單位：

dp：android開發單位，相當于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果；

sp：android開發文字單位，和dp類似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。

當屏幕密度為MDPI（160DPI）時，1dp=1px

當屏幕密度為MDPI（160DPI）時，1sp=1px

按照上面兩個公式的換算，同樣dp大小的圖片在不同屏幕密度的手機上如下圖所示，

基本可以保證圖片顯示效果在各類手機上相同。

設計稿尺寸

通過上面的分析，在xHDPI這個密度等級下，倍數關系為2，推薦使用720*1280尺寸做設計稿，換算方便，適配容易。

不過目前的現狀是，如果公司的產品有IOS和Android兩個版本，基本上設計師只會做IOS的版本，然后套用給Android，這樣做也是可以的。兩者的切圖，在這個設計尺寸之下是可以通用的。

設計稿的標注

推薦使用dp和sp進行標注。但是呢，如果你用720*1280做設計，使用像素單位標注，現在也不會影響什么。

因為前面已經提到過IOS的標注了，這里也就不再贅述了。

設計稿的切圖

理論上，對于Android系統來說，如果你想完美適配各種機型，應該為不同的屏幕密度提供不同尺寸大小的切圖，而Android的開發工具也為不同的屏幕密度提供了對應的資源文件夾。

但實際上，并不需要提供上面密度表那么多套的切圖，程序安裝包的大小基本就是由于圖片占用了太多的位置。

所以需要提供多少套圖片，請和公司的開發溝通，確定你們的產品實際支持哪些屏幕密度。

圖片格式

WebP和SVG

我個人是推薦現在為Android系統使用WebP格式，體積小，顯示效果好；

而SVG這種矢量圖片格式完美解決了Android多套切圖的問題，一套切圖，完美適配各種屏幕密度。

最小可點擊區域

48dp：這和IOS的最小點擊區域性質是一樣的，都是考慮到手指點擊的靈敏性的問題，設計可點擊控件的時候要考慮到這一點。

更多的注意事項和IOS切圖是相同的，這里不再贅述了。

5.UI設計師的職業道路

如今的移動UI設計行業已經很成熟了，針對移動UI設計的便捷工具層出不窮；移動UI設計的理論體系知識也已經漸漸完善。但這些都是外部因素，社會發展了，我們跟著一起向前適應就好了；

但對于設計師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業規劃！

很多設計師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒有職業目標。

目前我工作5年，就從我自身的體會來分享我自己的方式，當然資深的、精英設計就別跟我較真了，我代表的是那90%還在向上努力爬的普通設計師~

工作能力，不僅僅指的是自身的專業技術水平，還包含了各種綜合性能力，請務必對自己有明確的職業規劃和能力發展軌跡。

工作0~2年

這個階段對于新人來說，是一個設計能力和工作經驗的快速積累過程，不夸張的說，這兩年內的經驗可以決定你之后的職業發展道路是否順利。

此階段目的：提升設計專業能力、完善理論知識、積累實際項目經驗

這個階段就別想著一專多能了，先把那個“一專”搞好就可以了，當然不是不讓你學習別的知識，而是說重心應該發在提升目前的專業能力上。

提升設計能力：

一方面，通過公司的實際商業項目提升能力，這個沒什么可說的；

另一方面，業余時間務必進行大量的作品練習，無論是臨摹、還是重設計都可以，目的就是一個：量大 從優！

臨摹請用高質量作品，臨摹一堆垃圾還不如不做，臨摹請務必做到99%以上的相似度，不然那不叫臨摹，臨摹的過程是考驗軟件功力、設計技法能否完美復制的過程。

重設計請使用成熟知名產品，不要重設計一堆垃圾應用，成熟產品每個界面的布局、樣式、功能、邏輯都是經過深思熟慮后呈現給你的。

重設計的目的是要體會產品背后反映的設計意圖，不是為了重設計而重設計。

所以重設計之前請自己思考原產品這么做的目的再動手。

完善理論知識：

沒有理論體系方法的支持，在設計道路上是走不遠的。

現在關于UI設計的知識網站已經很多了，當然不局限在這類專業性網站上。

人人都是PM、UI中國、25學堂等等很多這類網站都是學習理論知識的好地方。

當然，你也可以關注我嘛~（給自己打個廣告，吼吼~）

工作2~3年

3年對于互聯網從業者是一個坎兒，其實這是相對于職業規劃來說的。

通過前兩年的積累，對于UI設計本職工作已經可以勝任了，接下來的要考慮的是個人的職業發展規劃了。

此階段目的：拓展技能、明確職業目標、為進大廠做準備

拓展技能：

這個階段可以考慮“一專多能”的多能了，作為UI設計師，可以學習的東西實在太多了，交互、動效、產品設計、開發等等。

不要求你達到那些專業從業者的地步，你要學到專業程度，還干什么UI設計啊。

目的是為了拓展自己的技能樹，為自己提供更多的競爭力，這個習慣要一直保持伴隨之后的工作……

明確職業目標：

設計師最怕的就是迷茫，如果說前兩年因為剛入行，對行業，對自身都不完全了解，那情有可原。但工作兩年后，對自身的情況再不清醒那就說不過去了。

可以從以下方面考慮：

是始終堅持在一線崗位的設計技術大牛，還是想做設計管理者，亦或者想從UI設計師轉職成交互設計、產品設計等等。

工作兩年已經對自身，對行業有理解了，自己的能力是否適合設計崗位，對設計的熱愛是否能經久不變都可以作為參考調節了。

為進入大廠做準備：

剛工作，可能限制于能力實力問題，委身于小公司。

但是！雖然我們身在小公司，但心要在BAT CAO  TMD，

Apple、Google也不是不可以！

Skr！Skr！

這階段可以為大廠準備一下，當然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當我放屁吧~

意思是，可以以進入大廠為目標，綜合性的考慮自身的缺陷并盡量彌補。

千萬別以為就在小公司將就著干吧，反正拿的錢也差不多，大公司的滋味你是體會不到的。

拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對個人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。

工作3~5年

對互聯網人來說，3年一個坎，5年一個坎，都是職業規劃的節點時間。

3到5年的設計師，如果你真的用心工作了，一個人可以實實在在的頂起來一個項目。

我們上面說，為進入大廠做準備。在這個階段，可以考慮進入一些中大型企業，提升個人的綜合能力、拓展人脈。

部分企業也比較喜歡要這個階段的設計師，有工作能力，職業道路又剛開始，搞不好可以在公司培養起來。

此階段的目的：提升綜合能力、拓展人脈圈子

這時的個人專業水平其實已經不是問題，繼續在工作中磨練積累就可以了；

這里需要的是打開個人在職場上的道路。

說實話，即使是互聯網行業，搞技術除了要保證自身技術過硬之外，會不會發展人脈，能不能提升綜合能力才是最后職業道路能不能走遠走高的決定因素。

提升綜合能力：

與各部門的溝通能力、對設計資源的協調能力、在公司業務上的話語能力、對項目的把控能力等等，都算綜合能力，這是對內部的能力。

不要以為對設計師來說，我悶著頭接需求，做設計就可以了。

這樣的設計師，也許你可以踏踏實實當個接需求的小設計，但你永遠也只是一個這類的設計，對于有更高更強的職業追求的人來說，沒有幫助。

所以，張開嘴、邁開腿，一步一步嘗試去推動自身進步吧，這個沒什么技術性方法，必須要自己親自去做。

拓展人脈圈子：

人脈對個人職業道路的幫助，遠遠要比專業能力的幫助要大的多，這是對外的能力。

設計師的圈子，說實話不算大。搞技術的，本身就坐辦公室，而做設計的人本身性格也有一部分原因，但還是請你努力拓展自己的人脈。

對于自身的專業圈子，努力分享自己的設計經驗、工作心得，總結自己的體會，發布到各類設計專業論壇上，積極的幫助別人，這都算一種拓展方式。

時間久了，就會結識非常多的設計界朋友，設計大牛也會逐漸注意到你，這些都是你職業道路上的寶貴資源。

還可以認識幾個不錯的獵頭朋友，有好的職位，他們都會優先想到你的。

作者自述

這也是我寫的最后一篇關于基礎規范類文章，也算是整理一下工作到現在的基礎常識類內容，以后不再寫這類基礎文章了。

人總要進步的，設計師還是要靠干貨作品來撐腰的，對吧。

以后發的內容都是我做過的實際商業項目，我會把設計經驗和工作方法融入到這些作品實例里來寫，這總比我單純講理論知識要強。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

溝通是為了完成設定的目標，把信息、思想和感情，在個人和群體之間傳遞，并達成協議的過程。溝通目的一般分為：說明事物、表達感情、建立關系、達成目標。

需求溝通是設計師和團隊圍繞需求目標，信息傳遞的過程，是設計師展開設計工作的起點，貫穿整個設計過程，溝通質量直接影響設計和項目質量。但因溝通復雜性、開放性，對很多新手設計師來說，在需求溝通過程中，可能會碰到一些共同的溝通問題，比如前期需求不明確導致設計頻繁修改、產品和體驗發生沖突時無法說服產品、溝通過程中陷入情緒爭吵、溝通中雞同鴨講等等。

針對這些問題，本文嘗試梳理需求溝通過程中幾種典型場景和方法，以期幫助新手設計師快速識別需求溝通中的常見問題；提升溝通效率，快速達成共識；掌握溝通竅門，更精準高效的產出需求。

本文主要分成2個部分，第1部分主要聚焦在需求溝通過程中的不同階段，面對的典型溝通問題和解決方案；第2部分主要介紹溝通中一些常見的技巧和方法。

Chapter 1

——————————

需求溝通的目標和方法

1.1 設計師在不同需求階段的溝通目標

通常設計師在處理需求的流程大致可以分成4個部分：了解需求->分析需求->探索方案->實現方案。在不同的階段，設計師要解決的核心問題不同：

了解需求階段，設計師和產品針對需求目標進行討論，并和團隊就產品目標達成共識；

分析需求階段，設計師和產品針對產品策略合理性進行討論，并提出體驗訴求；

探索方案階段，設計師探索設計方案，并和產品就商業目標和體驗目標達成平衡；

實現方案階段，設計師和產品協調優先級，調整方案，確保方案最大程度實現還原；

1.2 如何更好的了解需求，明確目標，達成共識

在了解需求階段，設計師需要了解需求來源、背景、要解決的問題和目標?？偨Y來看需求可大致分為2類：一類是需求目標較明確，產品有明確要解決的問題，如提升產品體驗、滿足某個用戶明確需求、完成某個產品目標；一類是需求目標較模糊，比如挖掘用戶潛在需求，探索新的業務方向。

對于目標較明確的需求，在了解需求背景、解決標準、需求邊界、限制條件和責任人等問題后，即可進入需求分析，策略討論階段。

但對于方向探索類需求，如何協助產品探索目標，和團隊達成關于目標的共識，是這階段的溝通重點。以一個創業的項目為例，產品想做一個圖片社區，原因是目前國內沒有頭部圖片社區。還原項目初期的溝通過程如下：

在產品的催促和時間壓力下，設計并沒有圍繞產品定位、用戶群、產品目標進行充分討論，也沒有和團隊成員達成共識。在這種情況下，選擇跟隨產品的節奏，陷入了被動執行。由于前期并沒有針對需求進行細致的推敲討論，方案的輸出過程變成了試錯的過程。產品方向修改頻繁，這種被動的溝通方式，導致整個團隊目標感不清晰、理解混亂。

經過反思和問題總結，設計師發起了主動溝通，運用設計方法協助產品明確需求，提升方向說服力，探索如何就目標和團隊達成共識。首先，需要和產品明確用戶群，并尋找用研協助，或發起快速訪談了解用戶；其次，組織團隊相關成員發起關于產品目標的討論，圍繞產品決策人給出的產品初步方向，團隊成員每人寫下對產品的期待，提煉總結團隊成員的想法，提煉總結產品目標；再次，根據用戶訪談材料，利用親和圖法，提取關鍵詞，從用戶訴求中洞察提煉用戶目標。最終，產品目標得以明確，團隊也取得了關于目標的共識，同時通過快速demo，來驗證優化，項目得以順利進行。

1.3 如何更好的分析需求，確保產品策略合理性

在了解需求背景、用戶群體，明確了需求目標后，進入需求分析階段，通常產品會給一個商業假設：假如做了xxxx，用戶就會xxxxx，產品可以達成xxxx目標。以一個需求為例子：產品想做一個任務體系，通過福利吸引用戶做任務，從而拉動產品活躍。

如果設計師完全按產品給的商業假設輸出，方案產出過程貌似很順利，但可能隱藏了很多問題。以本需求為例，產品的商業假設邏輯是：用戶被福利吸引->用戶為拿到福利做任務->用戶獲得福利->產品完成目標訴求；

但這個假設是正確的嗎？設計師的價值就在于，這個時候要能找出產品假設中的問題。通過對用戶的了解和洞察，還原用戶的實際使用過程可能會發生的問題。找到這些關鍵問題并通過和產品溝通協調解決掉這些問題，才能順利實現產品目標。

通過對用戶實際參與過程的分析，用戶在看到任務獎勵后，實際需要權衡的內容很多，如福利吸引力夠不夠大、有沒有關系親密的好友可邀請、好友要完成的任務難度大不大？分析需求過程關鍵就是找到這些問題的對應策略，強化用戶參與的動力，降低參與難度。

1.4方案探索階段，如何平衡商業和體驗訴求

在方案輸出階段，設計師和產品最常發生的爭執是商業目標和體驗之間的沖突。產品為了達成商業目標，很多時候希望把達成商業目標的手段做的很強；

當發生圍繞商業目標和體驗問題，誰都無法說服對方的情境時，設計師該如何溝通呢？

首先，作為設計師要擺正溝通立場，理解商業化是任何產品的根本目標，體驗也是實現商業化手段之一，我們反對的不是商業化，而是簡單粗暴的商業化方式，商業化的前提是對目標用戶有足夠的了解和盈利模式的清晰判斷。

其次，應能夠識別對于曝光越多越好，越直接越有效的這種思維方式，通常是一種鳥槍法的投機心理。在沒有更巧妙的解決方式時，最節省力氣的做法就是提升曝光等方式達成目標。

當發生爭執時，如果僅僅站在設計立場上，用設計理論說服對方，通常效果有限。嘗試找到產品實現商業化目標背后的邏輯，不要用手段代替目的，探索更好的實現商業化方式的可能性，比如嘗試在合適的路徑上推薦，或探索用戶更容易接受的內容形式。

1.5 方案實現階段，如何協調優先級，推動方案最大程度還原

在方案實現階段，很多時候由于時間緊張，產品僅完成最核心功能，部分體驗相關功能一直無法得到優化。

通常如果方案產品認可，但推進意愿不高時，可能的原因是：1.當前方案不是核心KPI，產品要優先保證對kpi影響最大部分完成；2.投入產出比不劃算，方案在產品看來投入的人力/時間/資源過大，并不值得；3.方案改動可能引發數據風險，產品并無法確保改動一定能帶來數據的成長；4.資源緊張，產品也很想實現方案，但項目時間/人力/資源真的很緊張。

這種情況下，首先，要和產品夠分溝通他們的疑慮和擔心，到底是哪類問題；其次，從心態上也不用急于一時，做好長期推動的準備；還有，充分優化方案，消除產品疑慮，尋找合適時機進行推動。在項目逐漸迭代的過程中，對需要推動體驗優化點持續關注，盡可能放大方案價值，結合新的需求點，思考能否從價值拓展角度，如提升品牌價值、擴展性等角度提升方案說服力；同時，從縮小成本和打消產品疑慮角度，做足準備，推動方案。

Chapter 2

——————————

溝通技巧的問題

溝通的過程是一個信息螺旋傳遞的過程，表達者的信息傳遞到接收者時，因為背景、環境、理解能力、傳遞完整度等差異，接收者僅能接收部分信息，而接收者在理解消化后，再將自己的信息傳遞出去，這個過程循環往復，會導致兩個最常見的溝通問題：目標偏離以及信息衰減。學習適當的溝通技巧，可以有效減緩目標偏離和信息衰減。

2.1 如何防止溝通目標偏離

要防止溝通目標偏離，首先要理解什么會導致目標偏離？1.目標不清晰，比如本來想找產品聊下某功能體驗不合理，但因為產品一直說項目時間緊，被傾訴了一通苦水后，忘記了本來要溝通的問題，轉移到了其他話題上，最后不了了之；2.缺乏同理心，比如當發生爭執時雙方不能互換角度，產品一直在說實現目標手段和現階段問題難點，設計在說體驗問題和設計規范，雙方互不妥協，陷入爭吵；3.陷入情緒，表達觀點時陷入情緒化的爭執。

針對這三個會導致溝通目標偏離的問題，可使用以下技巧：

① 設定溝通目標并保持關注：在每次溝通前想清楚自己的目標和底線，嘗試用全局視角分析自己設定目標的合理性；在溝通過程中要經常反思當前溝通的問題是否已偏離了目標，對達成目標是否有幫助；發現目標偏離可嘗試改變節奏，思考接下來說什么有助于達成目標；

② 換位思考：能夠傾聽對方的問題和困難，嘗試尋找解決問題的辦法，而不是一直表達訴求，無助于問題的解決和推進；

③ 控制/傾聽情緒：美國心理學家埃利斯創建的ABC情緒理論，拆解了事件發生和情緒之間的關系，指出事件的發生并不是導致情緒的直接原因，我們持有的信念才是。因此在溝通中不要加入太多內心戲，過度解讀事件。比如產品讓設計反復改稿時，可能會解讀為產品在故意刁難，嘗試了解反復修改背后的原因，可能對解決問題更有幫助。

2.2 如何減少溝通過程的信息損耗

溝通過程中表達者的模糊表達和接收者的理解偏差，會導致溝通過程中的信息損耗。比如經常會聽見產品有以下類似的表達：“設計稿盡快輸出”、“頁面太結構化了，想要更社交化一點”、“能不能做得更有創意一點，更有趣點”當出現這些類似的溝通語句時，可以嘗試通過具體化方式，進行確認。

對于可能會出現理解偏差的問題，重要的信息用自己的語言組織后再次確認“你的意思是xxxx嗎？”；重要的溝通后，可梳理溝通記錄，企業微信同步周知確認；方案的溝通過程可以快速畫草稿確認；盡可能的減少因為理解不一致導致的溝通問題。

總結

在需求溝通過程中，我們要對不同階段的溝通目標有清晰的認識，圍繞目標進行充分準備，運用設計方法了解用戶、了解產品核心訴求，做到知己知彼，才能進行有效的溝通。

在溝通過程中保持對目標的關注，始終牢記溝通是為了解決問題服務的。適當學習溝通技巧較少溝通過程中的信息損耗。

溝通是解決問題，共同協作的重要方式。如果你覺得自己不善于溝通，可能要反思下溝通前是否想清楚自己的溝通目標，對于解決問題的過程、方法是否熟悉，準備是否充分？當我們能做到知己知彼、胸有丘壑時，溝通可能就變得簡單起來。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

一、設計和藝術的區別

藝術：

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

設計：

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

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

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

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

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

1.用戶體驗設計

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

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

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

2、用戶體驗設計的特征

(1)嚴謹、理性、創意

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

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

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

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

(3)不讓用戶思考

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

(我到底怎么走?)

(4)趣味橫生

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

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

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

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

三、各種設計師的區分

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

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

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

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

2.交互設計師

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

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

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

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

3.視覺設計師

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

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

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

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

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

4.用戶研究員

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

工作內容：市場分析、競品分析、創建人物角色、問卷調查、焦點小組、用戶訪談、可用性測試

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

1、用戶價值商業價值

用戶通過優秀的設計快速達到目標，企業也會財源滾滾

eg：改變一個按鈕的顏色，點擊率提高35%；優化操作流程，轉化率提高50%...

2、項目價值

跟進各個環節，保證產出物質量

推進統一及標準化，提升設計效率

促使項目流程合理，有規劃

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

1.工作內容

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

2.品牌價值

維護和突出品牌形象，統一的設計理念

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

///

它是如何開始的-固定屏幕

在千禧年來臨之前，我們首先開始在單一視圖屏幕中進行UI設計，這類屏幕在當時最流行的尺寸是640x480。大多數時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區域或文本局部區塊中設置了內部滾動條。毋庸置疑，當時的大部分網頁也是用Flash或HTML創建的，并帶有用于布局的表格。那是在智能手機出現之前，隨著事物的發展，我們經歷了第一個向“響應式”設計的根本轉變。我們已經走了很長一段路，CSS已得到長足的發展，“響應式”網頁設計從2010年開始才真正獲得了專有工具。

圖表來源: https://www.webdesignmuseum.org/web-design-history

///

它現在怎么樣-響應式設計

隨著CSS3的發布，我們獲得了對“媒體查詢”（Media Queries）的訪問權限（譯者注：隨著移動互聯網的興起,我們需要適配多種移動端設備,這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創造了“響應式設計”一詞。十多年來，我們一直使用“響應式網頁設計” (RWD) 創建網頁布局，作為一種網頁設計方法，僅需基于一種屏幕尺寸進行設計，“響應式”使我們的設計能夠適配各種設備和屏幕尺寸。

在早期，當移動電話還不兼容媒體查詢或JavaScript時，“移動優先”和”漸進式增強”的概念就成為了非常流行的方法，當時有很多CSS完全不受支持。

用我們今天的話來說響應式設計，我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設計從桌面端調整為移動設備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。

///

它的未來是什么-組件驅動

很快，使用這種“響應式”設計方法可能會被認為與使用表格進行頁面布局一樣過時—就像我們在90年代所做的那樣。

我們通過基于viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們缺乏響應“用戶需求”的能力，也缺乏將“響應式”樣式注入“組件”本身的能力。

當我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內容，每個“塊”都由各種更小的“構建塊”組成。這些組件拼湊在一起構成我們的網頁。我們可以使用 global viewport information（全局視口信息）來設置這些組件，但它們仍然無法擁有自己的風格。當我們的設計系統是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。

好消息是這個生態系統正在發生變化，而且它正在迅速變化，這需要我們進行一些思維轉變：考慮如何設計和定義組件樣式以及它們如何適應周圍環境。

CSS正在不斷發展，“響應式”網頁設計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應式網頁設計” (RWD) 以來，僅僅10多年的時間，這個生態系統已經準備好迎接CSS發生一些相當大的改變。

讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設計方法，以及我們如何考慮界面設計。

///

用戶能夠設置基于個人偏好的“媒體查詢”

簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應”用戶。它們將使我們能夠根據用戶自己的特定偏好或需求來設定網頁樣式。這將使我們能夠根據用戶的體驗偏好來調整用戶體驗。

這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：

這些將幫助我們構建更具活力和個性化的網頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網站易于訪問的用戶。更進一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經在操作系統設置的偏好。舉個例子，當用戶的操作系統偏好設定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應先尊重他們的偏好，并為其他人提供“動效增強”的體驗。

另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設定），它允許我們根據用戶的偏好和操作系統中的設置將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發生。

///

“容器查詢”為你的設計系統注入新的生命力

CSS 中最令人興奮的新興領域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應式”設計到基于“容器”的“響應式”設計的轉變對發展“設計系統”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發展方向。

簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設置規則。這意味著任何組件都更加獨立，與現代設計系統保持一致，真正成為“即插即用”模塊，可以轉移到任何頁面或布局，而且無需根據新環境重新考慮所有內容。

“容器查詢”為我們如何規劃、設計和構建特定組件提供了一種更加動態的方法，因為組件本身擁有它的響應信息。

甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要，我們應該研究一下。

///

考慮各種形態因素

由于各種“形態因素”（form factors）的變化和擴展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內容中，請記住，這是最具實驗性的，并且只是一項正在進行的工作，仍在嘗試解決我們可能遇到的任何復雜問題，同時考慮未來“形體因素”可能會如何發展。

在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們如何讓內容根據新環境進行適配。例如，你可以在一個屏幕上放置一個收起的側邊欄（或菜單），并允許內容在另一個屏幕上展開并隨頁面滾動。

///

為什么我們需要它？

我知道你在想什么，我們已經從事網頁設計并使用“響應式”來進行網頁設計10余年了。我們對其相當滿意，那么為什么要改變呢？如果我們真的以終局視角來看響應式設計，那么它就是關于個人用戶的用戶體驗設計。我們正朝著一個與每一位個體用戶高度相關的時代邁進。我們的網頁體驗應該去適應用戶的需求偏好。隨著設計系統的發展以及我們如何創建更便攜的網頁，諸如“容器查詢”之類的工具將變得非常有意義。

配圖：CSS 將基于各個層級來確定用戶的最佳體驗

考慮到這一點，這意味著我們現在可以使用基于頁面的媒體查（包括跨越屏幕的細微差別）來設計宏觀布局；使用容器查詢的組件設計微觀布局；使用基于用戶偏好的媒體查詢，根據用戶獨特的偏好和需求定制用戶體驗。

對于新的響應式設計，有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協同工作的方式需要我們從根本上轉變我們對設計和用戶獨特體驗的看法。我們需要更加適應這樣一個事實：即我們的設計不是靜態的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學會在這種模糊性中做出計劃。網頁和設計的未來變得越來越復雜，我們需要適應和挑戰自己，理解“新響應式”體驗的意義。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

向世界知名的設計師致敬系列之二：喬納森·伊夫,馬克·紐森