最近，我們決定替換一下我們常備的郵件app原型，換成更迷人、跟上時代的東西——其中考慮采用了Google的material design原則。
但我們注意到很多設(shè)計師遵循Google的規(guī)范，最后……結(jié)果做成了Google。聰明的品牌會沿襲Google的風(fēng)格，但對于想要跟上設(shè)計趨勢同時保持自身品牌力量的公司而言，這就不太好了。
設(shè)計新的郵件app原型時，我們深入考慮了這個問題。我們要確堅持material design基于觸摸、用動效表達意義、大膽地表達意圖的核心原則，但不能完全復(fù)制Google Now或是Inbox。
我們想在此從兩給方面分享構(gòu)建這套界面的收獲：其一，分享我們關(guān)于material風(fēng)格的思考和設(shè)計。其二，分享界面本身——你可以從文末獲取到。
顏色
Google一直以它大膽的主色運用著名，從他們無處不在的logo，到山景城園區(qū)的戶外陳設(shè)皆是如此。Material通過輔助色、基于飽和度的色譜擴展了它的配色，但仍然專注于運用大片的扁平色彩，并沒有使用長年主宰網(wǎng)頁設(shè)計的漸變色。
盡管關(guān)于設(shè)計趨勢的討論，都傾向于將漸變、投影和擬物化融為一體，material design鼓勵使用引人注目的陰影，回歸現(xiàn)實中的觸覺反饋。
于是，我們向用戶展現(xiàn)了引人注目的漸變色，以示區(qū)分——包括app主圖標(biāo)中的條紋。構(gòu)成這種漸變的色彩來源于material的配色，但我們以一種Google沒有的方式進行混合。然后我們給懸浮操作按鈕加了一定程度的透明。不過在信封的翻折處仍然有濃厚的陰影。
由于material design需要明亮、高對比度、濃烈的顏色，使用寬泛的配色來填充設(shè)計，極具誘惑力。但顏色不必強烈反差來滿足material的標(biāo)準(zhǔn)、達成目的——只要意圖鮮明就可以了。
我們的郵件app最后用了相對簡單、接近的配色，采用投影和漸變來區(qū)別于Google，同時創(chuàng)造并傳達其意義。
字體
Google顯然具有運用字體傳播品牌的力量。通過創(chuàng)造和統(tǒng)一使用他們的Android預(yù)留字體，Droid Sans和Serif，如今則是Roboto和Noto，他們不僅創(chuàng)造了清晰的界面，也強調(diào)了品牌。他們還（聰明地）更進一步，堅持在網(wǎng)頁上也使用Roboto資源，比如Play商店、material design官方網(wǎng)站、和Android版本網(wǎng)站。
我們要一套簡潔、現(xiàn)代的外觀，類似于Roboto——但不盡然。Google Fonts上對的Roboto描述 表現(xiàn)了他們試圖讓它適用于所有人——他們用了少量詞句描述，比如混搭、人文主義還有幾何學(xué)。
于是我們選了Avenir字體，另一種跨界字體，它源于無裝飾的Futura字體，但融入了更多人文主義曲線。不像Roboto或Apple的摯愛Helvetica，它不是混搭字體。
我們也用過人文主義的Open Sans字體，我們的品牌字體之一。不過這沒什么意義，我們不想過分強調(diào)自己的品牌。
交互與動畫
交互、動效和動畫可以給用戶帶來大量的反饋信息。通過過渡效果，讓他們知道任務(wù)已完成，表達出app的層級結(jié)構(gòu)。這些都不需要逐一寫成文字。
Google的動畫效果能給人啟發(fā)，讓人思考事物相互間如何關(guān)聯(lián)與轉(zhuǎn)變，UI元素如何幫助用戶接受與登錄，界面元素如何取悅用戶（而非令他們分心）。
但要確保它最終確有啟發(fā)性。謹慎考量你的app的最佳交互隱喻。Google的紙墨隱喻難以抗拒，這點無可否認。通過它讓你的用戶理解app的行為、工作原理和各元素間的關(guān)聯(lián)，只有這樣，它才是正確的選擇。
交互效果與動畫要對你的app有意義，有助于融入Android（或iOS）生態(tài)系統(tǒng)，能夠打造最佳的用戶體驗。時刻圍繞自己的平臺很需要精力——這就是為什么我們在設(shè)置中的iOS開關(guān)、切換項上稍微卡住了一會兒，為了保持material的感覺。
請隨意取用
設(shè)計這套新原型，教會我們很多。我們希望這個Sketch文件也能給你同樣多的信息。它總共有23給界面，包括登錄。馬上下載吧，完全免費！
作者信息：
John Moore Williams
I'm the Director of Content Strategy here at InVision. Nice to meet you.
Follow me on Twitter
