Android UI設計規則

標籤：android基礎

Android UI技巧1.1 不該做什麼

l  不要照搬你在其它平台的UI設計，應該讓使用者使用感覺是在真正使用一個Android軟體，在你的LOGO顯示和平台整體觀感之間做好平衡

l  不要過度使用模態對話方塊

l  不要使用px單位，使用dp或者為文本使用sp

l  不要使用固定的絕對位置的布局

l  不要使用太小的字型

1.2 該做什麼

l  要為高解析度的螢幕建立資源

l  要使用適當的間距

l  要正確管理活動（Activity）

l  要正確處理螢幕的方向變化

l  需要點擊的元素要夠大

l  表徵圖設計要遵循Android的準則

l  要支援D-pad和trackball導航

l  使用主題/樣式，尺寸和顏色資源來減少多餘的

Android UI 設計理念和注意事項2.1 Android UI設計理念

l  乾淨而不過簡單

l  關注內容而非修飾

l  儲存一致，讓使用者容易投入其中，可附加少許變化

l  使用雲端服務（儲存和同步處理的使用者資料）來加強使用者體驗

2.2 優秀UI設計準則

l  關注使用者

瞭解你的使用者年齡，技能文化，對你的應用的需求沒使用的裝置

何時何地如何使用裝置

使用者優先的設計心態，使用者通常是任務導向的行為模式

更早，更頻繁的由真是使用者來測試

l  顯示正確的內容

最常用的操作需要最快被使用者看到並且可用

不太長用的功能可以放到菜單裡面

l  給予使用者適當的回饋

互動的UI元素最少要反映4種不同的狀態

保證操作的結果清晰可見

多給予使用者進度提示，但不要幹擾他們當前的操作

 

l  有章可循的行為模式

行為模式遵循使用者的期望，正確的操作活動，顯示使用者期望看到的資訊和動作

使用合適的方式來加強功能的可見度，可以點擊的元素看起來是可以點擊的

如果使用者完成一項需要複雜的操作，重新思考你的設計

l  容忍錯誤

只允許有意義的操作，適當禁用一些按鈕

盡量減少不可回退的操作

允許回退比使用確定的對話方塊更好，實際上，應該盡量少用確定對話方塊，它是對使用者是一種幹擾

如果有錯誤發生，那就會有人犯錯誤

2.3 設計需要考慮

l  瞭解螢幕尺寸和密度的分類

l  螢幕的方向（豎向和橫向）

l  主要的UI互動方式

l  軟鍵盤還是物理鍵盤

l  瞭解不同裝置之間的相異之處是非常重要的

Android主流機型解析度:

常用主流機型
解析度	320x480	480x800	640x960	480x854	320x240	600x1024

Android 使用者介面架構特性/介面布局

相對布局和線性布局是Android裡面常用的兩種布局，線性布局比較簡單，而相對布局可以做出比較複雜的布局管理，所以僅僅瞭解線性布局，很多時候是不夠的。

為了適應各式各樣的介面風格，Android系統提供了5種布局，這5種布局分別是：

l  LinearLayout    (線性布局)

l  TableLayout     (表格布局)

l  RelativeLayout  (相對布局)

l  AbsoluteLayout  (絕對布局)

l  FrameLayout     (架構布局)

利用這五種布局，可以在螢幕上將控制項隨心所欲的擺放，而且控制項的大小和位置會隨著螢幕大小的變化作出相應的調整。

下面是這五個布局在View的繼承體系中的關係：

Android UI 表徵圖設計原則

Android系統被設計在一系列螢幕尺寸和解析度不同的裝置上啟動並執行。當你為自己的應用設計表徵圖時，必須知道，你的應用有可能在任何裝置上安裝運行。正如支援多螢幕， Android 為你直接提供這樣的表徵圖，他們會在任何裝置上正確的顯示，無論這些裝置的螢幕大小和解析度如何。

一般來說，推薦的方式是為三種普遍的螢幕密度中的每一種都創造一套獨立的表徵圖。然後，把他們儲存在你的應用中特定的資來源目錄下。當你的應用運行時，Android平台將會檢查裝置螢幕的特性，從而載入特定密度資來源目錄下相應的表徵圖。

4.1 表徵圖的尺寸規則和密度

Android 裝置的螢幕密度基準是中等。

因此，一種被推薦的為多種螢幕密度創造表徵圖方式是：

l  首先為基準密度設計表徵圖（看錶一為實際的像素尺寸設計的表徵圖）。

l  把表徵圖放在你的應用的預設可繪製資源中，然後在 Android 可視化裝置（AVD）或者HVGA裝置如T-Mobile G1中運行應用。

l  根據需要測試和調整你的基準表徵圖。

l  當你對在基準密度下建立的表徵圖感到滿意的時候，為其他密度創造副本。

把基準表徵圖按比例增加為150％，創造一個高密度版本。

把基準表徵圖按比例縮小為75％，創造一個低密度版本。

l  把表徵圖放入你的應用的特定密度資來源目錄中。例如：

中密度版本在 res/drawable-mdpi/ 目錄下運行

高密度版本在 res/drawable-hdpi/目錄下運行。

高密度版本在res/drawable-ldpi/目錄下運行。

（或在預設 res/drawable/ 目錄下運行）

l  如果需要，測試和調整高密度和低密度的表徵圖。

對於普遍的螢幕密度標準版本尺寸(像素表示)

