【干货】App交互规范

APP 设计规范指对 APP 界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。

APP 设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。
一、页面布局规范


页面布局

页面布局和交互规范上建议安卓、ios 尽量统一,这样可以避免安卓和 ios 分别设计一套稿子。当然土豪公司可以忽略这个建议,安卓和 ios 分别做专门的设计当然更好。在中小型项目来看,设计资源紧张的话可以考虑安卓和 ios 用同一个稿子,分别做相应的微调后输出适用安卓和 ios 不同的尺寸要求就可以。
推荐使用 mac 矢量设计工具 "sketch"。以 ios 平台的 iPhone5 的尺寸 6401136px 作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用 ios 和安卓尺寸的稿子。这里可以首先统一设计稿输出规范:
o 安卓(720
1280px):界面预览图、界面坐标图、标准界面的图标 png 文件
oIOS(640*1136px):界面预览图、界面坐标图、1-3 倍图矢量图标 pdf 文件
PS:界面坐标图指在设计已定稿的界面预览图上标注:界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等


界面坐标图实例

二、标准色规范
标准色规范:重要、一般、弱。标准色重要:重要颜色中一般不超过 3 种,这里的例子重要颜色之一红色需要小面积使用, 用于特别需要强调和突出的文字、按钮和 icon;而黑色用于重要级文字信息比如标题、正文等。标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。标准色较弱:普遍用于背景色和不需要显眼的边角信息。


标准色实例

三、标准字规范


标准字规范

文字是 APP 主要信息的表现,尤其新闻阅读、社区 APP 等制定标准的设计规范和良好的排版方式,用户使用 APP 也觉得毫无疲劳感,这一点很重要。标准字规范重要、一般、弱。这里主要规范标准字的大小,标准字要注意跟上文的标准色进行组合突出 APP 重要的信息和弱化次要的信息。标准字重要:大字号普遍用于大标题、top 导航,较小字号用在分割模块的标题上。标准字一般:主要用在大多数文字,比如正文。标准字弱:普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。


标准字实例

四、界面元素间距


界面元素间距

APP 界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距,或者固定某些界面元素的间距,让其他空间留空拉伸。为了满足屏幕分辨率较大的设备,有时甚至需要改变 APP 界面的页面布局。


微信 iPad 版 vs 微信 iPhone 版

五、弹层规范


弹层规范

弹层规范要注意分别设计安卓和 ios 的弹层,比如 ios 大多操作弹层由底部弹出,而安卓直接显示操作再页面中央,这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层 - 右上角更多按钮触发;提示性弹层:弱提示性的应用系统的 token 飘字提示即可;需要强提示可以使用取消、确定的模块弹层;更强提示而且弹层需要承载一定操作的使用强引导弹层,右上角提供关闭操作或者可以点击非弹层区域关闭弹层。
六、Loading 规范


Loading 规范

页面 loading 动画是 APP 界面必不可少的元素,增加 loading 可以给用户明确的反馈功能正在加载,减少用户在等待功能响应引起的烦躁感。另外 loading 动画除了常规的菊花还可以考虑使用 npc,让 APP 更生动、活泼;或者使用 logo 口号加强 APP 的品牌形象。
作者 Zero 知秋
勿忘初心,方得始终,初心易得,始终难守。