深聊Material Design引領(lǐng)的設(shè)計(jì)趨勢(轉(zhuǎn)載)

輝達(dá):兩個月前荐健,Google I/O大會發(fā)布了Android L并推出Material Design酱畅,重新統(tǒng)一了Google的設(shè)計(jì)語言,確立了未來Google的設(shè)計(jì)方向纺酸。那么址否,什么是Material Design?我簡單地將它翻譯成“本質(zhì)設(shè)計(jì)”用含。顧名思義帮匾,這是一種考慮事物本質(zhì)的設(shè)計(jì)痴鳄,將電子屏幕里的UI元素看成是一種不存在于現(xiàn)實(shí)世界的新的材質(zhì),并賦予它物理特性螺句。因此Material Design并不是去擬物化的設(shè)計(jì)橡类。許多設(shè)計(jì)師把扁平化與擬物化對立起來,其實(shí)兩者并不是對立關(guān)系取劫。但我更愿意稱Google新的設(shè)計(jì)語言為抽象化。

無論是蘋果的設(shè)計(jì)語言谱邪,還是Google的設(shè)計(jì)語言惦银,乃至于Windows的Modern UI 和Facebook的Paper設(shè)計(jì)語言,大方向都是一致的扯俱,而在細(xì)節(jié)上卻分道揚(yáng)鑣。蘋果與Google幾乎壟斷了移動設(shè)備的操作系統(tǒng)善炫,因此我們談?wù)剰男掳l(fā)布的Material Design中看看有哪些無線設(shè)備的設(shè)計(jì)趨勢库继。

一、紙的形態(tài)模擬

前言已提到Material Design并不是一種去擬物的設(shè)計(jì)艺谆,也不是一種強(qiáng)調(diào)擬物的設(shè)計(jì)拜英。我們知道電子屏幕是完全平面化的,不像現(xiàn)實(shí)當(dāng)中的物體是3D的虫给, 侠碧。一本書里每一頁紙之間的空間關(guān)系是很清楚的,但電子屏幕的所以物體都在一個平面上药蜻。雖然電子屏幕沒有空間感替饿,但信息內(nèi)容是有空間層級的關(guān)系。而Material Design的解決方式就是把現(xiàn)實(shí)世界中紙張的特性挪到電子屏幕里踱卵,把信息內(nèi)容呈現(xiàn)在這個虛擬的紙上据过,紙(信息內(nèi)容)跟紙之間有上下層級關(guān)系妒挎,用投影模擬紙張的空間感饥漫。Material Design的投影并不是過去我們常用的使用圖片或者樣式代碼實(shí)現(xiàn)的投影罗标,而是系統(tǒng)根據(jù)紙張層級所在位置實(shí)時渲染的,投影會隨著紙張的空間關(guān)系而改變大小彻消。

Google幾年前推行的Card設(shè)計(jì)就是模擬紙張物理形態(tài)的一種設(shè)計(jì)方式宙拉,但Material Design把它提升到了系統(tǒng)信息架構(gòu)層面的高度谢澈。

另外,iOS的模糊效果從本質(zhì)上來說與Material Design的紙張?jiān)O(shè)計(jì)要解決的問題是同樣的锥忿。通過模擬景深的效果來表達(dá)內(nèi)容信息的層級關(guān)系敬鬓。

二、轉(zhuǎn)場動畫

