如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

現在，當你打開 Instagram、Airbnb、Apple Music、Twitter、Dropbox 這些應用的時候，乍一看很難區分清楚彼此的區別：帶有圓潤邊緣、現代感極強的非襯線字體大標題，極簡的黑白色調為主的界面，大量的留白，少量的提亮色甚至沒有提亮色。

這種現代的界面設計風格，乍一看很簡陋。而具有諷刺意味的地方在于，它們出自于最大的公司，是也是受眾最廣的產品，在視覺觀感上，讓人覺得幾乎沒有被設計過。

Instagram 的深藍的頁頭怎么變了？Lyft 中經典的亮粉色元素怎么不見了？這些有著深厚底蘊的品牌是否已經放棄了標識性的設計？又或者是它們開始共享相同的模板了？

問題在于，這不止是 Instagram 和 Lyft 這樣了，有跡象表明，Google 這樣的大廠也有類似的傾向。比如Gmail 中標志性的紅色大幅度減少，白色的背景，白色的交互按鈕，白色的輸入框，其他的Ui控件都很精準到位地保持了這種簡約而一致的風格。

身在硅谷的大型企業，互相之間的借鑒學習是常有的事兒，但是至少保持了足夠的差異化。但是現在的局面則不同，這種高度趨同的趨勢，讓整個事情看起來非常反直覺。

到底是怎么回事？

好吧，我們認為產品設計的一致性是好事情，這里有幾個值得注意的原因。

對于大量APP 的視覺和信息疲勞是誰都無法忽略的真實存在，絕大多數人已經厭倦了在太多應用之間來回切換，每一次下載新的應用都要花費大量的時間來重新了解界面的設計

調研表明，超過四分之一的應用，在首次下載之后，用戶只用過一次就卸載了。絕大多數人日常使用的APP 其實是非常固定的，它們中絕大部分，核心在于幫助人們節省時間和金錢（或者兼而有之），讓生活更輕松。

對，讓生活更輕松。而這需要數字產品具備良好的一致性，而設計師也越來越多地將注意力投注在這一個點上。

正如同我們熟知的UX設計專家唐納德·諾曼所說的：「很多用戶界面所存在的真正的問題，在于它僅僅只是用戶界面。很多用戶界面的設計阻礙了功能。我想努力達成某個目標，而不是將精力耗費在界面上?！?/span>

所有的電商網站基本上都遵循著類似的交互邏輯和視覺元素，你不會搞錯購物車的圖標，也不會錯過任何環節。這些約定俗成的慣例，意味著用戶不再需要重新學習在某個新的平臺上購物，降低學習成本。

絕大多數約定俗成的規則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習慣，而獨特的設計，截然不同的規則，則常常會成為習慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。

以 Snapchat 為例，今年早些時候曾經發布過一個版本，其中包含有一些比較有爭議的設計。這個版本當中，被重新修改過的導航和幾乎隨意堆砌的功能模塊，讓用戶活躍度幾乎立刻下降了73%，甚至直接導致了用戶流失和股票下跌。

正如同 Snapchat 所證明的那樣，新穎的設計是有風險的。一致的設計，確實有一定的機率降低用戶在面對新興事物時候的不安感。

明白用戶的需求和意圖，在不斷探索解決方案的過程中，才能真正創造出偉大的用戶體驗。相比于獨特的外觀，差異化的體驗是更有價值的。

當然，樣式和風格很重要，它們也確實會影響到體驗，當人們感知到有視覺吸引力的設計的時候，即使有一些混亂和無效的設計，也是可以忍受的。

但是設計師的精力是有限的，用戶的也是如此，相比于在色彩和花哨的動畫上反復嘗試，幫助用戶找到更好完成任務的方式，無疑更有價值。設計好的產品，最終能夠給用戶帶來價值的東西，是需要看似無限的測試和迭代，來向著可用和易用的產品更進一步。

奧巴馬、喬布斯和扎克伯格每天穿著相同的衣服，他們的衣服和這種行為同樣出名。心理學家將這種現象稱之為「決策疲勞」，它們每天需要用有限的能量來做大量的決定，而為了給更重要的事情留下足夠的精力，他們穿相對固定的衣服，就可以省心很多。

設計師面對的是同樣的局面。隨著界面設計的趨同化，設計師可以花費更少的時間來決定用什么色彩，而可以將更多的精力投注在更為深入的設計當中，比如更有效的布局，反思為什么要這樣設計，等等。

我想你一定在思考這種設計趨勢之下的缺點，比如這樣的設計是否會顯得缺乏創新，甚至會扼殺創造力。老實說，我覺得這樣的影響是存在的。

但是，即使每個產品設計師都參與到極簡主義設計的運動當中來，仍然有大量的設計工作有待完成，設計的范疇太廣泛了，需要設計的東西遠超用戶界面本身。

事實上，界面中的趨同化在近期看來是頗為有益的，對于長期的影響也是非常巨大的。

首先，最重要的一點，VR、AR 和人工智能的逐漸普及，用戶和數字設備之間的互動可能會變得更加隱形，小屏幕同樣在普及，手勢操作將會成為最基本的交互語言，我們將會越來越多地參與到無屏幕的交互當中去。

即使我們在iPhone 上，人工智能加持下的 Siri 越來越好用，越來越多的用戶開始習慣使用類似的語音助手來創建待辦事項，選擇音樂，發送消息，查看天氣，簡單的功能它們已經可以很好地完成了，復雜的功能和需求也會通過機器學習逐步習慣、越做越好。

在諸如人工智能、機器學習這樣相對高深的概念背后，是軟硬件正在更好地幫助人類完成任務，做對事情。設計師的角色需要更進一步，更深入地參與到產品當中。

如果設計師要改進 Siri 的設計，那么要做的工作遠不止設計界面，已經有很多相關領域的專家討論過這個問題了，設計師所需要了解、掌控的維度越來越多，設計正在變得更加深入和復雜。更通俗的講，設計師需要考慮新的方式，更加富有創造力的策略來吸引用戶的注意力，甚至要深入到情感和感知當中去，而不是單純的視覺。

如果我們僅僅將優秀的設計局限于我們在屏幕上看到的內容，未來更多的可能性，可能就止步于此了。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

目錄：

• 警告框與操作表
• 標簽欄與操作欄
• Tabs與分段控件
• Toast與Snackbar

一、警告框與操作表

1. 定義

警告框：是一種操作上的確認，只有當用戶點擊按鈕后才算真的完成，才可以有其他操作，主要作用是警告或提示用戶的。

