联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

了解ui设计切图的规范操作,教你日常切图如何做

Time: 2021-01-20

切图是ui设计最日常的工作之一,而有些ui设计者往往觉得切图没有大不了的。其实切图的好坏关系到效果的呈现,切图也是有一定规范要求的。今天就让小编为大家介绍ui设计切图的规范操作。

  ui设计切图的规范操作

  1、Android篇标注规范:

  画布大小:以720 x 1280分辨率为准进行标注。

  字体:按照像素标注,只使用 24 pt,28 pt,36 pt 和 44 pt 的字体,并pt 值除以 2 作为 sp 数值交给工程师。

  颜色:按照实际的颜色值标注,Android颜色值取值为十六进制的值 比如一绿色的值, 给工程师的值为 #5bc43e。

  间距:每个主要的控件必须标注出来,各种边距必须标注清楚。所有尺寸的 px 值除以2作为 dp 数值交给工程师。

  切图:统一采用Png格式,部分需要做适配的图片需要制作.9格式。

  图片优化:图片压缩优化,ICON 可采用PNG 8,支持完全透明和完全不透明两种效果和256色,需要高清的可采用 PND24/32。

  切图命名:每个页面按照设计高保真分目录:hdpi(480 *800)xhdpi(720 *1080) xxdpi(1080 *1920)。依图片性质命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等。

ui设计切图

ui设计切图(图片来自网络)


  2、iOS篇标注规范:

  画布大小:以@2x图以640/750为宽度尺寸为基准标注。

  字体:按照640/750宽尺寸中的像素进行标注。

  颜色:按照实际的颜色值标注,iOS颜色值取 RGB各颜色的值比如某个色值,给予IOS程序员的色值为 R:12 G:34 B:56给出的值就是 12,34,56(有时也要根据程序员的习惯,有时也用十六进制)。

  间距:每个主要的控件必须标注出来,各种边距必须标注清楚。

  切图:统一采用Png格式,以640/750宽分辨率为@2x输出三套尺寸:@1x @2x @3x。

  图片优化:图片压缩优化,ICON 可采用PNG 8,支持完全透明和完全不透明两种效果和256色,需要高清的可采用 PND24/32。

  切图命名:每个页面按照设计高保真分目录:@1x @2x @3x。在文件名中需要区分是几倍图,例如: xxxxx@2x.png。

ui设计切图

ui设计切图(图片来自网络)


  日常切图如何做

  切图规范其实很简单,就是遵守一点,我们的切图是为了方便开发使用,完成交付过程,而不是为了完成切图这件事。

  1、至于如何切图,以往我们会使用二倍图下设计,三倍图下切图原则;但日常工作中,我相信大多数人都会嫌麻烦;我们可以“遵守横平竖直原则”,让你的icon不出现虚边。

  2、做好提前与开发沟通,标注特殊元素,交付设计稿时,除了提前制定设计规范或遵守原定的设计规范外,还需要和开发沟通点击区域,并在验收的时候去进行点击区域的补漏。

  3、切图格式注意保持背景为透明通道。保证图片格式统一、相同模块icon尺寸统一,便于开发使用,另一方面也方便调整及验收。

  以上就是小编为大家介绍的关于ui设计切图的相关内容。切图作为ui设计师最日常的工作之一,了解不同系统的切图规范,才能做出最适合的切图,大家学会了吗?


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开