App界面交互设计规范思维导图分享

编辑by脆脆鲨

交互设计是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求。接下来小编给大家带来的是交互设计的思维导图。

一、为什么用思维导图梳理交互设计

在梳理交互设计的相关内容时，一般会用摘录已经注释的方式从上往下依序说明相关知识内容。而利用思维导图工具梳理交互设计，则可以结合思维导图工具的特点在整体在基础上系统性地梳理交互设计的相关内容，以便逻辑有序地展开梳理，并呈现各知识点之间的逻辑关系。

当然了，除了交互设计的思维导图外，思维导图还可用于其它诸多场景。如读书笔记、个人规划、工作总结、旅行清单等。更多的知识点也可以在【树图网-帮助中心-职业技能】中找到哦~

二、如何用思维导图梳理交互设计

思维导图作为一种以层级特点梳理发散性内容的工具，首先需要确立好梳理内容的“中心主题”，即【交互设计】梳理。随后围绕“中心主题”梳理与之相关的“分支内容”，即交互设计的相关知识点内容。在利用思维导图工具梳理时，注意各层级节点之间的的逻辑关系，有序地梳理各节点内容。小编在此给大家分享一张详细的思维导图，一起来看看吧～

三、如何画交互设计的思维导图

想要绘制交互设计的思维导图，通常可以使用树图思维导图进行，这是一款适用于电脑端绘图的工具，打开编辑器后将需要梳理的内容填充至节点即可简单制图，同时还带有诸多“节点样式”与“主题风格”功能辅助绘制精美好看的思维导图。是一款简单好用的思维导图绘制工具。下面给大家简单分享用树图思维导图绘制思维导图的方法。

（1）首先通过树图思维导图工具【新建文件-选择合适的结构】并进入到对应的编辑页面；

（2）接下来以层层递进的方式将需要梳理的交互设计相关内容呈现至节点。梳理基本内容；

（3）随后还可以利用插入图标、备注、链接、关系线、概要等功能进一步思维导图的内容；

（4）而后还可以试着借助主题、样式、一键美化等相关功能对思维导图进行适当的优化处理；

（5）当思维导图绘制完毕后，直接将图示“保存”至账号云端，或“导出”为png、pdf、jpg等格式即可。

四、大纲

App界面交互设计规范

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

页面布局规范

注意

页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。

规范

安卓

安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件

IOS

IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件

备注：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等

背景色规范

分为：重要、一般、弱。

标准色重要

重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；

而黑色用于重要级文字信息比如标题、正文等。

标准色一般

都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。

标准色较弱

普遍用于背景色和不需要显眼的边角信息。

标准字规范（字体颜色、大小）

分为：重要、一般、弱。

这里主要规范标准字的大小，标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息

标准字重要

大字号普遍用于大标题、top导航，较小字号用在分割模块的标题上。

标准字一般

主要用在大多数文字，比如正文。

标准字弱

普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明

界面元素间距

效果

简洁整齐，条理清晰感

要求

界面元素的排版和间距设计

要注意考虑适配不同的屏幕分辨率

备注

一般解决方案有据屏幕等比放大缩小间距，或者固定某些界面元素的间距，让其他空间留空拉伸。为了满足屏幕分辨率较大的设备，有时甚至需要改变APP界面的页面布局。

弹层规范

注意

分别设计安卓和ios的弹层

ios大多操作弹层由底部弹出

安卓直接显示操作再页面中央

规范

弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发；

提示性弹层：弱提示性的应用系统的token飘字提示即可；

需要强提示可以使用取消、确定的模块弹层；

更强提示而且弹层需要承载一定操作的使用强引导弹层，右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

Loading规范

效果

增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感

规范

loading动画除了常规的菊花还可以考虑使用npc，让APP更生动、活泼；

或者使用logo口号加强APP的品牌形象。

图标/按钮规范

注意

要注意安卓和ios平台需求不同的大小和不同的文件格式

安卓需要720*1280px标准页面的png图标格式

ios需要3个尺寸320*（1-3）倍图的图标pdf文件。

规范

图标

根据不同的功能需求设计不同的状态：如常态、选中态、点击态等

按钮

按状态分有：常态、点击态、不可点击态

按钮规范因不同功能和场景需要，设计不同的样式和颜色，在尺寸上也分有：长、中、短；而且按不同手机平台长中短尺寸也注意有所不同。

页面加载失败、页面为空展示

效果

规范

主要有：NPC、文案、按钮

要注意根据不同的场景显示不同的NPC和文案。