发布：2021/5/5 19:43:54作者：管理员 来源：本站 浏览次数：1609
先来看看各种iPhone的尺寸和分辨率，这张图写的很清楚。
| 设备名称 | 屏幕尺寸 | PPI | Asset | 竖屏点（point） | 竖屏分辨率（px） |
|---|---|---|---|---|---|
| iPhone X | 5.8 in | 458 | @3x | 375 x 812 | 1125 x 2436 |
| iPhone 8+, 7+, 6s+, 6+ | 5.5 in | 401 | @3x | 414 x 736 | 1242 x 2208 |
| iPhone 8, 7, 6s, 6 | 4.7 in | 326 | @2x | 375 x 667 | 750 x 1334 |
| iPhone SE, 5, 5S, 5C | 4.0 in | 326 | @2x | 320 x 568 | 640 x 1136 |
| iPhone 4, 4S | 3.5 in | 326 | @2x | 320 x 480 | 640 x 960 |
| iPhone 1, 3G, 3GS | 3.5 in | 163 | @1x | 320 x 480 | 320 x 480 |
| iPad Pro 12.9 | 12.9 in | 264 | @2x | 1024 x 1366 | 2048 x 2732 |
| iPad Pro 10.5 | 10.5 in | 264 | @2x | 834 x 1112 | 1668 x 2224 |
| iPad Pro, iPad Air 2, Retina iPad | 9.7 in | 264 | @2x | 768 x 1024 | 1536 x 2048 |
| iPad Mini 4, iPad Mini 2 | 7.9 in | 326 | @2x | 768 x 1024 | 1536 x 2048 |
| iPad 1, 2 | 9.7 in | 132 | @1x | 768 x 1024 | 768 x 1024 |
最新设计指南推荐：
- IOS11设计指南
- 超全面的UI设计规范整理汇总（包含iPhone X适配）
- 为iPhone X设计， iOS 11设计指南
- iOS 11 设计中值得关注的 UI 设计细节
- 「译」苹果官方 iPhone X 人机界面指南
- 手把手教你如何适配 iPhone X
- 从iOS 11看怎样设计APP图标
- iOS 11 vs 10: UI和交互全面对比分析
- 最新版IOS 11设计规范，官方源文件下载！
- facebook出品的iOS 10 GUI (iPhone)源文件
虽然现在出来了Iphone X ，但是我们在工作中还是会按照750*1334来设计，虎哥总结一个精简版的设计流程方法，按这个做法就可以展开工作。
现在做设计稿主要是用到PS、SKetch（mac电脑）、XD这3个都可以，鉴于大部分人没有mac电脑，目前很多设计师还是用的PS在工作，XD的出现预计要爆发一波，win10系统可以用上XD啦。
这里以PS工具设计IOS界面
画布尺寸：
新建750×1334 分辨率72，像素/英寸。
常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
字体：
中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。
app所用的字体大礼包下载（虎哥整理的）
ios开发里单位是pt
750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
界面上的间距和元素尺寸：
以偶数为单位，不清楚的可以截图量大公司的APP界面作为参考。
750 x 1334 设计稿尺寸：
状态栏高度：40 px
导航栏高度：88 px
标签栏高度：98 px
设计稿实时预览：
安装一个Ps Mirror可以在iphone上实时观看效果。
主流标注工具：
其他标注工具：
- 马克鳗
- PxCook 像素大厨
- Parker标
界面的图标切图：
启动图标：
做1024×1024尺寸，一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
引导页：
值得注意的是引导页切图需要单独设计多套（640×1136、750×1334、1125×2436、1242×2208）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
适配方法3个原则：（不清楚的在网站搜索适配2字）
- 文字流式
- 控件弹性
- 图片等比缩放
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
干货资料：
facebook出品的iOS 10 GUI (iPhone)源文件
可以看看下面这几篇文章：
- 三分钟搞清iPhone X 设计尺寸和适配
- 移动端界面设计之尺寸篇（淘宝版）
- iPhone6 & 6 Plus 视觉设计适配说明
- 新手福利！超全面的UI设计切图规范
- UI适配攻略·教程④一稿配双平台
- h5移动端页面设计学习文档
- Dribbble 2016十大设计趋势总结
- 图标设计的三个小原则
- 新设计趋势来临，解读 iOS 10 设计指南
- 一份详尽全面的UI设计字体与排版指南
以PS工具设计安卓界面。
画布尺寸：
如果想一稿适配ios，那就新建720×1280 分辨率72，像素/英寸。
如果单独设计安卓MD新规范的，那就新建1080×1920 分辨率72，像素/英寸。
720×1280常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
字体：
中文用Noto/思源黑体（是一个字体，叫法不同而已），英文用Roboto。
app所用的字体大礼包下载（虎哥整理的）
单位换算
距离单位是DP
文字单位是SP
720×1280尺寸的换算关系 1dp=2px，文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿，自己除以2就是dp和sp了。
1080×1920尺寸就是1dp=3px，文字1sp=3px
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
界面上的间距和元素尺寸：
最新规范MD的做法：
8dp原则 栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。
常见一般常用做法：
直接把ios的设计稿照搬过来，只不过状态栏，导航栏，标签栏按照安卓的来。
720 x 1280 设计稿尺寸：
状态栏高度：50 px
导航栏高度：96 px
标签栏高度：96 px
设计稿实时预览：
安装一个Ps Mirror可以在安卓手机上实时观看效果。
标注工具：
- 马克鳗
- PxCook 像素大厨
- Parker标
- 一键标注神器－zeplin
- 摹客iDoc
标注的时候，如果是720×1280尺寸设计的，就选对应的xhdpi，如果是1080×1920尺寸设计的，就选对应的xxhdpi。
界面的图标切图：
用Cutterman选中下面所示，根据需要选择不同分辨率的导出。
界面中重复利用的资源切图需要做成点9图片：
主要是一些按钮，单色或半透明的背景块。图标不用做点9。
启动图标：
做1024×1024尺寸，安卓对图标的样式没有要求，你可以做各种形状都行，一般做方形无圆角的，各家手机厂商的定制系统会自己加圆角。
然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
引导页：
值得注意的是引导页切图需要单独设计多套（480×800、720×1280、1080×1920）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
适配方法3个原则：（不清楚的在网站搜索适配2字）
- 文字流式
- 控件弹性
- 图片等比缩放
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
干货资料：
