關于「撤銷」有很多設計細節可以講，所以我花了兩周時間，將其濃縮成 3000 字，幫助各位產品設計師更好理解撤銷的設計細節。

撤銷的目的是幫助用戶取消當前的操作行為。

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

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

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

類似于下象棋的時候，你覺得這一步走得不好，所以悔棋了，雖然對家沒說什么，但是你心里又覺得過意不去，畢竟落子無悔真君子，所以你又把棋子放回去了（真是不怎么恰當的比喻呢）。

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

所以關于撤銷，我們可以從下面幾點來聊聊：

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

依次序撤銷

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

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

很多人把這條原則解讀為「撤銷原則」，本質上是沒什么問題的，因為撤銷確實需要讓用戶自由操控。但是早期的撤銷，并不「自由」，而僅僅只是讓用戶在一定范圍內「可操控」。

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

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

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

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

現在的很多工具產品應該是沒有這些限制了，比如 Sketch，Word 都是可以無限次撤銷直至最初始狀態或剛打開文件的狀態。

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

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

但是這里的撤銷，它還不夠自由，因為它是「依次撤銷」—— 每一步撤銷用戶都得經歷。

選擇性撤銷

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

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

繼續拿 PS 舉例。

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

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

或者再通俗一點的例子，瀏覽器。

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

而現在有網頁歷史記錄，就可以直接幫你打開之前關閉掉的所有網頁中的其中一個。

解決了用戶每一步都要經歷的問題。

當「撤銷」與「歷史記錄」結合之后，「選擇性撤銷」的出現還能解決掉「依次序撤銷」的一個關鍵問題：撤銷重做之后，無法復原。

通俗點講，就是當用戶撤銷到之前的操作，進行了新的操作行為，那么原來舊的那條線路就被廢棄了?？磮D：

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

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

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

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

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

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

也許這已經不是通常意義上的撤銷，但它確實是撤銷的升級版。

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

到這里，我只是講了「撤銷」的特性，下面來聊下它在界面設計中是如何應用的。

撤銷在界面中的運用

我們現在在很多產品里都能看到撤銷，在網頁里與移動 App 中，它的使用形式雖然多樣，但本質上并沒什么區別。

大多就是單次撤銷，因為用不到多次撤銷，多次撤銷更多是在工具里被使用。

比如油管的撤銷使用：

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

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

在網頁產品中，撤銷的運用大多是這樣的。

我們再來看移動端產品對于撤銷的應用。

在 iOS 中比較常見的是微信的搖一搖手機撤銷正在鍵入的內容：

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

而有一類產品，撤銷會以 Snackbars 的形式出現，如圖：

當這類郵箱產品，刪除了某封郵件后，在底部就會出現這樣的提示，告知用戶可撤銷上一步行為。

更多的還是工具類產品，比如修圖類產品 Snapseed：

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

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

下面一節來解答。

與撤銷沖突的元素

先放結論：當某個功能具備撤銷屬性時，切勿再使用二次確認對話框，反之同樣成立。

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

舉個例子：

上面這張圖，左邊是在執行操作前彈出的確認框，右邊是執行操作后彈出的提示框。

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

所以它們不應該同時出現，且它們雖然是解決同一個問題，但是是完全不同的情況。

于是，在大多數產品中我們很少看到撤銷的使用，因為大部分需嚴謹的操作都會有二次確認，并不嚴重的操作也就不需要任何提示。即使是上述提到的郵箱刪除，沒有二次確認也是因為它有撤銷作為提示且還有回收站允許用戶檢查確認。

所以，除非是場景與之密切相關的，比如社交產品內容發送后的撤回功能。

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

它們之間的差異是：它并不會產生嚴重后果，但確實會產生小問題。比如誤操作發出信息，或發出后發現話術并不嚴謹。

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

另外還有個提示：心細的同學會注意到文章里或其他產品里出現的「撤銷」通常也會寫成「撤消」。在別的領域里這是兩種不同的內容，但在產品設計領域里，目前并沒有對這兩者做明確的區分，所以暫時不用過于糾結。

總結

這篇文章講了很多內容，我在這里梳理下：

