收藏本站 关于我们

新手福利!超全面的UI设计切图规范指南(原创文章)

发布时间:2017-01-08 22:38:45   来源:PS教程   人气:0

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

\转自:UI酷设计


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

 

  

设计切图的原则

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

 

 

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

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

 

 

\http://uicool123.com/home/detail?id=96


案例示意:

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

\https://tinypng.com/


\http://uicool123.com/home/nav?id=6

 

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

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

\


 

Sketch Measure切图插件简介

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


详细的使用方法请查看:http://uicool123.com/home/detail?id=111


003d586ecd05a8012060c87fe72e.jpg


 

以上就是我多年以来对UI设计切图积累的经验之谈,希望对正在路上的设计师有所帮助。分享是一种美德我也希望以后有更多的设计经验分享出来。后边陆续会更新“UI设计标注规范”和"UI设计命名规范”,文章会第一时间在UI酷设计网站发布。需要的小伙伴请关注网站动态。祝大家在2017成为自己心目中的那个设计大神。


本文来自PS教程网www.46PS.com,转载请注明!关键词:GUIGUI教程原创自译教程


PS教程