一款APP設計的從0到1之:Android設計規范篇【Bus Weekly】83 期

6
回復
3007
查看
打印 上一主題 下一主題
[復制鏈接]

188

主題

183

帖子

6740

安幣

管理員

Rank: 9Rank: 9Rank: 9

樓主
發表于 2018-1-15 11:33:22 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式

Android的設計規范不同于iOS,Android是一個開源的系統,國內外有很多的手機廠商,這就導致了有非常多的Android機型,如小米、華為、魅族、三星等,每一家都有自己的操作系統,都有一套自己的UI設計規范。
列了一個小小的目錄:
    一、基礎概念
    二、Android界面設計規范
    三、Android切圖標注
    四、安卓開發單位換算

一、基礎概念
1、什么是DPI?
DPI(Dots Per Inch):每英寸點數,表示指屏幕密度。是測量空間點密度的單位,最初應用于打印技術中,它表示每英寸能打印上的墨滴數量。較小的DPI會產生不清晰的圖片。
后來DPI的概念也被應用到了計算機屏幕上,計算機屏幕一般采用PPI(Pixels Per Inch)來表示一英寸屏幕上顯示的像素點的數量,現在DPI也被引入。

安裝Windows操作系統的電腦屏幕PPI的初始值是96,Mac的初始值是72,雖然這個值從80年代起就不是很準確了。 一般來說,非retina桌面(包括Mac)的PPI的取值區間在72-120之間,因為這個取值區間能夠確保你的作品在任何地方都能保持大致相同的比例。
這里有一個應用實例: 27寸Mac影院顯示屏的PPI是109,這表示在每英寸的屏幕上顯示了109個像素點。斜角長是25.7英寸(65cm),實際屏幕的寬度大概是23.5英寸,23.5109約等于2560,因此原始屏幕分辨率就是2560x1440px。

屏幕密度計算公式:

1080x1920px屏幕密度:

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

二、Android界面設計規范
1、Android各設備屏幕密度
安卓尺寸眾多,按每個屏幕去適配肯定是不現實的。
所以為了解決這個問題,安卓手機屏幕有自己初始的固定密度,安卓會根據這些屏幕不同的密度自己進行適配。這一點內容掌握到能滿足自己設計工作需要就可以了……
以下是Android的密度劃分以及代表的分辨率,這里你可以發現已經和設計稿尺寸和切圖輸出開始掛鉤了。
安卓各屏幕密度

U妹來帶大家了解一下iPhone各設備的手機屏幕密度:
iphone 4/4S/5/5S/SE/6/7≈320DPI

2、Android開發單位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作為設計稿標準尺寸的原由:
  • 從中間尺寸向上和向下適配的時候界面調整的幅度最小,最方便適配。
  • 大屏幕時代依然以小尺寸作為設計尺寸,會限制設計師的設計視角。
  • 用主流尺寸來做設計稿尺寸,極大的提高了視覺還原和其他機型適配。

所以做安卓設計稿時請以1080x1920px來做設計稿
(sketch用戶以540 x 960來做設計稿)


界面設計控件尺寸:

4、安卓圖標尺寸

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

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

5、安卓設計字體
英文字體為 Roboto字體
中文字體為思源黑體。在在Android 5.0之后,使用的是思源黑體,字體文件有2個名稱,“source han sans”和“noto sans CJK”。
思源黑體是Adobe和Google領導開發的開源字體,支持繁簡日韓,有7種字體粗細。

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

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

這里要記住一點(你只需要記住能幫助你工作就可以):
當屏幕密度為MDPI(160DPI)時,1dp=1px
當屏幕密度為MDPI(160DPI)時,1sp=1px
像素字號=屏幕密度/160 * sp字號 可以根據這個去算算設計稿中的像素字號標注為sp是多少,比如xHDPI下,36px的字標注為sp就是18sp,以此類推。
按照不同的屏幕密度換算,也就是下圖所示的意思:

2. 你需要提供幾套切圖資源?
答:理論狀態下,如果你想兼顧到目前還存在的各個機型,應該為不同的密度提供不同尺寸大小的切圖。
但這無疑提升了巨大的工作量,而且還可能浪費很大的資源空間,實際上,很多機型已經不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配,所以,具體輸出幾套需要看公司的產品需求而定。
通常我是這么干的:

選取最大尺寸提供一套切圖資源,交給開發工程師處理,適配到各個屏幕密度。
這里要注意,這個“最大尺寸”,指的并不是目前市面上Android手機出現過的最大尺寸,而是指目前流行的主流機型中的最大尺寸,這樣可節省很大的資源空間。關于最大尺寸選取多少,你需要和你們的安卓工程師溝通,每個安卓工程師對這個問題的結論并不同。(我的安卓搭檔,讓我提供XXHDPI的切圖資源就好,我用的切圖工具是Cutterman,切圖一鍵搞定)

3. Android的切圖資源提供哪個尺寸給開發哥哥?
答:iOS的切圖有@2x,@3x之分,那么Android的切圖根據dpi的不同,其實和iOS的類似,只不過是按照dpi來進行資源文件夾的命名,如下圖:

根據不同的分辨率進行切圖歸類,但是你看到了,如果切片特別多,提供5套切圖豈不是要累死了?
一般情況下,我們只需要提供3套切圖資源就可以滿足安卓工程師的適配,分別是HDPI、XHDPI、 XXHDPI 3套切圖資源。

