欢迎加入QQ讨论群258996829
麦子学院 头像
苹果6袋
6
麦子学院

Android ui设计中的尺寸单位换算及切图规范详解

发布时间:2017-09-26 15:30  回复:0  查看:5080   最后回复:2017-09-26 15:30  

本文和大家分享的主要是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]

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

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

Android ui设计中的尺寸单位换算及切图规范详解

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

5. xxxhdpi, 4K3840×2160

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

6. 其他

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

...

二:单位换算

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

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

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

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

3倍:1pt=1dp=3px   dpi=480xxhdpi,即1080x1920px1440x2560px

4倍: 1pt=1dp=4px   dpi=640xxxhdpi,即4K3840×2160


Android ui设计中的尺寸单位换算及切图规范详解

倍率

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

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

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

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

由此:

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

...

三:字体

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

Android系统字体有:

Droid Sans、 Droid Serif 、 Droid Sans MonoRoboto-Black.ttfRoboto-BlackItalic.ttfRoboto-Bold.ttfRoboto-BoldItalic.ttfRoboto-Italic.ttfRoboto-Light.ttfRoboto-Medium.ttfRoboto-MediumItalic.ttfRoboto-Regular.ttfRoboto-Thin.ttfRoboto-ThinItalic.ttfRobotoCondensed-Bold.ttf

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

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

DroidSans.ttf 系统默认英文字体

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

DroidSansFallback.ttf 系统默认中文字体

...

四:设计基础尺寸

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


Android ui设计中的尺寸单位换算及切图规范详解

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等文件)。

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


Android ui设计中的尺寸单位换算及切图规范详解

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

1.切图说明

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

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

  如:home_bg_nologin.pnghome_di_nologin.png

2.常用缩写

ic----icon(在app的图标),bg----backgrounddi----divider(主要用于分割线,不仅包括Listview中的divider,还包括普通布局中的线),sl----selectoravg----averagectrl----controldel----deletedoc----documenterr----errorinc----incrementinfo----informationimg----imagelib----librarymsg----messagepwd----passwordpos----position

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

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

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

3.后缀

nor--普通状态

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

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

4.注意事项

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

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

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


Android ui设计中的尺寸单位换算及切图规范详解

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

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

...

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

 

 

来源:简书

您还未登录,请先登录

热门帖子

最新帖子