知識點
- 理解 Material Design 中屏幕的平面陰影和觸摸響應
- 熟悉平面的使用規范
- 掌握 Material Design 樣式的自定義平面創建過程
參考資料
屏幕上的一切都在其中的一個平面上,包括所有文字、圖標、照片、按鈕等人和 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_shape
和 oval_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 變得生動和直觀。我們應該根據實際的情況合理使用平面。
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。