需求分析

（1）初始状态：滑块在最右侧，并且显示“ >> ”，“ 下一步 ”按钮禁用（灰色）；

（3）当滑块移动到最右侧时候，滑块上面显示”ok”，按钮变成可用（白色）；

设计思路

（2）滑块只能在滑道里面移动，需要设置滑块移动范围不能超过滑道；

原型设计

（2）把滑块slider转换为动态面板。

（4）当然我们还要拖入一个输入框，作为手机号码输入框。

交互设计

（2）当拖动结束时候，判断是否已经拖动到最右侧，如果拖动到最右侧，就把“下一步”按钮设为可用状态。

（4）设置按钮下一步的交互样式，当禁用的时候，用灰色填充。

nerror="javascript:errorimg.call(this);">

本文由 @马白龙 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议