组件

沉浸体验

避免打断用户心流的操作行为,让用户沉浸在相同页面中。
当一些工具能很好地支持创造性的活动时,这些创造性的活动可能会引发用户的“心流”状态。这是一种全神贯注、全心投入的状态,在这个过程中,人们忽视时间的流逝,忽略其他的干扰,从而让人持续工作好几个小时--这个过程的乐趣本身就是它的回报。

对话框弹框 #

有两种形式:非模态弹框、模态弹框
避免使用不必要的对话框,以防打断用户流程的操作行为,推荐使用非模态对话框。。

非模态对话框

非模态对话框示例
默认3s消失,可自定义时长。不要超过15个字

模态对话框

如包括用户不能忽略的重要信息,可使用模态对话框。
使用弹框形式会中断用户操作流程,但针对多步操作过程,应使用弹框。如果不想因为显示对话框而遮挡页面内容,应使用嵌入层形式。
模态对话框示例

悬浮窗提示框 #

为用户提供了附加信息,辅助用户决策接下来怎么做,换而言之,能让用户获得满足感和支配感,提高用户体验必要因素。
悬浮提示框示例
当用户把鼠标悬浮在某处内容上时,显示更多的信息,移出内容区后,悬浮窗立即消失

列表嵌入层-折叠展开 #

无论把弹框放在哪里,都会遮挡下方的信息。而嵌入层通过把内容直接插入到页面的上下文中解决了这个问题。可以为用户提供位于上下文的对话框。
列表嵌入层示例
位于上下文中,用户不必切换到另一个页面去操作,通过嵌入层直接修改并查看结果。
每个窗格的内容互不依赖,每次只需显示一个窗格,每个窗格都可以从逻辑上分成不同主题。,显示更多的信息,移出内容区后,悬浮窗立即消失

锚点 #

一种可以跟随滑动的标签,当页面元素过多时,可加入快速定位功能帮助用户快速跳转到指定位置,并能随时告知用户所在的位置。
锚点示例
避免一个页面上使用多组标签页。可把重要的内容放在第一个标签中,许多用户可能不会查看其它的标签页。

分页 #

分页是分割信息最方便最自然的方式。
为了让分页看起来不像页面切换,可以在切换内容的同时保持页面其他部分的稳定。分页不会导致页面刷新,而只会更新结果区域。保持上下文稳定能够创建更好的心流体验。
分页示例
如果内容实际上具有连续性,滚动比分页显得更自然。