App界面交互设计规范（转）

在上篇《APP界面设计风格》肯定下来后，产品经理（兼交互设计）还不用着急将全部的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一块儿商议肯定设计规范先吧！

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

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

1、页面布局规范

页面布局

页面布局和交互规范上建议安卓、ios尽可能统一，这样能够避免安卓和ios分别设计一套稿子。固然土豪公司能够忽略这个建议，安卓和ios分别作专门的设计固然更好。在中小型项目来看，设计资源紧张的话能够考虑安卓和ios用同一个稿子，分别作相应的微调后输出适用安卓和ios不一样的尺寸要求就能够。

推荐使用mac矢量设计工具"sketch"。以ios平台的iPhone5的尺寸640*1136px做为标准尺寸设计。在界面设计完成后能够作相应的微调导出适用ios和安卓尺寸的稿子。这里能够首先统一设计稿输出规范：

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

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

界面坐标图实例

2、标准色规范

标准色规范

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

标准色实例

3、标准字规范

标准字规范

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

标准字实例

4、界面元素间距

界面元素间距

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

微信iPad版vs微信iPhone版

5、弹层规范

弹层规范

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

6、Loading规范

Loading规范

页面loading动画是APP界面必不可少的元素，增长loading能够给用户明确的反馈功能正在加载，减小用户在等待功能响应引发的烦躁感。另外loading动画除了常规的菊花还能够考虑使用npc，让APP更生动、活泼；或者使用logo口号增强APP的品牌形象。

次元社、闺蜜圈loading截图

7、图标/按钮规范

图标按钮规范

图标规范要注意安卓和ios平台需求不一样的大小和不一样的文件格式：如安卓须要720*1280px标准页面的png图标格式；ios须要3个尺寸320*（1-3）倍图的图标pdf文件。图标还应该根据不一样的功能需求设计不一样的状态：如常态、选中态、点击态等。

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

8、页面加载失败、页面为空展现

加载失败、页面为空

页面加载失败、页面为空能够统一规范为NPC、文案、按钮。要注意根据不一样的场景显示不一样的NPC和文案。

......

...

设计规范主要由设计童鞋来梳理，但必需要与前端开发、产品经理达成共识，严格遵照约定的规范，不然这个设计规范就毫无心义了。在制定设计规范过程当中，产品经理要积极主动充当桥梁角色组织设计师、前端开发一块儿制定设计规范，保证设计规范考虑的更切合实际、更全面、更完整。

#专栏做家#

鹰眼Eeyes，闺蜜圈产品经理，人人都是产品经理专栏做家。擅长产品策划，产品运营，项目管理。专一于移动社交方向，深度调研女性社交；关注O2O电商、智能硬件、物联网发展。厚积薄发，总结，升华中...

本文原创发布于人人都是产品经理，未经许可，不得转载。

 

转自:连接