Axure RP 案例(步骤)

本案例是模仿CSDN提现步骤。完成的步骤圆形边框为绿色圆形内容为绿色对号,对号字体为Fontawesome完成步骤的后面的水平线为绿色,下一个步骤的圆形为黑色,后面的其它步骤均为浅灰色。
在这里插入图片描述


  1. 拖入1个圆形,宽高为20、设置边框宽度、设置边框颜色为浅灰色。在这里插入图片描述
  2. 在灰色圆形下拖入一个文本标签,设置字体颜色为灰色,文本和圆形左右居中对齐。Axure RP 案例(步骤)_第1张图片
  3. 复制圆形和文本,先选中4个圆形进行水平分布,然后对每个步骤进行左右居中对齐使得文本和圆心对齐。Axure RP 案例(步骤)_第2张图片
  4. 分别为圆形填充数字,并拖入3条水平分割线,设置分割线线宽和颜色,并将分割线至于底部。注意文中的对号是字体Fontawesome(需要独立安装)。Axure RP 案例(步骤)_第3张图片
  5. 选中所有元件转为动态面板,进入步骤1,设置步骤1对应的状态。Axure RP 案例(步骤)_第4张图片
  6. 复制步骤1命名为步骤2。Axure RP 案例(步骤)_第5张图片
  7. 复制步骤2命名为步骤3。Axure RP 案例(步骤)_第6张图片
  8. 复制步骤3命名为步骤4。Axure RP 案例(步骤)_第7张图片
  9. 添加一个下一步按钮,并为按钮添加单击事件切换到下一个状态即可。Axure RP 案例(步骤)_第8张图片
    Axure RP 案例(步骤)_第9张图片

Axure RP 案例(步骤)_第10张图片

你可能感兴趣的:(#,Axure,RP)