App 的設(shè)計從0到1(Android篇)

App 的設(shè)計從0到1(Android篇)

??????? Android 的設(shè)計規(guī)范不同于 iOS,Android 是一個開源系統(tǒng),國內(nèi)外有很多的手機廠商,這就導(dǎo)致了有非常多的Android機型,且每一家都有自己的操作系統(tǒng),都有一套自己的UI設(shè)計規(guī)范

一、DPI 與 PPI

??????? 1、DPI(Dots Per Inch):每英寸點數(shù),表示指屏幕密度。是測量空間點密度的單位,最初應(yīng)用于打印技術(shù)中,它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會產(chǎn)生不清晰的圖片。

??????? 后來DPI的概念也被應(yīng)用到了計算機屏幕上,計算機屏幕一般采用 PPI(Pixels Per Inch)來表示一英寸屏幕上顯示的像素點的數(shù)量,現(xiàn)在 DPI 也被引入。

??????? 2、PPI(Pixels Per Inch):圖像分辨率,是每英寸圖像內(nèi)有多少個像素點,分辨率的單位為PPI,通常叫做像素每英寸。圖像分辨率一般被用于 Ps 中,用來改變圖像的清晰度。

屏幕密度計算公式

屏幕密度計算公式

二、界面設(shè)計規(guī)范

1、Android 各設(shè)備屏幕密度

??????? 安卓尺寸眾多,按每個屏幕去適配肯定是不現(xiàn)實的。所以為了解決這個問題,安卓手機屏幕有自己初始的固定密度,安卓會根據(jù)這些屏幕不同的密度自己進行適配。這一點內(nèi)容掌握到能滿足自己設(shè)計工作需要就可以了……

??????? 以下是Android的密度劃分以及代表的分辨率,這里你可以發(fā)現(xiàn)已經(jīng)和設(shè)計稿尺寸和切圖輸出開始掛鉤了。

Android 各屏幕密度

Android 各屏幕密度

2、Android 開發(fā)單位 DP 和 SP

DP:安卓專用長度單位。以160 DPI屏幕為標(biāo)注,則1DP=1PX

???????? 計算公式:dp x dpi/160=px

???????? 例:以720x1280px (320dpi)為例計算 1dp x 320 dpi/160=2px

SP:安卓專用字體單位。以160 DPI屏幕為標(biāo)注,則1SP=1PX

???????? 計算公式:sp x dpi/160=px

???????? 例:以720x1280px (320dpi)為例計算 1sp x 320 dpi/160=2px

3、設(shè)計稿尺寸

如果想一稿適配ios,那就新建720×1280 ?分辨率72,像素/英寸。

如果單獨設(shè)計安卓MD新規(guī)范的,那就新建1080×1920 ?分辨率72,像素/英寸。就目前的市場來看,XXHDPI屬于主流機型;這樣無論是標(biāo)注,還是主流機型都能兼顧的到,而且即使你標(biāo)注的是px,工程師也可以很方便的進行換算。

界面設(shè)計控制尺寸

界面設(shè)計控制尺寸

4、Android 圖標(biāo)尺寸

Android 圖標(biāo)尺寸

??????? 安卓的圖標(biāo)相對iOS來說較少,我們只需提供以下幾個尺寸就可以了,但是需要提高2套,圓角和直角各一套,因為有的地方都會用到:

512x512px???????????? 192x192px???????????? 144x144px????????????

96x96px??????????????? 72x72px???????????????? 48x48px

5、Android 設(shè)計字體

英文字體為“ Roboto 字體”,中文字體為“思源黑體”

三、Android 切圖標(biāo)注

1、標(biāo)注設(shè)計稿時時使用 ps 還是 sp?

??????? 這個問題需要和安卓工程師溝通,如果不影響前端開發(fā)以及能夠換算清楚的前提下,可以考慮使用Px,但推薦使用 dp 和 sp 進行標(biāo)注(這里指的是在安卓設(shè)計稿的前提下)

標(biāo)注示例
單位換算

2、切圖

??????? 理論狀態(tài)下,如果想兼顧到目前還存在的各個機型,應(yīng)該為不同的密度提供不同尺寸大小的切圖。但這無疑提升了巨大的工作量,而且還可能浪費很大的資源空間,實際上,很多機型已經(jīng)不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配,所以,可以選取最大尺寸提供一套切圖資源,關(guān)于最大尺寸選取多少,需要和安卓工程師進行溝通。

四、Android 開發(fā)單位換算

1、安卓機型各種尺寸下的PX與DP、SP的對應(yīng)關(guān)系

px與dp、sp對應(yīng)關(guān)系

2、字體單位SP與PX的對應(yīng)關(guān)系

px與sp對應(yīng)關(guān)系

3、距離單位DP與PX的對應(yīng)關(guān)系

px與dp對應(yīng)關(guān)系
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容