当前位置:设计教程网 > UI设计 > UI教程 >

武汉UI设计培训教你UI设计切图规范指南!

2018-01-11 10:38 来源: 设计教程自学网 分类: UI教程
80 作者:丝路教程网

[导读] UI设计切图的原则与规范,武汉UI设计培训教你具体的UI设计切图知识。

  UI设计切图的原则与规范武汉UI设计培训教你具体的UI设计切图知识。

  UI设计切图输出的目的是跟工程师团队协同工作,那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。切图输出应当做到切图精准、便与协同和压缩大小。

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

  众所周知智能手机的屏幕大小都是双数值,比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份。

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

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

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

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

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

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

  UI设计切图输出类型

  1.桌面图标切图输出

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

  2.系统图标切图输出

  一套图适配双平台:

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

  适配大屏幕:

  为了适配iphone 6plus、iphone 7plus单独切一套比原有44*44px切图大1.5倍的切图,即66*66px大小的切图。

  3.图片类切图输出

  图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。

  全屏切图类

  局部切图类

  空白页提示案例图

  4.动效元素切图输出

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

  序列图切图

  序列图实现效果

  5.可拉伸元素切图输出

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

  横向拉伸切图

  竖向拉伸切图

  6.无需切图的部分

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

  以上就是对UI设计切图规范的经验之谈,希望对正在路上的设计师有所帮助。“降低UI设计切图大小的方法”会在后面的文章中讲到,希望大家都能成为UI设计大神。


免责声明:

丝路设计教程自学网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。

Copyright © 2008-2017 blog.silucg.com 丝路教程网 版权所有 网站地图 室内教程 | 室内软装 | 创意家居 | 室内风水设计 | 室内设计培训 | UI教程 | 移动UI | 网页UI | 游戏UI | UI设计培训 | 平面设计 | PS | AI |
点击这里给我发消息
0元免费学设计
姓名:
电话:
微信:
Q Q:
课程: