一款咖啡小程序设计始末

精细化服务的概念这些年被提及的频次日益增加，我们随时都能快速的列举一些耳熟能详的垂直型产品，如：专注美好生活的生活家居电商服务平台网易严选，最近曝光量超多的专注互联网招聘的产品boss直聘，专注于互联网产品和运营的社区型产品人人都是产品经理等。

在垂直领域的产品中，产品的标签明显，相似的用户身份属性，促使用户在产品的使用过程中更容易获得强烈的认同感与归属感。

这也比较符合市场的发展趋势：用户的个性化诉求水涨船高，给了我们清和更多可切入的点；小而美的产品虽不及巨头的体量巨大，但用户的忠诚度普遍较高，也更容易使产品形成相对稳固的壁垒和门槛。

基于这些思考，并结合自身条件，我在公司内部发起了一款针对咖啡这一垂直领域的小程序项目。

下面是这个项目的设计思路，感兴趣的朋友欢迎一起交流。

项目背景描述

关于为什么要做这样一个项目，与我本人的职业经历和兴趣密切相关。

曾经有2.5年咖啡师经验，算是咖啡狂热爱好者，擅长拉花和手冲，对咖啡知识和市场有较深的了解。

一年半前的咖啡拉花

至今算上兼职和目前的全职，有1年多一点的运营经验，喜欢研究运营方法论和底层逻辑，实战经验积累不多，兼职做过社群运营、内容运营，目前全职做新媒体运营。

因工作原因，平时会接触一些产品相关的人和工作，并表示有一定兴趣，但在这个项目前，没有实战经验，属于产品小白。

在我的职业生涯里，基于兴趣选择职业是第一要素，无论是最初的咖啡师还是现在的运营工作。

当然最初我还是比较相信鱼和肢携熊掌不可兼得的道理——毕竟咖啡与运营很难让人在第一时间感觉能够产生联系。

但有机会，公司鼓励员工去设计相关的项目，如果可行便可以被提上日程，再加之与同事的沟通，给了我极大启发，于是便诞生了去做一个咖啡垂直领域的产品的想法。

这个项目最初，我借答饥盯鉴的模板是大众点评，想做一个仅针对咖啡馆的展示平台。

但咖啡馆和咖啡爱好者本身偏少，为了尽可能吸引咖啡爱好者或者从业者的驻足，仅有咖啡馆的展示显然不够。

而自身因为有过咖啡从业经历，所以在功能架构的思考上难免主观，为了产品的功能更合理，我针对自己所在的城市进行了相关的市场和用户调研，并进行了信息汇总，然后又与一些同事朋友请教了产品的设计，截至目前项目的计划书及产品功能架构基本完成。

以下是具体内容。

一、市场分析

为了对咖啡市场有一个更直观的了解，我在进行市场调研的时候分为了两大部分：国内咖啡市场情况和本地城市咖啡市场现状。

1. 国内咖啡市场情况

我在网上找到了最近的关于咖啡市场的数据统计是2016年，全球年人均消费咖啡杯数的数据。

数据显示：

2016年，在咖啡流行的欧洲尤其是北欧地区，年人均咖啡消费杯数甚至达到1000杯以上，而同在亚洲的日本及韩国，年人均咖啡消费杯数也处在200-300杯的量级。

那么国内市场的这一数字相比较就稍显尴尬：

中国大陆年人均消费咖啡杯数仅为4杯多不到5杯，而即便在北上广深等一线城市，这一数字也不过是20杯。

咖啡在国内市场的大量进驻也不过是上世纪90年代的事儿，而中国人口基数大，咖啡作为舶来品接受需要时间，同时人们对咖啡在认知上的误解等诸多因素，是年人均消费咖啡杯数这一数据偏低的原因。

这一境况目前正在得到改善，据中国商报的文章表示：

我国咖啡消费增长率是世界平均水平的10倍，约为20%。而且以雀巢、麦斯威尔等外来巨头为代表的速溶咖啡市场占比正在降低，现磨咖啡和咖啡馆消费业态占比逐渐增高。

而在咖啡产业上游的咖啡种植商，尤其是中国云南的咖啡种植产业这些年发展也极其迅速，虽尚未在国际咖啡评测大赛上跻身前十，但随着咖啡种植质量的不断攀升，云南咖啡也开始了在国际咖啡评测大赛上出现，相信不久的将来云南咖啡也会诞生出世界知名的好咖啡。

