androidapp界面設計規范(dpi,dp,px等)
PPI(Pixelsperinch):每英寸所擁有的像素數,即像素密度。
DPI(dotsperinch):即每英寸上,所能印刷的網點數,一般稱為像素密度。ppi計算公式:ppi=屏幕對角線像素數/屏幕對角線英寸數,通過勾股定理計算屏幕對角線像素數。
ScreenSize(屏幕尺寸):手機屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是對角線的長度。
DIP(deviceindependentpixel):即dip/dp,設備獨立像素。1px=1dp
density(由dpi決定)
Resolution(分辨率):指手機屏幕垂直和水平方向上的像素個數。eg分辨率480
800,指該設備垂直方向有800個像素點,水平方向有480個像素點。
px(Pixel像素):相同像素的ui,在不同分辨率的設備上效果不同。在小分辨率設備上會放大導致失真,大分辨率上被縮小。
AndroidDesign里把主流設備的dpi歸成了四個檔次:
120dpi、160dpi、240dpi、320dpi
,具體見如下表格。
實際開發當中,我們經常需要對這幾個尺寸進行相互轉換(比如先在某個分辨率下完成設計,然后縮放到其他尺寸微調后輸出),一般按照dpi之間的比例即2:1.5:1:0.75來給界面中的元素來進行尺寸定義。
也就是說如果以160dpi作為基準的話,只要尺寸的DP是4的公倍數,XHDPI下乘以2,HDPI下乘以1.5,LDPI下乘以0.75即可滿足所有尺寸下都是整數pixel。但假設以240dpi作為標準,那需要DP是3的公倍數,XHDPI下乘以1.333,MDPI下乘以0.666,LDPI下除以2。而以LDPI和XHDPI為基準就更復雜了。同時第一款Android設備(HTC的T-MobileG1)是屬于160dpi的。鑒于以上各種原因,
標準dpi=160
谷歌官方對dp的解釋如下:
AvirtualpixelunitthatyoushouldusewhendefiningUIlayout,toexpresslayoutdimensionsorpositioninadensity-independentway.
Thedensity-independentpixelisequivalenttoonephysicalpixelona160dpiscreen,whichisthebaselinedensityassumedbythesystemfora"medium"densityscreen.Atruntime,thesystemtransparentlyhandlesanyscalingofthedpunits,asnecessary,basedontheactualdensityofthescreeninuse.Theconversionofdpunitstoscreenpixelsissimple:
px=dp*(dpi/160).
Forexample,ona240dpiscreen,1dpequals1.5physicalpixels.Youshouldalwaysusedpunitswhendefiningyourapplication'sUI,toensureproperdisplayofyourUIonscreenswithdifferentdensities.
簡單來說,以160dpi的設備為準,該設備上1dp=1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2個像素)。在app開發時,最好用dp來做界面的布局,以保證適配不同屏幕密度的手機。
dp和px的換算公式:
我的理解,該公式表示px的數值等于dp的數值*(設備dpi/160)
注意,px、dp是單位,但density沒單位。
applyDimension的源碼如下,可參考:
android的尺寸眾多,建議使用分辨率為
720x1280
的尺寸設計。這個尺寸720x1280中顯示完美,在1080x1920中看起來也比較清晰;切圖后的圖片文件大小也適中,應用的內存消耗也不會過高。
app啟動圖標為48*48dp,對應各dpi設備,圖像資源像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|48
48px|72
72px|94
96px|144px
144px|
操作欄圖標為32*32dp,對應各dpi設備,圖像資源像素如下:其中圖形區域尺寸是24*24dp,可參考平時ui切圖會有部分留白。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|32
32px|48
48px|64
64px|96px
96px|
通知欄圖標為24*24dp,對應各dpi設備,圖標像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|24
24px|36
36px|48
48px|72px
72px|
某些場景需要用到小圖標,大小應當是16*16dp,其中圖形區域尺寸12*12dp。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|16
16px|24
24px|32
32px|48px
48px|
APP界面標注及切圖注意事項
一、App屏幕適配通用知識簡介
1.標注時注意事項
一般情況要定位一個Icon只需給出上/下邊距,左/右邊距
標注圖標距離只需標到可點擊范圍外
通用型顏色、字體單獨標明一份
通用型模塊只需單獨標明一份,如導航欄
手機可視區域一般為寬度固定,長度超出邊界可滑動,所以,標注物體寬度時可按比例說明
如果要標注內容上下居中,左右居中,或等比可不標注
當繪制的是一個列表時且每一條內容一樣時,只需標注一條,如果每條內容有少許不同時,只需標明差異____糠
當交付的是一張完整圖片時,不需做機型適配,只需給高清圖(1920*1080)即可,注意進行壓縮
當背景是純色時只需給出色值(iOS使用RGB色值,Android使用16進制色值)
圖標應給出可點擊區域
若圖標在不同頁面重復出現,且尺寸相差不大,直接給出最大一份切圖,并在圓形圖標明尺寸,程序會根據需求縮放
可點擊按鈕通常要給出兩種狀態:普通/點擊(選中)
按鈕如果只是矩形、圓角矩形、圓形、橢圓形,給出尺寸和色值,可程序設置
漸變效果可通過程序實現,只需給出起始和結束色值跟范圍
2.切圖命名規范
背景:bg_
按鈕:btn_xxx_
圖片:img_
標簽:tab_
圖標:icon_
照片:pht_
導航:nav_
圖示:tip_
菜單:menu_
側欄:sidebar_
二、iOS應用屏幕適配
1.iOS究竟要是適配多少種機型,以哪款機型分辨率作為設計尺寸最好
2016-3
iOS只需兼容iPhone4,完美兼容iphone5以上機型
如果按矢量圖制作設計圖按1X尺寸作圖,后期放大成2X、3X;如果按傳統的px作圖應用最大尺寸(3X)作為畫布。
以3X作為畫布(1242*2208)難記且不能整除,我們可直接以1280(640*2)作為寬度,完美縮放為1X、2X;
2X->3X以1.5來算尺寸和字號可得到較好效果
2.界面尺寸
設備分辨率狀態欄高度導航欄高度標簽欄高度
iPhone6plus1242*2208px60px132px146px
iPhone6750*1334px40px88px98px
iPhone5/5s/5c640*1136px40px88px98px
iPhone4/4s640*960px40px88px98px
iPad3/4/Air/Air2/mini22048*1536px40px88px98px
iPad1/21024*768px20px44px49px
iPadmini1024*768px20px44px49px
導航欄背景圖中,如果考慮狀態欄背景,則背景圖尺寸為導航欄px+狀態欄px,如果只改變導航欄顏色則只需要導航欄px
3.圖標尺寸
設備AppStore程序應用主屏幕spotlight搜索標簽欄工具欄和導航欄
iPhone6plus1024*1024px180*180px144*144px87*87px75*75px66*66px
iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px
iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px
iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px
iPadmini1024*1024px90*90px72*72px50*50px25*25px22*22px
按鈕切圖建議以等寬高尺寸切圖,且像素必須>=88、*88px,當本身圖片寬度或高度不足時,補充空白像素(透明像素).一般情況下,只需要普通狀態下按鈕切圖即可
(適配不建議等比放大)
4.參考文獻
友盟設備指數
APP切圖流程和APP切圖命名規范詳細完整版
APP切圖詳細規范終極指南
iOS和Android的app界面設計規范
APP界面切圖命名和文件整理規范
三、Android應用屏幕適配
1.用px作為基礎單位的缺陷
對比上圖可以知道,ppi越低圖片顯示的越大,ppi越高圖片顯示的越小,造成不同手機上顯示圖片布局不統一!
使用dp作為單位所有機子顯示統一
2.衡量一個屏幕清晰度單位————屏幕密度(dpi==ppi)
計算公式:屏幕dpi=√(屏幕長^2+屏幕寬^2)/屏幕尺寸
名稱密度代表分辨率Android單位與像素換算
mdpi120dpi~160dpi320*4801dp=1px
hdpi160dpi~240dpi480*8001dp=1.5px
xhdpi240dpi~320dpi720*12801dp=2px
xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px
xxxhdpi480dpi~640dpi2k~4k1dp=4px
屏幕大小啟動圖標操作欄圖標上下文圖標系統通知圖標(白色)最細筆畫
320*480px48*48px32*32px16*16px24*24px不小于2px
480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小于3px
720*1280px96*96px64*64px32*32px48*48px不小于4px
1080*1920px144*144px96*96px48*48px72*72px不小于6px
3.究竟要適配多少種機型
2016-3
得出結論:只需適配高端的xxhdpi(720*1280/1080*1920),低端的hdpi(480*800)
4.度量單位與邊框
可觸摸控件都是以48dp為單位的
為什么是48dp?一般情況下,48dp在設備上的物理大小是9mm(會有一些變化)。這剛好在觸摸控件推薦的大小范圍(7-10mm)內,而且這樣的大小,用戶用手指觸摸起來也比較準確、容易。(xxhdpi標準下為144px)
邊框注意留白界面元素之間的留白應當是8dp。
例:
5.字體排版
Roboto是Android系統的默認字體集,字體大小單位sp(可縮放像素數,scaleablepixels)
根據Android設計規范,推薦使用12、14、16、20和34號,字體粗細可調
spHDPIXHDPIXXHDPI
12sp18px24px36px:
14sp21px28px42px
16sp24px32px48px
18sp27px36px54px
20sp30px40px60px
34sp51px68px102px
(注意:字號要為雙數,且不可帶小數位)
6.9-patch圖制作
什么是9-patch圖
為什么要用9-patch格式制作圖
適應各種手機屏幕拉伸圖片需求,有效縮減圖片體積
什么情況下使用
當發現圖片是背景時且可能拉伸被拉伸時,或圖片過大時
如何制作patch9圖
圖片外層增加一全透明像素,在透明像素區花4條純黑色邊
1.寬度可拉伸區域
2.高度可拉伸區域
3.垂直內容區域
4.水平內容區域
8.參考文獻
友盟設備指數
Android設計指南簡體中文版4.x
MaterialDesign中文版
Android設計中的.9.png
技術干貨：ApplewatchAPP設計規范
一、規范概要
1.導航形式
層級式,通過當前頁面點擊跳轉到另外頁面的形式。適合應用于復雜產品,需要層層遞進。
頁面式,頁面切換,滑動,類似輪播
AppleWatch導航形式任選其一,不得同時存在。
2.交互方式
輕觸:列表、按鈕、切換等控件的操作
手勢:縱向輕掃,界面滾動;橫向輕掃,界面導航之間的查看;從屏幕左側邊緣向右輕掃,返回父級界面。
壓力觸控:喚出當前頁面情景菜單
實體控件(手表旋鈕):長頁面瀏覽,避免手指長時間輕掃界面何遮擋界面
3.色彩
使用黑色作為APP的背景色,或者深色且高斯模糊的圖片作為背景
高對比度的顏色使用于文字、圖標、界面
4文字
SF和蘋方
5.圖標
通知圖標、首屏圖標和長看圖標、短看圖標
情景圖標(App內功能圖標)
6.布局
并排放置的圖標一行不要超過三個
布局優先采用左對齊
二、設計尺寸
1.1屏幕尺寸
38mm(272*340px)
42mm(312*390px)
1.2圖標尺寸
通知圖標48PX(38mm)55px(42mm)
首屏圖標和常看圖標80px(38mm)88px(42mm)
短看圖標172px(38mm)196px(42mm)
菜單情景圖標(App內的功能圖標)
圖標大小70px,實際圖標大小46px。(38mm)
圖標大小80px,實際圖標大小54px。(42mm)
圖標線寬不得小于4px
1.3圖標
1.3.1
通知圖標,系統通知彈出的圖標
1.3.2
首屏圖標,如下圖所示。首屏圖標80px(38mm)88px(42mm)
1.3.3長看圖標,如下所示,左上角圖標。常看圖標80px(38mm)88px(42mm)
1.3.4短看圖標,如下圖所示。短看圖標172px(38mm)196px(42mm)
2.字體和文字
2.1字體
SF和蘋方
2.2文字(字號,常見字號單位是PT和PX,PT是開發單位,PX是設計單位,在@2X下換算關系1PT=2PX)
標題headline18PT
正文標題caption15PT
正文body15PT
備注、腳注、輔助文字footnote12PT、13PT
3.顏色
高對比度的顏色使用于文字、圖標、界面
1.主色,如下圖所示
2.輔助色、點睛色(控件、按鈕)
按鈕控件在設計中通常帶有透明度
3.字體顏色和透明度
4.布局
1狀態欄和下方圖片和列表布局間距
38mm(30px),42mm(32px)
2狀態欄和列表按鈕布局間距
38mm(11px),42mm(13px)
3狀態欄和下方文本布局間距
38mm(46px),42mm(50px)
4文字邊距和分割線按鈕列表圖片邊距
38mm和42mm邊距相同
5.圖片和按鈕到屏幕兩邊距離
38mm和42mm邊距相同
5.控件和列表
1單行控件和列表布局尺寸
38mm
42mm
2.雙行控件和列表布局尺寸
2.1正文+備注
38mm
42mm
2.2雙行正文
38mm
42mm
3.三行控件和列表布局尺寸
38mm
42mm
4.多行控件和列表布局尺寸
38mm
42mm
5.控件和列表類型
_

