支付寶通過螞蟻森林游戲，巧妙地和用戶生活場景結合，用體系設計牽引支付場景延伸，形成行為路徑閉環，為支付寶儲存強大能量，同時促進更多人主動參與，實現了自己的商業價值。

背景

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

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

螞蟻森林就像飛輪一樣，通過體系設計牽引支付場景延伸，形成行為路徑閉環，為支付寶儲存強大能量；加上高頻使用，品牌效應，社交粘性等形成慣性閉環推動，給支付寶生態注入源源不斷的增長力量。

一、留存價值

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

激活：引導用戶首次產生有價值的行為

支付寶的核心功能是支付，因此激活是指促使用戶使用支付寶進行支付的相關行為。

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

螞蟻森林是支付寶的擴展附加功能，不存在支付相關性，是在核心支付功能支付之外，支付流程路徑也不經過螞蟻森林。相比能對激活環節起作用的，如指紋支付精簡支付路徑，降低操作成本；花唄有錢有紅包激勵引導用戶選擇……螞蟻森林在激活環節對支付寶產生的價值是非常有限的。

留存：讓用戶長期活躍，持續產生有價值的行為

對于支付寶而言，留存是讓用戶更高頻地，更長時間地用支付寶進行支付相關的行為。

螞蟻森林能量盡管定義是由綠色低碳行為產生，實質能量閉環對應的是用戶的打開支付寶APP進行的各種行為閉環，每一個環節都涵蓋了大量的線上線下支付行為。

長此以往，良性循環的閉環培養了用戶的收取和消費能量的習慣，培養用戶支付行為選擇支付寶的行為，即讓用戶對“螞蟻森林”【上癮】，強粘性留存，用戶量和支付額隨著行為增長而增長，自然給支付寶帶來增長。

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

二、螞蟻森林體系的上癮機制

1. 核心驅動：戳中癢點——改變世界的公益理想

若缺失了驅動能量，能量飛輪就無法啟動。對于螞蟻森林體系和支付寶核心功能設計最本源的驅動力就是人心向善的公益理想。它對于人來說，不是剛需，也不是痛點，而是“癢點”。

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

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

每個人都有一個英雄情結，比如保護環境，改變世界的美好理想。螞蟻森林從能量累計虛擬種樹到實地種樹公益行動有國家權威背書，有真實的中國引領推動地球植被面積改變見證。

每個人都做了一點點，每天做一點點，如此世界終將因我們而改變的理想會內化成價值觀持續影響人的行為。螞蟻森林中能量產生是用戶日常行為，無需付出多余成本，執行門檻低，路徑簡短，以此便能做公益參與其中，內驅持續付出，時間見證改變，當中獲得強大的價值認同感和榮譽感，原本存在于虛擬自我的理想得到實現。

2. 用戶激勵：能量機制設計——鏈接支付寶線上線下生活場景

有了核心內在驅動，行為也并非自然而然，畢竟這個豐富的世界，有太多的選擇太多的誘惑，因此必須標的明確地驅動用戶選擇并完成產品所期望的行為，同時也滿足用戶的預期。

用戶行為激勵公式：行為=動機*能力*觸發

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

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

習慣=行為*頻率

只要賦予行為一定的頻次，讓用戶重復完成并獲得反饋，就有機會讓用戶把這個行為固定為習慣。

螞蟻森林的能量機制等同于其他產品積分機制，積分激勵=能量激勵。

如前述，螞蟻森林的能量閉環，其中收取能量和消耗能量對應行為螞蟻森林內完成，而能量產生依賴于用于通過支付寶平臺進行的各種場景下的行為。

通過能量產生和消損機制的設計，將能量作為媒介，將螞蟻森林與支付寶打通，螞蟻森林的能量閉環對應著支付寶用戶核心該行為路徑閉環。

（1）種樹攻略引導

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

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

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

（2）延時驚喜設計

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

結合這種延時設計，避免用戶遺忘，消息推送機制的設計也恰到好處。后臺推送能量生成消息提示收取，或者能量被偷提醒等，也供用戶主動設置能量收取提醒。

于是就有了”每天叫醒我的不是夢想，而是收能量“，助力養成用戶收能量習慣，也就養成了打開支付寶的習慣，助力支付寶與用戶生活習慣強相關。

（3）游戲化收取能量

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

用戶深諳養成游戲之道，點擊能量球便可享有收入囊中的財富滿足感。能量來源和數字設計清晰量化低碳行為產生的能量獲得，澆灌能量樹木長大。用戶游戲過程不斷被強化能量與支付的關系：支付能帶來能量——為了獲得更多能量——用戶會增加支付寶支付的頻次。

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

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