警告框由三部分組成：標題、正文、按鈕。有些簡單的警告或提示只有正文和按鈕即可。

操作表/ActionSheet：操作表通常會從屏幕底部邊緣向上滑出一個面板，可提供2個以上的選擇。呈現給用戶的是簡單、清晰、無須解釋的一組操作，沒有正文的描述內容（大部分）。另外重要的功能操作也會用紅色文字展示。

2. 如何選用？

文字內容的重要性

文字內容的重要性：選擇警示框和操作表時，要考慮的是兩個彈窗文字內容對于用戶的重要程度，如果內容極為重要則選用警示框，如果文字內容不重要甚至不需要描述文字我們就應該選擇操作表。

案例：如下圖，淘寶登錄密碼錯誤時，由于警示框更重要的是文字內容的體現，幫助用戶找到問題所在，所以選用警示框。再看 QQ郵箱的垃圾箱中點擊全部清空時，由于信息本身就在垃圾箱內，不需要對用戶過多的文字提示，用戶直接操作即可，所以最后選用操作表。

用戶操作流暢性

用戶操作流暢性：當我們需要讓用戶停止操作并必須點擊當前界面的按鈕時，要選擇警示框，警示框對用戶操作上的流暢性有著很嚴重的影響。如果不需要太過強硬，我們就選用只需在屏幕中任意位置點擊就會消失的操作表。

數量

數量：這是最容易區分使用的方面，當彈窗中的按鈕數量超過2個時我們一定選用操作表，因為警示框的按鈕數量不可以超過兩個。如果數量一樣，可以根據上面兩點擇優使用。

案例：如下圖，我們在得到App 中點擊開通「推送通知」時，因為操作按鈕只有一個，所以選擇警示框。而點開微博中的更多按鈕，用的則是操作表，因為操作按鈕有三個。

二、標簽欄與工具欄

1. 定義

標簽欄：標簽欄位于屏幕底部，它是懸浮在當前頁面之上的，并且會一直存在，只有當用戶點擊跳轉到二級菜單后才會消失。用戶可以在不同的子任務、視圖和模式中進行切換，并且切換按鈕間都屬于不同的內容。

當用戶選中某個標簽時，該標簽呈現適當的高亮狀態。數量也有限制，不能超過5個，如果存在5個以上的標簽可以將最后的標簽設計成「更多」標簽。

工具欄：工具欄同樣位于屏幕底部，懸浮在當前頁面之上的，并且當用戶不需要使用的時候，可以隱藏它。例如向上滑動界面時，工具欄會自動隱藏。工具欄的內容主要是對當前頁面的相關操作按鈕。

2. 如何選用？

切換狀態

切換狀態：當我們需要同級別界面切換時，應該選擇標簽欄，同時標簽欄的切換通常為一級導航，工具欄的功能僅針對當前界面內容的相關操作。

案例：如下圖，微信讀書底部欄中是關于同級別的視圖切換，所以選擇標簽欄，同時標簽欄也常用于產品的一級導航。而 Safari瀏覽器底部的內容是針對當前界面的操作功能，所以使用了工具欄。

位置狀態

位置狀態：當底部導航始終在界面最上方時，上下滑動都不會消失，則選擇標簽欄；如果底部導航上滑隨之消失則選擇工具欄（說明：也有少數的工具欄是怎么滑動都不會消失的）。

案例：如下圖，我們來看看百度的 App，當我向上滑動界面時，底部導航的位置是不會消失的，所以使用了標簽欄。再看 Safari瀏覽器，因為上滑時底部欄會被隱藏，所以選用了工具欄。

選中狀態

選中狀態：當用戶選中底部某一項時，如果需要高亮顯示且顯示的內容是不同子任務的視圖，則使用標簽欄；而當選擇后，出現操作表等與當前界面相關的操作時，應該選擇工具欄。

案例：如下圖，我們還是來看百度App，當我點擊底部的選項時，切換的同時，當前選中的「好看視頻」需要變成選中的樣式，來告知用戶當前選中的是那個界面，所以使用了標簽欄。再看 Safari瀏覽器，點擊底部按鈕后出現操作表且當前選中的按鈕也不會變高亮，因為不會在當前切換界面，所以選擇了工具欄。

三、Tabs與分段控件/Segment Control

1. 定義

Tabs：Tabs 來自 MD規范，早在 Android 2.0時代，官方的通訊錄App 就使用頂部 Tab導航，可以滑動切換不同視圖。Tabs 里 Tab 呈現的內容可以有很大的差別，而且數量沒有限制，Tabs 不能作為表單的單選組件。

分段控件：iOS 原生控件之一，每個分段作用是互斥的，在分段控件里，所有的分段選項框在長度上要保持一致，同 iOS規范中對于分段控件的分段選項不得超過5個，每個分段選項可以是純文字或者圖片。

2. 如何運用？

來源不同

來源不同：分段控件來自 iOS規范，而 Tabs 來源于 MD規范。

案例：如圖我們來看 iPhone 的日歷界面點擊收件箱，因為是 iOS系統配置的應用，所以界面中切換樣式用的是分段控件，而反觀安卓系統則用的是 Tabs切換。

內容不同

內容不同：分段控件主要起到分割和篩選同類數據，而 Tabs 則沒有這樣的限制，Tabs 里的每一項所呈現的內容可以有很大的差別。另外分段控件更多的是以單選功能出現在表單的使用中，而 Tab 則不能作為表單的單選組件。

案例：如下圖鯊魚記賬中的圖表頁，支持、收入為整個界面展示項目，為了讓用戶查看起來更加方便，把數據分割為周、月、年的不同的數據展示，因為是同類數據切換，所以選擇了分段控件。反觀36氪首頁的 Tabs欄，由于每個內容的差別都很大，所以使用了 Tab欄展示。

操作方式不同

操作方式不同：分段控件需要點擊操作，而 Tabs 除了點擊外還可以通過左右滑動切換不同視圖。

案例：如下圖，網易錢包App 界面中的切換控件，因為在表單中且是極為近似的數據圖，不易讓用戶側滑屏幕切換，需要讓用戶更精準的點擊選擇。所以使用了智能點擊的分段控件，而優酷視頻的切換頁變化都比較明顯，很容易區分，所以選擇了可以側滑屏幕切換的 Tabs。

數量

數量：分段控件數量不能超過5個，而 Tabs 沒有數量限制。

