Material Design學習筆記— —第一趴

吧啦吧啦一點題外話

??????? 說實話,我個人比較喜歡讀那種故事性比較強的文章或書籍,對于那種通篇泛泛大道理钢悲、滿滿雞湯文的書籍好像堅持不了多久,有一種即使明白很多道理卻依然過不好這一生的枯燥感舔株,哈哈哈莺琳,這里必須來一個尷尬又不失禮貌的圍笑。Material Design是一篇內容豐富且專業(yè)性極強的設計文檔载慈,背后有深思熟慮的設計指南作為堅實支撐惭等,在學習的時候需要不斷思考,會遇上看不懂的時候办铡,難免有些煩躁辞做,我認為這是一份需要反復咀嚼消化的文章琳要,在看完MD前面的內容后,對于動畫的部分印象比較深刻秤茅,先簡單談談自己的理解稚补。

終于進入正題

? ? ? ? 以前自己理解的動畫,作用就是將界面信息的展示方式變得多樣嫂伞、活潑孔厉,并沒有考慮很多場景元素,比如觸控點的變化帖努,以觸控點為原點展開新元素撰豺、點擊元素產(chǎn)生變化前的激活狀態(tài)等等。Material Design 構建了系統(tǒng)化的動效拼余,有意義的動效污桦。如何形成這個系統(tǒng)化的動效我們需要理解幾部分的內容:

一、材質

Material? Design 中匙监,最重要的信息載體就是神奇紙片凡橱。紙片材料擁有變化的長寬尺寸(以dp為計)和均勻的厚度(總是1dp厚),可以層疊亭姥、合并稼钩、分離,擁有現(xiàn)實中的慣性和反饋达罗。

材料具備以下的特性:
● 材料會形成陰影坝撑,陰影描述材料元件之間的相對高度

● 材料可以伸縮、改變形狀

● 材料變形時能夠自適應內容粮揉,比如材料元件縮小時巡李,內容大小不變,而是隱藏超出部分

● 多個材料元件不能同時占用相同的空間點

● 一片材料可以分裂成多張扶认,幾片材料能合在一起組成一片材料

● 材料可以在任何位置憑空出現(xiàn)或消失

● 材料可以沿各個軸移動侨拦,Z軸的運動一般都是用戶與材料交互而產(chǎn)生的

同時,材料有些效果是禁止的:

● 一項操作不能同時出發(fā)兩片材料的反饋

● 層疊的材料辐宾,海拔高度不能相同

● 材料不能互相穿透

● 材料不能彎折

● 材料不能透視狱从,必須平行于屏幕

二、空間

具備 x叠纹,y 和 z 軸的 3D 空間

??????? 引入了z軸的概念矫夯,z軸垂直于屏幕,用來表現(xiàn)元素的層疊關系吊洼。所有的元素的厚度都是1dp,每個元素都有默認的海拔高度制肮,海拔越高冒窍,元素離界面底層越遠递沪,投影越重。對元素進行操作综液,它的海拔高度會升高款慨,操作結束后,落回默認海拔高度谬莹,同一種元素檩奠,同樣的操作,升高的高度是一樣的附帽。不同高度的元素決定了在進行交互操作時埠戳,元素的移動路徑和變化方式。

三蕉扮、動畫

??????? 在學習材質和空間后整胃,再去認真思考一下動畫,感覺不像之前自己想的那么無據(jù)可依喳钟,天馬行空了屁使。Material? Design 中,動畫優(yōu)雅奔则,能夠表達元素以及界面之間的關系蛮寂,具備功能上的作用,而不只是活潑界面那么簡單易茬,可能沒有人們想象中的革新酬蹋,但提倡更加順滑、漸進式的動畫疾呻,逐漸的引導用戶除嘹,而不是通過驟然的變化來引人注目。

a. 真實動作

??????? 物理世界中物體擁有質量岸蜗,所以只有當施加給它們力量的時候才會移動尉咕,因此物體沒法在瞬間開始或者結束動作。動畫突然開始或者停止璃岳,或者在運動時突兀的變化方向年缎,都會使用戶感到意外和不和諧的干擾。

迅速的加速和平滑的減速會感到自然和愉快

??????? 線性動作會感到機械铃慷,在結束和開始的時候生硬的速度變化意味著物體突然開始運動或停止单芜,這是不貼合現(xiàn)實的。動畫要貼近真實世界犁柜,要先考慮它在現(xiàn)實世界中的運動規(guī)律洲鸠。

b. 水波反饋

