产品试用
先找几个典型网页分步引导插件用一下:
原理分析
总体来说,可以看出插件功能还是比较简单,主要由以下几个功能要素组成:
- 提示框:定位在说明区域附件,用于呈现说明信息
- 位置跳转:自动跳转到要说明的区域,可通过获取元素位置并scrollTo过去就行
- 蒙板:突出显示要说明的区域,可通过设置z-index实现
接口设计
接口一般是一个操作数组,对应用户引导的操作步骤。其中每个步骤包含提示的位置(元素)和提示内容(文本或图片)。
界面设计
除了按照位置显示提示内容外,提示框往往还包含前后按钮和终止按钮,便于控制查看和随时退出。