吧啦吧啦一點題外話
??????? 說實話,我個人比較喜歡讀那種故事性比較強的文章或書籍,對于那種通篇泛泛大道理钢悲、滿滿雞湯文的書籍好像堅持不了多久,有一種即使明白很多道理卻依然過不好這一生的枯燥感舔株,哈哈哈莺琳,這里必須來一個尷尬又不失禮貌的圍笑。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ā)兩片材料的反饋
● 層疊的材料辐宾,海拔高度不能相同
● 材料不能互相穿透
● 材料不能彎折
● 材料不能透視狱从,必須平行于屏幕
二、空間
??????? 引入了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)新秒梳。