android切图双数,UI切图与命名规范
原标题:UI切图与命名规范
写一写UI的基础和用软实力增强与工程师团队的协同工作能力,通过规范的切图不仅可以提升整个团队的工作效率,而且大大缩短了设计狮与程序猿之间的沟通成本,好的切图更是为设计图的精确实现和完美落地做坚实保障。
切图是什么?互联网产品是由一套富有逻辑的页面通过链接构成从而实现某种特殊功能服务于不同需求与受众。而页面中最基本的元素就是色块、文字、图片,通过色块拉开页面不同信息之间的层次,产生布局美;通过文字展现内容加以对比突出重点,呈现信息流;通过图片增加页面丰富度和可看性,展现多样性。而切图一方面是处理图片,更重要的一方面是处理复杂样式,我们经常把复杂样式以切图的形式出现以降低开发难度和开发成本。
切图的原则
切图资源尺寸必须为双数
因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。
切图倍率考虑到主流适配机型
在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。现在主流要输出@2x和@3x的切图,针对近几年的大屏手机,适配倍率应该在3倍比较合适。
控制切图大小
在用户网络速度和网络环境未知的情况下,要考虑到用户打开产品时加载速度问题和APP安装包大小等问题,所以需要在保证质量的前提下尽可能的减少切图大小。
切图的类型
启动图标切图
APP的启动图标往往象征了整个产品的形象,起到一定的标识作用。应用场景一般在手机桌面、APP store、手机的设置列表,所以app桌面图标需要很多个不同尺寸的切图输出。切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。
icon切图
在iOS和Android的@2x切图中,icon可使用公用的44*44px切图,可实现一套切图适配两个平台。同样适应于@3x的尺寸为66*66px。
图片类切图输出
针对广告图、启动页、新手指引页等同类型的图片切图要保持同样大小尺寸做以规范。
动态元素切图
动效元素切图一般是指在app中加载动效所需要的切图元素,运用的是序列帧的方法输出动画,不过此种方法可能运用较少,现在大多都用GIF图或者lottie动画。(关于lottie动画我会在下期文章中着重说明)
可拉伸元素切图
可拉伸元素一般指的是输入框、聊天对话框等可以扩充的切图。在ios中这种切图方式叫做平铺切图,在安卓中这种切图方式叫做点九切图法。
通常在项目中
IOS:以750*1334为基稿设计,按实际项目开发为标准,需切出@2x和@3两套图,把在公共页面中的导航栏里面有一个按钮(40x40px)的选中状态切图,直接输出的切图为@2x图,@2x的1.5倍图为@3x。
Android:以720*1280为基稿设计,由于尺寸不同且多样,需要切多套图适配不同机器,分别为mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接输出的切图为xhdpi;它们分别对应的倍数关系为1、1.5、2、3、4。
切图命名规范
1、产品模块_类别_功能_状态.png
例:发现_图标_搜索_点击状态
2、场景_模块_状态.png
例:登录_按钮_默认状态
3、产品模块_场景_二级场景_状态.png
例:按钮_个人_设置_默认状态
【场景和二级场景】:一般指app的一级页面与二级页面。
例如上:个人页-场景,个人页里的设置页-二级场景
【模块】:一般指页面中的部分区块,也有指背景图。如背景、按钮、icon都是模块。
【功能】:一般指的是,页面或者模块中,需要操作或点击的某个点,如上图,发现页中的搜索icon。
【状态】:一般指当前切图的状态区分,像按钮的话,有默认状态、点击时状态、按下状态、不可点击状态等,网页上按钮还有悬停状态。
注意:所有命名只能为小写英文字母,不要为了好看或者像平时打英语一样,首字母是大写之类的,也不可以为中文,不然对于开发来说,是没有意义的,因为他们还是得自己再改一遍。
注意:ios切图需要在命名后加上@2x、@3x后缀名,安卓的切图不能加(加了好像会报错),安卓一般将不同倍率的图放在不同文件夹。
现如今UI切图工作也变得越来越方便,如国产的蓝湖协作插件、PxCook等众多优秀工具,具体工具和使用方法不在此详述,可进官网了解:
蓝湖:https://lanhuapp.com/
pxcook:https://www.fancynode.com.cn/pxcook
名词基本规范一览
名词命名:
bg(backgrond):背景
nav(navbar):导航栏
tab(tabbar):标签栏
btn(button):按钮
img(image):图片
del(delete):删除
msg(message):信息
s(Selection):选中
n(Unchecked):未选中
icon:图标
content:内容
left/center/right:左/中/右
logo:标识
login:登录
register:注册
refresh:刷新
banner:广告
link:链接
user:用户
note:注释
bar:进度条
profile:个人资料
ranked:排名
error:错误
操作命名:
close:关闭
back:返回
edit:编辑
download:下载
collect:收藏
comment:评论
play:播放
pause:暂停
pop:弹出
audio:音频
viedio:视频
状态命名:
selected:选中
disabled:无法点击
highlight:点击时
default:默认
normal:一般
pressed:按下
slide:滑动
iOS切图命名栗子:
common_nav_btn_back_s@2x.png
common_nav_btn_back_s@3x.png
common_tab_demand_s@2.png
common_tab_me_n@2.png
common_tab_me_s@2.png
Android切图栗子:(将不同倍率的图放在不同文件夹)
common_nav_btn_menu_n.png
common_nav_btn_menu_s.png
common_nav_btn_back_n.png
common_nav_btn_back_s.png
common_nav_btn_close_n.png
common_nav_btn_close_s.png
common_nav_btn_eidt_n.png
本文过长,就先写到这儿,后面会陆续写物理像素与逻辑像素,以及点九切图和动图如何完美引入等关键点,因本人能力有限,文章中还有很多不足之处,请各位指正。
作者:白天里最亮的星
链接:https://www.jianshu.com/p/47fd46b85956
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。返回搜狐,查看更多
责任编辑:
android切图双数,UI切图与命名规范相关推荐
- Android UI 切图命名规范、标注规范及单位描述
Android UI 切图命名规范.标注规范及单位描述 很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的.IOS我这边暂不作讲解,因为我本人也不是开发IOS.这里整理一下我 ...
- android与ios ui切图关系,iOS、Android 开发单位换算及 UI 切图要求
在移动端 UI 设计中,经常会用到的单位有 4 种:px.pt.dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完 ...
- android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
- 苹果切图换算android,iOS、Android 开发单位换算及 UI 切图要求
在移动端 UI 设计中,经常会用到的单位有 4 种:px.pt.dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完 ...
- android与ios ui切图关系,APP-IOS与Android界面设计与切图
做一全套的APP设计,流程是: 1.界面设计:设计IOS界面:设计Android界面. 2.切图:切IOS的2倍图和3倍图:切Android的hdpi,xhdpi,xxhdpi这三个尺寸的图. 3.标 ...
- 游戏ui切图,颜色通道_什么是ui通道设计,为什么如此重要
游戏ui切图,颜色通道 Our approach to interface design has changed dramatically since the rise of mobile devic ...
- android 分辨率 切图,Android设计图(标注、切图)
1.Android: 1)Android的单位是dp 2)分为ldpi/mdpi/hdpi/xhdpi/xxhdpi. 3)分辨率对应DPI ldpi QVGA (240×320) mdpi HV ...
- delphi控件切图界面闪烁_一份最详尽全面的UI界面切图命名规范
关于UI界面的切图命名规范,U妹觉得关键是在于团队能够有一个统一的规则,所以这里只介绍一种通用的命名规则,当然大家也可以根据自己的实际情况去制定,这里只提供一种方法与思路,仅供参考. 规范的命名方式可 ...
- UI设计师必备|Map name切图命名规范
标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi. 切图推荐使用用Cutterman,选中下面所示,根据需要选择不同分辨率 ...
- 屏幕适配以及ui切图规范和命名标准
android屏幕适配详解 屏幕级别 屏幕密度 比率(相对) 物理大小(英寸) 像素大小 通常的分辨率 ldpi 120 3 0.75 1 120 mdpi 160 4 1 1 160 320*4 ...
最新文章
- 激光雷达:从光电技术角度看自动驾驶
- 点击按钮显示隐藏的表格
- android开发之当设置textview多少字后以省略号显示。限制TextView的字数
- python命名时可以使用中文吗_Python命名约定
- 对于委托的理解 委托和事件
- Microsoft SQL 2005 精简版 完整版
- 原生android tv 盒子,超强大的安卓7.0电视盒子是什么体验!
- 坚果手机 误进FastBoot Mode解决方案
- (6.0系统)安卓神器XPOSED框架无需ROOT安装指南
- Android常用炫酷风格控件包含项目地址汇总
- 计算机发展史评课议课稿,历史课评课稿
- 超详细文件包含漏洞原理及修复
- numpy 学习汇总18 - 数学运算 (集合,复数)( 基础学习 tcy)
- iOS图片压缩成指定大小
- 光纤交换机 序列号_Brocade光纤交换机常用命令
- keil将c语言转换成hex文件格式,如何用keil烧写hex文件格式
- Python 绘制中国地图并标上国家名
- 总结2021,互联网留下的6个记忆
- Java基础教程5-获取用户输入
- 毕业设计So Easy:珠穆朗玛FM音频电台APP
热门文章
- 大厂面试为什么总考算法?如何避开算法面试?
- 操作系统原理1-3章答案 黑新宏 胡元义主编
- excel文件损坏修复绝招_修复数据工具大盘点,让你快速掌握电脑数据恢复的秘密武器...
- 机械制图--零件图--过渡线
- sketchup(草图大师)-倒圆角-避免破面现象
- 个人应对冲突的五种策略——笔记与答案
- Linux基础(8)Linux常用网络命令
- 主板检测卡c5_主板检测卡显示的代码都是什么
- QQ和MSN 在线代码
- U产品快报 | UK8S支持K8S 1.18版本、URTC新版Webdemo上线等重要更新