Android 高級(jí)UI1 Material Design概述

Android 高級(jí)UI 目錄

1厦滤、Material Design概述

我們挑戰(zhàn)自我箱舞,為用戶創(chuàng)造了嶄新的視覺設(shè)計(jì)語(yǔ)言。與此同時(shí)裤翩,新的設(shè)計(jì)語(yǔ)言除了遵循經(jīng)典設(shè)計(jì)定則资盅,還汲取了最新的科技,秉承了創(chuàng)新的設(shè)計(jì)理念踊赠。這就是原質(zhì)化設(shè)計(jì)(Material Design)呵扛。這份文檔是動(dòng)態(tài)更新的,將會(huì)隨著我們對(duì) Material Design 的探索而不斷迭代筐带、升級(jí)今穿。

目標(biāo)

我們希冀創(chuàng)造一種新的視覺設(shè)計(jì)語(yǔ)言,能夠遵循優(yōu)秀設(shè)計(jì)的經(jīng)典定則伦籍,同時(shí)還伴有創(chuàng)新理念和新的科技蓝晒。

我們希望創(chuàng)造一種獨(dú)一無二的底層系統(tǒng),在這個(gè)系統(tǒng)的基礎(chǔ)之上帖鸦,構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)芝薇。遵循基本的移動(dòng)設(shè)計(jì)定則,同時(shí)支持觸摸富蓄、語(yǔ)音剩燥、鼠標(biāo)、鍵盤等輸入方式立倍。


設(shè)計(jì)原則
實(shí)體感就是(通過設(shè)計(jì)方式來表達(dá))隱喻

通過構(gòu)建系統(tǒng)化的動(dòng)效和空間合理化利用,并將兩個(gè)理念合二為一侣滩,構(gòu)成了實(shí)體隱喻口注。與眾不同的觸感是實(shí)體的基礎(chǔ),這一靈感來自我們對(duì)紙墨的研究君珠,但是我們相信寝志,隨著科技的進(jìn)步,應(yīng)用前景將不可估量。

實(shí)體的表面和邊緣提供基于真實(shí)效果的視覺體驗(yàn)材部,熟悉的觸感讓用戶可以快速地理解和認(rèn)知毫缆。實(shí)體的多樣性可以讓我們呈現(xiàn)出更多反映真實(shí)世界的設(shè)計(jì)效果,但同時(shí)又絕不會(huì)脫離客觀的物理規(guī)律乐导。

光效苦丁、表面質(zhì)感、運(yùn)動(dòng)感這三點(diǎn)是解釋物體運(yùn)動(dòng)規(guī)律物臂、交互方式旺拉、空間關(guān)系的關(guān)鍵。真實(shí)的光效可以解釋物體之間的交合關(guān)系棵磷、空間關(guān)系蛾狗,以及單個(gè)物體的運(yùn)動(dòng)。


image.png
鮮明仪媒、形象沉桌、深思熟慮

新的視覺語(yǔ)言,在基本元素的處理上算吩,借鑒了傳統(tǒng)的印刷設(shè)計(jì)——排版蒲牧、網(wǎng)格、空間赌莺、比例冰抢、配色、圖像使用——這些基礎(chǔ)的平面設(shè)計(jì)規(guī)范艘狭。在這些設(shè)計(jì)基礎(chǔ)上下功夫挎扰,不但可以愉悅用戶,而且能夠構(gòu)建出視覺層級(jí)巢音、視覺意義以及視覺聚焦遵倦。精心選擇色彩、圖像官撼、選擇合乎比例的字體梧躺、留白,力求構(gòu)建出鮮明傲绣、形象的用戶界面掠哥,讓用戶沉浸其中。

Material Design設(shè)計(jì)語(yǔ)言強(qiáng)調(diào)根據(jù)用戶行為凸顯核心功能秃诵,進(jìn)而為用戶提供操作指引续搀。


image.png
有意義的動(dòng)畫效果

動(dòng)畫效果(簡(jiǎn)稱動(dòng)效)可以有效地暗示、指引用戶菠净。動(dòng)效的設(shè)計(jì)要根據(jù)用戶行為而定禁舷,能夠改變整體設(shè)計(jì)的觸感彪杉。

動(dòng)效應(yīng)當(dāng)在獨(dú)立的場(chǎng)景呈現(xiàn)。通過動(dòng)效牵咙,讓物體的變化以更連續(xù)派近、更平滑的方式呈現(xiàn)給用戶,讓用戶能夠充分知曉所發(fā)生的變化洁桌。

動(dòng)效應(yīng)該是有意義的渴丸、合理的,動(dòng)效的目的是為了吸引用戶的注意力战坤,以及維持整個(gè)系統(tǒng)的連續(xù)性體驗(yàn)曙强。動(dòng)效反饋需細(xì)

2、MaterialDesign的使用及開發(fā)

