♝點擊上方「互動設計學堂」關注我們,送電子書
我們最近決定把我們的郵件 app 做一次改版換換風格，想要讓我們的 app 變的更吸引人跟得上潮流趨勢，我們考慮加入谷歌的 material design 原理進設計。
但是我們也意識到，很多 app 的設計遵循了 Google 的設計規範，然而他們看起來，好吧，很像 Google。聰明的品牌借用一部分 Google 的元素和理念，但是仍然緊緊跟隨最新設計潮流趨勢又保持自己的品牌優勢。
設計我們的新郵件 app 時，我們認為這是個深刻的問題。我們要在感知上堅持 Material Design 的核心原則，運用動畫有意義、大膽的去創造——而不是照搬 Google Now 和 Inbox。
所以我們想在這裡和大家分享兩個我們從創建 UI kit 的過程中學到的：第一，在 material 風格下的設計想法。第二，這套 kit 本身——你可以在文章結尾處下載。
顏色
Google 長期以來以大膽的用色而出名，從他們無處不在的標誌，到他們的戶外設施。Material design 使他們的調色板變的更豐富：輔助、飽和度為基礎的範圍，但是焦點仍放在缺少漸變的大面積的色塊——很多年來主導著網頁設計。
雖然很多人談到設計趨勢時，趨向於將漸變、陰影、擬物化混合，但是 material design 鼓勵設計師使用明顯的陰影，去摹擬真實世界的感知。
因此，區別和 Google material design 的不同，我們呈現給用戶的是引人注目的漸變——包括 app 的主要圖標。漸變顏色的組成的從 material 設計的調色板，但是我們的混合方式和 Google 不同。然後我們使用了有一點點透明的浮動的按鈕。在信封口摺痕處用了強烈的陰影。
因為 material design 需要大膽、高對比度、高飽和度的顏色，這意味著我們要使用一個超級廣泛調色板去填充那些設計元素。但是顏色不需要完全根據 material design 的標準，顏色只是要完成它們的目標——看起來是有意義的。
對於我們的郵件 app，我們最終決定使用一個相對簡單的、相似的顏色調色盤。並且使用陰影和漸變來區分 Google 的設計規範。
字體
Google 顯然在品牌中獲取字體的力量。Google 為安卓系統特別定製了字體，最開始是 droid sans 和 serif，現在是 roboto 和 note ——不僅是界面看起來乾淨統一，而且也增強了 Google 的品牌。而且 Google 走了很聰明的下一步，增強 roboto 字體的 web 屬性，像 play store，material design 網站，安卓版本網站一樣。
我們想要一個乾淨、現代的字體，類似於 roboto，但是不是 roboto。roboto 對 Google 字體的描述告訴我們，Google 字體盡一切可能來滿足大家的需求，符合這個要求的字體有 grotesque、humanist 和 geometric。
我們選擇了另一個跨邊界的字體—— avenir，一個從 geometric Futura 演變來的字體，採用更人性化的曲線。不像 roboto 和蘋果的默認字體 helvetica（譯者註：iOS9 之後換成 san Fransisco 了），它並不是一款 grotesque 的字體。
值得一提的是，我們也擺脫了人文主義無襯線體的 open sans，一個我們自己品牌的字體。我們並不想過分強調我們的品牌。
交互和動畫
交互、運動和動畫會給用戶帶來很多，例如：反饋、標記轉換、讓用戶知道他們已經完成了一個任務、展示 app 的架構。這所有的一切都不用文案來展示。
Google 的動畫可以鼓勵你去思考如何連接和轉化，UI 元素是如何促進用戶接受和登錄，界面構成如何能使用戶感到愉悅而不被分心。
但是確保它結束在靈感。仔細考慮什麼是 app 的最好的交互隱喻。Google 的 " 紙張和墨水 " 的隱喻非常引人注目，這是不可否認的。正確的交互動畫能幫助到用戶理解下一步會發生什麼、app 如何工作、各種元素之間是如何相互關聯的。
使用交互和動畫，讓你的 app 跑的通，幫助你的 app 融入安卓或 iOS 的原生系統，能為用戶創造很好的用戶體驗。交互和動畫中時，要保持你的平臺特性——這也是為什麼我們將 iOS 平臺下的切換保留輕微的 material 的感覺。
自己去感受吧
app 的重新設計，對我們來說是一次非常棒的學習機會。我們希望你能下載這個 kit，並且自己去感受。一共有 23 個頁面，包括登陸註冊。現在來免費下載吧！
轉載自：ZAKER
源作者信息：
John Moore Williams
I'm the Director of Content Strategy here at InVision. Nice to meet you.
Follow me on Twitter
加微信18605817040，和老D一起學交互，我會在朋友圈多發些好文章哦。
另外新手小夥伴可以提問諮詢，不過僅限3個問題哦。
歡迎投稿：anhejiao@126.com