上癮是對行為或行為反饋對應的確定性滿足感的依賴，依賴又自然帶動心甘情愿的持續付出。

而螞蟻森林每個重要用戶行為節點的設置都在用戶內心建立起強大的確定性，無論是安全感，占有欲，價值認同感，榮譽感得到的滿足都內化驅動行動，并能帶來持續投入進而依賴成癮。

（1）行為即能量確信

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

（2）獲取能量延時滿足

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

（3）豐厚多樣獎勵

1. 虛擬成就獎勵——虛擬環保證書，虛擬道具，裝扮
2. 真實公益獎勵——能量達標即可領對應樹種，云植各種樹，實現公益理想
3. 榮譽獎勵——能量排行榜展示好友圈名次，滿足自我榮譽

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

通過綠色能量連接，虛擬與真實掛鉤，虛擬變成現實的設計，讓用戶確信真的能參與到環保公益中，獲得崇高價值認同感，促進用戶持續地對追求美好追求公益理想，便是持續驅動支付行為，驅動支付寶增長。

4. 全情投入：透析人性——輕社交互動玩法

激活用戶的社交屬性，通過加好友，合種樹等實現能量在人與人之間的流動和張力，形成用戶行為的外在激發和持續驅動。

（1）線上互動閉環

1）邀請好友可獲得能量罩獎勵，保衛能量 ——> 老帶新，一起玩 ——> 用戶裂變，拉新促活

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

3）好友圈能量排行榜 ——> 利用用戶的競爭心理，刺激勝負欲。為了排行榜更前促使用戶更頻繁產能量，收能量，偷能量，于是打開支付寶的頻次更高。

（2）培養合種忠誠

曉之以理，動之以情。合種樹設計，讓螞蟻森林有了溫度，我們一起種的，是樹，更是愛。有愛，便有責任，便有忠誠。

螞蟻森林的設立愛情樹，親情樹，友情樹，提供機會讓用戶與愛的人一起種樹，賦予一棵樹更多的意義。還有明星公益林，大IP公益林運營結合，給用戶提供集體歸屬入口。配合精準運營，讓用戶產生情感共鳴。輕社交自帶自傳播屬性，邀請好友參與達到拉新。

合種促使真實人際關系牽引形成隱形綁定，用戶互相鼓勵監督一起為種樹努力。人與人關系黏合促成人與產品的黏合，人對關系的忠誠轉化成人對產品的忠誠。相互督促，相互影響，都希望早點種下樹，自然促使使用頻率增加，增強產品粘性，留存自然得到提高。

當用戶對螞蟻森林投入了時間，精力，甚至情感，無形中，離開螞蟻森林的代價就越大，即對螞蟻森林，對支付寶來說，用戶流失的門檻就提高，流失小，留存就大，促進與支付寶持續的使用。

三、總結

綜上，最后以螞蟻森林體系與支付寶鏈接的增長閉環圖總結；

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

文章來源：人人都是產品經理  作者：JoDy

在當前的行業背景當中，設計師了解交互視覺就足夠了么？NO！JDCD今天帶來服務設計思維，分享好的設計將具備哪些技能點～

為什么UED要加入服務設計思維

隨著整個行業的融合和發展，設計師職責的邊界越來越模糊，線上線下的融合，設計的鏈路也越來越長。一個優秀的設計師，不僅要懂得視覺、交互，還要懂產品、運營、用戶研究等。

因此設計師輸出的產物不再是單一的設計稿，也許是一個優化的建議，一個方向的描述，或者思路的呈現等等。好的設計師應該是在全鏈路的各個環節，都能夠有的放矢的輸出對業務有價值的產物，并最終推動業務達成目標。

今天我們來聊聊服務設計思維～

什么是服務設計

服務設計作為一個融合性的學科，通過對人、物、行為以及環境和社會之間系統關系的梳理，以用戶為中心，圍繞用戶重新規劃組織資源，促進組織運作，提高員工效率，最終提升用戶的體驗。

概念讀起來有些生硬，我們簡單來說：

首先舉個經典的栗子～

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

咖啡店A的做法：

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

咖啡店B的做法：

與顧客交談，做研究和調研。觀察顧客們在喝咖啡前、喝咖啡時、喝完咖啡后都做些什么，并據此畫出用戶體驗地圖，找到他們在體驗地圖中的高潮和低谷點，以此找到服務的機會點，再開始尋求解決方案。

同時，團隊找到利益相關者，比如店員，聽聽他們平時遇到的問題，聽聽創始人對咖啡店最初的愿景，還有市場團隊、供應商等人…這些利益相關者們在一起開一個工作坊，他們確立明確的商業目標，開始設計出一些概念，并且向已有的顧客做測試分析。他們做了技術分析，并繪制了服務藍圖，確保中后臺系統能支持概念的落地，他們設計出了顧客喜愛的APP。

