UI日常-切图切图怎么破?

作为一名“小小”的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

(0)

相关推荐

  • 在PS里如何将一张长图切成多张图片

    下面介绍用PS把一张长图切成多张图片的方法,希望本指南能帮到大家. 操作方法 01 把一张长图拉入到PS中,自动生成文档. 02 鼠标移到界面左侧的工具箱中,调出切片工具,如图所示. 03 比如,要把 ...

  • 踏青春游美图 美图看看一键上传QQ空间

    三月踏青春游,拍了N 多桃花美图,如何最快速的上传到QQ空间,和好友一起分享呢?最简单高效的办法就是使用“美图看看”。这款小巧全能的看图工具,不仅可以帮助我们批量修改尺寸,而且还可调用美图秀秀来美化照 ...

  • 天天P图app在哪里晒图? 天天P图晒图教程

    天天P图怎么晒图?天天P图晒图教程.在天天P图里面P了图片,很喜欢的图片肯定会想晒出去吧,那么小伙伴们知道要怎么晒图吗?现在小编就教大家天天P图晒图方法. 1)打开天天P图,点击右下方的[晒图],接着 ...

  • Edraw Max亿图图示怎么设计日历图? 亿图日历图的制作方法

    Edraw Max中想要绘制一个日历图,该怎么设计呢?下面我们就来看看详细的教程. 1.打开EDRAW 2.点击[项目管理],在模板下点击[日历],在例子下点击第一个模板例子,然后在右侧点击[创建] ...

  • 美图中怎么设计制作闪图/动图效果

    今天,小编给大家介绍美图中设计制作闪图/动图效果的方法,希望对大家有所帮助.具体如下:1. 首先,我们需要先准备几张图片素材,然后请大家在自己的电脑中找到[美图]软件,点击进入主界面,接着选择屏幕顶部 ...

  • 如何在excel中制作折线图对比图

    excle不仅可以处理数据,还可以进行图表的绘制,那么如何在excel中制作折线图对比图?今天就来一起看看吧~具体如下:1. 首先,打开有数据的excle.2. 随后选择需要做图标的数据列.3. 点击 ...

  • 百度搜索怎么搜图识图

    搜索作为一个最常用的搜索引擎,用户可以利用搜索各种信息,甚至可以上传一张图片进行全网识别,找到我们需要的信息以及其他图片. 下面,我们就来看看搜索怎么搜图识图. 操作方法 01 首先,我们开启进入到百 ...

  • ps切片工具切出来的图怎么保存(ps中怎么切图)

    喜欢用PS软件进行前端设计的朋友有福了,今天给大家分享一款超级好用的photoshop切图工具:Cutterman.Cutterman是一款photoshop切图插件,它能够自动将你需要的图层进行输出 ...

  • Win10(WP10)手机系统界面UI曝光 WP10高清图欣赏

    据报道,在此前的微软TechEd欧洲大会上,微软向开发者和IT人士进一步展示了Win10系统的一些功能,现在观看TechEd欧洲大会视频时,笔者也发现了Win10(WP10)手机系统的踪影,Win10 ...