一款APP設計的從0到1之:Android設計規(guī)范篇

10 評論 52248 瀏覽 485 收藏 17 分鐘

之前U妹給大家分享了《一款APP設計的從0到1之:iOS精華篇》,今天U妹給大家?guī)淼氖茿ndroid的設計規(guī)范篇。

Android的設計規(guī)范不同于iOS,Android是一個開源的系統(tǒng),國內外有很多的手機廠商,這就導致了有非常多的Android機型,如小米、華為、魅族、三星等,每一家都有自己的操作系統(tǒng),都有一套自己的UI設計規(guī)范。

U妹列了一個小小的目錄:

一、基礎概念

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

三、Android切圖標注

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

五、總結

一、基礎概念

1、什么是DPI?

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

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

安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96,Mac的初始值是72,雖然這個值從80年代起就不是很準確了。 一般來說,非retina桌面(包括Mac)的PPI的取值區(qū)間在72-120之間,因為這個取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比例。

這里有一個應用實例: 27寸Mac影院顯示屏的PPI是109,這表示在每英寸的屏幕上顯示了109個像素點。斜角長是25.7英寸(65cm),實際屏幕的寬度大概是23.5英寸,23.5109約等于2560,因此原始屏幕分辨率就是2560x1440px。

屏幕密度計算公式:

1080x1920px屏幕密度:

2、什么是PPI?

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

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

1、Android各設備屏幕密度

安卓尺寸眾多,按每個屏幕去適配肯定是不現(xiàn)實的。

所以為了解決這個問題,安卓手機屏幕有自己初始的固定密度,安卓會根據(jù)這些屏幕不同的密度自己進行適配。這一點內容掌握到能滿足自己設計工作需要就可以了……

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

安卓各屏幕密度

U妹來帶大家了解一下iPhone各設備的手機屏幕密度:

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、設計稿尺寸

從目前市場主流設備尺寸來看,我們要用1080 x 1920 PX?來做安卓設計稿尺寸。

以1080x1920px作為設計稿標準尺寸的原由:

  1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小,最方便適配。
  2. 大屏幕時代依然以小尺寸作為設計尺寸,會限制設計師的設計視角。
  3. 用主流尺寸來做設計稿尺寸,極大的提高了視覺還原和其他機型適配。

所以做安卓設計稿時請以1080x1920px來做設計稿

(sketch用戶以540 x 960來做設計稿)

界面設計控件尺寸:

4、安卓圖標尺寸

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

512x512px

192x192px

144x144px

96x96px

72x72px

48x48px

因為安卓有很多的機型,不同屏幕密度的手機對應的icon大小也是不同的,所以U妹這里沒法給你給出相應的icon所被應用的位置。

5、安卓設計字體

英文字體為?Roboto字體

中文字體為?思源黑體。在在Android 5.0之后,使用的是思源黑體,字體文件有2個名稱,“source han sans”和“noto sans CJK”。

思源黑體是Adobe和Google領導開發(fā)的開源字體,支持繁簡日韓,有7種字體粗細。

6、常見主流手機尺寸和分辨率

三、Android切圖標注

1、標注設計稿時,使用px還是dp或sp?

答:這個問題需要和安卓工程師溝通,推薦使用dp和sp進行標注(這里指的是在安卓設計稿的前提下)。但目前很多設計師對dp和sp這個單位并不理解,所以有些設計師提供安卓設計稿的時候依舊使用px進行標注,這一點去和你的搭檔工程師進行溝通,如果不影響他開發(fā)以及他能換算清楚的前提下,你可以考慮使用Px,但是我并不推薦。

這里要記住一點(你只需要記住能幫助你工作就可以):

當屏幕密度為MDPI(160DPI)時,1dp=1px ?

當屏幕密度為MDPI(160DPI)時,1sp=1px

像素字號=屏幕密度/160 * sp字號??可以根據(jù)這個去算算設計稿中的像素字號標注為sp是多少,比如xHDPI下,36px的字標注為sp就是18sp,以此類推。

按照不同的屏幕密度換算,也就是下圖所示的意思:

2. 你需要提供幾套切圖資源?