過去我們的頁面只有X與Y軸础芍,打開一個新的頁面則是生硬地直接跳轉(zhuǎn)到新的頁面数尿,并沒有點(diǎn)出頁面的空間層級關(guān)系砌创。而iOS7與Material則強(qiáng)調(diào)Z軸,即頁面之間的空間層級關(guān)系嫩实。iOS里打開一個app甲献,頁面將從你點(diǎn)擊的app圖標(biāo)為中心點(diǎn)擴(kuò)散出來颂翼,同樣的設(shè)計(jì)在Android上也隨處可見慨灭。通過轉(zhuǎn)場動畫告訴我們球及,這個頁面從哪里來吃引,到哪里去,在整個APP或者系統(tǒng)里的空間位置是什么朦佩。另外庐氮,不僅僅是頁面層級的動畫過渡,對象操作也伴隨著動畫過渡仙畦,從動畫里能感受到操作的過程變化音婶。例如刪除時,垃圾桶圖標(biāo)會有一個傾倒的動畫先口,或者通過指示條的旋轉(zhuǎn)告訴你刪除的過程瞳收。另一方面,過渡動畫賦予了界面控件一種物理特性谐宙,在空間被拉伸界弧、回彈時模仿了橡皮筋的物理特性。值得一提的是划栓,在轉(zhuǎn)場動畫的設(shè)計(jì)上条获,F(xiàn)acebooke Paper的非常突出。

Facebooke Paper 在動畫方面細(xì)節(jié)特棒委煤,右戳學(xué)習(xí):《最近這個超火碧绞!23個FACEBOOK PAPER中的設(shè)計(jì)細(xì)節(jié)》

三、icon動畫

交互動畫在一些app里已經(jīng)大行其道迫靖,特別是Facebook Paper的動畫讓人印象深刻计维。在以后鲫惶,交互動畫將成為標(biāo)配,隨之而來欠母,更多設(shè)計(jì)師把目標(biāo)轉(zhuǎn)移到icon上來赏淌。Icon主要分為入口功能和操作功能,操作功能的icon在完成點(diǎn)擊操作之后俺孙,通常會轉(zhuǎn)為對應(yīng)的另外一種形態(tài)掷贾。如“返回”與“菜單,”“選擇”與“未選擇”场靴,“收藏”與“已收藏”“點(diǎn)贊”與“取消點(diǎn)贊”的狀態(tài)之間切換「圩迹現(xiàn)在的設(shè)計(jì)里,icon在兩種狀態(tài)之間的切換通常顯得生硬轨帜,icon動畫將使得點(diǎn)擊之后的反饋更佳強(qiáng)烈衩椒,并且讓界面活起來烟具,性感起來。

四嗡午、大面積色塊Action bar

Material Design設(shè)計(jì)語言讓人眼前一亮的除了豐富的交互動畫外冀痕,還有大面積使用了鮮艷的色塊言蛇。過去的Android讓人覺得冰冷科技感,讓人有一種距離感吨拗。而新的設(shè)計(jì)采用了與過去相反的做法婿斥,在系統(tǒng)里大面積使用色塊,用色塊來突出主要內(nèi)容和標(biāo)題娇妓,讓界面的主次感更佳突出活鹰,也讓原本灰黑色為主的界面擁有了時尚和活力。色塊的顏色選擇多使用飽和度高着绷、明度適中的顏色赖舟,整體擁有比較強(qiáng)烈的視覺沖擊宾抓,但并不會太刺眼。Action bar也同樣從過去的灰黑顏色改為彩色幢泼,并且讓狀態(tài)欄與之融為一體讲衫,這點(diǎn)與iOS7的設(shè)計(jì)非常相似孵班。

五篙程、FAB 按鈕(Fixed Action Button)

在Google的宣傳片里别厘,最引人注目的新玩意,就是這個淘氣的圓形小按鈕了氮发。 從宣傳片里來看冗懦,這個按鈕的功能并不局限于“新建”“播放”“收藏”“更多”等功能披蕉。它于整體界面的配色形成比較大的反差,因此會讓這個按鈕在界面里顯得非常耀眼嚣艇,從這樣的設(shè)計(jì)來看食零,這個按鈕所背負(fù)的任務(wù)將會是整個界面的主要操作。雖然有點(diǎn)類似與Path里的“+”按鈕娜搂,但由于iOS系統(tǒng)本身并沒有這樣的設(shè)計(jì)吱抚,這將會成為最區(qū)別于iOS的一種交互設(shè)計(jì),對交互設(shè)計(jì)師和產(chǎn)品經(jīng)理來說都可能會成為一種挑戰(zhàn)携御。

六啄刹、無邊框按鈕