案例：如下圖網易云音樂中的消息界面，界面中因為分類的數量未超過五個（不是所有未超過5個的就要用分段控件，同時也要根據以上說的其他三種情況判斷，這里只針對數量闡述而已），所以可以使用分段控件，而網易云音樂視頻界面中因為分類數量過多且內容上有區別所以選擇了 Tabs。

四、Toast與Snackbar

1. 定義

Toast：Toast 通常出現在頂部和中部，浮于頁面上方，無法對其操作，出現一段時間后便會消失，并且在此期間不影響其他正常操作。

Snackbar：Snackbar 出自于安卓系統，是安卓系統的特色彈窗之一。它是由一段信息和一個按鈕組成，他們會在超時或者用戶在屏幕其他地方觸碰后自動消失。Snackbar 可以在屏幕上滑動關閉。Snackbar 不會妨礙用戶對產品的其他操作。

2. 如何選用？

操作不同

操作不同：Toast 彈窗沒有任何操作鍵，而 Snackbar 是有操作鍵的。

案例：如圖馬蜂窩App 中給作者的文章點贊功能只需要告知用戶，點贊已成功即可，不需要其他操作，所以選用 Toast彈窗。而攜程中當進入酒店界面時，除了告知用戶下面還有更多信息外，還想引導用戶直接查看，所以選用了帶操作功能的 Snackbar。

退出狀態不同

退出狀態不同：Toast彈窗完全是通過超時后自動消失，不存在任何操作，而 Snackbar 可以超時消失也可以用戶主動上滑關閉。

案例：如下圖豆瓣App 廣播界面中，當我點擊換一批后，換好的內容會自動刷新到最前面，所以用戶不需要任何操作就可以看到內容，就可以選用無操作必須等待超時后才會消失的 Toast彈窗。

而攜程App 中的酒店界面，因為更多精彩的內容在下面，并沒有展示出來，為了不讓用戶在滑動瀏覽時造成視覺障礙。所以選擇了 Snackbar，除了超時后自動關閉外，也可以通過滑動界面讓彈窗主動關閉。

組成元素不同

組成元素不同：Toast彈窗主要是由文字和背景組成，也可以額外附加圖標。而 Snackbar 除文字、背景，圖標外還有操作鍵組成。

案例：如下圖得到App 中只需要提示用即可，所以選用 Toast，組成元素選用背景+文字+圖標，而小紅書App 需要加入操作鍵，所以選擇了 Snackbar。

總結

通過上面的分析，大家是不是對這八個組件有了更深的理解呢？

每個組件都有不可替代的作用，如果大家還有哪些不清楚的組件對比可以在文章下留言，之后我會選擇一些整理出來再次和大家分享，感謝大家的耐心閱讀。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

本文教你用仿型和破型的思路，掌握各種插畫風格。

不管是 UI設計中還是營銷活動中，插畫都有很高的出場率，原因并不復雜：插畫比起圖片可控性更強，更容易發揮創意，營造氛圍，傳遞信息。從內容到技術細節，插畫都在某種程度上超過現成的圖片。

作為視覺設計師，我們也常常會接到各種各樣的需求，針對不同的項目和產品繪制插畫，往往項目時間緊張但又需要在插畫展示上有差異性。

但看著網上風格各異的插圖，往往想學習卻又無從下手，該怎么辦？

下面我將從仿型和破型兩個角度來闡述，如何快速掌握風格各異的插畫。

△ dribbble上形式各異的插畫 圖片來源：dribbble

一、仿型

仿型，可說是一個模仿、練習的過程。選擇喜歡的插畫作為學習對象，拆解畫面構成元素，總結代表性特征，了解其思考方式，是一種理解原作者繪畫思路和想法的過程。

我們從形式上來說可以將一張插畫拆解為5個構成元素：構圖、造型、素描關系、配色和肌理。

1. 構圖

構圖是一張插畫的骨架，各個元素按照設計的位置、大小排列在畫面中，就能形成一張畫最基礎的模樣。概括來說，最基本的構圖有如下這么幾種：

環型

環形構圖是非常常見的一種形式感很強的構圖，往往畫幅中心存在一個視覺焦點，圍繞視覺焦點發散/聚攏元素。

對稱

對稱構圖的畫面中存在一個軸線，畫面元素圍繞軸線兩邊對稱。這種對稱既可以是追求強形式感的絕對對稱，也可以是形成一種視覺平衡的動態對稱。

平鋪

平鋪構圖的畫面往往不存在一個明確的視覺中心，所有的元素均勻的充滿著畫面，強調整體的統一性。

S型

S型構圖是非常常見的一種構圖方式，形式靈活多變，相信很多接受過素描靜物訓練的同學一定對此不陌生。S型構圖重點不在于元素的布局是「S」或是「Z」，而是利用錯位布局，營造空間，增強畫面的節奏感。往往 S型構圖有著明顯的層次關系，元素在空間上可以分為前、中、后景。

2. 造型

同樣的元素，在不同的設計師手上畫出的感覺一定是不同的，一個插畫師最明顯的風格特征也往往體現在造型的獨特性上。造型的類別是無法枚舉的，寫實或抽象、松弛或硬朗、精細或概括……對造型感的提升需要我們多看優秀的作品輔以大量的練習。

△ 風格迥異的人物造型 圖片來源：dribbble

3. 素描關系

素描關系這個詞想必大家不陌生，嚴格來說它也是造型的要素之一，單獨提出來是方便大家更好的理解。素描關系由高光、灰部、明暗交界線、暗部、反光、投影組成。一個元素加哪幾種素描關系，怎么加，加在哪，什么肌理，都能左右一張插畫的視覺風格。一般來說，對素描關系處理的越多，畫面會有更多的細節，更趨近于寫實。

△ 對同一元素素描關系的增減

4. 配色

人類的視覺感知系統，對于顏色是第一位的，其次是形狀。插圖的顏色往往能決定觀者的第一印象。對于配色，我們需要注意兩點：

顏色的配比

決定畫面整體色調的顏色，一般占畫面60%以上，余下有30%的輔助色，10%的點綴色。這并不意味著畫面中只能出現三個顏色，但是三個緯度的顏色需要盡量在色相上保持接近。

顏色的對比

一張插畫中，一定蘊含著色彩的對比。

我們知道顏色三要素是：色相、明度、純度。相應的對比也分為色相的對比，明度的對比，純度的對比，當然更多時候是混用的。對比的作用有很多，較強的對比可以使得你的畫面更富層次感和視覺沖擊力，較弱的對比則營造一種柔和自然的感受。

