原副标题：【Axure 此基础教程】居然你是这种的unlock
自学 Axure 只不过很难上手，不过要娴熟应用领域 Axure，最重要的是专业委员会综合性应用领域 Axure 的各式各样该事件和优点，责任编辑译者透过unlock这个单纯的案例，传授怎样综合性应用领域 Axure 的各式各样优点。
责任编辑是一则所写会弹完 Axure 此基础的初学者听众，元老切勿喷，主要为刚上手 Axure 的产品副经理提供一种综合性应用领域的路子，因此责任编辑我不是传授怎样绘出出两个声效的unlock，而要如是说透过甚么模块的甚么优点来顺利完成甚么样的机能的路子来如是说。
一、静态液晶拖曳该事件
具体来说来绘出unlock的雏型，用【正方形】绘出出unlock的罐子，用【方形】绘出工程进度滑鼠，接着滑鼠将方形【转化成为动态液晶】
具体来说他们来顺利完成的就是握住滑鼠的这时候能进行以内拖曳的机能，即使静态液晶有两个拖曳的该事件，因此这也是要将滑鼠转化成为静态液晶的其原因，接下去开始Jalgaon，操作方式如下表所示：
特别注意，即使unlock一般都是水准拖曳的，所以这儿终端要优先选择【追随水准拖曳】，接下去他们自动更新呵呵看一看在应用程序中的效用：
拖曳的效用实现了，但unlock的滑鼠如果是在unlock外部拖曳的，这儿却能拖到unlock外部去，他们对滑鼠的拖曳该事件稍稍改建呵呵，给拖曳的覆盖范围加两个界线，他们能看见，拖曳的姿势中，有个【加进界线】的机能：
登出来的这时候，发现能给拖曳的模块减少前后以内的边界线，这儿他们如果是要给滑鼠减少【右侧】和【右侧】的边界线，但关键性是，边界线怎么来确认呢，他们来预测呵呵：
如上图，如果他们要确保滑鼠在unlock罐子覆盖范围内活动，就需要确保滑鼠向左终端时，滑鼠的 x 坐标不会超过unlock罐子左边的 x 值，向右终端时，不会超过unlock罐子右边的 x 值，左边的 x 值好确认，实际上就是unlock罐子的 x 值，从图中他们能看出，unlock罐子的 x = 300，因此，他们左边界线就确认了；
右边界线没法直接看出来，但是他们能发现，右边界线的 x 坐标实际上就是左边界线的坐标+unlock罐子的宽度，同样，他们从图中能看见，unlock的宽度 w=300，因此，右边界线 = 左边界线x + unlock罐子宽度 w = 300 + 300 =600，以内边界线确认了，他们来设置呵呵：
再来看一看效果：
效用对了。
二、函数表达式
目前这个unlock是简陋而粗糙的，看起来也不直观，一般unlock右侧表示已经走完的工程进度，右侧表示还剩余的工程进度，已经走完的工程进度一般会用两个填充色来表现，接下去他们来画出这个效用：
这个就比刚刚那个看起来更加直观，但目前这个unlock不会随着滑鼠的拖拽变化，因此，他们要给这个滑鼠加进两个交互，让滑鼠以内拖曳的这时候，unlock能跟着滑鼠变化，这儿他们能给滑鼠【拖曳时】加进两个该事件，就是让工程进度条尺寸跟着变化：
如上图能看见，设置尺寸要求他们给定两个参数，分别是元件的宽度 w 和 高度 h，以及设置锚点。
先解释呵呵这个锚点，锚点的意思就是以哪个位置作为原点来进行缩放，比如图中优先选择左上角，就表示当图形在进行缩放的这时候，左上角的位置是固定的，不会随着元件的缩放而变化，而他们在拖拽的这时候，是需要右侧固定，右侧进行缩放的效用，因此这儿的锚点如果是优先选择右侧中间的点。
再说说宽度和高度，他们这儿是不需要改变unlock的高度的，因此高度这儿他们按默认的20就能，不用改；而宽度，由于滑鼠是静态变化的，因此unlock的宽度 w 也如果是随着静态变化，具体来说他们得知道unlock的宽度跟滑鼠的关系：
透过上方图片，他们很难得出结论，unlock x 是已知的，就是300，而滑鼠是活动的，因此滑鼠的 x 是活动的，因此，这儿就需要用到函数表达式来表示滑鼠 x，他们先登出来宽度 w 旁边的 fx：
就弹出了下面的弹窗：
这儿的“119”是当前unlock的宽度，是固定的值，他们不需要，把它删掉，接着点击【插入变量或函数】，输入 x：
能看见自动加进了两个表达式，This 表达的就是当前元件，也就是滑鼠，This.x表达的就是滑鼠的 x，现在有了滑鼠 x，他们还需要减去unlock的 x，也就是300：
保存后就设置好了，他们来看一看效用：
效用是有了，但有没有感觉这个unlock奇奇怪怪的，拉到最右边的这时候，unlock也没有办法填满，中间还隔着两个滑鼠：
因此他们能对这个表达式再做两个优化，就是再加上当前滑鼠的宽度，加进方法类似刚刚加进滑鼠 x，加进完的设置如下表所示：
这次他们再来看呵呵效用：
怎么样，是不是你想象中的完美样子？
三、局部变量
虽然图形看起来很直观，但是却始终没有数字精确，接下去他们就来做个百分比显示的机能，精准显示当前unlock走了多少。先在unlock右侧加进两个占位文本，待会用来显示百分比：
unlock百分比好算，就是拿已经走完的unlock的宽度 / 完整的unlock罐子的宽度 * 100%就能了，
完整的unlock宽度他们是能知道的，但已经走完的unlock宽度是静态的，他们怎么知道呢？是不是能用他们上面讲到的函数表达式来做呢？那就来试试，他们给百分比的占位文案【设置文本】，文本的值同样采用函数表达式（fx）的方式：
他们先用上面相同的方法加进宽度，接着除以完整unlock的宽度300：
保存后来看一看效用：
可以看见，拖曳的这时候，文字确实变了，但是这个数值明显跟实际工程进度不一样，而且数值是固定的，并不会随着unlock的拖曳而变化，他们来预测呵呵其原因：刚刚他们讲过，This 指代的是当前元件，他们是在滑鼠里面的拖曳该事件中设置的，因此 This 指代的就是滑鼠，因此上述图片实现的效用是用滑鼠的宽度/300，得出来的显然不是他们要的结果，那他们这儿要怎么获得已走过的unlock的宽度呢，这就涉及到另外两个概念叫【局部变量】了。
他们看见，上述图片下半部分有个【局部变量】的区域，他们点击【加进局部变量】，发现它自动加进了两个 LVAR1 的变量：
由于他们是需要获得unlock这个元件，因此第二个字段类型他们优先选择【元件】，【目标】优先选择unlock：
这个这时候，他们能理解为，LVAR1 就等同于unlock这个模块，这种就好办了，他们如果需要获得unlock的宽度，就类似上述的 This.width 一样，用 LVAR1.width 就能了：
保存之后再来看一看效用：
这下就对了，但是他们想要的是百分比，不是小数，他们只需要对上述的表达式做两个小小的优化即可，把获得的数值乘以100，接着再加上%，特别注意，即使%是拼接上去，不参与数值的运算，因此要放在[[]]外面，%放在[[]]里面是两个错误的表达式，无法正确计算出结果：
再来看一看效用：
看起来一切都很完美，但美中不足的是，在某些工程进度下，百分比的数值过长，如果他们只需要保留小数点后2位，能怎么做呢？
Axure 两个函数，叫 toFixed(decimalPoints)，能取某个小数的小数点后几位，decimalPoints 表示要取的位数：
他们改呵呵表达式：
再看呵呵效用：
到这儿，他们的unlock就画完了，但是……
四、通用化设计
有这时候他们的一些设计做起来复杂，但是通用性又很高，在很多设计作品中都能重复用到，他们希望在设计其他产品的这时候，能直接复制粘贴，做一些位置和尺寸的微调就能用，这就叫通用化设计，他们来看一看他们刚刚做的unlock是否是通用化设计，我把unlock换了个位置，并拉长了unlock罐子的长度，他们看呵呵效用：
这已经完全不能看了，拖曳的这时候滑鼠乱飘，无法拖曳到最左端和最右端，百分比计数也是完全不对的，等于说他们上面所做的设置都无效了，这只不过是即使他们在做这个unlock的这时候，很多的位置和尺寸的数值都是固定的，也就是说，这个unlock只有在特定位置和特定宽度下才能按照他们所设定的逻辑呈现，一旦位置或尺寸任意两个数值发生了变化，都可能导致原来的设计出现问题，那怎样才能改成通用化设计呢？
实际上，两个元件要复用，在复用的这时候最可能调整的，除了样式，就是位置和尺寸，样式不会影响机能的实现，剩下的就是位置和尺寸，如果要使两个元件在调整了位置和尺寸后还能正常使用，那么这个元件的位置和尺寸参数就要做成静态的，结合他们上面讲到的局部变量，他们来对这个unlock做两个通用化的调整。
具体来说是拖曳这时候滑鼠的边界线，上方的动图能看出，由于他们把滑鼠边界线设为固定值，那么滑鼠就只能在固定的区域内活动，他们要确保在改变位置和尺寸后，滑鼠依然能够正常识别unlock的真正边界线，就需要把这个边界线设成静态的。在前文中他们已经总结过，滑鼠的左边界线=unlock罐子的 x 值，右边界线=unlock罐子 x + unlock罐子宽度 w，他们来把下方滑鼠的以内边界线改成函数表达式：
下方是滑鼠左边界线的函数表达式：
接着是滑鼠右边界线的函数表达式：
保存之后他们看一看滑鼠的拖曳是否正常：
这种，滑鼠的拖曳就恢复成他们要的效用了，但是已经走完的unlock还是错的，不会追随滑鼠，他们也将unlock的参数改成函数表达式：
这儿unlock的高度没有影响到他们的设计，因此高度维持不变，他们对宽度进行改建，将unlock罐子的 x 值换成静态的：
保存看一看效用：
现在unlock正常了，但是百分比还是错误的，他们对百分比的函数表达式也做两个调整，将unlock罐子的宽度也换成静态的：
再来看呵呵效用：
为了验证这个unlock是不是能真的能通用化，他们再重新调整它的位置和尺寸看呵呵：
能看见，这个unlock依旧是正常的，这种他们就顺利完成了unlock的通用化设计，这才是我真正想分享给你的通用化unlock设计，各位听众如果有看不明白的地方欢迎在评论区留言指出。
责任编辑由 @产品锦李 原创发布于人人都是产品副经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
