第三二章交互干货必收_ App界面交互设计规范

设计清单第32期：用时约3分

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

一、页面布局规范安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件

二、标准色规范标准色规范：重要、一般、弱。标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。

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

标准色较弱：普遍用于背景色和不需要显眼的边角信息。

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

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

标准字一般：主要用在大多数文字，比如正文。

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

四、界面元素间距

五、弹层规范注意分别设计安卓和ios的弹层，比如ios大多操作弹层由底部弹出，而安卓直接显示操作再页面中央，这样的交互搞作应该遵循各自平台的设计要求。

弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发；提示性弹层：弱提示性的应用系统的token飘字提示即可；需要强提示可以使用取消、确定的模块弹层；更强提示而且弹层需要承载一定操作的使用强引导弹层，右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

六、Loading规范动画是APP界面必不可少的元素，增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感。

七、图标/按钮规范如安卓需要720*1280px标准页面的png图标格式；ios需要3个尺寸320*（1-3）倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。

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

八、页面加载失败、页面为空展示页面加载失败、页面为空可以统一规范为NPC、文案、按钮。