關(guān)于「撤銷」有很多設(shè)計(jì)細(xì)節(jié)可以講，所以我花了兩周時間，將其濃縮成 3000 字，幫助各位產(chǎn)品設(shè)計(jì)師更好理解撤銷的設(shè)計(jì)細(xì)節(jié)。

撤銷的目的是幫助用戶取消當(dāng)前的操作行為。

撤銷可以對用戶使用產(chǎn)品起到一種安全保障作用，讓用戶在界面中自由地探索而無需擔(dān)心操作所可能導(dǎo)致的嚴(yán)重后果。

或者用戶刪除了一個視頻，撤銷可以幫助用戶恢復(fù)他所刪除的內(nèi)容；以及用戶進(jìn)行了一步操作，覺得不太好，就通過撤銷來回退到上一步操作。

與之對應(yīng)的叫「重做」，就是當(dāng)用戶撤銷了當(dāng)前的操作，但是想了想，還是行進(jìn)到剛才已經(jīng)操作的步驟好了。既給了用戶安全感，還給了用戶反悔的余地。

類似于下象棋的時候，你覺得這一步走得不好，所以悔棋了，雖然對家沒說什么，但是你心里又覺得過意不去，畢竟落子無悔真君子，所以你又把棋子放回去了（真是不怎么恰當(dāng)?shù)谋扔髂兀?

這樣做的目的是提升用戶使用產(chǎn)品的信心，增強(qiáng)對產(chǎn)品的控制感；鼓勵用戶放心地探索，快速建立起自己熟悉的操作路徑。

所以關(guān)于撤銷，我們可以從下面幾點(diǎn)來聊聊：

• 依次序撤銷
• 選擇性撤銷
• 撤銷在界面中的運(yùn)用
• 與撤銷沖突的元素

依次序撤銷

它的意思是，依次撤銷之前的操作。

在尼爾森可用性原則里，就有一條類似的原則存在，即 User control and freedom（允許用戶自由操控）。

很多人把這條原則解讀為「撤銷原則」，本質(zhì)上是沒什么問題的，因?yàn)槌蜂N確實(shí)需要讓用戶自由操控。但是早期的撤銷，并不「自由」，而僅僅只是讓用戶在一定范圍內(nèi)「可操控」。

比如早期在一些產(chǎn)品里，執(zhí)行多步操作，但往往只能撤銷一次，要想繼續(xù)撤銷是不被允許的，所以它的操控自由度就很低。那時候如果把這條原則解讀為「撤銷原則」，顯然是不合理的。

于是，后來逐漸延伸出多次撤銷的功能。

我記得最早使用 PS 的時候，在 PS 里面就有關(guān)于撤銷次數(shù)的范圍設(shè)定，但是我忘了具體范圍的上限與下限是多少了。

使用的方式是，比如我設(shè)置參數(shù)為 10，那么之后我的撤銷也只能操作 10 次，要想繼續(xù)撤銷，就會告知無法繼續(xù)了。

現(xiàn)在的很多工具產(chǎn)品應(yīng)該是沒有這些限制了，比如 Sketch，Word 都是可以無限次撤銷直至最初始狀態(tài)或剛打開文件的狀態(tài)。

相對早期撤銷的使用邏輯，后來可多次撤銷的操作在自由度上，確實(shí)是好了那么一些。

它就是在「單次撤銷」的基礎(chǔ)上，給了用戶「多次撤銷」的機(jī)會，并讓用戶回到自己滿意的位置。

但是這里的撤銷，它還不夠自由，因?yàn)樗恰敢来纬蜂N」—— 每一步撤銷用戶都得經(jīng)歷。

選擇性撤銷

當(dāng)撤銷隨著用戶場景的變化而進(jìn)化之后，才真正具備了比較自由的操控方式。

讓撤銷具備「選擇屬性」，必須與另一個元素做一個結(jié)合，那就是「歷史記錄」。

繼續(xù)拿 PS 舉例。

大家看到上面這張圖，當(dāng)你在 PS 的畫板里完成了一系列操作之后，發(fā)現(xiàn)后面有一些東西做得不是很好，想回去重做，但是依次撤銷又覺得不好把控，于是就通過操作歷史，來選擇具體回退到哪一步。

相比于依次序撤銷，選擇性撤銷的自由度更高，也更符合其對尼爾森可用性第三條原則的解讀。

或者再通俗一點(diǎn)的例子，瀏覽器。

假設(shè)這時候你打開了 5 個網(wǎng)頁，關(guān)掉了其中 3 個，但是突然想起第 1 個關(guān)掉的網(wǎng)頁還有值得收藏的內(nèi)容，于是依次撤銷 3 次，才打開第 1 個關(guān)掉的頁面。

而現(xiàn)在有網(wǎng)頁歷史記錄，就可以直接幫你打開之前關(guān)閉掉的所有網(wǎng)頁中的其中一個。

解決了用戶每一步都要經(jīng)歷的問題。

當(dāng)「撤銷」與「歷史記錄」結(jié)合之后，「選擇性撤銷」的出現(xiàn)還能解決掉「依次序撤銷」的一個關(guān)鍵問題：撤銷重做之后，無法復(fù)原。

通俗點(diǎn)講，就是當(dāng)用戶撤銷到之前的操作，進(jìn)行了新的操作行為，那么原來舊的那條線路就被廢棄了。看圖：

當(dāng)用戶操作到第 5 步，然后撤銷至第 3 步，再執(zhí)行一次新的操作，那么步驟 4 與步驟 5 就會被廢棄。

大家知道很多設(shè)計(jì)師都會做版本記錄，因?yàn)?PS 的歷史記錄雖然在撤銷操作上方便了很多，但無法復(fù)原之前的操作邏輯依舊不能滿足一些設(shè)計(jì)師的訴求。

畢竟不廢棄的話，撤銷操作的邏輯就會很復(fù)雜；且通?！高x擇性撤銷」伴隨解釋，說明用戶清楚知道自己當(dāng)前行為會造成何種后果。但它并不能解決用戶操作過程中實(shí)際存在的這類問題。

而「選擇性撤銷」的「版本記錄」可以解決這個問題，來看下面這個例子。

結(jié)合歷史/版本記錄，比如用 Notion 或石墨寫了一篇文章，它們都會有版本記錄，過程中會根據(jù)時間維度與內(nèi)容變更維度來判斷是否進(jìn)行保存，那么當(dāng)用戶想回滾到之前的那段內(nèi)容，只要對這些版本進(jìn)行點(diǎn)擊查看，然后選擇具體撤回到哪一步即可。

比如我今天（2019.11.05）早上花了半小時最后對文章做了一次整理，添加了圖片，它就會記錄其中的操作變化，且可進(jìn)行選擇。這里無論如何撤至哪一步，其它內(nèi)容都會有留存，不會消失。

也許這已經(jīng)不是通常意義上的撤銷，但它確實(shí)是撤銷的升級版。

這樣看起來是不是自由操控度要高很多呢？

到這里，我只是講了「撤銷」的特性，下面來聊下它在界面設(shè)計(jì)中是如何應(yīng)用的。

撤銷在界面中的運(yùn)用

我們現(xiàn)在在很多產(chǎn)品里都能看到撤銷，在網(wǎng)頁里與移動 App 中，它的使用形式雖然多樣，但本質(zhì)上并沒什么區(qū)別。

大多就是單次撤銷，因?yàn)橛貌坏蕉啻纬蜂N，多次撤銷更多是在工具里被使用。

比如油管的撤銷使用：

當(dāng)用戶對一個視頻進(jìn)行「不感興趣」的操作時，視頻內(nèi)容會變成右邊這樣，可撤銷。這個內(nèi)容會一直存在直到用戶刷新頁面時才會消失。

類似的還有淘寶網(wǎng)頁端的購物車，當(dāng)刪除添加的任一商品后，其也會在附近位置出現(xiàn)可撤銷的操作。

在網(wǎng)頁產(chǎn)品中，撤銷的運(yùn)用大多是這樣的。

我們再來看移動端產(chǎn)品對于撤銷的應(yīng)用。

在 iOS 中比較常見的是微信的搖一搖手機(jī)撤銷正在鍵入的內(nèi)容：

這類撤銷較為被動，經(jīng)常是在無意間觸發(fā)，所以不是我們主要要聊的。

而有一類產(chǎn)品，撤銷會以 Snackbars 的形式出現(xiàn)，如圖：

當(dāng)這類郵箱產(chǎn)品，刪除了某封郵件后，在底部就會出現(xiàn)這樣的提示，告知用戶可撤銷上一步行為。

更多的還是工具類產(chǎn)品，比如修圖類產(chǎn)品 Snapseed：

它有單次撤銷，也可以重做，還能多次撤銷，多次撤銷就是點(diǎn)擊「查看修改內(nèi)容」之后，右圖出現(xiàn)的樣子，它會把所有步驟都呈現(xiàn)出來，給予用戶選擇具體撤銷至哪一步。

其實(shí)更多的也就是這樣了，但是，為什么呢？為什么在非工具類產(chǎn)品里撤銷很少見呢？難道用戶從來不會誤操作或操作之后反悔？

下面一節(jié)來解答。

與撤銷沖突的元素

先放結(jié)論：當(dāng)某個功能具備撤銷屬性時，切勿再使用二次確認(rèn)對話框，反之同樣成立。

撤銷與二次確認(rèn)，是兩種東西，雖然有時候解決的是同一個問題，但是它們的屬性是完全不同的。

舉個例子：

上面這張圖，左邊是在執(zhí)行操作前彈出的確認(rèn)框，右邊是執(zhí)行操作后彈出的提示框。

二者的區(qū)別很明顯，二次確認(rèn)的刪除提示框更具警示效果，后者作為提示，較為弱化，且通常是在用戶操作完成后彈出。對于用戶來說，在非工具類產(chǎn)品中，前者更好的抑制了用戶的沖動行為或誤操作行為。后者作為提示類控件，不具備警示效果。

所以它們不應(yīng)該同時出現(xiàn)，且它們雖然是解決同一個問題，但是是完全不同的情況。

于是，在大多數(shù)產(chǎn)品中我們很少看到撤銷的使用，因?yàn)榇蟛糠中鑷?yán)謹(jǐn)?shù)牟僮鞫紩卸未_認(rèn)，并不嚴(yán)重的操作也就不需要任何提示。即使是上述提到的郵箱刪除，沒有二次確認(rèn)也是因?yàn)樗谐蜂N作為提示且還有回收站允許用戶檢查確認(rèn)。

所以，除非是場景與之密切相關(guān)的，比如社交產(chǎn)品內(nèi)容發(fā)送后的撤回功能。

微信早期的撤回，只是撤銷，它并不具備「重做」屬性，現(xiàn)在撤回，內(nèi)容會重新出現(xiàn)在輸入框讓用戶重新編輯。

它們之間的差異是：它并不會產(chǎn)生嚴(yán)重后果，但確實(shí)會產(chǎn)生小問題。比如誤操作發(fā)出信息，或發(fā)出后發(fā)現(xiàn)話術(shù)并不嚴(yán)謹(jǐn)。

所以這一段內(nèi)容只是想告訴各位：二次確認(rèn)操作與撤銷操作是兩種不同的東西，雖然看起來是解決同一個問題，但它們的差異也是非常明顯的。必須謹(jǐn)記。

另外還有個提示：心細(xì)的同學(xué)會注意到文章里或其他產(chǎn)品里出現(xiàn)的「撤銷」通常也會寫成「撤消」。在別的領(lǐng)域里這是兩種不同的內(nèi)容，但在產(chǎn)品設(shè)計(jì)領(lǐng)域里，目前并沒有對這兩者做明確的區(qū)分，所以暫時不用過于糾結(jié)。

總結(jié)

這篇文章講了很多內(nèi)容，我在這里梳理下：

• 撤銷分為依次序撤銷與選擇性撤銷；
• 依次序撤銷有單次撤銷與多次撤銷，以 PS 為例；
• 選擇性撤銷大多在工具類產(chǎn)品里被使用，它與歷史記錄結(jié)合，解決了依次序多次撤銷部分內(nèi)容被覆蓋的問題；
• 在非工具類產(chǎn)品里，被使用更多的是單次撤銷，是因?yàn)閳鼍跋拗疲?
• 撤銷與二次確認(rèn)不可同時出現(xiàn)，它們看起來是解決同個問題，但之間存在較大差異。

所以當(dāng)你設(shè)計(jì)的產(chǎn)品要用到撤銷時，也要注意這些細(xì)節(jié)問題。

這就是本篇文章的所有內(nèi)容了。其實(shí)這篇文章里包含的內(nèi)容有很多，而且有很多爭議點(diǎn)我都沒放出來，直接一筆帶過給出正確結(jié)論了。寫這種大部頭文章太累，要思考的點(diǎn)很多，需要幫助讀者從多視角排雷，很可能導(dǎo)致初學(xué)者在讀文章過程中出現(xiàn)閱讀吃力的問題。所以之后還是會挑一個點(diǎn)來寫吧。

文章來源：優(yōu)設(shè)

本文對幾種常見的異常狀態(tài)進(jìn)行設(shè)計(jì)總結(jié)，其中介紹了不同異常狀態(tài)的表現(xiàn)形式以及我們應(yīng)展現(xiàn)的設(shè)計(jì)狀態(tài)與規(guī)范。

異常狀態(tài)多在特殊場景下出現(xiàn)，比如服務(wù)器異常、網(wǎng)絡(luò)異常等，因?yàn)楫惓顟B(tài)出現(xiàn)的概率是較低的，所以異常狀態(tài)也常常會被忽略，等到實(shí)際碰到的時候才會意識到原來還有這種狀態(tài)……

作為交互設(shè)計(jì)師，在完成主流程設(shè)計(jì)后，也應(yīng)該考慮到異常場景。