△ 不同類型色彩對比營造的畫面 插圖來源：dribbble

5. 肌理

肌理本是指物體表面的組織紋理結構，即各種縱橫交錯、高低不平、粗糙平滑的紋理變化，是表達人對設計物表面紋理特征的感受，是一種三維的概念。在這里，肌理所指的含義與質感相近，是一種二維概念。我們可以通過刻意制造的筆觸感、噪點、紋理等，使得畫面蘊含豐富的細節，更加耐看。

△ 對同一元素的不同肌理表現

二、破型

破型，就是在充分理解學習對象構成的基礎上，結合自己的風格痕跡和需要表現的內容，形成新的插畫畫面。

好的插畫是形式與內容的完美結合，優秀的表現形式是為了傳遞信息，你應該明確插畫需要傳遞何種信息，并且讓所有的元素為之服務。

缺少內容創作的插畫學習會失去內涵乃至成為抄襲，這是我們一定要避免的。如何更好的結合內容呢？

1. 理解各個元素的視覺表意

環形構圖更聚焦，對稱構圖更具形式感；曲線的運用會讓畫面更柔和，貼近自然，直線與幾何則更具現代感和科技感。先要理解各個元素所隱含的視覺語言，再通過你想傳達的內容去挑選合適的呈現方式。

2. 構建一個故事

想象一個故事，誰（who），在哪（where），什么時間（when），做什么事（what），怎樣在做（how）？

比如說，如果是想畫關于工作的故事，是誰在工作（加班狗），在哪（工位），什么時間（深夜），做什么事（加班），怎樣在做（幾個人討論需求）。

然后我們再問自己一個問題：這個故事要傳達什么情緒（有趣、溫馨…）。

不斷思考這樣的問題，完成從故事到畫面的轉變，畫面里物境-情境-意境的搭建。

3. 視覺轉譯

故事是文字，我們需要將文字視覺轉譯為圖形。

讓我們接著上面繼續想：怎樣造型的加班狗是有趣的，什么表情是溫馨的？加班的桌上應該有什么？怎樣的色彩和素描關系可以表現深夜，又體現出溫馨？ 等等。

答案也許會一點點浮現：深夜這個詞從顏色的緯度，應該是冷色調的；從素描關系的緯度，應該是具有較深的投影，較強的高光，乃至是一個背光。

一點點的細化你的故事，將每一個詞轉化為可見的圖形和顏色，并且快速的反饋到你的草圖中去。當然，這個過程對于每個人來說都會得到不同的結果，自信一點，這才是你創作中最與眾不同的部分。

采用這樣的思路，我們可以快速的創作不同風格的插畫：

△ 左側為作者練習 右側為學習對象

三、幾個建議

1. 關上電腦

在自主創作的階段中，我們一定會遇到想法不夠，不知該如何進行下去的時候，此時應該避免回過頭去看學習的對象，這樣會讓自己的創作變的局限，從而越來越像原作。

2. 足夠細致的草稿

很多人對待草稿是不夠用心的，粗糙的草圖意味著你并沒有真正做好獨立創作的準備。請盡量保證從投影的造型到人物臉部的配色，每一個元素的細節都能在草稿畫完之后心中有數，這樣才能使你避免你對著 AI/PS中的半成品不知所措。

△ 作者平日的草稿

3. 向經典學習

dribbble 上固然能提供許多新鮮的想法和創意，但是不妨去了解一下新藝術運動的插圖，席勒的速寫，達達主義和立體主義的海報等等，你會發現藝術史上如此多大師和流派，都是取之不盡用之不竭的靈感源泉。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

01-

肖形圖形-構成規律：A組成B

肖形圖形就是以單一元素或多個元素的外形共同變化來進行一個新形象的創造并使兩者之間的含義得以連接。如果兩個物體同時改變了原先的形態，并在這兩種形態間產生了一種全新且嚴謹的契合關系，一個新形象也就誕生了。

還記得08年奧運期間的各地景觀嗎？你去看城市市民廣場的花壇，從南到北，無不例外，用鮮花組成一個大大的奧運五環的圖形，要不然就是京的印章標志，或者就是北京歡迎你的字樣。印象最深刻的就是開幕式用擊缶來形成倒計時的數字。

肖形圖形概念是運用十分廣泛的一種創意概念，它好理解，上手快。但不能理解成一個簡單的重復羅列的過程，哪些圖形可以結合構成新的意向？怎么組合更加有趣？怎么控制好元素之間的疏密關系？

當我們面對兩個形態上看似沒有什么關聯的物件時，不妨先從點、線、面、空間這些角度來解析一下，或是再換個角度看，每個物件都可分解成基本的方形、圓形和三角形，這些隱秘的關系都為它們的解析重組提供了可塑的條件。

點的創意表現

在圖形中，任何一個單獨而細小的形象都可以稱為點。點是以視覺中面積大小的感受來確定的，所以點的形狀并不一定是圓，也可以是其他的幾何形體，點是相對于線和面而存在的視覺元素。在設計中，點的排列的形狀、方向、大小、位置、聚焦、發散，能夠給人帶來不同的心理感受和視覺沖擊。點的構成可分為密集和分散兩種不同的視覺類型。

線的創意表現

線是創意圖形的基本要素之一，線可以串聯各種視覺要素，可以分割畫面和圖像文字，可以使畫面充滿動感，也可以在上穩定畫面。線與線之間的排列可以使畫面具有節奏感，線的放射、粗細、漸變排列可以體現三維空間的感覺。

線的編排構成分為有節奏、有情感、有空間關系等的線。每條線都有自己獨特的情感存在，將不同的線有節奏地編排在板式中就能形成各種不同的效果。作品通過線的空間處理，利用獨特的視覺效果，能表現強烈的整體感和形式感。

面的創意表現

圖形設計中的面由于輪廓的作用，使形態從周圍空間中突顯出來，從而比點、線的視覺沖擊力更大。在進行面的創意表現時，要考慮形狀與面積的對比、間隔與面積的對比、面積與面積的對比等因素。面是視覺元素創意的基礎，可以運用不同的方式來表現。

02-

同構圖形-構成規律：A+B組合

同構圖形更注重于體現視覺意義上的藝術性和完整性，通過變形、錯位、結合等種種手段來制造出虛擬的物象。同構可以理解為是一種形態上的置換行為，即是將組成某物件的其中一部分特定元素與另一種本不屬于其自身卻具備形態上相似之處的元素進行巧妙替換，相互借用，同生共榮，形成新的異象，產生出新的寓意和獨特的視覺趣味。

