Material Designer

Material Designer的低版本兼容實現(一)—— 簡介 & 目錄

很長一段時間沒寫東西了,其實是因爲最近在研究Material Designer這個東西,熬夜熬的身體也不是很好了。所以就偷懶沒寫東西,這回開的這個系列文章是講如何將Material Designer在程序中實現。作爲一個程序員我們不需要關心太多的設計,我們只需要知道設計師給出的要求我們能否實現就行了。但,作爲開頭,我們還是得來講講這個設計重點是什麼。

Material Designer

宗旨:讓不同大小不同用途的設備上擁有同一種設計風格

 

1.紙張

 

這種設計模式大量參考了紙墨的模式,將空間變得像紙張一樣,而用戶的手指就是毛筆。用戶按到控件上就會產生墨暈效果。這樣的好處是明確的告訴用戶是否點擊了控件,而且還能讓用戶一下子明白控件的佈局思路。畢竟一張一張的紙疊加起來的控件是很容易讓人接受的。這裏還有一個詞“引喻”,雖然控件像紙張,但是它具有變大變小,改變顏色等能力,所以完全可以不用拘泥於現實紙張。

 

2.深度

新的設計中希望所有的控件都是現實世界中的隱喻,比如你按下按鈕,按鈕就應該有被按下的狀態,這裏就要用到了漣漪(Ripple)效果了。其實漣漪效果是來表示你手指按上去後墨暈擴散的效果的,下面的圖能很明白的說明這點。

 

3.動畫

動畫貫穿於Material Designer之中,官方文檔中用了很大的篇幅來講解動畫效果,希望讓設計的動畫效果很美觀。但我個人認爲爲了動畫而動畫是完全不可取的,比如下面的例子

 這裏的動畫看起來十分自然和美觀,但是在實際中用戶切換activity是很常見的,如果經常出現這個動畫用戶會覺得“很膩”,十分不友好。動畫其實是一個畫龍點睛的東西,萬不可變爲畫蛇添足。那麼,上圖的這個動畫應該在什麼時候使用呢?用在第一次用戶進入一個新的界面的時候,我們爲了凸顯這個界面的某種特定功能,就可以讓這個功能的圖標動起來,表現出一個點我試試的效果。

 

4.排版

新的設計裏面很在意排版,裏面列出了很多詳細的數據來支持我們的設計。對於留白也有了詳細的說明。優秀的排班會讓你的應用看起來乾淨,優雅,這點十分重要。在之後的文章中我也會多少說到這方面的知識。

 

 

設計文檔(不用FQ)

http://design.1sters.com/

http://www.ui.cn/Material/

 

目錄

Material Designer的低版本兼容實現(二)—— Theme

 

Material Designer的低版本兼容實現(三)——Color

 

Material Designer的低版本兼容實現(四)—— ToolBar

 

Material Designer的低版本兼容實現(五)—— ActivityOptionsCompat

    

 

Material Designer的低版本兼容實現(六)—— Ripple Layout

 

Material Designer的低版本兼容實現(七)—— Rectange Button

  

 

Material Designer的低版本兼容實現(八)—— Flat Button

  

 

Material Designer的低版本兼容實現(九)—— Float Button & Small Float Button

 

Material Designer的低版本兼容實現(十)—— CheckBox & RadioButton

 

Material Designer的低版本兼容實現(十一)—— Switch

 

Material Designer的低版本兼容實現(十二)—— Slider or SeekBar

 

Material Designer的低版本兼容實現(十三)—— ProgressBar

 

Material Designer的低版本兼容實現(十四)—— CardView

 

 

 

 

留着以後真正用到了再寫的東東

沒寫真的不是因爲我懶,主要是東西太多了,還是請大家參考下面的項目MaterailCenter來看開源庫吧。自己真正用到的時候就可以拿來用了。

Material Designer的低版本兼容實現(XX)—— EditText & Typography

MaterialEditText:https://github.com/rengwuxian/MaterialEditText(一中國大神做的,感覺很棒)

Android 5.0更新了Roboto樣式,不論多大的text,展示起來都會美觀和簡潔。

添加了一種新的中等高度屬性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance樣式爲了平衡內容密度和閱讀的舒適感,實現了推薦的打印式縮放的。比如你可以簡單的通過 android:textAppearance=”@android:style/TextAppearance.Material.Title” 設置  “Title"風格。在舊的版本中可以使用AppCompat support library的樣式: “@style/TextAppearance.AppCompat.Title”. 

 

Material Designer的低版本兼容實現(XX)—— Dialog

MaterialDialog:https://github.com/drakeet/MaterialDialog(國人做的)

L—Dialog:https://github.com/lewisjdeane/L-Dialogs

 

 

Material Designer的低版本兼容實現(XX)—— Drawer

L-Drawer:https://github.com/ikimuhendis/LDrawer

MaterialNavigationDrawer:https://github.com/neokree/MaterialNavigationDrawer

 

 

Material Designer的低版本兼容實現(XX)—— Animation

Transitions-Everywhere:https://github.com/andkulikov/transitions-everywhere

Android-UI:https://github.com/markushi/android-ui

CircularReveal:https://github.com/ozodrukh/CircularReveal

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章