西湖鱼

 这是安卓UI的第二篇文章,第一篇主要讲了和设计相关的安卓系统基础知识,这篇文章主讲设计过程的重要步骤,设计工具推荐,以及文末资源下载。

 

01. 两点因素确定设计稿尺寸

1.文档大小

上一篇文章提到,大图缩小比小图放大的损耗小,那我们应该根据最大系统屏幕密度XXXHDPI做设计稿吗?答案是不行的,因为设计稿文档太大, ps容易卡,切图给开发也会增大安装包,所以不能选最大尺寸。

xxhdpi_04

 

2.市场占比:

下图是我根据今年最热手机型号整理的表格。

xxhdpi_01

 

从图中可以看出,最热机型屏幕尺寸在5.0以上,屏幕密度在400ppi以上,分辨率主要是1080px*1920px。

我还找了其他相关资料,结果显示分辨率1080px*1920px的市场占比越来越高。

根据上面两点的分析,得出的结论是:按照1080px*1920px尺寸设计,它既限制了文件大小又能满足大多数用户的显示效果。

 

02. XXHDPI设计稿

1080px*1920px刚好是安卓系统屏幕密度XXHDPI的分辨率,这两者的对应关系是谷歌规定的,不必深究,我们只需在ps里新建画布1080px*1920px,分辨率72ppi。

(之前的文章说过,画布设置为像素,分辨率不重要,设置多少都可以)

XXHDPI对应3X图,也就是1dp=3px。在Material Design设计规范里,把dp和px换算,就能得到相应控件的尺寸啦。

 

03. 适配

上一篇文章详细讲了安卓系统适配原理,简单的说就是,按照系统屏幕密度适配,但是有系统缩放图片和切倍数图片两种方式,具体内容请看上期文章。

 

04. 标注

标注的精准度直接关乎到设计稿的还原度,那怎样标注才能省时又省力呢?

标注软件推荐:PxCook 像素大厨

xxhdpi_09

以前我也用过“标你妹、马克曼、Assistor PS”,综合比较推荐PxCook,它的安装包很小,支持多平台,标注功能非常智能,还能自动生成代码。

PxCook有设计和开发两种模式,设计模式主要用于设计师标注数值,选择安卓设计稿单位就是dp和sp。开发模式主要用于预览标注信息和代码,有了开发模式完全不需要设计师标注好吗,开发需要哪里指哪里。xxhdpi_13

xxhdpi_03

 

它的优势体现在:

  • 能标注图形的圆角,描边,投影,透明度;能标注文字的行高,字间距,对齐方式。反正设计有的信息都能标注。
  • 和ps神同步,在ps里更改元素,pxcp文件会自动更新改标注信息,真的非常赞!!!
  • 重点,免费。

 

小数问题:像素不能为小数,同样dp也尽量不要设置成小数,避免dp为小数的方法是,假如我们设计的是3X图,那么画布里所有的元素都必须是3的倍数,其他设计稿类似,标注的数值除以3刚好是整数,也就是dp的值。

热区问题:手机屏都有最小触摸范围,如果图标小于这个值,标注的时候记得给小图标加热区。

 

05. 切图

切图和标注一样,也是保证设计稿还原度的重要环节。

切图软件推荐:Cutterman

xxhdpi_06

Cutterman是ps的插件,软件包小,推荐安装官方完整版PS cc ,绿色版Ps无法使用。它能切iOS,Android,PC三个平台的图片,切图前记得设置当前基准,即设计稿的尺寸。

xxhdpi_07

和其它切图软件相比,它的操作方便很多,界面功能简单且容易理解,不像Assistor PS,我现在还没明白它切安卓图片的原理,切出来的图片尺寸也不对,完全不知道问题出在哪里。

 

注意:

  • 图层不要有相同名称,因为相同名称的切图会被覆盖。
  • 一般安卓切三套图给开发,即xhdpi,xxhdpi,xxxhdpi。

 

点9图

.9.png是Android开发中使用的图片格式,作用是保证图片在拉伸后显示不失真,主要用于避免圆角、描边、背景纹理等模糊变形,同时还减小了图片资源。

xxhdpi_08