從全局性出發(fā)，我們可以預(yù)先考慮到產(chǎn)品將會碰到的異常狀態(tài)，針對不同的異常狀態(tài)制定相應(yīng)的設(shè)計(jì)規(guī)范，在后續(xù)的設(shè)計(jì)需求中直接復(fù)用即可。

下面對幾種常見的異常狀態(tài)進(jìn)行設(shè)計(jì)總結(jié)。

一、網(wǎng)絡(luò)異常

1. 原因

網(wǎng)絡(luò)異常的原因主要有以下兩種原因：

（1）網(wǎng)絡(luò)連接權(quán)限

針對某App的網(wǎng)絡(luò)連接權(quán)限可以通過手機(jī)進(jìn)行設(shè)置，可設(shè)置為關(guān)閉應(yīng)用使用數(shù)據(jù)，或者只允許應(yīng)用在WLAN下使用，或者允許應(yīng)用在WLAN與蜂窩網(wǎng)絡(luò)下均可使用。

所以以下均屬于網(wǎng)絡(luò)異常的情況：

• 關(guān)閉應(yīng)用使用數(shù)據(jù)，在流量或WI-FI環(huán)境下打開App
• 只允許應(yīng)用在WI-FI下使用，但在流量環(huán)境下打開App

（2）網(wǎng)絡(luò)連接狀況

在斷網(wǎng)（打開飛行模式）、弱網(wǎng)（手機(jī)信號差）的情況下， 也無法正常獲取數(shù)據(jù)。

2. 處理方式

當(dāng)網(wǎng)絡(luò)異常時，用戶點(diǎn)擊進(jìn)入新頁面或在當(dāng)前頁進(jìn)行操作時，App會通過異常狀態(tài)缺省頁或交互反饋來告知用戶當(dāng)前異常狀態(tài)和解決方案。主要分為兩種情況：

（1）當(dāng)用戶操作進(jìn)入App新的頁面時，常以缺省頁的形式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。當(dāng)應(yīng)用檢測到有可用網(wǎng)絡(luò)時，缺省頁將自動刷新頁面內(nèi)容。

比如網(wǎng)易云音樂在無網(wǎng)絡(luò)連接下，進(jìn)入新頁面時，缺省頁以簡單的文案告知無網(wǎng)絡(luò)的基礎(chǔ)原因，通過查看詳情來告知用戶解決方案以及引導(dǎo)如何解決問題。

美團(tuán)、騰訊視頻等，引導(dǎo)用戶檢查網(wǎng)絡(luò)權(quán)限設(shè)置和稍后再嘗試刷新頁面，稍后再試是因?yàn)槿蹙W(wǎng)環(huán)境是暫時的，比如在地鐵上高鐵上或者某處手機(jī)信號接收較差的地方。

（2）當(dāng)用戶點(diǎn)擊操作當(dāng)前頁面時，比如上拉加載頁面、下拉刷新頁面，點(diǎn)贊、關(guān)注等操作時，常以toast或?qū)υ捒虻男问教崾居脩簟?

比如網(wǎng)易云音樂，網(wǎng)絡(luò)異常情況下下拉刷新或上拉加載頁面均進(jìn)行對話框提示，并引導(dǎo)用戶檢查網(wǎng)絡(luò)權(quán)限設(shè)置。

美團(tuán)外賣，無網(wǎng)絡(luò)連接環(huán)境下，在我的訂單頁面進(jìn)行評價操作，會進(jìn)行toast提示。

二、流量警告

前面說完網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范，接下來就不得不提到流量警告的場景。

對于需要消耗大量流量的應(yīng)用：

（1）在流量環(huán)境下進(jìn)行需要消耗大流量的操作，比如播放/下載音視頻等，頁面會進(jìn)行流量警告。比如網(wǎng)易云音樂在流量環(huán)境下打開MV。

（2）在WI-FI環(huán)境下切換到流量環(huán)境時通常應(yīng)用會主動暫停進(jìn)程并進(jìn)行流量警告，并在頁面上告知用戶原因，讓用戶選擇是否繼續(xù)進(jìn)程。

比如網(wǎng)易云音樂、愛奇藝、芒果TV、BiliBili等音視頻娛樂App，在以上2種場景下，在視頻畫布上進(jìn)行告知讓用自己選擇是否繼續(xù)播放，同時也提供按鈕入口讓用戶辦理業(yè)務(wù)可免流量進(jìn)行播放。其中，芒果TV和BiliBili的繼續(xù)播放按鈕還貼心地告知了用戶將要消耗的流量值。

對以上兩種場景的處理方式進(jìn)行歸納，均為流量警告方式。

三、網(wǎng)絡(luò)異常和流量警告適用場景快速查詢

總結(jié)完網(wǎng)絡(luò)異常和流量警告的設(shè)計(jì)規(guī)范，我們知道其中影響因素包含：網(wǎng)絡(luò)連接權(quán)限、網(wǎng)絡(luò)連接狀況以及網(wǎng)絡(luò)環(huán)境的變化，下面做一個小總結(jié)，以便快速查詢。

在總結(jié)之前強(qiáng)調(diào)一下，網(wǎng)絡(luò)權(quán)限設(shè)置是針對某App，連接Wi-Fi和流量是針對手機(jī)（所有應(yīng)用）。以iOS為例，設(shè)置截圖如下：

情況一：當(dāng)前網(wǎng)絡(luò)環(huán)境不變化

情況二：當(dāng)前網(wǎng)絡(luò)環(huán)境發(fā)生變化

針對以上情況，表現(xiàn)狀態(tài)為“網(wǎng)絡(luò)異?！?，則參照網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范；表現(xiàn)狀態(tài)為“流量警告”，則參照流量警告的設(shè)計(jì)規(guī)范。

四、服務(wù)器異常

服務(wù)器出錯的情況是較少出現(xiàn)的，若出現(xiàn)服務(wù)器異常，其異常的時間也較為短暫。

一般不提示具體原因，處理方式為進(jìn)入新頁面的話則以缺省頁（文案或是文案+插畫）的形式進(jìn)行提示+重試按鈕，例如，進(jìn)入小米金融貸頁面時服務(wù)器出現(xiàn)異常，缺省頁提示錯誤原因同時提供重試按鈕。

點(diǎn)擊操作的話則以toast或?qū)υ捒虻男问竭M(jìn)行提示并重試，比如下圖的段友a(bǔ)pp，服務(wù)器出錯，刷新頁面后進(jìn)行toast提示；前段時間超級火的zao應(yīng)用，朋友圈火爆傳播，一度造成服務(wù)器訪問過載，制作視頻的時候應(yīng)用給出了對話框提示。

五、加載失敗

1. 原因

在數(shù)據(jù)加載過程中，導(dǎo)致異常的原因可能是：
1、網(wǎng)絡(luò)異常導(dǎo)致加載失敗

2、服務(wù)器請求數(shù)據(jù)失敗導(dǎo)致加載失敗

2. 處理方式

1、如果是因?yàn)榫W(wǎng)絡(luò)異常導(dǎo)致加載失敗，處理方式參照網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范。

2、如果是服務(wù)器請求數(shù)據(jù)失敗，處理方式參照服務(wù)器異常的設(shè)計(jì)規(guī)范。

六、空狀態(tài)

1. 原因

空狀態(tài)就是指頁面當(dāng)前無內(nèi)容，主要在以下場景下會出現(xiàn)空狀態(tài)的情況：

1. 無權(quán)限，某些界面和功能會針對不同的角色設(shè)定不同的使用權(quán)限，無權(quán)限訪問的頁面會出現(xiàn)空狀態(tài)的情況
2. 搜索無結(jié)果，搜索無相應(yīng)結(jié)果會進(jìn)行空狀態(tài)提示
3. 初始內(nèi)容為空，例如無瀏覽記錄、無收藏、無購買記錄、無訂單記錄、無下載記錄等
4. 內(nèi)容被刪，若內(nèi)容允許被清空，內(nèi)容清空后會回到初始前的空狀態(tài)

2. 處理方式

當(dāng)前頁面為空一般會提示用戶當(dāng)前頁面為空狀態(tài)，同時也可能會做適當(dāng)?shù)囊龑?dǎo)。

針對空狀態(tài)的場景，主要采取以下幾種設(shè)計(jì)原則：

（1）用戶無權(quán)限

一般在B端產(chǎn)品中會碰到這種場景，通常來說，若用戶無權(quán)限訪問某功能模塊的話，處理方式一般是將該功能模塊對用戶進(jìn)行隱藏。

若有其他原因不能隱藏對應(yīng)功能模塊，處理方式為缺省頁面（文案或是文案+插畫），但文案要足夠明確，告知無權(quán)限的用戶該如何處理才能訪問，一般是聯(lián)系管理員添加權(quán)限。

（2）搜索無結(jié)果
搜索無結(jié)果的處理方式一般有兩種處理方式，一種是缺省頁面（文案或是文案+插畫），另一種是在第一種的基礎(chǔ)上加上相關(guān)推薦。具體用哪一種根據(jù)設(shè)計(jì)目標(biāo)來決定。

比如網(wǎng)易云音樂搜索音樂無結(jié)果直接用文案告知。豆瓣搜索書影單無結(jié)果以插畫+文案的形式展示結(jié)果。美團(tuán)搜索不到相應(yīng)的內(nèi)容，應(yīng)用直接推薦其他商家刺激用戶購買。

另外也有應(yīng)用會添加一些引導(dǎo)操作收集用戶數(shù)據(jù)來優(yōu)化搜索，比如微信讀書找不到相關(guān)的數(shù)據(jù)，在頁面的底部提供一個入口讓用戶填寫書籍名稱和作者，基于用戶的反饋數(shù)據(jù)，微信讀書在后續(xù)書城書目的收錄工作中，就可以優(yōu)先收錄用戶搜索率較高的書籍了，在優(yōu)化搜索的同時也提供了用戶反饋訴求的入口。

（3）初始內(nèi)容為空

需要用戶進(jìn)行操作產(chǎn)生內(nèi)容的頁面，初始狀態(tài)一般為空，和搜索無結(jié)果的處理方式類似，有2種處理方式，一種是缺省頁面（文案或是文案+插畫），另一種是在第一種的基礎(chǔ)上加上快捷入口或推薦內(nèi)容，其目的都是在于引導(dǎo)用戶進(jìn)行操作從而產(chǎn)生數(shù)據(jù)。具體用哪一種還是根據(jù)設(shè)計(jì)目標(biāo)來決定。

直接用缺省頁面告知方式上，例如網(wǎng)易云音樂，個人未發(fā)布相關(guān)動態(tài)，該動態(tài)頁面直接用簡短的文案告知用戶暫無相關(guān)動態(tài)。

提供快捷入口上，比如微信讀書，用戶未加入書籍到書架時，進(jìn)入書架頁面，會有一句話文案引起用戶共鳴，另外附上找書按鈕方便用戶快捷進(jìn)入書城進(jìn)行找書。

如果通過用戶瀏覽記錄和搜索行為等能夠分析出用戶的興趣愛好，進(jìn)行精準(zhǔn)推送，那在空狀態(tài)頁面進(jìn)行推薦引導(dǎo)也不乏是一種很好的嘗試。比如網(wǎng)易云音樂、騰訊視頻和美團(tuán)均有采取該方式。

網(wǎng)易云音樂里頭我從未購買或領(lǐng)取過數(shù)字專輯，該頁面也是無數(shù)據(jù)的，網(wǎng)易云音樂在頁面底部進(jìn)行了數(shù)據(jù)專輯的推薦，具體的推薦算法不太清楚，我覺得可以是銷售量較大的專輯，或者根據(jù)我個人的搜索和瀏覽記錄進(jìn)行相關(guān)推薦，最后通過埋點(diǎn)數(shù)據(jù)分析通過推薦引導(dǎo)購買是否提高了專輯購買率。

（4）內(nèi)容被刪除

頁面內(nèi)容被刪除區(qū)分場景說明。

第一種是需要用戶操作產(chǎn)生內(nèi)容的頁面，用戶也可以通過刪除將頁面內(nèi)容清空。

對于該場景，當(dāng)頁面內(nèi)容被用戶清空后，頁面內(nèi)容為空，處理方式和初始狀態(tài)為空類似，以缺省頁（文案或是文案+插畫）的形式告知或在此基礎(chǔ)上加上快捷入口或用戶推薦。

比如清空網(wǎng)易云音樂中我的下載列表所有單曲、清空騰訊視頻我的緩存視頻，清空微信讀書的書架，清空后的狀態(tài)和初始狀態(tài)是一致的。

另一種場景是的頁面入口依然存在，但二級頁面內(nèi)容已經(jīng)被刪除了，二級空頁面的設(shè)計(jì)處理方式是以缺省頁（文案或是文案+插畫）的形式告知，文案信息告知用戶內(nèi)容已被刪除。

例如某微信訂閱號的文章發(fā)布記錄中的某篇文章已經(jīng)被刪除，點(diǎn)擊進(jìn)入二級頁面后的提示如下：

七、功能重建

功能已上線，后期進(jìn)行產(chǎn)品升級或迭代功能正在開發(fā)中，功能入口沒有進(jìn)行關(guān)閉還是允許用戶訪問，通常會在用戶進(jìn)入該頁面之后進(jìn)行對話對話框提示，告知原因。

總結(jié)

以上對幾種常見異常狀態(tài)的設(shè)計(jì)規(guī)范進(jìn)行了總結(jié)，相對正常狀態(tài)，異常狀態(tài)較為少見，容易忽略，大家可以參照以上規(guī)范進(jìn)行異常狀態(tài)設(shè)計(jì)和優(yōu)化調(diào)整。后面碰到其他異常狀態(tài)，我會繼續(xù)補(bǔ)充。

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

本文從什么是場景化、場景化設(shè)計(jì)的案例、為什么要基于場景化做設(shè)計(jì)和如何進(jìn)行場景化設(shè)計(jì) 4 個方面為你完整梳理場景化設(shè)計(jì)思維的知識點(diǎn)。

