小程序业务域名不是自己的页面咋办_小程序交互设计漫谈

♝点击上方“交互设计学堂”关注我们,送电子书

---

2016年11月，微信小程序开始公测，开启了各大移动APP的小程序时代，而就在2019年的9月末，Windows微信客户端开始支持微信小程序。 PC版微信更新 这意味着微信作为一个操作系统的企图，开始初露锋芒，以后再也不用担心看到“你收到了一个小程序，请在手机端查看”。 更新之前的文字提示 用户可以在微信上直接打开浏览，与此同时，还可以同时打开好几个小程序进行操作，效率不言而喻，但其场景的应用还有待考察。 更新后的微信打开小程序 随着微信团队的不断优化，微信小程序的入口也从发现页，上升到首页的下拉页面中，同时支持从微信搜一搜以及公众号中发现和使用小程序。 在很多行业，微信公众号和小程序之间的交易流程协作是件非常值得称赞的功能，微信公众号负责建立私域流量、推广和拉新，导流到小程序中进行付费转化，这在电商、旅游、自媒体等行业越来越普遍。 还有一种运营方式是通过小程序的传播和分享，引流到自家APP的玩法，一般来说，这是比较大的平台级别的APP常用的方式，且这种方式在一定程度上缓解了APP的拉新焦虑，是一种成本相对较低的推广和拉新策略。 微信拥有11多亿的用户，成千上万的小商家，只要吃定了其中的少部分流量，小公司赚个盆满钵满不是问题，但是这并不代表着所有的行业和应用都适合用小程序来做，分析了小程序的优缺点以后，再决定是否做小程序， (这里用微信小程序为例，目前除了支付宝小程序，其他诸如百度、QQ、抖音等APP的小程序并没有太大的火候，但是可以先通过微信小程序做可行性方案验证，然后再考虑其他平台的小程序)

01

小程序适合哪些产品 小程序的优点

• 微信生态庞大，用户众多，自带流量，

• 扫码即用，用完即走，

• 与公众号、微信搜一搜紧密结合

• 开发实现门槛低，成本低，

• 社交与内容、电商、出行、餐饮等行业的紧密结合

小程序的缺点

• 依托于某一APP平台，不能跨平台使用

• 代码包限制，对于一些复杂的应用并不适用，

• 小程序的封闭性，不能打开外部链接(但是认证后的域名可以打开，且每个小程序只能打开一个认证域名)

• 小程序每次发布需要审核，无法做到实时更新

• 无法做到APP级别的通知、UI、流畅度(仅针对业务复杂的APP)

可以看到，成也微信，败也微信，目前各大APP之间的相互封闭对用户而言造成了一定的麻烦，同样一款小程序，需要开发者开发针对不同APP平台的小程序，且对于用户来讲，微信小程序不支持支付宝付款，支付宝小程序当然也不支持在微信打开，这些平台与平台之间的割裂，也是各自的产品壁垒，短时间内无法消除，那么什么样的行业和应用适合用微信小程序呢？ 适合微信小程序构建的应用和行业

• 推广拉新做活动(抽奖、砍价、专题活动等)

• 独立电商、品牌电商(有赞商户、奢侈品电商等)

• 旅游、赛事报名(马拉松、户外旅游、活动报名等)

• 酒店住宿(独立民宿、连锁青旅、OTA平台等)

• 餐饮外卖(美团外卖红包派送、美食推荐等)

• 办公效率工具(网盘、笔记助手、OCR应用等)

• 交通出行(打车应用、共享单车、抢票助手等)

• 内容阅读(精简资讯阅读、公众号独立小程序、)

• 音视频(短视频分享、流媒体等)

不适合微信小程序的行业和应用

• 业务复杂，流程冗长的应用(进销存、文本处理、大型电商)

• 工具属性较强，且比较依赖原生系统的(图片处理软件、音视频剪辑类软件、云端备份软件、手机管理类软件等)

• 视频播放平台，(按照目前体验的视频播放小程序来看，视频播放不是很流畅，尤其是在进行拖动等操作的时候，长视频并不适合小程序)

• 高频且刚需的应用，建议还是做成原生APP，若有需要，可做简化版的小程序。

最合适的方式是，将你的复杂业务剥离开来，那些轻量的、容易实现且能吸引用户的部分用小程序来实现，比如知乎热榜、微博小程序、还有美团等。

02

小程序的交互设计要点

