支付寶通過螞蟻森林游戲，巧妙地和用戶生活場(chǎng)景結(jié)合，用體系設(shè)計(jì)牽引支付場(chǎng)景延伸，形成行為路徑閉環(huán)，為支付寶儲(chǔ)存強(qiáng)大能量，同時(shí)促進(jìn)更多人主動(dòng)參與，實(shí)現(xiàn)了自己的商業(yè)價(jià)值。

背景

6月5日世界環(huán)境日，支付寶公布了“讓環(huán)保流行起來的”公益項(xiàng)目——螞蟻森林的”成績(jī)單“：截至5月底，螞蟻森林參與者已超過5.5億，累積種植和養(yǎng)護(hù)種樹超過2億棵，種植面積超過274萬畝，相當(dāng)于2.5個(gè)新加坡累積碳減排1100萬噸，強(qiáng)大的傳播力和影響力不言而喻。

盡管支付寶作為線上線下綜合性的生活工具平臺(tái)，其最核心的功能依然是支付，盡管切入我們生活的方方面面的生態(tài)構(gòu)建已經(jīng)越來越完善，但某種程度上，其工具屬性就難逃需要?jiǎng)t臨幸，不需要就躺在手機(jī)里的原生命運(yùn)。而不斷累積巨大用戶體量和高活躍和留存的螞蟻森林就是支付寶改變命運(yùn)的重要抓手之一。

螞蟻森林就像飛輪一樣，通過體系設(shè)計(jì)牽引支付場(chǎng)景延伸，形成行為路徑閉環(huán)，為支付寶儲(chǔ)存強(qiáng)大能量；加上高頻使用，品牌效應(yīng)，社交粘性等形成慣性閉環(huán)推動(dòng)，給支付寶生態(tài)注入源源不斷的增長(zhǎng)力量。

一、留存價(jià)值

在AAARR模型【獲客——>激活——>留存——>收入——>傳播】的流量漏斗中，激活看首次，留存看持續(xù)。

激活：引導(dǎo)用戶首次產(chǎn)生有價(jià)值的行為

支付寶的核心功能是支付，因此激活是指促使用戶使用支付寶進(jìn)行支付的相關(guān)行為。

【注冊(cè)】——>【登錄】——>【……】——>【支付】；便完成了一次激活。

螞蟻森林是支付寶的擴(kuò)展附加功能，不存在支付相關(guān)性，是在核心支付功能支付之外，支付流程路徑也不經(jīng)過螞蟻森林。相比能對(duì)激活環(huán)節(jié)起作用的，如指紋支付精簡(jiǎn)支付路徑，降低操作成本；花唄有錢有紅包激勵(lì)引導(dǎo)用戶選擇……螞蟻森林在激活環(huán)節(jié)對(duì)支付寶產(chǎn)生的價(jià)值是非常有限的。

留存：讓用戶長(zhǎng)期活躍，持續(xù)產(chǎn)生有價(jià)值的行為

對(duì)于支付寶而言，留存是讓用戶更高頻地，更長(zhǎng)時(shí)間地用支付寶進(jìn)行支付相關(guān)的行為。

螞蟻森林能量盡管定義是由綠色低碳行為產(chǎn)生，實(shí)質(zhì)能量閉環(huán)對(duì)應(yīng)的是用戶的打開支付寶APP進(jìn)行的各種行為閉環(huán)，每一個(gè)環(huán)節(jié)都涵蓋了大量的線上線下支付行為。

長(zhǎng)此以往，良性循環(huán)的閉環(huán)培養(yǎng)了用戶的收取和消費(fèi)能量的習(xí)慣，培養(yǎng)用戶支付行為選擇支付寶的行為，即讓用戶對(duì)“螞蟻森林”【上癮】，強(qiáng)粘性留存，用戶量和支付額隨著行為增長(zhǎng)而增長(zhǎng)，自然給支付寶帶來增長(zhǎng)。

Hook上癮模型由《上癮》的作者尼爾·埃亞爾、瑞安·胡佛提出的，主要是如何讓用戶對(duì)產(chǎn)品“上癮”，也就是讓用戶養(yǎng)成使用習(xí)慣的四大產(chǎn)品邏輯，包括四個(gè)要素：觸發(fā)（Trigger）、行動(dòng)（Action）、獎(jiǎng)勵(lì)（Reward）、投入（Investment）；下文將從產(chǎn)品設(shè)計(jì)的角度糅合上癮模型來淺析螞蟻森林體系設(shè)計(jì)對(duì)支付寶帶來留存的持續(xù)提升而助力支付寶增長(zhǎng)價(jià)值。

二、螞蟻森林體系的上癮機(jī)制

1. 核心驅(qū)動(dòng)：戳中癢點(diǎn)——改變世界的公益理想

若缺失了驅(qū)動(dòng)能量，能量飛輪就無法啟動(dòng)。對(duì)于螞蟻森林體系和支付寶核心功能設(shè)計(jì)最本源的驅(qū)動(dòng)力就是人心向善的公益理想。它對(duì)于人來說，不是剛需，也不是痛點(diǎn)，而是“癢點(diǎn)”。

痛可忍，癢難忍。一旦撓起來就停不下來，越撓越想撓，滿足愉悅還充滿期待。

梁寧老師在產(chǎn)品思維30講中定義癢點(diǎn)為滿足用戶虛擬自我，即想象中的理想的自己。

每個(gè)人都有一個(gè)英雄情結(jié)，比如保護(hù)環(huán)境，改變世界的美好理想。螞蟻森林從能量累計(jì)虛擬種樹到實(shí)地種樹公益行動(dòng)有國家權(quán)威背書，有真實(shí)的中國引領(lǐng)推動(dòng)地球植被面積改變見證。

每個(gè)人都做了一點(diǎn)點(diǎn)，每天做一點(diǎn)點(diǎn)，如此世界終將因我們而改變的理想會(huì)內(nèi)化成價(jià)值觀持續(xù)影響人的行為。螞蟻森林中能量產(chǎn)生是用戶日常行為，無需付出多余成本，執(zhí)行門檻低，路徑簡(jiǎn)短，以此便能做公益參與其中，內(nèi)驅(qū)持續(xù)付出，時(shí)間見證改變，當(dāng)中獲得強(qiáng)大的價(jià)值認(rèn)同感和榮譽(yù)感，原本存在于虛擬自我的理想得到實(shí)現(xiàn)。

2. 用戶激勵(lì)：能量機(jī)制設(shè)計(jì)——鏈接支付寶線上線下生活場(chǎng)景

有了核心內(nèi)在驅(qū)動(dòng)，行為也并非自然而然，畢竟這個(gè)豐富的世界，有太多的選擇太多的誘惑，因此必須標(biāo)的明確地驅(qū)動(dòng)用戶選擇并完成產(chǎn)品所期望的行為，同時(shí)也滿足用戶的預(yù)期。

用戶行為激勵(lì)公式：行為=動(dòng)機(jī)*能力*觸發(fā)

螞蟻森林行為A：收能量=想種樹 * 點(diǎn)一下 * 能量球10g

支付寶行為B：支付行為=想獲得種樹能量選擇支付寶 * 已經(jīng)開通了支付寶指紋支付 * 線下有支付寶付款碼

習(xí)慣=行為*頻率

只要賦予行為一定的頻次，讓用戶重復(fù)完成并獲得反饋，就有機(jī)會(huì)讓用戶把這個(gè)行為固定為習(xí)慣。

螞蟻森林的能量機(jī)制等同于其他產(chǎn)品積分機(jī)制，積分激勵(lì)=能量激勵(lì)。

如前述，螞蟻森林的能量閉環(huán)，其中收取能量和消耗能量對(duì)應(yīng)行為螞蟻森林內(nèi)完成，而能量產(chǎn)生依賴于用于通過支付寶平臺(tái)進(jìn)行的各種場(chǎng)景下的行為。

通過能量產(chǎn)生和消損機(jī)制的設(shè)計(jì)，將能量作為媒介，將螞蟻森林與支付寶打通，螞蟻森林的能量閉環(huán)對(duì)應(yīng)著支付寶用戶核心該行為路徑閉環(huán)。

（1）種樹攻略引導(dǎo)

用戶可以通過閱讀種樹攻略了解通過碳減排，碳匯量科學(xué)算法得出的能量生成消損機(jī)制。攻略自帶引導(dǎo)性質(zhì)，引導(dǎo)用戶行走捐，線上線下支付，車票電影票，生活繳費(fèi)，無紙化辦公等等”支付寶行為“，覆蓋了用戶的工作娛樂生活；鏈接用戶各種使用場(chǎng)景，服務(wù)于用戶。

對(duì)用戶沒有任何參與門檻，正常的生活行為無多余付出，獲得能量便是獲得額外的獎(jiǎng)勵(lì)一樣被激勵(lì)。

種類繁多的能量獲取方式，打通線上線下，鏈接多種場(chǎng)景，為支付寶，為阿里系的拓展新功能和產(chǎn)品實(shí)現(xiàn)無縫打通的引流。

（2）延時(shí)驚喜設(shè)計(jì)

考慮工具用完即走的場(chǎng)景特點(diǎn)，產(chǎn)品設(shè)計(jì)行為后經(jīng)過一定時(shí)間周期后方可收取能量的延時(shí)滿足設(shè)計(jì)。即不影響用戶支付行為，又同時(shí)留給用戶”能量生成過程”等待，當(dāng)收獲時(shí)收獲驚喜，獲得滿足感更高。

結(jié)合這種延時(shí)設(shè)計(jì)，避免用戶遺忘，消息推送機(jī)制的設(shè)計(jì)也恰到好處。后臺(tái)推送能量生成消息提示收取，或者能量被偷提醒等，也供用戶主動(dòng)設(shè)置能量收取提醒。

于是就有了”每天叫醒我的不是夢(mèng)想，而是收能量“，助力養(yǎng)成用戶收能量習(xí)慣，也就養(yǎng)成了打開支付寶的習(xí)慣，助力支付寶與用戶生活習(xí)慣強(qiáng)相關(guān)。

（3）游戲化收取能量

