Axure RP 案例(淘宝搜索框)

  1. 拖入矩形1,设置文本为宝贝,设置圆角半径为10,取消左下和右下方的圆角半径,设置字体为红色,取消矩形边框。Axure RP 案例(淘宝搜索框)_第1张图片
    Axure RP 案例(淘宝搜索框)_第2张图片
  2. 设置选中样式字体颜色为白色、填充颜色为橘色。
    Axure RP 案例(淘宝搜索框)_第3张图片
  3. 添加鼠标单击时事件,单击时标记当前元件为选中状态。Axure RP 案例(淘宝搜索框)_第4张图片
  4. 复制矩形,修改文本为天猫和店铺。Axure RP 案例(淘宝搜索框)_第5张图片
  5. 默认将宝贝设置为选中状态。Axure RP 案例(淘宝搜索框)_第6张图片
  6. 选中所有矩形,设置选项组名称。Axure RP 案例(淘宝搜索框)_第7张图片
  7. 选项卡效果如图Axure RP 案例(淘宝搜索框)_第8张图片
  8. 拖入一个白色矩形,设置圆角半径,设置边框线宽。Axure RP 案例(淘宝搜索框)_第9张图片
  9. 在矩形上拖入一个文本框,取消边框,设置提示文字。Axure RP 案例(淘宝搜索框)_第10张图片
    注意:提示文字中的放大镜是字体而不是图片。
    Axure RP 案例(淘宝搜索框)_第11张图片
  10. 添加一个文本标签,并设置文本内容为相机。Axure RP 案例(淘宝搜索框)_第12张图片
  11. 复制上方的圆角矩形,取消左边的圆角并取消左边的边框,设置填充色为渐变的橘红色,字体颜色为白色。Axure RP 案例(淘宝搜索框)_第13张图片
    Axure RP 案例(淘宝搜索框)_第14张图片Axure RP 案例(淘宝搜索框)_第15张图片
  12. 将制作出的搜索放到搜索框的右边。Axure RP 案例(淘宝搜索框)_第16张图片
  13. 示例效果。Axure RP 案例(淘宝搜索框)_第17张图片

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