蘋果手表的啟動圖標設計規范重點在于適應小屏幕特性一般來說圓形或方形邊緣帶有圓角是比較理想的選擇而且圖標內的元素排列要緊湊不能浪費空間同時考慮到用戶可能在陽光下查看所以對比度要足夠高此外建議把核心圖形放在中心位置方便快速識別再者注意文件格式最好是PNG透明底圖以便更好地融入系統界面總之按照蘋果給出的參數表一步步調整就能達到比較理想的效果

關于Apple Watch的APP啟動圖標設計規范其實挺細致的首先它的尺寸要求就很嚴格一般為108x108像素當然不同系列可能略有差異此外圖標的風格建議保持簡潔明了最好與主應用的視覺元素統一這樣能增強品牌識別度另外需要注意的是圖標背景盡量選擇純色或簡單漸變避免過于復雜的圖案因為小屏幕顯示會失真最后記得遵循蘋果官方的設計指南里面的細節都很關鍵比如圓角半徑和安全區域等這些都能讓你的設計更專業

對于Apple Watch APP啟動圖標設計規范來說有幾個要點必須記住首先是比例一定要準確無論是38mm還是45mm表盤都有固定的尺寸其次圖標的設計語言應該延續母應用的特點形成統一風格再次由于顯示屏較小因此文字和裝飾性圖案都不宜出現最后制作過程中利用Sketch或者Adobe XD等工具可以幫助精準定位各個細節部分并且定期查閱蘋果最新的Human Interface Guidelines文檔確保你的作品始終走在前沿

如果想了解Apple Watch APP啟動圖標的設計規范可以從幾個方面入手第一要明確分辨率通常是48x48像素單位是PT具體取決于設備型號第二顏色搭配推薦使用品牌標準色但要確保在深淺模式下都清晰可見第三圖標內容不宜過多復雜圖形可能會導致加載時模糊第四可以參考蘋果提供的案例研究看看他們是如何將功能性和美觀性結合的第五測試階段別忘了在真實設備上預覽效果以確保最終呈現符合預期