恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
IOS应用设计时,到底哪个设计尺寸更高效?
0.0°
2017-04-14 原创文章 经验/观点 举报 1840 4 8 1

Image title

近日苦心钻研toB的移动端产品,面对来自五湖四海,四面八方组成的一个处于融合阶段团队,这中间过程还是有很多耐人寻味的场景。这中间就有一个到底用什么分辨率来画IOS设计稿的讨论。

这个讨论的场景是这样,因为之前一直都是用750*1334的尺寸,所以这次再做iOS设计稿的时候,默认也还是选择这个尺寸,也没有过多的把这个问题拿出来让大家讨论定夺。那在几次的设计评审会议下来以后,每次领导都对设计稿不满意,而且是十分的不满意,问其原因就说看着不舒服。这个问题就大了,不舒服,那让你不舒服的点在哪儿呢?几次讨论无果的时候,产品经理来找我们了,对UED提出一个要求,这个要求终于让我知道问题出在了哪里——新来的领导和产品经理用的是iPhone 6P,每次设计评审的时候在自己的6P上看6的尺寸设计稿,缩放后看着就是觉得不舒服,要求UED用6P的尺寸来。对于已经进展到一大半需求阶段的产品来说,重新调整设计尺寸,这无疑是影响到产品整体进度的。那抱着产品上线的时间和工作效率的态度,整理一个片子,认真的和领导讨论沟通设计IOS应用时,什么场景下用什么尺寸?我想对于这个问题,应该有很多人都有疑问,为什么大家都喜欢用iPhone6的尺寸,而不是其他的尺寸呢?

那在这个问题抛出来以后,按照前面和大家分享过的解构思维的方式,我们对这个问题一环一环的拆解,按照拆解可以从这个两个角度来分析这个问题:

1、设计 iOS 应用时,究竟是应该使用什么尺寸的画布画效果图是最高效的?

2、是否可以直接使用 iPhone 6 Plus 的尺寸做效果图,用来适配其他尺寸的机型?

那先从第一个问题开始,下面我谈一下自己实践后的见解:

问题一:设计 iOS 应用时,究竟是应该使用什么尺寸的画布画效果图是最高效的?

我相信很多人和我一样,在开始一个新的 iOS 应用设计时,一般都是采用的是 iPhone 6 的 4.7 inch,即 750*1334,这也是为什么会出现产品经理让我中途改设计尺寸的原因。

为什么?因为效率!!!产品整个研发过程中,效率是王道啊!

我们都知道现在的 iOS 画效果图(PS:是效果图!画效果图时使用的分辨率并不是采用设备本身的显示分辨率,设备配置那个分辨率是设备的物理分辨率,并不能直接用户做为画效果图的分辨率)时,尺寸有以下五种(三类):

Image title

@1x:3.5 inch(320*480)
@2x:3.5 inch(640*960,iPhone4/s)、4 inch(640*1136,iPhone5/s/c)、4.7 inch(750*1334,iPhone6)
@3x:5.5 inch(1242*2208,iPhone6plus)。

这里要特别说明下,@1x 已经是上个时代 iPhone 的切图标准,只适用于包括 iPhone 3GS 之前的机型,所以一般情况下,这个尺寸不在我考虑范围内。剩下的那些,按照屏幕宽度分类的话,可以分成小、中、大三中尺寸,分别是:

小 —— @2x:3.5 inch(640*960)、4 inch(640*1136)
中 —— @2x:4.7 inch(750*1334)
大 —— @3x:5.5 inch(1242*2208)

不知道其他公司是什么样子,至少我们单位在整个产品的研发周期中,留给设计的时间是非常有限的,有的时候恨不得2天时间就让你把所有的页面都摆在用户的面前。那在紧迫的工期前提下,意味着我们需要从三个尺寸中选择一个尺寸来画效果图。我之所以选择“中”(即 4.7 inch,iPhone 6),是因为从布局角度而言,选择一个中间的尺寸能够帮我们最有效地把握界面设计的整体视觉。当把这种视觉移植到“小”和“大”的屏幕上时,不会有太大的视觉差异,不需要再多花时间重做布局。

那么,如果不这么干的话,我们又需要花多少时间呢?实践告诉我会碰到下面两种情况:选择“小”作为视觉标准,会使得按照“小”的 feel 去做“大”屏幕时,整个视觉布局会显得中间拥挤,两边空旷;使用“大”作为视觉标准,移植到“小”屏幕之后会发现很多元素根本塞不进屏幕。

选择“中”,我只要稍微将个别“小”和“大”的效果图作微调,无需大动干戈,就能大致完成对于所有屏幕尺寸的适配。对于大多数的基础页面而言,只要在“中”上面看着顺眼,在“小”和“大”上面基本没问题。在完成效果图设计之后,只要直接标出 Spec 交给开发,你会发现大多数页面不再需要在“小”和“大”尺寸上面另作调整,一切看起来都是那么的和谐和任性,真心佩服Apple他们啊,真是太有前瞻性和全局性啦,真是不忍心让我们这些屌丝设计太辛苦啊,考虑的各种周全,定下来这三种尺寸。

SO,选择 iPhone 6 的目的就是为了节约时间,节约成本,提高效率!

问题二:是否可以直接使用 iPhone 6 Plus 的尺寸做效果图,用来适配其他尺寸的机型?

如果你问我,用iPhone 6 plus 尺寸做效果图可以吗?我的回答是:当然可以啊,用哪个尺寸做效果图都是可以的,不管是iPhone6plus还是iPhone5,如果恰好你的手机和我老板的手机一样,都是iPhone 6 Plus 的时候,尤为推荐,因为 Sketch 这个软件的牛逼之处在于可以和 Sketch Mirror 同时使用,大屏幕里面显示“大”的效果图,看起来整个人就舒服啊!给领导汇报的时候,也不用再三解释这个是iPhone6的尺寸,不是iPhone 6 plus的尺寸……(不过现在PS也有 PS play,也可以同步在手机上直接看效果)

但是,如果你使用的是“大”尺寸进行效果图设计的话,你需要将每个页面都落实成“小”,等于要把你的效果图通通重新再画一遍。不理解?你把“大”的尺寸的 Spec 给开发后,去 iPhone 5 或者 iPhone 5S 上面跑跑看,就知道啦。如果再在 iPhone 4 和 iPhone 4S 上面跑,我想你或许会有更多的意外“惊喜”!!!

所以,没有绝对的必须用iPhone6的尺寸,也没有不可以用iPhone6 plus尺寸一说,只是看我们要什么。如果你不差钱,有的是时间,你可以想怎么做就怎么做,有的是时间慢慢去体验,反之亦然。


更新:2017-04-14

收藏

4人已收藏

好设青年

然,知其然,释其所以然

  • 42

    作品

  • 450

    粉丝

  • 14

    关注

  • 商品列表设计如何提升购物体验——泛渠道小程序产品复盘思考
  • 论页面设计中的间距重要性——8大电商移动端间距数据采集和分析
  • B2C和C2C在前端购物流程设计上有哪些不同?
  • 京东、淘宝商品详情页设计背后的思考
相关标签
设计经验分享ps

    猜你喜欢

      2017-04-14 原创文章 经验/观点 举报 1840 4 8 1

      IOS应用设计时,到底哪个设计尺寸更高效?

      0.0°

      你确定要举报IOS应用设计时,到底哪个设计尺寸更高效?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      4
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录