谷歌開放以及收集了一些最新的開源的項(xiàng)目(很多是自己開發(fā)的)途茫,匯集到最新的support兼容支持包以及最新的5.X API里面碟嘴。
(preference:設(shè)置頁(yè)面,可以通過配置文件達(dá)到界面設(shè)計(jì)的效果囊卜。)
1)android-support-v4:最低兼容到Android 1.6系統(tǒng)娜扇,里面有類似ViewPager等控件。
2)android-support-v7:appcompat栅组、CardView雀瓢、gridlayout、mediarouter玉掸、
palette刃麸、preference、recyclerView(最低兼容到3.0)
最低兼容到Android 2.1的系統(tǒng)司浪,這個(gè)工程可以讓開發(fā)人員統(tǒng)一開發(fā)標(biāo)準(zhǔn)泊业,在任何的系統(tǒng)版本下保證兼容性。
(比如:Theme,value,布局啊易,新的控件吁伺,新的動(dòng)畫特效實(shí)現(xiàn))
所以現(xiàn)在ADT、AndrodStudio一般都會(huì)直接創(chuàng)建項(xiàng)目的時(shí)候就直接幫你新建或者引入了一個(gè)叫做appcompat的項(xiàng)目租谈。
這里可能會(huì)碰到很多問題:
1.自動(dòng)導(dǎo)入的appcompat-v7項(xiàng)目自身就是報(bào)錯(cuò)的篮奄,什么原因?build的版本太低了,要么是SDK很新但是兼容包沒有更新割去。
2.appcompat-v7好不容易沒報(bào)錯(cuò)窟却,但是項(xiàng)目報(bào)錯(cuò),一看控制臺(tái):報(bào)appcompat里面的某個(gè)res/values/theme/xxx屬性不存在 等等問題劫拗。
什么原因间校?因?yàn)槟阋氲氖呛苄碌腶ppcompat-v7項(xiàng)目,它要求必須很高的版本編譯页慷,然而Eclipse很蛋疼憔足,在引入該項(xiàng)目的主項(xiàng)目編譯的時(shí)候也必須要達(dá)到這個(gè)很高的版本---直接使用最高版本編譯
現(xiàn)在一般做開發(fā)都是最低兼容到4.0。
SDK升級(jí):API升級(jí)酒繁、兼容包的升級(jí)滓彰、工具升級(jí)。

3州袒、MaterialDesign控制項(xiàng)目全局樣式

1.引入appcompat-v7項(xiàng)目(包括了android-support-v7-appcompat.jar和資源文件)
AS中Module中build.gradle配置

dependencies {
    implementation 'com.android.support:appcompat-v7:26.1.0'
}

2.寫自己的全局樣式:

        <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="colorPrimary">@color/colorPrimary_pink</item>
        <item name="colorPrimaryDark">@color/colorPrimary_pinkDark</item>
        <item name="android:windowBackground">@color/background</item>
    <item name="colorAccent">@color/accent_material_dark</item>
    </style>
    colorPrimary:主色揭绑,
    colorPrimaryDark:主色--深色,一般可以用于狀態(tài)欄顏色郎哭、底部導(dǎo)航欄
    colorAccent:(代表各個(gè)空間的基調(diào)顏色--CheckBox他匪、RadioButton、ProgressBar等等)

特別感謝:
極客學(xué)院

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末夸研,一起剝皮案震驚了整個(gè)濱河市邦蜜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌亥至,老刑警劉巖悼沈,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異姐扮,居然都是意外死亡絮供,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門茶敏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壤靶,“玉大人,你說我怎么就攤上這事惊搏≈椋” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵胀屿,是天一觀的道長(zhǎng)塘揣。 經(jīng)常有香客問我,道長(zhǎng)宿崭,這世上最難降的妖魔是什么亲铡? 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮葡兑,結(jié)果婚禮上奖蔓,老公的妹妹穿的比我還像新娘。我一直安慰自己讹堤,他們只是感情好吆鹤,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著洲守,像睡著了一般疑务。 火紅的嫁衣襯著肌膚如雪沾凄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,007評(píng)論 1 284
  • 那天知允,我揣著相機(jī)與錄音撒蟀,去河邊找鬼。 笑死温鸽,一個(gè)胖子當(dāng)著我的面吹牛保屯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播涤垫,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼姑尺,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了蝠猬?” 一聲冷哼從身側(cè)響起切蟋,我...
    開封第一講書人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吱雏,沒想到半個(gè)月后敦姻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡歧杏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年镰惦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片犬绒。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡旺入,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凯力,到底是詐尸還是另有隱情茵瘾,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布咐鹤,位于F島的核電站拗秘,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏祈惶。R本人自食惡果不足惜雕旨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望捧请。 院中可真熱鬧凡涩,春花似錦、人聲如沸疹蛉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)可款。三九已至育韩,卻和暖如春克蚂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背座慰。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工陨舱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留翠拣,地道東北人版仔。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像误墓,于是被迫代替她去往敵國(guó)和親蛮粮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345

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