一款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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容