什么是場景化設(shè)計(jì)

「場景」在百度百科里的定義是：戲劇、電影中的場面，泛指情景。情景又指：

• 感情與景色
• 情形、景象
• 環(huán)境：假設(shè)是在這個情景。

在戲劇或影視劇里，場景由人物，時空，事件（行為），環(huán)境（社會環(huán)境和自然環(huán)境）等要素構(gòu)成。

互聯(lián)網(wǎng)中的「場景」我把它分為兩類，一類是為了實(shí)現(xiàn)用戶目標(biāo)而產(chǎn)生的場景，這種類型的場景需要明確用戶目標(biāo)，可能并不需要涵蓋用戶是怎么實(shí)現(xiàn)目標(biāo)的。這類場景指根據(jù)用戶的精準(zhǔn)需求，為其提供精準(zhǔn)服務(wù)，用明確的差異化服務(wù)給用戶提供一個使用產(chǎn)品的動機(jī)。比如微博和微信，微信定位是熟人社交，微博則是陌生人社交。另一類是更加精細(xì)化的場景，這類場景需要明確用戶操作流程。本文主要針對第二類場景展開。

場景化設(shè)計(jì)指基于對場景的分析，得出用戶痛點(diǎn)與需求，結(jié)合前后場景預(yù)判用戶目標(biāo)，通過設(shè)計(jì)提高用戶效率，給予用戶驚喜與感動。

場景要素包括：4W+1H，即Who人、When時間、Where地點(diǎn)、What事件 、How環(huán)境，什么人，在什么時候，在什么地方，做了什么事情，所處的環(huán)境如何。其中 Where 又包括線上地點(diǎn)和線下地點(diǎn)，線下指現(xiàn)實(shí)中的定位，可以通過手機(jī)信號塔數(shù)據(jù)（GPS），Wifi 連接等獲??；線上指用戶所處的具體頁面。

如：用戶（who）早上上班（when）在地鐵上（where）看電子書（what），地鐵上人多嘈雜且操作不方便（how）。再比如用戶（who）中午（when）在辦公室里（where）點(diǎn)外賣（what），肚子很餓還不知道吃什么（how）。五要素就像口訣，幫助我們?nèi)婵焖俚孛枋鰣鼍啊?

有哪些場景化設(shè)計(jì)的例子

為幫助大家更好的理解場景化設(shè)計(jì)，這里基于上面提到的場景五要素舉一些例子。

人是變量：用戶不同，看到的信息不同。隨著大數(shù)據(jù)和智能推薦技術(shù)的普及，越來越多的產(chǎn)品通過挖掘不同用戶的喜好，生成用戶畫像，為每位用戶提供「千人千面」的個性化內(nèi)容。這樣的產(chǎn)品大家都很熟悉，比如抖音，淘寶，微博，今日頭條。

時間是變量：時間不同，看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」，當(dāng)在出行類 app 上定好行程后，MIUI11 就會自動將該行程記錄在負(fù)一屏顯示并同步日歷，同時會根據(jù)出行的時間點(diǎn)，在通知欄實(shí)時更新提示：

再比如在 Google Maps 的 app 里開啟導(dǎo)航時，如果目的地在預(yù)計(jì)到達(dá)時間還沒有開門，或者快要/已經(jīng)關(guān)門了的話，會有個彈窗提醒。

還有螞蟻森林的頁面會根據(jù)用戶打開的時間進(jìn)行變化（白天與夜晚模式）等等，這些都是充分考慮了場景中時間這一變量，才有如此暖心的設(shè)計(jì)。

地點(diǎn)是變量：同一個用戶，在不同地點(diǎn)看到的信息不同。比如，大眾點(diǎn)評APP當(dāng)用戶從常住地北京（where）定位成非常住地杭州（where）時，根據(jù)用戶的上個場景與當(dāng)前場景預(yù)測用戶可能處于旅游狀態(tài)，從而預(yù)測用戶下一步的目標(biāo)是在杭州「吃喝玩樂」，所以首頁和攻略頁的內(nèi)容都發(fā)生了變化，為用戶推薦旅行地的「吃喝玩樂」。

環(huán)境是變量：不同環(huán)境看到的信息不同，比如設(shè)備環(huán)境發(fā)生變化時：iOS13 中的備忘錄頁面，將「添加」按鈕移到了右下角。為什么？因?yàn)槭謾C(jī)屏幕越來越大，把按鈕從右上角移到右下角，更有利于用戶單手操作。

再比如：我們在駕駛環(huán)境下，要保持注意力集中，避免或減少分心駕駛導(dǎo)致的交通事故，所以基于駕駛環(huán)境，iOS11 上線了駕駛模式功能。當(dāng) iphone 與車內(nèi)的 USB 或藍(lán)牙連接，或 iphone 感知到人的移動速度時，iphone 就會自動進(jìn)入駕駛模式，在該模式下，任何人發(fā)短信，我們都不會收到提示，對方會收到「我正在駕駛，稍后回復(fù)您」的自動回復(fù)。同時，iphone 會追加一條短信，提示對方只要回復(fù)「緊急」關(guān)鍵詞，我們就能立刻接收到他們的消息提示。

為什么要基于場景做設(shè)計(jì)？

通過上面的舉例想必大家已經(jīng)了解到了基于場景做設(shè)計(jì)的好處。由于與用戶的空間相隔，設(shè)計(jì)師無法感知用戶在真實(shí)場景中使用產(chǎn)品的具體情況。通過場景化設(shè)計(jì)的方法，對用戶使用場景進(jìn)行分析與預(yù)期，可以幫助設(shè)計(jì)師找到用戶與場景的內(nèi)在聯(lián)系，探索新的功能及交互方式。

怎么進(jìn)行場景化設(shè)計(jì)

可以概括為以下四步。

1. 根據(jù)用戶使用流程和行為路徑窮盡場景

根據(jù)用戶的使用流程和行為路徑列舉場景，這里以乘坐飛機(jī)（手機(jī)購票）為例，列舉乘坐飛機(jī)涉及到的關(guān)鍵場景：

• 乘客（who）在航旅縱橫頁面（where）購票（what），航班多查找起來麻煩（how）。
• 乘客（who）起大早拖著疲憊的身體（how）在去往機(jī)場的路上（where），又遇到早高峰堵車，內(nèi)心焦躁煩悶（how）。
• 起飛前（when）乘客（who）在機(jī)場（where）過安檢（what），安檢流程復(fù)雜，又檢測出不符合登機(jī)規(guī)定的物品，讓人心煩，手忙腳亂（how）。
• 起飛前（when），乘客（who）在候機(jī)口（where）候機(jī)（what），人多嘈雜，沒有座位，還背著繁重的行李，還要時刻關(guān)注航班信息（how）。
• 起飛前40分鐘（when），乘客（who）背著行李排著隊(duì)（how），將登機(jī)牌（紙質(zhì)/電子）和身份證出示給工作人員（what），工作人員（who）站在入口處（where）開始檢查每位乘客的登機(jī)牌和身份證（what）。
• 檢完票后（when），乘客（who）拿著身份證和登機(jī)牌，背著行李（how）乘坐擺渡車（what），擺渡車上嘈雜、擁擠（how）。
• 下擺渡車后（when），乘客拿出登機(jī)牌，背著行李（how）排隊(duì)檢票登機(jī)（what），工作人員（who）站在飛機(jī)前（where）開始檢查每位乘客的登機(jī)牌（what）。
• 在起飛前30分鐘（when），乘客（who）登機(jī)（what），背著行李在狹窄擁擠的通道里（how）尋找自己的座位（what）。找到座位后，將沉重的行李艱難的（how）放到上方的置物架上（what）。放好行李后，坐到自己的座位上（what），系好安全帶（what），調(diào)節(jié)座椅靠背（what），等待飛機(jī)起飛（what）。
• 飛行過程中（when），氣流導(dǎo)致飛機(jī)顛簸，乘客感到恐慌不適（how）。飛行過程中，乘客通過看電影，看書，睡覺打發(fā)時間（what）。
• 到達(dá)目的地（when），乘客（who）從高處置物架上（how）取下行李（what），拿著沉重的行李（how）排隊(duì)下飛機(jī)（what）。此時乘客對目的地的天氣等其他情況都不清楚。
• 乘客走出飛機(jī)到達(dá)航站樓后，在陌生的機(jī)場（where），跟著標(biāo)牌指示艱難的找到自己的行李（what）。拿著行李跟著指示牌（how）困難的找出口（what）。

通過對關(guān)鍵場景的詳細(xì)描述，我們將摸不著的用戶場景像過電影一樣在眼前一一呈現(xiàn)，有利于我們發(fā)現(xiàn)很多想不到或者通過調(diào)研得不到的細(xì)節(jié)，幫助我們發(fā)現(xiàn)用戶真正的痛點(diǎn)與需求，洞察設(shè)計(jì)機(jī)會點(diǎn)。

2. 根據(jù)場景挖掘機(jī)會點(diǎn)

完成了第一步的場景列舉，我們對流程中涉及的場景有了深刻的了解。下一步就是對場景的判斷與分析，挖掘機(jī)會點(diǎn)。機(jī)會點(diǎn)挖掘有兩個方向，一是通過分析當(dāng)前場景存在的痛點(diǎn)和需求挖掘機(jī)會點(diǎn)，二是通過對用戶下一步目標(biāo)的預(yù)判尋找機(jī)會點(diǎn)。

通過分析當(dāng)前場景存在的痛點(diǎn)和需求挖掘機(jī)會點(diǎn)

支付寶「朋友」界面，當(dāng)用戶輸入某數(shù)值時，輸入框上方會自動顯示「給對方轉(zhuǎn)賬***元」按鈕，用戶可點(diǎn)擊該按鈕完成轉(zhuǎn)賬。這是因?yàn)榻?jīng)常有用戶誤以為輸入數(shù)值發(fā)送即完成了轉(zhuǎn)賬，導(dǎo)致很多尷尬的狀況出現(xiàn)。基于該場景下的痛點(diǎn)與需求，支付寶做了這個改進(jìn)，貼心又好用。

iOS 系統(tǒng)在切換 APP 操作時，會將一些金融類 APP 虛化，以此來保證用戶信息安全。這一設(shè)計(jì)細(xì)節(jié)也是充分考慮了用戶在切換 APP 時的場景，解除了用戶在公告場合擔(dān)心被窺屏而泄露個人財(cái)富信息的擔(dān)憂。

還有，當(dāng)我們用耳機(jī)聽音樂或播放視頻時，拔下耳機(jī)，聲音就會自動停掉，這樣就算在安靜的場合聽音樂或者看視頻，耳機(jī)不小心掉下來也不會發(fā)出尷尬的聲音，這些都是充分考慮了用戶當(dāng)前使用時的場景，才做出如此貼心的設(shè)計(jì)。

通過對用戶下一步目標(biāo)的預(yù)判尋找機(jī)會點(diǎn)

第二個方法是通過對用戶當(dāng)前場景的分析，預(yù)判用戶下一步的行為與目標(biāo)，從而尋找當(dāng)前場景的機(jī)會點(diǎn)。

如何預(yù)期用戶下一步目標(biāo)？有三個方法：

• 通過成組動作進(jìn)行預(yù)期，如復(fù)制→粘貼，編輯→保存。
• 通過用戶認(rèn)知流程預(yù)判，如，瀏覽時反向滑動→結(jié)束瀏覽/回到頂部；再比如谷歌翻譯在發(fā)音時，第一遍是正常語速，第二遍語速變慢，第三遍又恢復(fù)到常速。是不是很貼心，很符合用戶期望？
• 通過產(chǎn)品使用流程進(jìn)行預(yù)期，如訂外賣→取外賣→評價。

在谷歌瀏覽器，當(dāng)我們打開多個瀏覽窗口時，通常需要手動一個個地關(guān)閉標(biāo)簽頁。chrome 充分考慮到了用戶的使用場景，當(dāng)用戶關(guān)閉一個標(biāo)簽頁時，預(yù)期用戶會關(guān)閉下一個標(biāo)簽頁，所以當(dāng)關(guān)閉一個標(biāo)簽時，相鄰標(biāo)簽會自動靠近，保證關(guān)閉的按鈕始終位于鼠標(biāo)的當(dāng)前位置，這樣用戶就不用移動鼠標(biāo)關(guān)閉下一個標(biāo)簽頁，提高了用戶的使用效率。

3. 機(jī)會點(diǎn)轉(zhuǎn)化為落地的設(shè)計(jì)方案

在將機(jī)會點(diǎn)轉(zhuǎn)化為具體的設(shè)計(jì)時，有兩個可作為依據(jù)的設(shè)計(jì)原則，分別為，情感化。

實(shí)現(xiàn)有以下幾個方法：

行動點(diǎn)前置

通過對用戶下一目標(biāo)的預(yù)測，將用戶目標(biāo)在當(dāng)前場景展示，縮短操作流程，達(dá)到的目標(biāo)。如淘寶首頁的 tab 欄會根據(jù)每個用戶的瀏覽記錄預(yù)測用戶目標(biāo)，千人千面?zhèn)€性化展現(xiàn)，縮短了用戶查找商品的路徑，提高商品購買效率。

行動點(diǎn)置換

還是拿淘寶舉例，淘寶底部的第一個導(dǎo)航，當(dāng)用戶滑動首頁下方的商品流時，該按鈕由首頁變成置頂。

行動點(diǎn)相關(guān)提示

意思是根據(jù)用戶當(dāng)前目標(biāo)或下一步目標(biāo)進(jìn)行相關(guān)的提示。如支付寶朋友頁面，當(dāng)上滑時，會出現(xiàn)「找人轉(zhuǎn)賬」的提示，點(diǎn)擊進(jìn)入朋友列表的純凈模式（去掉了服務(wù)通知等跟轉(zhuǎn)賬無用的列表），提高了用戶尋找的效率。