為更好的吸引用戶，增加能量收取消損的趣味性，螞蟻森林打造了類牧場(chǎng)寵物養(yǎng)成類游戲——虛擬種樹。

用戶深諳養(yǎng)成游戲之道，點(diǎn)擊能量球便可享有收入囊中的財(cái)富滿足感。能量來源和數(shù)字設(shè)計(jì)清晰量化低碳行為產(chǎn)生的能量獲得，澆灌能量樹木長(zhǎng)大。用戶游戲過程不斷被強(qiáng)化能量與支付的關(guān)系：支付能帶來能量——為了獲得更多能量——用戶會(huì)增加支付寶支付的頻次。

而最具吸引力的，與大多數(shù)養(yǎng)成類產(chǎn)品不一樣的是，螞蟻森林的虛擬種樹達(dá)到一定的能量級(jí)別時(shí)可以種真樹，還能種不同的樹。這種虛擬與現(xiàn)實(shí)的趣味與跨越，持續(xù)刺激用戶的擁有和參與感，沉浸于螞蟻森林的能量循環(huán)，也就給支付寶帶來持續(xù)的用戶活躍和高留存。

3. 豐富獎(jiǎng)賞：行為上癮——確定性滿足感依賴

上癮是對(duì)行為或行為反饋對(duì)應(yīng)的確定性滿足感的依賴，依賴又自然帶動(dòng)心甘情愿的持續(xù)付出。

而螞蟻森林每個(gè)重要用戶行為節(jié)點(diǎn)的設(shè)置都在用戶內(nèi)心建立起強(qiáng)大的確定性，無論是安全感，占有欲，價(jià)值認(rèn)同感，榮譽(yù)感得到的滿足都內(nèi)化驅(qū)動(dòng)行動(dòng)，并能帶來持續(xù)投入進(jìn)而依賴成癮。

（1）行為即能量確信

螞蟻森林種樹攻略中明文定義了能量機(jī)制體系里面各種低碳行為能獲取的能量值，明確定義的規(guī)范讓用戶為了獲得能量而執(zhí)行的低碳行為更加篤定，在規(guī)則下付出一定有相應(yīng)收獲的確信，安全感得到滿足。

（2）獲取能量延時(shí)滿足

低碳行為后經(jīng)過一定的時(shí)間周期便可以看見并收取產(chǎn)生的能量。用戶能收取自己行為產(chǎn)生的能量，還能不受約束的偷取別人的能量，又能通過各種方式獲得能量罩防止他人偷取；自我財(cái)富占有并牢牢掌控得到滿足，還收獲“意外”的財(cái)富的竊喜感；

（3）豐厚多樣獎(jiǎng)勵(lì)

1. 虛擬成就獎(jiǎng)勵(lì)——虛擬環(huán)保證書，虛擬道具，裝扮
2. 真實(shí)公益獎(jiǎng)勵(lì)——能量達(dá)標(biāo)即可領(lǐng)對(duì)應(yīng)樹種，云植各種樹，實(shí)現(xiàn)公益理想
3. 榮譽(yù)獎(jiǎng)勵(lì)——能量排行榜展示好友圈名次，滿足自我榮譽(yù)

螞蟻森林不僅讓用戶獲得的是虛擬財(cái)富占有的滿足感，同時(shí)以其高逼格的碳賬戶內(nèi)核，通過實(shí)景相冊(cè)展示樹木的成長(zhǎng)和綠植面積的變化等等。

通過綠色能量連接，虛擬與真實(shí)掛鉤，虛擬變成現(xiàn)實(shí)的設(shè)計(jì)，讓用戶確信真的能參與到環(huán)保公益中，獲得崇高價(jià)值認(rèn)同感，促進(jìn)用戶持續(xù)地對(duì)追求美好追求公益理想，便是持續(xù)驅(qū)動(dòng)支付行為，驅(qū)動(dòng)支付寶增長(zhǎng)。

4. 全情投入：透析人性——輕社交互動(dòng)玩法

激活用戶的社交屬性，通過加好友，合種樹等實(shí)現(xiàn)能量在人與人之間的流動(dòng)和張力，形成用戶行為的外在激發(fā)和持續(xù)驅(qū)動(dòng)。

（1）線上互動(dòng)閉環(huán)

1）邀請(qǐng)好友可獲得能量罩獎(jiǎng)勵(lì)，保衛(wèi)能量 ——> 老帶新，一起玩 ——> 用戶裂變，拉新促活

2）加好友可偷能量實(shí)現(xiàn)快速增長(zhǎng)能量，加速種樹 ——> 命中占便宜人性小心理，切中偷者用戶爽點(diǎn)，同時(shí)激起被偷者情緒變化，影響用戶決策 ——> 愉悅爽感和憤怒叫屈都會(huì)增加用戶與能量的情緒鏈接，從而更加沉浸與螞蟻森林種樹游戲。

3）好友圈能量排行榜 ——> 利用用戶的競(jìng)爭(zhēng)心理，刺激勝負(fù)欲。為了排行榜更前促使用戶更頻繁產(chǎn)能量，收能量，偷能量，于是打開支付寶的頻次更高。

（2）培養(yǎng)合種忠誠

曉之以理，動(dòng)之以情。合種樹設(shè)計(jì)，讓螞蟻森林有了溫度，我們一起種的，是樹，更是愛。有愛，便有責(zé)任，便有忠誠。

螞蟻森林的設(shè)立愛情樹，親情樹，友情樹，提供機(jī)會(huì)讓用戶與愛的人一起種樹，賦予一棵樹更多的意義。還有明星公益林，大IP公益林運(yùn)營(yíng)結(jié)合，給用戶提供集體歸屬入口。配合精準(zhǔn)運(yùn)營(yíng)，讓用戶產(chǎn)生情感共鳴。輕社交自帶自傳播屬性，邀請(qǐng)好友參與達(dá)到拉新。

合種促使真實(shí)人際關(guān)系牽引形成隱形綁定，用戶互相鼓勵(lì)監(jiān)督一起為種樹努力。人與人關(guān)系黏合促成人與產(chǎn)品的黏合，人對(duì)關(guān)系的忠誠轉(zhuǎn)化成人對(duì)產(chǎn)品的忠誠。相互督促，相互影響，都希望早點(diǎn)種下樹，自然促使使用頻率增加，增強(qiáng)產(chǎn)品粘性，留存自然得到提高。

當(dāng)用戶對(duì)螞蟻森林投入了時(shí)間，精力，甚至情感，無形中，離開螞蟻森林的代價(jià)就越大，即對(duì)螞蟻森林，對(duì)支付寶來說，用戶流失的門檻就提高，流失小，留存就大，促進(jìn)與支付寶持續(xù)的使用。

三、總結(jié)

綜上，最后以螞蟻森林體系與支付寶鏈接的增長(zhǎng)閉環(huán)圖總結(jié)；

羅里吧嗦幾千字，不如直接上一個(gè)圖：

文章來源：人人都是產(chǎn)品經(jīng)理  作者：JoDy

在當(dāng)前的行業(yè)背景當(dāng)中，設(shè)計(jì)師了解交互視覺就足夠了么？NO！JDCD今天帶來服務(wù)設(shè)計(jì)思維，分享好的設(shè)計(jì)將具備哪些技能點(diǎn)～

為什么UED要加入服務(wù)設(shè)計(jì)思維

隨著整個(gè)行業(yè)的融合和發(fā)展，設(shè)計(jì)師職責(zé)的邊界越來越模糊，線上線下的融合，設(shè)計(jì)的鏈路也越來越長(zhǎng)。一個(gè)優(yōu)秀的設(shè)計(jì)師，不僅要懂得視覺、交互，還要懂產(chǎn)品、運(yùn)營(yíng)、用戶研究等。

因此設(shè)計(jì)師輸出的產(chǎn)物不再是單一的設(shè)計(jì)稿，也許是一個(gè)優(yōu)化的建議，一個(gè)方向的描述，或者思路的呈現(xiàn)等等。好的設(shè)計(jì)師應(yīng)該是在全鏈路的各個(gè)環(huán)節(jié)，都能夠有的放矢的輸出對(duì)業(yè)務(wù)有價(jià)值的產(chǎn)物，并最終推動(dòng)業(yè)務(wù)達(dá)成目標(biāo)。

今天我們來聊聊服務(wù)設(shè)計(jì)思維～

什么是服務(wù)設(shè)計(jì)

服務(wù)設(shè)計(jì)作為一個(gè)融合性的學(xué)科，通過對(duì)人、物、行為以及環(huán)境和社會(huì)之間系統(tǒng)關(guān)系的梳理，以用戶為中心，圍繞用戶重新規(guī)劃組織資源，促進(jìn)組織運(yùn)作，提高員工效率，最終提升用戶的體驗(yàn)。

概念讀起來有些生硬，我們簡(jiǎn)單來說：

首先舉個(gè)經(jīng)典的栗子～

如果您想喝咖啡，有兩家咖啡店挨著，咖啡味道一樣，價(jià)格一樣，你會(huì)選擇哪家咖啡店消費(fèi)呢？理由又是什么？同樣的兩個(gè)咖啡店，要做一款店面銷售APP，我們來看看兩家咖啡店是如何做的～

咖啡店A的做法：

召集設(shè)計(jì)師埋頭苦干了幾個(gè)月，然后交付給顧客，結(jié)果顧客在這個(gè)APP里并沒有得到想要的。

咖啡店B的做法：

與顧客交談，做研究和調(diào)研。觀察顧客們?cè)诤瓤Х惹啊⒑瓤Х葧r(shí)、喝完咖啡后都做些什么，并據(jù)此畫出用戶體驗(yàn)地圖，找到他們?cè)隗w驗(yàn)地圖中的高潮和低谷點(diǎn)，以此找到服務(wù)的機(jī)會(huì)點(diǎn)，再開始尋求解決方案。