同構圖形在設計運用中最為廣泛的一種圖形概念，但在運用時我們必須注意做到自然巧妙而不生硬。如果總是一味的將一堆相關元素胡亂堆砌在畫面中，這樣的畫面，細看之下實在是索然無味啊。

(一半寫實一半創意)

一個完整的元素一分為二，一半保持元素原來的固有形態讓用戶保持認知，另一半就可以進行創意設計。案例一中是用直白的文案直接進入主體，使用手寫字體切近用戶的同時也彰寫了格調；案例二中為了體現科技感，運用了電路板進行內部重新構造，增加科技感的同時也不失可愛。

(圖形加文字)

圖形加文字，通過提取文案，在圖形設計中保留主要的重點文案，很明確的傳達品牌的內涵，文字在圖形中也盡量按照圖形的走勢進行排列。案例中的文案都傳達了一種積極向上永不服輸的態度，運動員們也為了勝利而拼搏，體現的耐克的品牌文化。

(雙重曝光)

雙重曝光從嚴格意義上講不屬于同構圖形的一種，但是它也是同構兩張圖片兩兩相合成形成的一種特有的風格，由于這種風格也算大熱的風格。我們在制作雙重曝光的時候盡可能的保證人物形態的完整性，如上圖的案例中雙重曝光的畫面很清晰，主次也很分明，很好的保留了人物的五官的完整性。

(APP節日閃屏)

(點)

(線)

(面)

(創意)

(插畫)

作為UI或者產品設計師，我們在設計界面中會很少運用肖形圖形和同構圖形進行區創意。但是在APP閃屏頁中，我們就可以很好的運用的肖形圖形和同構圖形。可以很好的與品牌LOGO圖形相結合，更好的為品牌宣傳去服務。在這方面做的最好的當屬QQ音樂這款產品，它很好的利用品牌圖形與點、線、面、插畫相結合進行創意，很好的體現了節日的主題和氛圍。

總結-

肖形圖形和同構圖形在設計中運用廣泛，通過圖形創意練習可以增加我們創意思維，也可以鍛煉設計總的主次層級、疏密遠近的關系。相對復雜的視覺圖形元素能處理得當，相信在界面排版中也能很好的分析出層級和層次之間的關系。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

這次的采訪我們聊得很細，細到某一個交互的設計思路的變遷，以及為什么最終是以那種方式呈現在 MIUI 10 之上。我相信，無論你是對設計還是對手機系統存在好奇，一定都可以從這次訪談里得到一些有益的啟發。因為我們沒聊虛的。

△ MIUI設計團隊

一、徹底干掉虛擬鍵的全面屏手勢是不是太激進了？

△ 虛擬鍵不該存在

是不是太激進我們還是根據用戶反饋來判斷，這套手勢因為沒有任何虛擬鍵的提示，剛開始確實需要一兩分鐘來學習，但大部分的用戶反饋是：用了就回不去了。目前從客觀上來講，安卓手機里的全面屏手勢，MIUI 確實是最好用的，不是我們自己說，而是從各種用戶反饋，包括微博上很多專業數碼博主的反饋得來的結論，很多人在主動地說這件事。

但是在手勢的設計上，我們是踩過很多坑的。

我們嘗試過很多版本的全面屏手勢，最初還沒有大膽到想干掉所有虛擬鍵，而是想在虛擬鍵上做文章。開始我們覺得那個區域很多時候3個 button 可能用不上，比如看書的時候，你可能只需要一個返回鍵，所以我們考慮的是在某些特定的應用場景里把一些用不到的虛擬鍵收起來，這是做減法，減法做完之后，原來虛擬鍵的位置就空出來了，我們覺得這個空間是浪費的，又在想應該怎么利用起來，這是早期一個很復雜的思路。

△ 早期帶橫桿的產品

后來我們又想是不是可以把3個鍵整合成一個虛擬鍵，當初做了一個 Demo，把3個鍵集合成一個橫桿，那個時候還沒有看到 iPhone 的模型，在 iOS 的全面屏手勢出來之前，我們就做了一個橫桿子，其實是受 Palm 的啟發，這根桿子很早之前 Palm 就有了，蘋果可能也是受 Palm 啟發。我們設計的是在那個桿子上橫滑返回，然后上滑回桌面，很接近蘋果目前的處理方式。但最終還是把這個設計給放棄了，去掉的原因是：提示桿一開始是有比較好的引導操作作用，但一段時間后，用戶就不需要了，另外就是視覺感官上橫桿并不好看，工業設計上好不容易才能把手機下巴縮短幾毫米，你一根橫桿又全給它加回來了，這其實背離了「全面屏」的初衷，在設計上是一種不得已而為之的妥協。

否定橫桿之后，我們才真正全心考慮干掉所有虛擬鍵的方案。但沒有虛擬鍵，就對我們的交互設計提出了很高的要求，首先，這個手勢的出發點一定得非常符合直覺，所以不管是返回上一級菜單也好，回到桌面也好，這必須是兩個最基礎的操作（橫滑、上滑），在這兩個基礎操作上略做停頓，我們就可以進入應用間的快切和多任務管理，我們用一種非常輕的設計把它附著在兩個基礎交互上。徹底干掉虛擬鍵這件事最早我們沒有太大的勇氣去做，最后做出來反倒更貼近用戶操作手機的直覺，有一種柳暗花明的感覺。

△ 簡潔易用的MIUI全面屏手勢

二、MIUI 10的整體視覺設計遵循了什么思路？

△ 為全面屏而重新設計

在天氣、日歷、安全中心等等 MIUI 10 的各個角落里，其實都把原來分段式的畫面結構做了一個全面屏化的設計，讓頁面不要有很強的割裂感。讓內容直接浮在屏幕上，用戶第一時間得到信息，去掉干擾元素。

在非全面屏時代，手機有上下兩個比較大的黑色邊框，在視覺上天然是分段式的，之前屏幕內的多色塊設計其實是對應了手機外觀的這種「分段」，它還是和諧的，但原樣搬到全面屏手機上，就顯得是把一整塊完整的屏幕生生分割成了幾段。

另外就是原來有一些插畫類型的風格和表達手法，想讓整個畫面有一些親和力。但是因為我們的用戶覆蓋面很大，兩三億用戶，會有一些年齡層的用戶覺得原先插畫形式有些稚嫩感。所以我們覺得到10這一代，整個系統應該更成熟、更普適一些，我們更傾向于做一個對任何人來說都很舒服的視覺設計。

