關於Android Lollipop

標籤：

關於一些對以往功能組件的替換：
1.app bar替換action bar
2.關於共用元素動畫示範：
http://material-design.storage.googleapis.com/videos/animation-meaningfultransitions-view_contact_large_xhdpi.webm

彭澎
連結：https://www.zhihu.com/question/24276709/answer/27693028
來源：知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

翻牆學習了一下官方規範：
http://www.google.com/design/spec/material-design/introduction.html

幾個驚喜點：
1. 卡片
這應該是Google這幾年風格探索中，最精巧又實用的成果了。等了這麼久，終於在Material Design中被Google扶正了，我甚至覺得，整個Material Design就是圍繞卡片這一創意而生的！

Google對卡片的使用情境，外觀，互動方式做了非常嚴謹的規範

但一方面Google還是很克制的，在規範中強調了一些不適合使用卡片的情境，例如展示一組雷同內容的列表，卡片這種強烈的區塊分割會導致瀏覽效率下降。

2. Z 軸的概念
通過布局和陰影，讓螢幕上的元素產生層次感，這種層次感可以讓使用者輕鬆理解元素的重要性及相互之間的關係。

雖然蘋果的 iOS 和 OS X 早就大量使用陰影，但其實並沒有 Z 這個概念，而更多的是一種裝飾。所以 Google 說：Depth is not ornament. 深度感不是為了裝飾而存在，而是為了功能！

為此 Google 居然喪心病狂地定義了5種不同的Z軸狀態，及其對應的陰影的尺寸！

在實際使用中，如，陰影可以很好地賦予按鈕的輪廓，讓按鈕凸顯，感覺浮起在白底之上，有按下去的衝動。

3. 有意義的動畫
這次的 Material Design 規範，動畫單獨開出一個章節大書特書，而且放在第二章（第一章是導覽），可見 Google 長期在動畫的精妙效果上被蘋果壓制準備一血前恥的決心。

除了強調了動畫對互動相應的重要性外，Google還提出了要做有意義的動畫效果，規範裡把元素在動畫轉場中的表現分為三類：
進場元素
退場元素
共用元素
前兩者好理解，如中的連絡人頭像和名稱，就屬於共用元素，即互動實施的元素。這樣使用者很容易聚焦，很容易理解轉場前後元素之間的關係。

知乎不支援gif，請去原地址看這個效果：（可能需翻牆）
http://material-design.storage.googleapis.com/videos/animation-meaningfultransitions-view_contact_large_xhdpi.webm

另外，該章節中對動畫速率，層次感，細節等說明，也非常有啟發性。

其他一些 Android 原有特性的最佳化
1. 下拉式功能表
Android 4.X 時代的 spinner 被直接升級成 Menu，在原有位置擴充展開的樣式更容易理解。我要吐槽一下 iOS 上一直缺乏這麼一個簡單輕量的下拉選單的控制項……

2. 提示
用 Snackbars 取代了 Android 4.X 時代的 Toasts，可以選擇是否包含一個 actions 按鈕，終於可以原生實現 Gmail for Android 刪除郵件時 undo 的效果了。

3. 抽屜
同樣也是 Android 4.X 時代的抽屜導航，也被統一叫做 Side Nav，從Z軸上看 Side Nav 是在最頂層。

4. 按鈕
規範對所有的按鈕做了重新定義：
Floating action button：浮動按鈕，是頁面中的住按鈕，頁面中只能有一個，代表了該頁面最核心的唯一操作
Raised button：用於圖文混合展示時，需凸顯按鈕時使用
Flat button：用於對話方塊

浮動按鈕可以說是 Material Design 中很亮眼，也很大膽的一個設計，為了防止被濫用，Google做了大量規範說明使用情境……

讚美的部分結束了，下面是吐槽：
總而言之，在行動裝置互動設計領域，比起蘋果，Google還是略顯稚嫩……

蘋果6.0之前的設計指南（ iOS Human Interface Guidelines），在介面設計原則和使用者體驗指南這兩個章節投入了大量的篇幅，向讀者講述他們對智慧型裝置時代下設計的理解，讀起來猶如一個白鬍子老人坐在你面前，開啟一本厚厚的曆史書，娓娓地道出：“long long ago…”

畢竟蘋果重新設計了手機，也重新定義了智慧型裝置的人機互動準則，這方面無論 Google 還是 Microsoft 都是追隨者，從他們兩家的設計規範裡都能看出一個追隨者的急躁，急於向開發人員宣講他們的語言，灌輸他們的思路，更多更像是一本說明書，而不是一本教材。

（當然蘋果在 iOS7 更新後的 HIG 中，關於原則和指南部分也大量縮減了，所以感覺 iOS7 的設計語言推出的比較倉促，其中有很多矛盾和難以自洽的地方，可見蘋果自己想的並不完善，並且還在不斷的改進中）

這次Google的大招，有一個特點就是全平台通用的設計語言，我理解應該主要目的是規範自己的產品線，其次才是指導 Android 廠商跟進，至於引領設計風潮，我覺得 Google 還到不了這樣的火候，也沒有這樣的野心……

關於android material design中的motion：
1.關於movement：
http://www.google.com/design/spec/motion/movement.html#
2.關於choreography（主要是共用元素）：
http://www.google.com/design/spec/motion/choreography.html#
3.關於Duration and easing：
http://www.google.com/design/spec/motion/duration-easing.html#

