新手福利!超全面的UI设计切图规范指南

移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力。


移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力。

新手福利!超全面的UI设计切图规范指南

设计切图的原则

设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。其次切图输出应该尽可能的降低工程师的开发工作量,避免因切图输出而导致的不必要的工作量。最后输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。

1. 切图资源尺寸必须为双数

众所周知智能手机的屏幕大小都是双数值,比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。

新手福利!超全面的UI设计切图规范指南

2. 图标切图输出应根据标准尺寸输出并且考虑到手机适配(主要是iPhone 6plus的适配)

在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。为了适配大分辨率手机(例如iphone 7plus)图标在切图的时候需要输出@2x和@3x的切图,其中@2x的切图可以满足双平台大部分机型的适配要求,@3x是用来适配iphone手机的各种plus版本的手机(后边会有文章专门讲解关于适配的问题)。@3x是@2x尺寸的1.5倍,例如一个图标切图@2x尺寸是44px,那么@3x尺寸是66px。

新手福利!超全面的UI设计切图规范指南

3. 为了提升APP使用速度,尽量降低图片文件大小

在切图资源输出中图标切图输出是很重要的部分,比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大,不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小(文件压缩的方法在文章后面有详细讲解)。

新手福利!超全面的UI设计切图规范指南

4. 可点击部件应当注意其点击区域不小于88px

44px的点击区域数值是在iphone 3 (320×480px)普通显示屏下制定出来的,在手机分辨率大幅提升的现在,这个数据自然要与时俱进。在iphone7 (750*1334px)的Retina 显示屏下44px点击区域就变为了88px。但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px,换算成物理尺寸后大致是在7mm-9mm之间。早在人机工程学的研究中曾得出结论,认为人类舒适的触击范围需在7-9mm的大小。所以在ios官方的空间尺寸也经常出现88px的数值,比如菜单栏的高度便是88px。

新手福利!超全面的UI设计切图规范指南

5. 可点击部件要把相关状态都切图输出,比如正常状态、点击状态。

在切图过程中不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图。这个也是设计师经常会出现的失误,比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来,避免后期切图的时候遗漏状态。

新手福利!超全面的UI设计切图规范指南

切图输出类型

1. 桌面图标切图输出

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

新手福利!超全面的UI设计切图规范指南

2. 系统图标切图输出

一套图适配双平台:

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

新手福利!超全面的UI设计切图规范指南

适配大屏幕:

为了适配iphone 6plus、iphone 7plus单独切一套比原有44*44px切图大1.5倍的切图,即66*66px大小的切图。(UI设计的适配问题会在后边单独的文章中详细讲解)

新手福利!超全面的UI设计切图规范指南

3 .图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。(后边文章会详细讲解如何压缩切图大小的方法)

全屏切图类

新手福利!超全面的UI设计切图规范指南

局部切图类

新手福利!超全面的UI设计切图规范指南

空白页提示案例图

新手福利!超全面的UI设计切图规范指南

4. 动效元素切图输出

动效元素切图一般是指在app中加载动效所需要的切图元素,比如qq的下拉加载动效就是由若干张切图连续播放形成的动画效果。这些图片按照序号排序播放我们页把他们叫做序列切图。序列切图是在做UI设计的过程中必然会遇到的问题,这种切图要求要保证动效播放时的流畅自然,是需要设计师仔细斟酌的。

序列图切图

新手福利!超全面的UI设计切图规范指南

序列图实现效果

新手福利!超全面的UI设计切图规范指南

5. 可拉伸元素切图输出

可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。这些元素通过瘦身压缩可以极大地见效图片的大小提升用户在使用app中的加载速度。在ios中这种切图方式叫做平铺切图,在安卓中这种切图方式叫做点九切图法。

横向拉伸切图

新手福利!超全面的UI设计切图规范指南

竖向拉伸切图

新手福利!超全面的UI设计切图规范指南

6. 无需切图的部分

再设计切图输出中很多元素是不需要输出的,直接使用系统原生的设计元素修改参数即可。作为设计师需要知道哪些元素是需要切图,哪些元素是使用系统自带的避免不必要的切图。比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可,工程师会根据设计效果通过代码实现这种效果。

