一款APP的设计稿从设计到切图⑤

一款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文件过大,而我不喜欢上传网盘,这里不再赘述了。

你需要提交的启动页面

一款APP的设计稿从设计到切图⑤_第1张图片
图片发自App

这是开发工具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上下,你想赚更多的钱就要自己开公司或者走别的岗位。

所以不管你抱着怎样的想法,是热爱设计这一行,还是只想靠设计赚钱,我还是希望,既然做了这一行,就要努力朝着最好去做,因为这算是职业道德,也算是没浪费做设计的时间。

这个系列就到这里吧~可能讲的并非全面,因为我认为你急需知道的是工作中实际要用到的,而更全面的东西,你可以在工作之余自己去查看文档。

之后的系列我会考虑讲一讲设计的方法和思想~就这样吧

你可能感兴趣的:(一款APP的设计稿从设计到切图⑤)