产品设计
支付宝小程序核心体验白皮书

支付宝小程序是一种全新的开放模式,让合作伙伴有机会分享支付宝及阿里集团多端流量和商业能力,为用户提供更好的用户体验,助力商家经营升级

  • 作者支付宝
  • 出版社支付宝小程序
  • 发行日期2121-04
  • 标签
  • 丛书

为构建支付宝生态体系友好一致的用户体验,我们拟定了 支付宝小程序设计体验白皮书,帮助小程序合作伙伴快速了解设计核心关注点。设计体验作为小程序质量的一个重要评估指标,后续会纳入小程序综合质量考核评分中,设计体验好的小程序有机会获得更多的权益奖励(包括但不限于流量等)。在阅读详细的规范前,请关注以下影响体验的 6 个核心要素。

1. LOGO 清晰可识别

Logo 是小程序的品牌体现,每个小程序都有机会被添加放置到支付宝客户端首页,一个清晰好识别、完整统一的 logo 可以让您设计的小程序在众多的支付宝小程序中脱颖而出。

2. 功能 ICON 要统一

功能 icon 可以帮助信息的表达,作为为用户提供直达服务的快捷入口,图标风格应简洁、辨识性强,且应该保证同一个服务主体下图标风格的一致性。

3. 图片素材要清晰

图片比文字更吸引用户,能丰富页面内容。请使用清晰的图片,像素低的图片会降低页面的整体质感。图片的品质也是核心体验评估项之一。

4. 弹窗使用要控制

控制同一页面非用户主动触发的弹窗数量,最多不超过2个。弹窗过多会非常影响用户体验,很容易触发用户的负面情绪造成用户流失。 

5. 导航使用要合理

选择符合小程序定位和内容展现的顶部导航栏,使用户体验更符合认知和操作习惯。支付宝小程序为开发者提供了深浅两套配色方案,开发者可根据自己的品牌风格选择适应的配色方案保证信息的可读性。

6. 页面体验要保证

设计师在设计小程序时,通过文字、布局排版、色彩和适配,建立舒适的视觉体验,让用户可以快速辨认理解,获取所需内容,保证良好的用户体验。

色彩使用要合理:关注背景色、模块颜色、字体颜色等的搭配情况。

页面视觉元素要统一:单页面或者单应用内的整体相似元素(比如 icon、图片、字体样式大小等)的风格统一。

合理的动效使用:页面动效过多,一定程度上会影响用户的注意力;节奏纷乱,造成页面视觉低质量;同一屏幕内,不应出现大于 2 个动效。

页面缺省状态表达:如果模块有空白状态,要做好视觉内容补位。

合理的页面表达:避免由于页面信息内容过少,视觉排布不合理,造成页面有不完整感。

保持图片大小比例:图片在容器内是否等比拉伸(图片若没有按原图宽高比例显示,可能导致图片歪曲、不美观,甚至导致用户识别困难。)

相关书籍

Ant Design企业级产品设计体系,创造高效愉悦的工作体验
设计价值观这是 Ant Design 评价设计好坏的内在标准。基于「每个人都追求快乐工作」这一假定,我们在「确定性」和「自然」的基础上,新增「意义感」和「生长性」两个价值观,指引每个设计者做更好地判断和决策。
Element网站快速成型工具
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
百度智能小程序体验指南
为方便小程序开发团队的视觉设计师进行小程序设计,小程序团队提供常用的视觉设计组件资源。
Axure数据可视化原型设计
如果你正在使用 Axure 进行数据可视化原型设计,可以来试试 js 解决方案,可以让你像 PPT 内方便地编辑和设计图表~
WeUI基础样式库
小程序可根据需要使用微信提供的标准控件,以达到统一稳定的目的
字节跳动小程序设计指南
字节跳动小程序作为字节用户「看见并连接」的承载,向开发者提供丰富的技术能力和流量场景,致力于向用户提供最有价值的信息和服务

暂无评论

暂无评论...