谷歌Material Design動效篇 - 視覺同盟(VisionUnion.com)

2021-01-08 視覺同盟

一、真實的動效

首先,需要充分理解物質是有形的,繼而才能從容處理物體的運動。觀察物體的運動,我們可以估量出物體的輕重、靈活性、大小尺寸。在Material Design的世界中,動效不僅僅因為美學意義而存才,同時是為了構建有意義的空間關係、凸顯功能、維繫整個系統的一致性。

 

質量和重量

 

物理形體具有質量,當受到外力驅使時能夠運動。因此,物體不能突然開始或結束運動。突然開始運動或突然結束運動的動效是生硬的,顯得不自然,無法符合用戶的預期,也無法取悅用戶。

 

最佳案例

 

Material Design中動效設計的關鍵是保證物體運動的物理感,同時不犧牲物體運動的優雅感、簡約感、美感,讓物體的運動充滿魔力,打造無縫式的用戶體驗。下面是一些動效設計規範,通過這些規範,可以理解如何用動效展示理念。

 

應該:

 

 

靈活的加速、溫和的減速,這樣的動效讓用戶感到自然且愉悅。

 

不應該:

 

線性的運動讓人感到機械生硬。觀察運動曲線,我們可以看到在運動開始和結尾處,運動速率突然的改變,這讓人感到非常的突兀、不真實。

 

特殊案例:進場、退場

 

當物體進場時,確保物體進場時處於最大速率。這樣的運動便顯得非常自然:因為物體在進場前便開始了運動,而不是進場時才開始運動。同樣的,當物體退場時,要確保物體處於最大速率,而不是減速。在進場時緩入,在退場時緩出,這樣用戶的注意力會集中在動效上。然而,大多數情況下,這不是設計者想要的結果。

 

應該:

 

進場和退場時的速率為最大速率,能夠營造出自信感十足的動效。

 

不應該:

 

在進場時加速,退場時減速。這樣用戶就會因速率的變化而分心。

 


適當調整

 

不是所有的物體都以同樣的方式運動。輕量化/小型物體可以很快的完成加速和減速,以為內他們質量很小,很小的外力就可以產生加速度的變化。大型/較重的物體需要更多的時間加速,才能到達最大速度。我們需要思考一下這些物理規律應該如何應用到UI元素上,並思考用何種運動方式表達設計。

 


二、迅捷響應交互行為

動效的迅捷反饋,可以讓用戶充滿信任感和愉悅感。當用戶與應用交互時,所反饋的動效不但極具美感,符合物理邏輯,而且能夠愉悅用戶。反饋動效的設計必須深思熟慮且具有目的性,而不能隨性設計,反饋動效應溫和 ,不讓用戶分心。鼓勵用戶進一步探索應用:那麼,我再點點這裡試試呢

在material design中,應用應該具備迅捷反饋的動效,讓用戶充滿期待:
•觸控、語音輸入、鍵盤、滑鼠是首要考慮的輸入模式
•儘管UI元素是有形的,但是在物理上被限制在了設備屏幕之內。視覺線索和動效提供的線索能夠在用戶和設備之間建立溝通的巧玲,讓用戶確認自己的輸入有效,繼而指引用戶操作。

能夠迅捷反饋交互行為的動效,可以將應用帶到新的高度:原來是根據用戶請求來呈遞信息,而現在,動效的加入,賦予了人機溝通以真實感。

案例

 

表面層反饋

 

物體本身的反饋

 

徑向效果

表面層反饋

根據所接收的輸入時間,系統立即在人機互動的「接觸點」做出視覺反饋,以告知用戶已經確認輸入:例如,指尖觸控的接觸點,語音輸入時的麥克風圖標中心,以及鍵盤輸入時的恰當區域。這一設計理念來自墨水隱喻:用筆在紙張上寫字時,筆與紙的接觸點立即出現墨跡。

 


能夠闡釋接觸點的核心視覺機制是:觸控漣漪效果。設備會根據觸摸事件,立即在接觸點做出視覺表達。可以很好地闡釋按壓效果和語音輸入時音量變化。

最佳案例

視覺反饋在特定的輸入點出現:例如手指與屏幕的接觸點,或是麥克風圖標處。

 

觸控漣漪-按壓/釋放


觸控漣漪-拉進/拉出

物體本身的反饋

除了表面墨水式的動效反饋,物體本身也可以根據交互行為做出反應。物體可以因觸控或點擊而上升,上升用來闡釋物體的激活狀態。用戶可以通過觸控或點擊來生成新物體或者變換已經存在的物體,或者通過拖動和撥動來直接處理物體。