關於android material design的解讀：
劉縉
連結：https://www.zhihu.com/question/24276657/answer/27262112
來源：知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

參考The Verge對Matias Duarte的訪談：
http://www.theverge.com/2014/6/27/5849272/material-world-how-google-discovered-what-software-is-made-of
注意這一段（底線和粗體是筆者加的）：
Material Design “unified us in our thinking,” Duarte says, admitting that “it’s absolutely a constraint.” These constraints, he says, made design decisions easier and more consistent. Take, for example, the idea of flipping a card over to see what’s on the back. In Material Design’s world, that’s a cheat that doesn’t work. It’s as if the software is actual, physical stuff inside these devices, and there’s not space inside a phone to flip a card over, so Google doesn’t allow itself to do it.

Material Design Principles這個session中特別提到：這些飄來飄去的紙片，尺度和手機是一樣的；螢幕不是看另一個世界的視窗。這是什麼意思？

Material is metaphor，這是關於整個手機的隱喻，我們怎麼理解手裡這個扁扁的黑盒子？

早期的iPhone是“百變盒子”，通過運行不同的app，它可以類比各種我們熟悉的物品：手機，相機，計算機… 在螢幕技術的限制內，app儘力接近它們要類比的對象。在這個隱喻裡，螢幕上的各種按鈕本來應該是突出於螢幕之外的，雖然我們無法在觸覺上類比此效果。

Windows Phone則拒絕在手機層面使用隱喻。手機就是一種全新的物品而無需類比其他物品，螢幕的屬性就是像素而無需類比其他材質的屬性。WP的螢幕是完全的平，前後都沒有東西，所有UI元素都位於螢幕表面。

Android直到Holo，似乎都沒怎麼考慮過這個層面的問題。Android UI繼承了案頭UI，以功能性為主。

iOS7呢？從放縮、透視和毛玻璃的大量使用來看，似乎正是把螢幕看作通往另一個世界的視窗。UI元素可能位於螢幕後面相當遠的地方，而螢幕本身可以在這個虛擬世界中自由移動。

回到Material Design，這些漂浮的小紙片，就“真實”地漂浮在手機這個小盒子之內，而螢幕是一塊透明玻璃，使用者可以透過它一窺盒子內部。UI通過陰影所表現出的深度，不應該超過手機本身的厚度。

總結：
iOS（1-6）：手機是百變盒子。UI突出於螢幕。
Android（~Kitkat）：手機是小電腦。UI是什麼沒想過。
Windows Phone：手機就是手機。UI在螢幕表面。
iOS7：手機是觀察異世界的魔鏡。UI在另一個空間。
Android L：手機是裝著漂浮小紙片，有玻璃蓋子的盒子。UI在盒子內部。

P.S.
說到盒子裡的紙片，首先想到的是Paper Mario：http://papermario.nintendo.com/

看keynote時對Material Design這個提法十分不解，因為新UI風格並不注重表現材質，也沒有體現紙張的物理特點。

但看過Material Design的panel後，我覺得Matias Duarte確實已經用兩個詞說出了Material Design的核心，那就是所謂的material，並非紙/毛玻璃/皮革/木頭，而是一種在現實中不存在的”magical material”。

1. Material，即螢幕上的元素還是由類似真實世界的材料構成的物體，有類似的物理屬性（形狀比較固定，佔據一定空間，有前後遮擋關係，會投射陰影，可以移動…）。相對的，Metro（比較極端地）和Holo（比較中庸地）都傾向於螢幕上的元素只需要具有像素本身的屬性，而不必類比真實世界。

所以我們看到，在去掉陰影的潮流中，陰影又變得無處不在。另一方面，由於真實世界的物體通常不會瞬間、憑空出現和消失，所以平移、旋轉、擴充和畫面外飛入代替了原來從螢幕中間出現的過渡動畫。

1. Magical，即這種材料並不類比真實世界某種具體的材料。擬物化的一個問題是使用者對真實世界的材料有非常多的期望。把介面畫得太像真實物體，你無法實現使用者的期望。比如你可以在螢幕上畫出很像紙質通訊錄的通訊錄，然而使用者期望紙質通訊錄可以翻頁，可以折角，可以用筆批註，甚至有紙的觸感，而你沒有做到。
   
   相對的，不在視覺上類比特定材料，比較容易控制使用者的期望。一個不明材料製成的卡片，使用者的期望可能只是可以移動而已，而這恰恰是我們想通過卡片表達的隱喻。

2. Magical的另一面，即這種材料不必受真實世界材料的限制。仍以仿紙質通訊錄為例，使用者並不期望紙張上的文字可以上下滑動，在螢幕上實現這一功能反而會與使用者對材料的認知相矛盾。

而這種抽象的，”魔法”材料在必要時，不必受真實世界規則限制。比如大量使用的卡片伸縮變形動畫，一方面為符合日常經驗，變形要以連續的動畫而不是瞬間完成，另一方面我們不必費心考慮和表現卡片是如何伸縮的（比如表現為捲軸），反正它是魔法材料。又如UI元素像現實世界一樣有前後關係並投下陰影，但我們不必考慮它們是如何懸浮於空中，要不要加上支撐結構。

總結：既要充分利用“材料”帶來的現實世界隱喻，又不要被現實世界規律所束縛。Material Design看起來很正確，但很難把握度。

關於Android Lollipop