Material Design開發文章系列3:Material Design Check List

zhanliquan 8年前發布 | 20K 次閱讀 Android開發 移動開發

----------------------------系列文章概要---------------------------------------

Material Design出現之后國外網站上出現和很多關于Material Design的設計與開發文章，有很多是重復的，google官方博客將這些文章搜集整理成了幾篇比較經典的文章，我認為對于開發者來講，只需要知道其中三篇就能掌握絕大多數知識了。這三篇文章的原文地址分別是（當然KX上網是必須的）：

http://android-developers.blogspot.hk/2014/10/appcompat-v21-material-design-for-pre.html

http://android-developers.blogspot.hk/2014/10/implementing-material-design-in-your.html

http://android-developers.blogspot.hk/2014/10/material-design-on-android-checklist.html

還好這三篇文章都被翻譯了出來，而且還算是比較優質的翻譯。后兩篇主要從整體設計介紹了一個標準的Material Design的App應該遵循哪些設計標準，并告訴你如何在你的代碼中實現，并介紹了如何向前兼容。其實后兩篇在整體結構上是差不多的，只是在Implementing material design in your Android app中，側重的是Material Design的設計標準，而Material Design on Android Checklist則側重的是實現細節和注意事項。

其余兩篇譯文文非別是：

Material Design開發文章系列1：AppCompat V21：將 Materia Design 兼容到于5.0之前的設備

Material Design開發文章系列2：在你的App中實現Material Design

 

正文

《Material Design開發文章系列-3:Material Design Check List》

 

主要從細節實現方面提醒你應該如何更好的實現Material Design，標注Signature element為強調部分，標注InCode的為實現方式。

 

因為用戶將很快使用Android5.0系統了，而且也會慢慢習慣Material Design的app，比如Gmail的未來替代者inbox，Google Play Tumblr等，因此Google為了開發者能夠更快的支持Material Design的app以及Android 5.0，連續推出了3篇文章。在下面這篇文章中，Google為我們提供了一個表單，這個表單列出了Material Design應該具備的一些風格。你在實現Material Design的時候，可以參照下面的表單。整個表單根據Material Design的4個關鍵方面分為4個部分。下面我們就介紹一下整個表單內容。如果你使用了以下中的幾個模塊，特別是標注為signature elements的元素，并遵循傳統的Android設計最佳實踐，那么你已經朝著迷人的Material Design設計邁進了。



Tangible Surfaces 有形的外觀

UI由不同層次的表層組成，每層的下面附有陰影。

Signature element: 陰影
陰影用于和前部的元素交互，幫助聚焦和建立層級效果。

In Code:在5.0系統里，這樣的陰影效果直接由屬性：android:elevation 和 android:translationZ 提供，而在之前的版本，陰影通常由PNG圖片資源來實現。

 

Surfaces and layering.

</blockquote>


陰影和表層被用于連貫和結構性的情景中。每一個陰影標示著一個新的表層，這些表層的構建需要細心和深思熟慮。一個屏幕中通常擁有2到10個表層，避免太多的內嵌層。可滑動的內容滑動到屏幕的邊界或者另一個表層后面的時候鑄造了一層覆蓋在另一個表層上的陰影。永遠不要剪裁一個可見邊界的元素這樣會導致一種沒有邊界的感覺。換句話說，你應該很少滑動表層上的內容，而是滑動整個表層。

 

In Code: 在使用ListView和ScrollView的時候，使用 android:clipToPadding=false 來避免邊界的剪裁。

表層應該是簡單，而且是純色的背景。


A Bold、Print-Like Aesthetic 一種加粗，打印風格的審美


你所展示的內容來自于一種經典的打印模式，重點在于色彩的使用，有語境的圖片和結構性的空白區域。

Primary and accent colors.

</blockquote>

 

Signature element: 主調色彩和強調色彩
在顏色層面背景和關鍵的組件上，使用了一種主調色彩和一種強調色彩，比如text和checkbox。這種強調色彩和基調色彩形成了鮮明的對比，比如一個app可以使用一種深藍色作為基調顏色，而把霓虹色作為強調的顏色。

這種強調的色彩是極其鮮明的，通常用于關鍵的組件上，引起用戶的注意，比如一個floating button，selected tab 或表格區域。

In code: 通過在你的主題中設置 android:colorPrimary and android:colorAccent屬性（如果使用appCompat，不用再去設置“android”前綴了），AppCompat將會自動的為那些text，checkbox和一些在L之前的組件著色。