以上兩家咖啡店的案例呈現中，用戶接觸到的服務產品最終使用效果則大相徑庭。對于咖啡店的客戶來說，咖啡店B就是做到了服務設計。

為了加深大家理解，再舉個例子～

假設你家燈泡壞了，你要換燈泡，需要個梯子。

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

你需要一個梯子，但不需要在家里備一個

• 有一個平臺可以提供租用梯子，按小時計費。
• 社區（物業／社區自治組織）提供租／借的梯子（共享基礎工具）。
• 梯子分享平臺，我用了你家的梯子，你可以用我家的電鉆。

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

• 買燈泡的時候便附帶了修燈泡的增值服務
• 處理修燈泡等雜事的人員雇傭平臺
• 你平時在社區做義工，此時也會有社區義工前來幫你修。

以上這些方案如何選擇，如何完善，誰來買單？誰來運作？具體實現方式、傳達方式，包括產出方案，都是屬于服務設計的內容。

服務設計五大原則

為了更好的應用服務設計，設計師們需要了解服務設計思維的基本原則，并在打造服務時，聚焦服務設計思維的原則。輔助一些工具、方法去支持和實現原則基礎上的服務設計。

1. User-centered 以用戶為中心

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

工具1：用戶畫像

在產品開發或創建服務的早期階段，需要首先明確：用戶是誰？他們的需求是什么？為什么會選擇我們的產品？理解用戶的第一步是創建用戶畫像。

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

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

例如，因工作原因更換居住地，飲食習慣的改變，網購習慣從化妝品變為母嬰用品等。用戶畫像是動態變化的過程，需要不斷迭代管理用戶畫像。

工具2：典型用戶

典型用戶又被稱為「真實虛擬人」（real fake man），因為盡管人物是虛構的，但它背后的動機和需求是真實的。

典型用戶越具體、特征越詳細，我們想要獲取的那個「終極用戶形象」就會越清晰真實！明確典型用戶和使用場景的關聯，避免孤立使用典型用戶，脫離用戶場景。

我們通常將典型用戶檔案打印成板或海報，方便整個團隊分享。復雜產品或服務的典型用戶會有多個，代表多種不同類型的用戶。

比如，網購平臺的典型用戶從職業和年齡的維度，可能會有商務精英、職場小白、在校學生、空巢老人、全職太太等。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

工具3：同理心地圖

同理心地圖通過多維度（所想、所感、所聽、所看、所說）描繪更加生動的用戶形象，便于跨領域團隊建立對目標用戶的同理心，從中得到意想不到的洞察。

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

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

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

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》——同理心地圖以媽媽使用冰箱為例

工具4：影子計劃

影子計劃即像「影子」一樣伴隨用戶進行觀察，是對用戶體驗產品/服務的結構化觀察，主要用于新產品/服務的消費者研究領域，通過觀察用戶使用某些產品或服務時的情緒、肢體語言、節奏、行為模式和時間等信息來全面了解用戶。

工具5：AEIOU觀察框架

AEIOU是整理觀察記錄的框架工具，通常會在觀察時使用表單直接記錄，可以和影子計劃結合使用。

• A-活動activity：人們為實現某一目標而實施的一系列行為。
• E-環境environment：活動發生的場景。例如周遭環境的屬性、功能、特點、氛圍。
• I-互動interaction：人與人、人與物、人與空間，或者人與數字之間的互動。
• O-物品object：涉及物品。環境里有哪些物品？和用戶活動的關聯是什么？
• U-使用者user：用戶

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

2. Co-creative 共創

服務設計所解決的是一項復雜的問題，它沒有正確的答案，只有最優解。如何找到最適合路徑？讓服務提供者和使用者以及不同的利益相關方，共同參與設計和創造的過程。借助不同背景、不同職能的人不同維度的思考，共同探索最優解。

共創，無疑是服務設計最佳的工作方式。

工具1：瘋狂發想法

人與動物或最好的人工智能之所以不同，是我們人類具備將「是什么」（what is）引導至「如果什么，將會怎樣」（what if）的能力。瘋狂發想法就是給挑戰一個不同的前提，在這種背景下思考更多的解決方案。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

工具2：頭腦風暴圖

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

頭腦風暴圖有九種角度的思考方案：替代法、借鑒法、逆向法、組合法、改進法、拓展法、消除法、轉換法、重組法。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

工具3：世界咖啡