咖啡是被人们赋予深刻多元含义的一款饮料，在消费升级的趋势带动下，国内咖啡市场的前景还是值得期待的。

2. 本地城市咖啡现状

笔者所在城市是沈阳。在我最开始从事咖啡师工作的时候，也就是2015年，沈阳的咖啡市场正处在快速发展阶段，基本上每个月都会听到有几家新开的咖啡店出现。

作为咖啡爱好者及从业者，我也比较喜欢去新店探店，感受不同咖啡馆传递的理念和咖啡品质。

但遗憾的是：很多咖啡馆仅仅维持了1年左右便夭折了。

这与咖啡整体上受众群体较少有着直接关系，但不可否认的是大多数咖啡馆创始人仅对咖啡馆感兴趣，对咖啡本身的认知极度匮乏，在营销推广、品质把控、口碑服务等方面存在严重不足。

这些因素在我调研期间，遇到的部分处在亏损状态下的咖啡馆中均有出现。

在调研过程中，除了咖啡馆我还选择了一家国内非常有知名度的连锁咖啡贸易供应商和一家沈阳本地的咖啡饮品供应商进行了交流。

而这两个调研对象给出的答案却截然相反。

连锁咖啡贸易供应商的朋友表示：

国内市场的咖啡前景很好，而且正处在市场洗牌期，很多城市的新开咖啡馆，无论是数量还是咖啡出品的质量上都大大提升。

在沈阳本地，根据他过去一年多的观察了解，每个月大概有10家左右的咖啡馆开业。

而本地咖啡饮品贸易的供应商朋友则表示：

并不看好咖啡的市场前景，以沈阳为例，首先是本地人的生活习惯，并不太适合在咖啡馆这种具有小资情调的环境下消费，而且其公司今年以来还没有一家新开咖啡馆与他们进行相关业务上的合作，咖啡豆等原料销量占比也明显降低。

这两个调研对象之间的答案在最初确实让我陷入困惑： 同样是咖啡贸易供应商，为何二者之间的认知差异竟如此巨大？

后来经了解发现：

该品牌连锁咖啡贸易供应商，因其品牌效应和咖啡豆品质及咖啡制作技术更加专业，受到很多新店的青睐；

而本地的咖啡贸易供应商因品牌影响力较小，缺乏对过往成功开店优势的宣传，同时咖啡豆品质并不好，烘焙周期短则三五个月，长达甚至一年，而且该公司也并没有将咖啡这一品类当作核心产品。

如此对比，二者对咖啡市场的认知不同也就可以理解，其实更多 现状变化的本质原因来自于自身业务的发展规划不同 。

接下来我利用webscraper工具，对大众点评上的数据进行抓取，获得了沈阳本地市场的独立咖啡馆数量大致为700余家（不包含星巴克、Costa、太平洋等品牌连锁咖啡馆）。

又根据相关条件如：西餐厅、面包烘焙坊等，将不符合条件的咖啡馆进行遴选，最终获得了符合条件的沈阳本地咖啡馆数量为400余家。

在我个人比较喜欢的一家独立精品咖啡馆中甚至每个小时能达到3-5人的顾客数量，以人均消费30元的标准，该咖啡馆日均营业额甚至能够超过1000元。

而据这位咖啡馆老板所述，其月营业额超过2万，而且其位置并不好，处在一个老区胡同，房租便宜，净利润也能达到万元以上。

而我所了解的类似的咖啡馆处在盈利阶段的比重也越来越大。

可以看到，沈阳的咖啡馆无论是数量级还是生存现状正朝着比较正向的方向发展，而且暂不以沈阳与一线城市对比，仅以同处东北的同级别城市：大连、哈尔滨和长春相比，咖啡馆的量级也处于劣势。这也使我相信，这款咖啡垂直小程序的市场，并非想象中那么渺小到不值得一提。

二、用户分析

既然是针对咖啡的垂直型产品，那么面向的用户应该是与咖啡之间有直接关联。

比如：咖啡馆的经营者，咖啡上下游的从业者，咖啡的消费和爱好群体等等。

