广告栏目

你现在的位置: > 网络新闻 >

iPhone6/6Plus出现后,如何改进工作流以实现一份设计稿支持多个尺寸?



文章发布时间:2015/6/27 18:53:19



彭丽媛歌曲精选60首激情高原(25首)赋集老丈人的一句气话让我坚守了一生的承诺组织承诺和心理契约的异同?

男子好赌成性用铁锹打死亲生父母大厨必看的两款经典川菜人生如旅,宠辱不惊?每日禅话?373《宋徽宗赵佶瘦金书》赏析!关注的人很少且不想增加,怎么才能使新版知乎首页更方便自己浏览?一个乡党委书记的年收入究竟有多少这种场合应该怎么办?毕业前一定要做的二十件事是什么?中国古代服饰特点及演变健康也需要经营和管理燕麦蔬菜粥法国【决战帝国】国语伸展(冥想放松音乐专辑)抬头与低头——基于职场新人的视角专辑:【小学至大学《数学科》视频教程】大全集【系列集】5濂充汉涓€鐢熷繀鍋氱殑鍗佷欢浜嬨€佺湅鐨勫崄鏈功銆佸崄閮ㄧ數褰?长寿的智慧:10位华人寿星保健养生之道怎样微信上打免费网络电话【转载】崔永元美国发微博:美国人吃了十几年转基因食品为谣言洗肾偏方拈一抹冬韵成笺,回首念已入骨【视频欣赏】(4集)支招衣物熨烫生活小窍门教程人生的密码(精美图文)激发潜能成功经营人生老徐:官场潜规则──不抛弃,不放弃!高档艺术冷菜不转绝对后悔人间别久不成悲←═╬═岁月静好,我心悠然═╬═→晒黑的男生怎么回到原来的肤色?解放军都神魂颠倒!看看外媒如何评论解放军的!两性图文====說給小三聽的21個“真相”动态《游鱼图》成为一名职业裁判(足球或者篮球)需要具备哪些特质或技能?中国古代官场百态图香菇木耳酱肉包干净纯洁又宁静的钢琴曲【音画伴赏】什麽是真正的愛情?誰是最愛妳的人?年轻干部要能受委屈为什么面对面交流非常重要?历史上是否会有水平极高的文艺作品因"曲高和寡"而失传?多吃粗粮有益健康——黄金玉米烙

经济全球化和区域化一份引发投资界地震的研报:刷爆朋友圈,基金经理直呼看不懂小故事:相遇的乞丐多吃粗粮有益健康——黄金玉米烙

相关问题:


iPhone 6/6+出现后,不同分辨率间无法downscale,以前960@2x的图downscale 50%就可以有480@1x的图,如今创建2208@3x的图,简单downscale 33.3%再也得不到480@1x。本身不是简单整数倍数,使用Sketch时通过scale功能也没法精准的转换比例。

补充说明:iOS设计由于@2x、@3x的存在,以及开发工具对矢量图的支持,所以此问题和Android的大屏幕支持并不具备可比性。

网友回答:


iPhone6/6Plus出现后,如何改进工作流以实现一份设计稿支持多个尺寸?

陈伟答案中对 Photoshop 的看法有些误导。


Photoshop 支持用矢量(而且应该只用矢量)元素设计界面,只是无法输出矢量资源(可以通过脚本用 AI 输出 SVG,但相对不那么方便)。


最新的 Photoshop 是有跟 Sketch 一样的输出切图功能的(Generator),用 2x 的 PSD 输出 3x 的切图也可以。而且 Photoshop 配合 Slicy 输出切图比 Sketch 3 快捷很多。


Sketch 相当棒,但目前(v3.1)还是有不少小问题,加上对中文支持不够好,在界面设计中还不能完全取代 Photoshop。


关于题目的问题,首先一份设计稿就不能适用于 iOS 各手机屏幕尺寸。以下是 Bjango 把目前各 iOS 手机屏幕还原为 1x 的对比图,可见在设计稿中四种屏幕尺寸宽高都不一样,不是简单地把 iPhone 5 界面缩放一下就变成 iPhone 6 的设计稿了。


