如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
MUX北京-輝達(dá)
兩個月前,Google I/O大會發(fā)布了Android L并推出Material Design,重新統(tǒng)一了Google的設(shè)計語言,確立了未來Google的設(shè)計方向。那么,什么是Material Design?我簡單地將它翻譯成“本質(zhì)設(shè)計”。顧名思義,這是一種考慮事物本質(zhì)的設(shè)計,將電子屏幕里的UI元素看成是一種不存在于現(xiàn)實世界的新的材質(zhì),并賦予它物理特性。因此Material Design并不是去擬物化的設(shè)計。許多設(shè)計師把扁平化與擬物化對立起來,其實兩者并不是對立關(guān)系。但我更愿意稱Google新的設(shè)計語言為抽象化。
無論是蘋果的設(shè)計語言,還是Google的設(shè)計語言,乃至于Windows的Modern UI 和Facebook的Paper設(shè)計語言,大方向都是一致的,而在細(xì)節(jié)上卻分道揚鑣。蘋果與Google幾乎壟斷了移動設(shè)備的操作系統(tǒng),因此我們談?wù)剰男掳l(fā)布的Material Design中看看有哪些無線設(shè)備的設(shè)計趨勢。
1.紙的形態(tài)模擬
前言已提到Material Design并不是一種去擬物的設(shè)計,也不是一種強調(diào)擬物的設(shè)計。我們知道電子屏幕是完全平面化的,不像現(xiàn)實當(dāng)中的物體是3D的, 。一本書里每一頁紙之間的空間關(guān)系是很清楚的,但電子屏幕的所以物體都在一個平面上。雖然電子屏幕沒有空間感,但信息內(nèi)容是有空間層級的關(guān)系。而Material Design的解決方式就是把現(xiàn)實世界中紙張的特性挪到電子屏幕里,把信息內(nèi)容呈現(xiàn)在這個虛擬的紙上,紙(信息內(nèi)容)跟紙之間有上下層級關(guān)系,用投影模擬紙張的空間感。Material Design的投影并不是過去我們常用的使用圖片或者樣式代碼實現(xiàn)的投影,而是系統(tǒng)根據(jù)紙張層級所在位置實時渲染的,投影會隨著紙張的空間關(guān)系而改變大小。
Google幾年前推行的Card設(shè)計就是模擬紙張物理形態(tài)的一種設(shè)計方式,但Material Design把它提升到了系統(tǒng)信息架構(gòu)層面的高度。
另外,iOS的模糊效果從本質(zhì)上來說與Material Design的紙張設(shè)計要解決的問題是同樣的。通過模擬景深的效果來表達(dá)內(nèi)容信息的層級關(guān)系。
2. 轉(zhuǎn)場動畫
過去我們的頁面只有X與Y軸,打開一個新的頁面則是生硬地直接跳轉(zhuǎn)到新的頁面,并沒有點出頁面的空間層級關(guān)系。而iOS7與Material則強調(diào)Z軸,即頁面之間的空間層級關(guān)系。iOS里打開一個app,頁面將從你點擊的app圖標(biāo)為中心點擴散出來,同樣的設(shè)計在Android L上也隨處可見。通過轉(zhuǎn)場動畫告訴我們,這個頁面從哪里來,到哪里去,在整個APP或者系統(tǒng)里的空間位置是什么。另外,不僅僅是頁面層級的動畫過渡,對象操作也伴隨著動畫過渡,從動畫里能感受到操作的過程變化。例如刪除時,垃圾桶圖標(biāo)會有一個傾倒的動畫,或者通過指示條的旋轉(zhuǎn)告訴你刪除的過程。另一方面,過渡動畫賦予了界面控件一種物理特性,在空間被拉伸、回彈時模仿了橡皮筋的物理特性。值得一提的是,在轉(zhuǎn)場動畫的設(shè)計上,F(xiàn)acebooke Paper的非常突出。
3.icon動畫
交互動畫在一些app里已經(jīng)大行其道,特別是Facebook Paper的動畫讓人印象深刻。在以后,交互動畫將成為標(biāo)配,隨之而來,更多設(shè)計師把目標(biāo)轉(zhuǎn)移到icon上來。Icon主要分為入口功能和操作功能,操作功能的icon在完成點擊操作之后,通常會轉(zhuǎn)為對應(yīng)的另外一種形態(tài)。如“返回”與“菜單,”“選擇”與“未選擇”,“收藏”與“已收藏”“點贊”與“取消點贊”的狀態(tài)之間切換?,F(xiàn)在的設(shè)計里,icon在兩種狀態(tài)之間的切換通常顯得生硬,icon動畫將使得點擊之后的反饋更佳強烈,并且讓界面活起來,性感起來。
目前HTML5已經(jīng)可以實現(xiàn)icon動畫的繪制,原理是設(shè)計師提供svg格式的圖標(biāo),有前端通過html+css+js繪制轉(zhuǎn)場效果。svg格式的圖標(biāo),可以通過代碼控制圖標(biāo)的每一個節(jié)點,從而進(jìn)行形狀變形。
阿里巴巴MUX團隊對外提供了svg格式圖標(biāo)的免費下載:http://www.iconfont.cn/
4.大面積色塊action bar
Material Design設(shè)計語言讓人眼前一亮的除了豐富的交互動畫外,還有大面積使用了鮮艷的色塊。過去的Android讓人覺得冰冷科技感,讓人有一種距離感。而新的設(shè)計采用了與過去相反的做法,在系統(tǒng)里大面積使用色塊,用色塊來突出主要內(nèi)容和標(biāo)題,讓界面的主次感更佳突出,也讓原本灰黑色為主的界面擁有了時尚和活力。色塊的顏色選擇多使用飽和度高、明度適中的顏色,整體擁有比較強烈的視覺沖擊,但并不會太刺眼。Action bar也同樣從過去的灰黑顏色改為彩色,并且讓狀態(tài)欄與之融為一體,這點與iOS7的設(shè)計非常相似。
5.FAB (Floating Action Button)
在Google的宣傳片里,最引人注目的新玩意,就是這個淘氣的圓形小按鈕了。 從宣傳片里來看,這個按鈕的功能并不局限于“新建”“播放”“收藏”“更多”等功能。它于整體界面的配色形成比較大的反差,因此會讓這個按鈕在界面里顯得非常耀眼,從這樣的設(shè)計來看,這個按鈕所背負(fù)的任務(wù)將會是整個界面的主要操作。雖然有點類似與Path里的“+”按鈕,但由于iOS系統(tǒng)本身并沒有這樣的設(shè)計,這將會成為最區(qū)別于iOS的一種交互設(shè)計,對交互設(shè)計師和產(chǎn)品經(jīng)理來說都可能會成為一種挑戰(zhàn)。
6.無邊框按鈕
在iOS7的設(shè)計里,我們已經(jīng)看到了這樣的影子。最典型的便是“返回”按鈕只有箭頭和文案,去掉了原本的按鈕質(zhì)感。Material Design的action bar也同樣采用了這樣的設(shè)計,直接用icon來表達(dá)按鈕功能。尤其是Material的鍵盤設(shè)計風(fēng)格,最早對鍵盤風(fēng)格進(jìn)行極簡設(shè)計的是微軟的Windows Phone,Android和iOS相繼跟進(jìn)。而這次Material走得更極端,把鍵盤的按鈕邊框全部去掉,只保留了英文字母的按鈕。我們不能說這樣的設(shè)計一定是好的,這樣的設(shè)計可能讓用戶對點擊的精準(zhǔn)度無法更快地判斷,缺乏安全感。好處是在屏幕不大的手機上,去掉邊框的擁擠感會給字母更大的空間。
另外,無邊框按鈕的設(shè)計也體現(xiàn)在提示框的按鈕上。
如何讓無邊框的按鈕區(qū)別于內(nèi)容文字,這需要設(shè)計師除了考慮配色外,還需要考慮按鈕出現(xiàn)的場景,對設(shè)計師的在應(yīng)用場景的解讀上也是一個挑戰(zhàn)。
7.聚焦大圖
一張與屏幕等寬,豎方向占據(jù)半個屏幕左右的大圖,去掉action bar,只保留返回按鈕的設(shè)計,在一兩年前十分流行的summly應(yīng)用上就已經(jīng)非?;鹆恕:罄m(xù)也有一些應(yīng)用跟進(jìn)這樣的設(shè)計(例如淘寶),但并沒有大面積流行起來。Material Design很大膽地使用了這樣的設(shè)計。在Google的引導(dǎo)下,這樣的設(shè)計風(fēng)格將很有可能風(fēng)靡起來。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)