Android 美學設計基礎 <1>

標籤：平面   物理   ogr   動規   解析度   模組   延伸   ado   AC   

在做原型的時候，和設計師交流的過程中，發現在設計安卓互動的過程中，其實是存在一些基本規則的。那這些規則，可以保證第一應用美觀，第二不會出現反人類的開發難度，第三，用設計師的話說就是可能會有“最好的體現”，接著領導就發了一個安卓APP的設計的基本法給我（https://developer.android.com/design/），不過材料點進去基本都是英文的，跟著也比較亂，所以打算好好用自己的弱逼英語和歸納能力把這個基本法好好整理一下。

原材料從以下兩個方面對APP的設計進行介紹

• Material Foundation (素材基礎)
• Material Guidelines (素材基本法)

在素材基礎中，包括以下方面

• Foundation Overview(基礎總覽)
• Environment (環境)
• Layout (頁面配置)
• Navigation (導向與連結)
• Color (色彩)
• Typograph (字型樣式)
• Icongraph (表徵圖樣式)
• Shape(形狀)
• Motion(動畫效果)
• Interaction (互動)
• Communication (旨意傳達)

那麼我的文章以後會先從以上的各個方面去一一的做一個介紹

 

1.1 Foundation Overview (基礎總覽)

素材設計可以通過操控使用者互動地區，表面以及組成素材來控制一個APP的呈現效果。而且在設計的策略上，要分別從整體和細節兩個角度去入手考慮。

 

1.2 Environment (環境)

對於app的整體環境上，原文是分三點進行表述

• Surfaces(表面，整體外觀)
• Elevation (仰角，也就是圖層之間的距離)
• Light and shadows (光線和陰影)  

 

1.2.1 Surfaces(表面，整體外觀)

總的來說，在設計上，我們通過控製表面，各個圖層的深度，以及陰影來控制一個立體的效果展示。這些設計構成整體的外觀的素材設計。

1.2.1.1 Material environment (素材環境)

現實世界

在現實世界中，所有的物體是可以堆疊或者緊挨著的，但是沒辦法穿過彼此對方。這個過程中產生陰影或會反射光線。

在APP的互動設計中，我們希望在展示或者移動這些平面時，盡量讓它們類似於現實世界的方式。並且在不同的app中，盡量讓他們的移動規則都保持一致。

深度

通常，APP的互動頁面上，我們會通過使用光線，表面自己陰影來展現出一種3d的環境。在這個環境中，所有的元素的移動方式可以是水平的（x軸），豎直的（y軸）或者是在z軸上來移動。這裡，深度就用不同的介面在z軸上的不同的位置在展現。

 

1.2.1.2 Properties(特性)

在素材的設計中，我們儘可能的保持每個表面都是一致以及不可改變的。

維度

首先，每個素材塊，他們在x，y軸的尺寸，是可以改變的，但是在厚度上，我們都會設定他為1dp （禁止設計出來不同的厚度）

 

陰影

這裡只有一點，就是在當我們的平面處於不同的高度位置的時候，他在下一個面產生的陰影，會相應的發生改變和調整。

 

解析度

我們的所有的素材，要有無限的解析度，也就意味著，就算我們圖片放大，依然可以達到我們期望的精度，而不會讓圖片糊了。

 

頁面上的內容

當我們在頁面上添置內容的時候，內容不會增加我們頁面的厚度（依然是1dp），內容不是獨立的頁，他只是附著在頁面上而已。

 

物理特性

我們的組件和元素，這裡我們預設他們都是固體狀的，那他們之間的顯示效果，是不能互相穿透。所以在視覺顯示效果上，不同的平面組件，他們是不可能同時再有相同的座標點。（比如疊在一起時，z的座標是不同的），這時候我們通過設定陰影還有仰角來達到這個視覺效果。還有既然是我們預設我們的韌體是固體狀，所以他的呈現狀態是無法像液體或者氣體一樣，擴散到一個空間內。

 

素材的改變

首先，我們的素材是可以改變形狀。

其次，素材可以改變透明度來改變呈現方式

再次，素材可以在在水平和豎直的方向，進行延伸或者收縮

但是我們這裡需要注意，素材平面是不能摺疊或者彎曲的。

同時，我們的素材平面，是可以兩個在z位置一樣的平面，組裝在一起，成為一個大的平面，然後他們還可以再拆解成兩個平面。

 

移動

首先，素材平面可以在一個給定位置 產生，或者消失

其次，素材平面可以沿著任何軸來移動

然後，不同的素材平面，他們在移動的時候，可以有協調。就比如同步，或者有一定的節奏。

然後，特別要注意，當素材平面在z軸方向發生移動的時候，往往都是使用者互動之後的結果

 

1.2.1.3 Attribute (屬性)

首先，基礎的素材平面，都是白色，不透明，厚度為1dp的的平面，並且會產生陰影。然後我們對這個平面進行相應的修改，就會得到我們需要的平面效果。

素材平面的行為

• Rigid Surface: 在所有的互動中，尺寸保持不變
• Stretchable surfaces：在一個或者多個邊可以收縮或者伸展，這裡有一定的尺寸限制，接著不在發生改變
• Pannable surfaces: 在展現的過程中，尺寸不變，但是可以通過滑屏的時候，會發現為了展現更多的內容，尺寸有一定的延伸。

接著，我們可以在一個介面中，使用不同的素材，來達到最好的呈現效果

 

Stretchable surfaces

這種平面，一般來用來表現“閱讀更多”

然後我們在設計的過程中，通過來移動我們的素材的平面，來展現更多平行資訊。

 

同時，每個模組的移動，還可以是獨立的。如下：

在移動的過程中，我們可以巧妙的利用上層圖層的透明度來達到一定更好的展現結果

 

Scrim

在平面的互動過程中，我們可以通過一定的手段，讓一些色塊或者圖層變的不這麼重要。我們一般都會用下面的手段。

• 讓一個色塊變的暗或者變亮
• 降低他們的不透明度

 

Android 美學設計基礎 <1>