移动端界面-IOS设计尺寸

PS工具设计IOS界面

---

画布尺寸：

新建750×1334  分辨率72，像素/英寸。

 

常见的字体大小：

24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。

 

字体：

中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。

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上实时观看效果。

 

标注工具：

1.马克鳗

2.PxCook 像素大厨

3.Parker标

3.一键标注神器－zeplin

 

界面的图标切图：

用Cutterman选中@2x @3x导出。

启动图标：

做1024×1024尺寸，一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

交接给程序：

最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。

 

引导页：

值得注意的是引导页切图需要单独设计多套（640×1136、750×1334、1242×2208）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。

 

适配方法3个原则：（不清楚的在网站搜索适配2字）

1.文字流式

2.控件弹性

3.图片等比缩放

 

测试界面：

程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。

 

干货资料：

facebook出品的iOS 10 GUI (iPhone)源文件

可以看看下面这几篇文章：

      

1.三分钟搞清iPhone X 设计尺寸和适配

2.移动端界面设计之尺寸篇（淘宝版）

3.iPhone6 & 6 Plus 视觉设计适配说明

4.新手福利！超全面的UI设计切图规范

5.UI适配攻略·教程④一稿配双平台

6.h5移动端页面设计学习文档

7.Dribbble 2016十大设计趋势总结

8.图标设计的三个小原则

9.新设计趋势来临，解读 iOS 10 设计指南

10.一份详尽全面的UI设计字体与排版指南