世界咖啡的主要精神就是跨界。不同專業背景、不同職務、不同部門的一群人，意見互相碰撞，激發出意想不到的創新點子。人們很容易被自己的專業和經驗所限制，公司也很容易被既定文化或價值觀所限制，同構性越強，越不容易產生新的點子。

世界咖啡讓參與者從個人固有風格、學習方式和情感智商等維度中解放出來，用新的視角看世界。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

工具4：DVF篩選法

共創最后一個步驟也是最重要的一個部分是篩選，在眾多的概念中發現真正的滄海遺珠是一個巨大的挑戰。

我們可以從用戶、商業和技術三個維度來篩選概念，即DVF篩選法。

Desirable用戶合意性，Feasible運營/技術可行性，Viable商業可行性。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

3. Holistic 整體性

用戶體驗就像一場有計劃、有組織的精心設計的演出：它有高潮，也有低谷，它環環相扣地在講述一個故事，而用戶就身在其中。把握用戶的情緒和服務的節奏尤為重要，更重要的是由點及面地全局思考，保證這個故事的整體性。

工具1：用戶體驗地圖

用戶體驗地圖梳理了典型用戶從初次了解服務到形成契約關系的完整過程，站在用戶的視角再現用戶場景和服務流程的體驗感受。

此工具很實用，下圖是以一次部門內部設計分享演講為例，站在聽眾的角度設計演講的節奏、內容、互動等，關注聽眾的感受，才能讓這次分享演講達到想要的效果。

工具2：場景卡

場景卡用于描述不斷重復發生的問題，其作用在于從場景中獲得洞察，以及未來服務的機會。它和用戶體驗地圖的區別是它專注于單一的場景，可以更細微地了解用戶處境。場景卡經常和用戶體驗地圖搭配使用，用來展開思考重要觸點，甚至有時會融入用戶體驗地圖中變成一部分。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

工具3：服務供給地圖

服務供給地圖（offering map）是用來分析可提供給用戶的服務?？梢暬姆绞娇梢愿玫仃U述想要提供的服務。由于用戶需求（needs）和服務端的供給（offering）有著直接對應的關系，在表達服務概念時，可以同時呈現用戶需求和服務供給。此時服務供給地圖通常需要展現邏輯和層次，因此多用信息架構圖表現。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

4. Sequencing 有序性

服務需要有邏輯、有節奏地視覺化展示出來。服務是在一段時間內的動態過程，時間線對用戶非常重要。服務的節奏也很重要，會影響用戶的情緒。

工具1：故事版

故事版是以用戶為主要角色，以爽點、痛點或者產品、服務與用戶的互動為劇本發展的「場景分鏡頭」，是講故事時的重要道具。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

工具2：桌面演練

如果說故事版是平面示意圖，那么桌面演練（desktop walkthrough）就是個三維故事版，能夠隨時補充新的想法，更快速的移動和判斷。它可以看成是幫助設計者模擬端到端用戶體驗的互動式的迷你劇場。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

工具3：戲劇原型

戲劇原型是用表演的形式，輔助一些簡單的道具來模擬搭建服務場景，展示服務內容，把服務體驗概念帶入日常生活場景的檢驗方式。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》

5. Evidencing 有形化

無形的服務需要被適時展現出來。服務很多時候是在后臺默默進行的，用戶無法感知。

工具1：服務藍圖

服務藍圖能幫助設計者視覺化呈現服務時如何被執行與運作的。用戶體驗地圖關注用戶在每個服務互動觸點所經歷的事情與感受，服務藍圖更注重服務中的各個要素有沒有被正確地設計和整合在一起，來描述整體的體驗流程。

△ 圖片摘自：《服務設計驅動的革命：引發用戶追隨的秘密》-共享汽車服務藍圖

工具2：服務缺口

服務缺口是用戶對服務的期待或需求和實際接收到的服務之間的落差。服務缺口是一個分析模型，可以用來探討服務發生的原因。

工具3：利益相關者地圖

利益相關者地圖是以圖畫來視覺呈現和理清所有利息相關者之間的方法。與服務有關的各個群體因為共同的利益聚在一起，服務提供方在解決問題時就能夠善用資源。對利益相關者來說，綜合全面的概述是改善服務或創新嘗試所必須的。

△ 圖片摘自：利益相關者地圖 Stakeholders Mapping

服務設計與用戶體驗設計的區別

體驗設計關注觸點和人，而服務設計則是由表及里，將觸點、用戶體驗和組織中后臺支持都規劃在內，體驗設計是服務設計的起點。

△ 圖片摘自：服務設計又來了！服務設計強調的是「幸福感」

另一個區別就是服務設計的收益者是雙方（提供者和接收者），而用戶體驗則聚焦于用戶。

