移動介面尺寸!安卓720*1280介面尺寸規範參考
這樣的手機又vivo智慧收款機、三星Galaxy A5、華為榮耀等手機。
這樣的手機螢幕尺寸是:5寸 即螢幕對角線是5英寸。
計算方法:1280平方+720平方=2156800,結果再開平方=1468.6048,再÷5,=293.72點每英寸。
在1280*720px的解析度下,1dp=2px 所有的尺寸具體請參照:Device Metrics
但是 不是所有每一個5英寸的手機的解析度都是720*1280,也有1920*1080的。切記。
720*1280 即xhdpi 相對於hdpi是2倍。同等於ios 蘋果6的切圖的2倍圖。是可以通用的。
在android規範中對於導航欄、工具欄等的尺寸沒有明確的規定。
第一部分:720*1280的佈局規範
根據48dp原則,以及一些主流的android應用的截圖分析,總結一下尺寸要求:
狀態列高度: 50 px
導航欄、操作欄高度: 96 px=48dp x 2
主選單欄高度: 96 px
內容區域高度: 1038 px (1280-50-96-96=1038)
Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了螢幕中,高度也和選單欄一樣為:96 px
第二部分: 圖示和字型大小(來自官方規範文件)
a、啟動圖示(home頁或app列表頁) 整體大小為48 x 48 dp 沒有空白的區域的完整圖示。 當然也可以是 包含空白區域的圖示等於48DP.
同時大家需要看下這個圖:48dp代表了觸控的範圍:
b、操作欄圖示,代表使用者在app中可以使用到的最重要的圖示
整體大小為32 x 32 dp ,圖形實際區域為 24 x 24 dp
c、小圖示/場景圖示,提供操作或特定專案的狀態。
比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖示等。整體大小為16 x 16 dp ,圖形實際區域為 12 x 12 dp 。
d、通知圖示
如果app有通知,要提供一個有新通知時顯示在狀態列的通知圖示。整體大小為24 x 24 dp ,圖形實際區域為 22 x 22 dp 。
注:android規範提供的尺寸單位是dp,若設計稿尺寸設為720 x 1280 ,圖示大小需在規範要求的尺寸數字上乘以2。比如操作欄圖示32 x 32 dp ,則設計稿上應該是64 x 64 px 。
e、字型大小
Android規範中的要求如下:
前面提到Android開發中的字號單位是sp,而換算關係是 sp*ppi/160 = px 。所以720 x 1280尺寸的設計稿上,字型大小可選擇為 24px 、28px 、32px 、36px ,主要根據文字的重要程度來選擇,特殊情況下也可能選擇更大或更小的字型。
f、其他尺寸要求
通常把48dp作為可觸控的UI元件的標準。 APPUI設計中的48dp定律原則
為什麼要用48dp呢?一般來說,48dp轉化為一個物理尺寸約9毫米。通常建議目標大小為7-10毫米,以方便使用者手指能準確並且舒適觸控目標區域。
如果你設計的元素高和寬至少48dp,你就可以保證:
(1)觸控目標絕不會比建議的最低目標(7mm)小,無論在什麼螢幕上顯示。
(2)在整體資訊密度和觸控目標大小之間取得了一個很好的平衡。
另外,每個UI元素之間的空白通常是8dp 。
第三部分、android的按鈕和彈出層的設計規範參考。
在720 x 1280 px 的設計稿上,有兩個按鈕(比如登入、註冊)並排一行放置,按鈕尺寸最小範圍均為240 x 80 px ,換算為android開發單位就是 120 x 40 dp 。
這一次就跟大家分享這些,如有錯誤之處,歡迎隨時在下面留言。這樣只是成熟案例下的參考設計因素。