Android 美學設計基礎 <3>

標籤：evel   最好   素材   顯示   web   9.png   視覺   elements   使用   

本期接著對Android的美學設計的分享。

1.3 Light and shadows 光學與陰影

1.3.1 Light

在素材設計的環境中，我們會用虛擬光來照亮UI介面。主燈光會產生尖銳，有方向的陰影。背景光會在各個角度產生分散的，柔和的陰影，我們叫背光陰影。

主光產生的陰影

 

背景光產生的陰影

1.3.2 光源

在安卓和IOS的設計中，陰影的產生，是因為處於不同仰角位置（z軸）的素材平面，對光源進行遮擋時產生的。這點上和web的產品不同，web的產品的陰影，都是只是在y軸上來表現陰影製作效果。

我們結合直射光+散射光時候的陰影製作效果。

 

1.3.2 陰影

陰影可以協助我們發現 一個素材組件的深度，運動的方向以及表面的邊緣。一個表面的陰影，是由他自己的仰角以及他和其他平面的關係來共同決定的。

陰影的應用

首先，在同一個產品中，仰角和對應的陰影的對應關係，應該保持一致。

 接著 仰角值越大（離使用者的相對位置越近），產生的陰影範圍也就越大

在我們的介面設計中, 如果我們不使用陰影這個元素，那我們所有介面的移動，都是預設在一個仰角進行的。

 

 2. Layout 布局

 2.1 理解布局設計：我們通過使用統一的元素和間距，使得我們的布局設計在不同的平台和環境以及螢幕大小都可以保持一致。

2.1.1 布局的使用

a. 可預見性

UI介面應該是可以直接表現的，並且可以預測的布局（統一的UI地區以及空間組織的方式）

b. 一致性

布局上，我們應該使用一致的網格，標線和填充形式

c. 回應

對於來自使用者，裝置，和螢幕元素的輸入，布局需要的是可以適應的並且有反饋的。

2.1.2 結構

在布局的設計中，各個組件應該在視覺上看起來是均衡的。一般來說我們都使用8dp的網格來座位最小的一個測量單位，對於logo那樣的特別小的組件，我們一般也可以用4dp的網格。

 

2.1.2 Pixel Density

螢幕的PD和解析度對於不同的平台和裝置來說都是不同的。對於不同的裝置，我們可以用這種靈活可變的方式在達到最好的視覺呈現效果。

計算pd

首先，在1英寸的品目範圍內的像素點的數量我們叫像素密度。高密度的螢幕，當然在一個固定尺寸中的像素點會多於低密度的螢幕。所以一個固定像素點的圖片，在高精度的螢幕上，會顯示的視覺效果上更小一點。

 

密度的獨立性

密度的獨立性指的是雖然螢幕的像素點密度不同，但是表徵圖依然顯示的統一的大小。效果如。

 

關於Android的PD

When developing an Android app, use dp to display elements uniformly on screens with different densities. A dp is equal to one physical pixel on a screen with a density of 160.

當我們開發一個安卓app的時候，我們使用dp來確保我們的元素在不同的密度螢幕上顯示的是統一的。一個dp等於的絕對值的大小dpi/160

dp = (width in pixels * 160 )/screen density

Screen physical width	Screen density	Screen width in pixels	Screen width in dps
1.5 in	120	180 px	240 dp
1.5 in	160	240 px
1.5 in	240	360 px

 

 

 

針對文字資訊我們一般用scalable pixels（sp), 這裡使用者可以調節字型來控制文字資訊的顯示大小。

 

pd in IOS

邏輯解析度

ios裝置是通過邏輯解析度來控制顯示密度，他們來測量沒一個點裡面的單位，舉個例子, 如果你現在為iphone x設計一個元素， 你可能選擇一個邏輯解析度的大小為 375 * 812個點。接著，在這個給定後，圖形處理硬體會自動把這個組件填充到1125 * 2436的螢幕中。

 

Android 美學設計基礎 <3>