摘要：2017年第一批小程序上线，已日趋成熟，UI设计师的工作中又多了一份小程序适配。新平台、新规范、新模式可能会让一些刚入行的设计师有些迷茫，虽然网上也有不少设计师分享经验，但一些知识点也被一带而过，造成了盲区。本文将详细介绍小程序设计各模块及常用组件的设计规范以及小程序设计中常见的误区，让新手设计师有章可循、有范可循。

关键词：小程序概念、设计规范、常见问题分析

目录

1.什么是小程序？

小程序概念最早由张小龙于2016年提出，全称是“微信小程序”，英文名称为“Mini”，是基于微信生态构建的应用程序，开发周期短、成本低，无需下载安装，即开即用。

目前，拥有小程序的不止微信，还有支付宝小程序、百度小程序、字节跳动小程序等。2018年，小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加等十家手机厂商联合推出了快应用，虽然名字不同，但本质上也是小程序。

互联网巨头热衷小程序，本质上是不同场景下对用户时间资源的争夺。比如，你原本每天花4小时在微信聊天，1小时在淘宝购物，1小时看知乎的《谢谢你的邀请》，2小时看《此生无悔，奥利给》，那么有了小程序，你在微信上就能做所有的事情，也就是说，8小时的手机时间全部贡献给腾讯。

我个人猜测腾讯是想基于微信庞大的用户基础开发一个OS，相比苹果的iOS，都有自己的开发语言，有自己的认证和上市流程，如果未来真的有腾讯OS，那么小程序的体验是一个非常好的尝试。

BUT，梦想很丰满，现实很骨感。由于微信的特殊性，小程序有非常大的限制，即不能关注、不能分享、不能外链。官方或许会用这种方式来防止劣质小程序的泛滥，但即便如此，到今天小程序已经呈现出泛滥的趋势。优质小程序屈指可数，劣质甚至山寨小程序层出不穷。

2. 小程序主要特点

1.跨平台开发更方便。因为是​​基于微信环境，所以可以同时开发iOS和两个平台。

2. 上手快，学习曲线平滑。这是相对于开发而言的。如果你已经熟悉 Web 开发，那么上手会更快。

3、开发成本低。跨平台一站式解决方案、开发环境简单、易学易懂、代码复用性强、开发迭代周期短等特点，会让小程序的开发成本远低于APP。比如类似资讯的一款软件，产品+前端+服务器+设计+测试+运维的成本，光是1.0版本成本就20万起步，而小程序版本只要3-5万左右。当然也有更低的报价，有的敢报几千元。曾经有客户要求做一个服装定制的小程序，包括展示、预约、下单、支付、个人中心等模块。沟通了许久的需求后，他们最后说预算只要5000，还说上一次找的人只想要3000，这次想做高端一点（壮汉锁男.jpg）。最后还是婉言谢绝了。

4、营销成本低。也就是推广成本。普通APP的推广费用每年动辄几十万、几百万元，有的甚至以几十元一个单位的价格批量购买用户，更别提抖音、快手、猿辅导，每年在电视台、各大综艺节目上投入几千万甚至几亿元的赞助费，获得大量曝光机会。小程序依托微信海量用户群，一键直达，大大降低了营销成本。

5、无需下载。当然这只是一个广告说辞，小程序本质上也是需要下载（加载）的。不过得益于一次需要加载的数据量小，之前限制是1M大小，现在单个包2M（大型项目支持分包加载，所有子包最大总容量8M），甚至可能还没有APP启动页那么大，不用安装卸载，直接就能用，不像现在的APP动辄几十、几百M，第一眼就把对流量敏感的用户吓跑了。

6、用户体验更好。这个用户体验指的是一般的使用体验，而非设计师通常理解的交互体验。小程序体积小，核心功能交互路径短，无需安装卸载，没有杂乱的外部跳转，省时、省力、省流量，特别适合各种生活场景，比如购物、餐饮、旅游等。

7、官方标配的热更新。简单来说，小程序冷启动时会自动向微信后台请求新版本信息，如果有新版本则立即触发新版本的下载。不需要每次更新都重新打包提交到应用商店审核，用户再从应用商店下载完整数据包重新安装。开发者非常开心。

3. 小程序、原生应用、H5优缺点分析

APP（原生APP）、小程序、H5优缺点对比：

快应用、支付宝小程序、百度小程序、今日头条抖音小程序优缺点对比：

4. 小程序设计规范及常见问题

基于微信小程序轻量、快捷的特点，微信还提供了小程序界面设计指南及建议。设计指南在充分尊重用户的知情权和操作权的基础上，旨在建立微信生态内友好、高效、一致的用户体验，同时最大程度地适应和支持不同的需求，实现用户和小程序服务商的共赢。

如果你熟悉APP设计流程，特别是有做过iOS平台的软件设计，那么做小程序一定游刃有余。小程序的很多设计规范其实都源自iOS的设计规范。下面我会从常用的UI组件入手，对小程序各个常用组件的设计规范和使用方式进行分析讲解。