同時(shí)，團(tuán)隊(duì)找到利益相關(guān)者，比如店員，聽聽他們平時(shí)遇到的問題，聽聽創(chuàng)始人對(duì)咖啡店最初的愿景，還有市場(chǎng)團(tuán)隊(duì)、供應(yīng)商等人…這些利益相關(guān)者們?cè)谝黄痖_一個(gè)工作坊，他們確立明確的商業(yè)目標(biāo)，開始設(shè)計(jì)出一些概念，并且向已有的顧客做測(cè)試分析。他們做了技術(shù)分析，并繪制了服務(wù)藍(lán)圖，確保中后臺(tái)系統(tǒng)能支持概念的落地，他們?cè)O(shè)計(jì)出了顧客喜愛的APP。

以上兩家咖啡店的案例呈現(xiàn)中，用戶接觸到的服務(wù)產(chǎn)品最終使用效果則大相徑庭。對(duì)于咖啡店的客戶來說，咖啡店B就是做到了服務(wù)設(shè)計(jì)。

為了加深大家理解，再舉個(gè)例子～

假設(shè)你家燈泡壞了，你要換燈泡，需要個(gè)梯子。

此時(shí)產(chǎn)品設(shè)計(jì)的工作就是設(shè)計(jì)這個(gè)梯子，怎么樣才能輕便好用，美觀大方。但是服務(wù)設(shè)計(jì)要做的是思考需要個(gè)梯子換燈泡這個(gè)需求，或者是燈泡壞了需要修這個(gè)需求，基于這個(gè)需求／問題，服務(wù)設(shè)計(jì)給出的解決方案可以是：

你需要一個(gè)梯子，但不需要在家里備一個(gè)

• 有一個(gè)平臺(tái)可以提供租用梯子，按小時(shí)計(jì)費(fèi)。
• 社區(qū)（物業(yè)／社區(qū)自治組織）提供租／借的梯子（共享基礎(chǔ)工具）。
• 梯子分享平臺(tái)，我用了你家的梯子，你可以用我家的電鉆。

你不需要一個(gè)梯子，你只想修好你的燈泡

• 買燈泡的時(shí)候便附帶了修燈泡的增值服務(wù)
• 處理修燈泡等雜事的人員雇傭平臺(tái)
• 你平時(shí)在社區(qū)做義工，此時(shí)也會(huì)有社區(qū)義工前來幫你修。

以上這些方案如何選擇，如何完善，誰來買單？誰來運(yùn)作？具體實(shí)現(xiàn)方式、傳達(dá)方式，包括產(chǎn)出方案，都是屬于服務(wù)設(shè)計(jì)的內(nèi)容。

服務(wù)設(shè)計(jì)五大原則

為了更好的應(yīng)用服務(wù)設(shè)計(jì)，設(shè)計(jì)師們需要了解服務(wù)設(shè)計(jì)思維的基本原則，并在打造服務(wù)時(shí)，聚焦服務(wù)設(shè)計(jì)思維的原則。輔助一些工具、方法去支持和實(shí)現(xiàn)原則基礎(chǔ)上的服務(wù)設(shè)計(jì)。

1. User-centered 以用戶為中心

以用戶為中心，服務(wù)需要從用戶的眼睛來看世界。無論是服務(wù)還是產(chǎn)品，其本質(zhì)最終都是為了解決用戶的問題，因此我們必須始終貫徹以用戶為中心的思想，這是我們所有工作的基礎(chǔ)。

工具1：用戶畫像

在產(chǎn)品開發(fā)或創(chuàng)建服務(wù)的早期階段，需要首先明確：用戶是誰？他們的需求是什么？為什么會(huì)選擇我們的產(chǎn)品？理解用戶的第一步是創(chuàng)建用戶畫像。

用戶畫像基于群體的真實(shí)信息，由多維度數(shù)據(jù)組成，整合所有用戶群體信息的集群。除了人的自然屬性，用戶畫像也會(huì)含有如生活習(xí)慣、行為特征等人的社會(huì)屬性。汲取真實(shí)的，具有共同點(diǎn)的用戶信息，作為多維度數(shù)據(jù)。

這類數(shù)據(jù)最終可以代表一類用戶群體。用戶屬性在一定情況下可能發(fā)生改變。

例如，因工作原因更換居住地，飲食習(xí)慣的改變，網(wǎng)購習(xí)慣從化妝品變?yōu)槟笅胗闷返?。用戶畫像是?dòng)態(tài)變化的過程，需要不斷迭代管理用戶畫像。

工具2：典型用戶

典型用戶又被稱為「真實(shí)虛擬人」（real fake man），因?yàn)楸M管人物是虛構(gòu)的，但它背后的動(dòng)機(jī)和需求是真實(shí)的。

典型用戶越具體、特征越詳細(xì)，我們想要獲取的那個(gè)「終極用戶形象」就會(huì)越清晰真實(shí)！明確典型用戶和使用場(chǎng)景的關(guān)聯(lián)，避免孤立使用典型用戶，脫離用戶場(chǎng)景。

我們通常將典型用戶檔案打印成板或海報(bào)，方便整個(gè)團(tuán)隊(duì)分享。復(fù)雜產(chǎn)品或服務(wù)的典型用戶會(huì)有多個(gè)，代表多種不同類型的用戶。

比如，網(wǎng)購平臺(tái)的典型用戶從職業(yè)和年齡的維度，可能會(huì)有商務(wù)精英、職場(chǎng)小白、在校學(xué)生、空巢老人、全職太太等。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

工具3：同理心地圖

同理心地圖通過多維度（所想、所感、所聽、所看、所說）描繪更加生動(dòng)的用戶形象，便于跨領(lǐng)域團(tuán)隊(duì)建立對(duì)目標(biāo)用戶的同理心，從中得到意想不到的洞察。

同理心地圖可針對(duì)特定用戶群來描述：用戶的想法和感覺（think&feel）。

• Hear-用戶聽到了什么。
• See-用戶看到了什么。
• Say&do-用戶說了什么和做了什么。
• Pain-用戶的煩惱與痛苦。
• Gain-用戶真正想要的東西與價(jià)值。

使用這個(gè)工具的關(guān)鍵在于要有同理心，框架只是輔助思考。同理心不是與生俱來的，但可以訓(xùn)練得到。培養(yǎng)同理心的最好方式是帶入真實(shí)情境中，用身體與大腦去參與、模仿和感受。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》——同理心地圖以媽媽使用冰箱為例

工具4：影子計(jì)劃

影子計(jì)劃即像「影子」一樣伴隨用戶進(jìn)行觀察，是對(duì)用戶體驗(yàn)產(chǎn)品/服務(wù)的結(jié)構(gòu)化觀察，主要用于新產(chǎn)品/服務(wù)的消費(fèi)者研究領(lǐng)域，通過觀察用戶使用某些產(chǎn)品或服務(wù)時(shí)的情緒、肢體語言、節(jié)奏、行為模式和時(shí)間等信息來全面了解用戶。

工具5：AEIOU觀察框架

AEIOU是整理觀察記錄的框架工具，通常會(huì)在觀察時(shí)使用表單直接記錄，可以和影子計(jì)劃結(jié)合使用。

• A-活動(dòng)activity：人們?yōu)閷?shí)現(xiàn)某一目標(biāo)而實(shí)施的一系列行為。
• E-環(huán)境environment：活動(dòng)發(fā)生的場(chǎng)景。例如周遭環(huán)境的屬性、功能、特點(diǎn)、氛圍。
• I-互動(dòng)interaction：人與人、人與物、人與空間，或者人與數(shù)字之間的互動(dòng)。
• O-物品object：涉及物品。環(huán)境里有哪些物品？和用戶活動(dòng)的關(guān)聯(lián)是什么？
• U-使用者user：用戶

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

2. Co-creative 共創(chuàng)

服務(wù)設(shè)計(jì)所解決的是一項(xiàng)復(fù)雜的問題，它沒有正確的答案，只有最優(yōu)解。如何找到最適合路徑？讓服務(wù)提供者和使用者以及不同的利益相關(guān)方，共同參與設(shè)計(jì)和創(chuàng)造的過程。借助不同背景、不同職能的人不同維度的思考，共同探索最優(yōu)解。

共創(chuàng)，無疑是服務(wù)設(shè)計(jì)最佳的工作方式。

工具1：瘋狂發(fā)想法

人與動(dòng)物或最好的人工智能之所以不同，是我們?nèi)祟惥邆鋵ⅰ甘鞘裁础梗╳hat is）引導(dǎo)至「如果什么，將會(huì)怎樣」（what if）的能力。瘋狂發(fā)想法就是給挑戰(zhàn)一個(gè)不同的前提，在這種背景下思考更多的解決方案。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

工具2：頭腦風(fēng)暴圖

如果您的思路還沒有被充分打開，還有另外一種常用的方法可以幫你拓展思考，那就是頭腦風(fēng)暴圖。

頭腦風(fēng)暴圖有九種角度的思考方案：替代法、借鑒法、逆向法、組合法、改進(jìn)法、拓展法、消除法、轉(zhuǎn)換法、重組法。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

工具3：世界咖啡

世界咖啡的主要精神就是跨界。不同專業(yè)背景、不同職務(wù)、不同部門的一群人，意見互相碰撞，激發(fā)出意想不到的創(chuàng)新點(diǎn)子。人們很容易被自己的專業(yè)和經(jīng)驗(yàn)所限制，公司也很容易被既定文化或價(jià)值觀所限制，同構(gòu)性越強(qiáng)，越不容易產(chǎn)生新的點(diǎn)子。

世界咖啡讓參與者從個(gè)人固有風(fēng)格、學(xué)習(xí)方式和情感智商等維度中解放出來，用新的視角看世界。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

工具4：DVF篩選法

共創(chuàng)最后一個(gè)步驟也是最重要的一個(gè)部分是篩選，在眾多的概念中發(fā)現(xiàn)真正的滄海遺珠是一個(gè)巨大的挑戰(zhàn)。

我們可以從用戶、商業(yè)和技術(shù)三個(gè)維度來篩選概念，即DVF篩選法。

Desirable用戶合意性，F(xiàn)easible運(yùn)營(yíng)/技術(shù)可行性，Viable商業(yè)可行性。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

3. Holistic 整體性

