UI 工作流程指南:切图标注 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


UI 工作流程指南:切图标注

2019-8-23 泥人张 手机及小程序界面设计文章及欣赏


当界面设计定稿之后,设计师需要对图标进行切片,提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求,直接影响到工程师对设计效果的还原度,并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图,起到事半功倍的效果。

帝皇彩票官网 通常我们只需要对 icon 与图片进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

切图基本规范

  1. 切图的尺寸必须为偶数;
  2. 同一模块内,切图大小应保持一致;
  3. 如果有背景,尽量用平铺的背景图案来设计(减少程序体积);
  4. 可点击的部件要把相关状态都切图输出,比如:正常状态、点击状态、不可点击状态;
  5. 输出的切图应当尽可能的压缩大小,以降低 APP 的总大小,提升用户使用时的加载速度(推荐在线压缩:);
  6. 所有的变形字体把它当成 icon 来切;
  7. 切图输出格式:png-24;
  8. 重复的东西只切一个。

切图输出类型

1. 图标切图输出

桌面图标切图输出

App 的桌面图标会被运用在很多不同的地方,比如手机桌面、APP store、手机的设置列表,所以 app 桌面图标需要很多个不同尺寸的切图输出。两个平台对应的桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。

系统图标切图输出

一套图适配双平台:iOS平台(iPhone 6plus版本除外)和安卓平台公用 44*44px 切图素材,即可实现一套切图适配两个平台的开发。

适配大屏幕:为了适配 iPhone 6plus、iPhone 7plus,单独切一套比原有 44*44px 切图大 1.5 倍的切图,即 66*66px 大小的切图。

APP内功能图标

图标是可以有留白区域的,建议图标尺寸尽量不要过多。

2. 图片类切图输出

帝皇彩票官网 图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的尺寸大小,以便于工程师开发使用。另外一般这些切图的文件较大,在切图过程中需要控制切图文件的大小。

全屏类切图

局部类切图

3. 动效元素切图

动效元素切图一般是指在 app 中加载动效所需要的切图元素。

gif 动图切图一般分为三种:

一是只需要给到 gif 图动效的部分即可。

△ 城易logo

二是,导出序列图片压缩打包给开发人员。

三是导出 json 。

Airbnb 开发了一款动效神器:Lottie,这是一个将 After Effects 动画提供给任意一个 iOS,macOS,Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件,以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

相关链接

  • Lottie官方:
  • bodymovin:(安装方法:)
    如若安装不成功,可在下面的网址中下载其他版本插件:bodymovin版本地址:
  • lottie-ios:
  • lottie-android:

如何导出json动画文件

打开 AE,首选项 – 常规,将允许脚本写入文件和访问网络选项勾选上。

窗口 – 扩展 – Bodymovin,选择好合成和保存路径后,点击 Render 导出 data.jason 文件,再把该文件交给 iOS 开发 (其他同理),具体如下图:

这里设置选择 Demo ,可以导出 html 文件,在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。

导出文件:

在线测试结果:可以直接上传 json 文件,可以提前知道动画是否有问题,然后再交付给开发。

网址:

切图命名规范

1. 通用切图命名:组件_类别_功能_状态@2x.png

帝皇彩票官网 举例:tabbar_icon_home_default@2x。png(对应中文:标签栏_图标_主页_默认@2x。png)

2. 模块特有切图命名:模块_类别_功能_状态@2x.png

举例:bill_icon_search_pressed@2x.png(对应的中文为:账单_图标_搜索_ 默认@2x.png)

3. 常用英文单词表

标注软件

现如今市场已有很多设计交互的平台,如:国内的墨刀、蓝湖、摹客等,国外的 Figma、invision 等,各自都有优秀的特点,既满足交互需求,又能有标注切图功能,选择适合自己团队的工具与开发一起协作即可。

1. Figma

支持 sketch 导入,Figma 也像 Zeplin 一样,标注页面间距与尺寸,并且支持各种图片格式、尺寸、形态输出,开发人员也有相应的代码可用参考,分享链接即可。

2. 墨刀

支持 sketch 上传页面至客户端,分享链接即可。支持多种切图格式下载,开发人员也有相应的代码可用参考,操作简单清晰。

3. 蓝湖

支持软件 PS、sketch 上传在线标注,在设计源文件上切好图片,开发人员可在线上下载,且有相应的代码可用参考,分享链接即可。

帝皇彩票官网 文章来源:优设

标签: 切图标注 « JavaScript杂记(杂而又杂) | 调整浏览器分辨率的插件下载方法»


蓝蓝 http://www.bjhbys.com

  1. 2019年11月(5)
  2. 2019年10月(53)
  3. 2019年9月(48)
  4. 2019年8月(63)
  5. 2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 2019年4月(37)
  9. 2019年3月(43)
  10. 帝皇彩票官网2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 2018年11月(40)
  14. 2018年10月(29)
  15. 帝皇彩票官网2018年9月(40)
  16. 2018年8月(87)
  17. 2018年7月(107)
  18. 2018年6月(86)
  19. 帝皇彩票官网2018年5月(110)
  20. 2018年4月(40)
  21. 2018年3月(35)
  22. 2017年8月(35)
  23. 2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 2017年4月(51)
  27. 2017年3月(70)
  28. 2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 2016年11月(111)
  32. 2016年10月(92)
  33. 2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 帝皇彩票官网2016年3月(19)
  38. 2016年2月(26)
  39. 2016年1月(30)
  40. 2015年12月(33)
  41. 2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 2015年8月(40)
  45. 2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 2015年3月(55)
  50. 2015年2月(17)
  51. 2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 2014年6月(66)
  59. 2014年5月(99)
  60. 2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 2014年1月(83)
  64. 2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 2013年9月(20)
  68. 2013年7月(13)
  69. 帝皇彩票官网2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 2013年2月(20)
  74. 2013年1月(31)
  75. 帝皇彩票官网2012年12月(33)
  76. 2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 2012年5月(31)
  82. 2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 2011年12月(35)
  86. 2011年11月(32)
  87. 2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
博发彩票开户 聚发彩票注册 状元彩票计划 帝皇彩票登陆 状元彩票平台 桔子彩票网址 山东十一运夺金 上海时时乐 吉利彩票登陆 吉利彩票计划