新手福利!超全面的UI设计切图规范指南

降低切图大小的方法

1. 点九切图法

点九切图是安卓平台独有的图片处理方式,因为文件扩展名问.png所以被称为点九切图法。点九切图的作用主要是为了适配安卓多种多样的手机机型适配,这种方法可以将图片进行横向和竖向的随意拉伸,并且不会损坏图片效果。另一个重要的作用就是可以减少不必要的图片文件大小,极大提升页面加载速度。是安卓平台重要的切图方法。

案例示意:

横向拉伸只需在可拉伸区域内做黑色标记即可,外围投影标记黑色线即可。

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

横向竖向拉伸只需在可拉伸区域内做黑色标记即可,外围投影标记黑色线即可

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

2. 在线压缩图片工具“Tinypng”

利用“Tinypng”智能png和jpg在线压缩工具,将较大的图片切图在不影响图片质量的情况下压缩。Tinypng在线压缩工具可以在图片质量和文件大小上找到一个完美的平衡,基本不会降低图片视觉质量但却会极大的压缩图片切图大小。Tinypng是非常值得推荐的图片压缩利器,也是现在被运用最广广泛的在线压缩工具。

Tinypng网址: https://tinypng.com/

新手福利!超全面的UI设计切图规范指南

压缩图片效果范例:

一张透明png图片原大小57kb在经过压缩后变为15kb,图片大小直接减少74%,但是图片效果用肉眼基本分辨不出区别。不得不说Tinypng的智能压缩效果是如此神奇。

新手福利!超全面的UI设计切图规范指南

使用方法简述:

1. 在红色框内点击去本地选择你想要压缩的图片文件,每次最多上传20张图片,每张图片总大小不超过5mb

新手福利!超全面的UI设计切图规范指南

2. 点击红框内的下载按钮下载单个已经压缩过的图片,如果你有上传多张图片你可以选择点击全部下载按钮一次性下载所有压缩的图片。在下方现实的是本次压缩的大小占比,你就可以很明确的知道它的作用了。

新手福利!超全面的UI设计切图规范指南

3. 恭喜你你已经完成压缩了

切图神器Cutterman介绍 (PS插件)

Cutterman是现在最主流的设计师切图利器,能够自动将你需要的切图进行输出。极大的减轻了设计师的工作量,提升了切图效率。它支持各种图片格式、尺寸、形态输出, 兼容安卓、iOS、WEB各种系统的一键输出。以下是Cutterman的使用方法简介。

Cutterman下载网址: http://uicool123.com/home/nav?id=6

1. 一键切图,真正解放双手

Cutterman能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

2. 支持IOS平台

输出支持IOS平台的单倍图、双倍图,支持IPHONE6/6P尺寸比例。

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

3. 支持Android平台

输出支持Android平台的各种分辨率大小图片,什么XXHPDI,XHDPI,HDPI啊之类的,通通自动化输出,为你节省出更多的时间陪小伙伴好好玩耍。

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

4. 支持各种图片格式输出

什么png、jpg、gif通通不在话下,还可以自己缩放、压缩大小呢。从此,就告别那个所谓的“存储为web所用格式”的功能啦~~

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

4. 多个图层合并、单独输出

图层太多?木关系!可以多选嘛!支持选中多个图层合并输出,也可以逐一输出的哦,简直方便到爆!新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

5.  固定尺寸输出

想要输出固定尺寸的ICON,多种姿势让你选择,秒秒钟的事情~~

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

新手福利!超全面的UI设计切图规范指南

Sketch Measure切图插件简介

Sketch Measure是最新的Sketch切图插件使用方法非常简单,能够一键生成Html标注文件,并且自动生成设计规范文件十分高端。

新手福利!超全面的UI设计切图规范指南

以上就是我多年以来对UI设计切图积累的经验之谈,希望对正在路上的设计师有所帮助。分享是一种美德我也希望以后有更多的设计经验分享出来。祝大家在2017成为自己心目中的那个设计大神。

 