用戶體驗(yàn)就像一場(chǎng)有計(jì)劃、有組織的精心設(shè)計(jì)的演出：它有高潮，也有低谷，它環(huán)環(huán)相扣地在講述一個(gè)故事，而用戶就身在其中。把握用戶的情緒和服務(wù)的節(jié)奏尤為重要，更重要的是由點(diǎn)及面地全局思考，保證這個(gè)故事的整體性。

工具1：用戶體驗(yàn)地圖

用戶體驗(yàn)地圖梳理了典型用戶從初次了解服務(wù)到形成契約關(guān)系的完整過程，站在用戶的視角再現(xiàn)用戶場(chǎng)景和服務(wù)流程的體驗(yàn)感受。

此工具很實(shí)用，下圖是以一次部門內(nèi)部設(shè)計(jì)分享演講為例，站在聽眾的角度設(shè)計(jì)演講的節(jié)奏、內(nèi)容、互動(dòng)等，關(guān)注聽眾的感受，才能讓這次分享演講達(dá)到想要的效果。

工具2：場(chǎng)景卡

場(chǎng)景卡用于描述不斷重復(fù)發(fā)生的問題，其作用在于從場(chǎng)景中獲得洞察，以及未來服務(wù)的機(jī)會(huì)。它和用戶體驗(yàn)地圖的區(qū)別是它專注于單一的場(chǎng)景，可以更細(xì)微地了解用戶處境。場(chǎng)景卡經(jīng)常和用戶體驗(yàn)地圖搭配使用，用來展開思考重要觸點(diǎn)，甚至有時(shí)會(huì)融入用戶體驗(yàn)地圖中變成一部分。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

工具3：服務(wù)供給地圖

服務(wù)供給地圖（offering map）是用來分析可提供給用戶的服務(wù)?？梢暬姆绞娇梢愿玫仃U述想要提供的服務(wù)。由于用戶需求（needs）和服務(wù)端的供給（offering）有著直接對(duì)應(yīng)的關(guān)系，在表達(dá)服務(wù)概念時(shí)，可以同時(shí)呈現(xiàn)用戶需求和服務(wù)供給。此時(shí)服務(wù)供給地圖通常需要展現(xiàn)邏輯和層次，因此多用信息架構(gòu)圖表現(xiàn)。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

4. Sequencing 有序性

服務(wù)需要有邏輯、有節(jié)奏地視覺化展示出來。服務(wù)是在一段時(shí)間內(nèi)的動(dòng)態(tài)過程，時(shí)間線對(duì)用戶非常重要。服務(wù)的節(jié)奏也很重要，會(huì)影響用戶的情緒。

工具1：故事版

故事版是以用戶為主要角色，以爽點(diǎn)、痛點(diǎn)或者產(chǎn)品、服務(wù)與用戶的互動(dòng)為劇本發(fā)展的「場(chǎng)景分鏡頭」，是講故事時(shí)的重要道具。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

工具2：桌面演練

如果說故事版是平面示意圖，那么桌面演練（desktop walkthrough）就是個(gè)三維故事版，能夠隨時(shí)補(bǔ)充新的想法，更快速的移動(dòng)和判斷。它可以看成是幫助設(shè)計(jì)者模擬端到端用戶體驗(yàn)的互動(dòng)式的迷你劇場(chǎng)。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

工具3：戲劇原型

戲劇原型是用表演的形式，輔助一些簡(jiǎn)單的道具來模擬搭建服務(wù)場(chǎng)景，展示服務(wù)內(nèi)容，把服務(wù)體驗(yàn)概念帶入日常生活場(chǎng)景的檢驗(yàn)方式。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》

5. Evidencing 有形化

無形的服務(wù)需要被適時(shí)展現(xiàn)出來。服務(wù)很多時(shí)候是在后臺(tái)默默進(jìn)行的，用戶無法感知。

工具1：服務(wù)藍(lán)圖

服務(wù)藍(lán)圖能幫助設(shè)計(jì)者視覺化呈現(xiàn)服務(wù)時(shí)如何被執(zhí)行與運(yùn)作的。用戶體驗(yàn)地圖關(guān)注用戶在每個(gè)服務(wù)互動(dòng)觸點(diǎn)所經(jīng)歷的事情與感受，服務(wù)藍(lán)圖更注重服務(wù)中的各個(gè)要素有沒有被正確地設(shè)計(jì)和整合在一起，來描述整體的體驗(yàn)流程。

△ 圖片摘自：《服務(wù)設(shè)計(jì)驅(qū)動(dòng)的革命：引發(fā)用戶追隨的秘密》-共享汽車服務(wù)藍(lán)圖

工具2：服務(wù)缺口

服務(wù)缺口是用戶對(duì)服務(wù)的期待或需求和實(shí)際接收到的服務(wù)之間的落差。服務(wù)缺口是一個(gè)分析模型，可以用來探討服務(wù)發(fā)生的原因。

工具3：利益相關(guān)者地圖

利益相關(guān)者地圖是以圖畫來視覺呈現(xiàn)和理清所有利息相關(guān)者之間的方法。與服務(wù)有關(guān)的各個(gè)群體因?yàn)楣餐睦婢墼谝黄?，服?wù)提供方在解決問題時(shí)就能夠善用資源。對(duì)利益相關(guān)者來說，綜合全面的概述是改善服務(wù)或創(chuàng)新嘗試所必須的。

△ 圖片摘自：利益相關(guān)者地圖 Stakeholders Mapping

服務(wù)設(shè)計(jì)與用戶體驗(yàn)設(shè)計(jì)的區(qū)別

體驗(yàn)設(shè)計(jì)關(guān)注觸點(diǎn)和人，而服務(wù)設(shè)計(jì)則是由表及里，將觸點(diǎn)、用戶體驗(yàn)和組織中后臺(tái)支持都規(guī)劃在內(nèi)，體驗(yàn)設(shè)計(jì)是服務(wù)設(shè)計(jì)的起點(diǎn)。

△ 圖片摘自：服務(wù)設(shè)計(jì)又來了！服務(wù)設(shè)計(jì)強(qiáng)調(diào)的是「幸福感」

另一個(gè)區(qū)別就是服務(wù)設(shè)計(jì)的收益者是雙方（提供者和接收者），而用戶體驗(yàn)則聚焦于用戶。

說到這里，可能部分同學(xué)還是沒有記清楚服務(wù)設(shè)計(jì)的和用戶體驗(yàn)設(shè)計(jì)，其實(shí)服務(wù)設(shè)計(jì)包含了用戶體驗(yàn)設(shè)計(jì)，也包含人性化設(shè)計(jì)或者情感化設(shè)計(jì)等等。如果一個(gè)設(shè)計(jì)只有接收者單獨(dú)受益，那不能稱之為服務(wù)設(shè)計(jì)，只能說是針對(duì)用戶的用戶體驗(yàn)設(shè)計(jì)。

個(gè)人感悟

世界變化如此之快，你還站在原地嗎？我們時(shí)刻走在學(xué)習(xí)的路上，不斷地武裝自己。遇到新的概念或者方法論，要先深入了解并進(jìn)行獨(dú)立思考。實(shí)踐才能出真知，多應(yīng)用到自己的項(xiàng)目中，結(jié)合項(xiàng)目進(jìn)行實(shí)踐和反思，讓我們?cè)谠O(shè)計(jì)的路上走得更遠(yuǎn)！

敲黑板劃重點(diǎn)，服務(wù)設(shè)計(jì)思維，我們講了這么多～分享出去跟小伙伴一起學(xué)習(xí)吧，你也要記得來復(fù)習(xí)哦～

文章來源：優(yōu)設(shè)    作者：Design with CloudAI

和大家分享一下，楊楊在年前做的一套新年主題圖標(biāo)，整個(gè)過程成長(zhǎng)很大，也希望能給大家一些啟發(fā)。

其實(shí)一套主題圖標(biāo)對(duì)于一個(gè)剛畢業(yè)的大學(xué)生來說，難度不小，但只要愿意學(xué)習(xí)，還是可以攻克重重困難，最后把需求做好的。

新年嘛，關(guān)鍵詞的發(fā)散就不多說了，無非就是鞭炮、對(duì)聯(lián)、福、燈籠等等。

我們直說重點(diǎn)：

• 風(fēng)格如何選取
• 找不足的維度
• 透視角度優(yōu)化
• 顏色優(yōu)化
• 怎么增加亮點(diǎn)

風(fēng)格如何選取

對(duì)于風(fēng)格，應(yīng)該如何選擇呢，比如有描邊扁平風(fēng)格：

△ Martin David作品

有輕質(zhì)感的擬物風(fēng)格：

△ Man King作品

這里可以給大家一個(gè)參考維度：

界面常駐功能性圖標(biāo)一般會(huì)使用描邊、扁平風(fēng)格的圖標(biāo)，而對(duì)于節(jié)日主題圖標(biāo)，圖標(biāo)如果太平會(huì)顯得比較冷靜，所以加一些質(zhì)感的渲染會(huì)更有氣氛。

而且增加質(zhì)感一定程度上可以彌補(bǔ)造型上的不足，而且很出效果，對(duì)于時(shí)間有限的需求，是個(gè)不錯(cuò)的選擇。

所以這次新年主題圖標(biāo)的需求，我們選擇了輕質(zhì)感的風(fēng)格。

找不足的維度

由于沒有做圖標(biāo)的經(jīng)驗(yàn)，所以第一版的樣式犯了一些基礎(chǔ)型的問題：

有不足不可怕，可怕的是不知道不足在哪里，所以清晰有條理的找到問題也是我們?cè)O(shè)計(jì)必須具備的能力。

我們從以下三個(gè)維度進(jìn)行問題拆解，供大家參考

• 厚度的一致性：既然是輕質(zhì)感風(fēng)格，那就需要讓圖標(biāo)有一定的立體感，也就是厚度，而圖中的鞭炮、小鼓看起來有些平，沒有體現(xiàn)出厚度。
• 顏色的一致性：一組圖標(biāo)顏色一定要看起來是和諧，用的色相要保持一種，比如現(xiàn)在鞭炮的紅色有些偏暗紅，而小鼓的顏色偏黃紅，這也是比較明顯的問題。
• 創(chuàng)意亮點(diǎn)的發(fā)掘：圖標(biāo)中有一個(gè)老鼠的形象，想表達(dá)一定的創(chuàng)意性，但是老鼠的造型還不夠可愛飽滿，并且這個(gè)創(chuàng)意點(diǎn)和平臺(tái)品牌關(guān)聯(lián)性不強(qiáng)，如果用在別的平臺(tái)也可以的話，那就證明還可以再想象獨(dú)特性。

