Material design無(wú)需照搬Google

0 評(píng)論 18828 瀏覽 27 收藏 7 分鐘

最近,我們決定替換一下我們常備的郵件app原型,換成更迷人、跟上時(shí)代的東西——其中考慮采用了Google的material design原則。

但我們注意到。聰明的品牌會(huì)沿襲Google的風(fēng)格,但對(duì)于想要跟上設(shè)計(jì)趨勢(shì)同時(shí)保持自身品牌力量的公司而言,這就不太好了。

設(shè)計(jì)新的郵件app原型時(shí),我們深入考慮了這個(gè)問(wèn)題。我們要確堅(jiān)持material design基于觸摸、用動(dòng)效表達(dá)意義、大膽地表達(dá)意圖的核心原則,但不能完全復(fù)制Google Now或是Inbox。

我們想在此從兩給方面分享構(gòu)建這套界面的收獲:其一,分享我們關(guān)于material風(fēng)格的思考和設(shè)計(jì)。其二,分享界面本身——你可以從文末獲取到。

顏色

Sign In

Google一直以它大膽的主色運(yùn)用著名,從他們無(wú)處不在的logo,到山景城園區(qū)的戶外陳設(shè)皆是如此。Material通過(guò)輔助色、基于飽和度的色譜擴(kuò)展了它的配色,但仍然專注于運(yùn)用大片的扁平色彩,并沒(méi)有使用長(zhǎng)年主宰網(wǎng)頁(yè)設(shè)計(jì)的漸變色。

盡管關(guān)于設(shè)計(jì)趨勢(shì)的討論,都傾向于將漸變、投影和擬物化融為一體,

于是,我們向用戶展現(xiàn)了引人注目的漸變色,以示區(qū)分——包括app主圖標(biāo)中的條紋。構(gòu)成這種漸變的色彩來(lái)源于material的配色,但我們以一種Google沒(méi)有的方式進(jìn)行混合。然后我們給懸浮操作按鈕加了一定程度的透明。不過(guò)在信封的翻折處仍然有濃厚的陰影。

由于,使用寬泛的配色來(lái)填充設(shè)計(jì),極具誘惑力。但顏色不必強(qiáng)烈反差來(lái)滿足material的標(biāo)準(zhǔn)、達(dá)成目的——只要意圖鮮明就可以了。

我們的郵件app最后用了相對(duì)簡(jiǎn)單、接近的配色,采用投影和漸變來(lái)區(qū)別于Google,同時(shí)創(chuàng)造并傳達(dá)其意義。

字體

Sign Up

Google顯然具有運(yùn)用字體傳播品牌的力量。通過(guò)創(chuàng)造和統(tǒng)一使用他們的Android預(yù)留字體,Droid Sans和Serif,如今則是Roboto和Noto,他們不僅創(chuàng)造了清晰的界面,也強(qiáng)調(diào)了品牌。他們還(聰明地)更進(jìn)一步,堅(jiān)持在網(wǎng)頁(yè)上也使用Roboto資源,比如Play商店、material design官方網(wǎng)站、和Android版本網(wǎng)站。

我們要一套簡(jiǎn)潔、現(xiàn)代的外觀,類(lèi)似于Roboto——但不盡然。Google Fonts上對(duì)的Roboto描述?表現(xiàn)了他們?cè)噲D讓它適用于所有人——他們用了少量詞句描述,比如混搭、人文主義還有幾何學(xué)。

于是我們選了Avenir字體,另一種跨界字體,它源于無(wú)裝飾的Futura字體,但融入了更多人文主義曲線。不像Roboto或Apple的摯愛(ài)Helvetica,它不是混搭字體。

我們也用過(guò)人文主義的Open Sans字體,我們的品牌字體之一。不過(guò)這沒(méi)什么意義,我們不想過(guò)分強(qiáng)調(diào)自己的品牌。

交互與動(dòng)畫(huà)

Interaction

交互、動(dòng)效和動(dòng)畫(huà)可以給用戶帶來(lái)大量的反饋信息。通過(guò)過(guò)渡效果,讓他們知道任務(wù)已完成,表達(dá)出app的層級(jí)結(jié)構(gòu)。這些都不需要逐一寫(xiě)成文字。

Google的動(dòng)畫(huà)效果能給人啟發(fā),讓人思考事物相互間如何關(guān)聯(lián)與轉(zhuǎn)變,UI元素如何幫助用戶接受與登錄,界面元素如何取悅用戶(而非令他們分心)。

但要確保它最終確有啟發(fā)性。謹(jǐn)慎考量你的app的最佳交互隱喻。Google的紙墨隱喻難以抗拒,這點(diǎn)無(wú)可否認(rèn)。通過(guò)它讓你的用戶理解app的行為、工作原理和各元素間的關(guān)聯(lián),只有這樣,它才是正確的選擇。

交互效果與動(dòng)畫(huà)要對(duì)你的app有意義,有助于融入Android(或iOS)生態(tài)系統(tǒng),能夠打造最佳的用戶體驗(yàn)。時(shí)刻圍繞自己的平臺(tái)很需要精力——這就是為什么我們?cè)谠O(shè)置中的iOS開(kāi)關(guān)、切換項(xiàng)上稍微卡住了一會(huì)兒,為了保持material的感覺(jué)。

請(qǐng)隨意取用

設(shè)計(jì)這套新原型,教會(huì)我們很多。我們希望這個(gè)Sketch文件也能給你同樣多的信息。它總共有23給界面,包括登錄。馬上下載吧,完全免費(fèi)!

原文鏈接

作者信息:

John Moore Williams

I’m the Director of Content Strategy here at InVision. Nice to meet you.

Follow me on Twitter

#專欄作家#

可樂(lè)橙,微信公眾號(hào):可樂(lè)橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂(lè)的設(shè)計(jì)師。

轉(zhuǎn)載請(qǐng)保留上述作者信息并附帶本文鏈接

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!