如何在 Material Design 基礎上添加「品牌形象」？

01-05

官方建議: Expressing Brand in Material.

來自 Liam Spradlin 的建議: Yes, Your Brand Can Survive A Material Redesign.

來自蘋果的正面範例: Apple Music.

簡短總結:

採用具有品牌特色的配色方案;
採用具有品牌特色的圖標;
採用符合品牌特色的字體;
採用符合品牌特色的動效;
如果內容是由自己定製而不是用戶生成的, 那麼採用符合品牌特色的圖片與排版;
創造只屬於這個品牌的獨特交互.

詳細說明:

首先, Material Design 鼓勵大膽, 明快的配色. 從 Android 4.4 開始, 系統 UI 的顏色就變成了中性的白色, 在 Android 6.0 中還為明亮的配色設置了深色的通知欄樣式. 合理地用品牌色填充你的應用, 可以強化品牌形象. 當然, 如果你的品牌色比較刺眼, 那最好還是考慮其他的方式;
為什麼我們會覺得 Apple Music for Android 充滿濃濃的蘋果風格但又並不與 Material Design 衝突? 很重要的一點就是, Apple Music 採用了符合蘋果風格的細線條圖標, 與此同時, 這些圖標的意義表述又符合 Android 的一貫規律 (而不是直接從 iOS 那邊拿來就用), 有力地加強了品牌形象. 另外, 除了應用內的圖標, 主屏圖標也是很重要的一環. 而採用千篇一律的圓角矩形或者圓形作為應用圖標外框, 對於圖標的辨識度而言顯然沒有任何幫助.
Material Design 的默認字體是 Roboto/Noto, 這是一個很不錯的屏幕字體系列, 但作為注重閱讀體驗的字體誕生的他們並沒有什麼令人印象深刻的特色. 如果你的品牌有定製字體, 那麼不要猶豫地使用吧! 如果你覺得其他字體比起 Roboto/Noto 更適合你的品牌, 那麼也可以試著替換 —— 當然, 這一切的前提都是不影響應用的使用體驗. 很多品牌的定製字體並不適合用於正文, 所以他們很克制地只在標題或者 Logo 中使用, 而即使僅是如此, 使用特色字體與只用默認字體之間也有著天壤之別;
Material Design 本身提倡的是以 ripple 為核心的動效, 但這未必就符合所有的品牌. 如果你的品牌有一套獨特的動效, 那不妨試著將其與 Material Design 結合. 當然, 很多時候這一點會與 6 配合出現 (或者說, 如果你做了品牌專屬的交互方式, 那麼幾乎可以肯定會衍生出與之配套的動效);
獨特的內容排版也是體現品牌特色的重要一環. 還是以 Apple Music for Android 為例, 在 Apple Music 中, 無論是 For You 的大圖列表, 還是某個歌單里的推薦介紹, 都經過了一番設計, 和其他音樂播放應用有著顯著區別, 而與 iTunes/Apple Music for iOS 保持了一致. 這對於鞏固 Apple Music 的品牌形象而言大有幫助; 而哪怕應用中的內容是由用戶生成的, 你也可以通過調整默認的排版樣式使得其具有品牌特徵 —— Medium 在這方面就做得非常不錯;
品牌專屬的獨特交互可以說是樹立品牌形象的大殺招. 如果你創造出了獨一無二的交互方式, 甚至可以完全凌駕於 Material Design 之上, 以其作為品牌形象的核心. 例子已經被用爛了的 Pinterest 和 Flipboard 就是成功的典範.

建議閱讀一下本文：https://design.google.com/articles/expressing-brand-in-material/

下面簡單摘錄一些虛構案例和內容

Pesto：一款現代化的食譜 app，旨在幫助用戶探索、分享和收藏食譜。對於年輕人和對設計感興趣的群體來說十分有吸引力。界面的設計可以喚起翻閱漂亮的紙質食譜一般的體驗。

重點：圖標，圖片，色彩

Crane Air：簡潔明快的航空公司應用，迎合常客計劃的需求。

重點：字體排版

Pinch：一款圖片軟體，幫助用戶保存和探索靈感。特色是靠雙指捏合，將圖片歸類到對應的分類里。

重點：動效（其實我覺得是這個UX本身，畢竟名字就叫捏）