目前我使用的辦法就是只提供最大尺寸的切圖,交給安卓工程師自己去縮放適配其他分辨率吧,所以和你的搭檔溝通一下。

其實現在絕大多數公司限于人力物力的限制,沒有這么嚴格的工作方式,基本上就是一個文件夾,命名好了就提供給工程師了。
這里還是提醒各位,沒有固定的工作方式和方法,任何方式都是為了提升工作效率而進行的。

4. 在做設計稿時我們遇到的最多問題
(1)用哪種尺寸做設計稿?
iOS:用750x1334px來做設計稿。
安卓:就目前的市場來看,XXHDPI屬于主流機型;這樣無論是標注,還是主流機型都能兼顧的到,所以推薦使用1080x1920px來做設計稿尺寸,這樣即使你標注的是px,工程師也可以很方便的進行換算。

(2)如何用iOS的設計稿去適配安卓(劃重點啦)
現在有一種情況現在非常普遍,那就是一稿兩用;設計師都是做IOS版本的設計稿,來適配安卓,現在要給安卓用,應該怎么辦?
iPhone的屏幕密度已經達到xHDPI了,用750x1334px的尺寸做設計稿;
實際上,750×1334的@3x的切圖資源正好是安卓XXhdpi(1080x1920px)的切圖資源;安卓開發用iOS的設計稿自己進行換算就可以了,前提是你必須和安卓工程師溝通。

另一種情況:你可以把750×1334的設計稿等比例調整尺寸到安卓1080×1920尺寸下,對各個控件進行微調,重新提供標注(用dp標注)。也就是說,你需要提供兩套標注,一套給iOS的標注,一套給Android的標注。
(3)大家可能還有一個問題,那就是我用cutterman切安卓圖片輸出的有drawable和mipmap 2個文件夾,到底將哪個給開發工程師呢?

答:以前用的開發工具,是只有drawable, 沒有mipmap的,后來新的開發工具里面才有mipmap這個文件夾,專門用來放png格式的圖片的,不過drawable里面還是可以放png圖片。
所以現在我們給安卓工程師的切圖輸出文件只需給mipmap-前綴開頭的就好。

四、Android開發單位換算
1、安卓機型各種尺寸下的PX與DP、SP的對應關系

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

3、距離單位DP與PX的對應關系
來源:人人都是產品經理




【Bus Weekly】83 期

【一周優秀博文】

Android 中的轉場動畫及兼容處理

垃圾回收算法與 JVM 垃圾回收器綜述

App組件化與業務拆分那些事

Android Studio開發使用小技巧

你真的了解weight和weightSum嗎?




【一周Android精品源碼推薦】

android實現拖拽返回PhotoView

Zxing實現二維碼條形碼的掃描和解析

android組件化方案源碼

一個非常方便的fragment頁面框架

android下拉刷新動畫效果代碼

CalendarView日歷選擇器

Android 中的轉場動畫優化

Kotlin 實現的 View to View 動畫效果庫

仿美團選擇城市、微信通訊錄導航懸停分組索引列表。

基于Kotlin的新聞客戶端



安卓巴士官方微博鏈接

Bus Weekly回顧
安卓巴士菁英會會員招募中~



分享到:  QQ好友和群 QQ空間 微信
收藏
收藏8
支持
支持0
反對
反對0

0

主題

9525

帖子

2466

安幣

Android大神

Rank: 6Rank: 6

沙發
發表于 2018-1-15 23:41:39 | 只看該作者
每次我都積極回帖的,想要安幣~

2

主題

9497

帖子

2469

安幣

Android大神

Rank: 6Rank: 6

板凳
發表于 2018-1-16 09:31:54 | 只看該作者
樓主是好人,回個帖會有安幣嗎?

1

主題

81

帖子

1207

安幣

Android大神

Rank: 6Rank: 6

地板
發表于 2018-1-16 11:49:00 | 只看該作者
感謝分享,安卓巴士有你更精彩:)

0

主題

6

帖子

14

安幣

初級碼農

Rank: 1

5#
發表于 2018-1-16 14:43:15 | 只看該作者
回帖賺積分

2

主題

9695

帖子

2085

安幣

Android大神

Rank: 6Rank: 6

QQ達人

6#
發表于 2018-1-17 07:55:22 | 只看該作者
支持樓主,支持安卓巴士!

14

主題

9477

帖子

4723

安幣

碼皇(巴士元老)

Rank: 8Rank: 8

7#
發表于 2018-1-18 01:30:03 | 只看該作者
安卓巴士是個不錯的網站,我來頂個貼~
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

时时彩改欢乐生肖 钱柜彩票安卓 潘多拉赚钱 dnf2016赚钱最快的方法 内蒙古老友麻将作弊器 彩票赚钱的高手 易发游戏斗地主 快乐扑克3中奖规则 金沙棋牌游戏大厅棋牌游戏平台 北京pk赛车app下载 手机赚钱app对手机有影响吗 梦幻西游卖高兽决赚钱吗6 新11选5基本走势图 河南11选5多少钱一柱 公户发工资怎么赚钱 南通金游棋牌 天津快乐10分规律