燈籠是五個(gè)圖標(biāo)中做的相對(duì)比較穩(wěn)的一個(gè)。

問題和優(yōu)化方向都有了，接下來就是調(diào)整了！

造型方面的優(yōu)化

首先我們來優(yōu)化造型方面的。

既然我們要做立體化質(zhì)感的圖標(biāo)，那圖標(biāo)就不能太平，原有的鞭炮角度太正，所以在角度上進(jìn)行了優(yōu)化。

并且因?yàn)橐粋€(gè)鞭炮有些太單調(diào)，所以把數(shù)量增多，優(yōu)化如下：

除了鞭炮以外，我們認(rèn)為那個(gè)鼓的造型本身不夠飽滿，短時(shí)間內(nèi)比較難出效果，所以及時(shí)更換了元素——錦鯉（錦鯉和推薦貌似還點(diǎn)關(guān)系）：

多次調(diào)整后，圖標(biāo)在立體化方面有了很重要的突破。

顏色方面的規(guī)范

之前的顏色有些偏暗，有些發(fā)黃，所以我們定了一個(gè)顏色規(guī)范，在主色上都使用統(tǒng)一的顏色，這樣在延展的時(shí)候，就不容易跑偏：

只要嚴(yán)格保持顏色規(guī)范的使用，不停的對(duì)比調(diào)整，一定可以讓一套圖標(biāo)的顏色不跑偏。

創(chuàng)意方面的優(yōu)化

咱不說一組圖標(biāo)，每個(gè)都有亮點(diǎn)，但至少有一個(gè)是相對(duì)比較特別的，這是非常有必要的，否則整體看起來就會(huì)非常平庸。

產(chǎn)生亮點(diǎn)的方法有很多，比如風(fēng)格、透視、顏色、品牌基因等等。

由于我們?cè)陲L(fēng)格、顏色等方面都已經(jīng)固定，所以選擇在品牌基因的維度出發(fā)進(jìn)行優(yōu)化。

一說到品牌基因，我們就可以聯(lián)想到吉祥物，由于又是鼠年的新年主題，所以我們將自己的吉祥物黑子與老鼠的元素結(jié)合，讓「吉祥物黑字」穿上了「老鼠外衣」，并且手舉春聯(lián)：

可謂是整組圖標(biāo)最大的亮點(diǎn)，這個(gè)生產(chǎn)創(chuàng)意的方法其實(shí)很常用，大家一定要多多練習(xí)。

最后我們看一下優(yōu)化前后的效果：

優(yōu)化前：

優(yōu)化后：

文章來源：優(yōu)設(shè)    作者：菜心設(shè)計(jì)鋪

圖形是平面設(shè)計(jì)的核心元素之一，故圖形設(shè)計(jì)也是設(shè)計(jì)師必須掌握的重要能力，不論是海報(bào)設(shè)計(jì)、廣告設(shè)計(jì)、包裝設(shè)計(jì)、UI 設(shè)計(jì)、Logo 設(shè)計(jì)都離不開圖形設(shè)計(jì)，其中最具代表性的還是要數(shù) Logo 中的圖形設(shè)計(jì)，所以蔥爺從 logo 圖形入手，總結(jié)了 6 個(gè)最常用的圖形設(shè)計(jì)方法。

加法

加法是圖形設(shè)計(jì)中最常見、最實(shí)用的方法，即把兩個(gè)或兩個(gè)以上的元素組合成一個(gè)新的圖形。

加法操作方式主要有兩種：

第一種：將兩個(gè)或兩個(gè)以上元素的圖形拼接或組合在一起，得到的新圖形中雖然含有加法中的每一個(gè)元素，但外形輪廓已不是他們當(dāng)中的任何一個(gè)圖形，即它們都是新圖形的子圖形，這種相加的方式關(guān)鍵在于找到各元素可以巧妙連接的點(diǎn)，或者可以完美組合的方式。

△ 字母C與鉆戒組合在一起。

△ 將樹葉與咖啡杯巧妙連接起來。

△ 廣州塔與「品」字融合在一起。

△ 字母U與H組合。

第二種：將元素 A 融合進(jìn)元素 B 中，得出的圖形在外形上仍保持著元素 B 的大體特征，但是元素 A 也完美地融入在里面。即 B 是母圖形，A 是子圖形，這種方式的關(guān)鍵在于元素 A 是否能完美地融入元素 B 當(dāng)中。

△ 游戲手柄是子圖形，河馬是母圖形。

△ 愛心是子圖形，狐貍是母圖形。

△ 海浪是子圖形，樹葉是母圖形。

1. 實(shí)例：高音符號(hào)+眼睛

由于高音符號(hào)中間的螺旋與眼珠造型類似，所以具備了做加法的前提，但要怎么組合效果會(huì)比較好呢？我們可以嘗試一下，首先我嘗試了第一種方法，即把高音符和眼睛都作為新圖形的子圖形，如下圖。

雖然兩個(gè)元素都得到了完好保留，但造型不太美觀、簡(jiǎn)潔，而且這兩個(gè)元素的線條并沒有融合起來，而是簡(jiǎn)單、粗暴的相加。所以我嘗試了第二種方法，把高音符作為眼睛的子圖形，如下圖。

上圖把兩個(gè)元素完美連接了起來，整個(gè)圖形比方案一簡(jiǎn)潔了不少，而且仍保有比較高的識(shí)別性，所以這個(gè)思路更靠譜，在此基礎(chǔ)上用輔助線規(guī)范一下，這個(gè)圖形設(shè)計(jì)就完成了。

比喻

即把元素 A 通過變形或者增加一點(diǎn)輔助元素，使其在造型上向元素 B 靠近，但仍保有圖形 A 的識(shí)別性，新得到的圖形介于圖形 A 和 B 之間。

比喻手法成立的前提是，元素 A 與元素 B 在造型上要比較接近。

△ 通過變形把手掌比喻成鴿子。

△ 通過變形把字母V比喻成鹿頭。

△ 通過在條紋狀的「M」上增加一雙筷子，把其比喻成面條。

1. 實(shí)例：把愛心比喻成桃子

愛心圖形在外形上與桃子本來就相似，所以我們只需要在愛心上方加一片小樹葉就能達(dá)到目的。

不過上圖太過常規(guī)，沒有設(shè)計(jì)感和獨(dú)特性，所以我在愛心上做了一點(diǎn)加工，形成了循環(huán)的效果，如下圖。

大致效果還行，接下來，我們用輔助線把這個(gè)圖形比較規(guī)范地畫出來就可以了。

正負(fù)形

正負(fù)形又稱陰陽形，最典型的代表就是太極圖，即在一個(gè)圖形中，填充了顏色的部分是圖形，沒有填充顏色的部分也可以形成圖形，正負(fù)圖形通常是包圍式或半包圍式的。

所以正負(fù)圖形設(shè)計(jì)的關(guān)鍵在于，既要使正形能清晰地呈現(xiàn)出一個(gè)圖形，還得使正形的負(fù)空間也能成為一個(gè)圖形，由于負(fù)形沒有正形搶眼，所以負(fù)形的輪廓一定要盡量簡(jiǎn)潔、具有很強(qiáng)的識(shí)別性。

在 Logo 設(shè)計(jì)中，英文字母是最常被用來做正負(fù)圖形的，因?yàn)橛⑽脑煨蛪蚝?jiǎn)單，且大多數(shù)字母都是包圍或半包圍式結(jié)構(gòu)。

1. 實(shí)例：把字母D的負(fù)形設(shè)計(jì)成字母R

由于字母 D 是一個(gè)包圍式結(jié)構(gòu)，剛好中間有一個(gè)比較大的負(fù)形空間，所以很適合用來設(shè)計(jì)正負(fù)圖形，但從下圖可以看出，線結(jié)構(gòu)的字母 R 并不適合做 D 的負(fù)形。

所以我們需要將 R 處理一下，使它成為一個(gè)面的圖形，前后差別很大，但仍具有 R 的識(shí)別性。

調(diào)整后的 R 就可以作為 D 的負(fù)形了，其結(jié)合方式有兩種，一種是全包圍式的，一種是半包圍式的，從下圖可以看出，方案二（半包圍式的）更好看、更特別一些。

同樣，我們也需要對(duì)該圖形進(jìn)行規(guī)范。

外輪廓出來后，我們還可以在正形內(nèi)增加一些細(xì)節(jié)，使其更豐富、更有層次。

描摹簡(jiǎn)化

還有些圖形不需要全新創(chuàng)作，而是可以根據(jù)攝影圖片描摹出來，比如很多 logo 圖形喜歡描摹人物頭像、雕塑、植物等圖片。

由于拍攝圖片的角度可能不會(huì)太好，或者整體不是特別符合我們?cè)O(shè)計(jì)的需求，所以在描摹的過程中通常要做優(yōu)化調(diào)整，比如稍作簡(jiǎn)化，去掉不是特別重要的細(xì)節(jié)，只保留比較關(guān)鍵的部分，或適當(dāng)改變其外形等等。

1. 實(shí)例：「舜皇」頭像描摹

找到一張合適的圖片之后，我們可以把它的明暗對(duì)比調(diào)大一點(diǎn)，然后在 PS 中執(zhí)行圖像-調(diào)整-閾值，把圖片變成黑白兩色，我們要做的就是把陰影部分勾出來。

當(dāng)然這個(gè)過程中要主動(dòng)做一些優(yōu)化和調(diào)整，讓這個(gè)圖形要保持著跟原圖比較高的相似度，且整體干凈簡(jiǎn)潔，細(xì)節(jié)流暢利落。勾出大形以后加上顏色和背景，這個(gè)圖形就做完了。

圖形幾何化