再比如，網(wǎng)易郵箱，當(dāng)郵件中提到附件，但是沒有上傳附件時，點(diǎn)擊發(fā)送后，系統(tǒng)彈出下方的提示，解決了用戶常常忘記添加附件的困擾。

突出行動點(diǎn)

根據(jù)用戶當(dāng)前目標(biāo)或下一步目標(biāo)突出關(guān)鍵按鈕，幫助用戶快速找到關(guān)鍵操作，吸引用戶點(diǎn)擊，降低了用戶思考成本，提升效率。運(yùn)用這個方法進(jìn)行設(shè)計(jì)的例子太多了，比如淘寶的商品詳情頁用紅色突出購買按鈕等。

直接執(zhí)行

根據(jù)用戶當(dāng)前目標(biāo)或下一步目標(biāo)直接執(zhí)行。比如滴滴的掃一掃界面，當(dāng)檢測到光線較暗時，手電筒會自動打開，提高了掃一掃的效率。

情感化

唐納德·諾曼在《情感化設(shè)計(jì)》中提到設(shè)計(jì)的三個層次，分別為：本能的設(shè)計(jì)，行為的設(shè)計(jì)，反思的設(shè)計(jì)。情感化設(shè)計(jì)是能打動人的，它能傳遞感情，勾起回憶，給人驚喜，情感化設(shè)計(jì)是幫助產(chǎn)品與用戶之間建立情感的紐帶，能強(qiáng)化用戶對品牌的認(rèn)知，培養(yǎng)對品牌的忠誠度。

情感化設(shè)計(jì)的步驟依次為：提煉影響產(chǎn)品的的情感指標(biāo)→聚焦用戶對產(chǎn)品的情感訴求→產(chǎn)出設(shè)計(jì)方案→驗(yàn)證設(shè)計(jì)價值（來源于周姮—知乎螞蟻金服體驗(yàn)技術(shù)部的一次分享）。

在谷歌表格每列的開頭依次輸入「Pride」五個字母后，表格會變成彩虹樣式。

網(wǎng)易云音樂在用戶生日時會變成「生日快樂」的蛋糕樣式，點(diǎn)擊進(jìn)去的音樂列表，第一首歌是生日歌，讓人心里暖暖的。

4. 設(shè)計(jì)檢驗(yàn)

最后一步就是設(shè)計(jì)方案的驗(yàn)證，設(shè)計(jì)方案能否幫助用戶縮短操作流程？降低用戶思考成本？幫助用戶地完成任務(wù)？是否能打動用戶給他們帶來驚喜與溫暖？通過可用性測試及上線后的數(shù)據(jù)反饋，幫助我們更好的優(yōu)化設(shè)計(jì)方案。

總結(jié)

1. 什么是場景化設(shè)計(jì)？

場景五要素：4W+1H，即Who人、When時間、Where地點(diǎn)、What事件 、How環(huán)境，什么人，在什么時候，在什么地方，做了什么事情，所處的環(huán)境如何。

2. 有哪些場景化設(shè)計(jì)的例子？

3. 為什么要進(jìn)行場景化設(shè)計(jì)？

4. 怎么進(jìn)行場景化設(shè)計(jì)？

• 根據(jù)使用流程和行為路徑窮盡場景
• 根據(jù)場景挖掘設(shè)計(jì)機(jī)會點(diǎn)
• 將機(jī)會點(diǎn)轉(zhuǎn)化為落地的設(shè)計(jì)方案
• 設(shè)計(jì)檢驗(yàn)

產(chǎn)品：這次需求很簡單，對比上期只有字段和操作項(xiàng)的差異，把上次的稿子直接復(fù)制一下應(yīng)該不用很多時間吧？

交互：上次你是不是做過高級篩選組合？我這期需求要用到，你把那部分稿子發(fā)給我用用吧。

研發(fā)：這個組件我在其他模塊里看到過已有樣式，這次為什么用不一樣的？不然又要重復(fù)開發(fā)呀，能不能統(tǒng)一一下。

視覺：同一個按鈕在不同的模塊顏色不一樣誒，這次要和哪個模塊一致??？

……

通過以上對話不難看出，最常出現(xiàn)在需求溝通與研發(fā)過程中，由于缺少統(tǒng)一的規(guī)范和標(biāo)準(zhǔn)化體系，導(dǎo)致實(shí)施環(huán)節(jié)各方溝通成本高，造成設(shè)計(jì)成果與實(shí)現(xiàn)有一定差距，影響用戶體驗(yàn)；通用組件和業(yè)務(wù)組件混用，導(dǎo)致設(shè)計(jì)模式和代碼復(fù)用率低。尤其是當(dāng)業(yè)務(wù)發(fā)展到一定體量時，對于復(fù)雜產(chǎn)品的大量重復(fù)且類似的需求場景，如果沒有一種的工具和規(guī)范來協(xié)同工作，將大大影響團(tuán)隊(duì)的生產(chǎn)及溝通效率。

問題

• 認(rèn)知：產(chǎn)品、研發(fā)、設(shè)計(jì)師對于同一需求都有自己理解的解決方案，缺少統(tǒng)一規(guī)范的約束，難以達(dá)成共識。
• 效率：設(shè)計(jì)效率低，交互原型的維護(hù)成本及上下游團(tuán)隊(duì)的溝通成本高，易造成不專業(yè)的印象。
• 品質(zhì)：認(rèn)知和效率的局限性，最終導(dǎo)致實(shí)施落地的產(chǎn)品質(zhì)量和用戶體驗(yàn)難以得到保障。

解決

大家應(yīng)該都知道樂高（LEGO）積木，它是一種可以互相嵌套組合的塑料積木，形狀共有 1300 多種，每種形狀都有 12 種不同的顏色，可以拼插出多種造型。其實(shí)組件庫的工作方式就很像樂高，通過小元件的互相嵌套來產(chǎn)生多種組件或模塊，多種組件模塊結(jié)合生成頁面結(jié)構(gòu)。我們先來梳理一個概念，組件庫是什么？

組件庫是設(shè)計(jì)系統(tǒng)的一部分，是在我們常規(guī)界面設(shè)計(jì)過程中可以直接用來制作交互圖例和搭建頁面的組件集合，它可以作為單個組件獨(dú)立存在，也可以通過多個組件組合而成的結(jié)構(gòu)或模式來解決類似場景的設(shè)計(jì)問題。組件庫是在約束條件下去構(gòu)建解決方案的過程，所以組件的使用也需遵循一定的規(guī)范，按照一套標(biāo)準(zhǔn)化的體系復(fù)用于多個業(yè)務(wù)場景。

一個有效的組件庫，可以幫助設(shè)計(jì)師和研發(fā)提高工作效率，提升設(shè)計(jì)專業(yè)度的同時讓產(chǎn)品本身的體驗(yàn)更加一致、可學(xué)，品牌感更強(qiáng)，它所具備的基本特征一定是通用的、靈活的、復(fù)用的。

• 通用性：意味著足夠基礎(chǔ)和常見且不帶業(yè)務(wù)屬性，參與設(shè)計(jì)環(huán)節(jié)的每個人都應(yīng)該知道這個組件的功能及目的，同時具備一定擴(kuò)展性。
• 靈活性：要求元件的組合需靈活，可以在不同場景下通過互相組合來快速搭建交互框架原型圖，并根據(jù)不同頁面結(jié)構(gòu)的演變來適應(yīng)新的業(yè)務(wù)需求。
• 復(fù)用性：指的是適用于多個業(yè)務(wù)或產(chǎn)品，在設(shè)計(jì)過程和研發(fā)過程中都可以高頻復(fù)用。

那么用組件庫這種標(biāo)準(zhǔn)化體系來完成設(shè)計(jì)方案時，到底能帶來怎樣的價值？

組件庫的價值

保證產(chǎn)品體驗(yàn)的一致性：對于一個含有多業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，每個獨(dú)立的業(yè)務(wù)系統(tǒng)雖然在功能上有一定區(qū)別，但整體的用戶體驗(yàn)需要滿足基本的一致性。比如，當(dāng)我使用同一個產(chǎn)品中的業(yè)務(wù)系統(tǒng) A 和業(yè)務(wù)系統(tǒng) B 時，我能通過類似的頁面結(jié)構(gòu)、組件及樣式的一致性、操作反饋乃至提示文案結(jié)構(gòu)的一致性，來感知到我使用的A、B業(yè)務(wù)系統(tǒng)隸屬于同一個產(chǎn)品。

提升設(shè)計(jì)師的效率：在需求量巨大且需求來自不同的業(yè)務(wù)線時，需要逐一繪制頁面及組件，造成大量重復(fù)勞動，并且在評審及需求溝通環(huán)節(jié)還可能存在不斷地細(xì)節(jié)調(diào)優(yōu)。所以對于設(shè)計(jì)師而言，組件的高頻復(fù)用能大大提升設(shè)計(jì)效率，使設(shè)計(jì)師更多的將精力聚焦于理解和解決用戶的實(shí)際問題。

提升產(chǎn)研團(tuán)隊(duì)的效率：通用場景及普通需求直接按規(guī)范進(jìn)行設(shè)計(jì)和研發(fā)，減少上下游對同一頁面及組件使用方式的不同理解而產(chǎn)生的多余溝通成本。

利于沉淀設(shè)計(jì)規(guī)范：組件本身的設(shè)計(jì)和使用方式就可以直接作為交互和視覺規(guī)范的一部分，按照統(tǒng)一的設(shè)計(jì)規(guī)范來確定需要使用的主題色、組件樣式、組合方式及頁面結(jié)構(gòu)，可以快速搭建出一個或多個產(chǎn)品的交互框架。

構(gòu)建「FishDesign」企業(yè)級UI組件庫

那么如何構(gòu)建一個企業(yè)級 UI 組件庫？

我將用前段時間參與的「FishDesign企業(yè)級UI組件庫」項(xiàng)目為例，通過在網(wǎng)易七魚產(chǎn)品中的應(yīng)用，來介紹一個企業(yè)級 UI 組件庫的設(shè)計(jì)原則，內(nèi)容構(gòu)成包含哪些類型和元素，每種組件類型在分類和設(shè)計(jì)過程中是如何考量的。本文側(cè)重講述構(gòu)建一個組件庫所涵蓋的內(nèi)容，而不是某組件類別本身的設(shè)計(jì)方法。

顧名思義，「企業(yè)級」意味著 FishDesign 所服務(wù)的業(yè)務(wù)都是具備一定體量的，可能是服務(wù)一個包含了多個獨(dú)立子業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，比如網(wǎng)易七魚；也可能是同時服務(wù)多款產(chǎn)品，比如網(wǎng)易七魚和網(wǎng)易定位等。

組件庫是幫助設(shè)計(jì)者及前端工程師快速構(gòu)建業(yè)務(wù)系統(tǒng)的工具，除了最重要的組件內(nèi)容，還需要設(shè)計(jì)原則、配色方案及布局規(guī)范來指導(dǎo)具體業(yè)務(wù)產(chǎn)品的設(shè)計(jì)有效落地。

1. 設(shè)計(jì)原則

基于 FishDesign 目前主要是幫助搭建 B 端企業(yè)級產(chǎn)品，而 B 端業(yè)務(wù)的產(chǎn)品目的決定了它所才采取的設(shè)計(jì)模式，所以我們將用以下四點(diǎn)作為塑造組件庫的設(shè)計(jì)原則：

• 簡潔：如無必要，勿增實(shí)體，慎重篩選客戶當(dāng)前需要信息內(nèi)容。
• 直接：提供用戶操作后的直接反饋，保證用戶的操作結(jié)果符合預(yù)期。
• 優(yōu)雅：設(shè)計(jì)方案追求優(yōu)雅，給使用者有質(zhì)感的操作感受。
• 適應(yīng)性：設(shè)計(jì)方案需提供可擴(kuò)展能力及適應(yīng)性，以適應(yīng)不同模式的企業(yè)使用。

2. 顏色

產(chǎn)品會根據(jù)自身的產(chǎn)品目標(biāo)和受眾群體去選定產(chǎn)品的配色方案。前文提到，一個有效的組件庫需滿足通用性、靈活性、復(fù)用性，像配色方案就應(yīng)該能被靈活自定義來應(yīng)對多樣化的訴求。以網(wǎng)易七魚為例（下文均以網(wǎng)易七魚為例），設(shè)置了 1 種主色，4 種輔助色和 6 種中性色來搭建一致的外觀感受。