作者:考拉快跑

来源:http://uicool123.com/home/detail?id=97

版权声明:人人都是产品经理尊重行业规范,所转载的文章都注明作者和来源,若标注有误,请联系主编QQ:419297645更改。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25272/

(0)
CatherineCatherine
上一篇 2017-05-11 06:15
下一篇 2017-05-11 08:01

相关推荐

  • 用户体验是紫光物联智能家居的第一要义

    智能家居成为一匹黑马,在这个互联网与物联网互联互通的时代,智能家居是否能够代表物联网,引领我们的居家生活走进一个新纪元呢?从用户出发,打造稳定易用的智能家居产品首先,智能家居产品目前正处于井喷阶段,发展是大势所趋。我们做的就是改善和提高我们的生活质量和生活方式。目前,大多数居民都处于一个快节奏的生活环境当中。在这个快节奏的生活中,方便、快捷、健康、环保变成了目前智能家居行业发展的主题。紫光物联多年致力于打造高标准、高品质的智能家居产品,...

    2018-05-04
  • 经验总结|品牌视觉改版要如何开始做?

    一个成功的视觉改版是靠30%的探索流程+70%设计师水平。探索品牌感觉 → 发现提取关键词 → 寻找对应素材创建情绪板 → 指导设计发现提取关键词(我们自己) → 寻找对应素材创建情绪板 → 探索品牌感觉(让用户)→ 指导设计请问您觉得目前我们产品的视觉风格怎么样?

    2017-05-03
  • 腾讯CDC标叔力作!聊聊我与交互设计的那10年

    编者按:很有幸能看到这篇文章,作者见证了腾讯CDC从寥寥数人变成一个成熟团队的整个过程,成长经历相当有可读性,且值得设计师学习反思的地方太多,无论是哪个领域的同学,都推荐阅读收藏。 前言:今年同时是我工…

    2015-11-29
  • 如何设计完美的移动端表单【UXRen译#169】

    作者:Levi Kovacs   |  翻译:楠木,校审:小蟹   不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何…

    交互专题 2017-08-07
  • 沃尔沃自主驾驶概念交互设计欣赏

    沃尔沃自主驾驶的概念交互设计来自设计师Keke Le用户调研 |  HMI设计 |  UE/UI设计 |  HMI培训  |  HMI评测  | 体验咨询

    2018-03-21
  • 用户体验方向的复试炸药包

    喜大普奔,北师大终于出分数线了,虽然心理学部的院线还没有出来~但是过没过线,你心里应该没点Balance吗?对于没有参加提前复试的同学,对于接下来的复试,师兄在这里想灵魂拷问一番,准备好复试了吗?知道怎么准备吗?知道UX复试要考什么吗?别问我,我也不知道。但是作为去年参加过正常批复试而且成绩不低的老司机,我还是可以在这说两句的。(咳咳~全场都注意啦!)参加过去年提前复试的同学应该知道去年UX的复试变动很大,比之前两年灵活了很多,辅导机构...

    2018-03-07
  • 3秒即灭,APP引导页如何闪亮

    大家原谅我健忘的大脑,一直想写App经验总结,却不知道从何说起,真是对不起群众,对不起组织,对不起俺的一个好肾。这也不能完全怪俺,小学的时候语文就没考过100分,害怕写的浅了不疼不痒,浪费看官们 陪女朋友的…

    2014-12-05
  • App加载动画知识体系:交互、视觉都需要掌握!

    我大胆预测了一下,以后App的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

    2017-05-12
  • UX文案优化12字真言:定风格—查现状—设标准—推落地

    定风格—查现状—设标准—推落地

    2017-05-26
  • 跟着电台动起来:如何设计跑步的垂直场景

    没想到吧,你竟然可以通过企鹅FM来跑步?为什么在电台App要深度挖掘一个运动场景,交互设计师又是如何将痛点和需求转化为市场蓝海,在设计的过程中怎样将场景垂直的特色表现出来······关于这些,我有一些想法与大家分享。

    2017-05-12