01、界面层级 小程序在界面层级上没有如同APP级别的自由度，首先微信小程序本身带有一个导航，作为退出小程序和承载其他基础性功能的菜单。除此之外，你可以根据自己的需要定义界面的样式。 退出按钮和菜单按钮 02、webview嵌入 对于需要在小程序中打开网页的用户来说，可以通过此种方式实现，但是需要将该域名配置到域名白名单中，在打开时，会铺满整个页面。对于网页端的产品来讲，可以通过此种方式实现web网页的嵌入，能低成本快速实现小程序客户端。 腾讯文档、百度识图等部分小程序使用webview嵌入H5 03、页面引导：返回首页、引导收藏，引导转发 返回首页： 目前市面上常见的返回首页，是嵌入导航栏中，与返回上一级作为同一级的按钮，好处是导航栏是固定的，不会随着页面的变化而更改，用户可以简单方便的操作返回首页。 知乎热榜左上角的返回首页 另外一种方式是页面浮窗的形式进行引导返回首页，个人不太喜欢浮动且常驻在页面上的元素，一般来说，返回首页是必须要有但不是高频的操作，没必要进行浮窗常驻。 除此之外，还有就是在底部功能区域嵌入返回首页的按钮，这种方式对用户打扰率低，且可以在需要的页面进行显示，不需要的页面(一级页面)可以不显示，但是随着页面层级和元素的变化，一定程度上并不适用。 沃尔玛小程序商品详情页的返回首页，有赞也是这样的交互 还有一种方式是通过提示用户点击右上角菜单按钮返回首页，这是微信官方给出的操作栏，但是隐藏的比较深，一般用户不经过引导很难发现。 (但微信经过7.0.7版本(安卓)更新以后，从转发的小程序打开时，会自动在左上角添加一个返回按钮，看来也是意识到这种场景返回首页存在的必要性了) 提示用户点这里可以返回首页 引导收藏： 在首次打开小程序的时候可以提示用户将该小程序添加到我的小程序中，一般是以非模态弹窗的形式引导用户进行收藏，在用户点击关闭后，根据缓存信息或者通过接口检测用户是否已收藏，以决定下次打开是否需要再次提示。 酷狗音乐的引导用户收藏tips 引导转发： 除了返回首页，小程序可以自定义组件进行引导用户的转发操作，当然也可以通过点击右上角菜单进行转发给用户，存在的问题同样是隐藏的入口太深，若有需要，自定义分享转发按钮还是很有必要的。 知乎热榜引导转发按钮 04、用户分享和商户对接 用户分享： 由于小程序到目前为止还没有推出转发到朋友圈的功能，大多数小程序采取了曲线救国的方案，核心页面会设计出生成海报的按钮，通过生成的小程序码，可以在微信内长按并访问该小程序。 布谷鸟小程序的生成海报功能 知乎热榜小程序的生成海报功能 商户对接： 商户对接指的是若你的小程序需要和用户对接沟通，可以通过添加小程序客服的方式来进行，在微信小程序的后台经过配置客服后，用户点击页面的客服按钮可以直接进入聊天窗口，同时可以发送当前页面的链接给客服，这些都需要开发去调用。 有赞精选的微信客服入口 布谷鸟微信客服的入口 打开客服会话窗口可调用当前页商品信息

03

后台交互

小程序作为独立的数据交互前台，同样需要一个后台的承载，一般来说，小程序的后台嵌入在你原有的产品后台中，如果你的产品没有后台，则需要重新设计小程序的后台。如果你的小程序只是你原有产品的一个延伸客户端，数据都是相通的，那么需要注意一个设计原则： 尽量减少给小程序设计独立的设置页面，最好进行模块化设计。 举几个例子：如果你的小程序是电商，且存在原有的后台，原有的后台已经囊括了商品的编辑和发布，以及订单的管理，那么在小程序的后台，无需新增这些功能，只需要将每个商品作为独立的模块添加至小程序即可，这样商品的编辑发布、管理、以及订单的处理都可以在原有的页面展开，只需要给订单打上小程序的标记即可。 同样的，如果你的小程序是旅游活动报名，只需要将之前后台已经存在的商品或者活动添加至小程序后台中。 APP的banner也是同样的道理，若你的小程序不需要自定义banner显示，可以直接调用手机端的banner。 当然，模块化设计在SaaS行业显得尤为重要，为了方便后台管理员的操作，多个端的数据在满足基本的多样性的前提下，应该尽量减少运营的负担。

04

小程序的账号体系

01、账号密码登录 直接使用账号密码登录，但这个登录方式对于用户来说太麻烦，最好的方式使用微信登录，通过微信登录的方式，可以判断该用户是否存在账号，若已存在已绑定的手机号(或邮箱)，可直接登录，若是新的UnionID [注1] (指从未在系统中存在过的UnionID)，则需要绑定手机号，通过该手机号，同时也能打通原账户和微信账户的连接。 微博小程序的账号登录界面 02、微信授权手机号 账户绑定的方式有两种，第一种是大多数小程序使用的，通过用户填写手机号和验证码进行绑定，另外一种是，在请求微信授权登录以后，可以在此进行请求授权微信账号绑定的手机号，这个是微信本身自带的组件，只需要调用即可，用户通过两次授权，就可以直接登录，无需填写验证码。 获取用户信息 获取微信绑定手机号 03、调用微信授权手机号使用其他手机号 当然，如果使用微信账号的手机号绑定，可能对于一些特殊的场景并不适用，比如该网站是用另外的手机号注册的，或者用户想使用另外一个手机号进行绑定，微信的授权手机号自带了这种功能，设计者可不用再操心，用户在使用其他手机号，并且填写了手机号和验证码以后，下次可以在其他平台继续使用。 使用其他手机号 详细的交互设计规范可参考官方的设计指南。 链接： https://developers.weixin.qq.com/miniprogram/design/ [注1]：UnionID 如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序)，可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序)，用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。 感谢阅读！

转载自：公众号 星野随记

作者：米兰的小铁匠

---

加老D私人微信18605817040，和老D一起学交互，老D会在朋友圈发精选文章和招聘信息