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

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

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

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

1. LOGO 清晰可识别

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

2. 功能 ICON 要统一

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

3. 图片素材要清晰

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

4. 弹窗使用要控制

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

5. 导航使用要合理

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

6. 页面体验要保证

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

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

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

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

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

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

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

相关书籍

WeUI基础样式库
小程序可根据需要使用微信提供的标准控件,以达到统一稳定的目的
Ant Design企业级产品设计体系,创造高效愉悦的工作体验
设计价值观这是 Ant Design 评价设计好坏的内在标准。基于「每个人都追求快乐工作」这一假定,我们在「确定性」和「自然」的基础上,新增「意义感」和「生长性」两个价值观,指引每个设计者做更好地判断和决策。
Vux移动端Axure组件库1.0
VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式
Web端交互原型元件库精简版.rp
本作品提供免费下载
内容分享平台交互原型模板.rp
标准化的WEB端交互原型模板
生活类用户预约APP服务平台.rp
高保真交互前后端实战原型设计模板
休闲小游戏

暂无评论

暂无评论...