【适配】【转】UI设计规范之Android尺寸单位换算及切图规范

原文地址:https://blog.csdn.net/qq_32506555/article/details/78095860

本文和大家分享的主要是ui设计中Android尺寸单位换算及切图规范相关内容,一起来看看吧,希望对大家有所帮助。

说明:

1.对象为 UI设计师和 Android工程师等开发人员。

2.方法有千种,开发工程师有万个,仅供参考,不喜就拿着你的建议留言,勿喷。

3.文档的本质是备份与查看,对外方便协作与对内提升效率。

4.文档不是万能的,如果文档查看对象看不懂,就没任何意义。 我喜欢当面沟通,因为能避免大部分文档的局限性

5.感谢Android开发工程师高鹏的指正与指导。

Android规范

一:手机尺寸

Android是必须要讲下手机尺寸的:(只是常规,特殊尺寸就不讲,如:1200x1600像素的惠普Slate8 Pro)

1. mdpi[320x480 px ]

市场份额少,新手机不会有这种倍率,屏幕通常都特别小

2. hdpi [480x800 px 、480x854 px 、540x960 px ]

早年的低端机屏幕在3.5英寸档位-目前很少

3. xhdpi[720x1280 px ]

即平常我们看视频讲的 720 P,设计图也有人按照此分辨率进行设计

4. xxhdpi[1080x1920px],[1440x2560px]

这里强调:目前1080x1920和2560×1440然后都是xxhdpi,适配难免会有误差,下边换算我会再讲到

即平常我们看视频讲的2K高清,或 1080 P,高清视频就需支持此类像素。如今比较常用,设计图也大多以1080这个尺寸做。

20170926152751972.png

主流尺寸-也是主流设计尺寸

5. xxxhdpi, 4K(3840×2160)

就是我们现在所说的4K屏手机,也逐渐多了起来,也有设计者针对特殊的设计要求按照此设计尺寸做

6. 其他

如魅族MX4 Pro 1536x2560 三星T705的 1600x2560 这些尺寸暂时我也没用到,以后有机会再补充

...

二:单位换算

dpi的计算方式就是(10801080+19201920)开方然后除以屏幕尺寸,然后你看dpi落在哪个表格区间

**1倍:1pt=1dp=1px ** dpi=160 (mdpi,即320x480px)

**1.5倍:1pt=1dp=1.5px ** dpi=240(hdpi,即480x800px等)

**2倍:1pt=1dp=2px ** dpi=320(xhdpi,即720x1280px)

**3倍:1pt=1dp=3px **dpi=480(xxhdpi,即1080x1920px和1440x2560px)