png图片

xxhdpi_10

.9.png图片

 

主要应用场景:对话框,背景纹理;现在设计风格大多是扁平风格,按钮加渐变和投影的相对少见。

.9图片原理是:通过上边和左边来控制拉伸区域,通过右边和下边来控制内容的显示区域。

xxhdpi_11

.9图片的四个属性:

  • 上方的黑线,指的是水平方向的拉伸区域。水平方向拉伸图片时,只有黑线区域内的图像会被拉伸,黑线两边的图像保持原状,这保证了左右两边的边框圆角和描边不变。
  • 左方的黑线,指的是垂直方向的拉伸区域。垂直方向拉伸图片时,只有黑线区域内的图像会被拉伸,黑线两边的图像保持原状,这保证了上下两边的边框圆角和描边不变。
  • 下方的黑线,指的是该图片作为控件背景时,控件内部的文字左右边界只能放在黑线区域内。
  • 右方的黑线,指的是该图片作为控件背景时,控件内部的文字上下边界只能放在黑线区域内。

注意:

  • 点或线必须是纯黑色#000000
  • 文件的后缀名必须是.9.png

 

点九图片制作工具:draw9patch

旧版的Cutterman自带点九切图功能,但是新版没有了,可能是点九图使用范围太窄或者开发编译会出问题吧,为了避免出现问题推荐安卓系统自带的工具draw9patch制作点九图

xxhdpi_12

基本操作如下:

  • 把需要制作点九的图片保存为最小尺寸的png,以减小图片资源,然后拖入draw9patch。
  • 点击鼠标左键画黑线,按住shift点击鼠标左键擦除黑线。上和左是拉伸区域,可以只画一个点,下和右是文字区域,黑线的长度就是内容范围。
  • 右侧窗口有实时预览,拖动滑块查看效果,避免出错。
  • 制作完成,点击保存即可。详细教程请百度。

xxhdpi_02

图切完了,怎么命名呢?

 

06. 命名规则

命名的规范不是固定的,关键是看公司开发的命名习惯,如果有以前的设计文档可以参照。

一般规范是:分类名称+控件名称+功能+状态.png;不能用中文命名,不要以数字或符号开头,推荐使用英文小写字母命名,使用下划线连接。

 

举个例子:

一个列表上的按钮,点击查看更多,处于正常状态。

List_btn_more_nor.png

List_btn_more_nor@2x.png

切片分类是列表list上的元素,控件是按钮btn,功能是查看更多more,状态是正常nor。

 

最后,交付给开发的文档包含:

  • 设计效果图jpg
  • 标注源文件pxcp
  • 切图png

 

完!

总结:

到这里文章就结束啦!本文的内容都是设计过程的重要步骤,也是我做设计的经验总结。有的地方讲的不详细,可以百度相关知识点,因为实在不想讲得太细碎,养成不做伸手党的好习惯。

下期主要讲Material Design设计规范。

 

资源下载:

PxCook下载链接:http://www.fancynode.com.cn/pxcook

百度云盘资源:http://pan.baidu.com/s/1eRSOnXg 密码:50j5

包含:新版Cutterman,点九切图(draw9patch、Java)

原创不易~

 

原文地址:番茄设计匠(公众号)

作者:番茄

 

转载请注明:学UI网 » 为什么选择XXHDPI做设计呢?

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
你的设计有依据吗?详解用户体验设计中的规律与逻辑你的设计有依据吗?详解用户体验设计中的规律与逻辑
用「8点网格」来规范你的设计用「8点网格」来规范你的设计
房产类APP「链家」原型分享房产类APP「链家」原型分享
【滴滴体验设计研究·实践篇】从 iPhone X 适配说起【滴滴体验设计研究·实践篇】从 iPhone X 适配说起
20个优秀手机界面扁平化设计,让你一秒看懂扁平化20个优秀手机界面扁平化设计,让你一秒看懂扁平化
安卓UI (三) — 设计规范安卓UI (三) — 设计规范
实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点
帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !
表格设计深入研究——行高设定表格设计深入研究——行高设定
为什么设计师只设计一稿尺寸?为什么设计师只设计一稿尺寸?