• 主色：選擇藍(lán)色系來傳達(dá)智能服務(wù)、信任可靠、技術(shù)創(chuàng)新的品牌形象。
• 輔助色：除了品牌主色調(diào)藍(lán)色，在輔助色中也存在一樣的藍(lán)色，那是因?yàn)樗{(lán)色是相對泛用性較廣的色系，用于產(chǎn)品中的主操作按鈕、文字按鈕或 icon 等。紅色喚起注意并昭示危險，所以一般用于謹(jǐn)慎操作及錯誤提示。黃色則常用于警示信息，提示用戶操作可能帶來的風(fēng)險及后果。綠色能傳遞安全和健康的情緒感受，用于正向反饋提示或成功操作的引導(dǎo)。
• 中性色：一般采取黑灰色調(diào)來展示產(chǎn)品的文本信息、背景和邊框色，用來表現(xiàn)層次結(jié)構(gòu)。

3. 布局規(guī)范

為處理多業(yè)務(wù)中網(wǎng)頁設(shè)計(jì)區(qū)域內(nèi)的信息收納問題，我們用規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范版面布局以及信息分布，即柵格系統(tǒng)和頁面布局。FishDesign 在 12 柵格系統(tǒng)的基礎(chǔ)上，將整個設(shè)計(jì)區(qū)域按照 24 等分的原則進(jìn)行劃分，來增加頁面的相似度，提升用戶體驗(yàn)。

我們通過基本的配色及布局規(guī)范解決了產(chǎn)品風(fēng)格及信息區(qū)塊框架的設(shè)計(jì)，那組件庫中重要的組件部分，是如何作用于產(chǎn)品搭建的？Brad Frost 提出的「原子化設(shè)計(jì)理論」可以幫助我們更好的理解，原子化設(shè)計(jì)的靈感來自于現(xiàn)實(shí)世界當(dāng)中的分子結(jié)構(gòu)，UI 中顆粒度最小的元素，即「原子」，組成了顆粒度較大的元件，即「分子」；而諸多分子又組成了更加復(fù)雜的組件與模塊，即「有機(jī)體」。

組件庫構(gòu)建之初無法一應(yīng)俱全，是需要后續(xù)不斷的維護(hù)與迭代的。如何在最初海量組件中圈定適合的組件范圍呢？最合適的切入點(diǎn)就是從身邊的業(yè)務(wù)場景出發(fā)，從最基本、最簡單、最小的元素入手。

4. 組件分類

我們根據(jù)當(dāng)下已有的業(yè)務(wù)場景和對往后一段時期的業(yè)務(wù)發(fā)展方向進(jìn)行規(guī)劃，將組件庫的組件類型分為通用組件和業(yè)務(wù)組件。一般業(yè)務(wù)組件庫是不對外的（畢竟使用場景特殊也有限，放出來參考意義不大），所以在 FishDesign 官網(wǎng)只能看到通用組件部分。

• 通用組件：指適用范圍廣、復(fù)用頻次高，可復(fù)用于多個業(yè)務(wù)且不包含業(yè)務(wù)邏輯。比如導(dǎo)航欄、按鈕、toast、彈窗等。
• 業(yè)務(wù)組件：這類組件對比通用組件而言，最大的特點(diǎn)就是包含了較多業(yè)務(wù)屬性，跟產(chǎn)品功能有較強(qiáng)的關(guān)聯(lián)性，所以影響到適用范圍可能僅限于 1~2 個業(yè)務(wù)系統(tǒng)或特殊場景，且復(fù)用頻次不高。比如網(wǎng)易七魚的在線和呼叫系統(tǒng)中的咨詢分類組件。

一個大型復(fù)雜的業(yè)務(wù)產(chǎn)品通常有不止一位設(shè)計(jì)師或前端工程師參與設(shè)計(jì)，需要在多種處理方式中選擇合適的設(shè)計(jì)模式來解決不同的場景問題，這要求根據(jù)組件屬性的差異，需對通用組件做細(xì)分，那么如何確定通用組件中的子分類呢？

• 競品學(xué)習(xí)與研究，窮舉該部分產(chǎn)品類型中的組件類型。
• 遍歷自己所負(fù)責(zé)產(chǎn)品內(nèi)已有的業(yè)務(wù)場景，提取并整理業(yè)務(wù)場景中所用到的組件。
• 將整理好的兩部分組件進(jìn)行篩選去重，保留高頻通用的部分。比如同樣是下拉篩選組件，由于缺少統(tǒng)一規(guī)范和組件，可能導(dǎo)致的后果就是在同一產(chǎn)品不同業(yè)務(wù)系統(tǒng)的相同場景下，使用的組件從樣式到交互方式都不一致。我們要做的就是對這部分在類似業(yè)務(wù)場景中使用了多種表達(dá)形式的組件做合并去重，然后通過設(shè)計(jì)組內(nèi)審來圈定最后通用組件的范圍。
• 基于組件的屬性和使用場景，對圈定的組件范圍進(jìn)行歸類。

由上述步驟，我們將通用組件繼續(xù)細(xì)分為五個子類別：基礎(chǔ)組件、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、操作反饋。

• 基礎(chǔ)組件：即按鈕、圖標(biāo)等，相較于其他組件的使用場景更通用，或其他組件在實(shí)現(xiàn)時依賴了這些組件來實(shí)現(xiàn)的組件類別。
• 導(dǎo)航：即導(dǎo)航菜單、標(biāo)簽、面包屑等，可以幫助用戶產(chǎn)品系統(tǒng)內(nèi)快速找到所在頁面層級或位置的組件類別。
• 數(shù)據(jù)錄入：即輸入框、選擇器、表單等，支持用戶將數(shù)據(jù)信息錄入到系統(tǒng)的組件類別。
• 數(shù)據(jù)展示：即圖表、表格、氣泡卡片等，將錄入到系統(tǒng)的數(shù)據(jù)信息多樣化展示出來的組件類別。
• 操作反饋：即對話框、警告提示（Alert）、全局提示（Toast）等，在用戶操作前后，使系統(tǒng)狀態(tài)得以合理反饋的組件類別。

用組件庫設(shè)計(jì)「網(wǎng)易七魚」示例

以網(wǎng)易七魚為例，看下有組件庫參與搭建的設(shè)計(jì)示例，以下頁面中所用組件均出自 FishDesign 組件庫。

「導(dǎo)航組件」使用示例：

「表格組件」使用示例：

「彈窗組件」使用示例：

「步驟組件」使用示例：

總結(jié)

組件庫最大的價值在于提升整個團(tuán)隊(duì)的產(chǎn)研效率，使設(shè)計(jì)質(zhì)量得以保障的同時，提升產(chǎn)品整體的用戶體驗(yàn)。

我們對構(gòu)建企業(yè)級 UI 組件庫的步驟及要素做個簡單回顧：

• 首先，明確組件庫所需解決的問題及存在的價值，這決定組件庫的體量和服務(wù)范圍是什么，以及構(gòu)建的時機(jī)是否合適。
• 其次，通過競品分析并結(jié)合身邊最熟悉或深耕的業(yè)務(wù)入手，通過產(chǎn)品目的來選擇設(shè)計(jì)模式，從最小元素開始逐步整理，包括產(chǎn)品配色方案和柵格系統(tǒng)等布局規(guī)范。
• 第三，需要對組件庫的重要組成部分「組件」，進(jìn)行圈定及合理分類。這里需要注意的是，組件范圍的圈定，尤其在組件庫搭建的初級階段并不是越多越好，而是需要有效的覆蓋那些經(jīng)過規(guī)劃的業(yè)務(wù)場景即可。
• 最后，組件庫并不是構(gòu)建完就結(jié)束了，是需要在后續(xù)項(xiàng)目中逐步維護(hù)與更新的長期積累過程。

任何組件庫的構(gòu)建都離不開一個優(yōu)秀的團(tuán)隊(duì)在整個設(shè)計(jì)過程中的協(xié)同，十分感謝參與的設(shè)計(jì)師與前端工程師們。上文僅是個人參與過程中的一些經(jīng)驗(yàn)總結(jié)，還不夠全面，同時篇幅有限，關(guān)于組件的具體設(shè)計(jì)考量無法一次詳盡，歡迎一起討論組件庫及標(biāo)準(zhǔn)化設(shè)計(jì)體系相關(guān)的更多內(nèi)容。

文章來源：優(yōu)設(shè)

本文作者結(jié)合實(shí)際案例，跟大家分享一下在RARRA模型下，如何做用戶增長？

從AARRR到RARRA的運(yùn)營思路轉(zhuǎn)變

眾所周知，AARRR經(jīng)典的增長黑客體系，也稱之為「海盜法則」，分別是獲取、激活、留存、變現(xiàn)以及推薦。提出這個模型的 Dave McClure 認(rèn)為，所有創(chuàng)新型、成長型的企業(yè)都應(yīng)該按照這樣的模型來做增長。

AARRR專注于獲客（Acquisition），作為一個2007年提出的概念， AARRR模型可能已經(jīng)不再適用互聯(lián)網(wǎng)運(yùn)營這個瞬息萬變的場景。原因有二：

（1）獲客成本增加

市場競爭激烈，用戶獲客成本已經(jīng)不再便宜，一組數(shù)據(jù)顯示：阿里線上獲客的成本翻了 6 倍， 京東的獲客成本翻了 1.5 倍，趣頭條用戶獲取成本增加了 8 倍，百度的流量獲取成本增長了 41%。在當(dāng)前的情況下，以拉新獲客為中心的增長模式意味著要比十年前這個模型提出時平均增加5倍以上的成本。

（2）流失率高

一組數(shù)據(jù)顯示，現(xiàn)在平均每個App在安裝后的情況：前3天內(nèi)將流失掉77％的DAU。在30天內(nèi)，它將流失90％的DAU。而到了90天，流失率躍升到95％以上。不管你是否心存懷疑，這就是目前眾多創(chuàng)業(yè)公司所面對的現(xiàn)實(shí)窘境，它創(chuàng)造了Brian Balfour所說的“無意義成長之輪”。

因?yàn)橐陨蟽蓚€原因，現(xiàn)在黑客增長的真正關(guān)鍵在于用戶留存，而不是獲客。所以我們需要一個更好的模型——就是RARRA模型。

AARRR與RARRA的區(qū)別

RARRA模型是托馬斯·佩蒂特Thomas Petit和賈博·帕普Gabor Papp對于海盜指標(biāo)-AARRR模型的優(yōu)化，RARRA模型突出了用戶留存的重要性。

簡單的說，AARRR模型的核心在于獲客，而在RARRA的模型下，專注用戶的留存。

RARRA模型下，如何做用戶增長？（成功案例分享）

分享一個我們前不久自己做的RARRA模型下用戶增長的成功案例：

我們做的是一個在線教育平臺，課程的分類包括：

• 以拉新為目的的新用戶免費(fèi)體驗(yàn)課（0元）；
• 以轉(zhuǎn)化為目的的低價專題課（50元以內(nèi)）；
• 以盈利為目的的短期班課（999元以內(nèi)）和系統(tǒng)課（1000-4000元）。

這樣的課程顯然是以拉新-留存-轉(zhuǎn)化個流程進(jìn)行的設(shè)計(jì)，也是現(xiàn)在很多在線教育平臺通用的課程模式設(shè)計(jì)，其實(shí)本質(zhì)上和其他行業(yè)的平臺也是類似。

在RARRA的模型下，數(shù)據(jù)驅(qū)動更重要。因?yàn)槿绻麑Ｗ@客，可以在渠道選擇等方面憑借經(jīng)驗(yàn)和主觀判斷來選擇，但是專注留存，就必須用數(shù)據(jù)分析找出每個留存環(huán)節(jié)的差異因素，進(jìn)而制定最的方案大幅度提升留存率。在在線教育平臺的運(yùn)營中，因?yàn)閺耐茝V到課程設(shè)計(jì)、課程質(zhì)量、售前售后服務(wù)等，包含大量影響營收的因素，因此數(shù)據(jù)分析方法也相對復(fù)雜。

數(shù)據(jù)分析的第一步，也是關(guān)鍵點(diǎn)在于：構(gòu)建指標(biāo)體系。

對于一個平臺來說，一般的數(shù)據(jù)指標(biāo)都非常多，但必須確定唯一關(guān)鍵指標(biāo)（OMTM），也是大家常說的北極星指標(biāo)，作為驅(qū)動的方向。

回歸商業(yè)本質(zhì)，一切商業(yè)模式的終極目標(biāo)當(dāng)然是收入，但是收入這個指標(biāo)并非北極星指標(biāo)，而是決定北極星指標(biāo)的上級因素。如下圖所示，平臺收入=有效聽課用戶數(shù)*客單價。因?yàn)檎n程的客單價有大致的市場標(biāo)準(zhǔn)，不會做太多變動。因此經(jīng)過分析，我們認(rèn)為直播課程運(yùn)營的北極星指標(biāo)是——有效聽課用戶數(shù)，也就是購買了課程并且有效聽課的用戶數(shù)量。

那么接下來，就要對北極星指標(biāo)進(jìn)行分解。

從指標(biāo)拆解來看：

• 有效聽課用戶中的新用戶數(shù)=外部流量導(dǎo)入*轉(zhuǎn)化率；
• 有效聽課用戶中的老用戶數(shù)=老用戶數(shù)*續(xù)報(bào)率。

在最后分解的四個指標(biāo)中，除了老用戶數(shù)是直接由新用戶轉(zhuǎn)化率決定的之外，流量、轉(zhuǎn)化率、續(xù)報(bào)率三個指標(biāo)都是可以通過運(yùn)營來提升和改善的。

但是由于時間和資源的限制，對于三個指標(biāo)，運(yùn)營策略上肯定會有側(cè)重點(diǎn)和先后順序。

一開始，我們采用的是AARRR模型，把重點(diǎn)放在提升流量和新用戶轉(zhuǎn)化率上。通過廣告投放、拉新紅包等大量引流，并在課程設(shè)計(jì)上做了很多設(shè)計(jì)促進(jìn)新用戶轉(zhuǎn)化率。最后流量和轉(zhuǎn)化率都提升了，但問題是，用戶停留在0元免費(fèi)課和低價轉(zhuǎn)化課上，而續(xù)報(bào)高價課的有效用戶很少，這樣看似產(chǎn)品新增用戶很多，熱熱鬧鬧，但整體的營收還是上不去。

團(tuán)隊(duì)分析后認(rèn)為，AARRR模型可能并不適合我們。既然續(xù)課率出了問題，應(yīng)該嘗試采用RARRA模型，把運(yùn)營重點(diǎn)放在留存上。

于是，數(shù)據(jù)組開始探索留存的問題點(diǎn)出現(xiàn)在哪里。

我們拉出不同維度用戶數(shù)據(jù)進(jìn)行對比，最后發(fā)現(xiàn)新用戶和老用戶的續(xù)課率差值竟高達(dá)53%。

也就是說，新用戶進(jìn)行初步低價課轉(zhuǎn)化后，在從低價課到達(dá)正價課的留存續(xù)課階段，是流失最嚴(yán)重的一塊。

