Android 設計指南 – 風格

1 評論 28251 瀏覽 6 收藏 8 分鐘

構建在任何設備上都引人注目的應用。

設備和顯示?Original Version

Android 驅動了數百萬計的手機、平板和其他設備,囊括了各種不同的屏幕尺寸和比例。利用 Android 靈活的布局系統,你可以創造出在各種設備上看起來都很優雅的應用。

靈活

對應用布局進行放大、縮小或者裁減以適應不同的高度和寬度。

優化布局

在較大的設備上,利用大屏幕的優勢。通過定制視圖顯示更多的內容,提供更便利的導航。

適用于各種設備

為不同的像素密度 (DPI) 提供資源使應用在各種設備上都看起來很棒。

策略

那么應當如何開始為多種屏幕設計呢?一種方法是以一個基本的標準 (中等尺寸,MDPI) 開始,之后將其縮放到不同的尺寸。另一種方法是從最大的屏幕尺寸開始,之后為小屏幕去掉一些 UI 元素。

開發者提示

關于構建彈性布局的更多信息,參見?Designing for Multiple Screens?和?Building a Dynamic UI with Fragments.

主題?Original Version

主題是一種使得 Android 應用保持統一風格的機制。風格樣式定義了各種構建用戶界面所需要的視覺元素,包括顏色、高度、邊界填充和字體大小。為了提升各種應用的統一性,Android 為你的應用提供了兩種系統主題:

      • 淺色 Holo 主題
      • 深色 Holo 主題

將這些主題應用于設計中將使得應用更好的和 Android 設計語言融合起來。

為應用選擇一款適合其功能和設計美學的系統主題是一個良好的開端。如果希望讓應用看起來更加與眾不同,不妨從某一款系統主題開始打造自己的設計。系統主題為實現個性化的視覺效果提供了堅實的基礎。

開發者提示

關于應用系統主題和自己構建主題的更多信息,參見?Styles and Themes.

淺色 Holo 主題的 Gmail 界面。

深色 Holo 主題的設置界面。

觸摸反饋?Original Version

使用顏色和光暈效果來反饋觸摸,強調手勢的效果以及表明哪些操作是可用的。

用優雅的方式進行觸摸反饋。任何時候,用戶觸摸應用中的可操作區域,都應當給予視覺上的響應。微小的反饋就能取得良好的效果。這樣做有兩個好處:

      • 給予鼓勵?總是比給予驚嚇要好。
      • 更好的融合?自我標識?,因為無論與何種色調配合,默認的觸摸反饋都能很好的工作。

狀態

大多數的 Android UI 元素都有內置的觸摸反饋效果,包括可以表明元素是否可以操作的視覺效果。

交流

當控件需要對復雜的手勢做出響應時,它應當能夠幫助用戶了解該操作的結果。

在“最近的應用”中,當用戶開始左右滑動縮略圖的時候,它會變得暗淡。這樣做使得用戶明白滑動可以移除該應用。

邊界

當用戶試圖將可滑動的區域滑動出上下邊界時,應當在邊界提供視覺的反饋。許多 Android 的可滑動控件 (例如列表 lists 和網格列表 grid lists) 都已經內置了邊界反饋。如果需要使用自定義控件,記住要提供邊界反饋哦。

當用戶試圖從主屏幕的最后一屏向右滑動時,屏幕就會向右傾斜表明不能再往這邊移動了。

度量單位和網格?Original Version

設備之間除了屏幕尺寸不同,屏幕的像素密度 (DPI) 也不盡相同。為了簡化為不同的屏幕設計應用的復雜度,可以將不同的設備按照大小和像素密度分類。按設備大小的兩個類別分別是手持設備?(小于 600?dp) 和?平板?(大于等于 600 dp)。按像素密度分類的類別有?LDPI、MDPI、HDPI?和?XHDPI。為不同的設備優化你的應用界面,為不同的像素密度提供不同的位圖。

為了空間而考慮

不同的設備可顯示的 dp (density-independent pixels) 數量也不相同。

48 dp 的設計韻律

一般來說,可觸摸控件以 48 dp 為基礎單位。

為什么是 48 dp?

一般情況下,48 dp 在設備上的物理大小是 9 mm (會有一些變化)。這剛好在觸摸控件推薦的大小范圍 (7-10 mm) 內,而且這樣的大小,用戶用手指觸摸起來也比較準確、容易。

如果你設計的元素都至少有 48 dp 的高度和寬度,那么可以保證:

      • 你設計的元素在任何屏幕上顯示時,都不會小于最低推薦值 7 mm。
      • 你可以在信息密度和界面元素的可操控性之間得到較好的平衡。

注意留白

界面元素之間的留白應當是 8 dp。

例子

 

原文地址:http://www.ui.cn/project.php?id=17906

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!