|
今天25學(xué)堂的老譚童鞋跟大家繼續(xù)分享720*1080的界面設(shè)計尺寸規(guī)范。 主要講解 屏幕分辨:1280×720像素(720P) APP界面設(shè)計規(guī)范。 這樣的手機又vivo智能收款機、三星Galaxy A5、華為榮耀等手機。 這樣的手機屏幕尺寸是:5寸 即屏幕對角線是5英寸。 計算方法:1280平方+720平方=2156800,結(jié)果再開平方=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規(guī)范中對于導(dǎo)航欄、工具欄等的尺寸沒有明確的規(guī)定。 第一部分:720*1280的布局規(guī)范 根據(jù)48dp原則,以及一些主流的android應(yīng)用的截圖分析,總結(jié)一下尺寸要求: 狀態(tài)欄高度: 50 px 導(dǎo)航欄、操作欄高度: 96 px=48dp x 2 主菜單欄高度: 96 px 內(nèi)容區(qū)域高度: 1038 px (1280-50-96-96=1038) Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,高度也和菜單欄一樣為:96 px 第二部分: 圖標(biāo)和字體大?。▉碜怨俜揭?guī)范文檔) a、啟動圖標(biāo)(home頁或app列表頁) 整體大小為48 x 48 dp 沒有空白的區(qū)域的完整圖標(biāo)。 當(dāng)然也可以是 包含空白區(qū)域的圖標(biāo)等于48DP.
同時大家需要看下這個圖:48dp代表了觸摸的范圍:
b、操作欄圖標(biāo),代表用戶在app中可以使用到的最重要的圖標(biāo) 整體大小為32 x 32 dp ,圖形實際區(qū)域為 24 x 24 dp
c、小圖標(biāo)/場景圖標(biāo),提供操作或特定項目的狀態(tài)。 比如gmail app的星型標(biāo)記、一些內(nèi)容展開收起用到的向下向上的圖標(biāo)等。整體大小為16 x 16 dp ,圖形實際區(qū)域為 12 x 12 dp 。 d、通知圖標(biāo) 如果app有通知,要提供一個有新通知時顯示在狀態(tài)欄的通知圖標(biāo)。整體大小為24 x 24 dp ,圖形實際區(qū)域為 22 x 22 dp 。
注:android規(guī)范提供的尺寸單位是dp,若設(shè)計稿尺寸設(shè)為720 x 1280 ,圖標(biāo)大小需在規(guī)范要求的尺寸數(shù)字上乘以2。比如操作欄圖標(biāo)32 x 32 dp ,則設(shè)計稿上應(yīng)該是64 x 64 px 。 e、字體大小 Android規(guī)范中的要求如下:
前面提到Android開發(fā)中的字號單位是sp,而換算關(guān)系是 sp*ppi/160 = px 。所以720 x 1280尺寸的設(shè)計稿上,字體大小可選擇為 24px 、28px 、32px 、36px ,主要根據(jù)文字的重要程度來選擇,特殊情況下也可能選擇更大或更小的字體。 f、其他尺寸要求 通常把48dp作為可觸摸的UI元件的標(biāo)準(zhǔn)。 APPUI設(shè)計中的48dp定律原則
為什么要用48dp呢?一般來說,48dp轉(zhuǎn)化為一個物理尺寸約9毫米。通常建議目標(biāo)大小為7-10毫米,以方便用戶手指能準(zhǔn)確并且舒適觸摸目標(biāo)區(qū)域。 如果你設(shè)計的元素高和寬至少48dp,你就可以保證: (1)觸摸目標(biāo)絕不會比建議的最低目標(biāo)(7mm)小,無論在什么屏幕上顯示。 (2)在整體信息密度和觸摸目標(biāo)大小之間取得了一個很好的平衡。 另外,每個UI元素之間的空白通常是8dp 。 第三部分、android的按鈕和彈出層的設(shè)計規(guī)范參考。 在720 x 1280 px 的設(shè)計稿上,有兩個按鈕(比如登錄、注冊)并排一行放置,按鈕尺寸最小范圍均為240 x 80 px ,換算為android開發(fā)單位就是 120 x 40 dp 。 這一次就跟大家分享這些,如有錯誤之處,歡迎隨時在下面留言。這樣只是成熟案例下的參考設(shè)計因素。 |
|
|
來自: 敏小館 > 《學(xué)習(xí)》