减少输入 , 巧用接口
例如下图中 , 在添加银行卡时 , 采用摄像头识别接口来帮助用户输入 。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 , 充分利用这些接口将大大提高用户输入的效率和准确性 , 进而优化体验 。
文章插图
除了利用接口外 , 在不得不让用户进行手动输入时 , 应尽量让用户做选择而不是键盘输入 。一方面 , 回忆易于记忆 , 让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面 , 仍然是考虑到手机键盘密集的单键输入极易造成输入错误 。例如图中 , 在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索 , 而减少或避免不必要是键盘输入 。
文章插图
避免误操作
因为在手机上我们通过手指触摸屏幕来操控界面 , 手指的点击精确度远不如鼠标 , 因此在设计页面上需点击的控件时 , 需要充分考虑到其热区面积 , 避免由于可点击区域过小或过于密集而造成误操作 。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时 , 往往就容易出现这样的问题 。由于手机屏幕分辨率各不相同 , 因此最适宜点击像素尺寸也不完全一致 , 但换算成物理尺寸后大致是在7mm-9mm之间 。在微信提供的标准组件库中 , 各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配 , 因此再次推荐使用或模仿标准控件尺寸进行设计 。
利用接口提升性能
微信设计中心已推出了一套网页标准控件库 , 包括sketch设计控件库和Photoshop设计控件库 , 后续还将完善小程序组件 , 这些控件都已充分考虑了移动端页面的特点 , 能够保证其在移动端页面上的可用性和操作性能;同时微信开发团队也在不断完善和扩充微信小程序接口 , 并提供微信公共库 , 利用这些资源不但能够为用户提供更加快捷的服务 , 而且对页面性能的提高有极大作用 , 无形之中提升了用户体验 。
统一稳定
除了以上所提到的种种原则 , 建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性 , 在不同的页面尽量使用一致的控件和交互方式 。
统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标 , 减轻页面跳动所造成的不适感 。正因如此 , 小程序可根据需要使用微信提供的标准控件 , 以达到统一稳定的目的 。
视觉规范
为方便设计师进行设计 , 微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便开发者调用的资源 。
字体规范
微信内字体的使用与所运行的系统字体保持一致 , 常用字号为20, 18, 17, 16,14 13, 11(pt) , 使用场景具体如下:
文章插图
字体颜色
文章插图
主内容 Black 黑色 , 次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑;
文章插图
蓝色为链接用色 , 绿色为完成字样色 , 红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%;
文章插图
列表视觉规范
文章插图
表单输入视觉规范
推荐阅读
- Win11共享打印机无法连接错误代码0x00000bc4怎么办?
- 京糕梨丝——降血压美容养颜
- 哪5种人不能吃南瓜叶 南瓜叶吃多了拉肚子吗!
- iPhone IOS11通讯录怎么批量删除? iPhone IOS11通讯录批量删除方法介绍!
- 白芷可以祛痘吗
- 曼陀罗花毒性大吗 曼陀罗花全身有剧毒毒性很大
- 微信小程序新手教程switch组件
- Win11右键菜单没有刷新怎么办?Win11右键菜单没有刷新的解决办法
- 腌海雀没有寄生虫吗