野路子设计小讲堂——iPhone篇

郑州/UI设计师/5年前/209浏览
野路子设计小讲堂——iPhone篇

写这篇文章的初衷是分享给刚入行的萌新一些工作方法,帮助TA快速掌握工作技能,也是对之前工作方法的一个总结。

野路子设计小讲堂——iPhone篇


同行们!大家好,我是《野路子设计小讲堂》的小福,写这篇文章的初衷是分享给刚入行的萌新一些工作方法,帮助TA快速掌握工作技能,也是对之前工作方法的一个总结。如果行业Dalao,emmmm~~~不妨也来看看咱家讲的,如果有更好的方法可以在下面评论区留言,我会第一时间跟进的。


PS:本帖子适合萌新学习工作方法(能不能融入自身的工作,还是看你个人的造化了),会通过设计规范、人机交互方法、案例分析、工作方法四个维度分开来讲解(总结)。


以上内容,不想看直接略过,往下看!——————————————————————————————


网上好多IOS的设计规范,但都太过远古,巴拉巴拉巴拉讲一大堆,太过复杂,实际工作中用到的就下面这几点内容。

A、请先记住下面4点的解释,后面会用到:

B、以上这是页面的叫法,下面我们来讲设计尺寸:

看下面内容你要先知道:@2x和@3x,也就是我们切图给程序小哥时候的2倍图和3倍图,程序小哥开发用的尺寸规格单位是“pt”。

现在用的IOS最常见的机型为:iPhone6~iPhone 11 Pro Max,之前做设的时候一般会采用750px*1334px(IOS开发规格:375pt*675pt)这个规格作为设计输出稿(你说还有4、5呢?他们手机都不肯换会是你的目标用户么?放弃他们就行了),但我建议你们直接按照1242px*2688px(IOS开发尺寸:414pt*896pt)这个规格输出设计稿,方便后续对接。

PS:苹果手机以后414pt*896pt会是主流,375pt*675pt会逐渐淘汰,对设计师来讲也算是减轻了工作量。




如果你不知道怎么输出设计稿,你就按照1242px*2688px设个规格来输出设计稿(不理解就把尺寸除以3再乘以2就是750*1334的设计稿了)


当你以@3x图来输出设计稿的时候,请注意以下问题:

  1. 所设计的像素规格要被3整除,方便开发小哥高度还原你的设计稿;

  2. 图标一定要切正方形;

  3. 设计文字大小的时候最小字体为33px,不能比这个更小;

  4. 关于沉浸式适配问题,我们在设计750px*1334px设计稿时,切除的@3x图在1242px(414pt)*2688px上发现并不适用,是因为状态栏高度不同,我们需要单独调整一份@3x图给开发小哥,他们会去适配机型的。

    undefined

    PS:附件内上传了已经做好的模版PSD文件,可以下载了直接用。



10
Report
|
5
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
app设计规范
app设计规范
app设计规范
app设计规范
作品收藏夹
品牌vi完整思路and呈现方式
品牌vi完整思路and呈现方式
品牌vi完整思路and呈现方式
品牌vi完整思路and呈现方式
精选收藏夹
作品收藏夹
餐饮案例
餐饮案例
餐饮案例
餐饮案例
精选收藏夹
作品收藏夹
小家电
小家电
小家电
小家电
精选收藏夹
作品收藏夹
大家都在看
Log in