• 撤銷分為依次序撤銷與選擇性撤銷；
• 依次序撤銷有單次撤銷與多次撤銷，以 PS 為例；
• 選擇性撤銷大多在工具類產品里被使用，它與歷史記錄結合，解決了依次序多次撤銷部分內容被覆蓋的問題；
• 在非工具類產品里，被使用更多的是單次撤銷，是因為場景限制；
• 撤銷與二次確認不可同時出現，它們看起來是解決同個問題，但之間存在較大差異。

所以當你設計的產品要用到撤銷時，也要注意這些細節問題。

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

文章來源：優設

本文對幾種常見的異常狀態進行設計總結，其中介紹了不同異常狀態的表現形式以及我們應展現的設計狀態與規范。

異常狀態多在特殊場景下出現，比如服務器異常、網絡異常等，因為異常狀態出現的概率是較低的，所以異常狀態也常常會被忽略，等到實際碰到的時候才會意識到原來還有這種狀態……

作為交互設計師，在完成主流程設計后，也應該考慮到異常場景。

從全局性出發，我們可以預先考慮到產品將會碰到的異常狀態，針對不同的異常狀態制定相應的設計規范，在后續的設計需求中直接復用即可。

下面對幾種常見的異常狀態進行設計總結。

一、網絡異常

1. 原因

網絡異常的原因主要有以下兩種原因：

（1）網絡連接權限

針對某App的網絡連接權限可以通過手機進行設置，可設置為關閉應用使用數據，或者只允許應用在WLAN下使用，或者允許應用在WLAN與蜂窩網絡下均可使用。

所以以下均屬于網絡異常的情況：

• 關閉應用使用數據，在流量或WI-FI環境下打開App
• 只允許應用在WI-FI下使用，但在流量環境下打開App

（2）網絡連接狀況

在斷網（打開飛行模式）、弱網（手機信號差）的情況下， 也無法正常獲取數據。

2. 處理方式

當網絡異常時，用戶點擊進入新頁面或在當前頁進行操作時，App會通過異常狀態缺省頁或交互反饋來告知用戶當前異常狀態和解決方案。主要分為兩種情況：

（1）當用戶操作進入App新的頁面時，常以缺省頁的形式提醒用戶當前網絡異常。當應用檢測到有可用網絡時，缺省頁將自動刷新頁面內容。

比如網易云音樂在無網絡連接下，進入新頁面時，缺省頁以簡單的文案告知無網絡的基礎原因，通過查看詳情來告知用戶解決方案以及引導如何解決問題。

美團、騰訊視頻等，引導用戶檢查網絡權限設置和稍后再嘗試刷新頁面，稍后再試是因為弱網環境是暫時的，比如在地鐵上高鐵上或者某處手機信號接收較差的地方。

（2）當用戶點擊操作當前頁面時，比如上拉加載頁面、下拉刷新頁面，點贊、關注等操作時，常以toast或對話框的形式提示用戶。

比如網易云音樂，網絡異常情況下下拉刷新或上拉加載頁面均進行對話框提示，并引導用戶檢查網絡權限設置。

美團外賣，無網絡連接環境下，在我的訂單頁面進行評價操作，會進行toast提示。

二、流量警告

前面說完網絡異常的設計規范，接下來就不得不提到流量警告的場景。

對于需要消耗大量流量的應用：

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

（2）在WI-FI環境下切換到流量環境時通常應用會主動暫停進程并進行流量警告，并在頁面上告知用戶原因，讓用戶選擇是否繼續進程。

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

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

三、網絡異常和流量警告適用場景快速查詢

總結完網絡異常和流量警告的設計規范，我們知道其中影響因素包含：網絡連接權限、網絡連接狀況以及網絡環境的變化，下面做一個小總結，以便快速查詢。

在總結之前強調一下，網絡權限設置是針對某App，連接Wi-Fi和流量是針對手機（所有應用）。以iOS為例，設置截圖如下：

情況一：當前網絡環境不變化

情況二：當前網絡環境發生變化

針對以上情況，表現狀態為“網絡異?！?，則參照網絡異常的設計規范；表現狀態為“流量警告”，則參照流量警告的設計規范。

四、服務器異常

服務器出錯的情況是較少出現的，若出現服務器異常，其異常的時間也較為短暫。

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

點擊操作的話則以toast或對話框的形式進行提示并重試，比如下圖的段友app，服務器出錯，刷新頁面后進行toast提示；前段時間超級火的zao應用，朋友圈火爆傳播，一度造成服務器訪問過載，制作視頻的時候應用給出了對話框提示。

