iOS 适配设计与切图

以iphone5作为设计标准:标尺图给的是640,美工给的切图是960坐标系下的素材3x,程序拿到标尺图,640的标尺除以2就是iphone5下的界面,3x的图乘以0.67就是2x。

以iphone6作为设计标准:标尺图给的是750,美工给的切图是1125坐标系下的素材3x,程序拿到标尺图,750的标尺除以2就是iphone6下的界面,3x的图乘以0.67就是2x。

手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式,再慢慢说明原委。

第一步 视觉设计阶段

  设计师按照宽度750px(iPhone 6) 的宽度来做设计稿, 除图片外所有设计元素均使用矢量路径来做. 设计定稿后在750px 的设计稿上做标注, 输出标注图. 同时等比放大到1.5倍生成1125px 宽度的设计稿, 在1125px 的设计稿里面切图.

第二步 输出图片和设计稿

  将切好的@3x 图片资源和750px 的标注图交付给工程师.

第三步 开发标准设备 app

  开发工程师拿到@3x 的图片资源和750px 的标注图, 完成 iPhone6(375pt)的界面开发. 此阶段不能用固定方式开发界面, 得用自动布局(auto Layout), 方便适配后续的其他尺寸的屏幕.

第四步 适配调试阶段

  基于 iPhone6的界面效果, 分别向上适配 iPhone 6Plus 和向下适配 iPhone5(c/s)的界面效果, 由此完成大中小三种屏幕的适配.

为什么选择 iPhone6作为基准尺寸?

  当面对大中小三种屏幕需要适配的时候,很容易想到先做好一种屏幕,再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6(750px/375pt)作为基准,基于几个原因:

  1. 从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计,到320pt可能元素之间比例就不是那么回事了,比如图片和文字之间视觉比例可能失调。

  2. iPhone 6Plus 有两种显示模式, 标准模式分表率为1242x2208, 放大模式分辨率为1125x2001(iPhone6的1.5倍), 可见官方系统里 iphone6 和 iPhone6Plus 分辨率之间就存在1.5倍的倍率关系, 很多情况下可用1.5倍等比适配.

  3. 1242x2208这个奇葩的数值是苹果官方都不愿公开宣传的一个分辨率, 不便于记忆和计算栅格.

所以 iPhone6是最适合做基准尺寸.

只交付一套设计稿, 默认用什么规则来适配?

  前文提到适配策略是先选择iPhone 6作为基准设计尺寸,然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话:文字流式,控件弹性,图片等比缩放。

  控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势。


按照上述默认适配规则,大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容,需要设计出特殊适配效果。比如App store首页焦点图,从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3 个变成一排4 个,真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。

原文摘录自知乎

来自:ui001

本文链接:http://www.mobileui.cn/a-draft-support-ios-app-design.html
本文标签: IOSiPhone分辨率尺寸移动APP移动设计

时间: 2024-10-18 05:50:12

iOS 适配设计与切图的相关文章

APP UI设计及切图规范

APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 嗡嗡(iwengweng.cn) 整理. 1.2 读者对象 项目实施工作组UI/UE设计人员. 2.色值规范 系统采用统一色彩标注值,超出的需要进行登记管理. 色彩范围值:以通用字号C开头标识,在Android开发中对应相应的配置文件 参考:Android开发设计规范 2.1 屏幕适配 Androi

UI设计规范整理一iOS字体和切图及规范

UI设计规范一iOS字体和切图及规范 说明: 1.对象为程序员等开发人员. 2.方法有千种,仅供参考. 3.文档的本质是备份与查看,对外方便协作与对内提升效率. 4.文档不是万能的,如果文档查看对象看不懂,就没任何意义.我喜欢当面沟通,因为能避免大部分文档的局限性 规范 一.字体 我个人设计时按照iOS设计尺寸 iPhone6(750px*1334px)来进行页面的设计.在iOS开发中iPhone4.5.6.7是共用一套字体规范.在设计中按iPhone6设计版尺寸(750px*1334px)中适

网页设计中ps切图注意问题

最近工作中老是用到ps切图,然后高手说我切图做的不好,在此去网上找了点材料汇集起来,作为参考: 网页设计的切图,最好先用PS做出效果图,然后进行切图.   一.切图的原则:  1.图切的大小越小越好. 2.图切的数量越少越好. 那对于一整张图来说,同时达到这两个原则是相互矛盾的,所以一个网页差不多切成20-30个图就可以了,这样网页的加载速度是不会受影响的.  二.切图的技巧:  1.一行一行的切图.  2.背景的切成小条.  3.不能分开的不分好了,选行的时候要注意怎么样合理.  4.切图的时

切图及效果图管理

前言 设计师和程序猿沟通总是需要花费不少时间,并且很多时候因为没有规范可依最终导致设计师修改设计或切图(开发童鞋一般比设计师更强势).凡是这类问题都可以通过规范来改善和提高效率.网上很多编码规范和设计规范,但是缺乏程序猿和设计师之间沟通的规范.下面我和大家分享一下目前我工作中程序猿和设计师的沟通规范--切图命名及切图管理.如果你有更好沟通规范欢迎留言分享,也可以加群沟通:196761677.311536202. 命名规范 目前存在的问题 设计师不知切图如何命名,尤其是图片多了之后. 设计师不知道

【转】APP界面切图命名和文件整理规范

转自:http://www.chinaz.com/design/2015/0908/443732.shtml 规范的命名方式可以提高客户端程序员的开发效率和团队协作.个人觉得标识符命名原则:尽可能的用最少的字符而又能完整的表达标识符的含义. 切图命名英文缩写三个原则: 1 较短的单词可通过去掉"元音"形成缩写 2 较长的单词可取单词的头几个字母形成缩写 3 此外还有一些约定成俗的英文单词缩写. 第一部分:iOS  APP界面设计切图命名规范 以上切图命名规范信息图来源:http://w

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

转【iOS设计】一款APP从设计稿到切图过程概述

这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱.1 Part 1 项目立项 文件结构 项目名称v1.0 -> 01_源文件psd 02_效果图jpg 03_标注图png 04_标注源文件 05_切片资源png 原型.rar 工具: 界面设计:PS, AI 标注:PxCo

iOS界面设计切图小结

iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面 实际设计时按: iPhone4.4s:640px*960px iPhone5: 640px*1136px iPad:1536px*2048px (2) 图标: 1024px*1024px 圆角180px 提交1024px*1024px 方角 png格式图片 2.图形部件及字体 (1) 为显示清晰 所有图形部件尺寸必须为偶数 样式中阴影.发光.描边的数值也必须为偶数 (2) 为方便用户点击 所有可点击的部件需大于88p

一款APP从设计稿到切图过程全方位揭秘 Mark

纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