??????? 接收到輸入事件,如點擊屏幕,系統(tǒng)會立即在交互的觸點上繪制出一個可視化的圖形讓用戶感知到:如在點擊屏幕時扒腕、使用麥克風時绢淀,或者鍵盤輸入時,會出現(xiàn)類似于墨水擴散那樣的視覺效果形狀瘾腰。

??????? 觸控漣漪是這種觸摸效果的核心視覺機制皆的。在進行觸摸事件時,設備能清晰而及時地讓用戶感知觸摸按鈕和語音輸入時的變化蹋盆。

觸控漣漪

??????? 每個元素本身也能做出交互響應费薄,物體可以在觸控或點擊的時候浮起來,以表示該元素正處于激活狀態(tài)栖雾。用戶可以通過點擊楞抡、拖動來生成、改變元素或者直接對元素進行處理岩灭。

? ? ? ? 當用戶操作生成一個新元素時拌倍,元素的動畫應該基于觸控點展開,通過視覺效果將元素與觸控點聯(lián)系起來噪径。

c. 轉場效果

? ? ? ? 不同頁面的首先要考慮的是視覺連貫性柱恤,在兩個視覺效果不同的頁面之間的轉場應該平滑、輕快找爱,更重要的是使用戶感覺清晰而非困惑梗顺。對于轉場后的新入元素需最快最清晰的被用戶識別;轉場后與當前場景不相關的元素應當以恰當?shù)姆绞奖灰瞥瞪悖焕脧霓D場開始到結束都沒有發(fā)生變化的通用元素在不同場景轉化間建立視覺聯(lián)系寺谤,可以是細微至單個圖標壁酬,也可以是顯著到占據(jù)屏幕的圖片展示臭脓。避免瞬間切屏(hard cut)恋捆,瞬間切屏過于突兀力穗,并且會導致用戶很難理解這個轉場。

? ? ? ? 通過過渡動畫膜眠,表達界面之間的空間與層級關系言询,并且跨見面?zhèn)鬟f信息亲善。多個相似元素环戈,其整個移動過程都要有意義闷板、有秩序,避免沖突的動作和重疊的運動路徑院塞,起到引導視覺焦點作用的元素遮晚。

一致路徑移動

d. 細節(jié)動畫

? ? ? ? 動畫最基本的使用場景是過度效果,但通過圖標的變化和一些細節(jié)拦止,也能達到令人愉悅的效果县遣。例如一個菜單圖標變成一個箭頭或者是播放控制按鈕,這種服務間的無縫切換不僅僅能讓用戶感知,更是讓完美的細節(jié)和精湛的設計充滿你的作品艺玲。


結束第一趴

??????? Material Design 設計規(guī)范剛學習了一部分括蝠,就感覺受益匪淺,對動效充滿了興趣饭聚,好好消化后更重要的是在實踐中運用,希望自己以后在設計中能夠善用這件學習工具搁拙,不斷完善和創(chuàng)新秒梳。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市箕速,隨后出現(xiàn)的幾起案子酪碘,更是在濱河造成了極大的恐慌,老刑警劉巖盐茎,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件兴垦,死亡現(xiàn)場離奇詭異,居然都是意外死亡字柠,警方通過查閱死者的電腦和手機探越,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窑业,“玉大人钦幔,你說我怎么就攤上這事〕1” “怎么了鲤氢?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長西潘。 經(jīng)常有香客問我卷玉,道長,這世上最難降的妖魔是什么喷市? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任相种,我火速辦了婚禮,結果婚禮上东抹,老公的妹妹穿的比我還像新娘蚂子。我一直安慰自己,他們只是感情好缭黔,可當我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布食茎。 她就那樣靜靜地躺著,像睡著了一般馏谨。 火紅的嫁衣襯著肌膚如雪别渔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天,我揣著相機與錄音哎媚,去河邊找鬼喇伯。 笑死,一個胖子當著我的面吹牛拨与,可吹牛的內容都是我干的稻据。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼买喧,長吁一口氣:“原來是場噩夢啊……” “哼捻悯!你這毒婦竟也來了?” 一聲冷哼從身側響起淤毛,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤今缚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后低淡,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姓言,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年蔗蹋,在試婚紗的時候發(fā)現(xiàn)自己被綠了何荚。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡纸颜,死狀恐怖兽泣,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情胁孙,我是刑警寧澤唠倦,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站涮较,受9級特大地震影響稠鼻,放射性物質發(fā)生泄漏。R本人自食惡果不足惜狂票,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一候齿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧闺属,春花似錦慌盯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至国瓮,卻和暖如春灭必,著一層夾襖步出監(jiān)牢的瞬間狞谱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工禁漓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留跟衅,地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓播歼,卻偏偏與公主長得像伶跷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子秘狞,可洞房花燭夜當晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內容