很長一段時間沒寫東西了静稻,其實是因為最近在研究Material Designer這個東西,這回開的這個系列文章是講如何將Material Designer在程序中實現(xiàn)凶杖。作為一個程序員我們不需要關(guān)心太多的設(shè)計,我們只需要知道設(shè)計師給出的要求我們能否實現(xiàn)就行了。但盆耽,作為開頭,我們還是得來講講這個設(shè)計重點是什么扼菠。
Material Designer
宗旨:讓不同大小不同用途的設(shè)備上擁有同一種設(shè)計風(fēng)格
1.紙張
這種設(shè)計模式大量參考了紙墨的模式摄杂,將空間變得像紙張一樣,而用戶的手指就是毛筆循榆。用戶按到控件上就會產(chǎn)生墨暈效果析恢。這樣的好處是明確的告訴用戶是否點擊了控件,而且還能讓用戶一下子明白控件的布局思路秧饮。畢竟一張一張的紙疊加起來的控件是很容易讓人接受的映挂。這里還有一個詞“引喻”,雖然控件像紙張盗尸,但是它具有變大變小柑船,改變顏色等能力,所以完全可以不用拘泥于現(xiàn)實紙張泼各。
2.深度
新的設(shè)計中希望所有的控件都是現(xiàn)實世界中的隱喻鞍时,比如你按下按鈕,按鈕就應(yīng)該有被按下的狀態(tài),這里就要用到了漣漪(Ripple)效果了逆巍。其實漣漪效果是來表示你手指按上去后墨暈擴散的效果的及塘,下面的圖能很明白的說明這點。
3.動畫
動畫貫穿于Material Designer之中蒸苇,官方文檔中用了很大的篇幅來講解動畫效果磷蛹,希望讓設(shè)計的動畫效果很美觀。但我個人認為為了動畫而動畫是完全不可取的溪烤,比如下面的例子
這里的動畫看起來十分自然和美觀味咳,但是在實際中用戶切換activity是很常見的,如果經(jīng)常出現(xiàn)這個動畫用戶會覺得“很膩”檬嘀,十分不友好槽驶。動畫其實是一個畫龍點睛的東西,萬不可變?yōu)楫嬌咛碜阍蕖D敲吹囝恚蠄D的這個動畫應(yīng)該在什么時候使用呢?用在第一次用戶進入一個新的界面的時候揍异,我們?yōu)榱送癸@這個界面的某種特定功能全陨,就可以讓這個功能的圖標動起來,表現(xiàn)出一個點我試試的效果衷掷。
4.排版
新的設(shè)計里面很在意排版辱姨,里面列出了很多詳細的數(shù)據(jù)來支持我們的設(shè)計。對于留白也有了詳細的說明戚嗅。優(yōu)秀的排班會讓你的應(yīng)用看起來干凈雨涛,優(yōu)雅,這點十分重要懦胞。在之后的文章中我也會多少說到這方面的知識替久。
設(shè)計文檔(不用FQ)
http://design.1sters.com/
http://www.ui.cn/Material/
目錄
Material Designer的低版本兼容實現(xiàn)(二)—— Theme
Material Designer的低版本兼容實現(xiàn)(三)——Color
Material Designer的低版本兼容實現(xiàn)(四)—— ToolBar
Material Designer的低版本兼容實現(xiàn)(五)—— ActivityOptionsCompat
Material Designer的低版本兼容實現(xiàn)(六)—— Ripple Layout
Material Designer的低版本兼容實現(xiàn)(七)—— Rectange Button
Material Designer的低版本兼容實現(xiàn)(八)—— Flat Button
Material Designer的低版本兼容實現(xiàn)(九)—— Float Button & Small Float Button
Material Designer的低版本兼容實現(xiàn)(十)—— CheckBox & RadioButton
Material Designer的低版本兼容實現(xiàn)(十一)—— Switch
Material Designer的低版本兼容實現(xiàn)(十二)—— Slider or SeekBar
Material Designer的低版本兼容實現(xiàn)(十三)—— ProgressBar
Material Designer的低版本兼容實現(xiàn)(十四)—— CardView
留著以后真正用到了再寫的東東
沒寫真的不是因為我懶,主要是東西太多了躏尉,還是請大家參考下面的項目MaterailCenter來看開源庫吧蚯根。自己真正用到的時候就可以拿來用了。
Material Designer的低版本兼容實現(xiàn)(XX)—— EditText & Typography
MaterialEditText:https://github.com/rengwuxian/MaterialEditText(一中國大神做的胀糜,感覺很棒)
Android 5.0更新了Roboto樣式稼锅,不論多大的text,展示起來都會美觀和簡潔僚纷。
添加了一種新的中等高度屬性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance樣式為了平衡內(nèi)容密度和閱讀的舒適感,實現(xiàn)了推薦的打印式縮放的矩距。比如你可以簡單的通過 android:textAppearance=”@android:style/TextAppearance.Material.Title” 設(shè)置 “Title"風(fēng)格。在舊的版本中可以使用AppCompat support library的樣式: “@style/TextAppearance.AppCompat.Title”.
Material Designer的低版本兼容實現(xiàn)(XX)—— Dialog
MaterialDialog:https://github.com/drakeet/MaterialDialog(國人做的)
L—Dialog:https://github.com/lewisjdeane/L-Dialogs
Material Designer的低版本兼容實現(xiàn)(XX)—— Drawer
L-Drawer:https://github.com/ikimuhendis/LDrawer
MaterialNavigationDrawer:https://github.com/neokree/MaterialNavigationDrawer
Material Designer的低版本兼容實現(xiàn)(XX)—— Animation
Transitions-Everywhere:https://github.com/andkulikov/transitions-everywhere
Android-UI:https://github.com/markushi/android-ui
CircularReveal:https://github.com/ozodrukh/CircularReveal
參考項目:https://github.com/lightSky/MaterialDesignCenter(這個項目就是下面文章作者做的)
參考文章:http://blog.csdn.net/xushuaic/article/details/40627389
http://blog.csdn.net/xushuaic/article/details/40627389