五、加載失敗

1. 原因

在數據加載過程中，導致異常的原因可能是：
1、網絡異常導致加載失敗

2、服務器請求數據失敗導致加載失敗

2. 處理方式

1、如果是因為網絡異常導致加載失敗，處理方式參照網絡異常的設計規范。

2、如果是服務器請求數據失敗，處理方式參照服務器異常的設計規范。

六、空狀態

1. 原因

空狀態就是指頁面當前無內容，主要在以下場景下會出現空狀態的情況：

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

2. 處理方式

當前頁面為空一般會提示用戶當前頁面為空狀態，同時也可能會做適當的引導。

針對空狀態的場景，主要采取以下幾種設計原則：

（1）用戶無權限

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

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

（2）搜索無結果
搜索無結果的處理方式一般有兩種處理方式，一種是缺省頁面（文案或是文案+插畫），另一種是在第一種的基礎上加上相關推薦。具體用哪一種根據設計目標來決定。

比如網易云音樂搜索音樂無結果直接用文案告知。豆瓣搜索書影單無結果以插畫+文案的形式展示結果。美團搜索不到相應的內容，應用直接推薦其他商家刺激用戶購買。

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

（3）初始內容為空

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

直接用缺省頁面告知方式上，例如網易云音樂，個人未發布相關動態，該動態頁面直接用簡短的文案告知用戶暫無相關動態。

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

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

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

（4）內容被刪除

頁面內容被刪除區分場景說明。

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

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

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

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

例如某微信訂閱號的文章發布記錄中的某篇文章已經被刪除，點擊進入二級頁面后的提示如下：

七、功能重建

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

總結

以上對幾種常見異常狀態的設計規范進行了總結，相對正常狀態，異常狀態較為少見，容易忽略，大家可以參照以上規范進行異常狀態設計和優化調整。后面碰到其他異常狀態，我會繼續補充。

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

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

什么是場景化設計

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

• 感情與景色
• 情形、景象
• 環境：假設是在這個情景。

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

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

場景化設計指基于對場景的分析，得出用戶痛點與需求，結合前后場景預判用戶目標，通過設計提高用戶效率，給予用戶驚喜與感動。

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

如：用戶（who）早上上班（when）在地鐵上（where）看電子書（what），地鐵上人多嘈雜且操作不方便（how）。再比如用戶（who）中午（when）在辦公室里（where）點外賣（what），肚子很餓還不知道吃什么（how）。五要素就像口訣，幫助我們全面快速地描述場景。

有哪些場景化設計的例子

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

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

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

再比如在 Google Maps 的 app 里開啟導航時，如果目的地在預計到達時間還沒有開門，或者快要/已經關門了的話，會有個彈窗提醒。

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

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

環境是變量：不同環境看到的信息不同，比如設備環境發生變化時：iOS13 中的備忘錄頁面，將「添加」按鈕移到了右下角。為什么？因為手機屏幕越來越大，把按鈕從右上角移到右下角，更有利于用戶單手操作。

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

為什么要基于場景做設計？

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

怎么進行場景化設計

可以概括為以下四步。

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

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

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

通過對關鍵場景的詳細描述，我們將摸不著的用戶場景像過電影一樣在眼前一一呈現，有利于我們發現很多想不到或者通過調研得不到的細節，幫助我們發現用戶真正的痛點與需求，洞察設計機會點。

2. 根據場景挖掘機會點

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

通過分析當前場景存在的痛點和需求挖掘機會點

支付寶「朋友」界面，當用戶輸入某數值時，輸入框上方會自動顯示「給對方轉賬***元」按鈕，用戶可點擊該按鈕完成轉賬。這是因為經常有用戶誤以為輸入數值發送即完成了轉賬，導致很多尷尬的狀況出現?；谠搱鼍跋碌耐袋c與需求，支付寶做了這個改進，貼心又好用。

iOS 系統在切換 APP 操作時，會將一些金融類 APP 虛化，以此來保證用戶信息安全。這一設計細節也是充分考慮了用戶在切換 APP 時的場景，解除了用戶在公告場合擔心被窺屏而泄露個人財富信息的擔憂。

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

通過對用戶下一步目標的預判尋找機會點

