Axure中制作高保真必填文本框

 时间:2024-10-12 08:45:17

1、制作输入框因为边框的尺寸是按照输入框来的,所以我们先做输入框。打开Axure,在元件库表单元件下拖入一个文本框,命名为“输入框”,在元件属性中勾选隐藏边框,设置宽X高为198X28。

Axure中制作高保真必填文本框

3、制作边框—焦点状态在元件管理面板,右键点击“普通”状态,点击“复制状态”,将新状态命名为“焦点”,双击“焦点”状态,设置边框颜色为“#0033FF”,设置阴影,偏移X,Y均设置为0,其他保持默认。

Axure中制作高保真必填文本框Axure中制作高保真必填文本框

4、制作边框—必填状态在元件管理面板,右键点击“焦点”状态,点击“复制状态”,将新状态命名为“必填”,双击“必填”状态,设置边框颜色为“#FF3300”。至此,边框的状态设置完毕,接下来设置交互。

Axure中制作高保真必填文本框Axure中制作高保真必填文本框

6、交互设置—失去焦点(未输入时)双击“失去焦点时”,弹出对话框,点击“添加条件”,设置“元件文字长度”“当前元件”“&造婷用痃lt;=”“值”“0”,确定。点击“设置面板状态”,勾选“边框”设置状态为“必填”,进入和退出动画为“逐渐”,时间“500”毫秒,确定保存。

Axure中制作高保真必填文本框

7、交互设置—失去焦点(已输入时)再次双击“失喉哆碓飙去焦点时”,弹出对话框,点击“添加条件”,设置“元件文字长度”“当前元件”“>”“值”“0”,确定。点击“设置面板状态”,勾选“边框”设置状态为“普通”,进入和退出动画为“逐渐”,时间“500”毫秒,确定保存。至此,交互设计完成,接下来进行组合。

Axure中制作高保真必填文本框

8、组合元件选中“边框”,点击右键,选择“顺序>置于底层”,记录边框的x和y坐标。选中“输入框”,设置其x坐标为边框x+1,y坐标为边框y+1。同时选中“边框”和“输入框”,按“ctrl+G”进行组合。

Axure中制作高保真必填文本框Axure中制作高保真必填文本框Axure中制作高保真必填文本框
  • Fireworks软件中如何使用变形工具
  • Axure制作:验证强密码
  • axure怎么统计多行文本框输入的文字数?
  • Axure如何制作带提示信息的输入框
  • Axure原型工具如何制作随机验证码的效果
  • 热门搜索
    安丘旅游景点大全 世界旅游景点排行 正定旅游景点大全 南华寺旅游攻略 丽江最佳旅游时间 毛里求斯旅游价格 上海旅游集散中心官方网站 去韩国旅游注意事项 肯尼亚旅游价格 旅游地产发展趋势