找到了最痛的點(diǎn)，問題其實(shí)已經(jīng)解決了一半。

接下來，通過各種數(shù)據(jù)因素分析，我們判斷出了影響新用戶續(xù)課率的幾個重點(diǎn)因素，分別是：用戶來源、課前服務(wù)、課程質(zhì)量。并且對每一個因素繼續(xù)分解深挖。（標(biāo)紅為續(xù)課率效果最好）

• 在課程質(zhì)量方面，三個細(xì)分?jǐn)?shù)據(jù)指標(biāo)綜合可以衡量課程質(zhì)量。
• 課前服務(wù)時間上，通過數(shù)據(jù)對比，我們發(fā)現(xiàn)課前兩周進(jìn)行服務(wù)的效果最好，續(xù)課率也最高。
• 用戶來源上，短期班課的用戶續(xù)課率遠(yuǎn)高于其他兩個來源。

根據(jù)以上的數(shù)據(jù)分析，給出了運(yùn)營策略指導(dǎo)為：

1. 教師和教研團(tuán)隊(duì)狠抓課程質(zhì)量，改變以前主觀評價模式。用出勤率、完課率和作業(yè)完成率三者綜合考核教師KPI；
2. 助教團(tuán)隊(duì)的課程服務(wù)時間前置，從以前的課前一周和課后進(jìn)行服務(wù)，改為課前兩周開始進(jìn)行用戶服務(wù)；
3. 服務(wù)人群的重點(diǎn)轉(zhuǎn)移到短期班課新用戶上。

改進(jìn)后的效果：

通過以上三個方向的運(yùn)營策略調(diào)整，同樣的團(tuán)隊(duì)，僅用了一個月的時間，就把新老用戶續(xù)課率的差值從53%縮小到了9%！效果非常明顯。同時平臺整體收入也大幅增加，而運(yùn)營成本卻比以前大規(guī)模進(jìn)行渠道投放大大節(jié)省了。

階段性的成功，正是及時調(diào)整了用戶增長模型，并采用系統(tǒng)的數(shù)據(jù)分析方法驅(qū)動用戶增長?？梢钥闯?，數(shù)據(jù)驅(qū)動下，最終給出的運(yùn)營策略非常簡潔，但前面數(shù)據(jù)組背后付出的努力和精力是很難被看到的。這正是我們想要的結(jié)果，扎根穩(wěn)且深入，但呈現(xiàn)的卻是簡潔明了的運(yùn)營指令。

在網(wǎng)頁和移動端界面中，內(nèi)容和信息是否能夠經(jīng)過系統(tǒng)性、有效的整理和組織，對于內(nèi)容的可用性和實(shí)用性，都是意義巨大的。而在呈現(xiàn)信息的時候，視覺間隔是組織信息的關(guān)鍵因素。它說起來并不難理解，但是在實(shí)際的運(yùn)用當(dāng)中，卻是千變?nèi)f化，今天我們來梳理一下流行的視覺間隔的方法。

什么是視覺間隔

視覺間隔是一種布局元素，它有助于將內(nèi)容分隔成為清晰的分組、選項(xiàng)和部分。它可以讓設(shè)計(jì)師更好地組織內(nèi)容的視覺體驗(yàn)，處理信息的層級，也有助于用戶理解內(nèi)容，明白內(nèi)容之間的關(guān)系。

視覺間隔和頁面上的其他內(nèi)容在一起，構(gòu)成視覺層級，這是它最重要的作用。在視覺間隔的幫助之下，用戶可以輕松地感知內(nèi)容之間的關(guān)系，明白各個信息片段之間的關(guān)系是相似，并列，承襲，從屬，還是其他。

視覺間隔的可用性也同樣重要：在很多時候，有的視覺間隔元素看起來是可點(diǎn)擊，可交互的，這在移動端界面上，是非常重要的。

視覺間隔的種類

談到視覺間隔，我們可以從兩方面來進(jìn)行拆解分析：視覺間隔的外觀和功能。按照視覺特征，視覺間隔有5種基本的類型：

• 線條
• 色彩
• 負(fù)空間
• 陰影/體積
• 圖片

下面我們分別針對這5種類型進(jìn)行說明。

線條

很長時間以來，在排版印刷領(lǐng)域，線條就一直是一種用來分隔內(nèi)容的方法。線條的分隔功能是認(rèn)可度最高的一種間隔方式，用戶幾乎不用思考，就能夠理解和感知它，并且發(fā)揮作用。

另一方面，這種間隔方式也很容易顯得過于簡單，并且和應(yīng)有的形態(tài)相去甚遠(yuǎn)。這也是為什么設(shè)計(jì)師在想盡辦法去尋求別的視覺間隔形態(tài)。太多的線條間隔會讓屏幕上的視覺干擾太多，并且?guī)聿槐匾囊曈X噪音。

所以，能夠?qū)⒕€條間隔用得微妙、恰到好處、出神入化，是設(shè)計(jì)師功力的一個重要體現(xiàn)。

在這個網(wǎng)站產(chǎn)品頁面中，使用深色的線條間隔來分割產(chǎn)品信息，用來組織和間隔信息內(nèi)容。

在這個頁面當(dāng)中，線條分隔了不同的內(nèi)容區(qū)塊，讓頁面的結(jié)構(gòu)更易于被掃讀。

這個電商網(wǎng)站將不同級別的視覺內(nèi)容進(jìn)行了分離，借助簡單的水平線將價格、CTA按鈕以及承載相關(guān)信息的表單分隔到不同的區(qū)域。

負(fù)空間

負(fù)空間，也就是留白，也是最為常見的一種視覺分隔元素。留白絕不是對空間的浪費(fèi)，和屏幕上其他的元素一樣，它同樣發(fā)揮著重要的作用，拱衛(wèi)支撐著整個用戶體驗(yàn)。負(fù)空間是最為流行的視覺分隔之一，尤其是在極簡主義風(fēng)格為主導(dǎo)的設(shè)計(jì)當(dāng)中。負(fù)空間本身遵循著格式塔原理，尤其是其中「接近原理」和「相似原理」是負(fù)空間在設(shè)計(jì)中，發(fā)揮分隔作用的核心所在。合理地運(yùn)用負(fù)空間，還能強(qiáng)化頁面的呼吸感。

上面這款旅行規(guī)劃 APP當(dāng)中，使用留白將不同的條目分開，沒有使用額外的具體視覺元素，僅僅只靠留白。

Health Blog 的列表的排版層次是基于負(fù)空間來實(shí)現(xiàn)的，看起來清晰又充滿呼吸感。

色彩對比

高對比度的色彩，同樣能夠帶來清晰的視覺間隔效果。在 UI 界面中高對比度的色彩有著極為明顯視覺表現(xiàn)潛質(zhì)，它們能夠增強(qiáng)網(wǎng)站的信息和內(nèi)容的表現(xiàn)力，分割區(qū)塊，營造氛圍。對比度是影響頁面和屏幕可讀性的關(guān)鍵因素之一。在具體的應(yīng)用當(dāng)中，不同的色彩會有效地分離不同的選項(xiàng)、條目和區(qū)域，這意味著它作為視覺分隔的作用非常強(qiáng)。這也是近年來分屏式設(shè)計(jì)如此流行的原因所在。

這是一套移動端菜單的概念設(shè)計(jì)，強(qiáng)烈的色彩對比讓信息清晰可見。

即使是在這樣的柔和的設(shè)計(jì)當(dāng)中，色彩的對比度也發(fā)揮了相當(dāng)?shù)淖饔茫阂环矫?，?qiáng)烈的色彩對比讓CTA按鈕和輸入框之間有了明顯的區(qū)分，另一方面，右側(cè)的主視覺元素的背景也同樣借由不同色彩的對比，做到了突出的效果。

在 GNO Blankets 這個網(wǎng)站當(dāng)中，強(qiáng)烈的明暗對比將網(wǎng)站元素分隔成為精美而清晰的區(qū)塊。

陰影和體積

陰影和體積也是一種非常常見的視覺間隔方式，通過營造在「高度」或者說高程上的視覺差異，從而達(dá)到分層的效果，而這種設(shè)計(jì)也是符合人類一直以來的認(rèn)知習(xí)慣。這種方法有利于保持整個設(shè)計(jì)的平衡和易讀性，另一方面，它又能保持足夠的微妙和自然，不會那么引人矚目從而讓人覺得出戲或者受到干擾。

這個APP的目錄頁面所有元素都采用了白色的背景，而陰影讓布局呈現(xiàn)出了縱深層次，讓內(nèi)容足以展現(xiàn)又不顯突兀。

這款提供定制化花束服務(wù)的APP也采用了類似的陰影元素，讓整體看起來清晰又通透。

圖片

圖片在 UI 界面當(dāng)中，同樣也是一種非常有效的視覺間隔，尤其是在包含大量文本內(nèi)容的界面中。無論是博客、在線媒體網(wǎng)站還是其他類型的網(wǎng)站當(dāng)中，圖片的間隔作用都非常明顯。無論是照片、插畫、3D圖形，它們作為圖片都可以很好的平衡文本內(nèi)容，提高內(nèi)容的識別度和可讀性，有效地劃分層級，并且提高情感吸引力。

這個比特幣網(wǎng)站的著陸頁就使用了帶有3D效果「了解更多」動態(tài)圖片，圖片和文本在內(nèi)容和功能上都清晰地分隔開來。

在這個餐廳 APP 當(dāng)中，圖片作為劃分內(nèi)容的關(guān)鍵元素而存在。

按照功能劃分

如果從功能的角度上來劃分視覺間隔，可以根據(jù)它所處的層次來進(jìn)行劃分。

全出血間隔

使用線條作為全出血間隔是最為常見的，它會很跨整個屏幕布局來作為信息層級的劃分。

這個畫廊圖庫 APP 的藝術(shù)家目錄當(dāng)中，使用線條作為全出血間隔，來區(qū)分藝術(shù)家。

這個名為完美食譜的APP也使用了全出血間隔線來區(qū)分內(nèi)容。

在這個財(cái)務(wù)APP當(dāng)中，也使用了全出血間隔線來區(qū)分條目。

在這個電影APP的結(jié)帳頁面當(dāng)中，也使用了線條來作為全出血間隔。

嵌入式間隔

嵌入式間隔的功能是將相關(guān)性較高的內(nèi)容分割開，并且它通常會和標(biāo)題或者其他的特定元素保持對齊或者對應(yīng)，它們通常是進(jìn)行某個大區(qū)塊內(nèi)不同組件的分隔，或者將多個同類的元素分隔開。

這個網(wǎng)站當(dāng)中，使用橫向的短分隔線來區(qū)分表單中的參數(shù)條目。

中間分隔

這種分割線通常會置于布局的中間某處，同樣是分隔相關(guān)的內(nèi)容，但是通常它們在屬性上不一定是一致的，但是層級近似。

在這個出售草藥的電商網(wǎng)站的右側(cè)，使用中間分隔線將文本和可交互的區(qū)域清晰地分隔開。

值得思考的問題

上面對于不同類型的視覺分隔方式都有描述，在此之外，還有兩個問題需要注意：

• 保持微妙：視覺分隔不應(yīng)該醒目、太過引人矚目，它們不應(yīng)該分散用戶的注意力，它們應(yīng)該支撐布局的同時，微妙而不那么抓人眼球。

• 中等頻率：這和上一點(diǎn)是相輔相承的，過多的分隔線會變成視覺噪音，讓用戶瀏覽的時候感到疲倦。因此，應(yīng)該仔細(xì)考慮使用頻率，盡可能使用負(fù)空間，而不是線條。不要過度使用太多色彩，應(yīng)該盡量保持整體的協(xié)調(diào)一致。

文章來源：站酷

我們通過門鈴聲兒得知門外有人來訪，也能通過電話鈴聲得知正被人呼叫。短信通知也有著類似的作用，包括各類產(chǎn)品的消息推送。

但不同的是，消息推送的重要性隨著「通知」被濫用而變得不那么重要了。它們變得不像門鈴或電話鈴聲起到的作用性那么大，包括短信現(xiàn)在也大多是垃圾信息。

而且，通知越來越多地通過各種方式去觸達(dá)用戶。比如消息未讀的紅點(diǎn)提示，或者顯示消息的數(shù)字統(tǒng)計(jì)，以及手機(jī)使用過程中的頂部提示與聲音或震動的提醒，等等。

但我們還是無法抑制點(diǎn)擊圖標(biāo)的沖動，這僅僅是因?yàn)樗哂形醋x的計(jì)數(shù)或紅點(diǎn)提示，即使我們已經(jīng)知道當(dāng)中的內(nèi)容并不重要。

而我要說的是，當(dāng)通知內(nèi)容變得次要且被濫用之后，它仿佛成了一種違背設(shè)計(jì)原則的功能 —— 中斷用戶當(dāng)前行為。因?yàn)樗蚱屏擞脩襞c產(chǎn)品之間的層級關(guān)系，破局至產(chǎn)品之外來吸引用戶的注意力，這是一個非常打擾的行為。如果我在看書，突然收到一條并不重要的消息，那我一定會非常反感。

所以，為了不被「紅點(diǎn)」支配，以及不讓通知所打擾，我會把手機(jī)里所有產(chǎn)品的消息推送都給關(guān)了。

但是，以上內(nèi)容并不能說明通知的無用論。同樣有許多用戶還是沉迷于通知的使用上，它所控制的是用戶對于某個產(chǎn)品的控制欲，擔(dān)心錯過某條消息，就好像我在豆瓣寫了篇隨筆，就想看別人給我點(diǎn)贊評論的消息，但我又不可能一直盯著，所以通知這時候就起到了一個很好的作用。

以至于對于優(yōu)秀的產(chǎn)品人或設(shè)計(jì)師，包括運(yùn)營來說，利用好通知，就能掌握用戶心理，巧妙的將用戶留在產(chǎn)品中。它們甚至有助于與打算放棄產(chǎn)品的用戶建立聯(lián)系并促進(jìn)互動。

