1688 无线体验设计指南
  • Introduction
  • Color 颜色
  • Font 字体
  • Line 线
  • Button 按钮
  • Dialog 对话框
  • Icon 图标
  • List 列表
  • Loading 进度
  • Menu 菜单
  • Navigation 导航
  • Notice & Feedback 提示和反馈
  • Selector 选择控制器
  • Slider 轮播
  • Tab 选项卡
  • Tags 标签
  • Textfield 文本框
Powered by GitBook
On this page
  • 定义 / Definition
  • 样式与交互 / Style&Interaction
  • 1. 弹框提示
  • 2. Snackbar
  • 3. 新消息提示
  • 4. Alert提示框
  • 5. 空页面(缺省数据页面)
  • 6. 下拉刷新反馈(后续作为端的能力进行输出,各业务可以根据自己品牌调性进行个性化输出)
  • 7. 输入反馈
  • 8. 触底提示

Notice & Feedback 提示和反馈

PreviousNavigation 导航NextSelector 选择控制器

Last updated 7 years ago

定义 / Definition

提示是主动出现在页面上的非常态式信息,公告等. 它具有一定的时效性,非功能性。

提示不是由用户的交互操作引起的,跟用户当前的交互操作和状态无直接关联。

反馈指在用户进行操作行为后(例如:输入、提交),系统对该操作行为内容作出的判断和校验反馈。

样式与交互 / Style&Interaction

1. 弹框提示

反馈浮层位于页面中心,反馈消息持续1.5秒后自动消失。Toast不提供用户操作,比较适合显示提示、警告信息。

Toast一般有简短文字或者简单易懂的图标,如删除成功字样或者简单易懂的图标。

2. Snackbar

是一种非阻碍式的信息展示,它不打断用户的当前操作;一般停留至页面某个位置(优先顶部/底部)。

交互方式:

1.不可交互的提示只有一种状态-默认状态;

2.可进行点击交互的提示还多了一个点击状态,点击可跳转或关闭。

3. 新消息提示

在有新消息、讯息时,或者是app/插件/功能模块可以更新、升级时使用这个提醒样式。

位置:非列表且有icon的情况时一般居于icon右上角,列表下一般位于列表右侧。

4. Alert提示框

使用原则:提示框在应用屏幕的中间弹出并且位于所有其他视图的上方,以便于向用户以一种高度可见的方式提供重要信息。

场景:可用于重要的行为进行强提示以及用户操作的结果会带来比较严重的后果,如不可逆的操作、数据丢失、私密信息等。更多见弹出框规范。

5. 空页面(缺省数据页面)

提示文案可以一行或两行,两行情况要由主文案和辅助文案的区分。

根据场景的不同, 可以选择是否有Button进行引导。

使用原则:一个优秀的空白页面可以帮助用户解决

何物(What):解释这个页面在说什么

何地(Where):告知用户当前的位置,以及接下来可以干什么

何时(When):解释此处空白在什么情况下将出现有效的数据

6. 下拉刷新反馈(后续作为端的能力进行输出,各业务可以根据自己品牌调性进行个性化输出)

使用原则:在下拉动作后出现,持续1-2秒钟,自动消失。用户这时可以进行其他的操作。

7. 输入反馈

使用原则:反馈文字紧跟着要说明的区块(反馈内容一般是错误说明),不自动消失(当用户进行相应的交互操作后才消失)

场景:用于表单中,反馈具体某项或者某几项的表单填写错误。详见文本框&表单规范。

8. 触底提示

在列表内容滑动到最底部时,出现触底提示。