Signature element:透明的狀態欄
在5.0系統上，status bar會被填充匹配app的基調，或者當前屏幕的內容的色彩。對于全屏填充的Image效果，status bar可以是透明的。
可以通過在你的主題中設置android:colorPrimaryDark 或者 android:statusBarColor或者調用Window.setStatusBarColor來實現。

icon/photos/images和其它前部元素的表層會被“墨水”著色。它們不需要陰影也不用使用梯度效果。

顏色可以從圖片中抽取用于適配在表層的UI元素。
InCode: 通過Palette support library來實現。

Signature element: 使用material design的icon

icons 的使用請遵從 system icon guidelines，標準的icons請使用material design的icon，（這個已經在GitHub中開源）

向導：http://www.google.com/design/spec/style/icons.html#icons-system-icons
資源：http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components

照片通常是沉浸并且是全屏的，比如，對于詳情的界面，使用一種邊緣到邊緣的模式，甚至可以出現在app bar或者 status bar的底部。
In code: 新的 Toolbar widget 可以是透明的并且直接放在你的布局中，對于status bar的問題,看以參考在Stack Overflow 上的相關問題：
http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880

 

Signature element: 適當的尺寸

合適的地方，text內容，app titles,應該對齊3個keylines：

http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-keylines-and-spacing

在手機上，那些 keylines 距離左邊是16dp和72dp，距離屏幕右邊緣是16dp。在平板上是24dp和80dp。

UI元素的對齊方式和大小應該根據一個8dp的網格。比如，app bar在手機上為56dp，在平板上是64dp。Padding和Margins可以使用像：8dp,16dp,24dp的值等等，更精確的text位置是使用一個4dp的網格

Keylines

</blockquote>



Authentic Motion 真實的動效

在不同的app上下文和狀態下，動效可以提供一種可視化和連貫的體驗。通過小規模的使用切換動畫可以增加一些情趣。而不是為了動效而動效。總的來說，UI和內容元素不會簡單的消失或者出現，它們會以動畫的方式移動入到一個單元或者單獨的出現。

 

Signature element: "hero"切換動畫

當你按下一個條目去看詳情的時候。這里有個叫“hero”的切換動畫，它會移動并且縮放它所在的位置和詳情屏幕之間的條目。
InCode：在SDK中它被叫做 “shared element transitions” ，support版本的FragmentTransaction也支持了shared element support。

"Hero" Transiton

 

 

Signature element: Ripple effects
Ripple effects 為你按下條目的增加了反饋效果。
InCode：默認的 android:selectableItemBackground 和 android:selectableItemBackgroundBorderless 擁有這種效果，或者你可以使用RippleDrawable (<ripple>) 去自定義效果。在5.0之前的設備上，ripples沒有這種預期的效果，因此，遵從默認的android:selectableItemBackground 行為。

Signature element:  circular “reveal” animation.
UI元素可以通過一個圓形的”reveal"動畫出現。
InCode：查看文檔或者ViewAnimationUtils類。

Signature element:Vector動畫圖標
在更微妙更賞心悅目的情況下使用動畫，比如去轉換icon 的狀態和text的狀態。比如，一個“+”圖標可以變形為一個“x”標識，或者一個概述的圖標可以變成一個柵欄效果。
InCode：icon的變化可以通過AnimatedStateListDrawable 和相應的XML文件來實現，你可以在Google I/O app源碼中找到。它支持了動畫的vector圖標。

動畫和切換通常在300ms內。

交叉淡入淡出通常被平移和滑動切換代替：豎直的滑動產生的底部導航，水平滑動產生的側面導航。對于滑動的轉換，加速和微小的減速要好于簡單的線性移動。
可以參考：http://www.google.com/design/spec/animation/authentic-motion.html#


Adaptive Design（UI Patterns）

有型的外表，大膽的圖形設計，加上有意義的動畫效果帶來了一種連貫跨設備的體驗，無論在手機，平板，筆記本，TV，可穿戴設備，汽車上，等都有同樣的體驗效果。另外，下面的關鍵的UI 設計模式有助于在不同設備之間建立一種連貫的體驗。

app使用了響應式設計，確保了在不同尺寸的屏幕和不同的方向上能夠適當的布局。可以參考平板App樣式的清單表去優化那些面向平板的App.http://developer.android.com/distribute/essentials/quality/tablets.html

在material design中，詳情界面的切換通常都是“Hero"動畫的。在多面板布局中，app可以使用多個toobar去代替一些下一步的相關操作。

Signature element: FAB

如果合適的話，App推薦floating action button作為一個屏幕上的關鍵操作。FAB是一個圓形外表，附帶有陰影，表面色彩采用亮色，強調色。它可以用于執行一些主要的操作，比如，發送，撰寫，創建，添加，或者搜索，大約8dp的elevation。通常懸浮在屏幕的右下角，或者邊界的中心位置。