第二個方法是通過對用戶當前場景的分析，預判用戶下一步的行為與目標，從而尋找當前場景的機會點。

如何預期用戶下一步目標？有三個方法：

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

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

3. 機會點轉化為落地的設計方案

在將機會點轉化為具體的設計時，有兩個可作為依據的設計原則，分別為，情感化。

實現有以下幾個方法：

行動點前置

通過對用戶下一目標的預測，將用戶目標在當前場景展示，縮短操作流程，達到的目標。如淘寶首頁的 tab 欄會根據每個用戶的瀏覽記錄預測用戶目標，千人千面個性化展現，縮短了用戶查找商品的路徑，提高商品購買效率。

行動點置換

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

行動點相關提示

意思是根據用戶當前目標或下一步目標進行相關的提示。如支付寶朋友頁面，當上滑時，會出現「找人轉賬」的提示，點擊進入朋友列表的純凈模式（去掉了服務通知等跟轉賬無用的列表），提高了用戶尋找的效率。

再比如，網易郵箱，當郵件中提到附件，但是沒有上傳附件時，點擊發送后，系統彈出下方的提示，解決了用戶常常忘記添加附件的困擾。

突出行動點

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

直接執行

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

情感化

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

情感化設計的步驟依次為：提煉影響產品的的情感指標→聚焦用戶對產品的情感訴求→產出設計方案→驗證設計價值（來源于周姮—知乎螞蟻金服體驗技術部的一次分享）。

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

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

4. 設計檢驗

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

總結

1. 什么是場景化設計？

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

2. 有哪些場景化設計的例子？

3. 為什么要進行場景化設計？

4. 怎么進行場景化設計？

• 根據使用流程和行為路徑窮盡場景
• 根據場景挖掘設計機會點
• 將機會點轉化為落地的設計方案
• 設計檢驗

產品：這次需求很簡單，對比上期只有字段和操作項的差異，把上次的稿子直接復制一下應該不用很多時間吧？

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

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

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

……

通過以上對話不難看出，最常出現在需求溝通與研發過程中，由于缺少統一的規范和標準化體系，導致實施環節各方溝通成本高，造成設計成果與實現有一定差距，影響用戶體驗；通用組件和業務組件混用，導致設計模式和代碼復用率低。尤其是當業務發展到一定體量時，對于復雜產品的大量重復且類似的需求場景，如果沒有一種的工具和規范來協同工作，將大大影響團隊的生產及溝通效率。

問題

• 認知：產品、研發、設計師對于同一需求都有自己理解的解決方案，缺少統一規范的約束，難以達成共識。
• 效率：設計效率低，交互原型的維護成本及上下游團隊的溝通成本高，易造成不專業的印象。
• 品質：認知和效率的局限性，最終導致實施落地的產品質量和用戶體驗難以得到保障。

解決

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

組件庫是設計系統的一部分，是在我們常規界面設計過程中可以直接用來制作交互圖例和搭建頁面的組件集合，它可以作為單個組件獨立存在，也可以通過多個組件組合而成的結構或模式來解決類似場景的設計問題。組件庫是在約束條件下去構建解決方案的過程，所以組件的使用也需遵循一定的規范，按照一套標準化的體系復用于多個業務場景。

一個有效的組件庫，可以幫助設計師和研發提高工作效率，提升設計專業度的同時讓產品本身的體驗更加一致、可學，品牌感更強，它所具備的基本特征一定是通用的、靈活的、復用的。

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

那么用組件庫這種標準化體系來完成設計方案時，到底能帶來怎樣的價值？

組件庫的價值

保證產品體驗的一致性：對于一個含有多業務系統的大型復雜產品，每個獨立的業務系統雖然在功能上有一定區別，但整體的用戶體驗需要滿足基本的一致性。比如，當我使用同一個產品中的業務系統 A 和業務系統 B 時，我能通過類似的頁面結構、組件及樣式的一致性、操作反饋乃至提示文案結構的一致性，來感知到我使用的A、B業務系統隸屬于同一個產品。

提升設計師的效率：在需求量巨大且需求來自不同的業務線時，需要逐一繪制頁面及組件，造成大量重復勞動，并且在評審及需求溝通環節還可能存在不斷地細節調優。所以對于設計師而言，組件的高頻復用能大大提升設計效率，使設計師更多的將精力聚焦于理解和解決用戶的實際問題。