那么，我們應(yīng)該如何更合理的設(shè)計(jì)通知呢？下面我們通過「通知的組成部分」以及「通知的使用類型與規(guī)則」來詳細(xì)做一次拆解。

通知的組成部分

關(guān)于通知的簡單定義：它是一種吸引用戶注意的功能模式，讓用戶獲悉新事件的信息動態(tài)。產(chǎn)品將其發(fā)送給用戶并與用戶產(chǎn)生交流。

因此從這個定義中我們可以知道，通知有兩種形式，分別是被動只讀型和操作反饋型。

被動只讀型，是指該信息可讀，但不可進(jìn)行操作；操作反饋型，是指用戶可對該通知進(jìn)行操作，如某寶訂單支付成功后的地址信息確認(rèn)通知。

所以在梳理組件的時候也要注意掉這個差異。

1. 消息中心

這里的消息中心，是一個信息匯總中心，但并不一定是信息來源。意思是，信息來源可能是有很多用戶在你的文章下面點(diǎn)贊了，而這個點(diǎn)贊行為被匯總到了消息中心，再用消息中心指引作者去到文章頁面查看具體詳情。

所以它是一個匯總表。但也有可能它就是信息來源點(diǎn)，比如一些系統(tǒng)通知，告知要升級，因?yàn)樗鼪]有其他功能可承載，所以只會在消息中心里出現(xiàn)。

或者類比 iOS 系統(tǒng)的通知中心，如果通知是 App 推送的，那么它會指引用戶進(jìn)入某個 App；如果通知是系統(tǒng)行為，如勿擾模式，「6:00 前來電和通知將會靜音」這個通知，是只可在通知中心進(jìn)行操作的。想要更改，就需要手動打開設(shè)置。

2. 通知指示符

它可以是點(diǎn)，也可以是計(jì)數(shù)器，只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數(shù)人養(yǎng)成強(qiáng)迫癥的罪魁禍?zhǔn)住?

3. 信息標(biāo)題

它主要是指該信息來自于誰或?qū)儆谑裁醋宇愋?，比如用戶互動點(diǎn)贊消息，評論消息，系統(tǒng)消息等等。用戶可以通過標(biāo)題來獲悉該信息類型，再通過內(nèi)容摘要來判斷內(nèi)容是否重要。

當(dāng)然，這里的摘要如果過長，就需要省略處理，引導(dǎo)用戶進(jìn)入消息源或消息中心。

4. 推送時間

推送時間是一個看起來簡單，實(shí)際上也好像不是很復(fù)雜的邏輯。只要說明該通知的發(fā)送時間即可，但是需要注意的是時間段問題。比如幾分鐘前，幾小時前，幾天前，這里的邏輯是按照時間推進(jìn)規(guī)則持續(xù)增加來告知用戶該消息的推送時間節(jié)點(diǎn)的。也就是過得越久，時間概念就越大。

5. 通知圖標(biāo)

上面講到消息類型，我們也經(jīng)常會在各類產(chǎn)品中發(fā)現(xiàn)不同通知的類型會匯總在各自的類型下。包括用戶所接收到的信息，通常也會告知用戶該信息屬于什么類型。有時候，標(biāo)題可能會更細(xì)，但是用戶通過圖標(biāo)可以判斷該信息屬于什么類型，甚至都不需要仔細(xì)查看標(biāo)題與內(nèi)容。

但是，并不是所有產(chǎn)品的信息都可以通過圖標(biāo)來判斷，有時候圖標(biāo)只是一個大方向，如果手機(jī)鎖屏，相對于用戶來說，這條通知只是告訴用戶該信息是由什么產(chǎn)品推送，而并不能指向至該產(chǎn)品的什么類型的信息。所以在使用的過程中，同樣需要根據(jù)業(yè)務(wù)的場景，謹(jǐn)慎地選擇圖標(biāo)。

6. 閱讀指示器

它就像是上面提到的紅點(diǎn)，這里指的是進(jìn)入 App 的消息中心之后，所顯示的內(nèi)容。

7. 操作行為

這里的操作行為分兩種，分別是 App 外與 App 內(nèi)，它們之間的操作邏輯是不同的。iOS 系統(tǒng)通知的清除操作，只是在系統(tǒng)的通知中心將該信息清除，進(jìn)入具體 App 后，這條消息還是會存在。而在 App 內(nèi)刪除該條信息，則該信息才會真正消失。

所以從上面可以看到，通知推送，是有兩大類別的，分別是 App 外與 App 內(nèi)，它們之間的邏輯關(guān)系與展示形式會有所差異，需要根據(jù)具體情況進(jìn)行設(shè)計(jì)分析。

8. 小結(jié)

對上面的內(nèi)容進(jìn)行總結(jié)，可以得到這樣一幅畫像：

大部分系統(tǒng)或產(chǎn)品的通知組成，都可以通過此圖概括，唯一不同的是，它們會隨著不同的業(yè)務(wù)而發(fā)生變化。

比如豆瓣的推送消息告知用戶近期有新的電影上映，那么通知來源要么是電影模塊的功能詳情頁，要么是通知中心的系統(tǒng)消息；而通知類型就是內(nèi)容更新；詳情則根據(jù)具體內(nèi)容來組合排列；最后送達(dá)至用戶。

而其中的差別就是，如果是通知中心推送的，用戶點(diǎn)擊之后則是進(jìn)入通知中心列表。如果是具體功能推送的，那么用戶點(diǎn)擊進(jìn)入的就是具體功能頁面。如下圖所示：

從這里可以看出，通知是有具體模式的。

一旦確定了通知的主要目標(biāo)，以及想要解決的問題，包括它們?nèi)绾螌I(yè)務(wù)產(chǎn)生作用以及對用戶形成吸引力，就可以確定通知的具體樣式了。

在這一節(jié)里只要知道通知的組成部分與通知模式如何指引用戶進(jìn)入 App 即可。后面我來帶大家理一遍邏輯，以及在設(shè)計(jì)通知時要注意哪些問題。

通知的使用方法

聊完上面的內(nèi)容之后，我相信大家對通知的組成與使用模式已經(jīng)有了全新的認(rèn)識，但也僅此而已，我們還是不知道一個優(yōu)秀的通知功能應(yīng)該從哪些方面去提升用戶體驗(yàn)。這里面所包含的不止是表象，還有內(nèi)在的規(guī)則邏輯。所以從這一節(jié)開始，我們仔細(xì)來梳理一遍。

從我們平時使用到的，以及上文提到的，可以大概先梳理出幾類常見的通知類型。

1. 用戶信息類通知

這種類型的通知有很多，比如微信消息發(fā)送，知乎私信，手機(jī)短信等等，它們主要由用戶主動生成發(fā)送至其他用戶被動接收，作用就是促進(jìn)用戶與用戶之間的互動關(guān)系，以提升用戶使用產(chǎn)品的頻率與時長。

這種通知，可給予用戶操作也可不給予操作，不操作就是讀取，并回復(fù)；操作就是可對該用戶的信息進(jìn)行屏蔽、已讀、刪除等設(shè)置。

這是最常見的通知類型，在多數(shù)社交產(chǎn)品與有社交特性的產(chǎn)品里都能看到。

說明

之所以給予用戶信息的操作行為，是因?yàn)橛脩粜畔⒖煞譃楦信d趣的與不感興趣的，它主要取決于人。不感興趣的人，頻繁的發(fā)送信息，會影響用戶對產(chǎn)品的好感度，畢竟有很多用戶消息并不是用戶想要接收的，所以在社交產(chǎn)品里，用戶可刪除好友，或拉黑好友；在有社交屬性的產(chǎn)品里，用戶可拉黑賬戶，以達(dá)到不被騷擾的訴求。

如果沒有到達(dá)刪除好友的程度，也可對該好友的信息進(jìn)行屏蔽，甚至對該好友信息做已讀而實(shí)際上未讀的處理；或者對重要信息做未讀而實(shí)際上已讀的處理。

當(dāng)然，用戶還能對群消息做更復(fù)雜的設(shè)置。這就是產(chǎn)品對這類通知的一種優(yōu)化方式。

2. 系統(tǒng)推送類通知

我們經(jīng)常會在手機(jī)上收到一種系統(tǒng)類通知，或者在 App 中也會收到類似的系統(tǒng)通知。大多是關(guān)于系統(tǒng)升級，密碼更新等。

這類通知多數(shù)是用戶被動接收，且對于系統(tǒng)與用戶來說是較為重要的。當(dāng)然也有不重要的，比如 App 更新說明的通知，告知用戶新功能有什么變化，或系統(tǒng)更新了什么等等。

對于這類通知，用戶大多無法進(jìn)行設(shè)置，因?yàn)樗鼈儽容^強(qiáng)制，沒有可以商量的余地，類似于告知用戶：我們有新的消息，比較重要，你來看看，即使你不打算更新或執(zhí)行也來看下。

說明

系統(tǒng)類通知，通常來說較為被動，要么強(qiáng)制用戶執(zhí)行操作，要么就是提醒用戶系統(tǒng)近期做了更新，或者是一些并不重要的信息提示，比如勿擾模式。

強(qiáng)制類系統(tǒng)通知不能頻繁，否則會給用戶造成控制欲反制的副作用。類似于本身用戶使用產(chǎn)品需要對產(chǎn)品享有控制權(quán)，現(xiàn)在反而被產(chǎn)品控制了。這是不行的。

3. 通用推送類通知

這類通知就是第一節(jié)中提到的那些，比如點(diǎn)贊/評論，內(nèi)容更新等等，這類通知如果是忠實(shí)用戶，那么或許不會反感它的頻率，當(dāng)然還是需要適當(dāng)。但如果是普通用戶，那么造成的影響就是直接關(guān)閉該 App 的所有通知。

我們現(xiàn)在的很多人，之所以開始反感通知的主要原因，就是這類通知所造成的。內(nèi)容不斷更新，隨著時間的推移，每天推送多條對于該用戶來說無用的通知。包括只適合一些符合條件的用戶參與的活動通知也推送給所有人，那么用戶就會逐漸對這類產(chǎn)品的通知失去興趣，造成無法彌補(bǔ)的損失。

即便像某團(tuán)一樣，經(jīng)常彈出開啟通知的彈框，也依然無法召喚回用戶。這就是很典型的下場。

說明

通用型通知，如果是業(yè)務(wù)很復(fù)雜的產(chǎn)品，就必須建立通知推送的功能模塊，給予用戶進(jìn)行選擇接受哪類信息的權(quán)力。允許用戶進(jìn)行相應(yīng)的設(shè)置，如活動類推送可拒絕接收。

在很多產(chǎn)品中都已經(jīng)置入這樣的推送模塊設(shè)置，如下圖。

這類內(nèi)容就是針對于產(chǎn)品的具體業(yè)務(wù)進(jìn)行細(xì)分。

比如興趣精選，私信消息等做好類別劃分。用戶可對自己感興趣的通知做選擇性的推送接收。

另外就是，在相同賬戶的不同設(shè)備之間，推送應(yīng)該同步推送與被處理。不能這邊推送了，那邊沒推送，或者這邊處理了，那邊沒被處理。

4. 智能推送類通知

不知道大家是否有印象，在使用如大眾點(diǎn)評等產(chǎn)品時，只要你切換了城市，產(chǎn)品就會推送通知告知用戶該城市有哪些值得游玩的景點(diǎn)與品嘗的美食。

雖然這類通知還算不上多少智能，但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知，因?yàn)橛脩艨赡軙氩黄饋硗ㄟ^哪類產(chǎn)品來查找附近美食。當(dāng)這么一條通知出現(xiàn)的時候，正好解決了用戶的問題，反而提升了用戶對于產(chǎn)品的好感度。

現(xiàn)在很多產(chǎn)品的通知都逐漸智能化，不會像以前那樣，三更半夜發(fā)來一條無關(guān)緊要的通知。而出現(xiàn)這類問題的主要原因還是在于產(chǎn)品、設(shè)計(jì)、運(yùn)營，在這方面沒有下過功夫，只將通知作為一種普通的工具來使用。導(dǎo)致用戶開始排斥通知，將其強(qiáng)制關(guān)閉。之后，就很難再讓用戶開啟了。同理心效應(yīng)，當(dāng)做這類功能的時候，可以回想一下自己是如何被其他產(chǎn)品打擾的。

隨著大數(shù)據(jù)的發(fā)展，我相信未來的通知系統(tǒng)會更加全面，且能做到千人千面的模式，不過在此之前，各位產(chǎn)品設(shè)計(jì)師，還需要對通知下一番功夫才是。

5. 小結(jié)

我們還可以繼續(xù)舉例說明，但是基本大同小異，所以到這里為止，我再對上面的內(nèi)容做一次總結(jié)，梳理出一個好的通知應(yīng)該是如何設(shè)計(jì)的。

干擾最小化：通知本身具有強(qiáng)制性和干擾性。它的目的是把用戶的注意力吸引到產(chǎn)品上來，所以要認(rèn)真思考發(fā)送通知的內(nèi)容、時間、頻率；不要提醒用戶當(dāng)前屏幕上已經(jīng)處于展示狀態(tài)的內(nèi)容；也不要推送與用戶無關(guān)的系統(tǒng)信息。

跨設(shè)備：當(dāng)用戶讀過了某條信息，這條信息應(yīng)該不再做展示。同理，用戶也應(yīng)該能夠在其它更適合接收消息的設(shè)備上找到已讀信息。用戶通知應(yīng)該在所有設(shè)備上進(jìn)行同步。

允許設(shè)置：允許用戶在「設(shè)置」中禁止或調(diào)整通知的形式。如案例一，通過選擇推送內(nèi)容，來影響接收推送的頻率。案例二，可選消息提醒的形式是紅點(diǎn)+數(shù)字，或僅是紅點(diǎn)。

