|
【刘炜的回答(125票)】: 陈伟答案中对 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 5 屏幕尺寸的设计稿，请开发在其它屏幕上自适应，最终检查实机效果没问题就行。 苹果官网上屏幕对比页面里用到的都是常规界面：  对于一些定制的界面我们应该根据不同屏幕重新适配，比如下面是个简单的 profile 页面示例，自动适配到大屏幕的效果挺糟糕的。  此时设计师应该手动为大屏幕重新调整设计，像下图一样。  在上图中可看出 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 好些。 【陈伟的回答(69票)】: 1. 换工具，最好用 Sketch，其次推荐 AI。放弃 Photoshop 吧，对矢量支持的太无力 2. 只用输出一倍的矢量图（PDF）就可以了 我们再也不需要计算了，丧心病狂的苹果已经开始支持矢量图了，我们只需要给工程师输出一倍的矢量图就可以了，目前仅发现支持 PDF 格式。 刚才已经和我们的工程师调试成功了，在 iPhone 6 plus 模拟器上的对比效果：矢量图支持的非常完美。  【5key的回答(27票)】: 没时间翻译，仅提供PaintCode的一篇文章供大家参考吧：    Line rendering To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on
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 【刘典的回答(16票)】: 苹果官方提供了足够好的工具：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 应用的界面设计？ 【付阳的回答(3票)】: Sketch轻松做到，6和5的切图可以用一套，ppi都是326，6+的话导出3x图就ok 【蒋奇的回答(4票)】: 你们以前不管安卓的吗，今天才问这问题 【李惜的回答(1票)】: Xcode 6 的默认模板已经支持矢量图了……还在用 Photoshop 做 iOS 设计的同学可以好好学习一下 Sketch 了； 我认为 iPhone 6 Plus 的适配难度，已经完全可以再去做一个 iPad 版本了，所以以后像是微信 iPad 这样的东西估计就越来越少了（我就这么想一想……） Android 部门你们够了，从来不都是 iOS 的资源文件改一下大小然后就用了嘛…… 习惯不好的设计师，只求多福哈…… iPhone 6 Plus 永远都会出现虚边，完全可以作为一个检验强迫症的工具了。 ------------------------ 以上都是废话 ------------------------ 我想我以后的流程肯定是制作 2208 × 1242 的版本，标注什么的全部使用 pt，能相对布局的就绝对相对布局，需要视情况绘 1136 x 640 和 1334 x 750 的版本 【浅草域的回答(0票)】: 苹果发布的两款iPhone 6新品，设计师如何在界面上进行适配？ 【安艺全的回答(0票)】: 关注这个问题，还好已经用Sketch了~ 【UI路遥的回答(0票)】: 安卓的适配导致体验不佳都没解决的很好 现在又来个IOS适配 坑爹～ 只能说试图用单纯的适量软件来解决适配问题 想法就有些简单了 好在苹果机器上PPI与屏幕长宽比是一致的 适配起来难度比安卓小些 最起码很多控件能不损失体验的情况下 可以直接沿用 具体方法与规范还在研究中 【王帆的回答(0票)】: LCM(1080,750,640)=432000 【知乎用户的回答(3票)】: 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来画图吧... ⑤安卓设计不要笑，即使再苦逼我们还是你们轻松许多啊...哈哈哈哈哈哈哈.... 【tastypear的回答(20票)】: 问问隔壁的Android开发部门 原文地址:知乎 |
|
|
