2022-08-31 分類: 網(wǎng)站建設(shè)
《從零開始設(shè)計(jì)一款A(yù)pp》系列文章共6部分,之前已經(jīng)講了前5個部分,今天把設(shè)計(jì)規(guī)范部分也給大家科普下,趕緊來學(xué)習(xí)。U妹列了一個小小的目錄:基礎(chǔ)概念A(yù)ndroid界面設(shè)計(jì)規(guī)范Android切圖標(biāo)注安卓開發(fā)單位換算總結(jié)一.
基礎(chǔ)概念1. 什么是DPI?DPI(Dots Per
Inch):每英寸點(diǎn)數(shù),表示指屏幕密度。是測量空間點(diǎn)密度的單位,最初應(yīng)用于打印技術(shù)中,它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會產(chǎn)生不清晰的圖片。后來DPI的概念也被應(yīng)用到了計(jì)算機(jī)屏幕上,計(jì)算機(jī)屏幕一般采用PPI(Pixels
Per Inch)來表示一英寸屏幕上顯示的像素點(diǎn)的數(shù)量,現(xiàn)在DPI也被引入。
安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96,Mac的初始值是72,雖然這個值從80年代起就不是很準(zhǔn)確了。
一般來說,非retina桌面(包括Mac)的PPI的取值區(qū)間在72-120之間,因?yàn)檫@個取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比例。這里有一個應(yīng)用實(shí)例:
27寸Mac影院顯示屏的PPI是109,這表示在每英寸的屏幕上顯示了109個像素點(diǎn)。斜角長是25.7英寸(65cm),實(shí)際屏幕的寬度大概是23.5英寸,23.5109約等于2560,因此原始屏幕分辨率就是2560x1440px。
屏幕密度計(jì)算公式:
1080x1920px屏幕密度:
2. 什么是PPI?PPI(Pixels Per Inch):圖像分辨率;是每英寸圖像內(nèi)有多少個像素點(diǎn),分辨率的單位為ppi,通常叫做像素每英寸。圖像分辨率一般被用于ps中,用來改變圖像的清晰度。
二.Android界面設(shè)計(jì)規(guī)范1.
Android各設(shè)備屏幕密度安卓尺寸眾多,按每個屏幕去適配肯定是不現(xiàn)實(shí)的。所以為了解決這個問題,安卓手機(jī)屏幕有自己初始的固定密度,安卓會根據(jù)這些屏幕不同的密度自己進(jìn)行適配。這一點(diǎn)內(nèi)容掌握到能滿足自己設(shè)計(jì)工作需要就可以了……以下是Android的密度劃分以及代表的分辨率,這里你可以發(fā)現(xiàn)已經(jīng)和設(shè)計(jì)稿尺寸和切圖輸出開始掛鉤了。安卓各屏幕密度
U妹來帶大家了解一下iPhone各設(shè)備的手機(jī)屏幕密度:iphone
4/4S/5/5S/SE/6/7≈320DPI2. Android開發(fā)單位DP和SPDP:安卓專用長度單位。以160
DPI屏幕為標(biāo)注,則1DP=1PX計(jì)算公式:dp x dpi/160=px例:以720x1280px (320dpi)為例計(jì)算 1dp x
320 dpi/=2pxSP:安卓專用字體單位。以160 DPI屏幕為標(biāo)注,則1SP=1PX計(jì)算公式:sp x
dpi/160=px例:以720x1280px (320dpi)為例計(jì)算 1sp x 320 dpi/=2px3.
設(shè)計(jì)稿尺寸從目前市場主流設(shè)備尺寸來看,我們要用1080 x 1920 PX 來做安卓設(shè)計(jì)稿尺寸。
以1080x1920px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸的原由:①
從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小,最方便適配。② 大屏幕時代依然以小尺寸作為設(shè)計(jì)尺寸,會限制設(shè)計(jì)師的設(shè)計(jì)視角。③
用主流尺寸來做設(shè)計(jì)稿尺寸,極大的提高了視覺還原和其他機(jī)型適配。所以做安卓設(shè)計(jì)稿時請以1080x1920px來做設(shè)計(jì)稿(sketch用戶以540 x
960來做設(shè)計(jì)稿)
界面設(shè)計(jì)控件尺寸:
4. 安卓圖標(biāo)尺寸
安卓的圖標(biāo)相對iOS來說較少,我們只需提供以下幾個尺寸就可以了,但是需要提高2套,圓角和直角各一套,因?yàn)橛械牡胤蕉紩玫健?12x512px、192x192px、144x144px、96x96px、72x72px、48x48px
因?yàn)榘沧坑泻芏嗟臋C(jī)型,不同屏幕密度的手機(jī)對應(yīng)的icon大小也是不同的,所以U妹這里沒法給你給出相應(yīng)的icon所被應(yīng)用的位置。5.
安卓設(shè)計(jì)字體英文字體為 Roboto字體,中文字體為 思源黑體。在Android
5.0之后,使用的是思源黑體,字體文件有2個名稱,“source han sans”和“noto sans CJK”。
思源黑體是Adobe和Google領(lǐng)導(dǎo)開發(fā)的開源字體,支持繁簡日韓,有7種字體粗細(xì)。思源黑體字體下載地址,請戳這里:《免費(fèi)下載!谷歌攜手ADOBE推出超好看的的思源宋體(7種字重)》6. 常見主流手機(jī)尺寸和分辨率
三.
Android切圖標(biāo)注1.
標(biāo)注設(shè)計(jì)稿時,使用px還是dp或sp?答:這個問題需要和安卓工程師溝通,推薦使用dp和sp進(jìn)行標(biāo)注(這里指的是在安卓設(shè)計(jì)稿的前提下)。但目前很多設(shè)計(jì)師對dp和sp這個單位并不理解,所以有些設(shè)計(jì)師提供安卓設(shè)計(jì)稿的時候依舊使用px進(jìn)行標(biāo)注,這一點(diǎn)去和你的搭檔工程師進(jìn)行溝通,如果不影響他開發(fā)以及他能換算清楚的前提下,你可以考慮使用Px,但是我并不推薦。
這里要記住一點(diǎn)(你只需要記住能幫助你工作就可以):當(dāng)屏幕密度為MDPI(160DPI)時,1dp=1px當(dāng)屏幕密度為MDPI(160DPI)時,1sp=1px像素字號=屏幕密度/160
* sp字號
可以根據(jù)這個去算算設(shè)計(jì)稿中的像素字號標(biāo)注為sp是多少,比如xHDPI下,36px的字標(biāo)注為sp就是18sp,以此類推。按照不同的屏幕密度換算,也就是下圖所示的意思:
2.
你需要提供幾套切圖資源?答:理論狀態(tài)下,如果你想兼顧到目前還存在的各個機(jī)型,應(yīng)該為不同的密度提供不同尺寸大小的切圖。但這無疑提升了巨大的工作量,而且還可能浪費(fèi)很大的資源空間,實(shí)際上,很多機(jī)型已經(jīng)不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配,所以,具體輸出幾套需要看公司的產(chǎn)品需求而定。通常我是這么干的:
選取大尺寸提供一套切圖資源,交給開發(fā)工程師處理,適配到各個屏幕密度。這里要注意,這個“大尺寸”,指的并不是目前市面上Android手機(jī)出現(xiàn)過的大尺寸,而是指目前流行的主流機(jī)型中的大尺寸,這樣可節(jié)省很大的資源空間。關(guān)于大尺寸選取多少,你需要和你們的安卓工程師溝通,每個安卓工程師對這個問題的結(jié)論并不同。(我的安卓搭檔,讓我提供XXHDPI的切圖資源就好,我用的切圖工具是Cutterman,切圖一鍵搞定)3.
Android的切圖資源提供哪個尺寸給開發(fā)哥哥?答:iOS的切圖有@2x,@3x之分,那么Android的切圖根據(jù)dpi的不同,其實(shí)和iOS的類似,只不過是按照dpi來進(jìn)行資源文件夾的命名,如下圖:
根據(jù)不同的分辨率進(jìn)行切圖歸類,但是你看到了,如果切片特別多,提供5套切圖豈不是要累死了?一般情況下,我們只需要提供3套切圖資源就可以滿足安卓工程師的適配,分別是HDPI、XHDPI、 XXHDPI 3套切圖資源。
目前我使用的辦法就是只提供大尺寸的切圖,交給安卓工程師自己去縮放適配其他分辨率吧,所以和你的搭檔溝通一下。其實(shí)現(xiàn)在絕大多數(shù)公司限于人力物力的限制,沒有這么嚴(yán)格的工作方式,基本上就是一個文件夾,命名好了就提供給工程師了。
這里還是提醒各位,沒有固定的工作方式和方法,任何方式都是為了提升工作效率而進(jìn)行的。4.
在做設(shè)計(jì)稿時我們遇到的最多問題①
用哪種尺寸做設(shè)計(jì)稿?iOS:用750x1334px來做設(shè)計(jì)稿。安卓:就目前的市場來看,XXHDPI屬于主流機(jī)型;這樣無論是標(biāo)注,還是主流機(jī)型都能兼顧的到,所以推薦使用1080x1920px來做設(shè)計(jì)稿尺寸,這樣即使你標(biāo)注的是px,工程師也可以很方便的進(jìn)行換算。
②
如何用iOS的設(shè)計(jì)稿去適配安卓(劃重點(diǎn)啦)現(xiàn)在有一種情況現(xiàn)在非常普遍,那就是一稿兩用;設(shè)計(jì)師都是做iOS版本的設(shè)計(jì)稿,來適配安卓,現(xiàn)在要給安卓用,應(yīng)該怎么辦?iPhone的屏幕密度已經(jīng)達(dá)到xHDPI了,用750x1334px的尺寸做設(shè)計(jì)稿。實(shí)際上,750×1334的@3x的切圖資源正好是安卓XXhdpi(1080x1920px)的切圖資源;安卓開發(fā)用iOS的設(shè)計(jì)稿自己進(jìn)行換算就可以了,前提是你必須和安卓工程師溝通。
另一種情況:你可以把750×1334的設(shè)計(jì)稿等比例調(diào)整尺寸到安卓1080×1920尺寸下,對各個控件進(jìn)行微調(diào),重新提供標(biāo)注(用dp標(biāo)注)。也就是說,你需要提供兩套標(biāo)注,一套給iOS的標(biāo)注,一套給Android的標(biāo)注。③
大家可能還有一個問題,那就是我用cutterman切安卓圖片輸出的有drawable和mipmap 2個文件夾,到底將哪個給開發(fā)工程師呢?
答:以前用的開發(fā)工具,是只有drawable,
沒有mipmap的,后來新的開發(fā)工具里面才有mipmap這個文件夾,專門用來放png格式的圖片的,不過drawable里面還是可以放png圖片。所以現(xiàn)在我們給安卓工程師的切圖輸出文件只需給mipmap-前綴開頭的就好。四.
Android開發(fā)單位換算1. 安卓機(jī)型各種尺寸下的PX與DP、SP的對應(yīng)關(guān)系
3. 距離單位DP與PX的對應(yīng)關(guān)系
五.總結(jié)這里說的只是一種工作方法,好的工作方法才能自己事半功倍,在具體工作中也要靈活應(yīng)用,一定要多和開發(fā)溝通交流,良好的溝通才是解決問題的唯一方法。
文章原始鏈接https://www.uisdc.com/android-design-guideline-in-app往期回顧:《從零開始做APP
系列之項(xiàng)目立項(xiàng)+預(yù)估時間篇》《從零開始做APP 系列之界面設(shè)計(jì)篇》《UI實(shí)戰(zhàn)教程!從零開始做APP
系列之切圖標(biāo)注篇》《UI實(shí)戰(zhàn)教程!做設(shè)計(jì)稿前應(yīng)該做哪些準(zhǔn)備工作?》《從零開始設(shè)計(jì)一款A(yù)PP之視覺還原+上線準(zhǔn)備》
本文名稱:從零開始設(shè)計(jì)一款A(yù)PP之Android設(shè)計(jì)規(guī)范
當(dāng)前路徑:http://m.rwnh.cn/news7/194307.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、微信小程序、響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容