移动端界面设计之尺寸篇（更新）

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

 

标注工具：

1. 马克鳗
2. PxCook 像素大厨
3. Parker标
4. 一键标注神器－zeplin

 

界面的图标切图：

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

 

启动图标：

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

 

交接给程序：

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

 

引导页：

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

 

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

1. 文字流式
2. 控件弹性
3. 图片等比缩放

 

测试界面：

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

 

干货资料：

能够看看下面这几篇文章：

1. 移动端界面设计之尺寸篇（淘宝版）
2. iPhone6 & 6 Plus 视觉设计适配说明
3. 新手福利！超全面的UI设计切图规范
4. UI适配攻略·教程④一稿配双平台
5. h5移动端页面设计学习文档
6. Dribbble 2016十大设计趋势总结
7. 图标设计的三个小原则
8. 新设计趋势来临，解读 iOS 10 设计指南
9. 一份详尽全面的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能够在安卓手机上实时观看效果。

 

标注工具：

1. 马克鳗
2. PxCook 像素大厨
3. Parker标
4. 一键标注神器－zeplin

标注的时候，若是是720×1280尺寸设计的，就选对应的xhdpi，若是是1080×1920尺寸设计的，就选对应的xxhdpi。

界面的图标切图：

用Cutterman选中下面所示，根据须要选择不一样分辨率的导出。

 

界面中重复利用的资源切图须要作成点9图片：

   

主要是一些按钮，单色或半透明的背景块。图标不用作点9。

 

启动图标：

作1024×1024尺寸，安卓对图标的样式没有要求，你能够作各类形状都行，通常作方形无圆角的，各家手机厂商的定制系统会本身加圆角。

而后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

 

交接给程序：

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

 

引导页：

值得注意的是引导页切图须要单独设计多套（480×800、720×1280、1080×1920）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。

 

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

1. 文字流式
2. 控件弹性
3. 图片等比缩放

 

测试界面：

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

 

干货资料：

 

能够看看下面这几篇文章：

1. 安卓1080P界面设计规范解读
2. 6个技巧帮你把IOS的UI转换成安卓！
3. Material Design 安卓5.1L （UI kit包下载！）
4. 每天喊着学UI,知道安卓和iOS的区别吗?
5. UI设计师不可不知的安卓屏幕知识

最后说句：“对界面上的字号，间距不清楚的，多动手去截图，量一量优秀APP界面，多分析找规律。”

 

虎哥整理。

2016年12月10日更新。

 

转载请注明：学UI网 » 移动端界面设计之尺寸篇（更新）