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