UI设计中关于设计规范、切图和尺寸的几点疑问?

从事软件开发和设计工作的大家肯定或多或少对设计规范和切图以及尺寸有一些疑问,但是这些方面也是我们工作中必不可少要接触的内容,所以大家都知道并了解我们从事这个行业,尺寸规范以及切图的重要性,首先,我们先来聊聊设计规范,工作中我们往往需要提出一个完整的一次性解决方案。但有时我们是受到时间的限制,或者我们只是还没有确定一个清晰的发展方向。一次性的解决方案并不是说它不好,但是如果它不是建立在一个坚实的基础之上,最终我们会发现自己还是不得不回过头来偿还技术积累和设计这笔债。

 

n 为什么需要设计规范

1、缺少限制

相比于其他设计领域,软件设计几乎没有物理限制。这就意味着任何一个问题都可能有多种解决方案,但这恰恰可能造成用户体验的不一致。因此作为产品所有者或设计师,我们必须创建并遵循自己的设计规范。

 

2、多人协作

软件通常是由一个团队设计出来的,有时甚至可能是很大的团队。这就意味着,创造一个连贯一致的用户体验的难度会随着团队成员的人数增加而呈指数增长。另外,无论团队协作多么一致或团队多小,不同的人总会有不同的解决方案或设计风格,很容易导致体验割裂。

 

3、多个平台

我们需要让产品应用于多种不同的平台和设备。为保证产品在多平台间的同步及体验的一致性,通常需要在不同平台上去做很多重复性的工作。

 

4、软件是连贯的

软件的另一个不同之处在于,虽然它可以被认为是一个产品,但他不会像传统的消费品那样真的磨损或被更换。即使公司和其产品本身发生了大的变化,多年前的代码和设计仍然会存在于产品的许多地方。这就要求不断的维护和升级。

 

随着现在手机行业的兴起,手机的尺寸越来越多,相信刚入门的设计师都会被手机尺寸、分辨率、适配等等的给弄昏头脑,下面帮助UI新手小伙伴们,快速了解一些设计规范。

 

主流Android手机的分辨率和尺寸


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

设计切图的原则

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


l 切图资源尺寸必须为双数

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

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

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

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

切图神器Cutterman介绍

 

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

 

l 一键切图,真正解放双手

Cutterman能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!

支持IOS平台

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

支持Android平台

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

l 支持各种图片格式输出

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

l 多个图层合并、单独输出

图层太多?木关系!可以多选嘛!支持选中多个图层合并输出,也可以逐一输出的哦,简直方便到爆!

 

l 固定尺寸输出


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

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值