登录注册
最新博客
最新资源下载
移动端交互规范：告别低效，做真正的设计！
勿忘初心2018-10-26 10:59此文已由作者杨杰授权网易云社区发布。
欢迎访问网易云社区，了解更多网易技术产品运营经验。
作为设计师的你，
是否会在一些设计细节上疏漏犯错，踩坑被吐槽？
是否总遇见相似需求，一遍又一遍地重复设计浪费精力？
是否发现每个产品对于相同的场景也各执一套方案，难以培养用户的习惯？
其实这些问题是每个设计师都在面临的，而今天我们就要解决这个问题。苹果首席设计师Jonathan Ive说过：“意味深长与历久弥新之美，蕴涵于简约之中，于清晰之中，于高效之中。真正的简约远不止是删繁就简，而是在纷繁里建立秩序。” 因此，解决这些问题的方案就是为网易的设计“建立秩序”。
在网易，上至老板下至员工，对于用户体验的重视都有口皆碑。作为网易人，我们心中都有一种称为“情怀”的自许。
因为是网易，所以我们想要的不是很好，而是更好；因为是网易，所以我们不仅需要设计师关注用户体验，还需要所有人都知晓自己能为提高用户体验做些什么。
UEDC号召全公司40+位有多年经验的交互设计师，历时60+天，完成了这份《网易移动端交互规范》。涵盖了全局规范、导航相关、通知反馈、基本组件、搜索相关、异常处理、登录流程和经典场景8个章节。这8个章节中包含的模块都是交互设计中最为通用和常用的，可以帮助新人快速学习并在日常工作中起到指导作用。为了使用更加方便，我们还提供了Axure源文件和组件库文件供设计师直接拖拽使用。
在此，主要希望跟大家分享一下这份交互规范的能够帮助大家做些什么。
交互规范能解决什么问题?
1、帮助新人快速上手，避免犯错，保障产品质量。
以极端和异常情况处理为例：用户只有极小概率会遇到极端异常的场景，但设计师却需要考虑所有可能发生的情况以保证产品的最佳体验。对于一个新人设计师来说，很难把所有的错误情况考虑完整，如果没有明确的指导，需要长时间的积累、磨合和返工才能做出一份完整的设计。
通过设计规范，可以把全公司所有资深设计师的设计经验沉淀下来并且高效传播。新人在初期通过参照规范进行设计，既可以快速学习、避免疏漏，以最小的试错成本和时间成本抹平和资深设计师之间的鸿沟；又可以保障网易系产品质量。
2、减少重复工作，提高设计师及整个团队工作效率。
网易系的产品线不止百条，每个产品除了独有的业务功能外，还包含大量通用的需求模块：如异常状态、登录注册、添加图片等。在没有统一规范的情况下，每个产品的设计师都需要分析需求、列举使用场景、梳理交互流程、设计表现样式、撰写交互细节以设计出一套完整的解决方案。以上图的无网络为例，无网络的情况是每个产品都会遇到的，并且每个产品都有不同的无网络提示。这耗费的不仅是交互设计师的时间，更是开发、测试、以及整个企业的精力……
通过设计规范，可以为这些通用的场景或基本组件制定规则，当设计师遇到这类需求场景时，直接从规范中选择使用，不必再额外设计，从而可以将精力节省出来放到更具创造性和价值的地方中去。
3、统一网易系产品交互体验，降低用户学习和认知成本。
以最为常见的登录注册界面为例，这是用户接触产品的第一印象。网易系各个产品的登录界面中，注册入口、快捷登录入口、找回密码等入口的位置和表现样式都不一样。无形地增加了用户的学习成本。
通过交互规范将通用的场景和元素统一起来后，短期效益是能够降低用户的学习和认知成本，提升使用体验；长远来看，还能够塑造更加深刻的网易系品牌形象。
交互规范有什么效果？
为了确保这是一份真正可用的规范，而不是几句高高挂起的条例。在把这份交互规范正式投入使用前，我们试图先去了解和验证规范的可行性。
1、第一个途径是看业界的已有的规范案例。
首先是系统层面；
早期的手机/网站几乎都是没有经过设计的，毫无体验可言。但随着iPhone的面市，为整个移动端的使用和交互方式制定了基本准则，从此手机迎来智能化时代，手机从单纯的通讯工具变为了无法离手的“私人管家、娱乐设备”……安卓端的Material Design也是一样，它不仅是一册设计规范，更是一门设计语言，为众多安卓应用打造了统一的使用体验。
早期的手机/网站几乎都是没有经过设计的，毫无体验可言。但随着iPhone的面市，为整个移动端的使用和交互方式制定了基本准则，从此手机迎来智能化时代，手机从单纯的通讯工具变为了无法离手的“私人管家、娱乐设备”……安卓端的Material Design也是一样，它不仅是一册设计规范，更是一门设计语言，为众多安卓应用打造了统一的使用体验。
iOS Human Interaction Guide: https://developer.apple.com/ios/human-interface-guidelines/
Android Material Design: https://material.io/guidelines/
企业层面上；
为了保证统一的体验，微信通过设计指南来指导接入其的第三方应该如何设计。支付宝的antdesign平台不仅规范了蚂蚁金服旗下所有产品以保证统一体验，还将此规范推广到了公众的视野，鼓励其它产品也能以自己为标准进行设计，从而推广自己的设计理念。
为了保证统一的体验，微信通过设计指南来指导接入其的第三方应该如何设计。支付宝的antdesign平台不仅规范了蚂蚁金服旗下所有产品以保证统一体验，还将此规范推广到了公众的视野，鼓励其它产品也能以自己为标准进行设计，从而推广自己的设计理念。
Ant Design：https://ant.design/index-cn
从产品而言；
Airbnb一直是业界设计的标杆。其产品体量虽大，但从界面风格到服务体验都非常统一，多是归功于产品初期就奠定好的规范基础。
Airbnb一直是业界设计的标杆。其产品体量虽大，但从界面风格到服务体验都非常统一，多是归功于产品初期就奠定好的规范基础。
Airbnb Design：http://airbnb.design/building-a-visual-language/
2、第二个途径是小范围地对接了个别产品进行了试用。
Stone产品的设计师在一次改版中对交互规范进行了试用。设计师是这样使用并评价这份规范的：
“在作为普及教材通篇阅读时，阅读体验是非常好的，能够快速定位到需要的内容。”
“在设计时参考对应模块后，有些细节可以不需要自己去再次思考，还能避免遗漏，能够有效提高文档质量。”
“登录流程非常实用，直接复制粘贴过来就能用了，减少了工作量。”
“对照交互规范做自查时发现了已有产品的很多问题，帮助快速产生了优化清单。”
所以，无论是从业界其它已经将规范运用到设计的案例来看，还是从网易内部的小范围试用来看，交互规范的投入使用对设计师甚至整个团队都是有益无弊的。它既能够保障设计质量，又能够大大提高工作效率，让设计师把精力节省下来投入到更有意义的创作中去。
交互规范的庐山真面目
如何使用交互规范？
交互规范适用于设计师的各个职业阶段；也适用于产品的各个生命周期。
1、入门阶段。
入门阶段主要建议阅读纸质版或pdf电子版的交互规范。新人入职时，可以把交互规范当做教程进行阅读。特别是自己在实践中没有涉及过的模块，通过阅读规范，可以对交互说明如何撰写、各个基本模块如何使用产生初步了解。让新人在设计之初快速上手，不至于犯低级错误。
2、制作阶段
具体制作交互稿时，应该使用Axure源文件版本的交互规范文件（.rp）和交互组件库文件（.rplib）。首先在目录中检索有没有能够直接拿来使用或相关的模块，若有，则可以直接复制粘贴进自己的交互稿中，或在交互规范的基础上根据当前的业务情况进行微调，请注意规范中提供的Axure文档是由Axure8版本进行制作的，在使用过程中请注意版本兼容问题。
3、成品阶段
除了制作阶段，对于已经设计完成并且上线的产品，也可以对照交互规范进行自查。自查时在交互规范中找到与产品对应的模块进行对比，检查使用场景是否符合、流程是否有疏漏、交互样式是否有更好的表达。对照后将问题记录下来并归入未来的优化排期。
其实交互自查的使用场景是在规范试用的过程发现的。使用规范的设计师强烈反馈，认为把这份交互规范在他检查自己已有设计是否有问题时起到了非常大的作用。
如何执行交互规范？
1、执行
为了提高全公司所有交互设计师的产出质量和效率，同时为网易所有产品打造更加统一的使用体验。希望所有设计团队和设计师都尽快把交互规范使用和执行起来，规范小组也会进行跟进。
- 各部门向规范组提交APP的改版排期
- 改完且上线前向规范组提交，检查是否符合规范
- 如改版有问题，会进行沟通，再次迭代
希望每个设计师在做设计的时候多思考，规范只是列出了最为通用常用的场景下应该怎样去设计，并不是全部东西都强制规范，如果有不合理的地方，或者不适合自己当前业务场景的地方，需要自己思考和衡量。
2、奖励
希望大家踊跃对交互规范提出建议和意见。提出建设性意见并被采纳的同学可能会获得几千元不等的奖金。
网易云免费体验馆，0成本体验20+款云产品！
更多网易技术、产品、运营经验分享请点击。
分享至：