提升產研團隊的效率：通用場景及普通需求直接按規范進行設計和研發，減少上下游對同一頁面及組件使用方式的不同理解而產生的多余溝通成本。

利于沉淀設計規范：組件本身的設計和使用方式就可以直接作為交互和視覺規范的一部分，按照統一的設計規范來確定需要使用的主題色、組件樣式、組合方式及頁面結構，可以快速搭建出一個或多個產品的交互框架。

構建「FishDesign」企業級UI組件庫

那么如何構建一個企業級 UI 組件庫？

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

顧名思義，「企業級」意味著 FishDesign 所服務的業務都是具備一定體量的，可能是服務一個包含了多個獨立子業務系統的大型復雜產品，比如網易七魚；也可能是同時服務多款產品，比如網易七魚和網易定位等。

組件庫是幫助設計者及前端工程師快速構建業務系統的工具，除了最重要的組件內容，還需要設計原則、配色方案及布局規范來指導具體業務產品的設計有效落地。

1. 設計原則

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

• 簡潔：如無必要，勿增實體，慎重篩選客戶當前需要信息內容。
• 直接：提供用戶操作后的直接反饋，保證用戶的操作結果符合預期。
• 優雅：設計方案追求優雅，給使用者有質感的操作感受。
• 適應性：設計方案需提供可擴展能力及適應性，以適應不同模式的企業使用。

2. 顏色

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

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

3. 布局規范

為處理多業務中網頁設計區域內的信息收納問題，我們用規則的網格陣列來指導和規范版面布局以及信息分布，即柵格系統和頁面布局。FishDesign 在 12 柵格系統的基礎上，將整個設計區域按照 24 等分的原則進行劃分，來增加頁面的相似度，提升用戶體驗。

我們通過基本的配色及布局規范解決了產品風格及信息區塊框架的設計，那組件庫中重要的組件部分，是如何作用于產品搭建的？Brad Frost 提出的「原子化設計理論」可以幫助我們更好的理解，原子化設計的靈感來自于現實世界當中的分子結構，UI 中顆粒度最小的元素，即「原子」，組成了顆粒度較大的元件，即「分子」；而諸多分子又組成了更加復雜的組件與模塊，即「有機體」。

組件庫構建之初無法一應俱全，是需要后續不斷的維護與迭代的。如何在最初海量組件中圈定適合的組件范圍呢？最合適的切入點就是從身邊的業務場景出發，從最基本、最簡單、最小的元素入手。

4. 組件分類

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

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

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

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

由上述步驟，我們將通用組件繼續細分為五個子類別：基礎組件、導航、數據錄入、數據展示、操作反饋。

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

用組件庫設計「網易七魚」示例

以網易七魚為例，看下有組件庫參與搭建的設計示例，以下頁面中所用組件均出自 FishDesign 組件庫。

「導航組件」使用示例：

「表格組件」使用示例：

「彈窗組件」使用示例：

「步驟組件」使用示例：

總結

組件庫最大的價值在于提升整個團隊的產研效率，使設計質量得以保障的同時，提升產品整體的用戶體驗。

我們對構建企業級 UI 組件庫的步驟及要素做個簡單回顧：

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

任何組件庫的構建都離不開一個優秀的團隊在整個設計過程中的協同，十分感謝參與的設計師與前端工程師們。上文僅是個人參與過程中的一些經驗總結，還不夠全面，同時篇幅有限，關于組件的具體設計考量無法一次詳盡，歡迎一起討論組件庫及標準化設計體系相關的更多內容。

文章來源：優設

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

從AARRR到RARRA的運營思路轉變

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

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

（1）獲客成本增加

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

（2）流失率高

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

因為以上兩個原因，現在黑客增長的真正關鍵在于用戶留存，而不是獲客。所以我們需要一個更好的模型——就是RARRA模型。

AARRR與RARRA的區別

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

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

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

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

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

• 以拉新為目的的新用戶免費體驗課（0元）；
• 以轉化為目的的低價專題課（50元以內）；
• 以盈利為目的的短期班課（999元以內）和系統課（1000-4000元）。

這樣的課程顯然是以拉新-留存-轉化個流程進行的設計，也是現在很多在線教育平臺通用的課程模式設計，其實本質上和其他行業的平臺也是類似。

