欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

移动UI设计切图规范原则

发布时间:2017:09:24 10:03:23 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1636个文字,预计阅读时间5分钟
导语
海淘科技编者按:切图是初级设计师最重要的能力,网上一直没有全面系统的教程,这篇好文从零开始教你学会切图方法,附上切图神器,绝对值得收藏。考拉快跑:移动UI设计切图是

智唯网络编者按:切图是初级设计师最重要的能力,网上一直没有全面系统的教程,这篇好文从零开始教你学会切图方法,附上切图神器,绝对值得收藏。

考拉快跑:移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。

设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。

如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力。

设计切图的原则

设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。

其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量。

最后,输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。

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

众所周知,智能手机的屏幕大小都是双数值,比如iPhone 7的屏幕分辨率是750*1334 px。切图资源尺寸必须为双数,是为了保证切图资源在工程师开发时是高清显示。因为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设计切图规范原则

切图输出类型

桌面图标切图输出

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


移动UI设计切图规范原则

系统图标切图输出

一套图适配双平台:

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


移动UI设计切图规范原则

适配大屏幕:

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


移动UI设计切图规范原则

图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:【有效果图】微信小程序 简单DEMO布局

下一篇:25个几何元素网页设计作品欣赏

  • 18900 文章总数
  • 2380250访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信