基礎(chǔ)概念
Android界面設(shè)計規(guī)范
Android切圖標注
安卓開發(fā)單位換算
總結(jié)
一. 基礎(chǔ)概念
1. 什么是DPI琼了?
DPI(Dots Per Inch):每英寸點數(shù)玻褪,表示指屏幕密度揩环。是測量空間點密度的單位,最初應(yīng)用于打印技術(shù)中缔赠,它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會產(chǎn)生不清晰的圖片韭山。
后來DPI的概念也被應(yīng)用到了計算機屏幕上郁季,計算機屏幕一般采用PPI(Pixels Per Inch)來表示一英寸屏幕上顯示的像素點的數(shù)量冷溃,現(xiàn)在DPI也被引入。
安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96梦裂,Mac的初始值是72似枕,雖然這個值從80年代起就不是很準確了。 一般來說年柠,非retina桌面(包括Mac)的PPI的取值區(qū)間在72-120之間凿歼,因為這個取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比例。
這里有一個應(yīng)用實例: 27寸Mac影院顯示屏的PPI是109,這表示在每英寸的屏幕上顯示了109個像素點答憔。斜角長是25.7英寸(65cm)味赃,實際屏幕的寬度大概是23.5英寸,23.5109約等于2560虐拓,因此原始屏幕分辨率就是2560x1440px心俗。
屏幕密度計算公式:
1080x1920px屏幕密度:
2. 什么是PPI?
PPI(Pixels Per Inch):圖像分辨率蓉驹;是每英寸圖像內(nèi)有多少個像素點城榛,分辨率的單位為ppi,通常叫做像素每英寸态兴。圖像分辨率一般被用于ps中狠持,用來改變圖像的清晰度。
二.?Android界面設(shè)計規(guī)范
1. Android各設(shè)備屏幕密度
安卓尺寸眾多瞻润,按每個屏幕去適配肯定是不現(xiàn)實的喘垂。
所以為了解決這個問題,安卓手機屏幕有自己初始的固定密度绍撞,安卓會根據(jù)這些屏幕不同的密度自己進行適配王污。這一點內(nèi)容掌握到能滿足自己設(shè)計工作需要就可以了……
以下是Android的密度劃分以及代表的分辨率,這里你可以發(fā)現(xiàn)已經(jīng)和設(shè)計稿尺寸和切圖輸出開始掛鉤了楚午。
安卓各屏幕密度
U妹來帶大家了解一下iPhone各設(shè)備的手機屏幕密度:
iphone 4/4S/5/5S/SE/6/7≈320DPI
2. Android開發(fā)單位DP和SP
DP:安卓專用長度單位昭齐。以160 DPI屏幕為標注,則1DP=1PX
計算公式:dp x dpi/160=px
例:以720x1280px (320dpi)為例計算 1dp x 320 dpi/=2px
SP:安卓專用字體單位矾柜。以160 DPI屏幕為標注阱驾,則1SP=1PX
計算公式:sp x dpi/160=px
例:以720x1280px (320dpi)為例計算 1sp x 320 dpi/=2px
3. 設(shè)計稿尺寸
從目前市場主流設(shè)備尺寸來看,我們要用1080 x 1920 PX 來做安卓設(shè)計稿尺寸怪蔑。
以1080x1920px作為設(shè)計稿標準尺寸的原由:
① 從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小里覆,最方便適配。
② 大屏幕時代依然以小尺寸作為設(shè)計尺寸缆瓣,會限制設(shè)計師的設(shè)計視角喧枷。
③ 用主流尺寸來做設(shè)計稿尺寸,極大的提高了視覺還原和其他機型適配弓坞。
所以做安卓設(shè)計稿時請以1080x1920px來做設(shè)計稿
(sketch用戶以540 x 960來做設(shè)計稿)
界面設(shè)計控件尺寸:
4. 安卓圖標尺寸
安卓的圖標相對iOS來說較少隧甚,我們只需提供以下幾個尺寸就可以了,但是需要提高2套渡冻,圓角和直角各一套戚扳,因為有的地方都會用到。
512x512px族吻、192x192px帽借、144x144px珠增、96x96px、72x72px砍艾、48x48px
因為安卓有很多的機型蒂教,不同屏幕密度的手機對應(yīng)的icon大小也是不同的,所以U妹這里沒法給你給出相應(yīng)的icon所被應(yīng)用的位置脆荷。
5. 安卓設(shè)計字體
英文字體為 Roboto字體悴品,中文字體為 思源黑體。在Android 5.0之后简烘,使用的是思源黑體苔严,字體文件有2個名稱,“source han sans”和“noto sans CJK”孤澎。
思源黑體是Adobe和Google領(lǐng)導開發(fā)的開源字體届氢,支持繁簡日韓,有7種字體粗細覆旭。
思源黑體字體下載地址退子,請戳這里:《免費下載!谷歌攜手ADOBE推出超好看的的思源宋體(7種字重)》
6. 常見主流手機尺寸和分辨率
三. Android切圖標注
1. 標注設(shè)計稿時型将,使用px還是dp或sp寂祥?
答:這個問題需要和安卓工程師溝通,推薦使用dp和sp進行標注(這里指的是在安卓設(shè)計稿的前提下)七兜。但目前很多設(shè)計師對dp和sp這個單位并不理解丸凭,所以有些設(shè)計師提供安卓設(shè)計稿的時候依舊使用px進行標注,這一點去和你的搭檔工程師進行溝通腕铸,如果不影響他開發(fā)以及他能換算清楚的前提下惜犀,你可以考慮使用Px,但是我并不推薦狠裹。
這里要記住一點(你只需要記住能幫助你工作就可以):
當屏幕密度為MDPI(160DPI)時虽界,1dp=1px
當屏幕密度為MDPI(160DPI)時,1sp=1px
像素字號=屏幕密度/160 * sp字號 可以根據(jù)這個去算算設(shè)計稿中的像素字號標注為sp是多少涛菠,比如xHDPI下,36px的字標注為sp就是18sp莉御,以此類推。
按照不同的屏幕密度換算俗冻,也就是下圖所示的意思:
2. 你需要提供幾套切圖資源礁叔?
答:理論狀態(tài)下,如果你想兼顧到目前還存在的各個機型言疗,應(yīng)該為不同的密度提供不同尺寸大小的切圖晴圾。
但這無疑提升了巨大的工作量颂砸,而且還可能浪費很大的資源空間噪奄,實際上死姚,很多機型已經(jīng)不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配勤篮,所以都毒,具體輸出幾套需要看公司的產(chǎn)品需求而定。
通常我是這么干的:
選取最大尺寸提供一套切圖資源碰缔,交給開發(fā)工程師處理账劲,適配到各個屏幕密度。
這里要注意金抡,這個“最大尺寸”瀑焦,指的并不是目前市面上Android手機出現(xiàn)過的最大尺寸,而是指目前流行的主流機型中的最大尺寸梗肝,這樣可節(jié)省很大的資源空間榛瓮。關(guān)于最大尺寸選取多少,你需要和你們的安卓工程師溝通巫击,每個安卓工程師對這個問題的結(jié)論并不同禀晓。(我的安卓搭檔,讓我提供XXHDPI的切圖資源就好坝锰,我用的切圖工具是Cutterman粹懒,切圖一鍵搞定)
3. Android的切圖資源提供哪個尺寸給開發(fā)哥哥?
答:iOS的切圖有@2x顷级,@3x之分凫乖,那么Android的切圖根據(jù)dpi的不同,其實和iOS的類似弓颈,只不過是按照dpi來進行資源文件夾的命名拣凹,如下圖:
根據(jù)不同的分辨率進行切圖歸類,但是你看到了恨豁,如果切片特別多嚣镜,提供5套切圖豈不是要累死了?
一般情況下橘蜜,我們只需要提供3套切圖資源就可以滿足安卓工程師的適配菊匿,分別是HDPI、XHDPI计福、 XXHDPI 3套切圖資源跌捆。
目前我使用的辦法就是只提供最大尺寸的切圖,交給安卓工程師自己去縮放適配其他分辨率吧象颖,所以和你的搭檔溝通一下佩厚。
其實現(xiàn)在絕大多數(shù)公司限于人力物力的限制,沒有這么嚴格的工作方式说订,基本上就是一個文件夾抄瓦,命名好了就提供給工程師了潮瓶。
這里還是提醒各位,沒有固定的工作方式和方法钙姊,任何方式都是為了提升工作效率而進行的毯辅。
4. 在做設(shè)計稿時我們遇到的最多問題
① 用哪種尺寸做設(shè)計稿?
iOS:用750x1334px來做設(shè)計稿煞额。
安卓:就目前的市場來看思恐,XXHDPI屬于主流機型;這樣無論是標注膊毁,還是主流機型都能兼顧的到胀莹,所以推薦使用1080x1920px來做設(shè)計稿尺寸,這樣即使你標注的是px婚温,工程師也可以很方便的進行換算嗜逻。
② 如何用iOS的設(shè)計稿去適配安卓(劃重點啦)
現(xiàn)在有一種情況現(xiàn)在非常普遍,那就是一稿兩用缭召;設(shè)計師都是做iOS版本的設(shè)計稿栈顷,來適配安卓,現(xiàn)在要給安卓用嵌巷,應(yīng)該怎么辦萄凤?
iPhone的屏幕密度已經(jīng)達到xHDPI了,用750x1334px的尺寸做設(shè)計稿搪哪。
實際上靡努,750×1334的@3x的切圖資源正好是安卓XXhdpi(1080x1920px)的切圖資源;安卓開發(fā)用iOS的設(shè)計稿自己進行換算就可以了晓折,前提是你必須和安卓工程師溝通惑朦。
另一種情況:你可以把750×1334的設(shè)計稿等比例調(diào)整尺寸到安卓1080×1920尺寸下,對各個控件進行微調(diào)漓概,重新提供標注(用dp標注)。也就是說梁肿,你需要提供兩套標注吩蔑,一套給iOS的標注烛芬,一套給Android的標注赘娄。
③ 大家可能還有一個問題擅憔,那就是我用cutterman切安卓圖片輸出的有drawable和mipmap 2個文件夾暑诸,到底將哪個給開發(fā)工程師呢个榕?
答:以前用的開發(fā)工具西采,是只有drawable械馆, 沒有mipmap的霹崎,后來新的開發(fā)工具里面才有mipmap這個文件夾尾菇,專門用來放png格式的圖片的派诬,不過drawable里面還是可以放png圖片默赂。
所以現(xiàn)在我們給安卓工程師的切圖輸出文件只需給mipmap-前綴開頭的就好放可。
四. Android開發(fā)單位換算
1. 安卓機型各種尺寸下的PX與DP耀里、SP的對應(yīng)關(guān)系
2. 字體單位SP與PX的對應(yīng)關(guān)系
3. 距離單位DP與PX的對應(yīng)關(guān)系
五.?總結(jié)
這里說的只是一種工作方法,好的工作方法才能自己事半功倍趾徽,在具體工作中也要靈活應(yīng)用孵奶,一定要多和開發(fā)溝通交流了袁,良好的溝通才是解決問題的唯一方法载绿。