设计

设计师该如何规范切图命名

Tickmao · 6月13日 · 2019年 · ·

UI 设计师需要在正确的设计稿尺寸下进行切图,切图素材才能正常供给开发人员使用。否则产品开发落地后会出现图标变形,像素低等情况。切图是指在设计稿里整理出技术开发所需要的素材或图片。合格的、严谨的切图可以大大减少技术人员开发的返工率,减少技术人员的开发工期,提升开发流畅度,从而减少项目人力成本,最终开发出有利于交互,拥有良好视觉感的产品。

切图标注作为连接 UI 设计到技术开发两者的工作模块,是不可或缺的。设计师需要熟悉工具、理解设计尺寸与切图倍数的关系,才能在切图时进行判断:目前的设计稿尺寸与切图单位是否正确匹配。

设计稿尺寸与切图倍数

iOS

Android

  • 设计稿720x1280px——切图倍数XHDPI,XXHD版权声明:文章转载请注明出处(www.mwkds.com)PI

微信小程序

  • 设计稿750x1334px——切图版权声明:文章转载请注明出处(www.mwkds.com)倍数png24

手机端网页、公众号等

  • 设计稿750x1334px——切图倍数

设计稿尺寸与切图倍数对应关系

APP-iOS

APP-Android

微信小程序

移动端网页

切图命名与分组

命名公式

  • 项目名称版权声明:文章转载请注明出处(www.mwkds.com)页面控件类别描述_状态.png

举个栗子:xxxApp_page_nav_button_search_default.png

命名禁忌

  • 不可出现中文
  • 不可出现英文字母大写
  • 不可出现空格
  • 不可用「-」符号,例如错误的 button-search,正确为 button_search。

命名英文缩写

  • 较长的单词可取单词的头部几个字母形成缩写,如 normal 可写成 nor;
  • 还有一些约定俗成的英文单词缩写,如 background 可写成 bg。

类别命名

  • 按钮:btn_xxx.png
  • 图标:icon_xxx.png
  • 图片:pic_xxx.png或是img_xxx.版权声明:文章转载请注明出处(www.mwkds.com)png
  • 照片:pho_xxx.png

常用状态

  • 正常:normal
  • 按下:pressed
  • 选中:selected
  • 禁用:disabled
  • 已访问:visited
  • 悬停:ho版权声明:文章转载请注明出处(www.mwkds.com)ver

切图分组

  • 项目-开发语言-日期

xxxAPP-iOS-2019.06.13

合理规范的命名有利于与工程师进行沟通,避免不必要的返工。工作需要沟通,但工作做得好,利人利己,是最有效的沟通。

如需转载请务必注明“Mwkds”以及原文文章来源 。

0 条回应