设计原则

易用性

这是一张图片

一、导航:操作清晰,指引明确

QQ小程序顶部操作菜单

QQ小程序顶部导航的右侧会有官方统一提供的操作控件,开发者不可以对其位置和样式进行自定义。开发者可根据具体需求修改导航的其他部分。 小程序导航操作:(1)点击“更多”出现功能菜单选项;(2)点击“关闭”退出当前小程序;(3)点击“返回”默认返回上一层级。

小程序官方导航 这是一张图片

小程序交互流程操作 这是一张图片

QQ小程序顶部操作菜单配色规范

QQ小程序为开发者提供了深浅两套配色方案,开发者可根据自己的品牌风格选择适应的配色方案。开发者在自定义时要保证信息的可读性。 这是一张图片

QQ小程序页签导航规范

页签导航由一组文字或图标混排组成的,是用于在不同页面间切换的交互控件,可简称为页签。小程序主要适用场景有两类:主导航、顶部页签。每个导航最少2项,同时显示不超过5项。不得使用两行页签。显示不下时,最右侧显示半个,暗示用户滑动。各页签项的默认态颜色需一致,指示器和页签文字/icon使用同一颜色。详见导航组件

小程序底部导航 这是一张图片

小程序顶部页签导航 这是一张图片

二、界面:明辨主次,突出重点

界面层级清晰

开发者在设计每个页面时都要确保(1)用户能够辨析视图内的主次信息;(2)同一视图内的信息层级不宜过多;(3)拉开主次信息的层次。 这是一张图片

界面操作清晰

减少无关的设计干扰,突出鼓励性操作,方便用户快速理解,进行决策和操作。

小程序界面设计规范 这是一张图片

小程序多按钮操作 这是一张图片

这是一张图片

这是一张图片

三、流程:减少冗余,避免分心

流程明确

开发者需要保证用户更加流畅的操作,避免不符合用户预期、打断用户操作的流程出现。

流程体验不流畅,分心用户操作。 这是一张图片

过分挽留用户,与用户预期不符。 这是一张图片

四、操作:降低成本,智能帮助

智能帮助

在很多场景中,为了提高输入效率,开发者可以利用现有能力来减少用户输 入的成本,提升用户体验。

案例:智能提取图片中的文字 这是一张图片

一致性

这是一张图片

一、 图形:语意统一,达意优先

图标表意明确

QQ小程序将会对接众多开发者,在图形表达上为了避免用户困扰,设计时请注意:(1)各产品的语意图标系统统一;(2)类似语言系统,定义样式符号,形态可变。图标样式参考请见图标详情 这是一张图片

二、区块:统一形态,减少分类

把控位置明辨分类

在信息布局方面,开发者应该注意:(1)可以通过距离控制对象之间的整体关系;(2)需要区分开多个对象之间的归属关系。 这是一张图片

聚合功能提升效率

为了降低用户的理解成本,设计时请注意:(1)明确相似内容区块,精简页面元素;(2)相似功能规律聚合,提升使用效率。 这是一张图片

尊重用户

这是一张图片

一、关心用户等待:及时反馈,减少焦虑

启动加载页

小程序启动加载状态时,可以展示Logo来凸显品牌。这也承接了用户在启动小程序时的等待反馈。详见加载组件 这是一张图片

下拉加载

QQ小程序提供页面下拉刷新加载的统一样式,用户通过下拉手势触发内容加载,开发者无需自行开发。详见加载组件 这是一张图片

局部加载

若操作后不跳转到新页面、页面刷新内容、页面暂时失去响应时,在局部地区提示页面正在加载中。详见加载组件 这是一张图片

弹出提示

弹出提示是非阻断式提示,在视图中导航栏上浮动展示,由提示图标、提示文案组成。详见提示组件 这是一张图片

二、容错:用户可控,来去自如

不影响用户操作

开发者在设计流程时,不能忽略其中的异常状态和流程。因为异常场景正是用户最需要帮助的时候。所以在出现异常时需予以用户必要的状态提示,并告知解决方案,使其有路可退。 这是一张图片

三、 文案:清晰易懂,减少障碍

理解用户语言

开发者要把小程序中的每个用词当作是与用户进行交流的一部分,让用户在使用应用中感到舒适。(1)用词应选择用户熟悉、好理解的词语,避免专业用语;(2)确保界面文字清晰简洁;(3)避免理解有误。 这是一张图片

设计组件

1. 字体 Font

这是一张图片

2. 图标 Icon

这是一张图片 下载icon源文件

3. 表单 List View

列表是将多个相同结构的项目以垂直方向进行连续排列的控件,相同结构的项目称为“列表项”。 这是一张图片

4. 按钮Button

按钮用于开始一个即时操作,按钮的设计应当和小程序的颜色主题保持一致。 这是一张图片

5. 提示 Tips

提示是即时性提醒用户某些信息的控件,常见的提示控件包含弹出提示、加载提示和气泡提示。 这是一张图片

6. 输入框 Text

输入框是用于接收用户输入数据的容器。通用类的输入框可分为单行输入框和多行输入框两种。单行输入框会对超出显示区域的文本进行截断;多行输入框可提供换行功能。 这是一张图片

7. 导航 Navigation

导航是由一组图标或文字混排组成,用于在不同页面间切换的控件。导航须清晰明了地告诉用户身处何处及可前往某处。 这是一张图片

8. 对话框 Dialog

对话框提示框用于提示用户重要信息,并要求用户对此进行操作。它是一种阻断式提示,会终止用户当前操作。 这是一张图片

9. 动作 Action Sheet

动作面板是用户操作后触发的模态弹出框,提供与当前任务相关的多个选项。用于页面需要承载大量功能,但没办法呈现在主页面以混淆操作主次的情况。常见的动作面板可分为列表模式及宫格模式。 这是一张图片

10. 页面加载 Loading

加载提示用于页面正在加载数据的时候,主要包括导航加载提示和页面的全屏加载。 这是一张图片

11. 附件

QQ小程序sketch组件库