分類	低密度螢幕(ldpi)	中密度螢幕(mdpi)	高密度螢幕(hdpi)
啟動器	36 x 36 px	48 x 48 px	72 x 72 px
菜單	36 x 36 px	48 x 48 px	72 x 72 px
狀態列	24 x 24 px	32 x 32 px	48 x 48 px
標籤	24 x 24 px	32 x 32 px	48 x 48 px
對話	24 x 24 px	32 x 32 px	48 x 48 px
列表視圖	24 x 24 px	32 x 32 px	48 x 48 px

4.2 表徵圖的設計規則

Android 2.0和以後的平台的新規定: Android啟動器表徵圖應該面向前方，透視非常小，而且應該頂部照明。此外，注意所有表徵圖應該有獨立的文字標籤，而不是把文字設計嵌入到表徵圖裡面，把努力用在使表徵圖有特色和難忘中去。

Android表徵圖是...

現代的，簡約的，不平坦的，有觸感，和質感的面向前方和頂部明亮，整體而言，色彩在一定的色彩頻譜中

Android 表徵圖不是...

過時的，過分複雜，光滑的，平坦的,旋轉的, 剪裁不正的,過於深色的

 

 

"做這些和不要做這些"

在為你的應用做菜單表徵圖時，下面是一些“做這些和不要做這些”要考慮的例子。

狀態

 

Android UI 開發的GUI工具包，表徵圖，字型和工具

Android視覺開發工具，可視化開發工具，包括設計圖形化使用者介面，表徵圖表徵圖，VISIO在設計，字型等的工具集合，

5.1視覺開發工具：

DroidDraw：圖形化使用者介面編輯器的機器人  （Android的圖形介面編輯器DroidDraw）

官網地址： http://www.droiddraw.org/

AnDroidDraw 是DroidDraw的一款內嵌外掛程式，讓你設計的使用者介面能直接運行在模擬器上：

官網地址： http://www.droiddraw.org/androiddraw.html

 

 

 

5.2 Android 模板、PSD、向量工具：

Android的線框模板：機器人模擬器模板設計，用來設計不同解析度，不同虛擬鍵盤的手機用的，能讓你的應用程式的測試環境更加貼近真機。

：

 http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf

Android的圖形化使用者介面PSD的向量工具包：

：

 http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

 

GoogleAndroid的圖形化使用者介面密碼：向量化的圖形化使用者介面設計工具

官網地址： http://chrisbrummel.com/google-android-gui-psd

Android的模板：模板，介面映像都被重繪，而且檔案夾也加上了機器人的專屬元素

官網地址： http://unitid.nl/2009/11/fireworks-template-for-android/

GoogleAndroid的模板為Omnigfaffle

官網地址： http://graffletopia.com/stencils/498

素描模具版本的Andr??oid 1.0 Omnigfaffle

官網地址： http://graffletopia.com/stencils/578

 

Android的圖形化使用者介面原型的Visio模具：機器人Visio的介面設計器

官網地址： http://www.artfulbits.com/Android/Stencil.aspx

 5.3 Android的圖形化使用者介面表徵圖集

Android開發表徵圖模板包

該 機器人表徵圖模板包 是一個集合，模板設計準則，過濾器和設定，使您更容易地建立表徵圖符合Android的設計給出的一般規格。
有三個表徵圖，在下載套餐，標準發射器的表徵圖，標準菜單表徵圖和狀態列表徵圖的標準包括套。
您可以預覽表徵圖集如下。

下載?

下載?

下載?

Android開發人員共同表徵圖集

在這些表徵圖的設計和風格都基於對那些在Android SDK中包含的一些表徵圖。 總共有24個巴紐銘文與以下尺寸的選項：。16 × 16，24 × 24，32和32 × 48 ×48像素。
下載?

Android開發人員共同表徵圖集二

此表徵圖集包含中使用的表徵圖設計的菜單，列表，標籤（選擇和反選）或對話方塊，用適當的標記的檔案夾到正確的大小排序。
總共有15個表意字元，所有以。png格式。
下載?

Android的表徵圖

這個機器人開發一套包括30個表徵圖。巴紐菜單表徵圖，加上其他源檔案（。集）為進一步定製。
下載

Glyphish

該Glyphish表徵圖集設計並精心設計就在iPhone應用程式的工具列和標籤欄使用專門的，但也將Android的發展完善。
130個表徵圖是24位。PNG映像約30?? × 30像素的標籤欄表徵圖，大約20 × 20像素的表徵圖，工具列和導航。
下載?

Android應用程式圖示集

下載?

Android的iDroid表徵圖

下載?

Android的表徵圖模板

下載?

Android的表徵圖套裝II

下載 ?

Gesturecons - 多觸摸表徵圖

這些基於向量表徵圖的建立都是為了協助設計，開發，實施和多點觸摸介面推廣。 您可以使用在你的應用程式Gesturecons為了向使用者展示如何完成的行動或促使他們與應用程式互動時，他們的做法了。 您可以縮放到任意大小和它們以任何方式改變你想他們。
下載包內有52個高解析度向量表徵圖完全可擴充和可變（。PDF格式。人工智慧。EPS檔案類型。）。
下載?

5.4  Android的字型工具Android 字型家庭套餐

這是一個 Android的字型下載包。 A字型系列官方已設計和最佳化的網路作業系統中使用的應用程式菜單，為Android瀏覽器和其他螢幕上的文字。 包中還包括是 droid.css 和 droid.sass CSS3的檔案與 @字型面聲明。
你可以看到下面的Android字型預覽：

下載Droid字型家庭?

預覽

下載Droid字型家庭?

預覽

Droid下載?

Droid的襯線字型免費由GoogleAndroid @ fontsquirrel

Droid的襯線字型免費由Google[email protected] fontsquirrel ?