最佳案例

以觸控點為原點的動效反饋

當因為用戶直接交互而生成新物體時,物體表面層的擴張動效應該從接觸點開始:


應該:

物體從觸控點開始出現,視覺上將這一元素和觸控點聯繫到一起

 

不應該:

類似紙質的卡片從屏幕中央擴張,破壞了輸入和反饋的關係。


觸控導致物體上升


當一張卡片或一個單獨的元素被激活時,卡片應該上升,來暗示其激活狀態


徑向效果

在所有的用戶的交互行為中,輸入行為往往具備中心點:用戶通過點擊/觸控這一中心點,來表明他們的操作意圖。必須圍繞用戶的輸入中心點構建強有力的視覺聯繫,讓用戶確認操作有效,無論是觸控螢幕操作時的接觸點,或是語音輸入時的麥克風圖標,這都是輸入的中心點。要圍繞輸入中心點,根據距離,構建出操作的漣漪動效。

輸入都具備中心點,漣漪效果要過應該從觸控時接觸點,語音輸入的麥克風圖標,鍵盤輸入時特定的按鍵而展開。

注意中心點距離因素的影響,離中心點近的操作,操作反饋更明顯。構建操作的「漣漪效果」

 


三、有意義的轉場效果

對於用戶來說,很難弄清楚應該在應用的何處集中注意力,也很難搞清元素是如何從A點運動到B點的。審慎、精心設計的動效能夠高效引導用戶的視覺注意點,讓整體效果循序漸進,避免用戶因為元素重新排列或者布局改變而感到混淆。同時提升整體的美感和使用體驗。動效設計不應該僅僅美麗,而且還應該具備功能性目的。

案例

 

 

視覺連貫性

兩種不同視覺狀態的轉場應該平滑、看起來毫不費力,除此之外,要讓用戶感到明晰而不混淆。精心設計的轉場效果能夠讓用戶清楚的知道應用的哪一部分是重點。在轉場效果中,往往具備以下三類元素:
•進場元素:無論是新生成的元素,或者是變換進入屏幕的元素,設計者需著重筆墨介紹一番新進場的元素。
•退場元素:指的是在新場景下不復存在的元素,退場元素必須溫和、不突兀的退場。
•共享元素:指的是從轉場開始到轉場結束都存在的元素,可以是一個圖標,也可以是點擊後放大的圖像。

注意

當需要設計動效時,需要考慮以下:
•要考慮用戶的視覺聚焦,以及應該如何引導用戶。什么元素和動畫效果可以達成設計目標?怎樣利用進場元素、退場元素、分享元素來強調或者弱化轉場效果?
•在設計界面時考慮轉場效果,並通過色彩和共享元素,來暗示不同的轉場狀態。
•審慎添加動效,要讓運動的元素充滿愉悅感和明細感。

案例

 

應該:在具有層級關係的界面中,可以考慮轉場效果。例如上圖,進場的界面滑入,而點擊後的墨水效果漸隱。雖然全屏幕的滑動效果不是很令人滿意,但是比突兀的切換好。

 

不應該:不要生硬的切換,要避免突兀感,這種生硬的轉場讓用戶很難理解前一界面和現有界面的轉場關係。

富有層次的時間感

在構建轉場效果時,要考慮哪些元素需要運動,他們的運動的持續時間又是多久,從何時開始,何時結束?確保動效能夠表達出信息層級。這樣用戶便可知道哪些元素最為重要,並且創建視覺軌跡

最重要的元素最先出現,最次要的最後出現,但是這並不是定式。轉場元素的運動要具備分明的時間感,整體流暢而不雜亂。

案例


 

 

應該:運動要錯開,富有層次感,來指引用戶的視覺軌跡

 

不應該:所有元素同時運動,沒有暗示出重點元素。如果所有元素同等重要,那麼可以考慮將他們編組,共同構建更大範圍的動畫效果。

編排一致

所有在屏幕中進行轉場動效的元素,都必須要精心編排。所有元素的運動路徑必須富有運動感,並且要有序。雜亂的動效會讓人感到分心。精心編排動效的應用,甚至可以利用動效來指引用戶交互。當轉場效果秩序分明時,用戶能夠加深對應用的理解。他們不會因為動效而感到迷惑。