在上图中可看出 iPhone 6 Plus 界面中部分切图尺寸比 3x 更大,要单独切图,所以不是说简单地给 iPhone 6 Plus 统一切 3x 图就 OK 的了。这时矢量切图在开发中优势很明显,只要把大屏幕中切图的尺寸告诉开发即可,无需针对非 3x 元素额外输出切图。


* 手机屏幕毕竟还是像素位图,像细线图标即使是矢量的在缩放后仍可能会出现虚化模糊的现象(类似 HTML 里的 icon font),理论上并非所有情况都适合用矢量切图。但是,iPhone 6 Plus 屏幕本身又是 downscale 的,导致原本 pixel perfect 的切图也会在缩放后发虚,完全没有 pixel perfect 而言,究竟是不是 iPhone 6 Plus 屏幕已经优化的看不出像素点了,要等看到实机才能确定。


切图方面用 Sketch 的话可以尽量试试 PDF 矢量切图(但要在实机上确认效果)。Photoshop 就只能输出位图了,上面提到定制界面里的一些切图得单独输出,其他常规的用 2x 的 PSD 输出 1-3x 切图即可。


另外,与 Photoshop 和 Sketch 相比,AI 不适合做界面设计。勇于尝试 Sketch 是好的,但若 Sketch 各种毛病忍不了的话建议还是用 Photoshop 好些。


* 关于 AI 不适合做界面设计的看法,其实作为功能强大的矢量设计工具,AI 当然可以用来设计界面,只是没那么方便(我一位客户给我的设计稿还是 InDesign 设计的)。Sketch 吸收了不少 AI 与 Fireworks 的优点,比 AI 好很多,用惯 AI 的朋友不妨试用一下。

显示全部


答友:

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。


显示全部


答友:苹果官方提供了足够好的工具:Auto Layout (Auto Layout Guide: Introduction),可以理解成 iOS 上的 CSS,如果设计师用 Auto Layout 提供的排版语言描述出 UI 布局,那不同尺寸的 iPhone 只要同一份设计稿就可以了。设计师除了要学习 Auto Layout 外最好也学习一下 Interface Builder。

我公司的 app 需要支持 Resizable iPhone,昨天熬夜研究了这个问题,今天一上知乎看多 n 多类似的问题,我研究的结果写在这个问题下:
iPhone 6 和 6 Plus 新增的屏幕尺寸会如何影响 iOS 应用的界面设计?


答友:没时间翻译,仅提供PaintCode的一篇文章供大家参考吧:

Line rendering

To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on

  • Original iPhone - without retina display. Scaling factor is 1.
  • iPhone 5 - with Retina display, scaling factor is 2.
  • iPhone 6 Plus - with Retina display HD. Scaling factor is 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels.

The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size.


via: PaintCode

显示全部


答友:我是隔壁android部门的,我们的产品经理说你再画一个不就是了。


答友:1. 换工具,最好用 Sketch,其次推荐 AI。放弃 Photoshop 吧,对矢量支持的太无力
2. 只用输出一倍的矢量图(PDF)就可以了
我们再也不需要计算了,丧心病狂的苹果已经开始支持矢量图了,我们只需要给工程师输出一倍的矢量图就可以了,目前仅发现支持 PDF 格式。
刚才已经和我们的工程师调试成功了,在 iPhone 6 plus 模拟器上的对比效果:矢量图支持的非常完美。


答友:你们以前不管安卓的吗,今天才问这问题


答友:问问隔壁的Android开发部门


答友:1.由于iphone5/S和iphone6的PPi相同,为了方便计算,我们暂且默认iphone5和6使用同一套图片资源,选择iphone6的分辨率进行计算,6和6P的屏幕宽度比为750:1080约等于0.69,高度1334:1920约等于0.69,差不多等于2/3,这个时候就懂了,如果iphone6使用@2x的图,那么P就是使用@3x的图,也就是说iphone5的图片资源的1.5倍.

2.通过上面的计算我们了解到,如果要适配6P的图片资源,就要把所有的iP5/5S/6的图片伸展成1.5X.但是对于许多习惯用PS等位图来设计的人员来说,><.就苦逼了...