The floating action button


App Bar

Signature element:
App使用了標準的Android App bar，這個App Bar沒有使用app圖標。顏色和印刷效果替代了品牌的推廣。這個App Bar帶有陰影，或者擁有一個帶有陰影的表層。通常App Bar 4dp elevation。
InCode：在5.0中使用新的ToolBar Widget引入到View層級視圖中。AppCompat提供了兼容的android.support.v7.widget.Toolbar來實現它。

app bar可能是標準高度的2到3倍，在滑動的時候，app bar可以恢復到正常高度。

app bar在有些情況下可以完全透明，可以在一個圖片之上附有text和操作，比如Google Play Newsstand 應用。http://www.google.com/design/spec/style/imagery.html#imagery-principles


App bar title 應該和第二條keyline對齊。
InCode：在使用Toobar widge的時候，請使用 android:contentInsetStart屬性。

在適當的時候，往下滑的時候，app bar可以滑出屏幕，為內容留下更多垂直方向的空間。往上滑動的時候，app bar可以恢復顯示。（這個式樣：quickReturn）

 

Tabs

Signature element:Tabs應該遵從最新的 material design 設計風格。在垂直方向沒有分割線，如果app使用了top-level的話，tab可以作為app bar的一部分。http://www.google.com/design/spec/components/tabs.html#tabs-usage

InCode: 可以參考在SDK中的示例 SlidingTabsBasic 或者Google I/O app source（My Schedule 部分）另外加上 前兩天分享的 SlidingTabStrip

Tabs應該支持手勢滑動
InCode: 所有的Tabs應該使用support lib中的ViewPager 控件

在選中Tabs時，應該有一個前部顏色的變化或者使用強調色彩的顏色條。在tabs滑動的時候，這個線條應該平滑的響應。

 

 

抽屜導航

Signature element:

如果你的app使用了導航的Drawer，它也應該遵從最新的material design風格。drawer應該出現在app bar上面，也應該以半透明的方式出現在status bar后面。
InCode：使用support lib 中的DrawerLayout控件和上述談到的ToolBar 控件實現抽屜效果。在stack over flow中有相關的問題參考：
http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880

Signature element:左上角圖標

在app bar最左邊的icon是一個抽屜的指示器。http://www.google.com/design/spec/layout/structure.html#structure-app-bar

app icon 在app bar中是不可見的。可選擇的，在早期版本中，如果app擁有一個抽屜，那么最左邊的app icon會保留并且會變窄，比如在4.0中。
標準的抽屜：在手機上不要寬于320dp，在平板上不要寬于400dp,但是不要小于屏幕寬度 - 標準的toolbar高度，比如在Nexus5中：360dp - 56dp = 304dp
每一個抽屜條目的應該沿著grid網格，所有的行高為 48dp，上下8dp邊距。

Text 和 icon 應該沿著主線

 

越來越多的App來自google play生態系統將會更新到Material Design，預期2014冬季對于Android的設計來說是一個大的變更期。更多關于Material design設計資源，可以參考油Tube視頻：https://www.油Tube.com/playlist?list=PLOU2XLYxmsIJFcNKpAV9B_aQmz2h68fw_

更多的開發者資源，可以參考文檔：http://developer.android.com/training/material/index.html

 

示例集合

https://github.com/rahulparsani/google-io-2014-compat

 

https://github.com/romainguy/google-io-2014

 

 

https://github.com/dexafree/MaterialList

 

https://github.com/gabrielemariotti/cardslib


 

FAB

https://github.com/FaizMalkani/FloatingActionButton（無圖）

https://github.com/futuresimple/android-floating-action-button

 

https://github.com/telly/FloatingAction

 

https://github.com/makovkastar/FloatingActionButton

 

 

Menu & Drawer

 

https://github.com/markushi/android-ui

 

https://github.com/balysv/material-menu

 

https://github.com/saulmm/Android-Material-Example


https://github.com/ikimuhendis/LDrawer


Ripple


https://github.com/markushi/android-ui

 

https://github.com/traex/RippleEffect


https://github.com/siriscac/RippleView

 

Transition

https://github.com/saulmm/android_L_preview_example(圖太大)

https://github.com/andkulikov/transitions-everywhere

 

Vector

https://github.com/chiuki/animated-vector-drawable

 

Dialog


https://github.com/drakeet/MaterialDialog

 

https://github.com/r0adkll/PostOffice

 

https://github.com/lewisjdeane/L-Dialogs

 

 

 

 

 本文由用戶 zhanliquan 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！