說到這里，可能部分同學還是沒有記清楚服務設計的和用戶體驗設計，其實服務設計包含了用戶體驗設計，也包含人性化設計或者情感化設計等等。如果一個設計只有接收者單獨受益，那不能稱之為服務設計，只能說是針對用戶的用戶體驗設計。

個人感悟

世界變化如此之快，你還站在原地嗎？我們時刻走在學習的路上，不斷地武裝自己。遇到新的概念或者方法論，要先深入了解并進行獨立思考。實踐才能出真知，多應用到自己的項目中，結合項目進行實踐和反思，讓我們在設計的路上走得更遠！

敲黑板劃重點，服務設計思維，我們講了這么多～分享出去跟小伙伴一起學習吧，你也要記得來復習哦～

文章來源：優設    作者：Design with CloudAI

和大家分享一下，楊楊在年前做的一套新年主題圖標，整個過程成長很大，也希望能給大家一些啟發。

其實一套主題圖標對于一個剛畢業的大學生來說，難度不小，但只要愿意學習，還是可以攻克重重困難，最后把需求做好的。

新年嘛，關鍵詞的發散就不多說了，無非就是鞭炮、對聯、福、燈籠等等。

我們直說重點：

• 風格如何選取
• 找不足的維度
• 透視角度優化
• 顏色優化
• 怎么增加亮點

風格如何選取

對于風格，應該如何選擇呢，比如有描邊扁平風格：

△ Martin David作品

有輕質感的擬物風格：

△ Man King作品

這里可以給大家一個參考維度：

界面常駐功能性圖標一般會使用描邊、扁平風格的圖標，而對于節日主題圖標，圖標如果太平會顯得比較冷靜，所以加一些質感的渲染會更有氣氛。

而且增加質感一定程度上可以彌補造型上的不足，而且很出效果，對于時間有限的需求，是個不錯的選擇。

所以這次新年主題圖標的需求，我們選擇了輕質感的風格。

找不足的維度

由于沒有做圖標的經驗，所以第一版的樣式犯了一些基礎型的問題：

有不足不可怕，可怕的是不知道不足在哪里，所以清晰有條理的找到問題也是我們設計必須具備的能力。

我們從以下三個維度進行問題拆解，供大家參考

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

燈籠是五個圖標中做的相對比較穩的一個。

問題和優化方向都有了，接下來就是調整了！

造型方面的優化

首先我們來優化造型方面的。

既然我們要做立體化質感的圖標，那圖標就不能太平，原有的鞭炮角度太正，所以在角度上進行了優化。

并且因為一個鞭炮有些太單調，所以把數量增多，優化如下：

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

多次調整后，圖標在立體化方面有了很重要的突破。

顏色方面的規范

之前的顏色有些偏暗，有些發黃，所以我們定了一個顏色規范，在主色上都使用統一的顏色，這樣在延展的時候，就不容易跑偏：

只要嚴格保持顏色規范的使用，不停的對比調整，一定可以讓一套圖標的顏色不跑偏。

創意方面的優化

咱不說一組圖標，每個都有亮點，但至少有一個是相對比較特別的，這是非常有必要的，否則整體看起來就會非常平庸。

產生亮點的方法有很多，比如風格、透視、顏色、品牌基因等等。

由于我們在風格、顏色等方面都已經固定，所以選擇在品牌基因的維度出發進行優化。

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

可謂是整組圖標最大的亮點，這個生產創意的方法其實很常用，大家一定要多多練習。

最后我們看一下優化前后的效果：

優化前：

優化后：

文章來源：優設    作者：菜心設計鋪

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

加法

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

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

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

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

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

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

△ 字母U與H組合。

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

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

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

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

1. 實例：高音符號+眼睛

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

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

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

比喻

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

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

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

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

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

1. 實例：把愛心比喻成桃子

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

不過上圖太過常規，沒有設計感和獨特性，所以我在愛心上做了一點加工，形成了循環的效果，如下圖。

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

正負形

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

所以正負圖形設計的關鍵在于，既要使正形能清晰地呈現出一個圖形，還得使正形的負空間也能成為一個圖形，由于負形沒有正形搶眼，所以負形的輪廓一定要盡量簡潔、具有很強的識別性。

在 Logo 設計中，英文字母是最常被用來做正負圖形的，因為英文造型夠簡單，且大多數字母都是包圍或半包圍式結構。

1. 實例：把字母D的負形設計成字母R

由于字母 D 是一個包圍式結構，剛好中間有一個比較大的負形空間，所以很適合用來設計正負圖形，但從下圖可以看出，線結構的字母 R 并不適合做 D 的負形。

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

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

同樣，我們也需要對該圖形進行規范。

