Material Design-Surface平面第一篇


知識點

  1. 理解 Material Design 中屏幕的平面陰影和觸摸響應
  2. 熟悉平面的使用規范
  3. 掌握 Material Design 樣式的自定義平面創建過程

參考資料

udacity-在 Android 應用中使用材料設計

屏幕平面


屏幕上的一切都在其中的一個平面上,包括所有文字、圖標、照片、按鈕等人和 UI 元素。雖然這些平面具有表明現實行為的實體屬性,但它們又不像現實世界的行為一樣收到限制。我們可以通過平面的一小部分的物理性,來顯示事物之間的差異性和相關性。

平面陰影


平面陰影

一般來說,物體離我們越近就越容易在視覺上引起我們的注意,根據物體的尺寸,以及它們覆蓋和投射陰影的方式,我們能區分哪些物體離我們更近,根據它們背后的物體來做出判斷。所以我們可以在 UI 中使用深度列表將注意力引導至重要的元素。

在 2D 屏幕中如何運用這些概念呢?

我們使用陰影來傳遞一個平面相對於另一個平面的高度,離你更近的平面將投射出更大的陰影。要正確繪制出這些陰影,需要進行大量復雜的數學運算。而我們只需在 Android 上對代碼進行少量編輯,就能動態繪制出這些陰影來。

具體可查看官方文檔-高度和陰影

使用平面


一個平面就是一個容納內容的容器,它能夠實現與其它元素的分組和分離。

根據內容創建平面

從經驗上講,如果內容屬於同類,瀏覽和對比就十分重要,所以應該將它們放在同一個平面上,如果我們需要展現不同類型的條目,將它們放置在各自的平面上是最合適的。

引導注意力是一門強大的技術。但是需要恰當的使用,平面上一次性出現過多的獨立平面會分散注意力。從經驗上講,最好不要一次性在屏幕上出現 5 個以上的平面。

實現平面


要創建平面,關鍵是設置高度值(elevation)。高度是指平面與背面之間的距離(the distance above the back plane),數值越大,陰影越大(higher values produce larger shadows),也越分散,有一種離底面更高更遠的視覺感。

FAB(FloatingActionButton)-懸浮操作按鈕

Material Design 的標志性設計模式之一就是 FAB。它懸浮在應用內容的上方,可以促使我們進行重要的操作。

FAB 具有標准的尺寸和高度,所以它在各應用程序之間很容易被辨認出來。它的直徑為 40 或 56dp。通常靜止高度為 6dp,當被按下時,這個高度將達到 12dp。疊放在某個適當角落時可以很好的對接。

避免在應用中過度使用它,注意在每個屏幕中最多使用一個 FAB。不是每個屏幕上都需要一個 FAB,但如果屏幕上有一個明確的操作,那么這就是凸顯它的一個好方法。如果你對確認哪個操作才是 FAB 感到糾結,那就意味着你很可能不需要 FAB。

什么時候用浮動操作按鈕?

是你正在做的一件很明確的事,很可能在打開應用時就想這么做。

平面觸摸響應


Material Design 中,響應觸摸的視覺反饋主要有兩種形式。

一種是微弱的波紋效果,從你的指尖向外擴散,一直延伸到所在平面的邊界;對於無邊界的元素,波紋將延伸至足夠遠的位置,使你感受到元素的大小。

我們有時稱之為“墨水波紋”(ink ripple),因為它是平面上擴散開來的數字墨水。

平面反應

這種始於指尖的發散式動效是 Material Design 的一個關鍵主題。用戶觸發波紋效果,不僅僅能使用戶感受到自身對 UI 的操控感,還能使 UI 提供滿意的用戶體驗。

接下來看第二種形式。

對於較小的交互式平面,平面本身可以抬升至你指尖的位置。

這里寫圖片描述

當按下 FAB 時,它會進行抬升以靠近你的指尖。

自定義添加水波/表面高度


設計支持庫已經有一個內置的 FAB 小部件,它已經具備波紋效果和平面高度。自定義一個類似的小部件,可以讓我們明白背后的原理。

這里寫圖片描述

創建 drawable/oval_shape 文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="?attr/colorAccent"/>
</shape>

創建drawable/fab_plus矢量圖文件

通過 Android Studio 創建矢量圖資源,new -> Vector Asset ->

創建矢量圖資源

drawable 目錄下會生成 vector資源文件

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">

<path
android:fillColor="#fafafa"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>

</vector>

添加一個波紋效果

要啟用波紋效果,我們需要將按鈕背景從靜態形狀變成被波紋標簽包裹的形狀。

創建 drawable/oval_ripple 文件,需要注意的是波紋標簽的引用需要 minSdkVersion 為 21 或以上版本。

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">

<item>
<shape android:shape="oval">
<solid android:color="?android:colorAccent"/>
</shape>
</item>
</ripple>

其中的 colorControlHighlight 是波紋和列表選擇器等使用的顏色,oval_shapeoval_ripple 的主要區別在於我們的形狀是被波紋標簽包裹的。

添加觸摸響應

對自定義的小部件添加一個觸摸響應,使其進行抬升來迎合我們的觸摸。我們可以添加一個狀態列表動畫器(state list animator)來運行一個動畫,在用戶觸摸按鈕時運行動畫。

animator 目錄下,創建 fab_raise 文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="8dp"
android:valueType="floatType"/>

</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType"/>

</item>
</selector>

有兩個動畫器(object animator),一個在按鈕被按下時使用,一個在按鈕被釋放時使用。注意我們如何將按鈕的 Z 過度屬性 translationZ 制作成動畫。

最終對 ImageButton 的屬性設置

 <ImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="end|bottom"
android:layout_marginRight="4dp"
android:layout_marginBottom="4dp"
android:elevation="6dp"
android:src="@drawable/fab_plus"
android:layout_alignParentBottom="true"
android:background="@drawable/oval_ripple"
android:stateListAnimator="@animator/fab_raise"
android:id="@+id/imageButton" />

總結


Material Design 中設計平面的理念,就是通過平面陰影平面觸摸響應來使得 UI 變得生動和直觀。我們應該根據實際的情況合理使用平面。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com