在iOS7的設(shè)計(jì)里凄贩,我們已經(jīng)看到了這樣的影子疲扎。最典型的便是“返回”按鈕只有箭頭和文案捷雕,去掉了原本的按鈕質(zhì)感壹甥。Material Design的action bar也同樣采用了這樣的設(shè)計(jì)盹廷,直接用icon來表達(dá)按鈕功能。尤其是Material的鍵盤設(shè)計(jì)風(fēng)格俄占,最早對鍵盤風(fēng)格進(jìn)行極簡設(shè)計(jì)的是微軟的Windows Phone缸榄,Android和iOS相繼跟進(jìn)祝拯。而這次Material走得更極端,把鍵盤的按鈕邊框全部去掉鹰贵,只保留了英文字母的按鈕康嘉。我們不能說這樣的設(shè)計(jì)一定是好的亭珍,這樣的設(shè)計(jì)可能讓用戶對點(diǎn)擊的精準(zhǔn)度無法更快地判斷,缺乏安全感肄梨。好處是在屏幕不大的手機(jī)上众羡,去掉邊框的擁擠感會給字母更大的空間。

另外羊壹,無邊框按鈕的設(shè)計(jì)也體現(xiàn)在提示框的按鈕上甜害。

如何讓無邊框的按鈕區(qū)別于內(nèi)容文字尔店,這需要設(shè)計(jì)師除了考慮配色外主慰,還需要考慮按鈕出現(xiàn)的場景鲫售,對設(shè)計(jì)師的在應(yīng)用場景的解讀上也是一個挑戰(zhàn)。

七、聚焦大圖

一張與屏幕等寬雏蛮,豎方向占據(jù)半個屏幕左右的大圖阱州,去掉action bar,只保留返回按鈕的設(shè)計(jì)犀概,在一兩年前十分流行的summly應(yīng)用上就已經(jīng)非常火了探赫。后續(xù)也有一些應(yīng)用跟進(jìn)這樣的設(shè)計(jì)(例如淘寶),但并沒有大面積流行起來。Material Design很大膽地使用了這樣的設(shè)計(jì)。在Google的引導(dǎo)下镊叁,這樣的設(shè)計(jì)風(fēng)格將很有可能風(fēng)靡起來走触。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末互广,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子像樊,更是在濱河造成了極大的恐慌旅敷,老刑警劉巖媳谁,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件友酱,死亡現(xiàn)場離奇詭異缔杉,居然都是意外死亡搁料,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進(jìn)店門霸琴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沈贝,“玉大人勋乾,你說我怎么就攤上這事嗡善。” “怎么了各吨?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵揭蜒,是天一觀的道長剔桨。 經(jīng)常有香客問我洒缀,道長,這世上最難降的妖魔是什么萨脑? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任饺饭,我火速辦了婚禮瘫俊,結(jié)果婚禮上悴灵,老公的妹妹穿的比我還像新娘仅淑。我一直安慰自己,他們只是感情好赡鲜,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布银酬。 她就那樣靜靜地躺著筐钟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪李破。 梳的紋絲不亂的頭發(fā)上嗤攻,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天诽俯,我揣著相機(jī)與錄音暴区,去河邊找鬼。 笑死房交,一個胖子當(dāng)著我的面吹牛缰盏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播负溪,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼川抡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了侍咱?” 一聲冷哼從身側(cè)響起密幔,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤胯甩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后木柬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淹办,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡怜森,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年副硅,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡流纹,死狀恐怖违诗,靈堂內(nèi)的尸體忽然破棺而出诸迟,到底是詐尸還是另有隱情,我是刑警寧澤阵苇,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站绅项,受9級特大地震影響紊册,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜快耿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一囊陡、第九天 我趴在偏房一處隱蔽的房頂上張望芳绩。 院中可真熱鬧,春花似錦撞反、人聲如沸妥色。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嘹害。三九已至丁稀,卻和暖如春吼拥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背线衫。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工凿可, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人授账。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓枯跑,卻偏偏與公主長得像,于是被迫代替她去往敵國和親白热。 傳聞我的和親對象是個殘疾皇子敛助,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容