跟随自己心之所向

让我欢喜让我忧的［小程序］设计指南

        还在电脑前埋头钻研APP UI的我，突然被公司的产品经理劝停，告知我它的出现——现在看来比设计更重要的，好像是先要好好了解一下这个名字很可爱功能很强大的小程序。毕竟，这些我绞尽脑汁自认为好独特，实际好没道理可循只是好花哨的APP UI界面最终要怎么设计，甚至这些设计要不要开发实现，还是一个未知呢。

        微信小程序设计指南发布了，对还没有开发App的初创公司来说，标准UI规范和交互示例框架被早早的准备好展现给初创者们参考甚至直接套用，可以节省很多时间，也可以减少很多开发成本以及用户使用的学习成本，甚至，我有理由相信，一个初级程序员，在没有UI，没有前端，只会写后台PHP，脑子有一个很好的产品idea，且你满腹梦想，你也可以通过接入API的方式完成自己的小程序，将梦想变为现实，想想还有点小激动呢。

       然而，对于UI设计师来说，这是个喜忧参半的事情。

1. 让我欢喜的

       当打开这篇设计指南时，我们可以看到微信UI设计师非常严谨清晰的设计原则，以及令人敬佩的用户体验至上的设计态度，我作为一个UI小白来说是得像微信学习的：

【友好礼貌的设计态度 】

【清晰明确的设计原则 】

      对于设计指南上首要提到的友好礼貌的设计态度和清晰明确的设计原则，我认为是微信这么多年能在国内众多产品中鹤立鸡群，拥有7.6亿用户及保持用户体验最优的保障。其实这不仅是是对于在微信生态系统内的设计要求，不论是Native App 还是web App都应该以这两点为准则，确定页面的重点，减少对用户有干扰的无关的设计元素，礼貌的展现产品内容，友好地引导用户进行顺畅的操作，清晰明确的告诉用户身在何处，下一步的操作如何又去往何处，为用户提供安全，愉悦的使用体验。

2. 让我忧桑的

       小程序的设计指南旨在微信生态体系内，建立友好，高效，一致的用户体验，简单来说，就是希望所有在小程序内的用户，界面都能在延续微信UI风格的基础上增加自己的需求，前提还是你不能破坏了由N个各种用户组成的小程序整体，真有点入乡随俗的感觉。或者可以说，你只能在它铺好的路上走，要走出自己的特色还真得花点功夫。

【固定统一的样式 】

1. 导航部分 导航部分可以根据自身需要设计，包括微信导航栏和添加页面内导航。不论哪一类，都应该考虑设计简单，清晰。

1.1微信导航栏

虽然可以根据需求自定义导航栏的颜色（能自定义不代表可以什么颜色都行，还是得在与微信UI原色和谐的基础上），元素内容为导航区／标题区／操作区。

1.2页面内导航－标签分页

标签分页栏可以根据需求放置在顶部或者底部，为确保点击区域，标签不可超过4栏，一个页面不应该出现一组以上的标签栏。选中状态默认为100%实色，未选中态有60%，选中状态的颜色可以自定义，当然，依旧需要考虑的是标签的实用性，可视性以及可操作性。

2. 加载部分

当出现页面加载时间过长的情况时，避免引起用户的不良情绪，在加载和等待处可以使用一些加载动画或提示，予以及时的反馈以舒缓用户的不良情绪。这时，就看设计的设计够不够友好且具创意了。在小程序中，主要考虑启动页加载和页面下拉刷新加载：

2.1 启动页加载

除了品牌LOGO的设计需要设计师花点心思之外，小程序好贴心的帮你把页面其他所有元素及加载进度指示都承包了呢，完全不用考虑启动页要怎么样设计最能脱引而出夺人眼球，因为除了你的品牌LOGO，大家都被“打扮”得相近一个模样。

2.2 页面下拉刷新加载

我曾经在下拉刷新加载动效上花费过不少时间，希望哪怕只是这几秒钟，也做出更有趣并且能给等待页面的人眼前一亮来点惊喜的加载效果，然而小程序霸道总裁的设定了下拉的交互样式（包括带有标签分页(Tab)页面的下拉刷新加载和深浅两套下拉样式）下拉刷新图标与下拉标识的配色捆绑，甚至标准加载动画也贴心备好，你只要小鸟依人的接受并按照它安排的来，妈妈再也不用担心你的加载效果会伤“大雅”了呢（一切还是以页面的可见性及可用性为出发点）

2.3 页面内加载

页面内容加载样式可以由开发者自定义，只要能简洁明了的让用户明白他得在这得稍等一会就行。但是，此时你心里想着随处可见随处派上用场的模态的菊花最好不要用在全局性操作下哦，因为你不能确保用户知道你这朵菊花指明的是哪里，避免引发用户的焦虑感。

3. 反馈和提示

3.1 页面反馈

除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。这里提到的反馈样式是针对功能进需求行区分设，计的对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示（Toast）、模态对话框或结果页面展示。

3.2 异态提示

这里比较强调的是比较常见的表单错误的情况，这类提示要及时告知用户表单报错，在表单顶部告知错误原因，并标注错误字段提示用户修改。关于报错的设计我也尝试过几种，个人看来，微信的顶部报错并标注粗婺字段提示依旧是最清晰明了，用户最直观能接受的方式之一了（反正比我的要好太多是真的我就不谦虚了哈哈）

4. 规范

微信提供的一套UI规范包括字体样式规范（字号，颜色），列表视觉规范，表单输入视觉规范，按钮使用原则及图标使用原则十分周到又对品牌独特性的影响不大，这里我就一笔带过了。（事实上，即便微信不提供规范，我也会想尽办法找到它以之为参照的）

       微信为了方便设计师的设计，在推出设计指南的同时，还提供了一套可供web设计和小程序使用的基础控件，建议设计师在设计时要时刻注意不同界面的统一性和延续性，能够带给用户最便捷的用户体验。    虽然有时候这些规范条框让我觉得不如在APP这片小天地里从头至尾的设计上来的爽快，但是初创公司以及作为UI小白的我来说，有个微信的大腿抱抱还是很激动很幸运的，让我不是盲目的埋头苦做，有规可循，也能避免很多不必要的设计漏洞。（ 因为样式可以套用我可以偷很多懒我会跟你说么 ）

       总的来说喜忧参半，喜更居多，人还是要有一颗感恩的心嘛。    这篇文章是懒癌患者的我第一次手动总结，尽管很多内容无非是再复述了一遍设计指南，也权当自己把吸收的庞大知识信息量找个地儿消化一下，毕竟，学习要有总结才能进步呀哈哈。