在RARRA的模型下，數據驅動更重要。因為如果專注獲客，可以在渠道選擇等方面憑借經驗和主觀判斷來選擇，但是專注留存，就必須用數據分析找出每個留存環節的差異因素，進而制定最的方案大幅度提升留存率。在在線教育平臺的運營中，因為從推廣到課程設計、課程質量、售前售后服務等，包含大量影響營收的因素，因此數據分析方法也相對復雜。

數據分析的第一步，也是關鍵點在于：構建指標體系。

對于一個平臺來說，一般的數據指標都非常多，但必須確定唯一關鍵指標（OMTM），也是大家常說的北極星指標，作為驅動的方向。

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

那么接下來，就要對北極星指標進行分解。

從指標拆解來看：

• 有效聽課用戶中的新用戶數=外部流量導入*轉化率；
• 有效聽課用戶中的老用戶數=老用戶數*續報率。

在最后分解的四個指標中，除了老用戶數是直接由新用戶轉化率決定的之外，流量、轉化率、續報率三個指標都是可以通過運營來提升和改善的。

但是由于時間和資源的限制，對于三個指標，運營策略上肯定會有側重點和先后順序。

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

團隊分析后認為，AARRR模型可能并不適合我們。既然續課率出了問題，應該嘗試采用RARRA模型，把運營重點放在留存上。

于是，數據組開始探索留存的問題點出現在哪里。

我們拉出不同維度用戶數據進行對比，最后發現新用戶和老用戶的續課率差值竟高達53%。

也就是說，新用戶進行初步低價課轉化后，在從低價課到達正價課的留存續課階段，是流失最嚴重的一塊。

找到了最痛的點，問題其實已經解決了一半。

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

• 在課程質量方面，三個細分數據指標綜合可以衡量課程質量。
• 課前服務時間上，通過數據對比，我們發現課前兩周進行服務的效果最好，續課率也最高。
• 用戶來源上，短期班課的用戶續課率遠高于其他兩個來源。

根據以上的數據分析，給出了運營策略指導為：

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

改進后的效果：

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

階段性的成功，正是及時調整了用戶增長模型，并采用系統的數據分析方法驅動用戶增長。可以看出，數據驅動下，最終給出的運營策略非常簡潔，但前面數據組背后付出的努力和精力是很難被看到的。這正是我們想要的結果，扎根穩且深入，但呈現的卻是簡潔明了的運營指令。

在網頁和移動端界面中，內容和信息是否能夠經過系統性、有效的整理和組織，對于內容的可用性和實用性，都是意義巨大的。而在呈現信息的時候，視覺間隔是組織信息的關鍵因素。它說起來并不難理解，但是在實際的運用當中，卻是千變萬化，今天我們來梳理一下流行的視覺間隔的方法。

什么是視覺間隔

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

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

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

視覺間隔的種類

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

• 線條
• 色彩
• 負空間
• 陰影/體積
• 圖片

下面我們分別針對這5種類型進行說明。

線條

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

另一方面，這種間隔方式也很容易顯得過于簡單，并且和應有的形態相去甚遠。這也是為什么設計師在想盡辦法去尋求別的視覺間隔形態。太多的線條間隔會讓屏幕上的視覺干擾太多，并且帶來不必要的視覺噪音。

所以，能夠將線條間隔用得微妙、恰到好處、出神入化，是設計師功力的一個重要體現。

在這個網站產品頁面中，使用深色的線條間隔來分割產品信息，用來組織和間隔信息內容。

在這個頁面當中，線條分隔了不同的內容區塊，讓頁面的結構更易于被掃讀。

這個電商網站將不同級別的視覺內容進行了分離，借助簡單的水平線將價格、CTA按鈕以及承載相關信息的表單分隔到不同的區域。

負空間

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

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

Health Blog 的列表的排版層次是基于負空間來實現的，看起來清晰又充滿呼吸感。

色彩對比

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

這是一套移動端菜單的概念設計，強烈的色彩對比讓信息清晰可見。

即使是在這樣的柔和的設計當中，色彩的對比度也發揮了相當的作用：一方面，強烈的色彩對比讓CTA按鈕和輸入框之間有了明顯的區分，另一方面，右側的主視覺元素的背景也同樣借由不同色彩的對比，做到了突出的效果。