藝術(shù)源于生活，圖形設(shè)計(jì)也是如此，但如果只是把生活中的事物直接還原成圖形，未免會(huì)太過普通、沒有特色，這一點(diǎn)在 logo 圖形的設(shè)計(jì)中尤其重要。

那么如何使這些來源于生活的圖形變得特別呢？其實(shí)不一定要加入其他元素，有一個(gè)很常用的方法是將原本不規(guī)則的圖形幾何化，比如把動(dòng)物圖形設(shè)計(jì)成圓形或方形。

或者用幾何圖形把某個(gè)元素表現(xiàn)出來，比如用幾何圖形設(shè)計(jì)英文字母就很常見。

這個(gè)方法的關(guān)鍵是要使圖形幾何化以后，仍能保持著原圖形的識(shí)別性，所以我們要根據(jù)原圖形本身的特點(diǎn)，來反復(fù)嘗試看它適合轉(zhuǎn)化成哪種幾何圖形。

1. 實(shí)例：圓形的「購」字設(shè)計(jì)

比如說「購」字，如果把它設(shè)計(jì)成矩形會(huì)很容易，但會(huì)缺少特點(diǎn)，因?yàn)樗旧淼耐庑尉秃芙咏匦?，所以我打算把它設(shè)計(jì)成圓形，能不能行得通呢？我們可以先在草圖上試一試。

從草圖中可以看出，購字還是可以設(shè)計(jì)成圓形的，于是我用比較規(guī)范的手法把它在 Ai 里畫出來，這樣就得到了一個(gè)圓形的「購」字，很特別也很有設(shè)計(jì)感，但仍不難看出這是一個(gè)「購」字。

置換

置換也是圖形設(shè)計(jì)中常用的手法，即用元素 A 替換元素 B 中的某個(gè)局部從而得到圖形 C，這要求元素 A 與元素 B 的某個(gè)局部在造型上有一定的相似性，這樣圖形 C 保留元素 B 的外形特征和識(shí)別性，這一方法在字體設(shè)計(jì)中也經(jīng)常會(huì)用到。

需要注意的是，置換過來的元素 A 在設(shè)計(jì)風(fēng)格和細(xì)節(jié)處理上，都要與元素 B 統(tǒng)一。

1. 實(shí)例：豬豬冰淇淋圖形設(shè)計(jì)

球形冰淇淋的上半部分是球形的，而把豬設(shè)計(jì)成圓形的圖形也很多，所以用豬置換冰淇淋球也是很簡(jiǎn)單、很自然的事情。

由于雪糕筒的風(fēng)格是很簡(jiǎn)潔的描邊風(fēng)格，所以豬的設(shè)計(jì)風(fēng)格也要與其統(tǒng)一。

接下來只要在豬的圖形上加一個(gè)雪糕筒就可以了，調(diào)整一下二者的比例關(guān)系，統(tǒng)一線條粗細(xì)，一個(gè)豬豬冰淇淋圖形就設(shè)計(jì)好了。

總結(jié)

圖形設(shè)計(jì)的方法還有很多，大家可以通過看大量的作品來自行總結(jié)，不過，最重要的不是知道這些方法，而是懂得如何通過正確地使用它們?cè)O(shè)計(jì)出優(yōu)秀的圖形。牢記設(shè)計(jì)的基本原則，多觀察生活中的事物，尋找不同造型的特點(diǎn)，并多去嘗試把它們聯(lián)系起來，或者是把他們用另外一種方式表現(xiàn)出來，長(zhǎng)此以往，你對(duì)圖形設(shè)計(jì)的感覺一定會(huì)越來越強(qiáng)。

作者：藍(lán)藍(lán)

表格，是一種最常見的信息組織整理手段，常用于信息收集、展示、數(shù)據(jù)分析、歸納整理。

      UI軟件設(shè)計(jì)中最常用、最基本的是表格的設(shè)計(jì)，有些軟件中80%都是表格類頁面，可以說，設(shè)計(jì)開發(fā)的是否易用，很影響口碑和用戶的使用感受?；A(chǔ)的東西一定要做好，就像我們吃的主食一樣，雖然都是米和面，但是各地出產(chǎn)各種品種口味都不相同，要根據(jù)食客的喜好選擇、烹飪。今天就聊一聊最基礎(chǔ)的表格設(shè)計(jì)、變化和常見問題。

一、基礎(chǔ)的表格設(shè)計(jì)美化

      基礎(chǔ)的表格可變化的地方很少，可以根據(jù)當(dāng)前軟件開發(fā)選擇的框架控件（ext/vue/jequery不同框架會(huì)有一些不一樣）做色彩和風(fēng)格的變化，如：加表格不同粗細(xì)的線、斑馬格，中間無豎線種種的設(shè)計(jì)，有的表格需要標(biāo)題很突出，有的內(nèi)文突出，這就和內(nèi)容焦點(diǎn)相關(guān)了。

為了操作直觀便捷，在操作區(qū)放一些圖標(biāo)“刪除、編輯、審核”，配合文字來使用，有的把操作類的圖標(biāo)放在最左邊，有的放在最右側(cè)，按行業(yè)用戶習(xí)慣而定。

 

可以用固定表頭（標(biāo)題位置不變），允許用戶排序，單元格內(nèi)有很長(zhǎng)的文字，設(shè)定最大字節(jié)，多內(nèi)容用……替代避免轉(zhuǎn)行，有小數(shù)點(diǎn)的數(shù)字右對(duì)齊，每列的大小可調(diào)整，這些也是設(shè)計(jì)開發(fā)中可以做好的細(xì)節(jié)部分。

二、特別寬的表格怎么設(shè)計(jì)？

有的表格的寬度，達(dá)到了屏幕的兩屏和三屏，出現(xiàn)寬寬的橫向滾動(dòng)條，又有長(zhǎng)長(zhǎng)的豎向滾動(dòng)條，但工作的人又必須看，可煩人了！很多軟件都因?yàn)檫@個(gè)原因被吐槽。下面就介紹三種方法解決這個(gè)問題：

方法一

如果表格的標(biāo)題是可以定制的，允許省略的，可以從業(yè)務(wù)角度取舍去掉無關(guān)緊要的，不常用的內(nèi)容，把這部分放在點(diǎn)開的詳細(xì)頁內(nèi)容中即可。這就像一個(gè)房間的斷舍離：挑選、丟棄、分類、收納，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可無的？依次排序放在順手的位置，ui設(shè)計(jì)的道理也是相通的。

方法二

如果表格里面的內(nèi)容是確定的，不可省略的，比如銀行的報(bào)表就是這么長(zhǎng)，這么多，那我們就可以從設(shè)計(jì)的角度來優(yōu)化，做一個(gè)加高版的表格。

表格為什么一組信息只能一行呢？完全可以一組三行四行，在組中進(jìn)行重點(diǎn)信息，非重點(diǎn)信息以及符號(hào)化的直觀轉(zhuǎn)變。用大小、對(duì)比、濃淡、色彩、間隔這些平面設(shè)計(jì)的基本原則，讓一個(gè)普通的“山里娃”土土的表格變成一個(gè)“青春靚麗、人見人愛”自帶明星氣質(zhì)的表格。

方法三

大表格里面嵌套小表格，利用交互設(shè)計(jì)，巧安排空間。當(dāng)用戶光標(biāo)移至感興趣的那行的時(shí)候，關(guān)于它更多的內(nèi)容，在下方滑動(dòng)撐開出現(xiàn)或者右邊浮動(dòng)出現(xiàn)。這個(gè)方式雖然比較土，但也確實(shí)管用。早年在看某一招聘網(wǎng)站的時(shí)候，每一個(gè)人的簡(jiǎn)歷只要點(diǎn)名字就可以看到一組關(guān)鍵信息，便于迅速篩選，而另外一個(gè)招聘網(wǎng)站，就沒有這個(gè)功能，每個(gè)人都要打開之后才能看見整體信息，我后來就不怎么看那個(gè)網(wǎng)站了。多一步操作，對(duì)典型用戶就多了許多的工作量，網(wǎng)站和軟件的使用口碑，用戶粘度就是這樣在為用戶考慮中一點(diǎn)一點(diǎn)積累起來的。

 上圖：大表格里面嵌套小表格

     方法不會(huì)只有這三種，其他的方法要根據(jù)當(dāng)時(shí)的業(yè)務(wù)，用戶使用的習(xí)慣、重點(diǎn)，因地制宜的去設(shè)計(jì)了。軟件中的表格節(jié)省了許多程序工程師的工作量，如果做大的改動(dòng)或許是巨大的工作量，如果要做變動(dòng)，一定要在開始的時(shí)候就要讓ui設(shè)計(jì)納入開發(fā)體系，一生二，二生三，在前期第一批實(shí)施時(shí)越注重細(xì)節(jié)，后期就會(huì)越輕松，甚至省去幾倍甚至幾十倍的時(shí)間挨個(gè)頁面的去糾偏、修改。

      一個(gè)系統(tǒng)總是需要業(yè)務(wù)擔(dān)當(dāng)，顏值擔(dān)當(dāng)?shù)暮诵牟糠?，重要的頁面要額外的對(duì)待、花更多的精力和時(shí)間。如果千篇一律，也就不能顯示出軟件產(chǎn)品的獨(dú)到之處了。

 

第三 與表格配合的部分設(shè)計(jì)

第一種  “搜索查詢”和“過濾”部分的設(shè)計(jì)

     大多數(shù)表格的前面都有搜索過濾功能，如果搜索條件相當(dāng)多，可以精選一部分主要的排成一行，其他的隱藏，點(diǎn)箭頭再出現(xiàn)。整個(gè)搜索區(qū)域也可以有隱藏／顯示的按鈕，來給下面的表格更多的空間。

     過濾條件區(qū)域可以定義好“條件名稱”一致寬度，一般在八個(gè)字左右，避免有的字節(jié)多，有的字節(jié)少，行數(shù)多了，參差不齊，區(qū)塊和區(qū)塊之間也要定義好統(tǒng)一的間距，這樣整體頁面就顯得整齊劃一、條理清晰。

上圖：搜索和卡片式信息的組合