3.解决方法:①简单粗暴的扩大图片尺寸,也就是说直接把现在有的图片资源调整为1.5X,如果全
部用路径画图,会简单许多,直接调整大小即可
②iphone的5/5S/6/6P的屏幕比例为9:16,所以比例这个问题现在不是很大,但因
Plus增加横版显示,所以建议对于一些用户量较高的软件进行重绘。
③因为现在没有真机来进行测试,所以以上猜想都局限于现有理论。诸位设计师可跟
身边的开发人员探讨下有没有更好的解决方案...
④改了,以后全部用SK和AI来画图吧...
⑤安卓设计不要笑,即使再苦逼我们还是你们轻松许多啊...哈哈哈哈哈哈哈.... -.-烦人


答友:Sketch轻松做到,6和5的切图可以用一套,ppi都是326,6+的话导出3x图就ok


答友:iPhone 6分辨率与适配


答友:给4S也切一个吧,求你们了=。=


答友:俩中文:矢量
俩英文:AI


答友:安卓的适配导致体验不佳都没解决的很好 现在又来个IOS适配 坑爹~
只能说试图用单纯的适量软件来解决适配问题 想法就有些简单了 好在苹果机器上PPI与屏幕长宽比是一致的 适配起来难度比安卓小些 最起码很多控件能不损失体验的情况下 可以直接沿用
具体方法与规范还在研究中


答友:展示不同的像素渲染各种设备,我们比较单位宽线是如何呈现的
  最初的iPhone——没有视网膜显示屏。比例因子为1。
  iPhone 5 -视网膜显示屏,比例因子是2。
  iPhone 6加——视网膜显示高清。比例因子是3和形象是后来缩减规模从2208×1242像素呈现到1920×1080像素。
  降尺度比例是1920/2208 = 1080/1242 = 20/23。这意味着每23像素从原始呈现必须映射到20物理像素。换句话说,图像相应减少了大约87%的原始大小。


答友:lz忽视了一个现实的问题,ip5和ip6的dpi是一样的,而且只有一套的2x资源,因此以ip6(750x1334)为基准做设计,所输出的切图2x在ip5(640x960)上显示会比在ip6上看大上一圈,因此正如楼主的Appstore效果图,在ip6上一行可以显示3.5个图标,在ip5中应该只能显示2.5个图标而不是3.5个,lz的效果图只是在ps上等比缩放的,跟实际程序比例是有巨大差别的


答友:想问一句,如果现在苹果开发支持PDF格式,那么PDF文件比png的要大,这个对于目前开发来说,影响会不会很大,需要做什么样的优化呢?


答友:坑我吧,3x的图在7.0的情况下不能读


答友:请问楼主,如果iphone4/5/6/6plus全部用3x的图的话,3X图比如一个小图标应用到iphone5上被压缩岂不是会模糊?这个可以忽略吗


答友:用的就是矢量路径,为何按照楼主说的,只改界面尺寸放大1.5倍,ICON还是会有虚边呢????


如何惩处虐童案养母,司法要跟上  今年4月,一组“南京9岁孩子疑遭养母家暴”的照片在网上疯传,伤痕累累的照片,迅速引起了公众的广泛关注。7月20日,养母李征琴因涉嫌故意伤害罪被浦口区法院提起公诉。作为这起案件中最令人关注的焦点——童童(化名),放暑假后就跟着亲生父母回到了老家安徽。童童回来后很少出门,一般都在家里和小姐姐玩,平时话也不多,他诉说现在最大的愿望:“我想回到原来的生活”。(8月3日现代

如何惩处虐童案养母,司法要跟上  今年4月,一组“南京9岁孩子疑遭养母家暴”的照片在网上疯传,伤痕累累的照片,迅速引起了公众的广泛关注。7月20日,养母李征琴因涉嫌故意伤害罪被浦口区法院提起公诉。作为这起案件中最令人关注的焦点——童童(化名),放暑假后就跟着亲生父母回到了老家安徽。童童回来后很少出门,一般都在家里和小姐姐玩,平时话也不多,他诉说现在最大的愿望:“我想回到原来的生活”。(8月3日现代

社会热点 │ 小道消息 │ 生活聚焦 │ 城市风声 │ 网络新闻 │ 连播快讯

新闻连播版权所有
不存在相应的目录