眾所周知，黑帕云這樣的產(chǎn)品幾乎使用了所有類型 B 端的組件。
由于我司設(shè)計資源有限，所以在擁有了組件庫、設(shè)計師定好了設(shè)計規(guī)范之后，作為產(chǎn)品經(jīng)理就直接可以手擼設(shè)計稿了。
這是是前面一文《 B 端產(chǎn)品中，一個 Epic 基本功能設(shè)計的過程》 提到，作為一個長大了的產(chǎn)品經(jīng)理，有時候沒有資源給你做交互沒有資源給你畫 UI 的，你要自己學會自給自足。
這個系列就是作為產(chǎn)品經(jīng)理的我，在這兩年中“自給自足”做設(shè)計的的一些總結(jié)與發(fā)現(xiàn)。
自給自足的前提是，前面說的組件庫和設(shè)計規(guī)范，即擁有一個設(shè)計體系（Design System）。
關(guān)于設(shè)計體系的定義和內(nèi)容各家都不同，我找出來了以下案例供參考。
Tilio（一個寫作和筆記應(yīng)用）聯(lián)合創(chuàng)始人，有十年 UX 設(shè)計經(jīng)驗的阿拉·霍爾馬托娃在《設(shè)計體系：數(shù)字產(chǎn)品設(shè)計的系統(tǒng)化方法》一書中這么定義：
設(shè)計體系是為了實現(xiàn)數(shù)字產(chǎn)品的目的而組織起來的一套相互關(guān)聯(lián)的模式和共享實踐。
模式指的是界面中那些重復的要素：用戶流程、交互方式、按鈕、文本框、圖標、配色、排版、文案，等等。
實踐則是我們?nèi)绾蝿?chuàng)建、捕獲、共享和使用這些模式，尤其是在團隊協(xié)作時做這些事情的方法。
書中將設(shè)計體系分成以下幾個部分：
設(shè)計目的、設(shè)計原則、組件庫、樣式指南，以及用于提高設(shè)計師和開發(fā)人員溝通效率的工作流程和實用工具。
整理之后，可以參考下圖：
可以發(fā)現(xiàn)，以上設(shè)計體系無論如何定義概念，都是由設(shè)計原則+設(shè)計指南+一些基礎(chǔ)的元素（比如 Design Token、Material Foundation、Icons）+組件庫+其他資源工具構(gòu)成。
形成這些內(nèi)容的目的都是為了給自己產(chǎn)品建立一套保證設(shè)計質(zhì)量、提升設(shè)計決策、提升溝通效率的“工具包”，從而讓產(chǎn)品形成自己的符合設(shè)計原則的風格。
所以設(shè)計體系是什么不重要，重要的是如何在遵循設(shè)計原則下，能夠高效做出高質(zhì)量的設(shè)計。
一個開源設(shè)計原則和方法的網(wǎng)站 Design Principle 這樣定義設(shè)計原則：
Design Principles are a set of considerations that form the basis of any good product.
譯為“設(shè)計原則是構(gòu)成任何好產(chǎn)品的一套基礎(chǔ)考慮因素?！?
比如 Salesforce 的設(shè)計原則是：清晰、高效、一致、美觀。并且優(yōu)先級由前到后。
可以理解為 Salesforce 會追求清晰大于高效、一致、美觀，比如在產(chǎn)品設(shè)計中，讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。
這個準則很容易理解，可以推論出 Salesforce 在度量體驗時，將“易用性”放在了第一位，即作為一個 SaaS 產(chǎn)品，不能有任何讓用戶產(chǎn)生疑惑的地方。如果在設(shè)計上的美觀而要犧牲清晰，這就是不可取的。
有了設(shè)計原則之后，下一步是需要一個組件庫。這里說的組件庫囊括了無論是原子化的顏色、字體、陰影、Icon 這些基本的元素，還包括了已經(jīng)封裝好的組件，如 Button、Alert、Toast、Text Input。
關(guān)于為什么要組件化，也不多說了，之前看過一篇閱文體驗設(shè)計 YUX 的《組件化思維—— 適應(yīng)并推動業(yè)務(wù)及產(chǎn)品變革的設(shè)計案例》寫的非常清楚。
接下來我通過 Minecraft 這個游戲來總結(jié)了組件庫。
玩過生存模擬類游戲大家都知道，在游戲中會有一些可以靠雙手勞動得來的基礎(chǔ)材料，比如砍樹砍來的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎(chǔ)材料可以合成一些簡單處理過的材料，比如把木頭合成為木板。然后可以再把半成品進一步加工，比如木棍。
在 Minecraft 這個游戲中，如果玩家要制造一個弓箭，需要一個弓和一個箭。弓和箭的合成又需要一些半成品和成品或者原材料來加工制作，如下圖：
對應(yīng)在設(shè)計組件庫中可以對照查看，一個完整的頁面是可以通過一些元素、控件、組件、大組件組成：
在系列開始之前，先聲明一下文章的范圍和適用人群。
關(guān)于 「B 端設(shè)計總結(jié)」這一系列，主要是我個人在已有了我們的設(shè)計規(guī)范和組件庫后，“自給自足”的情況下探索出來的一些組件使用規(guī)則，更偏向產(chǎn)品經(jīng)理或者交互設(shè)計師來參考。
所以系列中不會寫設(shè)計規(guī)范，比如說字號、顏色、間距等等這些屬于設(shè)計規(guī)范中內(nèi)容。而是基于已有的規(guī)范，總結(jié)之前我們功能中涉及到的該使用哪些組件，也可以稱之為狹義上的設(shè)計指南（Design Guidelines）或者設(shè)計模式（Design Patterns）。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
很多人認為設(shè)計思維是全新的概念，這其實是一種常見的誤解。設(shè)計已經(jīng)實踐了很長時間：紀念碑、橋梁、汽車、地鐵系統(tǒng)都是設(shè)計過程的最終產(chǎn)品。縱觀歷史，優(yōu)秀的設(shè)計師都應(yīng)用以人為本的創(chuàng)意過程來構(gòu)建有意義且有效的解決方案。
在 1900 年代初期，夫妻設(shè)計師 Charles 和 Ray Eames 實踐了“邊做邊學”，在設(shè)計他們的 Eames 椅子之前探索了一系列需求和限制內(nèi)容，即使在 70 年后的今天仍在生產(chǎn)中。1960 年代的裁縫師讓·繆爾 (Jean Muir) 以她對服裝設(shè)計的“穿著設(shè)計”方法而聞名，她非常重視自己的衣服在他人看來的穿著感受。這些設(shè)計師都是他們那個時代的創(chuàng)新者。他們的方法可以被視為設(shè)計思維的早期例子——因為他們每個人都深入了解了用戶的生活和用戶未滿足的需求。著名的 I ? NY 標志背后的設(shè)計師 Milton Glaser 很好地描述了這個概念：“我們一直在尋找，但我們從未真正意識到......正是對人的注意讓你真正掌握那些東西?！?
盡管有這些以人為本產(chǎn)品的早期例子，但設(shè)計在歷史上一直是商業(yè)世界的事后想法，是僅用于修飾產(chǎn)品的美學。這種主題設(shè)計應(yīng)用程序?qū)е鹿緞?chuàng)建的解決方案無法滿足客戶的實際需求。因此，其中一些公司將他們的設(shè)計師從產(chǎn)品開發(fā)過程的下游（他們的貢獻有限）轉(zhuǎn)移到了起點。他們以人為本的設(shè)計方法被證明是導致公司差異化的一個因素：那些使用它的公司已經(jīng)從創(chuàng)造符合人們需求的產(chǎn)品中獲得了經(jīng)濟利益。
為了在大型項目中能夠采用這種方法，需要對其進行標準化：一種將創(chuàng)意設(shè)計過程應(yīng)用于傳統(tǒng)業(yè)務(wù)問題的正式框架。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語“設(shè)計思維”，并將多年來醞釀的方法和想法封裝成一個統(tǒng)一的概念。
設(shè)計思維是一種伴隨著過程而生的意識形態(tài)。
定義：設(shè)計思維是一種思想主張，一種注重實際操作，以用戶為中心的設(shè)計方法來解決問題的思路。這種以用戶為中心的設(shè)計想法有可能會帶來創(chuàng)新，而創(chuàng)新可以帶來產(chǎn)品差異化和競爭優(yōu)勢。設(shè)計思維包括 6 個不同的階段，如下所示：
設(shè)計思維框架遵循 1) 理解、2) 探索和 3) 實現(xiàn)的總體流程。在這些更大的范圍內(nèi)分為 6 個階段：同理心、定義、構(gòu)思、原型、測試和實施。
同理心：進行研究以了解用戶所做的、所說的、所想的和所感受的。
想象一下，你的目標是改善新用戶的入職體驗。在此階段，你將與一系列真實的用戶交談。直接觀察他們的所作所為、他們的想法以及他們需要什么，問自己諸如“什么激勵或阻礙了用戶？”之類的問題。或者“用戶在哪里經(jīng)歷了挫折？” 目標是收集足夠的觀察結(jié)果，以便可以真正理解你的用戶及他們的觀點。
定義：結(jié)合所有研究并觀察用戶存在的問題。在確定用戶需求時，開始尋找創(chuàng)新機會。
在定義階段，使用在“同理心”階段收集的數(shù)據(jù)來定義需求。整理所有觀察結(jié)果，并在用戶當前的體驗中進行比較分析。不同的用戶是否有一個共同的痛點？識別那些未能滿足用戶的需求。
想法：集思廣益，提出一系列瘋狂的創(chuàng)意想法，以解決在“定義”階段確定下來的未能滿足的用戶需求。給你自己和你的團隊完全的言論/想法自由；在此階段沒有任何想法是不合適的，收集大家的各種想法，此階段想法的數(shù)量超過質(zhì)量。
在這個階段，把你的團隊成員聚集在一起，勾勒出許多不同的想法。然后，讓他們彼此分享想法，混合再混合，在彼此的想法上再產(chǎn)生新的想法。
原型：為想法子集構(gòu)建真實的視覺展示。此階段的目標是了解以上幾個階段形成的想法中，哪些是有效的，哪些是無效的。在這個階段，通過輸出原型的過程，來權(quán)衡想法的影響與可行性。
讓你的想法可操作。比如，做一個新的登錄頁面，畫一個線框圖，并在內(nèi)部尋求大家對此的反饋。根據(jù)反饋對其進行更改，然后用快速而簡單的方式繼續(xù)進行原型設(shè)計。然后，與另一組人分享。
測試：把原型給到你的用戶來獲取用戶的真實反饋。問問自己“這個解決方案是否滿足用戶的需求？” “它是否改善了他們的感受、想法或完成任務(wù)的方式？”
將你的原型展示給真正的客戶，并驗證它是否實現(xiàn)了你的目標。用戶的觀點是否有所改善？新的登錄頁是否會增加用戶在網(wǎng)站上花費的時間？在用戶操作原型時，持續(xù)測試和觀察用戶。
實施：將設(shè)計付諸實施。確保你的解決方案得以實現(xiàn)并觸及到最終用戶的生活。
這是設(shè)計思維中最重要的部分，但也是最常被遺忘的部分。正如唐諾曼所宣揚的那樣，“我們需要做更多的設(shè)計工作?！?nbsp;設(shè)計思維不是魔法，并不能讓你從實際的設(shè)計中解脫出來。Milton Glaser 的話引起了共鳴：“沒有“創(chuàng)造性”這樣的東西。仿佛創(chuàng)造力是一個動詞，一個非常耗時的動詞。這是在你的腦海中思考一個想法，并將這個想法轉(zhuǎn)化為現(xiàn)實的東西。這將永遠是一個漫長而艱難的過程。如果你做對了，那感覺就像是在創(chuàng)作?！?nbsp;盡管設(shè)計思維對產(chǎn)品的影響很大，但只有執(zhí)行設(shè)計想法才能帶來真正的創(chuàng)新。設(shè)計思維的成功在于它能夠改變最終用戶生活的某個方面。第六步：實施——至關(guān)重要。
為什么我們要引入一種新的思維方式？采用設(shè)計思維的原因有很多，足以值得單獨寫一篇文章，但總而言之，設(shè)計思維實現(xiàn)了這些優(yōu)勢：
這是一個以用戶為中心的思考過程，從用戶數(shù)據(jù)開始，創(chuàng)建滿足真實的而不是想象的用戶需求的產(chǎn)品，然后用真實用戶測試這些產(chǎn)品。
它利用集體的專業(yè)知識并在團隊成員中建立了一種大家都認同的想法，并得到廣泛支持。
它通過為同一問題探索多種解決途徑的過程而來帶來創(chuàng)新。
Jakob Nielsen 說：“一個解決錯誤問題的漂亮界面將會失敗。”設(shè)計思維解放了創(chuàng)造力，并將它們集中在正確的問題上。
上面的過程一開始會覺得很深奧，千萬不要認為這就是打開成功之門的鑰匙，相反，應(yīng)該把它當作梯子，在需要的時間和地點為產(chǎn)品提供支持。
每個階段都意味著迭代和循環(huán)，而不是嚴格的線性過程，如下所示。在構(gòu)建和測試初始原型后，通常會返回到理解和定義兩個理解階段。這是因為直到線框原型化并且想法把變?yōu)楝F(xiàn)實，才能真正體現(xiàn)您的設(shè)計。很難一次性就準確評估您的解決方案是否真的有效，在這一點上，循環(huán)進行用戶研究是非常有幫助的。為了做出正確的決策或確定開發(fā)順序的優(yōu)先級，還需要了解用戶的哪些信息？之前沒有研究過的原型產(chǎn)生了哪些新用例？
也可以重復階段，通常需要在一個階段內(nèi)多次進行練習，以達到進入下一階段所需的結(jié)果。例如，在定義階段，不同的團隊成員具有不同的背景和專業(yè)知識，因此看待問題的方法也不同。在定義階段花費大量時間來使團隊成員對問題的認知達成一致是很有必要的。
設(shè)計思維具有可擴展性。對以前那些無法改變思維方式的公司，現(xiàn)在有了一個大家都可以理解的指南，并增加了產(chǎn)品成功的可能性。這不僅適用于產(chǎn)品設(shè)計等傳統(tǒng)的“設(shè)計”主題，還適用于各種社會、環(huán)境和經(jīng)濟問題。設(shè)計思維很簡單，可以在各種范圍內(nèi)實踐；即使是棘手的、未定義的問題。隨著時間的推移，它可以應(yīng)用于改進搜索等小功能，也可以應(yīng)用于設(shè)計顛覆性和變革性的解決方案，例如：重組教師的職業(yè)階梯，以留住更多人才。
我們生活在一個體驗的時代，無論是服務(wù)還是產(chǎn)品，我們都對這些體驗抱有很高的期望。隨著信息和技術(shù)的不斷發(fā)展，它們在本質(zhì)上變得越來越復雜。每一次迭代都會帶來一系列新的未滿足的需求。雖然設(shè)計思維只是解決問題的一種方法，但它增加了成功和突破性創(chuàng)新的可能性。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
小伙伴們畫好視覺稿后，是不是頁面的交互/視覺規(guī)約經(jīng)常丟三落四，常常在設(shè)計宣講時被開發(fā)測試提問？自己表面鎮(zhèn)定，內(nèi)心慌的一筆：這個...我沒想到，那個...我沒想到...
要想在宣講時能夠從容應(yīng)對各種問題，就需要在設(shè)計稿完成后，把設(shè)計規(guī)約提前想好，那么設(shè)計規(guī)約要從哪些方面寫起呢？往往B端產(chǎn)品的頁面更加復雜，要補充的交互規(guī)約更多，小Zi就從實際工作中總結(jié)一些，供大家參考～
先來看個列子：
一個頁面，交互和標注規(guī)則很長很長，很多同學反饋說不知道交互規(guī)約從何寫起，看了上面的列子，大概從以下幾個方面來書寫規(guī)約：
大方面我習慣于分成【整體】和【具體內(nèi)容】來寫。
首先從整體來考慮，首先要考慮頁面是如何布局的，是自適應(yīng)？還是定寬？常用的網(wǎng)頁布局有：靜態(tài)布局、百分比布局、響應(yīng)式布局；頁面的整體布局方式，也決定了頁面具體內(nèi)容規(guī)約的撰寫；
參考文章《3種常用網(wǎng)頁布局與設(shè)計注意點》：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html
1.頁面整體滾動區(qū)域
滾動區(qū)域是從哪里開始？是頁面級滾動嗎？
2.滾動條的樣式
需要給出滾動條的視覺和交互
舉例：
頁面“加載”是做設(shè)計時常常忽視掉的，因為大家肯定是重點考慮有內(nèi)容的情況，并且頁面數(shù)據(jù)是否需要加載、加載時長等等需要根據(jù)前后端接口返回情況確定。
1.補充初始狀態(tài)的頁面；初始頁面是骨架圖還是保持不變，是否添加頁面引導？等都是需要考慮的；
2.補充頁面數(shù)據(jù)為空的樣式；
舉例：
頁面級加載的樣式是什么樣的？也需要補充到設(shè)計稿中；
舉例：
比如“無權(quán)限查看”“記錄已被刪除”“已被拉黑”等等情況；
舉例：
當補充完頁面整體上的規(guī)則之后，就可以著手補充頁面具體內(nèi)容的規(guī)約了。具體內(nèi)容的規(guī)則其實和整體規(guī)則從大方向是差不多的，也是那幾個方面，只是更細節(jié)：
如果頁面整體是定寬的，那么內(nèi)容也是定寬的，就不需要考慮內(nèi)容隨著頁面拉伸或縮小帶來的變化；如果頁面整體是自適應(yīng)的，那么具體模塊可以根據(jù)功能需要來設(shè)置哪些區(qū)域自適應(yīng)，自適應(yīng)的規(guī)則是什么；
舉例：
B端產(chǎn)品設(shè)計場景更復雜，內(nèi)容更加不可控，再加上電腦屏幕大小適配，頁面寬度可自由拉伸，種種因素都要我們更加仔細的考慮頁面的各種極限值情況，如何寫全面設(shè)計規(guī)約是難點。相信在設(shè)計評審會上開發(fā)和測試最常問到的一個問題也是：這里內(nèi)容過多怎么展示？雖然我們在設(shè)計的時候是按照80%的場景去考慮，但是剩下20%的極限場景也需要我們給出設(shè)計規(guī)則。
內(nèi)容過多，具體劃分還可以分成以下幾類：文字過多、選項過多、彈窗內(nèi)容過多、按鈕/標簽過多、表格內(nèi)容過多、功能過多等等情況，每種情況下有哪些解決方式呢，可以參考文章《B端交互設(shè)計之內(nèi)容太多怎么辦》：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
舉例：
用戶反饋，頁面中肯定不少，我們畫頁面時也會畫出大部分提示，但是缺少提示/反饋依然是設(shè)計師常忽略的內(nèi)容，主要是提示的場景非常非常的多，而且有很多細分情況：
1.數(shù)據(jù)處理慢的提示
問題舉例:操作的數(shù)據(jù)過多時，后臺數(shù)據(jù)處理慢是否有提示？
2.操作后的提示
成功、失敗、進行中等，還有部分成功，部分失敗的情況
問題舉例:啟用失敗時如何提示？
3.無權(quán)限、禁用等的提示
問題舉例:項目列表-階段沒有權(quán)限時，需要添加tips提示；
4.缺少二次確認提示
問題舉例:新建頁面點擊取消是否需要二次確認提示?
1.校驗的時機：是失焦后還是提交按鈕時，還是實時的
問題舉例:表單的必填校驗，是失焦實時校驗，還是在提交時校驗？
“實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查全部輸入：
驗證消息顯示在靠近輸入的區(qū)域，并一起顯示；
2.校驗的樣式：是在下方出提示，還是全局提示，還是什么的；
舉例：
不僅要考慮頁面整體的滾動區(qū)域，有些模塊也是單獨需要滾動的；
滾動區(qū)域是哪里？包不包括表頭？標題？有沒有內(nèi)容需要鎖定？滾動條的樣式？這些問題都要給出規(guī)則。
問題舉例:信息內(nèi)容過多時，容器內(nèi)展示不下怎么辦？--答：展示不下時容器內(nèi)出現(xiàn)滾動條，滾動區(qū)域是整個內(nèi)容區(qū)；
1.數(shù)字輸入超長的顯示
問題舉例：極限數(shù)字如何顯示，比如篩選結(jié)果超過三位數(shù)：999+
2.數(shù)值是0時，是否有特殊的規(guī)則
問題舉例：數(shù)值為0時，是否顯示此模塊？
3.是否有輸入限制，比如，限制正整數(shù)、小數(shù)，小數(shù)精確到幾位等等；
我們一般默認熱區(qū)就是觸發(fā)控件的區(qū)域，但是有時可能視覺上圖標需要小一點的，但是熱區(qū)需要更大一點，就要特殊標注出來?？傊?，方便用戶操作為上。
舉例
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
顏色會潛意識地為觀看者提供有關(guān)應(yīng)用程序的大量信息，即使他們從未閱讀過任何文字。
什么是色彩心理學？
不同的顏色實際上可以對人類的情緒甚至行為產(chǎn)生深遠的影響。這是全球各城市許多綠色和藍色倡議者背后的想法：綠色和藍色使觀看者感到更加平靜和放松。
綠色對減輕壓力（和其他因素）的影響如此深遠，以至于實際上可以幫助人們延長壽命。
這對應(yīng)用程序設(shè)計意味著什么？
嗯，顏色的影響不僅僅是觀眾喜歡與否，還會影響他們的感受。例如，深淺不一的藍色會激發(fā)忠誠和可靠的感覺。綠色激發(fā)舒適和幸福。黃色與快樂和刺激有關(guān)。紅色讓人興奮并引發(fā)欲望。
但是那些不一定是感覺的東西呢？人們是否也傾向于將某些價值觀與顏色聯(lián)系起來？
這項調(diào)查要求人們選擇與某個詞相關(guān)的顏色。他們發(fā)現(xiàn)：
信任 = 藍色（34% 的受訪者）
速度 = 紅色 (76%)
便宜或便宜 = 橙色 (26%) 和黃色 (22%)
高品質(zhì) = 黑色 (43%)
高科技 = 黑色 (26%)、藍色 (23%) 和灰色 (23%)
可靠 = 藍色 (43%) 和黑色 (24%)
樂趣 = 橙色 (28%) 和黃色 (26%)
恐懼、恐怖 = 紅色 (41%) 和黑色 (38%)
應(yīng)用程序設(shè)計人員在開發(fā)應(yīng)用程序時最好牢記這些關(guān)聯(lián)。然而，這些都不是應(yīng)用程序開發(fā)人員絕對必須遵循的硬數(shù)據(jù)。相反，它們是開發(fā)人員可以遵循的指南，并結(jié)合下面討論的其他設(shè)計原則。
圍繞顏色的文化差異
在選擇顏色時，牢記應(yīng)用程序的受眾始終是至關(guān)重要的。
例如，在西方文化中，白色往往代表純潔或純真。然而，在亞洲的某些地區(qū)，白色是用來表示哀悼、厄運和死亡的。顯然，如果應(yīng)用不當，這可能會產(chǎn)生嚴重的意外后果。
為此，設(shè)計人員應(yīng)該了解他們的受眾并相應(yīng)地選擇顏色，這在日益全球化的社會中并非易事。
選擇主調(diào)色板
應(yīng)用程序設(shè)計人員和公司等都應(yīng)該在確定其品牌的主要調(diào)色板之前進行仔細研究。最重要的是考慮觀眾和他們想要傳達的內(nèi)容。
藍色是一種流行的顏色，因為它與信任和可靠性有關(guān)，但它也變得有點過度使用了。
橙色可以與廉價聯(lián)系在一起，但也可以與樂趣聯(lián)系在一起。
紅色可以令人興奮和振奮，但也代表恐懼。
更好的使用顏色來設(shè)計應(yīng)用將有助于塑造觀眾的感知。設(shè)計人員需要了解顏色關(guān)聯(lián)以及用戶如何下意識地查看設(shè)計以創(chuàng)建成功的調(diào)色板。
色彩和諧
一旦應(yīng)用程序設(shè)計人員確定了主要顏色，就該選擇其他顏色了。使用一種顏色很簡單，通常不會很引人注目。
但是，選擇的顏色需要很好地搭配。
沖突的顏色會讓觀看者感到不安或有壓力。相反，應(yīng)用程序設(shè)計者應(yīng)該尋求創(chuàng)造一種賞心悅目的組合。一種會讓用戶感興趣并讓他們對應(yīng)用程序感覺良好的應(yīng)用程序，從而引導他們嘗試它。
這里有一些設(shè)計師可以遵循的基本原則，以在他們的設(shè)計中創(chuàng)造和諧的色彩。
單色
首先是在整個設(shè)計中堅持使用相同的顏色，但使用不同的色調(diào)。這增加了產(chǎn)品的興趣但又不會很突兀。
類似色
另一個流行的選擇是使用類似的顏色。這種方案也很難搞砸，盡管設(shè)計人員確實需要了解每種顏色的飽和度。
此方法可以使用色盤上彼此相鄰的顏色。例如，綠色和藍色，或橙色和紅色。
互補色
互補色方案使用調(diào)色板上彼此相反的顏色。例如，黃色和紫色或藍色和橙色。
使用互補色時，設(shè)計師必須仔細選擇陰影和色調(diào)。如果做得不好，很容易創(chuàng)建一個視覺上不和諧的方案。
但是，如果做得好，互補色可以使應(yīng)用程序設(shè)計真正流行起來，并在眾多其他不那么吸引人的應(yīng)用程序圖標中脫穎而出。這可以使用戶更有可能選擇該應(yīng)用程序而不是其他類似功能的應(yīng)用程序。
分裂互補色
這種方法有點復雜，但可以產(chǎn)生一些引人注目的結(jié)果。它采用三種顏色，一種顏色和兩種相鄰顏色的互補色。例如，從紫色開始，然后添加橙色和綠色。
設(shè)計師必須小心使用這種方法，錯誤的組合會使設(shè)計從有趣變成突兀。
正確的應(yīng)用程序設(shè)計顏色
總而言之，應(yīng)用程序設(shè)計中的顏色世界非常復雜。沒有一種顏色會吸引所有觀眾，也不會適合所有品牌。然而，選擇正確的顏色絕對意味著一個成功的應(yīng)用程序和一個普通的應(yīng)用程序之間的區(qū)別。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
在貝殼，有店東、圈經(jīng)、CA等多種服務(wù)角色依賴數(shù)據(jù)信息作業(yè)，各種各樣的數(shù)據(jù)被用于管理、分析和制定目標。但是，房產(chǎn)垂直領(lǐng)域的數(shù)據(jù)非常龐雜，數(shù)據(jù)體量也在急劇增長，圖表的應(yīng)用場景越來越復雜，除了pc和移動端的數(shù)據(jù)看板，還出現(xiàn)了線下門店大屏場景。
與此同時，數(shù)據(jù)展示一直處于無可視化規(guī)范的狀態(tài)，導致頻頻出現(xiàn)“數(shù)據(jù)堆疊”“數(shù)據(jù)出界”“數(shù)值無單位”等可讀性低的問題。因此，把這些復雜、抽象的數(shù)據(jù)，通過更直觀更容易理解的可視化方式展示出來，建立一套專注于房產(chǎn)領(lǐng)域的可視化組件規(guī)范，變得尤為重要。
圖1 數(shù)據(jù)部分展示現(xiàn)狀
Kecharts項目從匯總和梳理數(shù)據(jù)展示問題出發(fā)，聚焦并抽象問題點，旨在建立起統(tǒng)一的可視化規(guī)范。同時，我們還對極端數(shù)據(jù)的展示進行計算規(guī)則處理，從人工配置的效率考量，系統(tǒng)性地幫助用戶進行高效分析和決策。
數(shù)據(jù)規(guī)范的第一步，解決“知道什么數(shù)據(jù)用什么圖表，了解顏色的使用規(guī)范、數(shù)據(jù)排版展示的要點、適配性原則”等基礎(chǔ)規(guī)范，從配色、布局、基礎(chǔ)展示規(guī)則上，滿足數(shù)據(jù)展示的美觀度和可讀性。
最難解決但也最有價值的痛點是：數(shù)據(jù)體量大、維度多帶來的“不確定性問題”，想要把海量、高維的數(shù)據(jù)以準確有效的方式展示，需要建立高質(zhì)量的交互和配圖規(guī)則。因此，我們在梳理基準展示規(guī)范的基礎(chǔ)上，也對極端情況進行了一系列的規(guī)則處理。
數(shù)據(jù)往往是由平臺自上而下傳達到城市，再由專業(yè)的商業(yè)分析師對數(shù)據(jù)進行分析和處理，很多數(shù)據(jù)需要人工繪制和展示。因此，Kecharts在設(shè)計數(shù)據(jù)規(guī)則展示的同時，也要考慮數(shù)據(jù)的可配置輸出規(guī)則，盡可能減少人工操作成本，降低由于人工分析水平不同導致的報告質(zhì)量方差。
建立基礎(chǔ)可視化規(guī)范，是為了將圖表展示拉到基準線水平，也是當前要做的第一步。基礎(chǔ)的規(guī)范建立，可以讓圖表迅速換身衣服，第一時間提升用戶的感受。所以，第一步首先解決配色的使用、基礎(chǔ)的布局、圖形的基本表達等方面的規(guī)范問題，滿足數(shù)據(jù)的基礎(chǔ)美觀度。
圖2 配色色板圖示（局部）
優(yōu)化前，Kecharts各種配色之間關(guān)聯(lián)性低，與整體平臺的表現(xiàn)層形式不統(tǒng)一。優(yōu)化后色板的樣式與KeDesign（貝殼設(shè)計系統(tǒng)，“UXD筆記”公眾號后臺回復“貝殼”，領(lǐng)取VI規(guī)范文檔）無縫融合?，F(xiàn)有配色方案飽和度更協(xié)調(diào)，閱讀體驗更友好。
由于數(shù)據(jù)體量大，我們嘗試將8種常用色擴展成10種常用色以及24種擴展色來更好地滿足業(yè)務(wù)需求。并且根據(jù)不同品牌主色，進行明度調(diào)整。除此之外還增加了更沉穩(wěn)的商務(wù)主題以及暗黑主題配色，滿足特殊業(yè)務(wù)場景的使用。
圖3 配色的概念圖
基礎(chǔ)布局
圖表的構(gòu)成，由一系列獨立的圖形與法元素結(jié)合而成，如包含標題區(qū)、操作功能區(qū)、面包屑、圖例區(qū)、單位區(qū)和圖表區(qū)，通過合理的基礎(chǔ)布局增強圖表的秩序性和一致性，同時規(guī)范標題、圖例等元素的展示適配規(guī)則。
圖4 數(shù)據(jù)基礎(chǔ)布局規(guī)范（局部）
精細圖形
整體的圖形展示細節(jié)也做了統(tǒng)一調(diào)整，從整體排布、字體、字號、圓角、描邊粗細、數(shù)據(jù)軸、標簽等方面進行了優(yōu)化設(shè)計，使整個圖表看起來更加精細。
基礎(chǔ)的配色、字號、布局調(diào)整之后，基本滿足了數(shù)據(jù)的展示基準，從基礎(chǔ)合理性展示和視覺感提升上，有了一定的改良。
圖5 基準規(guī)范后的對比
圖6 柵格化設(shè)計圖示
定義圖表的適配規(guī)則
定義四種圖表卡片的適配方案，當圖表放大或縮小到某一區(qū)間時，內(nèi)部布局會根據(jù)圖表大小變化進行有權(quán)重的刪減，使圖表在多種區(qū)間內(nèi)能夠?qū)⒑诵臄?shù)據(jù)表達的更清晰。
圖7 柵格化設(shè)計圖示
滿足了數(shù)據(jù)的基準展示，并沒有達到完整的可視化展示規(guī)范，海量和高維帶來的展示問題依舊存在。所以，在建立基準規(guī)則的基礎(chǔ)上，結(jié)合貝殼數(shù)據(jù)的特色，需要集中處理極端情況帶來的問題，從基準線提升到具有易用性的“標準線”。
圖8 以餅狀圖為例的極端情況分析
過濾數(shù)據(jù)
首先從底層數(shù)據(jù)進行過濾，過濾底層占比0%的數(shù)據(jù)，減少數(shù)據(jù)呈現(xiàn)量。將占比為0%的大部分數(shù)據(jù)在圖表的可視化展示中去除，轉(zhuǎn)移到圖例中展示，滿足了用戶需要完整數(shù)據(jù)的訴求外還大幅度提升了圖表的可視化程度。
元素優(yōu)化
優(yōu)化標簽、線條、指示等元素的展示規(guī)范，從定義邊界位置、規(guī)范標簽的展示內(nèi)容上，對圖表內(nèi)元素的極端情況做適配處理。
智能檢測
為了消除信息過載帶來的標簽碰撞，我們制定了標簽的智能檢測規(guī)則，當兩個標簽重疊超過1/3時，自動化地隱藏部分標簽，被隱藏的部分可以通過懸停展示詳細信息，不經(jīng)意間大幅度的提升圖表的展示美感和用戶的瀏覽體驗。
圖9 餅狀圖為例的處理過程
從單點問題擴展為通用性規(guī)范處理，在不同類型圖表的極端情況處理過程中，從全局的角度出發(fā)，對極端情況下出現(xiàn)的核心問題做匯總并抽象，在顏色、碰撞、超圖形等方面，輸出極端情況處理規(guī)范。
圖10 通用性智能檢測規(guī)則（局部）
數(shù)據(jù)分析和傳達的過程，依托于人工過濾、處理、繪制和展示，考慮數(shù)據(jù)的配置輸出，人為水平難以把控，盡可能減少人工不必要的操作成本，從而提升數(shù)據(jù)報告產(chǎn)出的質(zhì)量。
在配置自由度時結(jié)合產(chǎn)品定位、屬性和功能進行思考。用戶希望數(shù)據(jù)通過配置層處理后轉(zhuǎn)化為可視化圖表。普通用戶期望通過簡單的操作快速搭建數(shù)據(jù)看板；高級用戶希望對可視化圖表有精細化的自定義需求。
我們盡量用智能處理代替人工對數(shù)據(jù)無效數(shù)據(jù)的篩選，對數(shù)據(jù)的展示做智能的適配，如指標卡的展示，前置設(shè)置了一系列的展示模版，在用戶選擇指標數(shù)據(jù)的同時，會根據(jù)指標的數(shù)量做自動化貼合排布。與此同時，保留了一定的人工可配置自由度，支持用戶可自由配置指標卡的細節(jié)展示等。
圖11 指標卡用戶配置示意
因此，針對大量雜亂的數(shù)據(jù)，數(shù)據(jù)的呈現(xiàn)通常需要兩層呈現(xiàn)給用戶。第一層是數(shù)據(jù)庫和數(shù)據(jù)源，會自動過濾掉存在的垃圾數(shù)據(jù)和無效數(shù)據(jù)。
第二層是數(shù)據(jù)分發(fā)層，盡可能的通過自動化的配置去輔助操作員進行數(shù)據(jù)的分發(fā)和最終數(shù)據(jù)面板的呈現(xiàn)效果。通過簡化操作流程和匹配人為操作習慣，降低學習成本，提升操作效率，為操作者提供“順其自然的設(shè)計”。
圖12 數(shù)據(jù)處理分層圖示
Kecharts的初衷是保證數(shù)據(jù)的真實、高效展示數(shù)據(jù)、遵循美學原則。我們遵循數(shù)據(jù)能夠真實呈現(xiàn)的原則，在可視化表達中確保不遺漏、不誤導，確保數(shù)據(jù)準確性。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
它們是一種體驗洞察和形成參考材料的工具，能夠幫助業(yè)務(wù)人員探討決策使用，它們都是結(jié)合真實用戶反饋形成的。另外這些地圖本身并不能直接提供答案，而是用于促進對話或作為決策導向，它能跨部門讓人們聚在一起討論業(yè)務(wù)目標，指出潛在的機會或達成一致的價值觀與目標，使解決方案更可行。即促進共同參與、共同思考、共同目標、共同發(fā)力。像心智模型、空間地圖、服務(wù)藍圖、用戶體驗地圖、客戶旅程地圖都屬于體驗可視化地圖，也有稱為對齊圖。
用戶畫像 本身可以反映出服務(wù)對象的特征，便于改進業(yè)務(wù)服務(wù)，幫助研究用戶需求或產(chǎn)品痛點，因此在一些體驗可視化地圖中會配合使用。并且可以幫助設(shè)計師指導產(chǎn)品功能、導航、交互、甚至視覺設(shè)計方面的決策，是一種聯(lián)系用戶訴求與設(shè)計方向的有效工具，總之它能讓你知道產(chǎn)品是給什么人用的，他們有什么特征或訴求。
用戶體驗地圖 以個體在某個產(chǎn)品或領(lǐng)域中的體驗經(jīng)歷為主，關(guān)注產(chǎn)品是如何契合個體用戶體驗的，通過用戶個體的行為觸點與視角來洞察商業(yè)機會。是一種比較視覺化、有助于引發(fā)共鳴和聚焦用戶體驗的工具，比較貼合情感化設(shè)計的理念，適用于洞察用戶視角下與產(chǎn)品系統(tǒng)交互的可視化地圖。
所以在作品集里經(jīng)常看見這些體驗地圖就能夠理解了，一方面是作為戰(zhàn)略層的研究報告說明，用于佐證設(shè)計或決策的依據(jù)。另一方面是為了其他讀者達成共識，便于共情設(shè)計目標。當然豐富和美化作品集也是一方面，更多的則是希望不要濫用起來，形同虛設(shè)，成了一個沒有深入作用的裝飾工具。
方便直觀易懂的去解釋用戶畫像與用戶體驗地圖之間的關(guān)系作用，這里我通過流程、相互作用來解釋一下；
體驗地圖是基于用戶研究開展的，所以要考慮研究誰，研究什么問題，在什么場景或領(lǐng)域進行，因此就需要借助用戶畫像去界定范圍，以及形成用戶材料，再去考慮用何種體驗可視化地圖展現(xiàn)，而用戶畫像也將一直貫穿始終提供可參考的用戶信息；
用戶體驗地圖一般都是聚焦于既定范圍的目標群體，一份完整的用戶體驗地圖應(yīng)該包含用戶畫像信息，應(yīng)交代清楚目標用戶的背景、場景、需求、痛點等關(guān)聯(lián)信息，方便讀者了解，以便于代入用戶視角深入到用戶體驗地圖的討論中。
而用戶畫像盡管提供了由外而內(nèi)的視角或部分設(shè)計見解，但并不能滿足項目多樣化視角的需求，且不足以形成一系列的設(shè)計見解洞察，所以用戶畫像始終需要與心智、情景、體驗地圖或研究報告等結(jié)合使用。也就是說用戶畫像需要與用戶體驗地圖配合輸出，兩者誰也替代不了誰。
一個正式且有效的體驗可視化地圖一般必須經(jīng)過四個階段才能完成，最后再得出結(jié)論達成一致；
一、項目啟動；通過內(nèi)部識別或收集用戶反饋找到需求點，計劃研究目的，制定目標。
二、開始調(diào)研；通過研究手段向用戶收集優(yōu)化資料或數(shù)據(jù)，為創(chuàng)造體驗可視化地圖提供可靠的數(shù)據(jù)。
三、闡述分析；選擇闡述方式，通過體驗可視化地圖將研究結(jié)果與核心價值進行呈現(xiàn)，為后面探討做準備。
四、達成一致；使相關(guān)業(yè)務(wù)人員共同參與研討，結(jié)合地圖報告進一步的思考，指出潛在機會或達成一致的觀點。
五、展望未來；根據(jù)研討結(jié)果設(shè)計解決方案，提出價值主張，進一步跟進和實施起來。
真實應(yīng)用中不用急著畫圖準備填充，先明確目標再從用戶研究或資料收集開始。如果沒辦法找到目標用戶進行訪談或測試研究，那么至少找到一線的人員進行訪談或測試，不要依賴自己的見解或認知套用，這些地圖的精髓在于打破內(nèi)部視角建立起一場具有包容性的對話，不同部門的參與者多多益善，所以這些地圖只是研討中心的參考物。
構(gòu)建和使用畫像時大致可以分為兩類；
1. 根據(jù)用戶研究建立正式的用戶畫像
2. 建立人物角色原型
具體取決于用途與條件情況等，制作任何一組用戶畫像都非依托想象力，都是基于事實或用戶研究的。并且不只是簡單的人口數(shù)據(jù)或個人信息描述，如果一組不能達到共情效果的用戶畫像也就失去了核心價值《如何有效快速共情-點擊查看》，就像一份簡歷，沒能體現(xiàn)出個人能力與專業(yè)素養(yǎng)一樣。
制作一個正式的用戶畫像是一個漫長的過程，還需要開展用戶研究，如果你沒有現(xiàn)成的調(diào)研對象或調(diào)研條件，你就可以采用人物角色原型，該方法是由《Lean UX》的作者Jeff Gothelf提出的，他描述到；
“人物角色原型是一個正式人物角色的變式，其最大不同在于人物角色原型不是用戶研究的結(jié)果，而是更多的源于頭腦風暴的結(jié)果。公司成員會從公司理念出發(fā)，基于自身領(lǐng)域的專業(yè)性和直覺，來明確誰是公司產(chǎn)品或服務(wù)的目標用戶，用戶的動機和需求是什么?！币篔eff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)
這類角色原型不用花費大量時間去做用戶調(diào)研，它們是基于已知的特征情況或預期的目標用戶，適合臨時性使用，便于開展前期工作或達成一致的見解，但是人物角色原型并不能代替基于可靠數(shù)據(jù)的用戶畫像。
就是跨部門集體參與貢獻觀點與數(shù)據(jù)來構(gòu)建。前線相關(guān)業(yè)務(wù)人員是必備的，人數(shù)控制在5-8個人就行，要有主持人把控節(jié)奏和參與度，盡可能收集到不同業(yè)務(wù)視角下的問題反饋，討論開始前可以提出一兩個角色原型來激發(fā)討論，然后充實起來，盡管最后可能形成了多個角色甚至有些看起來有沖突，不過沒關(guān)系，重點是讓這些人物角色清晰明確下來，不一致的地方可以進一步的討論。
一般人物角色原型在一頁的篇幅內(nèi)就可以顯示完，主要五個板塊。值得注意的是，一定不要脫離了產(chǎn)品主題的范圍；
一、角色基本資料：角色頭像、姓名、頭銜、單位或一些可用的輔助資料。
二、人口統(tǒng)計特征：一般包含性別、年齡、職業(yè)、收入等與主題相關(guān)的人口統(tǒng)計指標（類似簡歷中的個人信息）。
三、心理統(tǒng)計特征：與主題相關(guān)聯(lián)的因素，主要指不可輕易觀察的心理活動、態(tài)度、信仰、動機、觀念的個人特征。
四、產(chǎn)品相關(guān)行為：指與產(chǎn)品體驗有主要關(guān)系的行為或是行動，包括興趣愛好、個人習慣、專業(yè)活動等。
五、需求與痛點：用戶有哪些與主題相關(guān)的需求或痛點，你的設(shè)計可以滿足用戶那些需求和痛點緩解。
用戶畫像本身可以幫助發(fā)現(xiàn)問題或進行決策，同時也反應(yīng)出了對用戶或用戶視角的共同理解，并且可以在日常研發(fā)工作中持續(xù)使用，例如一些材料歸檔、分享、更新、輔助其他可視化地圖等，以發(fā)揮出更多的余熱。
根據(jù)產(chǎn)品需求選擇定性還是定量分析，亦或者結(jié)合，一般定性適用于用戶需求深挖或業(yè)務(wù)創(chuàng)新等情況，講究的是“為什么”，而定量更像是通過數(shù)據(jù)驗證“有多少”，常用于數(shù)據(jù)分析、趨勢分析、數(shù)據(jù)驗證、做精細化運營和用戶精準投放。
定量需要足夠的數(shù)據(jù)支撐，如果項目需要畫像且企業(yè)不穩(wěn)定、用戶量級不夠不能滿足數(shù)據(jù)需求，則可以借助市場數(shù)據(jù)報告、白皮書、第三方數(shù)據(jù)服務(wù)平臺、調(diào)研服務(wù)公司等來參考，這些數(shù)據(jù)也都是可靠的。大數(shù)據(jù)殺熟就是數(shù)據(jù)畫像的反面引用，通過畫像對用戶進行分層，再挑出用戶中的軟柿子或老實人欺負。
對目標群體要有認知，要根據(jù)特征劃分層級或類型，例如典型用戶、潛力用戶、專家用戶。這些用戶的界定范圍需要業(yè)務(wù)相關(guān)人員去制定，類似一份簡歷我們可以根據(jù)能力對標級別，一般我們可以通過4個比較有影響力的指標進行劃分，至于權(quán)重我們可以采用常見的四象限或卡諾模型；
在制作用戶畫像前可以合理的根據(jù)人物角色原型的特征過濾目標用戶群體，但不要過分依賴，你只是需要找到符合的目標群體，而不是根據(jù)原型找到理想的那個人。
最終調(diào)研對象的關(guān)系表呈現(xiàn)；
定性類畫像不用邀請很多用戶參與研究，一般在5人左右，只有研究資源充沛時才會考慮邀請更多研究對象，一方面是研究發(fā)現(xiàn)5人左右就能反映出絕大多數(shù)問題了，另一方面是出于時間精力和預算情況考慮。
一、確認研究對象的優(yōu)先級，根據(jù)需求背景或目標確認重點跟次要群體來挖掘不同用戶視角下的問題；
二、通過線上招募(APP內(nèi)或相關(guān)平臺發(fā)布有償邀請，亦或者尋求第三方服務(wù)公司幫助)、客戶群(相關(guān)的用戶答疑群邀請)、論壇社區(qū)(發(fā)布招募帖子等)、專家咨詢、產(chǎn)品線上推送等方式，尋找目標群體并建立聯(lián)系；
三、選擇線上訪談、可用性測試、問卷調(diào)查、焦點小組等有效的用戶洞察方式，并設(shè)計好相關(guān)問題或材料準備與用戶進行深入研究(主要圍繞已知問題或新的設(shè)計方案驗證，再就是新的業(yè)務(wù)需求洞察為主)；
四、整理用戶資料，圍繞研究主題建立用戶畫像信息，完成主要信息模塊，可以根據(jù)業(yè)務(wù)需要，將用戶技術(shù)特征、職業(yè)特征、環(huán)境因素進行補充(需要考慮是否與業(yè)務(wù)有一定關(guān)聯(lián)或影響，否則無意義)；
五、完善用戶畫像的細節(jié)，將價值信息同步到畫像中，并對有效信息的細節(jié)進行補充，增加可信度還原真實性；
用戶畫像并沒有一個模版標準，具體還是要看業(yè)務(wù)需求，而且網(wǎng)上的模版挺多的，自己甄別吧。另外在用戶洞察的過程中，我們可以結(jié)合可用性測試、繪制故事板（這兩種研究方法有興趣可以查閱資料，一兩句講不清楚，有機會展開講）等方式一同進行，而不只是把目的停留在建立用戶畫像上，這樣反而獲取的有效信息受限了。
一、數(shù)據(jù)采集
通過有效途徑將用戶產(chǎn)生的數(shù)據(jù)集中，不論是產(chǎn)品數(shù)據(jù)庫、數(shù)據(jù)埋點、第三方數(shù)據(jù)統(tǒng)計或是定量調(diào)研的結(jié)果，這些數(shù)據(jù)都是重要構(gòu)成部分，同時也決定了信息的范圍，比如你拿不到用戶的出行數(shù)據(jù)，那么就根本沒辦法構(gòu)建相關(guān)標簽或指標。
二、數(shù)據(jù)定義
對數(shù)據(jù)進行清洗整理，識別出用戶行為數(shù)據(jù)、用戶偏好、生命周期等數(shù)據(jù)，并進行標簽化分類整理，這些標簽或指標可以體現(xiàn)出某些維度的趨勢或用戶行為預測。不過值得注意的是，在構(gòu)建這些標簽或指標時盡量結(jié)合業(yè)務(wù)流程或生命周期來梳理，考慮畫像建成目的與業(yè)務(wù)場景同時，也要思考標簽的權(quán)重問題，標簽不等于越多越好。
三、構(gòu)建畫像
根據(jù)產(chǎn)品階段或業(yè)務(wù)需要，把相關(guān)業(yè)務(wù)標簽結(jié)合用戶群特征信息整合成用戶畫像，一般的業(yè)務(wù)標簽類型有增長策略、用戶偏好、用戶價值、營銷觸點等，這類畫像可以包攬多個維度信息，還能對周期數(shù)據(jù)可視化顯現(xiàn)趨勢變化，但是在用戶痛點或需求上，可能不會很直觀，需要進一步的結(jié)合用戶場景帶入思考。
通?；ヂ?lián)網(wǎng)產(chǎn)品前期，沒有構(gòu)建標簽或數(shù)字畫像的經(jīng)驗，可以考慮讓團隊引入相關(guān)第三方數(shù)據(jù)畫像服務(wù)，它們可以更便捷的接入到你的產(chǎn)品中并幫助你打標簽做統(tǒng)計；
以下截圖來自第三方大數(shù)據(jù)畫像工具(神策)
*第三方數(shù)據(jù)分析輔助產(chǎn)品也不少，這里只做交流使用
畫像中的角色應(yīng)該更加生動，能夠讓我們感受到真實的存在，只有這樣才能產(chǎn)生共鳴，賦予畫像價值，為此我們可以通過控制以下六點來做的更好。
一、不要特殊化
特殊能加深印象，但是特殊化并不代表產(chǎn)品的典型群體，同時在實際應(yīng)用時容易擾亂共情或分散注意力，例如用戶群體是普通青年，就不要描述成一個帥氣的學霸，也不要為用戶添加一些奇怪的癖好，這些不相干的信息并不能讓畫像更加生動；
二、合理應(yīng)用頭像
通常作品集中的頭像都比較美觀個性，這沒事兒。但實際畫像應(yīng)用中，頭像也是很重要的一部分，會馬上映入眼簾，這些頭像不要使知名人群的，且貼合真實用戶標簽，不用暴露性感或是丑陋異樣的，也不要使用插畫、卡通、3D形象，不要有奇怪或不自然的行為動作。
三、充實細節(jié)
以一款線上教育產(chǎn)品作為背景，舉例原本我們的用戶信息寫到：
那么即可根據(jù)產(chǎn)品屬性結(jié)合實際情況進行豐富補充，例如調(diào)整為以下描述；
雖然沒有過大的變化，但是已經(jīng)將貼合教育產(chǎn)品的地域信息、課程階段、收入情況進行了完善刻畫；
接著再例如，虞溪女士的需求寫到；
簡單來看確實是透出了線上教育產(chǎn)品的需求，但是需求并不深刻，也沒有刻畫出虞溪女士的核心訴求，為此我們可以結(jié)合創(chuàng)造情景故事的方法，融合角色、場景、行動、事件、評價、情節(jié)這些元素去深度刻畫描述，例如以下調(diào)整；
結(jié)合創(chuàng)造情景故事的辦法是為了刻畫出更多細節(jié)，不僅可以讓瀏覽者更好的沉浸在角色視角，也能在完善的過程中深挖出更多有價值的思考；
四、創(chuàng)造情景故事
情景故事不會很枯燥會更抓人心，能夠傳達更多信息的同時，將產(chǎn)品信息與真實情景交融在一起，方便團隊記憶理解以及更好的促進討論。創(chuàng)造情景故事的元素通常有：角色、場景、行動、事件、評價、情節(jié)?？雌饋砭拖袷窃诿枋觥拔遗cxx產(chǎn)品的一天”。
角色：故事的主人翁或是參與者，不可缺少的重要部分；
場景：故事發(fā)生的時間地點物理環(huán)境，例如早上八點半我在擁擠的地鐵上搶到了座椅，并打開了手機；
行動：能夠觀察到且與主題有影響的行為動作，例如我被這個問題難住了，解鎖手機并打開了這個APP；
事件：發(fā)生了什么事兒，角色間做出了什么反應(yīng)產(chǎn)生了何種結(jié)果；
評論：角色怎樣評估并作出決策，有了怎樣的目標，并如何進行下一步。其中任務(wù)目標是驅(qū)動的核心；
情節(jié)：一系列行為與事件的演變過程再到結(jié)果，從問題的發(fā)生到角色推進目標到結(jié)局。例如經(jīng)典的戲劇結(jié)構(gòu)：
*創(chuàng)造情景故事是要花費時間精力的，如果時間充裕你可以慢慢將相關(guān)描述進行轉(zhuǎn)換，時間有限責挑取重點轉(zhuǎn)化；
五、不要孤立使用畫像
在前文就有描述到畫像需要配合其他體驗可視化地圖一起才能更好的發(fā)揮效用，畫像通常始終保持著個體視角，而且沒有辦法傳達一系列完整的體驗報告，所以為了更好的滿足項目多樣化視角的需求，盡量不要孤立的使用畫像。
六、定期更新
產(chǎn)品發(fā)展中，會經(jīng)歷不同的階段與市場變化，用戶群體自然會變。如果說產(chǎn)品在研發(fā)新的功能去開拓年輕化的市場，那同樣意味著目標群體趨向年輕群體，這種時候就需要變更或新增用戶畫像，就不要使用舊的畫像起步了。
基本上做好以上細節(jié)，你的用戶畫像就大功告成了，這就像是結(jié)合STAR法則優(yōu)化項目經(jīng)歷一樣。最簡單的標準就是業(yè)務(wù)人員能夠去理解這些角色并代入角色視角思考，可以有效共情或決策。
首先我們回顧一下用戶體驗地圖的關(guān)鍵詞：既定的用戶群體、應(yīng)用場景或領(lǐng)域，用戶以某個持續(xù)性目標驅(qū)動與你的產(chǎn)品或服務(wù)發(fā)生交互，并且涉及多個階段來實現(xiàn)目標，地圖會通過由外而內(nèi)的視角洞察產(chǎn)品服務(wù)是否契合用戶的體驗。
由此可見在與用戶研討時，我們的問題或測試任務(wù)應(yīng)該覆蓋相關(guān)階段或重要的任務(wù)流程，以此來獲取體驗地圖的相關(guān)重點信息。另外很多產(chǎn)品比較龐大，服務(wù)頗多，因此控制好體驗的階段范圍也很重要，不僅會拉長工期也會使得焦點分散。
用戶體驗地圖主要包含三個層面的內(nèi)容，一、用戶目標階段，二、用戶與產(chǎn)品服務(wù)交互，三、痛點機會洞察；
其實礙于不同產(chǎn)品和服務(wù)類型，體驗地圖的構(gòu)成元素也有差異，不過在漫長的應(yīng)用發(fā)展中也逐步趨于穩(wěn)定。
常見的構(gòu)成元素：
一、用戶需求或目標：
在體驗地圖中，用戶以需求或目標驅(qū)動與產(chǎn)品發(fā)生交互，需求或目標既定了要做什么，應(yīng)該需要什么服務(wù)。
二、行為階段：
行為階段是界定場景的重要部分，以目標任務(wù)階段的生命周期或者關(guān)鍵節(jié)點展開，不一定所有階段托盤而出，階段太多則不聚焦，細分太多則費時間也不一定快速見效。
三、采取的行為觸點或步驟：
用戶使用產(chǎn)品或服務(wù)展開的行為或接觸的設(shè)備、泛功能應(yīng)用等。
四、想法與問題：
在體驗服務(wù)的過程中出現(xiàn)的問題或是一些真實的想法感受。
五、情緒波動與精神狀態(tài)：
情緒和精神狀態(tài)通常是反映服務(wù)好壞或用戶滿意度的重要因素，但同時也難以觀察或量化，通常會根據(jù)用戶對問題的描述來共情情緒，亦或者向用戶提供情緒表情標簽。
六、痛點或機會揭示：
結(jié)合上層階段行為與用戶的反饋信息向下垂直洞察產(chǎn)品服務(wù)的痛點或機會。
七、設(shè)備或其他圖例補充：
例如跨端跨設(shè)備或包含特殊標簽信息的補充說明。
*示例模版
表情包早已成為網(wǎng)友互動和情緒表達的重要部分，但是在實際的可用性測試或訪談中，用戶會相對拘束一些，也不會把各種各樣的表情掛在臉上，所以才說用戶情緒很難研究和洞察，更別說量化執(zhí)行了。有些人可以進行表情管理，情緒更是難以琢磨；
就用戶體驗地圖中的情緒塊來講，通常一定不只是表情icon來做表達，這樣費解還缺乏實際價值，所以一定會加上相關(guān)描述來揭示用戶情緒與觀點。心智模型中用戶情緒感受便是靠的文本描述來傳達。
早期Pieter·Desmet在其《Designing Emotions》一書中提出了如何衡量情緒的研發(fā)方法，他開發(fā)了一款叫做產(chǎn)品情緒度量儀的工具，其原理就是為用戶提供各種表情表達的卡通形象，用戶在體驗過程中根據(jù)自己情緒選出最匹配的那個卡通形象來示意自己情緒。這個工具經(jīng)過不斷迭代并豐富聲音后已授權(quán)到：https://www.premotool.com/，我們可以在度量用戶情緒或其他體驗可視化地圖中配合使用。
另外在使用表情標簽應(yīng)用時，并不大推薦常見的微信表情、QQ表情等，這些表情在長時間的使用中，用戶都會形成一些偏好，這會影響使用決策
在服務(wù)體驗的過程中，很多時候情緒變化并非是單一線型上起伏變，例如：
我在觀看電影高潮的部分突然網(wǎng)絡(luò)異常，那么我的情緒應(yīng)該是多樣化的，一邊是代入高潮部分的激動，另一方面是網(wǎng)絡(luò)帶來的失落感，同時還有等待網(wǎng)絡(luò)恢復的焦急。
為此我們通常有兩種方法來傳遞情緒變化；
1、將喜、怒、哀、樂、悲、恐、驚或需要的情緒標簽化，每種情緒用一個顏色表示，然后使用同軸的趨勢圖結(jié)合用戶行為階段來表示；
2、即使一次展示多種情緒，也難免有積極情緒與消極情緒同時出現(xiàn)的情況，這種時候可以圍繞一條分界線劃分兩類情緒區(qū)間，使用情緒曲線結(jié)合關(guān)鍵因素描述來顯示更加全面而復雜的情緒心理，對應(yīng)每個關(guān)鍵情緒節(jié)點可以使用不同表情圖標細化輔助，使得情緒起伏的信息更充實有價值；
1、建立正確的項目目標是第一步，用戶體驗地圖的優(yōu)勢與作用都有在前面講過(如果忘了可以在“兩者工具的差異與特性”中開始回顧)，使用用戶體驗地圖是有目的性地，它不是優(yōu)化體驗的萬金油，通常都是收集用戶反饋知道某一些階段或環(huán)節(jié)存在問題，而建立優(yōu)化目標開展的工作；
2、鎖定存在問題的階段，建立用戶問卷、焦點小組或用戶測試進行聚焦研究，嘗試收集用戶的意見或優(yōu)化方案；
3、通過白板或線上協(xié)作工具建立簡易的用戶體驗地圖框架，并將研究用戶的畫像信息與碎片信息填入地圖。白板共創(chuàng)的辦法其實就是根據(jù)用戶體驗地圖的框架，結(jié)合用戶視角將自己的觀點寫到便簽貼到對應(yīng)的區(qū)域，避免你一句我一句難以記載和整理；
4、關(guān)注每個階段的過渡，通常問題很容易出現(xiàn)在這些地方，例如付費前到付費后階段，如何進入后者階段就成了關(guān)鍵點，另外沒啥優(yōu)化空間或體驗良好的階段可以折疊起來留出更多空間關(guān)注核心；
5、用戶體驗地圖的畫龍點睛之處在于跨部門協(xié)作完成，而不是閉門造車，邀請一兩個其他部門的人說明要求和完善地圖并不是什么難事，只有這樣最后的結(jié)果才能達成戰(zhàn)略一致，而不是自己繪制完后要求其他人被動接受結(jié)果；
一、首先看你是否與用戶建立聯(lián)系，用戶體驗地圖的個體對象是用戶不是你自己，盡可能的獲取真實的用戶的信息。
二、一個產(chǎn)品運作是需要多個部門協(xié)作的，所以至少要有三個不同部門的人員參與進來。
三、協(xié)作完成用戶體驗地圖和達成共識后，你會驚奇的發(fā)現(xiàn)問題如何解決，各個部門該怎么配合實現(xiàn)都清晰明朗了。
前一陣子跟UXren社區(qū)主理人寶珠老哥討論過，就如截圖所示，更重要的是將企業(yè)各部門協(xié)同在一起，達成一致的戰(zhàn)略目標，共同參與探討出解決方向為業(yè)務(wù)賦能，這才是體驗地圖的精髓所在。
用戶體驗地圖通常包含了一系列階段，而每一個階段都會由多個觸點編排成一段微型體驗，而觸點模板工具將會很好的為你建立和打開一片微型的體驗模型，這種模型是由羅伯特·羅斯曼(j·Robert·Rossman)[美]與馬修·迪尤爾登(Mathew D·Duerden)[美]在《最佳體驗》中提出的一種體驗洞察工具，它可以很好的結(jié)合體驗地圖去進一步的深挖某段流程或階段里需要優(yōu)化的體驗，它們之間的關(guān)系就像一條路線圖與一份詳細的指引說明。當你完成某個觸點模版時，你會對該觸點上的體驗設(shè)計有清晰的認識，并且會形成一份書面報告與執(zhí)行團隊共享和交流，觸點模板可以很好的解釋體驗是如何設(shè)計的，并且將相關(guān)執(zhí)行團隊的角色聯(lián)系在一起，這不是噱頭，你可以根據(jù)后文指引進行嘗試。
體驗是復雜的，在用戶觸點模版工具中，體驗被劃分為平淡的、專心的、難忘的、有意義、革新性五種類型，并且它們具有連續(xù)性，是通過關(guān)鍵特征與關(guān)鍵屬性定義出來的，它們結(jié)合了心理學理論基礎(chǔ)，目的是方便更好的理解體驗，并在設(shè)計實踐中起到指引作用促進交流，因此我們在設(shè)計時也應(yīng)該對用戶體驗結(jié)果有意向性的去設(shè)計，框架如圖；
*關(guān)于參與感的兩種系統(tǒng)思維是兩種不同的思維狀態(tài)，系統(tǒng)1更像是慣性思維，憑借認知或經(jīng)驗更加快速和自動化的思考，而系統(tǒng)2就會開始更主動的更深入的進行思考，參與階段越高思維越深思。
而三個階段分別是；
一、接受：個體意識到和接受體驗過程中正在發(fā)生的事情。
二、思考->處理->計劃：個體開始積極的思考體驗，并對正在進行中的事物做出處理與反應(yīng)，同時可能開始計劃各種應(yīng)對方案。
三、行動：深入的參與到體驗中并引入新的觸點和元素來維持互動，從而共同創(chuàng)造體驗，例如《魷魚游戲》上映后，影片中的“扣糖餅”又帶火了糖餅。
當新的事物被第三階段引入后，又會重新開始接受并循環(huán)，不過這并不代表所有的體驗都能夠完整經(jīng)歷這三個階段。
觸點是用戶進行交互的重要部分，其周期可長可短，會產(chǎn)生不同感受，而一系列的心理感受會促成最終階段或完整的體驗。觸點模版由11個部分組成，它們互相作用指導和揭示體驗設(shè)計的方向與細節(jié)，并把設(shè)計結(jié)果引向預期的體驗方向。
編號：對應(yīng)到體驗地圖的階段編號或是觸點編號，隨著觸點設(shè)計逐步完善，對應(yīng)的位置可能會發(fā)生轉(zhuǎn)移。
標題：對應(yīng)該觸點模版主題的標題或是任務(wù)觸點的名字。
體驗類型：觸點的體驗類型或整體的體驗目標，從平淡的到革新性的五個體驗類型。
期望的反應(yīng)：我們把期望的反應(yīng)視為觸點預期結(jié)果的北極星指標，它可以是多個。我們通過用戶反應(yīng)逐步提煉出預期的結(jié)果供予用戶體驗，例如期望的反應(yīng)是笑容，那么我就可以提煉出“講個笑話、開黑游戲”等可以促成反應(yīng)的體驗結(jié)果，同時期待的反應(yīng)應(yīng)該盡可能的傳遞用戶價值。
期望的結(jié)果：根據(jù)期望的反應(yīng)，我們要提供給用戶哪些體驗來實現(xiàn)。同時期望的結(jié)果應(yīng)該跟類型相匹配。一般我們可以根據(jù) “1. 產(chǎn)生積極情緒、2. 吸引注意力、3. 幫助發(fā)展和加強關(guān)系、4. 從更宏大的視角給人來帶意義、5. 提升能力、6. 孤立自由選擇” 這些類型內(nèi)容作為起點，并根據(jù)體驗項目的情況細化，例如“心情低落想要刷刷手機產(chǎn)生積極情緒”Change“在App上刷會兒短視頻，看點有趣搞笑的段子來緩解下低落的情緒”。
體驗場景元素：觸點模板工具沒有特定的行業(yè)或業(yè)務(wù)模式，因此這些元素根據(jù)需要完善即可。而實際的元素應(yīng)用中也會有不同的權(quán)重，注意重點元素的設(shè)計應(yīng)用。
互動設(shè)計：可以是人與人互動、人機交互或更為復雜的互動，就是有意向性的將元素進行編排與用戶產(chǎn)生互動獲取必要的信息或傳遞。
貢獻者：整個體驗階段中，可見的幕前服務(wù)人員與后臺的服務(wù)員，他們是組成完整體驗的重要部分，例如餐飲店的服務(wù)員與傳菜員就是可見的幕前服務(wù)貢獻者，而廚師們就是幕后的貢獻者。
共同創(chuàng)造：共同創(chuàng)造和可供性是促進用戶參與的兩個重要的方法，并且參與度有高有低。好的體驗更多是與用戶共同創(chuàng)造的，建立合適的觸點與用戶共同創(chuàng)造體驗是重要的！以微信的“拍一拍”來看就是個很好的例子，拍一拍功能本身是加強了微信聊天的可供性，給用戶提供了更多的互動可能，同時用戶可以自己編輯被拍以后的文本，加強了體驗的趣味性，這便是共同創(chuàng)造的過程。可供性為用戶提供更多互動體驗的可能，而共同創(chuàng)造為用戶提供DIY的空間。
優(yōu)化：對觸點進一步的優(yōu)化，加深體驗感受。一般分成了兩大類型，一類是技術(shù)優(yōu)化、一類是藝術(shù)優(yōu)化。例如讓一個App加載短視頻更快更流暢，這就是技術(shù)型優(yōu)化，如果為一個服務(wù)器未響應(yīng)的404界面配上緩解焦慮的插圖，這便是藝術(shù)型優(yōu)化。
過渡：觸點與觸點之間的過渡可能波動、異常、緩慢、復雜等，如何引導用戶正常的過渡到下一個觸點也是重要的一部分，它可以是自動化的隱式過渡也可以是引導性的顯式過渡，就像是安全通道的指示燈一樣將用戶從一個地點帶往另一個地點。
*觸點模版（可直接下載原圖進行打印使用）
通過一段音頻聊天室互動體驗之旅來揭示觸點模版用法與效果，音頻聊天室大家應(yīng)該都熟悉了，這里就不聚焦用戶畫像與用戶體驗地圖了，觸點發(fā)生在用戶第一次進入歌廳音頻房間，那么應(yīng)該怎么設(shè)計體驗來為用戶留下好印象呢？
觸點是發(fā)生在注冊后的第二個階段，即首頁房間列表(編號A02)，完成注冊階段后見到的第一個界面。標題則暫定為“一次非凡的音頻互動之旅”，我們希望新用戶在選擇好一個房間進入后能夠有一次愉悅難忘的體驗經(jīng)歷，而相應(yīng)的期待反應(yīng)則是“有人帶我玩真棒！這個聲音我好喜歡，下次還來找Ta們”。體驗類型則希望是從平淡的體驗類型升華到難忘的。
其中體驗場景除了設(shè)備自身與軟件環(huán)境，更多真實的環(huán)境因素碰撞我們無法預測和控制，因此僅鎖定軟件自身的場景元素?；釉O(shè)計則是關(guān)鍵，軟件本身更多是工具支持，我們需要利用好運營資源跟用戶產(chǎn)生互動來促成體驗結(jié)果，這里我們會根據(jù)技術(shù)可行性優(yōu)先考慮能為用戶提供的體驗結(jié)果，再到互動設(shè)計部分。其次就是過渡部分，預期的過渡觸點實際上會有多個方向，我們優(yōu)先以充值消費作為一個觸點(轉(zhuǎn)化)、私信關(guān)注為另一個觸點(形成互動聯(lián)系方式)，完善后的觸點模版如圖；
在該觸點模版中，主要揭示了如何為用戶打造理想的體驗之旅，不僅涉及到運營方法也包含了軟件的重點優(yōu)化部分，它很好的展示了如何通過角色之間在軟件中的互動來促成體驗與商業(yè)價值，當你把這份資料在團隊里分享后，完全可以清晰的對體驗設(shè)想進行解釋，以促進團隊內(nèi)的深入討論與細節(jié)推進。至于相關(guān)功能的細節(jié)推敲同樣可以采用觸點模版繼續(xù)深入。
接著A02觸點模版中提到的標簽體系優(yōu)化，我們再一次的結(jié)合觸點模版進行標簽的體驗設(shè)計，編號設(shè)定為“A03”，這是一個泛觸點，它涉及到用戶注冊進入時、房間互動、系統(tǒng)消息、消費與充值、裝扮標簽的著落頁，但歸根還是在應(yīng)用內(nèi)。標題為“讓標簽為用戶賦能意想不到的體驗”，在這段泛觸點中我們期望圍繞標簽為用戶打造難忘的體驗，讓標簽產(chǎn)生更多的價值與業(yè)務(wù)轉(zhuǎn)換，經(jīng)過初步的體驗設(shè)計后，新的觸點模版如下；
在這個觸點模版上我們對標簽的作用價值進行了定義，并對功能及業(yè)務(wù)流程上進行了設(shè)想，已經(jīng)初步的形成了標簽體驗的設(shè)計，接下來只要將裝扮標簽的著陸頁與房間內(nèi)的應(yīng)用進行完善設(shè)計，在輔以條件判斷與消息通知打通閉環(huán)就算是完成主要工作了，再此后的內(nèi)容你是繼續(xù)用觸點模版還是設(shè)計交互原型都是可以的，至少目標是明確的。相信寫到這里，觸點模版的應(yīng)用與功效你已經(jīng)一目了然了。
觸點模版的板塊跟信息維度較多，但是考慮到觸點或項目的實際情況，模板內(nèi)的信息填充不用完整。并且它的確可以很好的將體驗設(shè)計的思路整理出來并形成材料分享，對于多個觸點只需要根據(jù)體驗地圖上的順序打上編號后，即可將多個觸點模版的關(guān)系連接起來，你可以將打印填充后的模版依次排列或張貼在白板上的體驗地圖上。
觸點模版就像是一份交互自檢表，它從多個維度去考慮和解釋了觸點體驗的設(shè)計，盡管沒有勾畫出詳細的設(shè)計細節(jié)，但是體驗設(shè)計思路與執(zhí)行團隊的任務(wù)已經(jīng)很明確了。
另外完成觸點模版時，并非是要按照模版里的板塊順序作業(yè)，比如有時候我們是根據(jù)體驗結(jié)果考慮運用哪些體驗場景，如果有固定的場景，那么你就可以根據(jù)場景情況開始考慮，一般更傾向于先設(shè)定體驗結(jié)果進行倒推。再就前面啰嗦過的，我們根據(jù)項目情況完善需要的模塊即可。
更完整的服務(wù)流程可視化工具，可以結(jié)合用戶體驗地圖對服務(wù)流程進行優(yōu)化或調(diào)整，相比傳統(tǒng)的業(yè)務(wù)流程圖，它在用戶角色關(guān)系與前后端分離上有明顯優(yōu)勢。是一種服務(wù)可視化的工具，利于讓產(chǎn)品保持精益（識別價值點、優(yōu)化流程）
多角色的引入，雖然使得藍圖更加復雜，但是能夠反映出更多角色的交互與流程關(guān)系。
客觀來講，這些體驗地圖時常保持爭議，特別是逐步大范圍在業(yè)內(nèi)曝光后，形式化、假把式、濫用等標簽也愈發(fā)明顯吶，這些體驗洞察工具并不總是能夠在項目中發(fā)揮預期作用，它們也需要區(qū)分使用場景跟項目需求情況，如果你沒有嘗試過，可以積極引用，當你熟悉應(yīng)用后你會發(fā)現(xiàn)收獲更多的是一種體驗設(shè)計的思維，一旦需求或痛點擺到面前時不再像一只無頭蒼蠅。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
今年的“雙十一”，朋友圈異常安靜，沒有了以前電商活動的氛圍，沒有漂亮的數(shù)據(jù)，沒有曬圖，有人說是用戶消費疲軟了？數(shù)據(jù)不會騙人，今年”雙十一”一天的GMV還是比去年高了將近500億，而且一大波尾款人在11月1日就已經(jīng)結(jié)束。再加上直播電商，用戶購買渠道變多了。李佳琦直播帶貨一晚就超100億的GMV，說明用戶的消費意愿和消費力還是很強的。算一下，50個李佳琦直播一晚上就能抵上“雙十一”一整天的GMV，有點厲害。中國偉大復興的道路還在繼續(xù)，隨著人民生活水平的提高，文化素養(yǎng)提高，互聯(lián)網(wǎng)普及，消費力只會增不會減，只是戰(zhàn)場在變化。
前些日子發(fā)了PP微助手的優(yōu)化作品，本篇將結(jié)合改版思路和最近對互聯(lián)網(wǎng)設(shè)計行業(yè)的思考進行一些分享，希望對大家有一定的幫助，歡迎大家來指正吐槽~
互聯(lián)網(wǎng)產(chǎn)品最重要的就是流量，沒有流量，就算產(chǎn)品設(shè)計的再好，早晚也會運營不下去?？v觀這些年移動互聯(lián)網(wǎng)的發(fā)展，市場已經(jīng)被分割的差不多了，各個行業(yè)都有龍頭企業(yè)（社交：微信、購物：京東淘寶、出行：滴滴哈羅、外賣：餓了么美團、旅游：攜程等等），各大互聯(lián)網(wǎng)公司業(yè)務(wù)也趨于穩(wěn)定，紅利期已經(jīng)過去，流量市場已經(jīng)變成了“留量”市場。就像淘寶這種大流量的產(chǎn)品，也在吃流量老本。
回歸到設(shè)計，在互聯(lián)網(wǎng)公司做設(shè)計，一直在強調(diào)需要有產(chǎn)品思維、用戶思維，然而在“留量”的時代，更需要我們具有運營思維，同行業(yè)的業(yè)務(wù)趨同、需求趨同，可挖掘的需求少之又少，可以打開同一行業(yè)的各類app一看，就知道產(chǎn)品形態(tài)大同小異。所以只能在“留量”里下功夫，既要減少存量用戶的流失，還要在這基礎(chǔ)上讓存量用戶創(chuàng)造更大的價值。必然，我們在做設(shè)計改版的時候就需要結(jié)合一些運營知識。
“曝光”一詞相信大家都聽過，在拍照時，“曝光”時間越長，照片細節(jié)就越豐富，當然過度“曝光”，也會讓照片失真。在運營一個互聯(lián)網(wǎng)產(chǎn)品時，也需要用到“曝光”，這里的“曝光”是指產(chǎn)品內(nèi)容的“曝光”。
用戶在進入某款產(chǎn)品的時候，都是帶有一定目的性，通常情況都會經(jīng)歷三步操作，從看見內(nèi)容，到與產(chǎn)品互動，最后得到想要的結(jié)果。
這里的“看見”，就要說到產(chǎn)品承載信息的曝光，合理的信息曝光才能更精準快速的觸達用戶。同時，運營同學最關(guān)心的數(shù)據(jù)和流量，也是需要安排合理的信息曝光才能有有效的數(shù)據(jù)和流量。在手機這么一小塊屏幕想把所有內(nèi)容都曝光出來，是不太現(xiàn)實的，就算能，也不合理。把過多的信息一下子全部曝光給用戶，效果反而會很差。通常做法就是對頁面進行樓層的分割，流量進行合理的分發(fā)。大流量的產(chǎn)品，每個樓層都需要單獨部門去運營的，這樣就會出現(xiàn)業(yè)務(wù)主次和優(yōu)先級，不然各部門就會為了爭奪"屏幕地盤"，無限撕逼。
1、樓層怎么分割，哪些樓層是產(chǎn)品部門控制，哪些樓層是運營部門控制，每個樓層顯示哪些內(nèi)容，設(shè)計師需要根據(jù)每個樓層的重要性，去定義屏占比
2、哪些模塊需要首屏曝光，哪些是需要第二屏曝光，依此類推，這個至關(guān)重要，設(shè)計師就要考慮各類機型適配問題，比如iPhoneX一屏能顯示下的內(nèi)容，在其他手機未必能顯出來，這樣會直接影響曝光，導致數(shù)據(jù)不好（等著背鍋吧～），嚴格來講要根據(jù)實際用戶使用機型占比去定義首屏顯示的內(nèi)容。
3、每個模塊內(nèi)容的信息層級，明確信息優(yōu)先級才能結(jié)果為導向去做交互布局和視覺呈現(xiàn)，這時候就是你發(fā)揮的時候，對比、親密關(guān)系、留白等等，都可以上了。
這里結(jié)合PP微助手的一些改版優(yōu)化（非全套），分享一些改版思路。
項目背景：PP微助手是取代電視遙控器一部分功能開發(fā)的一款小程序，核心需求有幾點
1、賬號統(tǒng)一，PPTV時代的用戶，大多都是使用的PPTV的賬號，為了方便管理蘇寧易購賬號體系，會引流把PPTV尚未升級的賬戶統(tǒng)一升級合并至蘇寧易購賬號。
2、投屏功能，看影片終端還是以電視機為主，所以只做投屏，不做在線播放功能
3、智能語音，結(jié)合蘇寧小biu智能語音系統(tǒng)，可以和電視機語音互動，實現(xiàn)交互功能
4、會員業(yè)務(wù)，移動端開通會員比電視端更方便，同時可以用一些運營手段促進用戶開通會員
5、推送活動，電視機打開頻次不如移動端，推送活動給用戶，移動端可以實時看到
電商行業(yè)通常會把用戶分成“大明”、“笨笨”、“小閑”三大類用戶，在視頻類產(chǎn)品，絕大多數(shù)用戶都是“小閑”用戶，來平臺都是找樂子打發(fā)時間的。
PP微助手本來就是輔助電視機的，用戶覺得用遙控器操作麻煩才會選擇用小程序操作。在設(shè)計的時候，把用戶當成是一個并不想動腦子并且很懶的傻子，產(chǎn)品設(shè)計越簡單越好，否則用戶干嘛要用小程序，遙控器挺好的，遙控器的大多交互都已經(jīng)習慣，也沒啥學習成本。
從用戶角度分析，進入小程序無非就是找片源、看片以及看片過程中的一些基礎(chǔ)控制操作（播放、暫停、快進等等），所以簡化了產(chǎn)品整體框架，從原來底部5個tab（首頁、片庫、遙控、搜索、我的），改為3個tab（首頁、遙控、我的）。產(chǎn)品呈現(xiàn)給用戶的樣貌更加簡單直觀，也相應(yīng)的培養(yǎng)了用戶心智，讓用戶對PP微助手這款小程序有個基本定位。
首頁改版前，按照iPhoneX的尺寸，首頁第一屏也就曝光了3個分類，而且下滑到底總共也就幾個分類，片源的曝光度不高，banner呈現(xiàn)也相對普通，就是那種正常電商類頭部banner。同時交互成本也高，要點擊“更多”才能看該分類影片的全部列表，要知道多一步操作就會多損失一部分用戶轉(zhuǎn)化。
改版后，針對第一樓層推薦影片采用電影宣傳時的大海報樣式，視覺焦點更強烈，同時曝光也更強烈一些，你去電影院的時候，看到的電影宣傳海報，大多都是這類豎版的，用戶已經(jīng)有一定的心智模型，所以在這里采用豎版更為好一些。這些推薦影片在這里也作為“hook”，后面會講。當然像電商類產(chǎn)品，首頁需要考慮嚴謹?shù)钠琳急?，這類尺寸肯定不合適。
第二樓層是影片的分類，采用文字tab左右滑動的方式，這種分類方式雖然沒啥設(shè)計感，也普普通通，但是在一個分類眾多的產(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、會員相關(guān)信息展示，未登錄的提示“登錄領(lǐng)券、限時活動等”，非會員提示“會員權(quán)益、開通會員的利益點等”刺激用戶。
改版前優(yōu)惠券和體驗券在不同入口，流量分散了，券的目的就是要讓用戶去使用，需要縮短路徑，更直觀的展示給用戶，能讓用戶快速做決策。如果券種類多的話，還需要區(qū)分各種券樣式，需要讓用戶快速定位想使用的券。
其中已使用和已過期的券對用戶來說就是已經(jīng)沒用的券，并不需要再用單獨的tab分類，并且弱化處理。因為PP微助手會員券相對比較少，不像電商一樣，會送很多商品券，所以用最簡單的形式展示給用戶就行。
值得注意的一點，不是說已過期的券就沒用了，如果運營把控好節(jié)奏，發(fā)券有一定規(guī)律，用戶看到過期的券會有一定的挫敗感，就會經(jīng)常來關(guān)注券?！皬U券再利用”也能增加用戶的粘性。針對快過期的券，必要時候可以做二次提醒，給用戶造成緊張感，會激發(fā)用券欲望。
說服用戶下決定，一般從以下三個點去考慮：時間緊迫性、暗示稀缺性、后果恐嚇性
產(chǎn)品的流量來源有很多，除了自身用戶進入產(chǎn)品的流量，還有線下廣告、線上廣告、分享鏈接等等各種來源。目前主要的流量分發(fā)方式包括：搜索分發(fā)、算法分發(fā)、社交分發(fā)、人工分發(fā)、付費分發(fā)。PP微助手主要應(yīng)用算法分發(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)的流量承接一般都在商詳，以及對應(yīng)的后置鏈路（訂單確認、結(jié)算等等），從各渠道進來的流量，最終匯總在商詳。在商詳，會突出各種利益點和產(chǎn)品自身優(yōu)勢去刺激用戶下單。至于利益點，活動時候的各種優(yōu)惠信息就是典型例子，產(chǎn)品自身優(yōu)勢，比如：淘寶的先享后付、京東有京東物流次日達等等。在PP微助手這里流量承接就是影片詳情以及后置鏈路會員套餐頁，具體可以看上面的“思路三”的分析，怎么去承接流量，怎么去促進轉(zhuǎn)化。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
一、設(shè)計和藝術(shù)的區(qū)別
藝術(shù)：
藝術(shù)是感性、天馬行空、富有創(chuàng)造力的，表達創(chuàng)造者的個人意識。
設(shè)計：
設(shè)計是理性、精密的，為了解決用戶的問題
（你看得懂嗎？你有什么見解？為什么大家見解不一樣？這就是藝術(shù)的魅力）
二、用戶體驗及用戶體驗設(shè)計
什么是用戶體驗？——————使用一個產(chǎn)品時的主觀感受
用戶體驗設(shè)計？———————為了提升用戶體驗而做的設(shè)計
1.用戶體驗設(shè)計
首先要解決用戶的某個實際問題--讓問題變得容易解決--最后給用戶留下深刻的印象。（視覺只是其中一部分，并不是設(shè)計的全部）
Eg：充電插座的苦惱--錯開位置
尿液四濺--廁所里放一只蒼蠅，用戶會去瞄準上廁所（設(shè)計美觀且有趣味性）
2、用戶體驗設(shè)計的特征
(1)嚴謹、理性、創(chuàng)意
先關(guān)注要解決的問題----其次思考有趣的創(chuàng)意幫助用戶得到更好的體驗。
(2)提供特定問題的解決方案
設(shè)計目標是什么，為什么人解決問題，如何解決
Eg:鋼鐵俠u盤死死按住關(guān)機鍵；樓梯是為殘疾人設(shè)計的嗎，我懵了？
(3)不讓用戶思考
用戶感到挫敗，會放棄。你的設(shè)計不要用戶一頭霧水。
(我到底怎么走?)
(4)趣味橫生
尿液四濺貼提示語效果不好，放一只蒼蠅效果很好？
因為：抓住了用戶的心理和行為習慣，同時充滿趣味，吸引用戶
Eg：path推出的商店功能，在里面買自己喜歡的貼紙，搖晃手機貼紙也搖晃，感覺很好玩吧～帶來好的體驗感
3.用戶體驗設(shè)計師遇到問題如何思考
三、各種設(shè)計師的區(qū)分
1.怎么和別人解釋用戶體驗設(shè)計師
A：“你用一個網(wǎng)站的時候，有沒有出現(xiàn)：某個功能找不到了，點擊按鈕沒有反應(yīng)，填寫的信息不知道哪里錯了總是不能提交成功？”
B：我們的工作就是改善這種情況，讓你使用網(wǎng)站時有一個好的體驗，同時能讓用戶感到愉悅和不受打擾。
工作中：除了考慮用戶還要讓公司有利可圖
2.交互設(shè)計師
通過分析用戶心理模型、設(shè)計任務(wù)流程、運用交互知識把業(yè)務(wù)邏輯（需求/功能）以用戶能理解的方式表達給用戶，最終實現(xiàn)產(chǎn)品戰(zhàn)略（公司需求和用戶需求的平衡點）的過程。
即：從公司戰(zhàn)略角度考慮問題，在公司需求的基礎(chǔ)上讓用戶覺得好用、易用
交互設(shè)計師的產(chǎn)出物：不是原型，你不是畫圖的工具，重要的是解決問題的能力
工作內(nèi)容：競品分析文檔、用戶反饋整理、流程圖、設(shè)計草圖、原型...
3.視覺設(shè)計師
原畫：設(shè)計者很強的手繪能力，作品充滿藝術(shù)表現(xiàn)力
平面：傳達思想，較強的感染力
推廣運營設(shè)計師：突出重點抓眼球
UI：良好的審美、具備一定的交互知識
(原畫) (平面) (推廣運營)
4.用戶研究員
通過各種分析和研究，深入了解用戶特征，用戶行為習慣，為產(chǎn)品運營推廣提供必要的方向
工作內(nèi)容：市場分析、競品分析、創(chuàng)建人物角色、問卷調(diào)查、焦點小組、用戶訪談、可用性測試
四、用戶體驗設(shè)計師的作用和價值
1、用戶價值商業(yè)價值
用戶通過優(yōu)秀的設(shè)計快速達到目標，企業(yè)也會財源滾滾
eg：改變一個按鈕的顏色，點擊率提高35%；優(yōu)化操作流程，轉(zhuǎn)化率提高50%...
2、項目價值
跟進各個環(huán)節(jié)，保證產(chǎn)出物質(zhì)量
推進統(tǒng)一及標準化，提升設(shè)計效率
促使項目流程合理，有規(guī)劃
五、交互設(shè)計師的作用和價值
1.工作內(nèi)容
分析重塑需求;與用研配合，了解用戶特征與行為；設(shè)計結(jié)構(gòu)、流程、界面、動態(tài)效果；跟進視覺、前端、開發(fā)；及時整理上線問題，準備下次迭代...
2.品牌價值
維護和突出品牌形象，統(tǒng)一的設(shè)計理念
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
在千禧年來臨之前，我們首先開始在單一視圖屏幕中進行UI設(shè)計，這類屏幕在當時最流行的尺寸是640x480。大多數(shù)時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區(qū)域或文本局部區(qū)塊中設(shè)置了內(nèi)部滾動條。毋庸置疑，當時的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的，并帶有用于布局的表格。那是在智能手機出現(xiàn)之前，隨著事物的發(fā)展，我們經(jīng)歷了第一個向“響應(yīng)式”設(shè)計的根本轉(zhuǎn)變。我們已經(jīng)走了很長一段路，CSS已得到長足的發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計從2010年開始才真正獲得了專有工具。
圖表來源: https://www.webdesignmuseum.org/web-design-history
隨著CSS3的發(fā)布，我們獲得了對“媒體查詢”（Media Queries）的訪問權(quán)限（譯者注：隨著移動互聯(lián)網(wǎng)的興起,我們需要適配多種移動端設(shè)備,這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創(chuàng)造了“響應(yīng)式設(shè)計”一詞。十多年來，我們一直使用“響應(yīng)式網(wǎng)頁設(shè)計” (RWD) 創(chuàng)建網(wǎng)頁布局，作為一種網(wǎng)頁設(shè)計方法，僅需基于一種屏幕尺寸進行設(shè)計，“響應(yīng)式”使我們的設(shè)計能夠適配各種設(shè)備和屏幕尺寸。
在早期，當移動電話還不兼容媒體查詢或JavaScript時，“移動優(yōu)先”和”漸進式增強”的概念就成為了非常流行的方法，當時有很多CSS完全不受支持。
用我們今天的話來說響應(yīng)式設(shè)計，我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設(shè)計從桌面端調(diào)整為移動設(shè)備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。
很快，使用這種“響應(yīng)式”設(shè)計方法可能會被認為與使用表格進行頁面布局一樣過時—就像我們在90年代所做的那樣。
我們通過基于viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們?nèi)狈憫?yīng)“用戶需求”的能力，也缺乏將“響應(yīng)式”樣式注入“組件”本身的能力。
當我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內(nèi)容，每個“塊”都由各種更小的“構(gòu)建塊”組成。這些組件拼湊在一起構(gòu)成我們的網(wǎng)頁。我們可以使用 global viewport information（全局視口信息）來設(shè)置這些組件，但它們?nèi)匀粺o法擁有自己的風格。當我們的設(shè)計系統(tǒng)是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。
好消息是這個生態(tài)系統(tǒng)正在發(fā)生變化，而且它正在迅速變化，這需要我們進行一些思維轉(zhuǎn)變：考慮如何設(shè)計和定義組件樣式以及它們?nèi)绾芜m應(yīng)周圍環(huán)境。
CSS正在不斷發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應(yīng)式網(wǎng)頁設(shè)計” (RWD) 以來，僅僅10多年的時間，這個生態(tài)系統(tǒng)已經(jīng)準備好迎接CSS發(fā)生一些相當大的改變。
讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設(shè)計方法，以及我們?nèi)绾慰紤]界面設(shè)計。
簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應(yīng)”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設(shè)定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗偏好來調(diào)整用戶體驗。
這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：
這些將幫助我們構(gòu)建更具活力和個性化的網(wǎng)頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網(wǎng)站易于訪問的用戶。更進一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經(jīng)在操作系統(tǒng)設(shè)置的偏好。舉個例子，當用戶的操作系統(tǒng)偏好設(shè)定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應(yīng)先尊重他們的偏好，并為其他人提供“動效增強”的體驗。
另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設(shè)定），它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設(shè)置將我們的設(shè)計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發(fā)生。
CSS 中最令人興奮的新興領(lǐng)域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應(yīng)式”設(shè)計到基于“容器”的“響應(yīng)式”設(shè)計的轉(zhuǎn)變對發(fā)展“設(shè)計系統(tǒng)”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發(fā)展方向。
簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設(shè)置規(guī)則。這意味著任何組件都更加獨立，與現(xiàn)代設(shè)計系統(tǒng)保持一致，真正成為“即插即用”模塊，可以轉(zhuǎn)移到任何頁面或布局，而且無需根據(jù)新環(huán)境重新考慮所有內(nèi)容。
“容器查詢”為我們?nèi)绾我?guī)劃、設(shè)計和構(gòu)建特定組件提供了一種更加動態(tài)的方法，因為組件本身擁有它的響應(yīng)信息。
甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要，我們應(yīng)該研究一下。
由于各種“形態(tài)因素”（form factors）的變化和擴展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內(nèi)容中，請記住，這是最具實驗性的，并且只是一項正在進行的工作，仍在嘗試解決我們可能遇到的任何復雜問題，同時考慮未來“形體因素”可能會如何發(fā)展。
在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們?nèi)绾巫寖?nèi)容根據(jù)新環(huán)境進行適配。例如，你可以在一個屏幕上放置一個收起的側(cè)邊欄（或菜單），并允許內(nèi)容在另一個屏幕上展開并隨頁面滾動。
我知道你在想什么，我們已經(jīng)從事網(wǎng)頁設(shè)計并使用“響應(yīng)式”來進行網(wǎng)頁設(shè)計10余年了。我們對其相當滿意，那么為什么要改變呢？如果我們真的以終局視角來看響應(yīng)式設(shè)計，那么它就是關(guān)于個人用戶的用戶體驗設(shè)計。我們正朝著一個與每一位個體用戶高度相關(guān)的時代邁進。我們的網(wǎng)頁體驗應(yīng)該去適應(yīng)用戶的需求偏好。隨著設(shè)計系統(tǒng)的發(fā)展以及我們?nèi)绾蝿?chuàng)建更便攜的網(wǎng)頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基于各個層級來確定用戶的最佳體驗
考慮到這一點，這意味著我們現(xiàn)在可以使用基于頁面的媒體查（包括跨越屏幕的細微差別）來設(shè)計宏觀布局；使用容器查詢的組件設(shè)計微觀布局；使用基于用戶偏好的媒體查詢，根據(jù)用戶獨特的偏好和需求定制用戶體驗。
對于新的響應(yīng)式設(shè)計，有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協(xié)同工作的方式需要我們從根本上轉(zhuǎn)變我們對設(shè)計和用戶獨特體驗的看法。我們需要更加適應(yīng)這樣一個事實：即我們的設(shè)計不是靜態(tài)的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學會在這種模糊性中做出計劃。網(wǎng)頁和設(shè)計的未來變得越來越復雜，我們需要適應(yīng)和挑戰(zhàn)自己，理解“新響應(yīng)式”體驗的意義。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
做一個完整C端項目前，從產(chǎn)品思維得理解、需求分析到場景分析，通過以上分析得出結(jié)論，進而制定我們的設(shè)計目標，把設(shè)計目標落地到解決實際的設(shè)計問題，內(nèi)容較多，大家可以根據(jù)上述目錄來進行選擇性閱讀。
了解用戶心理：“心理”主要是指用戶的情緒，只有了解用戶的心理狀態(tài)，才能知道他們在接觸到或者使用我們的產(chǎn)品時是正面的情緒還是負面的情緒。正面情緒需要我們引導去實現(xiàn)轉(zhuǎn)化，負面情緒需要我們安撫以避免跳出和口碑的損失。
把控用戶行為：最終目的還是引導用戶行為，讓用戶按照我們的計劃進行產(chǎn)品的交互、操作，從而實現(xiàn)對用戶的有效管控和轉(zhuǎn)化。例如：上品店慶推出“購物省錢節(jié)”的概念，聯(lián)合商家推出各種優(yōu)惠活動，就是抓住用戶在購物時想省錢的心理，通過降價、優(yōu)惠券等方案讓用戶在選購商品、提交訂單和結(jié)算階段都保持高漲的情緒，從而推動用戶最終完成付款。
解決用戶痛點: 在完成上面的分析后，我們最終需要把調(diào)研和分析結(jié)論落地為設(shè)計方案，前提是要關(guān)注用戶當前的情緒是負面的還是正面的，如果是負面的情緒，我們可以通過補償、安撫等方案對用戶進行留存。例如：在等待外賣送達時，配送信息頁一般都會有預估時間、位置等信息，讓用戶有一定預期。同時如果遲到時間過長，也會通過準時寶等規(guī)則給予用戶優(yōu)惠券補償，這些都是負面情緒的安慰。
項目思維主要指，我們要具備極強的發(fā)現(xiàn)問題、輸出方案、推動落地的能力。這就是設(shè)計師的項目思維和推動力，可以保證自己的想法快速落地、推動設(shè)計優(yōu)化并盡快上線。
商業(yè)思維是指，拉新：通過產(chǎn)品、運營和營銷策略讓用戶下載產(chǎn)品。留存：讓下載的用戶保持活躍度，留住用戶，便于轉(zhuǎn)化。轉(zhuǎn)化：讓用戶按照我們的業(yè)務(wù)規(guī)劃去注冊、分享、下單、付款等動作，一步步帶入我們的圈套，完成關(guān)鍵操作。變現(xiàn)：將用戶行為變現(xiàn)，內(nèi)容產(chǎn)品的活躍度可以帶來廣告營收，電商產(chǎn)品的成交額就是業(yè)務(wù)收益。
相同點：在實際工作中，設(shè)計師和產(chǎn)品經(jīng)理的目標在本質(zhì)上是一致的，都是解決用戶的痛點、滿足用戶的需求，為用戶提供體驗更好的產(chǎn)品，并在此基礎(chǔ)之上完成用戶轉(zhuǎn)化，實現(xiàn)收益。作為一個設(shè)計師，我們對產(chǎn)品了解的深度不一定比得過產(chǎn)品經(jīng)理，但是廣度上你應(yīng)該要求自己和產(chǎn)品經(jīng)理保持一致。只要掌握產(chǎn)品的架構(gòu)、流程和業(yè)務(wù)的模式、原理即可。
不同點：UI設(shè)計師更注重通過用戶體驗來留存用戶，產(chǎn)品經(jīng)理更多地考慮轉(zhuǎn)化用戶和變現(xiàn)的途徑。
沖突點：這時就會產(chǎn)生一些沖突和矛盾，有時為達到業(yè)績目標，產(chǎn)品經(jīng)理或其他業(yè)務(wù)方可能會提出有損用戶體驗的方案或者策略。
想要解決與產(chǎn)品沖突得問題，就要充分調(diào)動自己的產(chǎn)品思維，保持習慣性的產(chǎn)品思維，才能始終保持和業(yè)務(wù)一致的目標。和業(yè)務(wù)方站在一起，才能找到設(shè)計和業(yè)務(wù)的共同目標，并將業(yè)務(wù)目標轉(zhuǎn)化為可執(zhí)行的設(shè)計目標，才能為設(shè)計帶來更高的價值。
這里就繞不開這個話題----產(chǎn)品思維。別人眼里的UI設(shè)計師，很多人會認為設(shè)計師的工作就是設(shè)計流程頁面、視覺效果。這些工作看起來只是錦上添花，即使沒有專業(yè)的設(shè)計師來設(shè)計，可能只是流程、控件位置不太合理、樣式和顏色不太好看而已，并不會影響產(chǎn)品的開發(fā)和上線。其實，設(shè)計師的價值不僅是藝術(shù)價值，更重要的是為業(yè)務(wù)帶來價值。
UI/UX設(shè)計師，關(guān)鍵在于對用戶場景、對產(chǎn)品細節(jié)的敏感度，這也是其他崗位不具備的技能。實際工作中這些細節(jié)問題，很容易區(qū)分出來專業(yè)性的差異，因為UIUX設(shè)計師是距離用戶最近的人。我們設(shè)計頁面，用戶在頁面上操作和獲取信息。我們設(shè)計流程，用戶通過流程完成各自的需求。我們設(shè)計的產(chǎn)品流程、頁面，是用戶直接接觸和使用的東西?；谶@個原因，設(shè)計師對用戶的需求、反饋是最了解和最敏感的，我們可以通過用戶的反饋、操作數(shù)據(jù)把控用戶的心理狀態(tài)和行為方向。無論是在方向上還是從細節(jié)出發(fā)，挖掘和洞察用戶需求，設(shè)計師有明顯的優(yōu)勢。
所以UI設(shè)計師真正的價值就是通過自己對細節(jié)和場景的思考，自我驅(qū)動，找到設(shè)計優(yōu)化、產(chǎn)品迭代、業(yè)務(wù)提升的機會點。想要找到這些機會點，你需要培養(yǎng)自己的產(chǎn)品思維、項目思維和商業(yè)思維。
01、多與需求方、業(yè)務(wù)方（產(chǎn)品經(jīng)理、運營、市場等崗位的同事）溝通，在參加需求評審的時候，深入了解業(yè)務(wù)和產(chǎn)品的特點、原理。
02、了解產(chǎn)品流程：在接手某項業(yè)務(wù)或產(chǎn)品時，先利用思維導圖對產(chǎn)品的架構(gòu)做一次梳理，通過功能結(jié)構(gòu)圖你可以清晰地看到產(chǎn)品應(yīng)該有的功能。在掌握架構(gòu)的基礎(chǔ)上，對產(chǎn)品的核心流程再進行一次梳理，包括線上、線下所有的流程節(jié)點、體驗接觸點和不同用戶端的流程觸點。
03、多做競品分析，從競品中尋找靈感和產(chǎn)品感。怎么做競品分析具體可查看我的其他文章，競品分析維度的確定。
04、持續(xù)不斷地培養(yǎng)自己的思維能力，深入思考、多做歸納總結(jié)和分析。在做設(shè)計的時候我們也可以讓自己的思維慢下來，多去思考：思考一下為什么做這個需求？對用戶有什么價值？對產(chǎn)品有什么價值？對業(yè)務(wù)有什么價值？設(shè)計、產(chǎn)品、運營應(yīng)該怎么做才能達成這個目標？我們的做法對業(yè)務(wù)、對產(chǎn)品有什么影響？設(shè)計方案能不能很好地平衡業(yè)務(wù)和體驗的關(guān)系？
01、用戶不知道自己真正想要什么。
02、用戶難以說出自己的真實需求，用戶在闡釋自己的需求時，就會不自覺地粉飾和解釋自己赤裸裸的本質(zhì)需求。例如：那些刷視頻就能領(lǐng)紅包得產(chǎn)品，但為什么它最近不火了，這類產(chǎn)品的人群，本質(zhì)需求是：通過刷頁面領(lǐng)紅包，獲取更多的錢，這類人根本不關(guān)心內(nèi)容是什么、內(nèi)容質(zhì)量怎么樣，這就造成了內(nèi)容的觸達效果非常差。
01、了解我們產(chǎn)品的目標用戶群體和現(xiàn)有產(chǎn)品用戶群體，掌握用戶基本信息，分析用戶特征。（Who）用戶是哪些人：性別、年齡、地域分布、學歷收入等。(What) 用戶有什么共性。（Why）為什么選用我們的產(chǎn)品。（Where/When）在什么場景下使用我們的產(chǎn)品。
02、通過了解用戶得到的所有信息，然后創(chuàng)建用戶畫像，得出結(jié)論。那么如何創(chuàng)建用戶畫像呢？
001、人物創(chuàng)建：創(chuàng)建一個虛擬的用戶群體中的一員，利用我們上面提到的用戶相關(guān)信息，可以給他/她一個插畫風格的照片幫助我們具體化這個用戶的人格和形象。然后列出他/她的基本信息，給他/她定一個社會角色，比如：小王，男，28歲，銷售經(jīng)理，我們產(chǎn)品的熟練用戶，月收入2萬，學歷本科。
002、分析動機：這個人物用我們的產(chǎn)品想干什么；這個人物對我們產(chǎn)品某個功能使用較多，需求較強的原因是什么，想達成什么樣的個人目標。
可以通過用戶畫像推測用戶的心理特征和行為偏好，積累了以上信息，你就比較容易進行需求的分析和挖掘了，提煉出解決用戶需求的核心的痛點。例如：解決了用戶在特定場景下的某一個核心痛點，滿足了用戶在當前場景下特定的訴求/需求。例如：共享單車產(chǎn)品就是解決了從車站、地鐵站到家、工作單位最后一段距離的出行痛點。例如：地圖軟件解決的是陌生地區(qū)找不到路和易違章的痛點。
01、了解人性：做設(shè)計就是做人性，只有把握好人性的特點才能更好地滿足用戶心理，進一步引導用戶行為。馬斯洛需求層次理論，人的需求從低到高可分為 5 個層次：我們就可以試著洞察用戶在特定場景下的本質(zhì)需求到底是什么了。生理需求（呼吸/食物/水）：現(xiàn)代社會其實就是對生存條件的追求；安全需求（避免自己受到傷害）；
社交需求（愛與被愛/社會關(guān)系/地位）對情感的需要；尊重需求（被自己認可/被他人認可和尊重）對穩(wěn)定社會地位的需要；自我實現(xiàn)需求（道德層面/內(nèi)心層面的追求和滿足）。
所以用戶的本質(zhì)需求無外乎：生存、金錢、情感、名利、心理滿足這幾個方面。
02、將用戶敘述的需求，轉(zhuǎn)化為本質(zhì)需求：比如：有的用戶說，上品商場最近優(yōu)惠券怎么少了？我都不想去上品買東西了。用戶表意是嫌優(yōu)惠券少，如果我們草率得出：增加優(yōu)惠券運營力度的結(jié)論太過于表面，其實用戶的本質(zhì)是嫌商品太貴了，他們的本質(zhì)需求是省錢，少花錢且買到想要的東西。而這類用戶是對價格極其敏感的用戶，增加優(yōu)惠券只是其中一個策略，是無法滿足他們根本需求的。根據(jù)他們省錢的本質(zhì)需求，我們可以給他們更多地推薦低端商家，哪怕沒有優(yōu)惠券，還是能提升一波 GMV。
進而轉(zhuǎn)化成設(shè)計目標為，要通過我們的設(shè)計能力，給用戶營造一個很省錢的氛圍，而不是一味地給用戶降價或是發(fā)優(yōu)惠券。規(guī)劃更多的秒殺、每日特價、分享領(lǐng)券等活動專區(qū)，在設(shè)計頁面時增加優(yōu)惠券、紅包等元素，突出省錢、低價等文案，可以有效地吸引此類用戶，引導他們下單付款。這就是本質(zhì)需求的應(yīng)用方法。
工具——KANO 模型問卷調(diào)研，主要依據(jù)是用戶調(diào)研，可以通過定性訪談的方式，對部分用戶進行了解，大概了解用戶對需求的態(tài)度；也可以通過定量問卷的方式，通過問卷獲取比較有參考價值的數(shù)據(jù)信息。不同類型的需求和用戶滿意度之間的關(guān)系，將影響用戶滿意度的因素分成五類：
基本型需求：無此功能，用戶滿意度會顯著降低；有此功能，用戶滿意度不會顯著提升。
期望型需求：無此功能，用戶滿意度會降低；有此功能，用戶滿意度會提升。
興奮型需求：無此功能，用戶滿意度不會降低；有此功能，用戶滿意度會有顯著提升。
無差異需求：有無此功能，用戶滿意度都不會有太大變化。
反向型需求：無此功能，不會影響滿意度；但有此功能用戶滿意度會下降。
經(jīng)過需求分析我們會拿到大量用戶需求的相關(guān)信息，在取舍和決策時我們可以使用三個原則 + 一個工具：01、
圍繞本質(zhì)需求和痛點；關(guān)注與業(yè)務(wù)不相悖的需求；解決影響用戶峰值體驗的問題；在做分析時可以利用 KANO 模型，重點關(guān)注模型定位出的基本型、期望型需求，適當關(guān)注興奮型和反向型需求。
至此，我們掌握了產(chǎn)品分析的第一步，也就是找到設(shè)計的方向和基本依據(jù)——用戶需求；下一模塊我們將進入需求分析的第二步——場景分析，來找到設(shè)計可以利用的機會點、切入點！
01、任何產(chǎn)品的誕生都是基于用途，牙刷為了刷牙、菜刀為了切菜、汽車為了出行……生產(chǎn)這些產(chǎn)品是為了滿足用戶的需求，而生產(chǎn)產(chǎn)品時需要考慮的因素如外觀、材質(zhì)、設(shè)計細節(jié)等則源于用戶場景。
02、互聯(lián)網(wǎng)產(chǎn)品其實也是一樣的道理，產(chǎn)品基于用戶的一些需求或者痛點而誕生，基于用戶的使用場景做功能和細節(jié)體驗。
站在用戶的立場思考細節(jié)：必須首先知道用戶需要什么、喜好什么、討厭什么、不能接受什么，才能進一步改善我們的產(chǎn)品。基于用戶的目的、行為偏好等研究用戶在場景里的行為、情緒，從而深入場景，做出正確的決策。
避免主管的質(zhì)疑和批判：有的用戶會有各種各樣“奇葩”的反饋，所以我們要多理解用戶的選擇和立場，避免主觀的質(zhì)疑和批判。
學會聆聽和關(guān)注反饋：在日常工作的溝通、對用戶的訪談中，我們可以試著多用心傾聽對方的表達。
01、還原用戶體驗產(chǎn)品的流程（分析的是場景中的線，包括流程線、行為線等。）02、列出用戶與產(chǎn)品、與線下場景有聯(lián)系的所有觸點。03、通過這些觸點掌握用戶的操作軌跡和行為特征。04、分析用戶的體驗感受。
01、明確分析對象：最重要的是確定一條明確的流程線，分析的產(chǎn)品某個功能或者某個服務(wù)/體驗流程，并非用戶。
02、拆解體驗流程：把分析的流程進行拆分，拆成一個個體驗節(jié)點，實際場景設(shè)置節(jié)點。比如網(wǎng)約車的產(chǎn)品，要根據(jù)用戶在線下叫出租車的體驗場景來拆分，可以拆成走到路邊、招手攔車、上車、行程中、支付下車等幾個重要節(jié)點，然后根據(jù)這些節(jié)點來考慮和分析是否有優(yōu)化或者需要顛覆的地方。
03、創(chuàng)建用戶畫像：主要從用戶的基礎(chǔ)特征、用戶的心理和偏好等信息去做畫像，最后可以形成一個稍稍具體的角色。
04、分析階段：制作表格，把每個節(jié)點的信息進行分析推測和記錄。例如下面表格：
橫向：是第二步拆解出來的所有的流程節(jié)點。
縱向：用戶與產(chǎn)品的觸點：就是用戶如何操作我們產(chǎn)品，點了哪里、在哪里停留時間較長，這都是通過埋點數(shù)據(jù)可以看到的。
用戶目標：從用戶的使用數(shù)據(jù)和用戶訪談中獲取相關(guān)的用戶信息，通過用戶的行為和他們表述的信息找到他們的立場、目的和利益點，從而分析他們想要什么。
用戶行為：為了這個目標會怎么做。
結(jié)果：看我們的產(chǎn)品頁面信息、流程及功能能不能滿足用戶上述的目的和行為即可。
用戶情緒：用戶的目標和我們觸點是否契合，最終的結(jié)果是否能滿足用戶的需求和目的，沒有滿足的時候情緒低落到什么程度，滿足的時候情緒會高漲到什么情況，哪里是最低谷，哪里是最高峰。
05、得出結(jié)論：重點要看的是用戶情緒的起伏。找到最低點，看哪些節(jié)點影響了用戶的體驗，就是產(chǎn)品的痛點，也是我們的設(shè)計發(fā)力點和機會點。
同理心模型適合分析我們產(chǎn)品體驗流程中的某個節(jié)點或細節(jié)功能，不適合進行流程化的分析。包含所看、所聽、所做、感受、所想。
01、明確我們分析的對象是什么：比如：網(wǎng)約車用戶在打車等待接單的環(huán)節(jié)；比如電商產(chǎn)品確認訂單的環(huán)節(jié)；這些環(huán)節(jié)這些環(huán)節(jié)和節(jié)點都有共同的特點，就是集中在有限的一到三個頁面中，用戶的核心操作比較簡單。
02、首先把圖表畫在白板上，用便利貼寫出所看、所聽、所做、感受、所想，五個維度的想法，
03、然后進行集體討論，把這些便利貼提煉總結(jié)，歸納出重點信息，通過這種方式可以避免一個人悶頭思考的局限性，也可以保證思考的全面性。
04、接下來對這個圖進行行為總結(jié)，找到用戶行為的原因，分析用戶的偏好和習慣。
05、最后通過用戶情緒和感受，分析我們產(chǎn)品體驗的問題。
親切：通過情感化設(shè)計，營造親切的氛圍，拉近與用戶的距離。比如：百度地圖可以在導航設(shè)置里將導航車標設(shè)置成自己的汽車品牌，當看到自己車的車標在地圖上移動，用戶就會感覺非常親切和熟悉。
安全：讓用戶感到人身、隱私的安全。比如：嗶哩嗶哩在登錄界面輸入密碼時的二次元形象會有捂眼睛的動作。
互動：我們的產(chǎn)品流程和功能的實現(xiàn)需要用戶的參與。比如：用戶刷新網(wǎng)頁時，由于網(wǎng)速較慢、需要較多的加載時間，在加載的過程中，有很多網(wǎng)站會提供一些互動小游戲。用戶參與進來了，整體等待的時間也就顯得沒那么漫長，這種互動既可以緩解用戶的焦慮情緒，又能有效防止用戶跳出。
驚喜：人們對一件事物的判斷往往會基于最初的信息。所以如果我們在提供最初的信息時就給予用戶更好的結(jié)果，一定可以給用戶帶來驚喜。花小豬在打車時先出現(xiàn)原價，然后彈出優(yōu)惠券動效，價格數(shù)字也嘩啦嘩啦往下降，這個不斷下降的數(shù)字就利用了錨定效應(yīng)，給予用戶一定的驚喜。
關(guān)懷：考慮用戶的使用場景，在場景下給予用戶細節(jié)上的功能推薦或操作建議。比如：美團外賣，在天氣惡劣時會提前提醒用戶：為避免延誤用餐時間，請?zhí)崆跋聠巍１热纾旱蔚纬鲂?，在用戶?jīng)常通勤的時間段也會自動提示：由常用起點至常用終點的路線派車大概需要XX分鐘，點擊即可叫車
預期：難以避免需要等待、甚至反復操作的情況，此時為避免用戶跳出，你需要在細節(jié)上做好預期管理。比如：我們在用支付寶還信用卡時，支付完成后我們能看到已提交——待銀行處理等環(huán)節(jié)的流程提示。比如：我們在填寫一個需要補充大量信息才能注冊的網(wǎng)站賬號時，網(wǎng)站頂部一般會有注冊步驟的導航。當然以上只是最基礎(chǔ)的預期管理，如果你的文案能更俏皮一點，視覺效果上增加一些 IP 、甚至動畫就更好了。
反饋：對用戶的操作及時給予回應(yīng)，尤其是異常場景，需要使用用戶更容易接受的方式給予反饋。
情懷：能給用戶帶來情感上的力量。
品牌：在產(chǎn)品的配色、排版、控件樣式上體現(xiàn)品牌的統(tǒng)一調(diào)性。在產(chǎn)品的體驗流程中貫穿品牌的價值。比如：在京東自營的店鋪購物、使用京東物流的產(chǎn)品會標明“京東物流”，在確認訂單頁也有“京準達”的功能選項，京東通過這種方式，將自營物流、快速到達的品牌特性一一表達。
價值：實現(xiàn)更大的社會價值，從而提升企業(yè)形象。比如：商城的包裝箱、騰訊的 404 網(wǎng)頁上都能看到一些被拐兒童的尋人啟事，因為這些網(wǎng)頁和包裝材料的傳播力極大、傳播范圍極廣，可以帶來良好的社會公益效益。
故事版：體驗地圖和同理心模型，可以分別從流程到節(jié)點對場景進行分析，那么這些場景如何歸納和表達，以供大家決策和評審呢？需要站在用戶需求的角度講故事。故事板這種漫畫/故事的形式易于被受眾接受，在闡釋需求、說明方案時具有更強的親和力和說服力，
描述過程：創(chuàng)建的虛擬人物；明確關(guān)鍵節(jié)點；找到虛擬人物在整個故事中所有行為和目的。
產(chǎn)品思維、需求分析、場景分析這三部分是產(chǎn)品設(shè)計三個基本要素，做好這些分析能幫助我們了解產(chǎn)品、業(yè)務(wù)與用戶之間的聯(lián)系，從而做出體驗好、價值高的優(yōu)秀產(chǎn)品。這些分析都是我們進入設(shè)計工作的前期信息和準備依據(jù)。接下來我們要做的就是明確設(shè)計目標。
01、一接到需求就馬上打開軟件開始往上鋪圖，遇到被卡住的情況，沒有辦法繼續(xù)做下去，總在糾結(jié)。
02、有時候產(chǎn)品經(jīng)理對某個需求也提不出很明確的方向，我們設(shè)計的時候能搞出幾個方向的方案，但是不知道如何決策。
03、我們在著手設(shè)計的時候就沒有想好我們輸出這個設(shè)計圖的目的是什么，比如需要促進產(chǎn)品什么轉(zhuǎn)化、解決用戶什么痛點、解決體驗上哪些問題？
04、我們做這些工作的目的是XXX，只有達到這個目標我們做了這么多工作才有意義、有價值。
05、在日常工作中你也會發(fā)現(xiàn)，產(chǎn)品設(shè)計不等于純創(chuàng)意設(shè)計，產(chǎn)品設(shè)計的關(guān)鍵價值在于發(fā)現(xiàn)和解決問題，通過對體驗流程和頁面細節(jié)的處理/優(yōu)化，得到我們期望的用戶反饋和業(yè)務(wù)數(shù)據(jù)。
01、設(shè)計目標的來源是用戶目標、業(yè)務(wù)目標和產(chǎn)品目標，依據(jù)這三個目標，我們將其轉(zhuǎn)化為設(shè)計目標；
02、然后是將設(shè)計方案朝著既定目標實施，在方案的流程和細節(jié)里體現(xiàn)/實現(xiàn)我們的設(shè)計目標；
03、上線后，及時收集和整理設(shè)計目標、產(chǎn)品目標相關(guān)的數(shù)據(jù)和用戶反饋，驗證我們的設(shè)計方案有無達到目標；
04、然后規(guī)劃下一步的迭代方向。
01、明確用戶目標和產(chǎn)品目標：設(shè)計目標的根本是產(chǎn)品目標，產(chǎn)品目標的根本來是業(yè)務(wù)目標和用戶目標，也就是業(yè)務(wù)的規(guī)劃和用戶的需求、痛點。因此在實際操作中，第一步我們要先明確我們的產(chǎn)品目標是什么，產(chǎn)品目標大多和用戶的轉(zhuǎn)化、功能的使用率有關(guān)，我們朝著這些方向分析一般不會有較大偏差。
02、通過上面目標找到與之相關(guān)的關(guān)鍵用戶操作：比如點擊加購按鈕、比如完成付款驗證操作、比如填寫全部表單信息。
03、將關(guān)鍵的用戶操作轉(zhuǎn)化成可以衡量的數(shù)據(jù)指標：將這些關(guān)鍵的用戶操作轉(zhuǎn)化為可以衡量的數(shù)據(jù)指標，比如加購 BTN 的點擊量、訂單提交后的付款成功率、比如表單信息的完整率。因此設(shè)計目標必須是可量化的，產(chǎn)品使用數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)，比如點擊量、退出率、取消率、跳出率等，才能在設(shè)計方案上線后正確評估我們的方案有沒有完成設(shè)計目標。
01、先去定位設(shè)計難點，找到設(shè)計重點，再著手設(shè)計。完成主流程后再去解決小問題。
02、接著列出流程或需求點，對設(shè)計方案有大致框架；
03、然后針對流程中每個節(jié)點列舉可能會出現(xiàn)的問題把精力放在影響設(shè)計目標和用戶核心體驗的重點問題上。
精益創(chuàng)業(yè)模式里有一個 MVP 的概念，我們現(xiàn)在產(chǎn)品研發(fā)中的敏捷模式也是源于這個概念。簡單來講，就是用較小的成本先做出一個產(chǎn)品，然后快速上線，驗證業(yè)務(wù)模式、產(chǎn)品策略和用戶體驗等問題，然后小版本快速迭代，進行優(yōu)化。
參考資料：
《用戶體驗干貨筆記》
《用戶體驗要素》
《騰訊產(chǎn)品法》
《交互設(shè)計知識體系》
C端設(shè)計前的準備工作，其中重點在于學會需求分析和場景分析。具體掌握需求分析的核心方法步驟，和場景分析中用到的三個工具用戶體驗地圖、同理心模型、情感化設(shè)計、和故事版。需求分析、場景分析是產(chǎn)品設(shè)計的基本要素，做好這些分析能幫助我們了解產(chǎn)品、業(yè)務(wù)與用戶之間的聯(lián)系，從而做出體驗好、價值高的優(yōu)秀產(chǎn)品。這些分析都是我們進入設(shè)計工作的前期信息和準備依據(jù)。
接下來我們要做的就是明確設(shè)計目標，設(shè)計目標的來源是用戶目標、業(yè)務(wù)目標和產(chǎn)品目標，依據(jù)這三個目標，我們將其轉(zhuǎn)化為設(shè)計目標，然后將設(shè)計方案朝著既定目標實施，在方案的流程和細節(jié)里體現(xiàn)/實現(xiàn)我們的設(shè)計目標，在產(chǎn)品上線后，及時收集和整理和設(shè)計目標、產(chǎn)品目標相關(guān)的數(shù)據(jù)和用戶反饋，驗證我們的設(shè)計方案有無達到目標，然后規(guī)劃下一步的迭代方向。以上內(nèi)容，感謝觀看。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.yvirxh.cn