三、這次整體視覺風格有比較大的變動，有沒有什么地方特別花費精力的？

舉個特別細節的例子。MIUI 10 的時鐘，有一部分用戶會有疑問：在 MIUI 10 里，可見的大多數頁面是亮色，為什么進入時鐘時卻是黑色的？我們其實也在白色和黑色反復了很多次，調研也做了很多次。最終我們認為更重要的是時鐘的使用場景問題，比如說你晚上在睡覺前拿起手機定個鬧鐘，在夜晚或者室內，從手機桌面進來打開時鐘，如果進入一個很亮的頁面，它即便是好看的，也可能會刺眼。所以我們還是選擇了黑色，當然那個對比度到現在還在調整，我們想把視覺上的美觀和使用的舒服統一進來。

四、MIUI 10的自然音效系統是發布會上的一個驚喜，你們為什么會想到去做音效？

我明白你這個問題的意思，大部分人的手機是長期靜音的，音效這個東西，好像已經被完全忽略了。但是我們覺得，哪怕只有1%的用戶打開了手機鈴聲，他也應該感受到悅耳而不是打擾和膩煩。如果我沒記錯的話，我們是手機廠商里第一個針對音效做系統性設計和優化的，我們從「百聽不厭」的自然系音效出發，和得過格萊美獎的頂尖音樂人合作，還針對手機音腔的特性對音效做了特別的優化。

發布會上洪鋒把自然音效系統作為一個彩蛋來講，這是我們送給小米手機用戶的一個禮物，是讓我們驕傲的產品。我不確定有多少用戶會發現這個產品，有些人可能因為長期靜音他沒有機會接觸到這個新設計，但它是一個能帶給人驚喜和溫暖的東西。

五、MIUI的設計理念是什么？

有些人可能會覺得設計是一個偏感性的、依賴審美的東西，但是對于一個好的系統設計，我會從視覺、動效、交互、字體、音效，五個維度的去衡量它的完善程度。

我們用一個人來做類比。視覺，就是感官層面的，比如說你見到一個人會說：這個人很帥；第二就是交互層面的整體邏輯，就好比你跟他說話，發現他的腦子清楚；第三就是整個動效的層面，這個人的肢體語言很優雅；還有字體，我們是從 MIUI8 的時候就開始做了，為了讓大家有更好的閱讀體驗，讓人覺得你這個人很有涵養，這已經深入到非常細節的層面了；最后，我們加了一個聲音的系統，就是你說話的時候，聲音還要好聽。MIUI 在設計上一直是往多個方面進化，我們并不滿足于做出某個漂亮的頁面或者交互，而是追求整個體驗層面的飽滿。

做設計過程中，我們可能會嘗試各種各樣的方案，也有靈光乍現的時刻，但我們會從多個維度完整地去考量這個設計成果，避免做出一些只是「看上去很美」的自嗨的東西。實際看起來、用起來、聽起來怎么樣，我們想從這幾個大的感官維度上都能達到體驗層面的滿足。

舉一個例子：比如說之前我們為了快去掉了一些解鎖的動畫，用戶一按指紋解鎖，直接進到桌面，這種確實是非常的快，但這種感覺就像什么呢？就像你一按電梯，門就消失了，你進了電梯，它咔一聲又關上了，是很快，但是這種觀感是不太好的。它沒有一種歡迎的意識，就只是把東西呈現給你。這一次我們希望把這個東西改回來，當你進入手機桌面的時候，圖標應該有個簡短的優雅的動態，有一個進場亮相的過程。

△ MIUI動態圖標

MIUI 其實已經非常流暢了，在這種地方去掉應有的動畫，是可以快100毫秒，但這種快是沒有意義的。讓用戶舒服的看到這個東西，這才是整個體驗的核心。所以我們這次就定下一個目標，和工程團隊一起，把這種為快而快的東西給它削弱，用戶要的是更優雅的體驗，而不是那種無感知的快100毫秒。

這個事情說起來不大，但其實是一種理念層面的進步，大家已經從那種無意義的純數據比拼里解脫出來，更注意到整個體驗層面。我們這次會把上面說的進場動畫加進來，能讓用戶點亮屏幕的時候感覺到更加的舒服，能夠感覺整個系統的「肢體語言」更加優雅。

六、對于MIUI 11的展望？

之前的非全面屏時代，手機屏幕在16:9的形態下，UX設計上其實已經極度成熟。手機的很多功能和設計的出新，很大程度上都是在迎合一些小眾的需求，可能一部分人覺得很喜歡這個設計，但它并不普適。

全面屏手機的出現又將設計師的注意力從這些小眾需求拉回到了一個大眾需求：怎么在全面屏手機上做出更好的體驗。因為智能手機用戶遲早會將手中的設備換成全面屏設備，手機廠商如果只是簡單地把原來16:9的畫面改成18:9，而不根據硬件特點做真正的深度定制，那就會離用戶體驗越來越遠。

手機系統的未來我們認為也會是這樣的趨勢，軟硬件的結合會更加的緊密。在這一點上，MIUI 有這個意識，也有行動，目前是走在比較前面的。

MIUI10 落版后，我們也在考慮往這個方向去深化。我們不會特意去考慮11跟10之間非得做出什么大的區別來，相比這個，我們更關心的問題是：什么是用戶真正需要的設計。

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

還在為APP UI信息圖表界面設計而犯愁嗎？來看這就夠了……

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

圖表是顯示大量信息的一種重要表達方式，良好的圖表設計能夠傳達復雜的統計數據，并讓用戶易于理解。圖表設計可以專門分出一個設計類別：信息圖設計。

不過，信息圖設計更多針對桌面端，很少考慮移動端，所以，移動端的圖表設計挑戰性更大。在小的屏幕上展示數據或信息，只能做一些取舍。

Android - 統計數據圖表

Arco的圖表和圖表

股票應用設計

Analytics（分析）

移動儀表盤

優化 - 統計

移動UI中的圖表和圖形

金融應用

財經和新聞應用

支付帳單

線圖頁面

分析應用頁面

分析應用

健康應用

自行車比賽

威脅儀表盤設計

儀表盤設計

圖表

足跡App

管理模塊

紫色的圖表和圖形

運動追蹤應用

關于鐵的圖

Noblyn App重新設計

投資平臺

跟蹤應用

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

是百度專門為重大節日或紀念日設計制作的動態百度Logo

我們特此盤點了2017年的百度Doodle設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