第二種  表格操作部分的設(shè)計(jì)

       對(duì)表格的操作“導(dǎo)入，導(dǎo)出、批量導(dǎo)出”有的時(shí)候這類操作有10—20個(gè)，有的時(shí)候才幾個(gè)，多的時(shí)候很占地方，可以用隱藏的方法，over到表格上再出現(xiàn)，以節(jié)省空間。

       也可以分組把同類的操作聚合在一起，把常用的放在目之所及，不常用的點(diǎn)后下浮出現(xiàn)，以節(jié)省空間，

還可以光標(biāo)跟隨表格的某一行，點(diǎn)選自動(dòng)浮出一群小跟班，各種操作按鈕。即節(jié)省空間，操作移動(dòng)路徑又很短。只是不支持批量操作。

 

第三種  表格和卡片式設(shè)計(jì)、統(tǒng)計(jì)圖的整合切換

       表格是可以轉(zhuǎn)換成卡片式設(shè)計(jì)的，用一個(gè)卡片代替一行的展現(xiàn)信息，改變一種閱讀的方式。

有的也可以轉(zhuǎn)換圖統(tǒng)計(jì)圖表：曲線圖，柱狀圖讓用戶直觀的去解讀，而不必一直看枯燥的數(shù)字。

 

日常設(shè)計(jì)中，我們可以收集一些類型海報(bào)，去分析它們的特點(diǎn)進(jìn)行練習(xí)，逐漸熟練掌握各個(gè)風(fēng)格特征。

我們知道，透過現(xiàn)象看本質(zhì)，才能實(shí)現(xiàn)真正意義上的認(rèn)識(shí)。其實(shí)版式設(shè)計(jì)也是一樣的，歸根到底，版式要素就是由文字與圖形或者圖片組成的，因此文字的編排、圖形或圖片的運(yùn)用以及色彩的搭配將成為我們學(xué)習(xí)的重點(diǎn)。

前幾天抽空看了一些美國西部電影，發(fā)現(xiàn)西部牛仔的形象真的是一個(gè)字，帥。他們頭戴墨西哥式寬沿高頂氈帽、腰挎柯爾特左輪手槍或肩扛溫徹斯特步槍、身纏子彈帶、穿著牛仔褲皮上衣、以及束袖緊身多袋牛仔服、足蹬一雙飾有刺馬釘?shù)母咄财ぬ籽?、頸圍一塊色彩鮮艷奪目的印花大方巾、騎著快馬風(fēng)馳電掣，形象威猛而灑脫。

今天我們就以西部牛仔為命題設(shè)計(jì)一幅海報(bào)，看看這類海報(bào)的具體設(shè)計(jì)思路是怎樣的，說到牛仔電影，就不得不提克林特伊斯特伍德演的「鏢客三部曲」，牛仔的機(jī)智、勇敢、沉著、冷靜體現(xiàn)的淋漓盡致，還有那深邃的眼神，真的是被圈粉。

那時(shí)的電影海報(bào)不多，多為手繪的形式展現(xiàn)，可以看出三幅海報(bào)中文字的編排跟主人物的結(jié)合非常巧妙。第一幅主標(biāo)題的梯形形式，第二幅居中形式，第三幅左右環(huán)繞人物的形式，充分的使用信息解決了空間問題。

下面這三幅是電影「被解放的姜戈」的宣傳海報(bào)，這是我?guī)啄昵翱吹牧?，里面還有帥帥的小李子，在電影里有點(diǎn)壞。

上面三幅都是以剪影為主視覺，以裂開的鏈子為最主要視覺點(diǎn)，呼應(yīng)電影中的核心主旨——被解放，后面兩幅通過移動(dòng)主視覺的位置換了構(gòu)圖，信息編排也隨之改變。這種剪影效果十分值得借鑒。

下面進(jìn)入今天的分享時(shí)間，噔噔噔噔~

我們將從網(wǎng)上整理好的文案進(jìn)行簡(jiǎn)單的層級(jí)劃分。

STEP 01 ：構(gòu)圖方式

這里我選用上下分割構(gòu)圖來進(jìn)行設(shè)計(jì)，上方準(zhǔn)備放個(gè)牛仔的形象，下面放置信息。

STEP 02 ：主體刻畫

接下來我們選擇一個(gè)極具張力的素材圖，素材有透視的效果，槍口還起到了聚焦的作用。

下面我們來刻畫主標(biāo)題，牛仔的形象是硬朗冷靜，所以椅子選用粗黑體，同時(shí)結(jié)合有肌理的英文字體進(jìn)行編排。

這里我用封套工具做了透視的效果，同時(shí)加上色塊來承載信息，這樣視覺上有遠(yuǎn)近的感覺，視覺效果更豐富。

最后我們將處理好的主體和主標(biāo)題都放入畫面中，對(duì)人物進(jìn)行適當(dāng)旋轉(zhuǎn)，同時(shí)標(biāo)出剩余信息的大概位置。

STEP 03：信息處理

接下來我們將剩余的信息做個(gè)處理，文字右側(cè)，加上一個(gè)牛仔騎馬的剪影。

我們將處理好的信息全部放入到畫面中，版式的骨骼基本就確定了。

STEP 04：優(yōu)化版面

之后來搭配顏色，我們選用復(fù)古的顏色做背景，同時(shí)文字根據(jù)人物的顏色進(jìn)行搭配。

做到這里，畫面還是略顯單薄，而且很多空間位置都沒有解決，那么這個(gè)時(shí)候我們需要增加相關(guān)的元素去豐富畫面，人物后面我們用混合工具做一個(gè)發(fā)射型的方框；最左側(cè)的空間用「馬背上的英雄」英文翻譯占據(jù)，縮小文字部分讓出空間，同時(shí)加上掉落的子彈，這里需要注意子彈的疏密關(guān)系，畫面立刻就豐富起來了。

最后我們加上一個(gè)類似通緝令的復(fù)古紙張效果，同時(shí)微調(diào)信息的大小，這樣整個(gè)畫面就完成了。

技法講解

畫出兩個(gè)大小不一樣的矩形，改變矩形角度和矩形框的粗細(xì)，選中混合工具。

調(diào)整漸變的矩形數(shù)量。

用混合工具選中小巨星，拖住鼠標(biāo)從小矩形中心往大矩形拉，然后松開鼠標(biāo)，漸變效果就完成了。

STEP 05：樣機(jī)效果

OK，設(shè)計(jì)做完了，這篇海報(bào)主要就是給大家講解利用一些簡(jiǎn)單的幾何形如何豐富畫面，還有一些特殊的小技巧，比如字體的簡(jiǎn)單變形，元素的重復(fù)漸變，這些都是一些小細(xì)節(jié)，卻能使你的畫面上升一個(gè)檔次，有時(shí)不是我們不會(huì)，而是我們沒有深入的思考與借鑒。

文章來源：優(yōu)設(shè)    作者：趣設(shè)記

   隨著大數(shù)據(jù)產(chǎn)業(yè)的發(fā)展，越來越多的公司開始實(shí)現(xiàn)數(shù)據(jù)資源的管理和應(yīng)用，尤其是一些在日常生活中經(jīng)常使用大屏幕的大中型企業(yè)。此時(shí)，用戶界面設(shè)計(jì)者需要呈現(xiàn)相應(yīng)的視覺效果。接下來為大家介紹大屏可視化的UI設(shè)計(jì)。

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

 --大屏UI設(shè)計(jì)--

（圖片均來源于網(wǎng)絡(luò)）

  藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)計(jì)賞析（一）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（二）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（三）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（四）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（五）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（六）

  大數(shù)據(jù)可視化設(shè)計(jì)賞析（七）

編者按：這是 UI 設(shè)計(jì)師 Diana Malewicz 的第二篇 UI 設(shè)計(jì)分享。這一次，她要設(shè)計(jì)的是一個(gè)控制面板的界面，如何控制不同UI元素的平衡，如何從零開始構(gòu)建，相當(dāng)值得學(xué)習(xí)~

歡迎來到我的「UI設(shè)計(jì)指南」第二篇！如果你對(duì)于我的第一篇文章印象不錯(cuò)的話，那么這一篇應(yīng)該也會(huì)合你胃口：

當(dāng)然，請(qǐng)注意一點(diǎn)，我創(chuàng)建 UI 界面的過程中，繞過了通常 UI 和產(chǎn)品設(shè)計(jì)應(yīng)該有的「用戶調(diào)研」——「用戶研究」——「體驗(yàn)分析」這樣的前置步驟，而是直接開始創(chuàng)建干凈、一致的 UI 界面。在真實(shí)的設(shè)計(jì)項(xiàng)目當(dāng)中，開頭的這些步驟是無法忽略的！

基本思路和低保真線框圖

這一次我們要設(shè)計(jì)的是儀表盤界面。那么我們從基本的想法開始。

這一次，我們將會(huì)設(shè)計(jì)一個(gè)服務(wù)于醫(yī)療行業(yè)的控制面板（實(shí)際上，這個(gè)設(shè)計(jì)的初衷來源于我的姨媽，她是一名醫(yī)生，不僅要治療病人還要處理大量的文書工作），而整個(gè)設(shè)計(jì)我將會(huì)在 Sketch 中完成。

通常，我會(huì)從一個(gè)非常低保真的線框圖開始。我會(huì)創(chuàng)建一系列的矩形線框，然后將他們按照需求和大小進(jìn)行排列，直到最終滿足我的想法為止。我選擇了一些隨機(jī)的、但是相近的色彩，確保我能看清位置就可以了。

然后我針對(duì)哪些內(nèi)容在哪里顯示，進(jìn)行了基本的說明。

這就是一個(gè)非常原始的界面框架了。

1. Vue 無法檢測(cè)實(shí)例被創(chuàng)建時(shí)不存在于 data 中的 property

原因：由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化，所以 property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。

場(chǎng)景：

var vm = new Vue({

 data:{},

 // 頁面不會(huì)變化

 template: '<div>{{message}}</div>'

})

vm.message = 'Hello!' // `vm.message` 不是響應(yīng)式的

解決辦法：

var vm = new Vue({

 data: {

   // 聲明 a、b 為一個(gè)空值字符串

   message: '',

 },

 template: '<div>{{ message }}</div>'

})