在经过一系列的分析和遴选之后，在大的层面，我将这款产品的目标用户划分为三大类：咖啡馆/工作室、咖啡从业者及咖啡消费者/爱好者。

而根据不同的条件，我将这三类用户又进行了进一步的细分，具体如下图所示：

其中，咖啡馆的分类以不同的定位和场景为主要依据，咖啡从业者的分类以从事的工作种类不同进行划分，而消费者及爱好者的分类，则以咖啡馆对其吸引的功能点不同进行区分。

那么，这三大类目标用户的核心诉求有哪些呢？

下面进行具体描述：

（1）首先是咖啡馆和工作室，作为咖啡馆和工作室的经营者，创立的目标自然是实现盈利。

而咖啡馆及工作室本身是线下实体店的模式，影响范围有限，对顾客的复购率和口碑传播有着极高的要求。

即便是通过线上的手段，将顾客吸引到店内，也离不开对这两个因素的考量。

多数咖啡馆和工作室的创立都有创始人的理念的融入，而仅以目前的营销推广渠道来看很难让顾客第一时间感受到来自经营者的心意。

（2）对于咖啡从业者，包括我在内并和一些从业者的交流中得出的一些想法是，目前的交流渠道大多是微信及QQ群，而这类社群往往因为无效信息的覆盖，很快就造成用户活跃度降低的境况。

而在PC端相对有影响力的几个咖啡社区如：中国咖啡网、咖啡之家及咖啡沙龙等，虽然成立已久，但缺乏良性的互动氛围，社区体验也并不友好，从业者在其中能够停留的意愿并不强烈。

而作为从业者，因本身咖啡的市场规模较小，从业者数量也并不多，所以同行之间的交流便极少，咖啡师略显孤独，在从业过程中能够遇到喜欢咖啡的朋友的可能性也极小。

作为咖啡师及其他咖啡从业者，目前还缺乏一个足够有吸引力的供大家学习、交流、互动、扩展行业人脉圈的垂直类平台。

（3）对于咖啡消费者，如何根据不同的需求如：喝到品质咖啡，适合办公学习，举办活动沙龙，进行商务谈判等快速精准的找到合适的咖啡馆，是一个暂未解决的问题。

对于咖啡爱好者，他们对咖啡的认识大都来自于与咖啡从业者的交流，而这些认知大都是碎片化的，他们缺乏一些有趣、系统的方式方法，更全面的认识咖啡。

当然，这些分析判断因自己调研的对象量级并不多，也有一定的主观思考影响，所以结论可能并不严谨，但在现有的调研对象中，这些判定还是成立的。

三、产品功能设计

在产品功能架构的设计上，我以目标用户的特点和需求作为切入点，尽可能通过相关功能的实现来解决用户的一些诉求。

针对咖啡馆和工作室，我尝试以相对合理的方式让咖啡馆的信息得以展现，更多的展示咖啡馆的理念、产品信息，并尽量避免类似大众点评等生活服务平台内关于评价体系、成交数等存在灰度 *** 作的出现。

针对咖啡从业者，我尝试以更好的展现从业者个人风采作为出发点，尽可能满足从业者在平台上获得身份认同，交际圈的延展和咖啡知识学习互动的诉求。同时思考如何降低因咖啡师技术水准不同形成的等级划分明显，导致社区氛围不佳的情况出现。

而对于咖啡消费者和爱好者，我的出发点是让消费者找到理想的咖啡馆，让爱好者更友好的学习咖啡知识文化，同时增加普通消费者接触咖啡、认识咖啡的几率。

基于以上的这些思考，我做出了如下的产品功能架构图：

看起来有点复杂，为了更加直观的表达清楚，我以原型图的形式对各个功能版块分别展开进行描述。

1. 咖啡馆相关的页面展示

在这一版块里，为了相对合理的对咖啡馆进行展现，我仅以用户距离咖啡馆的位置进行排名，包括在细分的咖啡馆分类列表下也同样采取该排名机制，同时为了便于用户更好的找到咖啡馆，可以以地图模式查找城市咖啡馆分布。

在咖啡馆的详情页，除了基础的信息之外，更多体现驻店咖啡师和咖啡产品的展示。

驻店咖啡师功能的初衷，源自于我对咖啡师这一职业的理解：