Abisko：一款關於滑雪度假村的 app，可以幫助用戶檢查目的地狀況、購買纜車票和預定住處、直升機遊覽等。界面設計的風格非常強烈，針對極限運動和街頭/溜冰/滑雪愛好者的喜好做了設計。

重點：圖標，圖片，色彩

Shrine：一款購物 app，面向年輕的 DIY 愛好者和對獨立小批量零售感興趣的人。設計風格輕快，注重商品本身。

重點：圖片，色彩

The Fortnightly：一款新聞 app，注重高時效性和熱點新聞。設計風格古典，有報紙味兒。

重點：字體排版，色彩

下面是一些私貨：

從個人經驗來講，圖標和色彩是重頭戲。這是讓用戶一眼看到就能聯想到品牌形象的東西。

產品的圖標是一方面，這個是 Branding 方面的老話題了，不再陳述。如果要為 Material Design 設計產品圖標的話，可以從摺紙和拼貼的角度來思考。切記不要打亂系統的全局光源規則。Google 的人甚至真的做了紙模，靠實際打光來研究。

對於 Material Design 而言，還有一種圖標的使用需要注意，那就是小圖標。跟 iOS 平台常見的細線鏤空圖標不一樣，Material Design 的圖標細節更少，使用相對比較少的線條細節，僅使用簡單的直線、方塊、圓來構成圖標，整體視覺效果直白而厚重，富有個性而又有著統一的整體風格。給自己的產品做一套原創的圖標，但是同時符合 Material Design 的原則是加分項。以下是一些系統的圖標，注意觀察圓角和直角的使用。

Material Design 的顏色使用相比原本 Holo 時期所倡導的方式濃厚了很多，每一個 app 使用的不同色板，給用戶營造了獨特的使用氛圍。通常 Material Design 會使用一種主題色，一種強調色，向用戶呈現自己的品牌特徵（主題色）的同時，創造出對比（強調色）。其餘的部分一般使用亮色或者暗色主題所規定的色板。自己自定義也是可以的，但是小心把 Material Design 裡面重要的元素上下層級關係玩壞。

字體和排版在平面設計裡面是十分重要的一環，不過 Android 平台上中文環境並沒有大的空間給設計師施展拳腳。Roboto 有多種變體，每種變體有多種字重，可以傳達微妙的 hierarchy 關係。但是中文字體很局限。除非字體真的對品牌的形象至關重要，不太會有人願意為了集成個字體而大幅度增加 apk 的體積的。不過這塊可以和圖片並列使用，可以把字體放到圖片里。

圖片對於呈現品牌特質也是有至關重要的作用的。上個例子，Star*ucks

除了那瓶子飲料……以上，想到啥再補吧

關注這個問題好久了，也沒新增答案。我忍不住說說自己的拙見、

這個問題本身就有問題，『只要本身的品牌形象延展性做的好就不愁添加不到app里』

還有同品牌其他的產品比如網站 pc端視覺風格的統一。比如 qq 和淘寶（雖然不是MD）

半個多月前，設計圈熱議的希拉里競選Logo ，被選用的方案被認為不好看。 H上加一個剪頭。後來看了看希拉里的競選網站，發現這真的不是一個logo這麼簡單。

傳送門https://www.hillaryclinton.com/

然後再看周邊商品，很震驚。

還有很多人提到知乎3.0看來大家怨念很深，我們都愛劉看山，但是從視覺風格上講，劉看山和知乎網不統一，好像是網友選出來的.... so 在知乎網站上和app里看不到劉看山的影子。

增加一個優秀案例，網易做的個性化閱讀產品 Light ，這方面做的很好。

新版知乎客戶端的MD，很有形象吧。。。

參考知乎 Android app 3.0

總之比Modern UI (Metro Design)容易多了

那就不要完全遵循MD

首先去了解http://www.google.com/design/

了解Google design。

其次，設計是非常靈活的事情。MD其實具有很強的可塑性，雖然規範定了很多，但是其本身也說了在需要的情況下可以改變。

最後看看能體現品牌的元素：

配色方案;

LOGO;

文案;

動效;

圖片

綜合起來說就是產品氣質的體現，產品VI的設計。

解釋一下什麼叫產品：比如唯美的氣質高冷的氣質比如豆瓣的文藝氣質比如QQ安全的乾淨輕量安全等等這就是產品的氣質

VI設計就是從視覺角度多方位展示品牌，比如建築書函文具等等

核心就是最後說的這兩點。