在 GNO Blankets 這個網站當中，強烈的明暗對比將網站元素分隔成為精美而清晰的區塊。

陰影和體積

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

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

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

圖片

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

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

在這個餐廳 APP 當中，圖片作為劃分內容的關鍵元素而存在。

按照功能劃分

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

全出血間隔

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

這個畫廊圖庫 APP 的藝術家目錄當中，使用線條作為全出血間隔，來區分藝術家。

這個名為完美食譜的APP也使用了全出血間隔線來區分內容。

在這個財務APP當中，也使用了全出血間隔線來區分條目。

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

嵌入式間隔

嵌入式間隔的功能是將相關性較高的內容分割開，并且它通常會和標題或者其他的特定元素保持對齊或者對應，它們通常是進行某個大區塊內不同組件的分隔，或者將多個同類的元素分隔開。

這個網站當中，使用橫向的短分隔線來區分表單中的參數條目。

中間分隔

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

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

值得思考的問題

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

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

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

文章來源：站酷

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

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

而且，通知越來越多地通過各種方式去觸達用戶。比如消息未讀的紅點提示，或者顯示消息的數字統計，以及手機使用過程中的頂部提示與聲音或震動的提醒，等等。

但我們還是無法抑制點擊圖標的沖動，這僅僅是因為它具有未讀的計數或紅點提示，即使我們已經知道當中的內容并不重要。

而我要說的是，當通知內容變得次要且被濫用之后，它仿佛成了一種違背設計原則的功能 —— 中斷用戶當前行為。因為它打破了用戶與產品之間的層級關系，破局至產品之外來吸引用戶的注意力，這是一個非常打擾的行為。如果我在看書，突然收到一條并不重要的消息，那我一定會非常反感。

所以，為了不被「紅點」支配，以及不讓通知所打擾，我會把手機里所有產品的消息推送都給關了。

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

以至于對于優秀的產品人或設計師，包括運營來說，利用好通知，就能掌握用戶心理，巧妙的將用戶留在產品中。它們甚至有助于與打算放棄產品的用戶建立聯系并促進互動。

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

通知的組成部分

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

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

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

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

1. 消息中心

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

所以它是一個匯總表。但也有可能它就是信息來源點，比如一些系統通知，告知要升級，因為它沒有其他功能可承載，所以只會在消息中心里出現。

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

2. 通知指示符

它可以是點，也可以是計數器，只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數人養成強迫癥的罪魁禍首。

3. 信息標題

它主要是指該信息來自于誰或屬于什么子類型，比如用戶互動點贊消息，評論消息，系統消息等等。用戶可以通過標題來獲悉該信息類型，再通過內容摘要來判斷內容是否重要。

當然，這里的摘要如果過長，就需要省略處理，引導用戶進入消息源或消息中心。

4. 推送時間

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

5. 通知圖標

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

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

6. 閱讀指示器

它就像是上面提到的紅點，這里指的是進入 App 的消息中心之后，所顯示的內容。

7. 操作行為

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

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

8. 小結

對上面的內容進行總結，可以得到這樣一幅畫像：

大部分系統或產品的通知組成，都可以通過此圖概括，唯一不同的是，它們會隨著不同的業務而發生變化。

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

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

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

一旦確定了通知的主要目標，以及想要解決的問題，包括它們如何對業務產生作用以及對用戶形成吸引力，就可以確定通知的具體樣式了。

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

通知的使用方法

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

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

1. 用戶信息類通知

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

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

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

說明

之所以給予用戶信息的操作行為，是因為用戶信息可分為感興趣的與不感興趣的，它主要取決于人。不感興趣的人，頻繁的發送信息，會影響用戶對產品的好感度，畢竟有很多用戶消息并不是用戶想要接收的，所以在社交產品里，用戶可刪除好友，或拉黑好友；在有社交屬性的產品里，用戶可拉黑賬戶，以達到不被騷擾的訴求。

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

當然，用戶還能對群消息做更復雜的設置。這就是產品對這類通知的一種優化方式。

2. 系統推送類通知

我們經常會在手機上收到一種系統類通知，或者在 App 中也會收到類似的系統通知。大多是關于系統升級，密碼更新等。

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

