经典知识：交互设计规范8大总结！附84页资料：《J 东交互设计规范》

本文3.8K字

文末84页“京东APP交互设计规范”

交互设计规范，简单的说就是用来指导设计师和开发者设计产品的一个系统。是对产品界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。

与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。

比如色彩规范，typography，导航范式，transition等等，如果不加定义和规范，那大家执行的时候很难一致统一。

具体可以去看看Google material design guidelines, 是目前市面上不多的优秀交互设计规范之一。

建立规范的三要素：

一、明确自己产品定位和目标 ；

二、规划交互规范的内容范围；

三、化简为繁，简洁易懂。

一、明白自己产品定位和目标

定位和目标会决定产品的风格甚至调性。是活泼、无厘头，还是严肃的。

比如我们的产品是定位于服务于外贸企业用户的工具，主要目标是帮助客户建立自己的外贸网站/寻找外贸客户/客户管理/外贸营销，简单来说就是建站-获客-管客-营销-转化。

那么所以我们的产品中需要最多的就是控件就是输入/搜索控件和各类表单图表，而且在控件的设计上不能设计操作性太复杂的控件（千万不要为了追求新奇炫酷而去设计比较少见的控件，否则不仅加大前端同学工作量，用户也不一定用的明白），不然就违背了快速操作反应的原则。

在这里建议大家可以参考阿里的Ant design交互规范。

二、规划交互规范的内容范围

不同的产品的交互规范范围内容不同，一般来说网页端产品的相对移动端产品内容更多，这是因为网页端产品的页面布局多样，交互控件和方式更为复杂。

To C网页产品比To B网页产品内容更多，因为To B产品目标明确，更注重使用效率，不会采用过于复杂和新颖的页面布局和交互方式。

通常规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、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、标准色规范

（这两个建议和UI设计师共同制定）、页面布局、工具、控件库、图表，在这里我的做法是先汇总出当前产品版本所具有的所有规范内容，再参照Ant design、Material Design、element等设计平台。

部分已有的规范内容进行升级再整理，同时根据使用场景和优使用频率，将控件分类和调整排序，这样基本上交互规范的框架就可以建立起来。

标准色规范

标准色规范：重要、一般、弱。

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

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

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

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

标准色实例

不同的颜色可以表达不同的感受，颜色上的对比也有很多，这个跟色彩构成有很大的关系。颜色对比主要分色相对比、明度对比和纯度对比。

一个网页是由很多个不同元素构成的，这些元素的重要性都不同，有些元素需要特别突出、有些元素彼此之间存在着联系，而另外的元素之间则一点关联性都没有。

如何去平衡元素中的等同和不同的元素特性，就显得特别重要，因为如果不能将这些元素在一个画面当中协调处理，这个画面便变得突兀。对比就是两个或更多个元素之间的不同。通过对比，设计师就可以创造出视觉趣味性，同时引导用户的注意力。

常见的对比有这么多的表现形式：

1) 色调上的明暗对比、冷暖对比等；

2) 形状上的大小对比、方圆对比、粗细对比、长短对比等；

3) 方向上的垂直对比、水平对比、倾斜对比等；

4) 数量上的疏密对比等；

5) 图片上的虚实对比、黑白对比等；

6) 事物的动静对比等。

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的品牌形象。

7、图标/按钮规范

图标按钮规范

图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式：如安卓需要720*1280px标准页面的png图标格式；ios需要3个尺寸320*（1-3）倍图的图标pdf文件。

图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。

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

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

加载失败、页面为空

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

设计规范主要由设计童鞋来梳理，但必须要与前端开发、产品经理达成共识，严格遵守约定的规范，否则这个设计规范就毫无意义了。

在制定设计规范过程中，产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范，保证设计规范考虑的更切合实际、更全面、更完整。

三、删繁就简

如果大家通过上述方法来进行设计规范整理，势必会得到一份体量更加庞大的交互设计规范文件，这个时候，设计师更多的需要根据自己的经验来进行删减（会合理删减的设计师才是优秀的设计师）。

哪些可以删减？哪些不能删减？

1、可以删减

举例来说：下面两个时间范围筛选器，能达成的筛选目的和作用是一致的，但由于长度不一样，上面的筛选器能适配的页面场景更多，所以可以直接把下方的时间筛选器删减。

2. 不可以删减

举例来说：下面两个选择器，两个表面上目的看起来都是进行选择项选择，但右边的选择器带有搜索框，适合选择项数据庞大时的进行搜索选择，左边的适合选择项数据量不大时进行直接选择，所使用的场景并不相同，所以不能进行删减。

好的交互规范不需要太多的文字说明，团队成员直接看图即可明白这个组件的交互方式（点击前、点击后、空数据、有数据、极限情况下等的交互样式），当然有些不好通过图稿表达的信息也必须需要文字说明辅助，但相比文字而言，大家更喜欢看的肯定是图片。(完）

附84页 “京东APP交互设计规范”

完整文档加管理员获取

分享本文到朋友圈，并截图

加微信领取资料/入群

   END  

喜欢这篇文章？点个“在看”支持一下！