首页 » 工作经验 » 正文

微信小程序交互设计规范(二)

发表于: UI设计者 – 一个免费自学UI设计APP · 2017-2-5  · UI设计师投稿  ·  8,763 views  · 

weixinxiaochengxu-ixd

微信小程序交互设计规范(二)

下拉标示区

微信类所有小程序页面,都会再下拉时出现微信为其统一设计的标示区。品牌展示区由品牌名称和微信小程序提示组成。目的是强化品牌和用户对小程序的产品感知。

下拉标示(iOS深浅两色方案)

微信提供深浅两套配色方案,如此处标示所示,文字颜色不可自定义,开发者在自定义背景色时,应注意保证下拉标示的辨识度。

下拉标示(Android深浅两色方案)

微信下拉提示用于给用户明确的小程序归属者,防止造假与作弊。此处标示提供深浅两套方案,文字颜色不可自定义,开发者在自定义背景色时,应注意保证下拉标示的辨识度。

页面刷新交互(iOS)

开发者可自定义需要通过下拉交互完成刷新的页面,此类交互微信将提供标准能力和样式。在样式上,刷新图标与下拉标示配色已捆绑,分为深浅两套方案,开发者在使用时,应注意头部文字、下拉标示与刷新图标的和谐统一。但用户在该类页面做出下拉交互时,出现微信小程序页面标准加载动画。开发者无需自行开发样式。

在开发者没有在页面顶部设计tab的情况下,若定义该页面可通过下拉动作刷新,则刷新后加载状态提示语小程序品牌展示区出现在标题栏之下,页面顶部。

开发者暂无法执行定义此加载效果。

在开发者定义了页面顶部tab并定义该Tab下的内容页面可通过下拉动作刷新,则刷新后加载状态提示语小程序品牌展示区出现在顶部Tab之下,且仅刷新当前页面内容。开发者暂无法自行定义此加载效果。

页面刷新交互(Android)

与iOS相同,在样式上,Android下刷新图标与下拉标示配色已捆绑,分为深浅两套方案,开发者在使用时,应注意头部文字、下拉标识与刷新图标的和谐统一。

微信下拉标示错误使用案例

请避免以下错误使用情况,确保信息的可见性和页面的可用性。

页面内导航

微信控件库提供深浅tab导航方案供开发者选择。tab栏需固定在页面顶部,便于用户在不同的tab页面间作切换。为确保点击区域,tab项不得超过4项。一个页面也不应出现一组以上的tab栏。

Tab栏选中态默认为100%实色,未选中态带有60%,其中选中态颜色可自定义。在自定义颜色选择中,务必保持Tab的可用性、可视性和可操作性。

页面内加载反馈

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

模态加载

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

局部加载反馈

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

加载反馈注意事项

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

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

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

 

本文链接: http://www.shui-mai.com/2017/02/05/weixinxiaochengxujiaohushejiguifaner/
2 like+
«上一篇: :下一篇»

相关文章

2019最新UI适配设计规范iPhone XR、iPhone XS、iPhone XS Max

iPhone XR、iPhone XS、iPhone XS Max发布已经有一段时间了...

Sketch的Windows版替身-Lunacy打开和编辑Sketch文件

  Sketch 是一款 MacOS 下非常知名的 UI 界面设计软件...

全面屏手机时代拓宽了我们的设计思维

近期有同学问,全面屏手机来了就连VIVO APEX在国外炒的火热...

2018最新APP Android UI设计规范

2018最新APP Android UI设计规范   设计稿尺寸 从目前...

iOS 11系统iPhone X人机交互指南

iPhone X屏幕更大、分辨率更高、圆角以及屏幕边缘可显示的...

微信小程序UI设计规范及文档模版

UI设计者整理一下,为方便UI设计师和交互设计师进行设计,...