**4倍: 1pt=1dp=4px **dpi=640(xxxhdpi,即4K(3840×2160)

20170926152814792.png

倍率

字体:1sp=1dp (字体大小单位sp,这个比较复杂,因为系统为了使字体显示的更清楚会对你设置的大小做补偿,可能大点或小了点,一般我们使用这样的换算)

自然地,以1倍的mdpi作为基准。像素密度更高或者更低的设备,只需乘以相应的倍率,就 能得到与基准倍率近似( 注意,这里是 近似 ,安卓开发和设计图会有区别本质在于倍率的误差,我们能做的只是减小误差 的显示效果。如:

在3倍情况下的比如1080和2560×1440然后都是xxhdpi,那么后者屏幕除以3得到的长的总dp和宽的总dp都比1080的多。

不过需要注意的是,Android设备的像素尺寸并不统一。比如两种常见的屏幕480×800和1080×1920,它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍,得到逻辑像素为320×533和360×640。很显然,后者更宽更高,能显示更多内容。所以,即使有倍率的存在, 各种Android设备的显示效果仍然无法做到完全一致。

由此:

每个开发写代码方式不同,设计图和开发出来的样式难免会有不同。我们该积极的去寻找解决办法,减小误差,而不是相互的推卸责任。要知道我们的共同目的都是为了正在开发的产品。

...

三:字体

自从Ice Cream Sandwich发布以来,Roboto都是Android系统的默认字体集。在这个版本中,将Roboto做了进一步全面优化,以适配更多平台。宽度和圆度都轻微提高,从而提升了清晰度,并且看起来更加愉悦。

Android系统字体有:

Droid Sans、 Droid Serif 、 Droid Sans Mono、Roboto-Black.ttf、Roboto-BlackItalic.ttf、Roboto-Bold.ttf、Roboto-BoldItalic.ttf、Roboto-Italic.ttf、Roboto-Light.ttf、Roboto-Medium.ttf、Roboto-MediumItalic.ttf、Roboto-Regular.ttf、Roboto-Thin.ttf、Roboto-ThinItalic.ttf、RobotoCondensed-Bold.ttf

RobotoCondensed-BoldItalic.ttf、RobotoCondensed-Italic.ttf、RobotoCondensed-Light.ttf、RobotoCondensed-LightItalic.ttf、RobotoCondensed-Regular.ttf

Clockopia.ttf 系统默认待机时钟字体

DroidSans.ttf 系统默认英文字体

DroidSans-Bold.ttf 系统默认英文粗字体

DroidSansFallback.ttf 系统默认中文字体

...

四:设计基础尺寸

主流尺寸:(xxhdpi)1080x1920, (xhdpi)720 x 1280。Android比iPhone的尺寸要多,在适配上也是相对而言比较麻烦,在设计中一般是采用1080x1920px的设计尺寸。

20170926152836939.png

Android常规尺寸(px)

在Android设计尺寸规范没有iPhone那样具体的规范,这也决定了安卓的灵活性更强,发挥的空间也越大。现在安卓的手机最近的几版新系统的许多交互细节都超越了iPhone。

Google Play上显示的启动器图标是512x512像素。

移动设备上的启动器图标是48x48 dp。

手机的动作栏图标应为32x32 dp。

通知图标必须是24x24 dp。

小图标应为16x16dp。

说明: 这里我所列举的只是一些常规的,不能代表所有,仅供参考。因为手机千变万化,系统不断的更新,设计也要循序渐进额的跟上,现在网上一些设计规范竟然细到了连一个页面上按钮的大小都规定好,那还叫设计么。

五.切图与命名

文件包命名规则是:项目名字+切图+作者名字+日期

例如:蚂蚁金服基金3.5.8.5版本迭代-H5页面设计切图李笑_20170321

文件包压缩用.rar或.zip格式

文件包要包括:image(切图),效果图+标注图,切图简单说明(word等文件)。

说明:效果图必须是要有的,对于标注图可以根据技术需求,沟通必不可少

20170926152857244.png

提供给程序开发的文档打开

1.切图说明

在图片的命名中不要有中文、特殊符号以及空格,字母必须是小写字母。在命名中很多可以是缩写,技术一般也是按照这样来分类。

建议具体命名方法是: 模块类别功能_状态.png (状态会有:点击状态,点击压下状态,禁用状态,选中状态等)

如:home_bg_nologin.png和home_di_nologin.png

2.常用缩写

ic----icon(在app的图标),bg----background,di----divider(主要用于分割线,不仅包括Listview中的divider,还包括普通布局中的线),sl----selector,avg----average,ctrl----control,del----delete,doc----document,err----error,inc----increment,info----information,img----image,lib----library,msg----message,pwd----password,pos----position

主要的功能界面,就是App界面中的activity,在一个产品中可以有很多 activity

然后每个页面主要功能基本上可以包括:nav , tab /toolbar , menu .

备注:不要自己定义缩写,除非是约定成俗的。 当然不喜欢用缩写的可以全拼,这里仅供参考

3.后缀

nor--普通状态

pressed--按下或者是点击后效果

例如按钮(btn):home_btn_select_nor.png / home_btn_select_pressed.png

4.注意事项

(1). 切图需要几套分辨率的图:如10801920,7201280。分别放在不同的文件夹中,同一张图片,在两个文件夹中的名字要一致。

(2).如遇到可拉伸可平铺的图片,使用9Patch进行制作,产生xxx.9.png图片即可,优点:灵活度大,可复用,程序包大小减少,增加程序运行效率。(.9切图教程网上很多比我说的好且详细)

(3). 对于开发人员需要页面间距尺寸,我们可以使用“标你妹啊”“MarkMan”等软件进行测量以及可以测出相对应需要提供的色值(提前和开发沟通好所需,能节省设计师的大部分时间和最后的开发修正时间)

20170926152918369.png

卡卷包与会员中心图片大小一致

(4).在给安卓开发人员切图时,对于相同模块内容不同的时候,要保证背景大小是一致,用空白填充。如:上图四个图标切出图片大小保证一致性,用空白透明填充,

...

页面上的内容永远是不一样的,设计又是内容与形式关系成的视觉引导。设计规范是服务形式的,而形式的本质是解决内容的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,527评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,314评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,535评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,006评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,961评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,220评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,664评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,351评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,481评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,123评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,713评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2 341

推荐阅读更多精彩内容

  • 看着镜子中越来越肥的自己,我只能侧过身来让脸显得稍微瘦点,减肥始终是充斥在朋友圈以及生活中的重要话题,提起的...
    无尽一夏阅读 284评论 2 2
  • 1. 最近公司忙于招聘事宜,我也算过了一把HR的瘾。 每天忙于穿梭在各种报表对账中,抽空查看简历约见面试,并且初试...
    嗨七爷阅读 351评论 4 3
  • 那是2007年11月,刚上大一,在学校组织的辩论赛上遇到了她,我不知道怎么形容她的美丽,只感觉像是从童话里走出来的...
    梓郢阅读 209评论 0 0
  • 楔子 “冬子,快跑啊!”旁边一个染着黄毛的少年大声的对我喊着。 而我看着倒在地上的人,满脸鲜血,已经昏迷不醒。再看...
    Ds安东阅读 236评论 0 0
  • 一 贺长伟驾驶着一辆三菱越野车,正以120码的速度在高速公路上飞驰。两边的树木郁郁葱...
    佛在钦山阅读 566评论 2 7