安卓app設計規範整理和Android APP設計篇
隨著安卓智慧手機不停的更新換代。安卓手機系統越來越完美,螢幕尺寸也越來越大啦!比如最近小米的miui 6的釋出和魅族手機系統的更新等等。
以小米MIUI6的安卓手機來說,MIUI6進行了全新設計,堅持“內容才是本質”的設計哲學,重新提煉內容,簡化圖示設計。
所以,我們在進行安卓APP設計時,需要好好調整之前的設計規範和設計細節。根據目前流行的安卓手機的系統體驗來完成我們的安卓APP設計規範。應該說這是整理出最全面的安卓app設計規範。
25學堂站在不斷更新和完善安卓app設計規範為宗旨!利用週末的時間整理了2014年Android APP設計規範教程。
1、安卓app設計規範之尺寸或解析度
目前最新安卓手機的螢幕尺寸都是5.5英寸啦。我們都知道安卓機的尺寸很多很雜。而且不同的解析度對應不同的dpi模式。
Android也支援多種不同的dpi模式:ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi(4K解析度)
關於安卓APP設計的dpi詳細解讀請檢視:
目前主流的安卓手機解析度有以下3種:
hdpi,對應800*480的手機。主流機型,很多。如小米1 ,1s 三星 htc 等
xdpi,對應1280*720的手機。三星Galaxy系列和華為p6.
xxdpi,對應1080*1920的手機。小米手機,華為榮耀手機系列為主加上 htc one。
下面是當面流行的安卓手機的螢幕尺寸和解析度:
小米 3和小米4 螢幕尺寸和解析度: 5英寸 1920×1080畫素
魅族MX2 螢幕尺寸和解析度: 4.4英寸 1280×800像
魅族MX3 螢幕尺寸和解析度: 5.1英寸 1800×1080畫素
HTC one螢幕尺寸和解析度: 4.7英寸 1920×1080畫素
華為榮耀6螢幕尺寸和解析度: 5英寸 1920×1080畫素
華為p6螢幕尺寸和解析度: 4.7英寸 1280×720畫素
華為p7螢幕尺寸和解析度: 5英寸 1920×1080畫素
在目前我們的安卓APP設計專案當中,我們並不會去為每一種解析度去設計一套UI介面。這是一種追求完美和理想的狀態。小公司肯定是耗不起這樣的。
所以,這個時候我們需要學會變通。為了適應多解析度,
1:在標準基礎(xdpi:1280*720)上開始,然後放大或縮小,以適應到其他尺寸。
2:從裝置的最大尺寸(xxdpi:1920×1080)開始,然後縮小,並適應到所需的最小螢幕尺寸。
有些時候我們也會在實際開發過程中,Android和IOS的設計稿若無太大差異,也可從IOS的解析度(960*640)開始,再調整設計稿的比例,適應其他解析度。但是這種方法在切圖的時候 需要做一些圖片的調整。如果不是向量圖的元件需要重新按照1280*720的尺寸設計下。
2、安卓app設計規範之字型和字型大小
我們必須知道的安卓設計常識:安卓4.0之後用的字型是Roboto。中文字型:方正蘭亭黑體
今天跟大家講解的是在720*1280的基礎上的字型設計大小。
註釋最小字型: 12sp == 24px
文字字型: 14sp == 28px
文章標題或圖示名稱: 16sp == 32px
導航標題: 18sp == 36px
SP的詳細介紹如下:
sp和dp一樣,是android開發裡特有的單位,設計師在做UI設計的時候通常最初是建立320*480這個尺寸的畫布開始的,這個尺寸的畫布在android解析度的分類中稱為mdpi,在這個尺寸下,ps裡的1px就等於android中的1dp,同樣,這個時候1點的字就等於android中1sp,舉個栗子:你建立畫布的尺寸是320-480,裡面的文字是30點,那麼它就是30sp。
一般android設定長度和寬度多用dip,設定字型大小多用sp. 在螢幕密度為160,1dp=1px=1dip, 1pt = 160/72 sp 1pt = 1/72 英寸.當螢幕密度為240時,1dp=1dip=1.5px.
設計時候,我們還需要遵循48dp定律。
48dp作為安卓可觸控的UI元件的標準。
一般來說,48dp轉化為一個物理尺寸約9毫米。建議的目標大小為7-10毫米的範圍,這是一個使用者手指能準確並且舒適觸控的區域。
如果你設計的元素高和寬至少48dp,你就可以保證:
(1). 觸控目標絕不會比建議的最低目標(7mm)小,無論在什麼螢幕上顯示。
(2). 在整體資訊密度和觸控目標大小之間取得了一個很好的平衡。
而每個UI元素之間的空白通常是8dp.
下面是某個安卓APP設計師對android設計做出的一個設計資訊圖總結。
3、安卓app設計規範之切圖
這塊需要按照設計按照下面4篇文章來了解安卓app設計標註和切圖的一些規範。這裡不做詳細解說了。
4、安卓app設計規範之適配和設計圖測試預覽
(1)尺寸標註工具 MarkMan(馬克鰻)
(3)一個視覺化的Android UI介面設計工具:DroidDraw
(6)線上生成自定義APP圖示字型利器:IconVault