咖啡师是注重与顾客深度交流的一项职业，而优秀的咖啡师通过与顾客的频繁交流，建立连接能够直接影响顾客重复购买几率。在咖啡产品的展现上，仅展示咖啡馆的咖啡类产品，以凸显产品的定位。

同时针对意式咖啡、单品咖啡、花式咖啡、咖啡烘焙等不同形式的咖啡产品服务进行不同的详情展示。

但有一大共同点是：均已专业的评判指标进行描述，针对一些消费者可能产生的对相关指标的不明确和困扰，在每一类指标处都标明指标判定的详情，也是对咖啡知识普及的一个设想。

2. 咖啡人的版块

如上图所示，该页面的排列规则将以平台设定的等级规则进行排名，这类似于我们的QQ等级或者其他社区型产品的等级。

标签的设置，是站在让平台用户第一时间构建对于这一咖啡从业者的形象认知。

而在咖啡人的详情页内，除却基础信息，增加了咖啡人的参赛和证书认证信息的描述，用以更好的展示咖啡从业者以帮助他们获得更多的认同感。

3. 咖啡圈的页面内容

这一版块下，核心的功能有三个：咖啡社区、咖啡竞赛和趣功能。

咖啡社区主要以咖啡知识学习分享交流为核心，而用户等级与参与社区内容贡献产生直接关联。

咖啡竞赛的功能设计想法源自于年初火爆的头脑王者的思路，此功能旨在让用户在相对轻松愉悦的氛围下学习咖啡知识和文化，并且增加用户粘性。趣功能的版块更多是站在运营侧的考量，围绕咖啡这一载体设计的相关运营活动功能在这里出现。

而下方关于广告、商城、招聘等仅作为未来产品规划方向的选择项，在产品初期暂不考虑。

4. 用户中心的页面

用户展示用户的基础信息，并进行编辑修改等系统功能的使用。而产品将针对用户的分类提供三种身份：商家、从业者和爱好者。

三者均有等级划分，但商家的等级并不体现在其所属的咖啡馆和工作室上，消费者及爱好者的等级将在其个人主页内体现但并不能在咖啡人页面展现，而仅有从业者的身份才能在咖啡人页面有具体展现。

以上是产品的具体功能架构。

当然笔者作为产品小白，深知以上的内容存在诸多漏洞，也再次期待有兴趣的朋友欢迎一起交流沟通。

四、运营规划

其实这一方面的思考在产品的想法诞生之初，便一直没有停止过。

目前，在产品的功能设计上基本上不存在技术难关，而更多的是产品细节体验上的优化迭代和在这一基础上运营端的工作。

这款产品从目前来看，并不是单纯的商家展示平台或者垂直社区平台。而我本人虽从事运营工作，但对这类产品的运营经验几乎为零，已有的认知大都建立在相关理论的基础之上。

在类似产品的运营方法上，我选择了抖音和美团初期运营工作的相关资料作为主要的学习对象。

当然理论学习本身对运营工作的帮助有限，所以我也比较期待在产品上线之后通过实战总结经验，优化工作方法。

一般，产品的生命周期大致分为四个阶段：冷启动-增长期-成熟期-衰退期。

为了产品的发展能够在可控范围内，我计划将以本地城市的市场作为试点，规划在单一城市内关于产品冷启动和增长期的运营方案。

在具体描述运营规划前，我整理了三类用户的核心诉求标签，试图去解决在产品上线之初如何进行用户切入的问题。

通过以上整理，不难发现，三类用户之间，对于咖啡相关知识的学习、了解及兴趣培养的诉求有重叠之处。

吸引咖啡馆和工作室入驻的最核心的点是消费者及爱好者的用户流量，而消费者和爱好者关注平台的动机来自于有多种形式的咖啡馆的出现，这两类用户之间的关联性较强。

从业者则是为体现平台垂直度而存在，从业者与平台配合为内容输出做出贡献，通过相关的鼓励机制，让从业者在这里获得强烈的归属感。

那么根据上述结论，我初步设定的产品上线初期冷启动阶段的运营规划大致如下：

当然根据调研情况，以沈阳城市为主的产品增长期，规模量级也比较小，我们的目标是达成300余家本地咖啡馆的入驻目标。