時效性：良好的通知應(yīng)盡可能實(shí)時推送。而不是等這件事情都過去很久了，才推送給用戶知道。

支持匯總：把同類型的通知合并為一條，并顯示信息未讀數(shù)量。也可以考慮一鍵展開通知，顯示信息詳情。

可操作性：把通知和操作結(jié)合在一起，讓用戶不需要打開首頁就能對特定通知進(jìn)行常規(guī)操作。操作應(yīng)該清晰明了，且僅在未重復(fù)默認(rèn)操作時提供。同時操作應(yīng)該是有意義、實(shí)時、和內(nèi)容對應(yīng)的，并且能讓用戶完成某個任務(wù)。如案例一，可以在不打開郵件的情況下，直接對通知進(jìn)行管理、查看和清除。案例二中的操作針對的是未讀郵件，可便捷地在通知板面進(jìn)行回復(fù)、刪除、標(biāo)為已讀或垃圾郵件。

總結(jié)

對本篇文章的拓展總結(jié)：

• 通知具有召喚屬性，但是頻率過多就會變成打擾，所以要注意通知的頻率與內(nèi)容重要性；
• 設(shè)計(jì)師或產(chǎn)品經(jīng)理應(yīng)該將通知的內(nèi)容分類梳理出來，以便維護(hù)或新增必要需求可能需要用到的推送信息。
• 通知一般為兩種類型，一類是推送只讀型，一類是操作反饋型；設(shè)計(jì)師需根據(jù)不同類型的通知做好對應(yīng)的設(shè)計(jì)，針對具體問題具體分析；
• 想要利用好「通知」，也需要對業(yè)務(wù)有詳細(xì)的了解，再代入本文所列舉的注意點(diǎn)，就可以設(shè)計(jì)出一個體驗(yàn)更佳的通知模式。
• 通知規(guī)則不會脫離本篇文章的范圍，所以只要詳細(xì)研讀，必會有所收獲。

文章來源：站酷

一年一度，天貓雙十一全球狂歡節(jié)，如約而至！

從2015年開始，我們每年都會在雙十一期間，將雙十一品牌設(shè)計(jì)的完整思路分享給大家，這已經(jīng)成為雙十一設(shè)計(jì)團(tuán)隊(duì)的傳統(tǒng)。不為別的，各位同仁辛苦一年，想跟大家就著新鮮出爐的設(shè)計(jì)嘮嘮嗑。

每逢雙十一logo出街，都會有熱心的朋友幫我們解讀，也有人問我們?yōu)樯恫桓銈€官方發(fā)布？各位朋友，您現(xiàn)在看到的就是官方發(fā)布的內(nèi)容，它不只有l(wèi)ogo，而是從頭到尾一個完整的故事。

△ 2019天貓雙十一主logo

△ 2019天貓雙十一主logo多語言版本

今年是雙十一的第十一年，當(dāng)我們接到這個任務(wù)的時候，就有機(jī)靈的同學(xué)提議：「我們用6個1吧，111111，61兒童節(jié)！」、「讓我們回歸購物的純真快樂！」。

「哈哈哈哈哈哈…」魔性的笑聲在整個會議室回蕩，看來往年撓破頭也解不開的難題，就這么解開了？故事當(dāng)然不會這么簡單，我們還沒有往這個方向嘗試就被否了。

• 其一，雙十一是一個深入人心的認(rèn)知，這四個一已經(jīng)成為了超級符號，是我們寶貴的品牌資產(chǎn)，而六個一不但不能幫我們強(qiáng)化認(rèn)知價值，反而會增加認(rèn)知成本。
• 其二，六個一是一個純視覺的創(chuàng)意，他很難支撐起我們要傳達(dá)的消費(fèi)者價值，也很難建立起情感連接。

我們應(yīng)該從哪兒入手？

回歸到設(shè)計(jì)的本質(zhì)來思考，我們認(rèn)為，設(shè)計(jì)的本質(zhì)是將一個想法或者觀點(diǎn)巧妙的表達(dá)給目標(biāo)對象，表達(dá)的過程中，形式只是手段，重點(diǎn)在于我們要表達(dá)什么。

我們集合了阿里各事業(yè)部的設(shè)計(jì)師代表，讓大家回歸到一個普通消費(fèi)者的狀態(tài)，一起聊一聊各自的雙十一故事，把這些故事提煉出來，就是消費(fèi)者對于雙十一普遍真實(shí)的認(rèn)知。在全年最便宜的一天，無論湊熱鬧也好，跟風(fēng)也好，貪便宜也好，好像不買點(diǎn)什么總感覺錯過了什么。在這一天，「購物」毫無疑問成為頭等重要的事情。

△ 阿里巴巴經(jīng)濟(jì)體設(shè)計(jì)師共創(chuàng)

那么我們要對消費(fèi)者表達(dá)「購物」嗎，講我們多么便宜，貨品多么豐富，多么物美價廉？這些是消費(fèi)者早就形成的認(rèn)知，是我們不用表達(dá)大家都知道的事，它看起來并不是一個想法和觀點(diǎn)。

還是購物，但肯定不是教大家怎么購物，作為消費(fèi)者，購物能給我們帶來什么？

有人說，購物能讓我們吃飽穿暖，讓我們出行方便，讓我們安居無憂。

如果這些你都有，你為什么還要購物？

因?yàn)槊總€人都向往更好的生活！

為了更好的生活，我們需要通過物品的改善帶來心理的滿足感。當(dāng)然也有人會會說，滿足感也可以通過其他的方式獲取，比如關(guān)愛他人、親近自然、學(xué)習(xí)、修行、冥想等等，我們非常認(rèn)同，更好的生活當(dāng)然不僅僅只有購物。但我們當(dāng)下探討的范疇僅僅只是「購物」以及「購物」能帶來的滿足感，對這種滿足感的期待，是每一個消費(fèi)行為的動因。比如你想要買一件新衣服的時候，其實(shí)你已經(jīng)在期待穿上這件新衣服的樣子，你在挑選一件禮物的時候，已經(jīng)在期待他人收到這件禮物時的反應(yīng)……

雙十一，全年最便宜的一天，無疑讓你的期待，變得「更值得」期待，所以「更值得」讓大家買得更多。

但，這些洞察還只是幫我們理清了消費(fèi)行為背后的共性規(guī)律，實(shí)際上，細(xì)分到每個消費(fèi)者，因?yàn)樯矸萁巧罘绞降牟煌瑒右蚋髯圆煌?，還不能簡單的用向往更好的生活來概括，因?yàn)樗橄?，聽上去對，但每個消費(fèi)者更關(guān)心的是我的需求是不是被滿足，而對于雙十一來講，我們就是要打造屬于每一人的雙十一，而不僅僅只是購物，這樣它才具有節(jié)日的文化屬性。

所以，我們開始探尋真實(shí)的消費(fèi)者故事，尋找那些通過物品讓生活變得更好的故事，這些真實(shí)的故事，給了我們很大的感觸。我們發(fā)現(xiàn)，購物行為下，其實(shí)還隱藏了每一個消費(fèi)者內(nèi)心更深層的需求，它是一個個藏在心底的愿望，正是這些不同人的愿望，成就了每一個平凡人鮮活的人生。我們想要幫助他們實(shí)現(xiàn)自己的愿望。在雙十一當(dāng)天，幫助每個消費(fèi)者「愿望11實(shí)現(xiàn)」！這才是雙十一更應(yīng)該滿足的消費(fèi)者需求，它不僅僅是購物，而是通過物品價值上升到情感價值，這樣的品牌，才真正能夠讓人感受到溫度。

在傾聽這些故事的時候，我們的阿里女神被感動了，她主動要求幫我們寫一首歌，她想把她的感動通過音樂的方式記錄下來，配合我們精選出來的11個故事，講給大家聽。

△ 雙十一品牌設(shè)計(jì)概念篇mv

「logo出來了？」低沉而沙啞的聲音，把我們從自我陶醉中喚醒，我們找到了想要表達(dá)什么，但和怎么表達(dá)之間還隔著上百個logo方案。

于是，我們開始了一輪又一輪的打磨，打磨的的重點(diǎn)放在了如何表達(dá)「愿望11實(shí)現(xiàn)」這一主題，這個過程中，有兩個大方向上的分歧：

一個大方向是表現(xiàn)「愿望」，因?yàn)樗容^有畫面感，也比較容易表達(dá)。

另一個大方向是表現(xiàn)「實(shí)現(xiàn)」，因?yàn)樗菍Y(jié)果的描述，更符合消費(fèi)者對結(jié)果的預(yù)期。

在糾結(jié)掙扎過后，我們選擇了把兩個方向融合，劇情貌似又回到了熟悉的設(shè)計(jì)故事，「把這兩個方案融合一下！」我相信做設(shè)計(jì)的朋友，一定反復(fù)聽過這句話，沒聽過的朋友，那說明你做設(shè)計(jì)還不久，我保證在你今后的職業(yè)生涯里，這句話一定會反復(fù)出現(xiàn)。（一個會心的微笑）

融合說起來容易，這么抽象的文字怎么轉(zhuǎn)換成圖形表達(dá)，同時還要和貓頭+11.11融合，為什么要和貓頭+11.11融合呢，因?yàn)檫@是我們重要的品牌形象資產(chǎn)，從2015年開始，貓頭+11.11的組合就固定下來了，這意味著logo的80%的主體已經(jīng)固定，我們的難點(diǎn)就在于在這20%的區(qū)域里，如何既要表達(dá)主題，還能做出和往年不一樣的感覺。我敢向你保證，雙十一的logo是所有l(wèi)ogo里最難的，沒有之一，至少是我十幾年職業(yè)生涯里最硬的茬。

「愿望、實(shí)現(xiàn)、貓頭、11.11」這幾個詞反復(fù)在腦海里縈繞，經(jīng)驗(yàn)告訴我們，當(dāng)面對如此復(fù)雜的局面，我們應(yīng)該從里面跳出來，換個視角看問題，換什么視角？當(dāng)然還是再次回到消費(fèi)者視角，消費(fèi)者愿望實(shí)現(xiàn)時是一種什么樣的狀態(tài)？是愿望實(shí)現(xiàn)時的滿足？好像還差點(diǎn)意思，愿望平時也能實(shí)現(xiàn)，和在雙十一實(shí)現(xiàn)愿望有什么不同？

我們認(rèn)為，它應(yīng)該是超越你期待的表達(dá)，從愿望實(shí)現(xiàn)時的滿足，升級到愿望實(shí)現(xiàn)時的驚喜！這才是狂歡節(jié)該有的味道。當(dāng)然，驚喜也有很多種它還不夠有體感，如何找準(zhǔn)驚喜體感？

答案是感同身受。于是我們開始了場景模擬，模擬消費(fèi)者逛雙十一的場景。

當(dāng)我們來到雙十一的時候：「咦！今年好像真的不一樣！」

繼續(xù)探索的時候：「呀！找了好久的idou同款原來在這里！」

準(zhǔn)備下單的時候：「喔！真的很便宜！」

收到快遞的時候：「哇?。。?！」

聽上去有點(diǎn)夸張，但這確實(shí)是我們想要營造給消費(fèi)者的驚喜，當(dāng)人感到超越期待的驚喜時，會不自覺的放大瞳孔、張開嘴巴脫口而出。這是人類共通的體感，是不用解釋就有的共鳴。這讓我們瞬間被點(diǎn)亮了，「驚喜到脫口而出！」我們一下子找到了核心創(chuàng)意。

通過反復(fù)嘗試，我們發(fā)現(xiàn)氣泡形的表達(dá)，不僅能成為承載所有消費(fèi)者愿望的想法框，同時也能成為表達(dá)愿望實(shí)現(xiàn)時驚喜到脫口而出的對話框，把這個氣泡形和貓頭+11.11結(jié)合，這就是我們今年雙十一主logo的原由，這個logo和以往雙十一的logo最大的不同在于，它更像是一個容器，容納不同人不同的個性化表達(dá)。它一改之前一直端著的狀態(tài)，以一種更加親民，更加個人化的方式呈現(xiàn)給大家。

△ 2019天貓雙十一品牌logo演繹視頻

當(dāng)然，作為容器，我們還要把核心創(chuàng)意延展到線上線下各個場景。

△ 雙十一定制禮盒

△ 走向全球的雙十一

過去幾年，我們向大家介紹過天貓雙11的主風(fēng)格的來龍去脈，一定會在創(chuàng)新的基礎(chǔ)上，保持一貫的傳承。所以今年波普藝術(shù)的主基調(diào)還是會延續(xù)下去，問題又回到了我們?nèi)绾卧诓ㄆ账囆g(shù)這個大的基調(diào)下面，通過老元素的新組合，創(chuàng)造出全新的視覺感受。相比符號，視覺風(fēng)格更容易表現(xiàn)「驚喜到脫口而出！」這個idea，它可以通過形色質(zhì)構(gòu)全方位的表達(dá)。

當(dāng)一個人「驚喜到脫口而出！」的時候，快樂的氣場圍繞在他周圍，這些無形的從中心向四周放散的表現(xiàn)，看上去很像是圓形聲波，同時它還能根據(jù)不同人的狀態(tài)做動態(tài)變化，這就形成了一種設(shè)計(jì)語言，一種能用固定的形式做出千變?nèi)f化的效果的語言。

當(dāng)我們把它和波普藝術(shù)的主基調(diào)結(jié)合的時候，就形成了今年雙十一獨(dú)特的視覺語言，再通過形色質(zhì)構(gòu)的拆解，應(yīng)用到各個場景。

△ 裝置應(yīng)用

△ 天貓雙十一發(fā)布會現(xiàn)場應(yīng)用

△ 天貓雙十一開幕盛典現(xiàn)場應(yīng)用

文章來源：優(yōu)設(shè)