4.1 设计尺寸应与剪切图像兼容。

前面提到小程序设计规范源自iOS，因此设计师只需要根据屏幕尺寸进行视觉设计即可。由于微信小程序以rpx作为CSS尺寸单位，所以rpx可以根据屏幕宽度进行自适应。屏幕宽度规定为，所以在/7/8设计稿中1px=1rpx。

对于习惯使用设计工具的设计师，可以使用单一尺寸，即设计时的尺寸，设计单位是 dp/pt。借助 Blue Lake 的自动标注，开发者一看就懂。（小程序的宽度只需要，即 375，高度则不固定，这个要看不同手机的屏幕规格，最好根据手头的测试机高度来确定）

对于图片切分，考虑到小程序单个包的容量为 2M，官方文档推荐使用 2x 图片大小（相对单个尺寸），如果设计稿以 750 宽度为基准，那么可以按照 1:1 进行切分。如果希望图标更清晰，也可以选择 3x 图片，但一定要控制好切分图片的大小。

4.2 状态栏

根据小程序官方文档，由于状态栏随各手机操作系统而动，因此无需设计。如下图，②为内容区，①为小程序胶囊，状态栏无需设计。设计师只需要根据需要使用 iOS 的两个状态栏组件即可。

以下链接提供了状态栏组件

链接：提取码：fwio

4.3 导航栏

微信官方对于导航的要求是导航清晰，来去自如。

导航是保证用户在网页浏览和跳转时不迷失的最关键因素。导航需要告诉用户自己在哪里，可以去哪里，如何返回等。微信目前在小程序中没有提供统一的导航栏样式，开发者可以根据需要设计小程序首页和二级页面界面导航。建议所有二级页面在左上角提供返回上一页的操作。

此外，很多支持全面屏手势的操作系统，也允许在界面边缘向右滑动，返回上一个小程序或者微信页面。

下面就导航栏的颜色、样式、布局等方面进行详细的介绍。

4.3.1 导航栏高度

官方给出的数据是iOS为44dp，系统为56dp。即建议适用范围是44dp-56dp，可根据实际情况进行调整。

4.3.2 标题位置和字体大小

标题可以居中或左对齐，也可以不存在（通常在那里放置一个搜索框），或者可以使用图像。

标题字体大小采用iOS标准，为17dp。

4.3.3 导航栏的颜色。

导航栏的颜色完全可以自定义，可以定义为纯色、渐变色、背景图等，但导航栏的文字、图标颜色、小程序胶囊的颜色也需要根据不同情况进行适当调整，以保证信息的良好可读性。

4.3.4 搜索框位置

搜索是用户的基本需求，因此搜索框通常会被放在显眼的位置。相比于APP的操作栏，小程序右侧多了一个小程序胶囊，因此搜索框需要做相应的调整，避开小程序胶囊。常见的位置有左侧、中间、底部。

左对齐和居中对齐会让页面布局更加紧凑，让更多内容在屏幕上垂直展示，比如拼多多小程序、爱奇艺小程序、微博小程序；而下对齐可以凸显搜索功能，比如转转小程序。三种方式并没有明显的区别，大家可以根据产品具体情况进行选择。

※常见问题：自定义导航栏与默认导航栏存在差异，默认导航栏下拉刷新时，导航栏是固定的；自定义导航栏下拉刷新时，只有小程序胶囊位置是固定的，其他元素会随着页面一起下拉刷新。出现该问题的原因是层级发生了变化，默认样式的小程序胶囊与导航栏是同一层级的，但是自定义之后，层级发生了变化。

4.3.5 二级页面导航栏

二级页面导航栏我们常见的只有返回上一级一个操作，但是并不代表二级页面导航栏的功能是固定的，可以自定义的。

例如在网易云音乐小程序中，如果经过多次跳转后页面层级较深，想要返回首页，不需要逐级返回，直接点击图标即可返回首页，一定程度上简化了操作。京东小程序则增加了下拉抽屉，承载了更多的快捷跳转入口。

但同时也要避免滥用，比如魔点小程序的二级页面有三个返回首页的按钮，这是完全没有必要的，构成了滥用。

4.4 分页栏（滚动标签）

和应用一样，分页栏的颜色可以自定义，选中状态一般和主题颜色一致。选择自定义颜色时一定要保证分页栏标签可用、可见、可操作。

分页栏的样式有很多种，当选项太多的时候，可以沿X轴方向滑动。和底部的功能类似，都是用于页面切换，但一般来说，分页栏的高度不能高于底部的高度。因为底部的选项是触摸点击交互的，也处于拇指的热区内。而顶部的分页栏不需要触摸点击交互，只需要左右滑动页面即可切换选项，所以小程序的分页栏高度不能更高。

※常见问题：很多小程序的分页栏只能通过点击来切换，而不能滑动。这个交互体验非常糟糕。很可能是工程师偷懒或者公司本身对小程序体验不够重视。目前腾讯旗下大部分小程序已经支持滑动分页栏的交互，比如腾讯视频、腾讯漫画、微信读书、QQ读书等。