最佳案例
•避免線性運動,除非是沿軸線的運動,或者多個元素一致朝某個點運動時
•確保元素的運動要和整體轉場效果在物理規律上契合。多個元素運動時避免雜亂的運動感和重疊的運動軌跡。
•考慮深度、層級關係
•試著畫出屏幕上所有運動元素的運動軌跡,看看軌跡是否是美麗且足有有序的。並觀察運動軌跡是否清晰。
•要保證進場元素和退場元素空間感的一致性。

案例

 

應該:通過有序的動效吸引用戶的注意

 

不應該:物體的進場和退場時運動方向非常隨機。因動效的無序、不一致而混淆用戶。

 


四、細節愉悅用戶

細節愉悅用戶

在應用中大大小小的元素都可以進行動效設計,無論是細膩的圖標小動效,或是整體的關鍵性轉場效果和交互動效。所有的元素緊密合作,一致構建出無縫的使用體驗,讓應用美麗而具功能性。

動效的最基本使用在於轉場動效,除了這種顯而易見的地方,應用還應該在一些小處愉悅用戶。比方說菜單圖標會因為點擊而變成箭頭:除了能夠提示用戶操作,而且能讓用戶感受到驚喜。用戶會關注這些小處的細節。

相關焦點

  • 關於在iOS當中實踐Material Design的訪談
    界面上的多數交互元素不能只是憑空的出現或消失 – 交互行為與觸發的結果之間沒有視覺上的關聯,用戶很快會迷失方向。交互元素自身的行為特質對於我們理解和記憶界面的交互方式非常重要。譬如我給你一個界面,上面有一個返回按鈕。當你點擊這個按鈕的時候,自然會期望有事情發生。
  • 一篇文章搞懂原子設計 - 視覺同盟(VisionUnion.com)
    一方面設計師使用真實圖片、文案代替了模板中的佔位符,另一方面通過各類合理的視覺表達來高效得為用戶傳達信息或者調性。這一步在拋開視覺還原度的條件下基本就算是產品的最終形態了。而2016年由螞蟻金服團隊所發布的Antdesign,則是國內使用原子設計而搭建的首個設計系統。它最大的亮點應該是詳盡提供了開箱即用的組件框架,並且覆蓋了絕大部分的應用場景。對於當時中後臺設計慘不忍睹沒眼看的產品來說堪稱是一片綠洲。
  • 手把手教你推導一套色彩體系 - 視覺同盟(VisionUnion.com)
    我們只需要將那些視覺明暗差距明顯的顏色進行調整。注意,並非所有的顏色都要調整到品牌色的感官明度,這些值僅僅是一個參考。最終的校正依然取決於我們的視覺!比如黃色感官明度本身很高,但是視覺緩和、不像綠色那麼刺激,所以基本無需校正。
  • Material design與iOS Human Interface Guidelines對比分析
    本篇分析對比是基於各自官網最新的Material design與iOS Human Interface Guidelines文檔,官方文檔地址將在文末給出,供各位交流學習。規範目標與原則Material Design(以下簡稱MD)是谷歌設計的一套視覺語言設計規範,也是Android Design演進的一種設計規範。在MD開篇,谷歌公司就表達了自己的期望:創造一種視覺語言,能夠將經典的設計原則與創新的科學技術結合起來;開發一個能夠跨平臺使用的底層系統,保證用戶在不同平臺上都能夠擁有統一的體驗。
  • material2 發布 7.1.0,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.1.0 版本,這主要是一個 bug 修復版本,當然也提供了新特性和改進性能。
  • Material Design 有什麼缺點?
    答|百度派 @雙馬尾蘿莉醬谷歌推出了全新的設計語言Material Design。谷歌表示,這種設計語言旨在為行動電話、平板電腦、臺式機和其他平臺提供更為一致和更廣泛的「外觀和感覺」。成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本,這主要是一個 bug
  • 谷歌推出AllWhite視覺風格,這是MaterialDesign語言的新變化嗎?
    作為極簡風格的代表者,谷歌本次的視覺語言風格看來是要將極簡進行到底了。從本次視頻我們可以看出,谷歌將原先豐富的色彩幾乎轉為了純白色。一起來看看這股「All-White」視覺語言吧。UI設計變化本次「All- White」在UI視覺設計上較之前有著明顯的區別。
  • Asia-Pacific Space Design Awards
    (e.g.Planning, construction, landscape, interior design and furnishings art) aroundthe Asia-Pacific regions and around the world.
  • 谷歌將給 Chrome 做一次全新的 Material Design
    2月份,有消息稱,谷歌將對 Chrome 動一次大手術,使用全新的「Material Design 2」UI設計語言。
  • Google I/O帶來的Material Design的7個重大更新
    隨著android P的誕生,谷歌宣布了 Material Design 應用程式視覺設計語言的幾項更新。本文主要就Material Design更新內容進行解讀。2018年5月9日凌晨1點,谷歌I/O開發者大會如期在美國加州山景城的海濱露天劇場拉開帷幕,谷歌不僅對AI技術進行了更深層次的提升,同時也對Android系統進行了更新。
  • 谷歌Material Design 2曝光
    現在,谷歌可能正在開發其繼任者,採用新顏色、新圖標和新間距。由XDA開發者發現的一個Chromium提交內容揭示了一種叫做「新的谷歌Material Design 2標準」的東西,這個特定的條目描述了應用於Chrome瀏覽器地址欄上方的標籤和選項卡界面。首先是顏色,Material Design 2使用的灰色陰影跟現有的灰色不同,有些偏淺藍色的色調,如下所示。
  • 【NEXT Collections】關於實踐 Material Design 的三個問題
    這篇文章是來自 UC 瀏覽器產品經理、極簡匯率產品設計師郎啟旭的約稿。也是 NEXT Collections 系列的第一篇。其中,理解 Material Design 最核心的是要理解 material 的隱喻和特性:空間層級、陰影、質感、表面和觸摸反應。另外,知乎上也有相關討論可以一看。 為什麼要採用 Material Design? 關於這個問題的答案,無外乎內外兩個角度。
  • 設計即功能:淺析谷歌MaterialDesign特性
    在2014年的Google I/O大會上,谷歌發布了Android L即Android 5.0,並推出Material Design,重新統一了谷歌的設計語言,確立了谷歌設計的未來發展方向。IT之家時至今日,Android系統已更迭到7.1版本,再提起Material Design似乎有些過時了,但是我們不妨重新溫習一下這種設計語言,再回看谷歌利用這種設計理念所創造出的後代系統,似乎會品嘗到不一樣的滋味。Material Design的特點主要體現在以下幾個方面。
  • 谷歌Material Design UI 真正美在哪裡?設計即功能
    而且,不止於谷歌和安卓app。事實上,多重層疊的概念並非谷歌首創,不過,谷歌對其進行了更深一層的開發——在觸覺體驗中滲入大膽活力的審美效果(本質設計)。那麼,其實,Material Design真正的優勢在哪呢?首先,我們來具體了解一下Material Design:
  • 用Axure製作Material Design的APP原型(附元件庫下載)
    統一交互的動效時間。在我的原型中,有兩個固定動效時間300ms和500ms。300ms作為短動效時間,如列表的展開收起,snackbars的顯示/隱藏等。500ms作為長動效,用在提示框的顯示/隱藏等。合理的動效能讓原型更完整,合理的動效時間能讓原型更優雅。這是加分項,沒有也無所謂。這篇就先這樣,之後如果想到什麼再補充。
  • 視覺工具包torchvision重大更新:支持分割模型、檢測模型
    慄子 發自 凹非寺量子位 出品 | 公眾號 QbitAIPyTorch宣布了視覺工具包torchvision的重大更新。終於來到torchvision 0.3了。另外,torchvision還有了不少視覺專用的C++/Cuda算子。消息一出,小夥伴們紛紛奔走相告。現在,來仔細觀察一下,新的torchvision都有哪裡變強了。哪些功能是新來的?
  • 扁平化設計與Material Design區別在哪裡?
    如果走得太遠,很容易不小心創建一個毫無特色的和看起來一般的網站一些網站,或應用程式,需要複雜的視覺線索來指導用戶來進行如何使用,這是扁平設計的一個主要的失敗點。一個常見的抱怨是,靜態的矢量圖形,它缺乏陰影,邊緣很難分辨是否可點擊按鈕它的普遍性很難創建一個看起來很獨特的網站或應用程式。
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    vuetify-home-pageMaterial Design好看是好看,但由於 UI 和動效細節非常多,純手寫這種風格的輪子非常費勁,而 Vuetify 就是一個能幫助開發者快速構建基於 Material Design 風格應用的優秀框架。
  • 「Material Design」的九大設計原則
    谷歌發布新作業系統「 L Developer Preview」後,也同步推出了可視化語言Material Design,它的設計美學將會融入到谷歌所有的平臺之中,包括Chrome OS和網頁,它也將形成一個統一的外觀,將所有的產品捆綁在一起。