设计规范 IOS&Android系统

设计规范 IOS&Android系统

1.IOS系统设计规范

2.Android系统设计规范

3.设计师要如何作图？

4.设计师如何做适配？

​ IOS规范

​ ios界面设计尺寸及栏高度

​ PS 750 * 1334/1624 2倍图

​ XD/Sketch 375 * 667/812 1倍图

IOS界面设计尺寸及栏高度
	SE	6/7/8	6/7/8 plus	X
状态栏	40	40	60	132
导航栏	88	88	132	132
标签栏	98	98	147	147
	2倍图	3倍图		102

IOS界面设计尺寸

​ 750 * 1624/1024

IOS字体规范

​ 中文字体：苹方黑体

​ 英文字体：San Francisco

字号使用建议

（这个不是硬性规定，根据视觉效果前斟酌使用）

​ 导航文字 34-38px

​ 标题文字 28-34px

​ 正文文字 26-30px

​ 辅助文字 20-24px

​ Tar bar文字 20px

IOS图标尺寸

​ 图标尺寸建议

​ APP应用图标，建议使用1024 * 1024尺寸去做，逐级缩小去应用到各种场景中。

APP界面设计中的常见规范

1、全局边距/卡片间距

​ 根据不同的产品气质采用不同的边距。常见的全局边距有32px、30px、24px、20px等等。 @2X

​ 通常左右边距最小为20px，不建议比20还小，否则会使界面内容过于拥挤；30px是非常舒服的距离，是绝大多数应用的首选边距。

​ 卡片间距

​ 通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px.，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

2、APP内容布局

​ 列表式布局和卡片式布局

​ 列表舒适体验的最小高度是80px，最大的高度要视内容的多少而定。

​ 自如110px 唯品会106px

​ 卡片式布局：相互独立

​ 双栏式的卡片布局

​ 图片设计比例

​ 常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618等。

3、界面中图片设计比例

常见的APP界面元素样式

1、启动页/闪屏

​ 引导页、闪屏页

常见的类型：

​ 品牌展示型：加强用户对品牌的直观映像，拉进用户与用户之间的距离。均包含三大要素：LOGO、品牌、名称、Slogan.

​ 扩展定制性

2、搜索样式

​ 一级Tab、顶部搜索、搜素icon、隐藏式搜索。

3、提醒样式

​ 弹窗的形式

​ 轻度提醒：自动消失，用户无需操作

​ 中度提醒（提示栏）：不自动消失，用户不需要选择，可以忽略。

​ 中度提醒（浮层）：不自动消失，用户不需要选择，可以忽略。

​ 重度提醒（对话框）：用户需要勾选或者选择。

​ 重度提醒（功能框）：用户需要勾选或者选择。

​

APP设计注意：

视觉传达型问题：

​ 统一的图标设计风格

​ 图标大小的视觉平衡

​ 优化你的分割线

​ 合理运用投影的颜色与透明度

​ 不要过度装饰，让界面更简洁

​ 图片比例&视平线的统一

​ 控制好界面的配色数量

​ 合理的进行对比

​ 提高配图的质量

​ 明确表达图片的含义

​ 正确的表达按钮的属性

​ 正确的处理文字排版之间的关系

​ 线条与色块分割的合理运用

​ 提前预估信息呈现的最大价值

​ 运用提示符提高用户的阅读效率

​ 布局层级分明，突出重点

​ 信息布局符合常规的阅读习惯

​ 相同界面下的圆角&直角的统一