在这一阶段，团队成员更多的是加强与商家的沟通，邀请商家入驻平台，并通过相关的线上及线下的活动的策划，扩大产品在消费者和爱好者之间的影响力，吸引流量。

以上的规划考量主要因素是我本人在沈阳多年，有一定的咖啡圈内朋友资源，更方便的开展工作，而我们的整个团队也在这里。虽然量级不多，但也是我们内部磨合，产品功能优化迭代的比较好的选择。

这一阶段的工作总结将成为产品未来拓展其他城市的宝贵经验。

最后还要提及一下关于盈利方式的思考，其实这一点上目前并不明确。

首先我不希望主要的盈利模式在收取商家的费用上，比如：竞价排名和广告位展现，这样很容易将产品的调性毁掉。

而咖啡垂直领域的电商商城，是我目前考虑的一个方向。

说起小程序相信大家应该都不陌生了吧。经过长时间的推广和使用，现在大多数人都接受了小程序的使用方法。下面我们就一起来了解一下，小程序的入口都有哪些类型的。

1

社交立减金入口

适用类型：需要使用微信支付的小程序

入口位置：滑敬败接入社交立减稿芦金的微信支付页面

入口介绍：1月16日，社交立减金全面开放。从此，用户可以从社交立减金进入小程序。

使用方法：线下门店购买后，用户通过收到的模板消息领取立减金，点击“邀请好友一起领取”将立减金分享至微信群，群友可点击领取。领取后页面即出现小程序入口，用户进入小程序内消费。

2

小程序广告入口

适用类型：所有小程序广告主

入口位置：小程序内广告位

入口介绍：3月19日，小程序广告开放。

目前小程序支持banner广告和视频激励式广告。这两种广告都支持跳转小程序。

3

服务直达入口

适用类型：服务类小程序

入口位置：微信搜一搜结果页

入口介绍：4月18日，微信内测服务直达功能。

用户搜一搜输入关键词后，参加服务直达的小程序则会优先显示用户面前。服务直达功能，给了小程序一个优质的服务入口。

4

App打开小程序

适用类型：所有小程序

入口位置：App内

入口介绍：5月18日，支持App直接打开小程序。

这个功能是企业入口期待榜“前三名”，现终于实现了。同样这也意味着，微信外部，除了小程序码、企业微信关联小程序以外，App也能直接打开小程序。

5

品牌搜索入口

适用类型：所有品牌小程序

入口位置：微信搜一搜结果页

入口介绍：7月6日，微信开放品牌搜索能力。

所有开通品牌搜索的商家将获得品牌官方区和微主页的能力：

①品牌官方区，是获得认证的品牌搜索下的专属区域，用户获取品牌信息和服务的官方渠道。

②微主页，是微信提供的标准化小程序，包括品牌介绍信颤、主营产品、服务、联系方式等模块。

基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与 *** 作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。

为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行 *** 作。

每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和 *** 作无关的干扰因素。

此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的目标无关，易造成用户的迷失。

去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户决策和 *** 作的帮助内容，比如最近搜索词等。

*** 作没有主次，让用户无从选择。

首先要避免并列过多 *** 作让用户选择，在不得不并列多个 *** 作时，需区分 *** 作主次，减轻用户的选择难度。

为了让用户顺畅地使用页面，在用户进行某一个 *** 作流程时，应避免出现用户目标流程之外的内容而打断用户。

用户本打算进行搜索，在进入页面时却被突如其来的模态抽奖框所打断；对于抽奖没有兴趣的用户是非常不友好的干扰；而即便有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。

一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全且愉悦的使用体验。

导航明确，来去自如

导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会自带有微信提供的导航栏，统一解决当前在哪，如何回去的问题。在微信层级导航保持体验一致，有助于用户在微信内形成统一的体验和交互认知，无需在各小程序和其他微信页面的切换中新增学习成本或改变使用习惯。

微信导航栏

微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作。

微信导航栏分为导航区域、标题区域以及 *** 作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色。

导航区（iOS）

微信进入小程序的第一个页面，导航区通常只有一个 *** 作——“返回”，即返回进入小程序前的微信页面。进入小程序后的次级页面，导航区的 *** 作为——“返回”和“关闭”。“返回”，即返回上一级小程序界面或微信界面。“关闭”，即在当前界面直接退出小程序，回到进入小程序前的微信页面。