但是，今天我并不是專門只針對某個店鋪做視覺統一的設計分享，而是想從全局的角度去給大家闡述這個問題，畢竟，你得知道自己為什么需要做視覺統一，你才可能做好視覺統一，所以這個問題就不單單只是指店鋪了，而是關于品牌與用戶之間的問題。

因為不管是店鋪也好，平臺也好，他們其實都是為賣貨服務的，它們與品牌產品之間其實都是合作關系，最終其實都是要鏈接到用戶身上的，而設計師要做的，歸根結底都是處理好它們與用戶之間的關系，幫助達成交易。

所以我將要分享的關于視覺統一的方法，就不單止是適用于店鋪了，而是品牌、平臺、店鋪都適合的。

按照慣例，我還是先給大家列出一個提綱，方便大家理解：

• 為什么需要統一視覺風格？
• 統一視覺風格的方法有哪些？
• 統一視覺風格的注意事項及總結

接下來我就逐條展開給大家說一下這其中的奧秘吧！

一、為什么需要統一視覺風格？

當我們提到統一視覺風格這幾個字，不知道大家能聯想到什么？或者能聯想到什么畫面什么公司什么產品呢？在回答這些問題之前，我還是先給大家舉一些例子也許你就明白了。

比如前幾天我無意中打開了淘寶app，然后剛好看到了2018年淘寶新勢力周的一系列賣場頁面：

大家知道像淘寶天貓京東這樣的平臺，每年各種賣場促銷活動是很多的，而且每一場活動都需要容納成千上萬的商家和數以萬計的商品，但是，所有這些東西都卻只是通過一塊液晶顯示屏展現在消費者面前，那么這時候就是我們設計師發揮作用的時候啦。

這時候設計師需要做的事情就包括以下幾個方面：

• 要保證活動頁面里能把所有東西都容納進去；
• 要保證頁面是方便顧客瀏覽的，所以要有規律可循；
• 要保證頁面是可以吸引顧客一直逛下去的，所以頁面有規律的同時又要有所差異，視覺上不枯燥，不然會視覺疲勞；
• 要在顧客心里和腦袋里建立某種印象，找到存在感，以免被顧客遺忘；
• 既要保證平臺活動整體的調性和諧性，又要為不同的商家提供最恰當的展示機會，所以視覺表現形式要合理；
• ……

總而言之就是要權衡平臺、商家、顧客三者之間的關系和利益：顧客買的爽，商家賣的爽，平臺名利雙收。

那么這時候保持頁面視覺統一就很有必要了，因為視覺統一就有以下非常重要的幾點作用：

1. 強化品牌或事件在用戶心中的印象

因為幾乎所有的品牌都需要做的一件事情就是占領用戶心智，就是要讓用戶在眾多的品牌選擇里有自己的一席之地，不要把自己遺忘了，所以它需要不斷的出現，保持存在感。

一個活動每年去做，一個電影每年都出續集，一個產品每年都會出不同的系列等等，都是同一個道理，都是在強化自己在用戶心目中的印象，保持存在感。

提到這個，我平時每次搞活動都會提醒大家不要經常換頭像或微信昵稱，我讓大家多來留言其實就是這個道理，因為我每天要面對的那么多人的頭像和名字，如果你長期不換頭像并且經常來留言，那我肯定會記得你；但如果你經常換頭像，并且留言次數還少，那我鐵定就不記得你了，因為你沒有強化一個符號在我的腦海里啊，明白了吧。

2. 讓事件變得有序有規律可循

就像我們辦運動會，不同的隊穿不同的衣服、喊不同的口號等等，即便是隊里的人走散了，你看一下隊服或對方喊的口號你就能辨別出是自己人還是別人了是吧。

再比如你去超市貨架上拿飲料，正是因為這種視覺統一的作用，所以你才能很好的辨認出自己要買的品牌產品，而不至于拿錯了，反過來對于品牌也一樣，自己內部的產品之間是有統一的視覺形象的，同時又是跟其他品牌相區分開來的，所以才可以保證顧客不買錯。

這些道理運用到頁面設計上也是一樣的，讓顧客方便逛，同時別逛錯了地方。

3. 提高相關人員的可執行性

因為像這種大型的活動，需要大量的人力投入，就拿設計師來說，一般都是某個主設計師出來一個設計方案，然后這個方案不僅要能達到以上提到的要求，還必須要是能保證其他設計師能夠以這個設計方案的模版，去執行剩余的幾十上百個頁面，工作量非常之大。

二、統一視覺風格的方法有哪些？

前面我們講到了統一視覺風格和形象的必要性和重要性，那么接下來就是大家最關心的如何統一視覺形象的問題了，所以我依舊會從好幾個方面以舉例的方式給大家做講解，你就明白了。

不過在這之前，我還是拿一張圖給大家看，還是淘寶新勢力的這張圖：

你在這個畫面里看到了什么？這個視覺畫面里都包含了哪些東西？

嗯，我看到了模特、文字、圖案、各種顏色，還有布局、排版、以及所有上面的內容匯聚在一起所組成的一種風格。

那所謂統一頁面的視覺風格，也就是說只要保證以上所有提到的這些東西，我在另外的頁面里也至少能找到一項是類似的，那我們就很容易將它們視為是具有共通性的頁面了，也就達到了視覺風格統一的目的。

以下面這幾個淘寶新勢力分會場的頁面為例：

你應該注意到了，這些頁面雖然顏色不一樣，但整體看視覺卻非常統一，同時細看又有些差別，其原因就在于以下幾個方面：

• 不同的頁面對應的色相不同，但是明度和飽和度是近似的；
• 不同的頁面對應的文案不同，但是文案的字體樣式、布局排版是一樣的；
• 不同的頁面對應的氛圍點綴元素不同，但是氛圍元素的風格、質感、手法等等是類似的；
• 不同的頁面對應的點綴元素不同，但是每一個頁面里的點綴元素都是跟相應的主題、模特、文案等等相呼應的。

所以你才會有這些頁面具有統一的視覺風格的印象，包括其他會場的頁面，雖然做了一些小調整，但是依然可以看得出來是統一的視覺風格：

因為這里運用到了跟上面同樣的原理。

不過這種手繪風格與模特相結合的設計形式我以前也給大家分析過，我這里就不深入舉例了，大家可以看看圣保羅藝術家 Ana Strumpf 為很多時尚雜志所做的插畫封面就能有所體會：

