小雨点

作为一名“小小”的UI设计师,切图可以说是我们日常工作的必修课。一些设计师认为切图规范不重要;或是切图是设计助理的活;又或者是单方面认为,开发应该100%的按照我们的切图去写代码。

 

个人认为,UI设计这个角度看,“UI设计”是一个团队协作的过程,“切图”是一个交付设计稿的过程,UI设计师理应在了解产品细节的前提下完成切图,建立简单沟通设计规范,并了解基础组建的开发成本,有必要的话还需配合调整切图。

 

目录

1.icon的切图规范到底是什么

2.常见切图问题

 

icon的切图规范到底是什么?

1.基本原则


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

明确这一点之后,我们再来看如何切图。

 

2.切图方法


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

 

3.提前与开发沟通,标注特殊元素

沟通,也是设计师的日常之一,我们交付设计稿时,除了提前制定设计规范或遵守原定的设计规范外,还需要和开发沟通点击区域,并在验收的时候去进行点击区域的补漏。

 

4.切图格式

·注意保持背景为透明通道


如图,使用sketch的同学记得将图层编组,并勾切图只显示编组内容。

·保证图片格式统一、相同模块icon尺寸统一,便于开发使用,另一方面也方便调整及验收。

 

5.了解页面元素

在项目进行需求评审的时候,是我们了解产品的好时候。个人认为Ui设计师不仅仅是完成视觉效果,更多的是要理解产品逻辑,明确一些交互细节;在图上适当的标注可以有效帮助开发理解设计师的意思,谁也不想工作经常被打断对吧~

 

常见切图问题

1.每页的重复icon都要切一遍吗?

在没有用类似蓝湖这样的协同工具的时候常常会听到抱怨,开发难道不会自己找图标吗?明明切给他了他为什么他找不到?

曾经,当我的交付切图还是通过文件夹文件名并通过H5查看标注的时候,我也有过这样的困扰,开发总是找不到图,一遍一遍的打断我的工作,让我不厌其烦。

尝试了解原因后我发现,在大量的相似的图中找到开发需要用的图,并且记住它曾经出现过的位置,确实有些强人所难~

那么怎么解决这个问题呢?

我们可以通过Sketch中的创建组件功能,将图标和常用模块创建为组件。然后通过一些团队协作工具,比如蓝湖,进行团队协作。


创建组件功能有什么好处呢?

1.一次切图,对应不同页面相同图标不需要再切,且都可以下载;

2.需要修改设计时只需在组件页面,修改组件;

3.方便页面,相同类型、位置icon的统一性;

4.上传协作平台后,开发可对应页面下载切图,再也不会来打扰你的工作啦~

 

2.阴影要不要切?

阴影,是个很特殊的存在,近年设计稿上流行各种阴影、弥散效果,对于web和H5的开发来说实现难度可能只是一个css3的样式,但是对于App开发来说,阴影的实现效果真的很高。

比如,有些颜色在白色背景下不显示,有些颜色即使和设计师给的色值一样但是,实现后发现效果差强人意。所以App设计中,设计师如果要用阴影的话可以选择直接切给开发。

 

3. .9切图

.9.png是png格式,.9为命名后缀的非失真性压缩位图图形。他的原理是安卓环境下,实现标记区域的局部拉升,多用于聊天框、加载文字信息的自适应填充背景。

.9图片制作,如图

用1px,色值为#000的线条,在图片的上下左右,定义拉伸方向和可拉升区域;防止图片圆角等元素被拉伸变形。

 

总结

·切图四字原则

1.小-尺寸尽可能小

2.不-固定图片外,切图不含文字

3.聊-多和开发同学沟通,和前端聊聊,便于交流

4.便-切图是为了便于开发使用的行为

 

·切图注意点

1.切图保持偶数;

2.适当留白,便于开发定位;

3.不规则icon可以采用圆心和切图圆心吻合的方式对齐;

4.带投影的button,card都要切图;

5.最重要的是多和开发小哥沟通

此文仅代表个人观点。特别感谢#海边来的设计师#的指导,感谢小伙伴#海舟#、#小火焰#不吝赐教~么么哒~

 

原文地址:海盐社(公众号)
作者: Quines·QQQ

转载请注明:学UI网 » UI日常-切图切图怎么破?

登录收藏
 
你可能喜欢的:
如何构建ux中台-滴滴旗下小桔车服实战案例如何构建ux中台-滴滴旗下小桔车服实战案例
潘帅:亲子类场景化产品的设计方法潘帅:亲子类场景化产品的设计方法
电商 APP 中消息按钮该如何设计电商 APP 中消息按钮该如何设计
动效在日常产品设计中的实际应用动效在日常产品设计中的实际应用
加载,一个被忽略的模块加载,一个被忽略的模块
UX设计秘诀之注册表单设计,细节决定成败UX设计秘诀之注册表单设计,细节决定成败
设计语言 - 下拉菜单/导航菜单设计语言 – 下拉菜单/导航菜单
图标使用浅谈图标使用浅谈
UI/UX的每周自我练习:送餐软件重设计UI/UX的每周自我练习:送餐软件重设计
佳作欣赏:IN App Redesign佳作欣赏:IN App Redesign