小埋社区

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    【每日一闻】Axure:美化单选框复选框按钮

    艺术
    1
    1
    640
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Kevin
      Kevin 站长 last edited by

      先看下视觉效果(想怎么好看,完全看你的个人设计水平)

      复选按钮

      单选按钮

      开始制作,两种选框图层元素的是一样的,此处不做重复,拿复选框作案例
      [size3]1、 首先从元件库,拖一个复选框进来[/size3]

      [size3]2、画个圆角矩形,颜色随意,你自己喜欢[/size3]

      起名为“背景”(叫什么不重要,重要的是方便)
      [size3]3、画个选中状态[/size3]

      从元件库Icons里拖一个对号进来,起名为“选中”,调整合适大小,放到矩形的中间
      [size3]4、将矩形和对号编组,并起个名字[/size3]

      [size3]5、给原件添加交互动作[/size3]
      动作1:
      给刚刚的编组添加一个动作,动作如下


      鼠标点击时,切换复选框“原件”的选中状态
      动作2:
      给复选框原件添加动作,动作如下

      选中时显示“对号(选中)”,取消选中时隐藏“对号(选中)”
      [size3]6、最后,我们把原件整体打个包便于复制多个[/size3]

      这里需要注意的是,设定一下选中状态,如果为未选中,则先隐藏“对号”原件

      [size3]7、关于单选框的不同点[/size3]
      单选框因为没有反复点击,并且联动需要编组,所以会有一些不同,大家注意一下!
      首先是一定要给“单选按钮”原件设定编组名称

      然后就是编组的动作需要加上条件,表面重复点击


      单选框演示
      https://9h9y3w.axshare.com/#g=1&p=单选框可编组

      复选框演示
      https://9h9y3w.axshare.com/#g=1&p=复选框

      Via:京玉仕家

      1 Reply Last reply Reply Quote 0
      • First post
        Last post
      © 2017-2022 小埋社区 All Rights Reserved | 皖ICP备17016228号-2