Android 系統UI設計規則

1. Android UI技巧

1.1 不應作什麼

1.2 該作什麼

2. Android UI 設計理念和注意事項

2.1 Android UI設計理念

2.2 優秀UI設計準則

2.3 設計須要考慮

3. Android UI 框架特性/界面佈局

4. Android UI 圖標設計原則

4.1 圖標的尺寸規則和密度

4.2 圖標的設計規則

5. Android UI 開發的GUI工具包，圖標，字體和工具

5.1 視覺開發工具

5.2 Android 模板、PSD、矢量工具

5.3 Android的圖形用戶界面圖標集

5.4 Android的字體工具

 

 

1. Android UI技巧

   1.1 不應作什麼

• 不要照搬你在其它平臺的UI設計，應該讓用戶使用感受是在真正使用一個 Android軟件，在你的LOGO顯示和平臺總體觀感之間作好平衡
• 不要過分使用模態對話框
• 不要使用px單位，使用dp或者爲文本使用sp
• 不要使用固定的絕對定位的佈局
• 不要使用過小的字體

1.2 該作什麼

• 要爲高分辨率的屏幕建立資源
• 要使用適當的間距
• 要正確管理活動（Activity）
• 要正確處理屏幕的方向變化
• 須要點擊的元素要夠大
• 圖標設計要遵循Android的準則
• 要支持D-pad和trackball導航
• 使用主題/樣式，尺寸和顏色資源來減小多餘的

 

1. Android UI 設計理念和注意事項

   2.1 Android UI設計理念

• 乾淨而不過簡單
• 關注內容而非修飾
• 保存一致，讓用戶容易投入其中，可附加少量變化
• 使用雲端服務（存儲和同步用戶資料）來增強用戶體驗

2.2 優秀UI設計準則

• 關注用戶

  瞭解你的用戶年齡，技能文化，對你的應用的需求沒使用的設備

  什麼時候何地如何使用設備

  用戶優先的設計心態，用戶一般是任務導向的行爲模式

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

• 顯示正確的內容

  最經常使用的操做須要最快被用戶看到而且可用

  不太長用的功能能夠放到菜單裏面

• 給予用戶適當的回饋

  交互的UI元素最少要反映4種不一樣的狀態

  保證操做的結果清晰可見

  多給予用戶進度提示，但不要干擾他們當前的操做

   

• 有章可循的行爲模式

  行爲模式遵循用戶的指望，正確的操做活動，顯示用戶指望看到的信息和動做

  使用合適的方式來增強功能的可見性，能夠點擊的元素看起來是能夠點擊的

  若是用戶完成一項須要複雜的操做，從新思考你的設計

• 容忍錯誤

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

  儘可能減小不可回退的操做

  容許回退比使用肯定的對話框更好，實際上，應該儘可能少用肯定對話框，它是對用戶是一種干擾

  若是有錯誤發生，那就會有人犯錯誤

2.3 設計須要考慮

• 瞭解屏幕尺寸和密度的分類
• 屏幕的方向（豎向和橫向）
• 主要的UI交互方式
• 軟鍵盤仍是物理鍵盤
• 瞭解不一樣設備之間的相異之處是很是重要的

Android主流機型分辨率:

經常使用主流機型
分辨率	320x480	480x800	640x960	480x854	320x240	600x1024

 

1. Android UI 框架特性/界面佈局

   相對佈局和線性佈局是Android裏面經常使用的兩種佈局，線性佈局比較簡單，而相對佈局能夠作出比較複雜的佈局管理，因此僅僅瞭解線性佈局，不少時候是不夠的。

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

• LinearLayout (線性佈局)
• TableLayout (表格佈局)
• RelativeLayout (相對佈局)
• AbsoluteLayout (絕對佈局)
• FrameLayout (框架佈局)

利用這五種佈局，能夠在屏幕上將控件爲所欲爲的擺放，並且控件的大小和位置會隨着屏幕大小的變化做出相應的調整。

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

 

1. Android UI 圖標設計原則

   Android系統被設計在一系列屏幕尺寸和分辨率不一樣的設備上運行的。當你爲本身的應用設計圖標時，必須知道，你的應用有可能在任何設備上安裝運行。正如支持多屏幕， Android 爲你直接提供這樣的圖標，他們會在任何設備上正確的顯示，不管這些設備的屏幕大小和分辨率如何。

   通常來講，推薦的方式是爲三種廣泛的屏幕密度中的每一種都創造一套獨立的圖標。而後，把他們儲存在你的應用中特定的資源目錄下。當你的應用運行時，Android平臺將會檢查設備屏幕的特性，從而加載特定密度資源目錄下相應的圖標。

   4.1 圖標的尺寸規則和密度

   Android 設備的屏幕密度基線是中等。

   所以，一種被推薦的爲多種屏幕密度創造圖標方式是：

• 首先爲基準密度設計圖標（看錶一爲實際的像素尺寸設計的圖標）。
• 把圖標放在你的應用的默承認繪製資源中，而後在 Android 可視化設備（AVD）或者HVGA設備如 T-Mobile G1中運行應用。
• 根據須要測試和調整你的基準圖標。
• 當你對在基準密度下建立的圖標感到滿意的時候，爲其餘密度創造副本。

把基準圖標按比例增長爲150％，創造一個高密度版本。

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

• 把圖標放入你的應用的特定密度資源目錄中。例如：

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

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

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

（或在默認 res/drawable/ 目錄下運行）

• 若是須要，測試和調整高密度和低密度的圖標。

對於廣泛的屏幕密度標準版本尺寸(像素表示)

分類	低密度屏幕(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 圖標不是...

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

 

 

"作這些和不要作這些"

在爲你的應用作菜單圖標時，下面是一些"作這些和不要作這些"要考慮的例子。

狀態

 

1. 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/

    

   谷歌Android的圖形用戶界面密碼：矢量化的圖形用戶界面設計工具

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

   Android的模板：模板，界面圖像都被重繪，並且文件夾也加上了機器人的獨有元素

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

   
   谷歌Android的模板爲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的襯線字體免費由谷歌Android @ fontsquirrel

   
   Droid的襯線字體免費由谷歌Android @ fontsquirrel »