小程序界面设计指南

“上一期文章讲了小程序平台的特点以及场景需求,这一期文章主讲小程序设计规范,这是我通过阅读官方文档后归纳总结的,需要详细了解的小伙伴可以去看官方设计指南,文末有链接。”

文章大纲

01 用户体验要点

02 字体规范

03 控件规范

04 页面加载

05 页面状态

总结 资源

01

用户体验要点

轻量、简洁、目标明确

减少无关的设计元素对用户目标的干扰,每个页面都应该有明确的重点,便于用户每进入一个新页面时都能快速地理解页面内容。

清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全且愉悦的使用体验。

反例示意:

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

纠正示意:

去掉与用户目标不相关的内容,提供有助于用户决策和操作的帮助内容,比如最近搜索词等。

反例示意:

操作没有主次,让用户无从选择。

纠正示意:

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

反例示意:

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

减少输入

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

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

除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。原因是回忆易于记忆,通常来说让用户在选项中做选择比完全靠记忆输入容易。

例如图中,在用户搜索时,提供搜索历史快捷选项来帮助用户快速进行搜索,从而减少或避免不必要的键盘输入。

避免误操作

统一稳定

还应该时刻注意不同页面间的统一性和延续性,在不同的页面尽量使用一致的控件和交互方式。比如按钮,tab选项卡,弹出框等。

02

字体规范

字号

颜色

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

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

03

控件规范

导航栏

所有小程序的全部页面,均会自带微信提供的导航栏,它直接继承于客户端,也就是和微信一样。除导航栏颜色之外,开发者不可对其中的内容样式自定义。

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

iOS导航栏

微信进入小程序的第一个页面,导航区只有一个操作“返回”,即返回进入小程序前的微信页面。进入小程序后的次级页面,导航区的操作为“返回” 和“关闭”。 “返回”,即返回上一级界面,“关闭”,即直接退出小程序。

Android导航栏

导航区仅存在唯一操作“关闭”,即直接退出小程序。安卓手机自带的硬件返回键执行“返回”上一级页面的操作。

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

背景色规则

小程序导航栏支持背景颜色自定义,选择的颜色需要满足微信提供的两套主导航栏图标的可用性。即深色导航能够看清白色文本,浅色导航能够看清黑色文本。

导航标签

可以给小程序添加两种样式的导航:顶部TAB标签+底部标签。

保持不同页面间导航样式统一。

标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。

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

列表

表单输入

按钮

图标

04

页面加载

当不可避免的出现了加载和等待的时候,需要给予及时的反馈以舒缓用户等待的不良情绪。

加载反馈注意事项

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

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

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

结果反馈

对于页面局部的操作,可在操作区域予以直接反馈,对于页面级操作结果,可使用弹出式提示(Toast)、模态对话框或结果页面展示。

启动页加载

小程序启动页突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需自行开发。

页面下拉刷新加载

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

页面内加载反馈

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

模态加载

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

局部加载反馈

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

05

页面状态

状态反馈

页面局部操作结果反馈

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

页面全局操作结果——弹出式提示(Toast)

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

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

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

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

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

异常状态

表单出错

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

总结

这篇文章是我阅读官方文档之后,重新总结+梳理出的五个要点:用户体验、字体、控件、加载、状态。小程序给我的感受是它无论从设计还是开发都始终秉承着轻量、简洁的原则,这也是小程序越来越受欢迎的原因。

资源

控件操作预览地址:https://weui.io/

百度云盘: https://pan.baidu.com/s/1c274vuw 密码:rot1

(包含WeUI_PS组件库;WeUI_sketch组件库;小程序标志)

写作不易~

本文来自企鹅号 - 番茄设计匠媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

What You See Is What You Get

16530
来自专栏编程

利用好这些代码把SEO优化做到极致,最后一个你肯定没用

SEO 本期主题,利用好HTML代码让网站优化更上一层楼, 很多人认为网站优化和代码没有什么关系,其实不然,代码和优化也有着千丝万缕的关系。如果代码这一步不弄好...

220100
来自专栏移动开发之家

从Android到React Native开发(一、入门)

大家好┏ (ω)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。 关于React N...

10220
来自专栏移动开发之家

从Android到React Native开发(一、入门)

 大家好┏ (^ω^)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。

10620
来自专栏Debian社区

Debian下安装搜狗拼音输入法

2013年12月,搜狗与Ubuntu Kylin团队开始合作开发“搜狗输入法Linux版”。经过五个月的合作,于2014年4月17日,正式发布了1.0版本。20...

36330
来自专栏python小白到大牛

动漫迷的福利!Python小白也可以学会的爬虫教程

有一段没用 python 了,我也不知道自己为什么对 python 越来越淡,可能自己还是比较喜欢 android ,毕竟自己第一次接触编程就是 android...

15020
来自专栏Youngxj

EMLOG评论获取QQ资料

21330
来自专栏Coco的专栏

《HTML重构》读书笔记&思维导图

21540
来自专栏ThoughtWorks

CSS-in-JS,向Web组件化再迈一大步 | 洞见

简介 CSS-in-JS是什么,看到这个词就能大概猜到是在JavaScript里写CSS,那为什么要在JavaScript里写CSS呢,像之前一样写在css文件...

32180
来自专栏web前端教室

MVVM - 遇见未来

MVVM是新的前端开发模式,它的全称是Model View ViewModel,据说最初是由微软提出来的,。。 这种模式的实现,大意上是用自定义的标签把数据绑定...

21370

扫码关注云+社区

领取腾讯云代金券