這種手法給人俏皮、時尚、新潮的感覺，非常適合追求趣味個性而又不失品味的心態年輕的群體，所以這一次的淘寶新勢力周大概也是出于這種新潮人群定位考量，才會做這種形式的設計吧。

而且這種扁平質感半插畫性質的設計形式幾乎是很難過時的，非常前衛和耐看。

所以到這里你應該就好理解了，一般來說，我們有以下5個途徑可以達到統一視覺風格的途徑。

1. 提煉某種風格，重復使用

比如你看今天淘寶新勢力的一些會場頁面，視覺風格就非常統一，一眼就看出是實體模特＋手繪圖形相結合的風格形式，在模特臉部做一些圖案輪廓線，然后模特周圍點綴一些手繪圖案做氛圍，有點達達主義的感覺。

2. 建立某種品牌色，重復使用

當我們重復看到某種顏色跟某個品牌或產品同時出現，時間久了就會自然而然的把這個顏色和品牌聯系在一起，從而產生條件反射，只要看到某個顏色立馬就會想到這個品牌，只要聽到這個品牌的名字腦海里就會出現某種顏色。

這其實就是通過建立某種品牌色達到視覺風格統一的目的從而讓品牌在用戶心里建立起了這種色彩印象。

比如蒂芙尼藍：

所以，任何頁面，任何場所，任何產品上只要出現了這個蒂芙尼藍色，用戶都會默認他們是相關聯的：

再比如，可口可樂紅：

當然了，色彩種類那么多，有的品牌或店鋪的品牌色并不是單一的，而是多彩的，這都沒有什么限定。

那這個如果是運用到頁面設計或 Banner 設計里的話，這種品牌色是一定都需要出現在畫面里的，至于色彩比例就因需要而定了，而且今后只需要出現這種顏色，就能反過來達到視覺統一的目的。

3. 提煉某種視覺元素，重復使用

所謂視覺元素，其實就是指一切你能看到的想到的元素，所以這里的視覺元素也是指多個方面的，比如某種圖案圖形、某個物件、某個文字、產品、模特、logo 等等其實都算是視覺元素。

那說到視覺元素的運用，我腦海里印象比較深刻的2個品牌就是初語和天貓，前者是店鋪，后者是平臺。

我們可以看看品牌升級以前的初語，它有一個讓人印象非常深刻的視覺元素，就是她的模特和眼部的妝容：

所有的模特都保持了一致的妝容特點，氣質也是類似的，當然你也會看到很多他的設計都是會與藝術名畫相結合，這些都是它的特點，并且加以充實用，就給人建立了很深刻的印象，你只要看到這種模特妝容或者畫面，你就知道：「噢沒錯了，這是初語」。

那天貓也是一樣的，每年雙十一這個天貓頭的元素就會以各種形式露面，而且不止是在雙十一，可以說是相當強大的視覺符號了，你想忘都忘不掉它：

2017年天貓雙十一宣傳海報

△ Budweiser 百威

△ GUERLAIN 嬌蘭

△ Beats

這種通過某種視覺符號來統一視覺形象，重復使用從而加深用戶印象的方式在很多其他地方都有用到，比如每一個蘋果手機，每一次開機，都會出現同樣的開機畫面：白底＋黑色的蘋果 logo。

4. 打造品牌專屬的IP或寵物形象，并重復使用

這就跟品牌給自己找了個的代言人一樣的效果，只要這個形象出現了，你就知道這個是xxx品牌。

比如店鋪，三只松鼠就是這么干的：幾乎所有的頁面里都會出現三只松鼠。

比如平臺，京東有狗，天貓有貓，蘇寧也有獅子等等，電商界儼然是一個動物世界。

再比如珠寶品牌，卡地亞Cartier 有獵豹：

這只獵豹經常出現在各種品牌宣傳廣告里，或者制作成各種首飾，用戶看到獵豹就會想到卡地亞。

5. 提煉某一句口號，重復使用

既然我們前面提到了視覺元素，那么文案或口號其實也是畫面里的其中一種視覺元素，所以我們再以2017年天貓雙十一宣傳海報舉例：

△ Budweiser 百威

△ GUERLAIN 嬌蘭

△ Beats

這里面的「xxx祝你雙11快樂」 「天貓雙11全球購狂歡節」等等口號文案，重復使用，其實就起到了這種畫面視覺統一的作用。

而且這種方式也在很多地方有運用到啦，比如你看的很多動漫、電視劇，總會重復出現一些臺詞，嗯，說到這里，我想到了小時候看的一個動畫片《寵物小精靈》，每集火箭隊出場臺詞都是這幾句：

然后每集結束的時候總會有那么一幕，喵喵被拋到空中然后喊出一句臺詞：「我們還會回來噠～」。

你看這種重復口號的威力多么可怕啊，一二十年了還讓用戶印象深刻呢。

不過，其實最后列舉的這三點其實都可以稱作是視覺元素的重復使用啦，至于原因我也在前面作了解釋，而且以上所有的方式其實都是可以結合運用的，并不是孤立存在的。

還有，大家注意到了嗎？我在每一條后面都加了4個字「重復使用」，因為就算你有了自己特定的視覺元素、有屬于自己的寵物形象、有自己的品牌色、有自己的風格等等，但是你壓根就不露面，你還特別低調藏著掖著不展示自己，那誰還記得你啊。

說到這個，我想到了異地戀之所以容易失敗，不也是差不多道理嗎？你和男/女朋友三五年不見面沒有關系，沒法手拉手親親嘴也沒有關系，但是如果你們壓根就不聯系，不出現在彼此的視線里，那感情自然會淡的呀，等于是白白給了別人可乘之機。

所以我一直都覺得品牌和用戶之間其實也是一樣的道理，就是在「談戀愛」，而不是做生意，至于你們之間是談的什么類型的戀愛，那就看自己本事了。

總結

之所以我們需要做視覺統一，其實就是為了強化我們在用戶心理的印象，讓他們記住我們，記住我們是很有規范的，靠譜的，可信賴的品牌印象等等，并且還要重復的出現在用戶的視野里，那怎么出現呢？方法就在我上面列舉的幾條內容里啦。

當然，你也得控制一個度，不要過份的運用這些方法，不然會招致用戶反感的。

想想有的男孩子可以成功討女孩子歡心，而有的卻被女孩子嫌棄的不行，知道原因了嗎？道理都是一樣的啊。

你看下面這些世界杯期間的廣告，畫面 low，口號 low，重復次數又很多，用戶記住是記住你了，但真的挺煩的。

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