一款APP的设计稿从设计到切图⑤
· 介绍一下工作流程以及后期切图资源的输出 ·
苹果要在9月10号凌晨开新品发布会,尼玛产品更新赶上赛跑了,我觉得没准明年又会出不知道什么尺寸的IPhone……
本期是这个系列的完结篇,我会把一些工作常用数据写一写,如果你想知道更加全面的数据,那就百度一下IOS人机指导手册,我相信做为设计师的你有自己查找资料的能力,因为各项数据过多,我想写但是没那么多时间。
同时也会整理一些素材上传,喜欢的可以下载。
第一期 一款APP的设计稿从设计到切图①
第二期 一款APP的设计稿从设计到切图②
第三期 一款APP的设计稿从设计到切图③
第四期 一款APP的设计稿从设计到切图④
APP的设计不是读几篇文章就能明白的,想要完整掌握设计方法和规范,唯一的途径还是多做多练多交流;设计来不得半点马虎和偷懒,所以还在设计之路上前进的人,务必要努力。不懂和不会的,不能怕丢人,务必要去向你的搭档请教。
你需要使用的字体:
如果是用Mac设计的小伙伴,直接就用苹果黑体字就好了;不过用Windows的就没那么幸运了,PC上还没和IPhone默认字体效果完全一样的字体,通常都是拿其他字体代替。
苹果丽黑 Hiragino Sans GB W3(普通)/W6(粗体) 比较接近IPhone字体的一款字体,这是我之前一直使用的设计字体。
黑体-简 STHeitiSC-Light Mac里面拷出来的苹果黑体,比较贴近IPhone手机字体,目前在用。
我会把这两款字体上传,有需要可以下载。
关于字体大小的问题
顶部操作栏文字大小 34-38px
标题文字大小 28-34px
正文文字大小 26-30px
辅助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一个范围,这要根据设计的视觉效果来决定,不要死记硬背,但是切记,字体大小要用偶数。
你需要知道的IPhone设计尺寸(这里是一个整屏的尺寸包括了状态栏)
320*480 IPhone3GS (我没见过3GS实体机,只在网上见过图片,但你需要知道这个尺寸)
640*960 IPhone 4/4s (4时代的设计尺寸)
640*1136 IPhone 5/5s/5c (5时代的设计尺寸,虽然现在出来6/6 plus,但还有人再用这个尺寸设计)
750*1334 IPhone 6 (目前最新的设计尺寸,基本上现在做IOS的APP设计,用这个的应该最多)
1242*2208 IPhone6 plus (这是标准分辨率,也就是设计需要的尺寸;另外还存在物理分辨率是1080*1920,这并不需要深入理解。plus还涉及到横屏,横屏是是没有状态栏的,设计横屏时可以参考IPad的设计模式)
这些IOS系统的用户操作界面,你只需要在百度“IOS用户操作界面PSD素材”就可以下载到,里面包含了各种控件(图标,按钮,系统各项尺寸),我会把它们的JPG图片上传,因为PSD文件过大,而我不喜欢上传网盘,这里不再赘述了。
你需要提交的启动页面
这是开发工具Xcode提供的LaunchImage(启动页面)的各项尺寸,咋一看是不是吓一跳?工程师是按照IOS的系统版本来设置的,但你是设计师,你是按照IPhone的版本来作图的,所以其实没有那么多,真实情况下,我们的工程师要求提供以下几个尺寸:
640*960 (4/4s)
640*1136 (5/5s/5c)
750*1334 (6)
1242*2208 (6 plus)
2208*1242 (6 plus的横屏尺寸,如果你们的软件支持横屏模式,你就需要做一张横屏的启动页面)
注意,启动页面一定要是PNG格式的
图标的提交尺寸
IOS系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方形的PNG图片即可。
因为需要的图标非常多,不可能全部加进去,只能选择最好的尺寸,我们的工程师要求我提供以下图标尺寸:
1024*1024 Retina APP Icon for APP Store(高清屏的APP Store)
512*512 APP Icon for APP Store(普通屏幕的APP Store)
120*120 6的主屏幕尺寸
114*114 5/4s/4的主屏幕图标尺寸
57*57 3GS的主屏幕图标尺寸
58*58 Retina Settings图标尺寸
29*29 Settings图标尺寸
提交的图标尺寸不是固定的,所以,去找和你搭档的工程师,让他给你出一份需要提交的图标尺寸文档。
差不多用的到的就这些,有时间可以去查看一下苹果的IOS人机指导手册或者开发文档,上面有更加详细的数据说明。
但实际工作中需要的并不像手册上提供的尺寸那么多,所以工作之中,和你的工程师搭档去沟通,你要知道的是你们公司开发所用的数据,而不是苹果提供给你的数据。
一点感想:
就我所知,70%设计师对产品视觉风格的决定权并不在自己手上;
你可能要根据老板的喜好去改动设计稿,去因为工程师不想费力气去实现你的效果而改动设计稿,去因为市场需求的变化而改动设计稿,你的身后总是站着一群指点江山的神(他们可能是你的老板,运营,销售等等不是设计师的人)。
但是还是请你记住:设计不是搞艺术,你在为人,为市场,为客户,为你的老板同时也是为自己做设计,搞艺术可以完全挥洒自己的想法,但是搞设计,你就要夹着尾巴做人~因为做了设计,你就永远是乙方。
设计的门槛很低很低,低到我见过30岁,原来做会计的人都去参加培训来做设计了;
现在很多人学设计,特别是UI设计,是听说这一行赚钱,我说的是你吗?
其实设计这条路很难走,我的技术总监(腾讯10年)和我的设计总监(12年设计)都对我说过相同的话:单纯的做技术和设计这条路其实不赚钱,因为水平到达那个程度,只能卡在那个薪资水平上了,也就月薪25K上下,你想赚更多的钱就要自己开公司或者走别的岗位。
所以不管你抱着怎样的想法,是热爱设计这一行,还是只想靠设计赚钱,我还是希望,既然做了这一行,就要努力朝着最好去做,因为这算是职业道德,也算是没浪费做设计的时间。
这个系列就到这里吧~可能讲的并非全面,因为我认为你急需知道的是工作中实际要用到的,而更全面的东西,你可以在工作之余自己去查看文档。
之后的系列我会考虑讲一讲设计的方法和思想~就这样吧