移动端 APP设计-笔记整理(设计规范-IOS&Android系统)

目录

1、ios系统设计规范

ios规范

ios界面设计尺寸及栏高度

ios界面设计尺寸

ios字体规范

ios图标尺寸

2、android系统设计规范

Android尺寸规范

Android字体规范

3、设计师要如何出图

4、设计师如何做适配

设计适配

标注、切图工具

小建议

---

1、ios系统设计规范

ios规范

我们知道目前 ios系统也有很多种型号，当设计师去做设计的时候，要去考虑它们的不同尺寸，

因为这些东西可能会影响到我们在做设计过程当中它的界面布局，如：标签栏、状态栏、导航栏等它们之间的不同尺寸。

我们需要从这几个方面进行介绍

 

ios界面设计尺寸及栏高度

首先，我们在做设计的时候，我们目前常见的几种尺寸，如下：

这几种尺寸是目前我们需要适配的。

我们来看一下对应的这几种尺寸，它的状态栏、导航栏、标签栏的数值

这里 iPhone 5 也称之为 iPhone SE，其中 iPone X 标签栏多了一个数值102，它是虚拟的 home按键区，这块区域是不允许在里面做一些设计的，我们要注意。

 

ios界面设计尺寸

然后我们介绍了那么多的尺寸，但是我们在做设计的时候，如何定义我们的画布大小呢？如果是在 PS 里面进行作图，我们一般是以 750*1334 这样一个尺寸进行设计。Sketch 或者是 XD 一般以 375*667 或 375*812 的尺寸去进行设计。

 

ios字体规范

ios 常规的一个字体，以 ios 11.4.1为例

 

ios 字号使用建议

导航文字一般用 34-38px，标题文字一般用 28-34px，正文文字一般用 26-30px，

辅助性文字或不太重要的文字一般用 20-24px，Tab bar 文字也就是我们标签栏上面的，一般用 20px

 

ios图标尺寸

建议做一个 1024*1024 就可以了，让它自动去适配

 

2、android系统设计规范

Android尺寸规范

android被各种厂商进行了定制，出现各种各样的版本，具体的尺寸像状态栏、标签栏、导航栏这里就不做统计了，因为每家厂商都不太一致。我们需要从屏幕密度来设计规范

其中在 ios系统里面说的尺寸 750*1334，它对应的是 Android系统里的 320dpi (720*1280)。

 一般以 720*1280 去做效果图设计稿，因为它换算相对比较方便，适配容易。

 

Android字体规范

Android字体规范，我们以 9.0进行举例

 

3、设计师要如何出图

有关切图的额外点或细节点，就需要大家自己去调整了。

 

4、设计师如何做适配

设计适配

 

如果是 Android切图，有的可能需要一些对应的 dpi 特殊切图。

 

标注、切图工具

cutterman： 切图工具

马克鳗： 标注工具

像素大厨 PxCook： 切图、标注工具。本地操作，在线操作需要收费。

蓝湖：免费在线标工具，减轻了设计师的工作量，设计师只需要上传标注出来的切图到蓝湖上，供开发查看标注、下载切图。

 

小建议