對于這類通知，用戶大多無法進行設置，因為它們比較強制，沒有可以商量的余地，類似于告知用戶：我們有新的消息，比較重要，你來看看，即使你不打算更新或執行也來看下。

說明

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

強制類系統通知不能頻繁，否則會給用戶造成控制欲反制的副作用。類似于本身用戶使用產品需要對產品享有控制權，現在反而被產品控制了。這是不行的。

3. 通用推送類通知

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

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

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

說明

通用型通知，如果是業務很復雜的產品，就必須建立通知推送的功能模塊，給予用戶進行選擇接受哪類信息的權力。允許用戶進行相應的設置，如活動類推送可拒絕接收。

在很多產品中都已經置入這樣的推送模塊設置，如下圖。

這類內容就是針對于產品的具體業務進行細分。

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

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

4. 智能推送類通知

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

雖然這類通知還算不上多少智能，但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知，因為用戶可能會想不起來通過哪類產品來查找附近美食。當這么一條通知出現的時候，正好解決了用戶的問題，反而提升了用戶對于產品的好感度。

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

隨著大數據的發展，我相信未來的通知系統會更加全面，且能做到千人千面的模式，不過在此之前，各位產品設計師，還需要對通知下一番功夫才是。

5. 小結

我們還可以繼續舉例說明，但是基本大同小異，所以到這里為止，我再對上面的內容做一次總結，梳理出一個好的通知應該是如何設計的。

干擾最小化：通知本身具有強制性和干擾性。它的目的是把用戶的注意力吸引到產品上來，所以要認真思考發送通知的內容、時間、頻率；不要提醒用戶當前屏幕上已經處于展示狀態的內容；也不要推送與用戶無關的系統信息。

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

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

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

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

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

總結

對本篇文章的拓展總結：

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

文章來源：站酷

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

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

每逢雙十一logo出街，都會有熱心的朋友幫我們解讀，也有人問我們為啥不搞個官方發布？各位朋友，您現在看到的就是官方發布的內容，它不只有logo，而是從頭到尾一個完整的故事。

△ 2019天貓雙十一主logo

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

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

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

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

我們應該從哪兒入手？

回歸到設計的本質來思考，我們認為，設計的本質是將一個想法或者觀點巧妙的表達給目標對象，表達的過程中，形式只是手段，重點在于我們要表達什么。

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

△ 阿里巴巴經濟體設計師共創

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

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

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

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

因為每個人都向往更好的生活！

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

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

但，這些洞察還只是幫我們理清了消費行為背后的共性規律，實際上，細分到每個消費者，因為身份角色生活方式的不同，動因各自不同，還不能簡單的用向往更好的生活來概括，因為它太抽象，聽上去對，但每個消費者更關心的是我的需求是不是被滿足，而對于雙十一來講，我們就是要打造屬于每一人的雙十一，而不僅僅只是購物，這樣它才具有節日的文化屬性。

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

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

△ 雙十一品牌設計概念篇mv

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

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

一個大方向是表現「愿望」，因為它比較有畫面感，也比較容易表達。

另一個大方向是表現「實現」，因為它是對結果的描述，更符合消費者對結果的預期。

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

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

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

我們認為，它應該是超越你期待的表達，從愿望實現時的滿足，升級到愿望實現時的驚喜！這才是狂歡節該有的味道。當然，驚喜也有很多種它還不夠有體感，如何找準驚喜體感？

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

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

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

準備下單的時候：「喔！真的很便宜！」

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

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

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

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

當然，作為容器，我們還要把核心創意延展到線上線下各個場景。

△ 雙十一定制禮盒

△ 走向全球的雙十一

過去幾年，我們向大家介紹過天貓雙11的主風格的來龍去脈，一定會在創新的基礎上，保持一貫的傳承。所以今年波普藝術的主基調還是會延續下去，問題又回到了我們如何在波普藝術這個大的基調下面，通過老元素的新組合，創造出全新的視覺感受。相比符號，視覺風格更容易表現「驚喜到脫口而出！」這個idea，它可以通過形色質構全方位的表達。

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

當我們把它和波普藝術的主基調結合的時候，就形成了今年雙十一獨特的視覺語言，再通過形色質構的拆解，應用到各個場景。

△ 裝置應用

△ 天貓雙十一發布會現場應用

△ 天貓雙十一開幕盛典現場應用

文章來源：優設