导航区（Android）

导航区仅存在唯一 *** 作——直接退出小程序，回到进入小程序前的微信或系统桌面，安卓手机自带的硬件返回键执行返回上一级页面的 *** 作。

安卓导航存在一类特殊情况：当用户通过 *** 作区的菜单将小程序添加至安卓桌面，并从安卓桌面打开小程序时，小程序的首页，不展示导航按钮。仅展示小程序标题和 *** 作区。小程序次级页面，导航区只有返回上一级页面的 *** 作，而点击安卓手机自带的硬件返回键也起到相同作用。

微信导航栏自定义颜色规则（iOS和Android）

小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果：

选色方案示例

页面内导航

开发者可根据自身功能设计需要在页面内做滚羡添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制，小程备州序页面的导航应尽量简单，若仅为一般线性浏览的页面建议仅使用微信导航栏即可纯拍。

开发者可选择小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。

其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库。

顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可 *** 作性。

减少等待，反馈及时

页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。

启动页加载

小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。

页面下拉刷新加载

在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。

微信下拉刷新错误使用案例

请避免以下错误使用情况，确保信息的可见性和页面的可用性。

页面内加载反馈

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。开发者也可以使用微信提供的，统一的页面加载样式，如图中例所示。

模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性 *** 作下不要使用模态的加载。

局部加载反馈

局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。例如：

加载反馈注意事项

若载入时间较长,应提供取消 *** 作,并使用进度条显示载入的进度。

载入过程中,应保持动画效果无动画效果的加载很容易让人产生该界面已经卡死的错觉。

不要在同一个页面同时使用超过1个加载动画。

除了在用户等待的过程中需予以及时反馈外，对 *** 作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。对于页面局部的 *** 作，可在 *** 作区域予以直接反馈，对于页面级 *** 作结果，可使用d出式提示（Toast）、模态对话框或结果页面展示。

页面局部 *** 作结果反馈

对于页面局部的 *** 作，可在 *** 作区域予以直接反馈，例如点击多选控件前后。对于常用控件，微信设计中心将提供控件库，其中的控件都已提供完整 *** 作反馈。

页面全局 *** 作结果——d出式提示（Toast）

d出式提示（Toast）适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的 *** 作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的d出式提示。

页面全局 *** 作结果——模态对话框

对于需要用户明确知晓的 *** 作结果状态可通过模态对话框来提示，并可附带下一步 *** 作指引。

页面全局 *** 作结果—结果页

对于 *** 作结果已经是当前流程的终结的情况，可使用 *** 作结果页来反馈。这种方式最为强烈和明确的告知用户 *** 作已经完成，并可根据实际情况给出下一步 *** 作的指引。

异常可控，有路可退

在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

异常状态——表单出错

表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。

从PC时代的物理键盘鼠标到移动端时代手指，虽然输入设备极大精简，但是手指 *** 作的准确性却大大不如键盘鼠标精确。为了适应这个变化，需要开发者在设计过程中充分利用手机特性，让用户便捷优雅的 *** 控界面。

由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于 *** 作的选择控件来改善用户输入的体验。

例中，在添加yhk时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。

除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入；另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。例如图中，在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要是键盘输入。

避免误 *** 作

因为在手机上我们通过手指触摸屏幕来 *** 控界面，手指的点击精确度远不如鼠标，因此在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误 *** 作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时，往往就容易出现这样的问题。由于手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。

利用接口提升性能

微信设计中心已推出了一套网页标准控件库，包括sketch设计控件库和Photoshop设计控件库，后续还将完善小程序组件，这些控件都已充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和 *** 作性能；同时微信开发团队也在不断完善和扩充微信小程序接口，并提供微信公共库，利用这些资源不但能够为用户提供更加快捷的服务，而且对页面性能的提高有极大作用，无形之中提升了用户体验。

除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。

统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。

微信内字体的使用与所运行的系统字体保持一致，常用字号为20,18,17,16,1413,11(pt)，使用场景具体如下：

主内容Black黑色，次要内容Grey灰色；时间戳与表单缺省值Light灰色；大段的说明内容而且属于主要内容用Semi黑。

蓝色为链接用色，绿色为完成字样色，红色为出错用色Press与Disable状态分别降低透明度为20%与10%。

---