返回

珠海天琥设计培训学校

ui设计师如何切图

UI设计学习网更新时间:2020-12-16 浏览:184

ui设计师如何切图

当界面设计完成时,设计师需要将图标切片并提供给开发工程师。切图与标注是为了满足开发人员对效果图的的高度还原需求,这直接影响到工程师对设计效果的原度,也是设计师的重要输出*。正确、准确的切图可以**限度地还原设计图,起到事半功倍的作用。
 

通常,我们只需要对icon进行切图即可,文本、线条和一些标准几何形状不需要切图。例如,搜索框只需要描述其尺寸、圆角尺寸、背景颜色值和标签中的不透明度即可,开发工程师可以使用代码来实现这一效果。
 

切图基本规范
 

切图的尺寸*须是偶数;
 

在同一模块内,切图尺寸应一致;
 

如果有背景,尽量用平铺背景图案进行设计(减少程序体积);
 

可点击部件把相关状态都切图输出,如正常状态、点击状态和不可点击状态;
 

输出的切图应尽可能压缩,以减小APP的总尺寸,提高用户的加载速度;
 

所有变形的字体把它当成 icon 来切;
 

切图输出格式:png-24;
 

重复的东西只切一个。
 

切图输出类型
 

1.图标切图输出
 

桌面图标切图输出
 

App的桌面图标将用于许多不同的地方,例如手机桌面、应用商店和手机设置列表,因此app桌面图标需要许多不同尺寸的切图输出。对应于两个平台的桌面图标的设计输出尺寸也不同。输出时把双平台的尺寸全部输出切图,桌面图标切图只需要提供直角的图标切图,手机系统会自动生成圆角效果。
 

系统图标切图输出
 

一套图形适配双平台:iOS平台(iPhone 6plus版本除外)和安卓平台公用44*44px切图素材,可以实现一套切图适配双平台的开发。
 

适应大屏幕:为了适应iPhone 6plus和iPhone 7plus,单独切一套比原来44*44px切图大1.5倍的切图,即66*66px切图。
 

app内功能图标
 

图标可以有留白区域,建议图标的尺寸不要太大。
 

2.图片类切图输出
 

图片类切图主要指启动页面、新手指南页面、默认提示、广告地图等需要完整切图的图片。一般来说,对于工程师开发和使用的相同类型的切图图片,应该保持相同的尺寸。此外,这些切图的文件通常很大,在切图过程中需要控制切图文件的尺寸。
 

相关资讯

ui设计学习方法

ui设计学习方法
2020-09-11 7027
给大伙儿共享一些有关ui设计学习培训的学习的方法,期待每一个来学习ui设计学习培训的盆友都能有非常大的取货。有关ui设计学习培...
零基础怎么入门学习UI设计呢
2021-06-25 2082
对于基础薄弱的小伙伴们来说,学习UI设计的头绪是比较大的,虽然有很多的书籍和视频可以供参考,但是很多人缺乏规律性,缺乏自学精...
GUI、UI、UE、PM都代表什么意思
2021-01-21 1040
UI-UserInterface-操作界面-包含了GUI,可是彻底2个不一样的职位-广泛,能够是加工厂设备操控台页面,还可以电冰箱门上的溫度调整页面,或是是一个APP的页面,但大家如今通俗化了解是指网页页面或是APP的总体页面...
零基础学习UI该怎样学习
2021-11-10 809
能不能学好一门技术性自身较大的要素取决于你是不是对它有兴趣爱好,次之是方式和恒心。针对新手怎样学习UI这一件事儿,这也是许多新手最关注的点...
UI页面中的排版设计基础理论
2021-01-21 804
看起来仅有好多个简易的原素组成起來,全部原素的绘图可以说非常简单,殊不知当一个产品原型出去后,室内设计师假如单纯性按原形来开展设计方案而不考虑到信息化管理标准,那麼许多情况下便会出現不融洽的效果...
如何做出有格调的设计
2021-11-06 753
什么是情调?总之便是给人一种精美而高端的觉得。今日要带上大伙儿来扒一扒说白了情调感的设计方案有什么招数?根据科学研究很多...
有关UI设计的三大因素的剖析
2021-01-21 734
UI的设计是网址在互联网技术立足于的重要。那麼我们要如何依据本身的状况开展友善的ui设计方案呢?实际上UI的取得成功设计方案有三大因素,下边就来剖析一下有什么因素...
UI的设计趋势
2021-11-10 734
作为一名技术专业的UI设计师,假如你能掌握UI设计的发展趋势,可能立即伤害的设计方案功能和水准...

相关课程

栏目导航