外輪廓出來后，我們還可以在正形內增加一些細節，使其更豐富、更有層次。

描摹簡化

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

由于拍攝圖片的角度可能不會太好，或者整體不是特別符合我們設計的需求，所以在描摹的過程中通常要做優化調整，比如稍作簡化，去掉不是特別重要的細節，只保留比較關鍵的部分，或適當改變其外形等等。

1. 實例：「舜皇」頭像描摹

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

當然這個過程中要主動做一些優化和調整，讓這個圖形要保持著跟原圖比較高的相似度，且整體干凈簡潔，細節流暢利落。勾出大形以后加上顏色和背景，這個圖形就做完了。

圖形幾何化

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

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

或者用幾何圖形把某個元素表現出來，比如用幾何圖形設計英文字母就很常見。

這個方法的關鍵是要使圖形幾何化以后，仍能保持著原圖形的識別性，所以我們要根據原圖形本身的特點，來反復嘗試看它適合轉化成哪種幾何圖形。

1. 實例：圓形的「購」字設計

比如說「購」字，如果把它設計成矩形會很容易，但會缺少特點，因為它本身的外形就很接近矩形，所以我打算把它設計成圓形，能不能行得通呢？我們可以先在草圖上試一試。

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

置換

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

需要注意的是，置換過來的元素 A 在設計風格和細節處理上，都要與元素 B 統一。

1. 實例：豬豬冰淇淋圖形設計

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

由于雪糕筒的風格是很簡潔的描邊風格，所以豬的設計風格也要與其統一。

接下來只要在豬的圖形上加一個雪糕筒就可以了，調整一下二者的比例關系，統一線條粗細，一個豬豬冰淇淋圖形就設計好了。

總結

圖形設計的方法還有很多，大家可以通過看大量的作品來自行總結，不過，最重要的不是知道這些方法，而是懂得如何通過正確地使用它們設計出優秀的圖形。牢記設計的基本原則，多觀察生活中的事物，尋找不同造型的特點，并多去嘗試把它們聯系起來，或者是把他們用另外一種方式表現出來，長此以往，你對圖形設計的感覺一定會越來越強。

作者：藍藍

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

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

一、基礎的表格設計美化

      基礎的表格可變化的地方很少，可以根據當前軟件開發選擇的框架控件（ext/vue/jequery不同框架會有一些不一樣）做色彩和風格的變化，如：加表格不同粗細的線、斑馬格，中間無豎線種種的設計，有的表格需要標題很突出，有的內文突出，這就和內容焦點相關了。

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

 

可以用固定表頭（標題位置不變），允許用戶排序，單元格內有很長的文字，設定最大字節，多內容用……替代避免轉行，有小數點的數字右對齊，每列的大小可調整，這些也是設計開發中可以做好的細節部分。

二、特別寬的表格怎么設計？

有的表格的寬度，達到了屏幕的兩屏和三屏，出現寬寬的橫向滾動條，又有長長的豎向滾動條，但工作的人又必須看，可煩人了！很多軟件都因為這個原因被吐槽。下面就介紹三種方法解決這個問題：

方法一

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

方法二

如果表格里面的內容是確定的，不可省略的，比如銀行的報表就是這么長，這么多，那我們就可以從設計的角度來優化，做一個加高版的表格。

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

方法三

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

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

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

      一個系統總是需要業務擔當，顏值擔當的核心部分，重要的頁面要額外的對待、花更多的精力和時間。如果千篇一律，也就不能顯示出軟件產品的獨到之處了。

 

第三 與表格配合的部分設計

第一種  “搜索查詢”和“過濾”部分的設計

     大多數表格的前面都有搜索過濾功能，如果搜索條件相當多，可以精選一部分主要的排成一行，其他的隱藏，點箭頭再出現。整個搜索區域也可以有隱藏／顯示的按鈕，來給下面的表格更多的空間。

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

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

第二種  表格操作部分的設計

       對表格的操作“導入，導出、批量導出”有的時候這類操作有10—20個，有的時候才幾個，多的時候很占地方，可以用隱藏的方法，over到表格上再出現，以節省空間。

       也可以分組把同類的操作聚合在一起，把常用的放在目之所及，不常用的點后下浮出現，以節省空間，

還可以光標跟隨表格的某一行，點選自動浮出一群小跟班，各種操作按鈕。即節省空間，操作移動路徑又很短。只是不支持批量操作。

 

第三種  表格和卡片式設計、統計圖的整合切換

       表格是可以轉換成卡片式設計的，用一個卡片代替一行的展現信息，改變一種閱讀的方式。

有的也可以轉換圖統計圖表：曲線圖，柱狀圖讓用戶直觀的去解讀，而不必一直看枯燥的數字。

 

日常設計中，我們可以收集一些類型海報，去分析它們的特點進行練習，逐漸熟練掌握各個風格特征。

我們知道，透過現象看本質，才能實現真正意義上的認識。其實版式設計也是一樣的，歸根到底，版式要素就是由文字與圖形或者圖片組成的，因此文字的編排、圖形或圖片的運用以及色彩的搭配將成為我們學習的重點。

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

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

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

下面這三幅是電影「被解放的姜戈」的宣傳海報，這是我幾年前看的了，里面還有帥帥的小李子，在電影里有點壞。

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

下面進入今天的分享時間，噔噔噔噔~

我們將從網上整理好的文案進行簡單的層級劃分。

STEP 01 ：構圖方式

這里我選用上下分割構圖來進行設計，上方準備放個牛仔的形象，下面放置信息。

STEP 02 ：主體刻畫

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

下面我們來刻畫主標題，牛仔的形象是硬朗冷靜，所以椅子選用粗黑體，同時結合有肌理的英文字體進行編排。

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

最后我們將處理好的主體和主標題都放入畫面中，對人物進行適當旋轉，同時標出剩余信息的大概位置。

STEP 03：信息處理

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

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

STEP 04：優化版面

之后來搭配顏色，我們選用復古的顏色做背景，同時文字根據人物的顏色進行搭配。

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

最后我們加上一個類似通緝令的復古紙張效果，同時微調信息的大小，這樣整個畫面就完成了。

技法講解

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

調整漸變的矩形數量。

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

STEP 05：樣機效果

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

文章來源：優設    作者：趣設記

   隨著大數據產業的發展，越來越多的公司開始實現數據資源的管理和應用，尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時，用戶界面設計者需要呈現相應的視覺效果。接下來為大家介紹大屏可視化的UI設計。

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

 --大屏UI設計--

（圖片均來源于網絡）

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

    更多精彩文章：

       

 大數據可視化設計賞析（一）

  大數據可視化設計賞析（二）

  大數據可視化設計賞析（三）

  大數據可視化設計賞析（四）

  大數據可視化設計賞析（五）

  大數據可視化設計賞析（六）

  大數據可視化設計賞析（七）

編者按：這是 UI 設計師 Diana Malewicz 的第二篇 UI 設計分享。這一次，她要設計的是一個控制面板的界面，如何控制不同UI元素的平衡，如何從零開始構建，相當值得學習~

歡迎來到我的「UI設計指南」第二篇！如果你對于我的第一篇文章印象不錯的話，那么這一篇應該也會合你胃口：

當然，請注意一點，我創建 UI 界面的過程中，繞過了通常 UI 和產品設計應該有的「用戶調研」——「用戶研究」——「體驗分析」這樣的前置步驟，而是直接開始創建干凈、一致的 UI 界面。在真實的設計項目當中，開頭的這些步驟是無法忽略的！

基本思路和低保真線框圖

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

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

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

然后我針對哪些內容在哪里顯示，進行了基本的說明。

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

1. Vue 無法檢測實例被創建時不存在于 data 中的 property

原因：由于 Vue 會在初始化實例時對 property 執行 getter/setter 轉化，所以 property 必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。

場景：

var vm = new Vue({

 data:{},

 // 頁面不會變化

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

})

vm.message = 'Hello!' // `vm.message` 不是響應式的

解決辦法：

var vm = new Vue({

 data: {

   // 聲明 a、b 為一個空值字符串

   message: '',

 },

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

})

vm.message = 'Hello!'

2. Vue 無法檢測對象 property 的添加或移除

原因：官方 - 由于 JavaScript（ES5） 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。

場景：

var vm = new Vue({

 data:{

   obj: {

     id: 001

   }

 },

 // 頁面不會變化

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

})

vm.obj.message = 'hello' // 不是響應式的

delete vm.obj.id       // 不是響應式的

解決辦法：

// 動態添加 - Vue.set

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

// 動態添加 - vm.$set

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

// 動態添加多個

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

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

// 動態移除 - Vue.delete

Vue.delete(vm.obj, propertyName)

// 動態移除 - vm.$delete

vm.$delete(vm.obj, propertyName)

3. Vue 不能檢測通過數組索引直接修改一個數組項

原因：官方 - 由于 JavaScript 的限制，Vue 不能檢測數組和對象的變化；尤雨溪 - 性能代價和獲得用戶體驗不成正比。

場景：

var vm = new Vue({

 data: {

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

 }

})

vm.items[1] = 'x' // 不是響應性的

解決辦法：

// 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() 可以監測數組的變化