vm.message = 'Hello!'

2. Vue 無法檢測(cè)對(duì)象 property 的添加或移除

原因：官方 - 由于 JavaScript（ES5） 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。

場(chǎng)景：

var vm = new Vue({

 data:{

   obj: {

     id: 001

   }

 },

 // 頁面不會(huì)變化

 template: '<div>{{ obj.message }}</div>'

})

vm.obj.message = 'hello' // 不是響應(yīng)式的

delete vm.obj.id       // 不是響應(yīng)式的

解決辦法：

// 動(dòng)態(tài)添加 - Vue.set

Vue.set(vm.obj, propertyName, newValue)

// 動(dòng)態(tài)添加 - vm.$set

vm.$set(vm.obj, propertyName, newValue)

// 動(dòng)態(tài)添加多個(gè)

// 代替 Object.assign(this.obj, { a: 1, b: 2 })

this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })

// 動(dòng)態(tài)移除 - Vue.delete

Vue.delete(vm.obj, propertyName)

// 動(dòng)態(tài)移除 - vm.$delete

vm.$delete(vm.obj, propertyName)

3. Vue 不能檢測(cè)通過數(shù)組索引直接修改一個(gè)數(shù)組項(xiàng)

原因：官方 - 由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化；尤雨溪 - 性能代價(jià)和獲得用戶體驗(yàn)不成正比。

場(chǎng)景：

var vm = new Vue({

 data: {

   items: ['a', 'b', 'c']

 }

})

vm.items[1] = 'x' // 不是響應(yīng)性的

解決辦法：

// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// vm.$set

vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

拓展：Object.defineProperty() 可以監(jiān)測(cè)數(shù)組的變化

Object.defineProperty() 可以監(jiān)測(cè)數(shù)組的變化。但對(duì)數(shù)組新增一個(gè)屬性（index）不會(huì)監(jiān)測(cè)到數(shù)據(jù)變化，因?yàn)闊o法監(jiān)測(cè)到新增數(shù)組的下標(biāo)（index），刪除一個(gè)屬性（index）也是。

場(chǎng)景：

var arr = [1, 2, 3, 4]

arr.forEach(function(item, index) {

   Object.defineProperty(arr, index, {

   set: function(value) {

     console.log('觸發(fā) setter')

     item = value

   },

   get: function() {

     console.log('觸發(fā) getter')

     return item

   }

 })

})

arr[1] = '123'  // 觸發(fā) setter

arr[1]          // 觸發(fā) getter 返回值為 "123"

arr[5] = 5      // 不會(huì)觸發(fā) setter 和 getter

4. Vue 不能監(jiān)測(cè)直接修改數(shù)組長(zhǎng)度的變化

原因：官方 - 由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化；尤雨溪 - 性能代價(jià)和獲得用戶體驗(yàn)不成正比。

場(chǎng)景：

var vm = new Vue({

 data: {

   items: ['a', 'b', 'c']

 }

})

vm.items.length = 2 // 不是響應(yīng)性的

解決辦法：

vm.items.splice(newLength)

5. 在異步更新執(zhí)行之前操作 DOM 數(shù)據(jù)不會(huì)變化

原因：Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會(huì)采用 setTimeout(fn, 0) 代替。

場(chǎng)景：

<div id="example">{{message}}</div>

var vm = new Vue({

 el: '#example',

 data: {

   message: '123'

 }

})

vm.message = 'new message' // 更改數(shù)據(jù)

vm.$el.textContent === 'new message' // false

vm.$el.style.color = 'red' // 頁面沒有變化

解決辦法：

var vm = new Vue({

 el: '#example',

 data: {

   message: '123'

 }

})

vm.message = 'new message' // 更改數(shù)據(jù)

//使用 Vue.nextTick(callback) callback 將在 DOM 更新完成后被調(diào)用

Vue.nextTick(function () {

 vm.$el.textContent === 'new message' // true

 vm.$el.style.color = 'red' // 文字顏色變成紅色

})

拓展：異步更新帶來的數(shù)據(jù)響應(yīng)的誤解

<!-- 頁面顯示：我更新啦！ -->

<div id="example">{{message.text}}</div>

var vm = new Vue({

 el: '#example',

 data: {

   message: {},

 }

})

vm.$nextTick(function () {

 this.message = {}

 this.message.text = '我更新啦！'

})

上段代碼中，我們?cè)?data 對(duì)象中聲明了一個(gè) message 空對(duì)象，然后在下次 DOM 更新循環(huán)結(jié)束之后觸發(fā)的異步回調(diào)中，執(zhí)行了如下兩段代碼：

this.message = {};

this.message.text = '我更新啦！'

到這里，模版更新了，頁面最后會(huì)顯示 我更新啦！。

模板更新了，應(yīng)該具有響應(yīng)式特性，如果這么想那么你就已經(jīng)走入了誤區(qū)。

一開始我們?cè)?data 對(duì)象中只是聲明了一個(gè) message 空對(duì)象，并不具有 text 屬性，所以該 text 屬性是不具有響應(yīng)式特性的。

但模板切切實(shí)實(shí)已經(jīng)更新了，這又是怎么回事呢？

那是因?yàn)?Vue.js 的 DOM 更新是異步的，即當(dāng) setter 操作發(fā)生后，指令并不會(huì)立馬更新，指令的更新操作會(huì)有一個(gè)延遲，當(dāng)指令更新真正執(zhí)行的時(shí)候，此時(shí) text 屬性已經(jīng)賦值，所以指令更新模板時(shí)得到的是新值。

模板中每個(gè)指令/數(shù)據(jù)綁定都有一個(gè)對(duì)應(yīng)的 watcher 對(duì)象，在計(jì)算過程中它把屬性記錄為依賴。之后當(dāng)依賴的 setter 被調(diào)用時(shí)，會(huì)觸發(fā) watcher 重新計(jì)算 ，也就會(huì)導(dǎo)致它的關(guān)聯(lián)指令更新 DOM。

具體流程如下所示：

執(zhí)行 this.message = {}; 時(shí)， setter 被調(diào)用。

Vue.js 追蹤到 message 依賴的 setter 被調(diào)用后，會(huì)觸發(fā) watcher 重新計(jì)算。

this.message.text = '我更新啦！'; 對(duì) text 屬性進(jìn)行賦值。

異步回調(diào)邏輯執(zhí)行結(jié)束之后，就會(huì)導(dǎo)致它的關(guān)聯(lián)指令更新 DOM，指令更新開始執(zhí)行。

所以真正的觸發(fā)模版更新的操作是 this.message = {};這一句引起的，因?yàn)橛|發(fā)了 setter，所以單看上述例子，具有響應(yīng)式特性的數(shù)據(jù)只有 message 這一層，它的動(dòng)態(tài)添加的屬性是不具備的。

對(duì)應(yīng)上述第二點(diǎn) - Vue 無法檢測(cè)對(duì)象 property 的添加或移除

6. 循環(huán)嵌套層級(jí)太深，視圖不更新？

看到網(wǎng)上有些人說數(shù)據(jù)更新的層級(jí)太深，導(dǎo)致數(shù)據(jù)不更新或者更新緩慢從而導(dǎo)致試圖不更新？

由于我沒有遇到過這種情況，在我試圖重現(xiàn)這種場(chǎng)景的情況下，發(fā)現(xiàn)并沒有上述情況的發(fā)生，所以對(duì)于這一點(diǎn)不進(jìn)行過多描述（如果有人在真實(shí)場(chǎng)景下遇到這種情況留個(gè)言吧）。

針對(duì)上述情況有人給出的解決方案是使用強(qiáng)制更新：

如果你發(fā)現(xiàn)你自己需要在 Vue 中做一次強(qiáng)制更新，99.9% 的情況，是你在某個(gè)地方做錯(cuò)了事。

vm.$forceUpdate()

7. 拓展：路由參數(shù)變化時(shí)，頁面不更新（數(shù)據(jù)不更新）

拓展一個(gè)因?yàn)槁酚蓞?shù)變化，而導(dǎo)致頁面不更新的問題，頁面不更新本質(zhì)上就是數(shù)據(jù)沒有更新。

原因：路由視圖組件引用了相同組件時(shí)，當(dāng)路由參會(huì)變化時(shí)，會(huì)導(dǎo)致該組件無法更新，也就是我們常說中的頁面無法更新的問題。

場(chǎng)景：

<div id="app">

 <ul>

   <li><router-link to="/home/foo">To Foo</router-link></li>    

   <li><router-link to="/home/baz">To Baz</router-link></li>    

   <li><router-link to="/home/bar">To Bar</router-link></li>    

 </ul>    

 <router-view></router-view>

</div>

const Home = {

 template: `<div>{{message}}</div>`,

 data() {

   return {

     message: this.$route.params.name

   }

 }

}

const router = new VueRouter({

 mode:'history',

   routes: [

   {path: '/home', component: Home },

   {path: '/home/:name', component: Home }

 ]

})

new Vue({

 el: '#app',

 router

})

上段代碼中，我們?cè)诼酚蓸?gòu)建選項(xiàng) routes 中配置了一個(gè)動(dòng)態(tài)路由 '/home/:name'，它們共用一個(gè)路由組件 Home，這代表他們復(fù)用 RouterView 。

當(dāng)進(jìn)行路由切換時(shí)，頁面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，message 是沒有變化的。

解決辦法：

解決的辦法有很多種，這里只列舉我常用到幾種方法。

通過 watch 監(jiān)聽 $route 的變化。

const Home = {

 template: `<div>{{message}}</div>`,

 data() {

   return {

     message: this.$route.params.name

   }

 },

 watch: {

      '$route': function() {

      this.message = this.$route.params.name

   }

   }

}

...

new Vue({

 el: '#app',

 router

})

給 <router-view> 綁定 key 屬性，這樣 Vue 就會(huì)認(rèn)為這是不同的 <router-view>。

弊端：如果從 /home 跳轉(zhuǎn)到 /user 等其他路由下，我們是不用擔(dān)心組件更新問題的，所以這個(gè)時(shí)候 key 屬性是多余的。

<div id="app">

 ...

 <router-view :key="key"></router-view>

</div>