答:理論狀態(tài)下,如果你想兼顧到目前還存在的各個機型,應該為不同的密度提供不同尺寸大小的切圖。

但這無疑提升了巨大的工作量,而且還可能浪費很大的資源空間,實際上,很多機型已經(jīng)不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配,所以,具體輸出幾套需要看公司的產(chǎn)品需求而定。

通常我是這么干的:

選取最大尺寸提供一套切圖資源,交給開發(fā)工程師處理,適配到各個屏幕密度。

這里要注意,這個“最大尺寸”,指的并不是目前市面上Android手機出現(xià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. 在做設計稿時我們遇到的最多問題

(1)用哪種尺寸做設計稿?

iOS:用750x1334px來做設計稿。

安卓:就目前的市場來看,XXHDPI屬于主流機型;這樣無論是標注,還是主流機型都能兼顧的到,所以推薦使用1080x1920px來做設計稿尺寸,這樣即使你標注的是px,工程師也可以很方便的進行換算。

(2)如何用iOS的設計稿去適配安卓(劃重點啦)

現(xiàn)在有一種情況現(xiàn)在非常普遍,那就是一稿兩用;設計師都是做IOS版本的設計稿,來適配安卓,現(xiàn)在要給安卓用,應該怎么辦?

iPhone的屏幕密度已經(jīng)達到xHDPI了,用750x1334px的尺寸做設計稿;

實際上,750×1334的@3x的切圖資源正好是安卓XXhdpi(1080x1920px)的切圖資源;安卓開發(fā)用iOS的設計稿自己進行換算就可以了,前提是你必須和安卓工程師溝通。

另一種情況:你可以把750×1334的設計稿等比例調整尺寸到安卓1080×1920尺寸下,對各個控件進行微調,重新提供標注(用dp標注)。也就是說,你需要提供兩套標注,一套給iOS的標注,一套給Android的標注。

(3)大家可能還有一個問題,那就是我用cutterman切安卓圖片輸出的有drawable和mipmap 2個文件夾,到底將哪個給開發(fā)工程師呢?

答:以前用的開發(fā)工具,是只有drawable, 沒有mipmap的,后來新的開發(fā)工具里面才有mipmap這個文件夾,專門用來放png格式的圖片的,不過drawable里面還是可以放png圖片。

所以現(xiàn)在我們給安卓工程師的切圖輸出文件只需給mipmap-前綴開頭的就好。

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

1、安卓機型各種尺寸下的PX與DP、SP的對應關系

2、字體單位SP與PX的對應關系

3、距離單位DP與PX的對應關系

五、總結

關于《一款APP設計的從0到1之:安卓設計規(guī)范篇》就全部講完了,希望可以給你有很大的幫助;U妹這里說的只是一種工作方法,好的工作方法才能自己事半功倍,在具體工作中也要靈活應用,一定要多和開發(fā)溝通交流,良好的溝通才是解決問題的唯一方法,有疑問題也可給U妹留言,我們下期再見!

相關閱讀

iOS設計規(guī)范回顧:《一款APP設計的從0到1之:iOS精華篇》

#專欄作家#

UI妹兒,微信公眾號:UI妹兒(ID:UIfaner),人人都是產(chǎn)品經(jīng)理專欄作家。高級UI設計師,擅長UI和交互設計,有良好的審美能力和較強的創(chuàng)新能力,對色彩及構圖和設計風格有深刻的把握能力,具備手繪和動效功底。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 完了,我數(shù)學不好!算來算去。多和開發(fā)溝通,一切都了解了,

    回復
    1. 直接藍湖 自動算好啊

      來自江蘇 回復
  2. Android開發(fā)單位換算中的幾個點,什么DP,PS, SP沒看懂是啥意思,怎么辦才能看懂呀???

    來自廣東 回復
  3. 作為一名技術。我該怎么看

    來自河南 回復
  4. 控件尺寸狀態(tài)欄高度也不對吧?

    回復
  5. 安卓各屏幕密度那個表里有錯誤

    回復
  6. 作為一名交互,我沒看懂,是不是不合格 ??

    來自上海 回復
    1. 補功課吧

      來自河南 回復
  7. 很好,感謝

    回復
  8. 棒棒噠 很詳細

    來自福建 回復