Object.defineProperty() 可以監測數組的變化。但對數組新增一個屬性（index）不會監測到數據變化，因為無法監測到新增數組的下標（index），刪除一個屬性（index）也是。

場景：

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

arr.forEach(function(item, index) {

   Object.defineProperty(arr, index, {

   set: function(value) {

     console.log('觸發 setter')

     item = value

   },

   get: function() {

     console.log('觸發 getter')

     return item

   }

 })

})

arr[1] = '123'  // 觸發 setter

arr[1]          // 觸發 getter 返回值為 "123"

arr[5] = 5      // 不會觸發 setter 和 getter

4. Vue 不能監測直接修改數組長度的變化

原因：官方 - 由于 JavaScript 的限制，Vue 不能檢測數組和對象的變化；尤雨溪 - 性能代價和獲得用戶體驗不成正比。

場景：

var vm = new Vue({

 data: {

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

 }

})

vm.items.length = 2 // 不是響應性的

解決辦法：

vm.items.splice(newLength)

5. 在異步更新執行之前操作 DOM 數據不會變化

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

場景：

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

var vm = new Vue({

 el: '#example',

 data: {

   message: '123'

 }

})

vm.message = 'new message' // 更改數據

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

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

解決辦法：

var vm = new Vue({

 el: '#example',

 data: {

   message: '123'

 }

})

vm.message = 'new message' // 更改數據

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

Vue.nextTick(function () {

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

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

})

拓展：異步更新帶來的數據響應的誤解

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

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

var vm = new Vue({

 el: '#example',

 data: {

   message: {},

 }

})

vm.$nextTick(function () {

 this.message = {}

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

})

上段代碼中，我們在 data 對象中聲明了一個 message 空對象，然后在下次 DOM 更新循環結束之后觸發的異步回調中，執行了如下兩段代碼：

this.message = {};

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

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

模板更新了，應該具有響應式特性，如果這么想那么你就已經走入了誤區。

一開始我們在 data 對象中只是聲明了一個 message 空對象，并不具有 text 屬性，所以該 text 屬性是不具有響應式特性的。

但模板切切實實已經更新了，這又是怎么回事呢？

那是因為 Vue.js 的 DOM 更新是異步的，即當 setter 操作發生后，指令并不會立馬更新，指令的更新操作會有一個延遲，當指令更新真正執行的時候，此時 text 屬性已經賦值，所以指令更新模板時得到的是新值。

模板中每個指令/數據綁定都有一個對應的 watcher 對象，在計算過程中它把屬性記錄為依賴。之后當依賴的 setter 被調用時，會觸發 watcher 重新計算 ，也就會導致它的關聯指令更新 DOM。

具體流程如下所示：

執行 this.message = {}; 時， setter 被調用。

Vue.js 追蹤到 message 依賴的 setter 被調用后，會觸發 watcher 重新計算。

this.message.text = '我更新啦！'; 對 text 屬性進行賦值。

異步回調邏輯執行結束之后，就會導致它的關聯指令更新 DOM，指令更新開始執行。

所以真正的觸發模版更新的操作是 this.message = {};這一句引起的，因為觸發了 setter，所以單看上述例子，具有響應式特性的數據只有 message 這一層，它的動態添加的屬性是不具備的。

對應上述第二點 - Vue 無法檢測對象 property 的添加或移除

6. 循環嵌套層級太深，視圖不更新？

看到網上有些人說數據更新的層級太深，導致數據不更新或者更新緩慢從而導致試圖不更新？

由于我沒有遇到過這種情況，在我試圖重現這種場景的情況下，發現并沒有上述情況的發生，所以對于這一點不進行過多描述（如果有人在真實場景下遇到這種情況留個言吧）。

針對上述情況有人給出的解決方案是使用強制更新：

如果你發現你自己需要在 Vue 中做一次強制更新，99.9% 的情況，是你在某個地方做錯了事。

vm.$forceUpdate()

7. 拓展：路由參數變化時，頁面不更新（數據不更新）

拓展一個因為路由參數變化，而導致頁面不更新的問題，頁面不更新本質上就是數據沒有更新。

原因：路由視圖組件引用了相同組件時，當路由參會變化時，會導致該組件無法更新，也就是我們常說中的頁面無法更新的問題。

場景：

<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

})

上段代碼中，我們在路由構建選項 routes 中配置了一個動態路由 '/home/:name'，它們共用一個路由組件 Home，這代表他們復用 RouterView 。

當進行路由切換時，頁面只會渲染第一次路由匹配到的參數，之后再進行路由切換時，message 是沒有變化的。

解決辦法：

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

通過 watch 監聽 $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 就會認為這是不同的 <router-view>。

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

<div id="app">

 ...

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

</div>