小程序UI设计从入门到入土
读完本文大概需要15分钟，本文将详细解析小程序UI设计中的设计规范与常见问题。
摘要： 2017年第一批小程序上线，发展至今已经日臻成熟，UI设计师的工作内容又多了一项适配小程序。新的平台、新的规范、新的模式，可能会让一些刚入行的设计师有些理不清头绪。虽然网上有不少设计师的心得分享，但是也有一些知识点一带而过，造成盲区。本文将详细的讲述小程序设计的各个模块与常用组件的设计规范和小程序设计中的常见误区，让新手设计师有规可依，有范可矩。
关键词： 小程序概念、设计规范、常见问题解析
目录
一、什么是小程序
小程序的概念最早由张小龙于2016年提出的一个概念，全称是“微信小程序”，英文名为“Mini Program”，是一种基于微信生态圈、开发周期短成本低、不需要下载安装、即用即走的应用。
到现在为止，小程序不止微信一家独有，还有支付宝小程序、百度小程序、字节跳动小程序。还有2018年的小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加共十家手机厂商一起推出了快应用，虽然名字不同，本质上也是小程序。
互联网巨头对小程序的热捧，本质上是针对不同场景下，对用户时间资源的竞争。比如你本来每天4个小时用微信聊天刷圈圈、1个小时逛淘宝购物剁手手、1个小时看知乎谢邀人在美刚下机、2个小时看bilibili此生无悔奥利给，那么有了小程序，你就可以在微信上把所有事就干了，也就是8个玩手机时间全部贡献给了腾讯。
个人猜测，腾讯是想基于微信海量的用户基数来做OS的，对比下苹果的iOS，它们都有自家的开发语言、自家的认证与上架流程。如果将来真的会有腾讯OS，那么小程序的经验就是很不错的尝试。
BUT，梦想丰满现实骨感，因为微信的特殊性，小程序又有着非常大的限制，即没有关注、没有分享、没有外链。官方或许是通过这种方式来防止劣质小程序泛滥，但即使这样，小程序到今日，也已经有泛滥的趋势，优质的小程序屈指可数，粗制滥造的甚至山寨的小程序层出不穷。
二、小程序的主要特点
1.更加便利的跨平台开发。因为是基于微信环境，iOS、Android两个平台一次搞定。
2.上手快，学习曲线平滑。这是相对于开发而言，如果原本就熟悉Web开发，那上手速度会更快。
3.开发成本低。跨平台一套搞定、开发环境简单、容易学上手快、代码复用强、开发迭代周期短等特点，都会导致小程序的开发成本远低于native app。比如一款类似资讯类的软件，产品+前端+服务端+设计+测试+运维，光1.0版本的费用就得20万起步，而小程序版本只需要3-5万左右。当然还有报价更低的，几千块都有人敢报。曾经有个客户要求做一个服装订制的小程序，包括展示、预约、下单、支付、个人中心等模块，需求沟通了半天最后说预算只有5000，还说上一个他们找的人只要3000，这次加钱想做的高大上一点（强人锁男.jpg），最后婉言拒掉。
4.营销成本低。也就是推广费。普通app推广费每年动辄几十万上百万的，甚至用单价几十块的价格去批量买用户，更不用说想抖音快手猿辅导这种每年在电视台和各大综艺投入上千万甚至过亿的冠名费，才能获得大量的曝光机会。而小程序基于微信海量的用户基数，且可以一键直达，无形中大大降低了营销成本。
5.无需下载。当然这只是一套广告说辞，小程序本质也是需要下载（加载）的，只是得益于需要一次加载的数据少，以前限制是1M大小，现在是单个包2M（大项目支持分包加载，所有分包总容量最大是8M），说不定还没有app一张启动页大，能做到即开即用，即用即走，无需安装和卸载，不像现在的native app，动辄几十上百兆，第一时间就吓跑了对流量敏感的用户。
6.用户体验更好。这个用户体验是泛指使用体验，而非指设计师通常理解的交互体验。小程序体量小、核心功能交互路径短、不用安装和卸载、没有乱七八糟的外部跳转，省心省力省流量，特别适用于各种生活场景，如购物、餐饮、出行扫码。
7.官方标配热更新。简单来说就是当小程序冷启动时，会自动向微信后台请求新版本信息，如果有新版本，会马上触发新版本的下载。而不需要每次更新都需要重新打包交付应用商店审核，用户再通过应用商店再下载一个完整的数据包重新安装一遍。开发小哥哥乐开了花。
三、小程序、原生app、H5的优劣分析
Native APP(原生APP)、小程序、H5的优劣对比：
快应用、支付宝小程序、百度小程序、头条抖音小程序优劣对比：
四、小程序的设计规范及常见问题
基于微信小程序轻快的特点，微信官方也提供了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。
如果是熟悉APP设计流程的小伙伴，尤其是设计过iOS平台的软件，那么做起小程序肯定也是得心应手。小程序很多设计规范其实脱胎于iOS的设计规范。下面我将从常用UI组件开始分析讲解小程序各个常见组件的设计规范与用法。
4.1 设计尺寸与切图适配。
前面提过，小程序设计规范脱胎于iOS，所以设计师只需要以iphone6屏幕尺寸750x1334进行视觉设计即可，因为微信小程序以rpx为css尺寸单位，rpx可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx，因此在iPhone6/7/8设计稿上1px=1rpx。
而习惯用sketch为设计工具的设计师来说，可用单倍尺寸，即375x667的尺寸进行设计，设计单位为dp/pt，搭配蓝湖的自动标注，开发都能看得懂。（小程序只有宽度是有要求的，即375，但高度并不是定死的，这个取决于不同手机的屏幕规格，最好根据手上的测试机的高度来定）
对于切图，考虑到小程序的单个包容量为2M，官方文档建议尺寸为2倍图（相对于375x667的单倍尺寸而言），如果设计稿是以750宽度为准，切图可以按照1:1的做即可。如果想让图标更加清晰，也可以选择3倍图，但要控制切图的大小。
4.2 状态栏
根据小程序官方文档，状态栏是不需要设计的，因为状态栏是跟着各个手机操作系统走。如下图，②是内容区，①是小程序胶囊，状态栏无需设计。设计师只需要把Android和iOS两种状态栏组件根据需要取用即可。
下面链接提供sketch状态栏组件
链接: https://pan.baidu.com/s/1_8u138WZg6EmGj6gpJ9SAA 提取码: fwio
4.3 Navigationbar导航栏
微信官方对导航的要求是导航明确，来去自如。
导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。微信在小程序内现不提供统一导航栏样式，开发者可根据需要自行设计小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。
此外，很多有全面屏手势的操作系统还可通过界面边缘向右滑动操作，返回上一级小程序或微信页面。
下面从颜色、样式、布局等方面详细介绍下导航栏。
4.3.1 导航栏高度
官方给的数据是iOS系统44dp，Android系统56dp。也就是适用区间建议44dp-56dp为宜，这个可根据实际情况进行调整。
4.3.2 标题位置与字号
标题可以居中也可以居左，也可以没有（通常会放置searchbar搜索框），也可以用图片。
标题字号采用iOS的标准，即17dp。
4.3.3 导航栏的颜色。
导航栏颜色是完全可以自定义的，既可以定义为纯色又可以定义为渐变，也可以定义为背景图片。不过对应的，导航栏的文案和icon以及小程序胶囊的颜色也要根据情况不同进行适当的色值调整，以保证信息良好的阅读性。
4.3.4 搜索框的位置
搜索是用户刚需，所以搜索框的位置一般放置在显眼的位置。与native app的操作栏相比，小程序的右侧多了一个小程序胶囊，那么搜索框为了避开小程序胶囊就需要做下相应调整。常用的位置是居左、居中、居下。
居左和居中会使页面布局更加紧凑，让屏幕纵向空间展示更多内容，如拼多多小程序、爱奇艺小程序、微博小程序；而居下则可以重点突出搜索功能，如转转小程序。三种方式没有明显的优劣之分，可根据产品的具体情况具体选择。
※常见问题：自定义后的导航栏与默认的导航栏有个区别，即默认的导航栏下拉刷新时，导航栏是固定的；而自定义后的导航栏下拉刷新是，只有小程序胶囊位置固定，其他元素是随着页面一起下拉刷新。导致这个问题的原因是因为层级发送了变化，默认的样式小程序胶囊与导航栏是同一层级，而自定义后，层级就发生了变化。
4.3.5 二级页面导航栏
我们常见的二级页面导航栏只有一个返回上一层操作，但并不是说二级页面导航栏功能就是固定的，可进行自定义设计。
例如网易云音乐小程序，如果页面经过多次跳转后页面层级较深，这时如果想回到首页，就不需要一步步返回，直接点击回到首页的icon就可以了，一定程度上简化了操作。而京东小程序，则加了一个下拉抽屉，抽屉里承载了更多的快捷跳转入口。
但同时也要避免滥用，如摩点小程序的二级页面，有三个返回首页的按钮，完全没有必要，这就是滥用了。
4.4 分页栏（滚动选项卡）
跟native app相同，分页栏的颜色是可以自定义的，选中状态通常与主题色相同。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
分页栏的样式很多，而且当选项太多时还可以X轴方向滑动。与底部tabbar的功能类似，都是进行页面切换，但通常来说，分页栏的高度不能高于底部tabbar的高度。因为底部tabbar的选项是有触摸点击交互的，而且也在拇指的操作热区内。而顶部的分页栏则不需要进行触摸点击交互，切换选项时只需要左右滑动页面即可，所以小程序的分页栏高度不能高于tabbar。
※常见问题：很多小程序的分页栏只能点击切换不能滑动切换，这一点的交互体验非常不好，很可能就是工程师犯懒或者本身公司对小程序体验不够重视。目前腾讯旗下大多数小程序都已经支持分页栏滑动切换的交互，如腾讯视频、腾讯漫画、微信读书、QQ阅读等。
4.5 加载反馈
页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。
小程序提供了通用的加载样式，可用于不同的加载环境，设计师不需要额外的去设计加载样式。
4.5.1 启动页加载
小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
4.5.2 页面下拉刷新加载
在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
4.5.3 页面内加载反馈
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
4.5.4 模态加载
模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下外，尽量不要使用模态的加载。
4.5.5 局部加载反馈
局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。例如：
4.5.6 全局加载反馈
开发者可以参考图中样式，使用标题栏提示加载小程序页面内容的过程。例如：
※加载反馈注意事项
①若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
②载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
③不要在同一个页面同时使用超过1个加载动画。
4.6 结果反馈
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示、模态对话框或结果页面展示。
4.6.1 页面局部操作结果反馈
对于页面局部的操作，可在操作区域予以直接反馈，例如点击多选控件前后如下图。对于常用控件，微信设计中心将提供控件库，其中的控件都已提供完整操作反馈。
4.6.2 页面全局操作结果——图标型弹出提示
图标型弹出提示适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，相当于Native APP中的toast，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。
4.6.3 页面全局操作结果——文字型弹出提示
文字型弹出提示适用于需要轻量化地用文字解释当前状态或提醒不严重的错误。1.5秒后自动消失，不打断流程，对用户影响较小。
4.6.4 页面全局操作结果——模态对话框
对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。
4.6.5 页面全局操作结果—结果页
对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
4.7 异常状态的处理
在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。
要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。
例如表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
4.8 模态弹框
模态弹框和非模态弹框最大的区别就是是否强制用户交互。Native app模态弹框会打断用户的当前操作流程，用户不在弹框上操作的话，其余功能都使用不了。模态弹框属于一种重量性反馈，一般用于用户进行重要的操作。
而小程序的模态弹框有点不一样。小程序的Navigation bar和底部Tabbar的层级优先级远高于模态弹框。这就导致Native app中必须操作的模态弹框到了小程序里，是可以被切换掉的，不过只限于切换页面，并不能通过切面关掉弹框。比如打开A页面，A页面有个模态弹框，你可以通过底部Tabbar切换到B页面，然后再回到A页面，模态弹框也是存在的，需要对弹框进一步操作才能关掉。
另外，严格意义来说，弹窗时的灰色遮层不能覆盖的是右上角的小程序胶囊。因为小程序胶囊的层级优先级别是最高的。（小程序默认的navigationbar上，标题和小程序胶囊都是不能遮挡的，但是对其自定义后，标题部分是可以被遮层遮挡，但小程序胶囊不可以。）
但是，底部的Tabbar能不能强行盖住呢？可以。只要不用小程序官方提供的Tabbar组件，程序员自己写一个非标准化的Tabbar就可以。但无形中就增加了开发成本，还可能造成未知BUG，成本高收益低。所以建议尽量使用官方提供的Tabbar组件。
4.9 底部导航栏
开发者可为小程序页面添加底部导航栏（Tabbar）。Tabbar可根据小程序自身情况来判断有没有，如果没有那么多页面内容可切换，可不做Tabbar，如腾讯漫画小程序。
小程序官方建议底部标签个数为2-5个，最多不超过5个，不过个人建议最好是3-4，因为底部两个tab的时候实在太丑。一个页面也不应出现一组以上的标签分页栏。
小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库。
另外官方建议Tabbar高度为98px，即49dp。高度并没有严格限制，大部分小程序的tabbar高度都在48dp-52dp之间。
一些风格化较为强烈的小程序，是可以根据自身品牌风格进行自定义，不必遵循官方指定的默认样式。如一番赏小程序，风格化很强烈。
4.10 视频插件
以前小程序对视频的支持效果一般，且在滚动空间中不能放入视频，即导致页面在Y轴滑动时，视频播放框必须是固定的。但是现在已经有成熟的解决方案了，如爱奇艺小程序，已经很好的让视频跟随页面一起Y轴滑动。
4.11视觉规范
4.11.1 字体
微信小程序默认字体与微信一样，都与所运行的系统字体一致，常用字号为22, 17, 15, 14, 12(pt)，使用场景具体如下：
4.11.2 列表
小程序的设计中间距的基础栅格单位建议为4dp，也就是宽度高度间距最好是4的倍数。
4.11.3 按钮
小程序官方文档提供了各种按钮的默认样式，设计师可以当做一种参考，至于实际项目中按钮的样式、色彩、各种状态，都可以根据实际项目来进行自定义。
4.12 适配
一般来说，适配阶段不需要设计师参与。小程序可以一稿适配绝大多数机型。另外H5版本的应用也可以通过套壳的方案来快速完成一个小程序版本，不过这都是开发考虑的事。
五、结语
对于熟悉Native app设计规范的设计师，尤其是做过iOS平台软件的设计来说，小程序设计很容易掌握，只是小程序的平台特性，需要遵循着官方设计规范的地方多一些，再加上小程序还有许多不完善的功能组件，功能与性能都有待进一步提高。
从个人角度来看，目前小程序的特性决定了它还是只能以工具型应用为主，如零售、点餐、外卖、出行、健康码等，由于获客门槛低，微信又自带海量用户，所以工具类的小程序比较吃香，完全符合张小龙说的用完即走的特性。而内容型的小程序仅仅起到从小程序引流到Native app的作用，毕竟小程序上的内容型软件都阉割掉了大量内容，而且各大厂商也不愿意用户在微信这个平台上干了所有的事，自己辛苦做内容却把用户拱手让给微信，毕竟流量才是内容型软件的命门。小程序还有很长的一段路要走。
好了，感谢花时间读完这篇文章，希望这篇文章能给新人设计师一些帮助，感谢大家收看，谢谢。
往期文章链接：
