Axure教程：登录·高保真设计

矩形、文本、（作为产品图标使用，没有也可以）、输入框、账号/密码icon。

了解登录界面的布局以及各种元素，用户在 *** 作时需要有哪些反馈，怎么做体验较好，本次内容先按基础的做法为你展示，学完相信你会做出更好的交互原型。

下面开始剖解制作步骤……

先用矩形画一个手机界面，尺寸为375667；·制作界面的状态栏、顶部栏，把顶部栏的文本元素补上去（这些没有可以在公众号输入“移动端元件库”）。

用矩形画出两个输入框的长、宽度，设置圆角（图中尺寸为28040、圆角2）；再放置一个文本框，设置文本提示文案；设置手机号输入框文本长度为13（后面做讲解），密码输入框长度为20（控制密码最长的长度）；·最后再用矩形、文本作为按钮，分别放置：登录、注册、忘记密码（不清楚的看图）。

·给两个输入框背景添加交互样式“选中的”效果，然后设置输入框“获取焦点时”设置背景为选中（true），“失去焦点时”设置背景为取消选中（false）。

·在添加手机号输入框中添加一个“清空”icon，设置用例“文本改变时”条件：文本框文本长度≥1时，显示“清空”icon，否则隐藏。同时设置清空按钮用例“鼠标单击时”，清空文本框的值。

为密码栏做一个密码显示/隐藏功能，首先找到显示/隐藏的两个icon，然后两个icon分别放在一个动态面板的两个状态里（默认隐藏）。同时密码的输入框也需要做一个动态面面板，两个状态一个显示、一个隐藏（默认隐藏），点击显示/隐藏时，切换密码输入框的显示状态。

设置点击登录按钮时会有各种场景如：手机号为空、密码为空、手机号或密码错误、登录成功。把四个toast放在一个动态面板内（默认隐藏），使用用例“鼠标单击时”分别有四个case，不同场景显示不同的toast提示。

做完以上的步骤基本上已经可以完成一个登陆界面的高保真交互原型了，下面再来了解一下进阶部分……

如果已经做完以上的步骤，可以还尝试做以下还有可以优化的地方。如手机号11位数的自动分段（344的格式），还有账号输入框输入完11位数后，自动换行到输入密码栏……尝试做一下。

在手机号输入框设置用例“文本改变时”，该输入框的值为以上函数，同学可以直接复制：[[Thistextreplace(‘ ‘,”)substr(0,3)concat(‘ ‘)concat(Thistextreplace(‘ ‘,”)substr(3,4))concat(‘ ‘)concat(Thistextreplace(‘ ‘,”)substr(7))trim()]]·

前面已经设置好元件文字长度，现在此处就不要再设置了。

完成，来看一下效果案例链接： >

        为什么称“启用情形”为交互的最后防线？因为某些奇奇怪怪的需求往往没有现成的逻辑可以使用，这时候往往需要使用启用情形来做判定和交互,如果启用情形配合变量函数交互还是满足不了，那可能这个需求Axure目前无法实现。个人看法，启用情形可以说是Axure交互系统中最为“复杂”的一块，倒不是因为其具体 *** 作步骤复杂，而是因为“何时用？”“该不该用？”“用到什么地步？”这三连灵魂拷问。有时一种需求可以通过多种方式实现，而使用启用情形进行判定的交互往往是其中最为麻烦的一种（每种情形下都要重复写一遍类似逻辑啊！）因而我在使用“启用情形”这一功能时往往本着“巧用”，“慎用”，“不得不用在用”作为使用原则。

                                                                       （⬇️图文无关）

        在原型制作中，出现像上图这种令人窒息的交互逻辑一般是因为功能的耦合度过高，即在进行一个元件的 *** 作同时，还要分别实现另一个或者另几个元件的 不同 动作。或者，我在进行这个 *** 作的同时会影响到全局变量，亦或是这个启用情形需要根据全局变量来判断是否启用。

        通常来说，使用启用情形这种并非我主动选择，而是需求让我不得不使用相对麻烦的启用情形。再举个简单的例子：比如我做了一个类似微信的即时聊天软件的原型，其中有一个需求就是我们点击聊天列表时，d出新的聊天窗口并且出现对应的好友头像、名字和列表中的聊天内容。下面借着这个需求稍稍偏题地讲多一点：

        首先我们来分析一下这个需求，实现的方法有很多种。最简单的实现逻辑就是每个用户新建一个有该用户的头像、名字、聊天内容的聊天窗口页面，并在每个用户的聊天列表单元中写入交互逻辑，点击时打开其对应的聊天窗口页面。那么问题来了，当仅仅两三个用户作为展示时尚且可以如此制作，如果列表中有十几个用户呢？难道要对应在做十几个页面吗？如果这个聊天列表能够动态增加，那么我们又无法动态增加其对应的聊天窗口了。

        第二种方式就是我不愿意使用的启用情形方式了。这种方式可以只建立一个聊天窗口页面即可，然后分别填写所有用户的头像、名字、聊天内容并设置为隐藏。当用户点击聊天列表时我们设置一个全局变量并将该用户名赋给全局变量。之后根据这个变量我们在聊天窗口页面中设置启用场景，分别填写逻辑：页面载入时——启用情形 if 全局变量=“A用户”，设置“A用户的头像”为显示，设置“A用户的用户名”为显示，设置“A用户的聊天记录”为显示；B、C、D……用户同理。这样我们就只需要新建一个聊天窗口页面并根据启用情形显示对应内容即可。

        刚才这种方法也有其相对的弊端，我们虽然只做了一个聊天窗口页面，但是我们还是将所有的信息，包括头像、名字、聊天内容像做千层饼一样的叠在了一起。而且最难受的是有多少个好友我们就需要填写多少遍启用情形。有没有更为简单的方法呢？

        当然，这就是第三种方法——使用中继器。我们新建一个聊天窗口页面，然后使用一个中继器，排布好头像、名字、聊天内容的位置，并将用户的头像、名字、聊天内容分别填写到中继器表格的三列中，填写完内容之后我们设置交互，设置中继器载入时在头像、名字、聊天内容中加载对应的列名。最重要的一步来了，我们要在内容加载后设置一个中继器的筛选功能，筛选条件以一个我们设置的全局变量为准，之后我们在聊天列表页面中点击聊天单元时将用户名赋值给这个全局变量。通过这一系列的 *** 作，我们既能借助中继器快速地将内容填写到聊天窗口页面中，同时也可以利用一个全局变量和筛选功能实现在点击聊天列表时，新建的聊天窗口页面中显示对应的内容。（这个案例我暂时先不附了，后面有时间可能会出详细的实战版教程）。

        通过这一个需求的三种实现方式，我们可以看出启用情形在使用时并不会使交互的编写变得简单快捷。而是当且仅当用其他方案显得有点“走投无路”时，启用情形作为最后的防线能够让我们至少可以先以不怎么优雅的方式实现需求。我这里只表述了启用情形在某些时刻的弊端，当然不能否认启用情形还是有很多相对基础且实用的使用方式，在很多教程中有非常详细的说明，有需要朋友可以搜索、查阅。

        至此，前两章的内容终于完结了，顺便把目录贴在下面吧，第三章教程可能会出的比较慢，还请理解。

——————————————————文章目录——————————————————

Chapter 1

开始前的准备

1 写在前面，我为什么要开Axure这个坑？

2 没有完整构想的产品上来直接开画就是耍流氓。

3 做之前先想好：高保真还是低保真？

4 移动端的相关规范，多多少少还是要知道一点点的。

Chapter 2

开始做吧,初学时懵逼的问题：

5 站在巨人的肩膀上：先装个元件库吧

6 技多不压身，元件多了真的压

7 文本框、文本域：如何获取输入的文字？

8 如何使用url及变量链接页面并实现跳转

9 关于命名规范：页面、元件、组。

10 什么时候该使用动态面板？

11 什么时候应该使用中继器？

12 交互、变量、函数我该怎么着手学习？

13 关于交互的最后防线——启用情形

Chapter3

实战教程，未完待续

鼠标单击跳转就是最基本的元件交互事件，可以用于鼠标点击时，也可以用于移动设备上的手指点击时。我们以的主导航（发现/关注/消息）跳转为例，说明元件的交互过程。

=======================================

Axure 90元件交互事件

单击时：当元件被点击时。

双击时：元件被鼠标双击时。

右击时：当元件被鼠标右键单击时。

按下时：当鼠标按下左键没有被释放时。

松开时：当元件被鼠标点击，这个事件由鼠标按键释放触发。

鼠标移动时：当光标在一个元件上移动时。

鼠标移入时：当光标移入元件范围时。

鼠标移出时：当光标移出元件范围时。

鼠标停放时：当光标在元件上方悬停时。

鼠标长按时：当鼠标按下超过2秒没有被释放时。

按键按下时：键盘上的按键被按下时。

按键松开时：当键盘上的按键d起时。

移动时：当元件移动时，在页面中的坐标位发生了变化。

旋转时：当元件旋转时。

尺寸改变时：当元件宽度或高度发生改变时。

显示时：当元件通过交互动作显示时。

隐藏时：当元件通过交互动作隐藏时。

获取焦点时：当一个输入项获取焦点时。

失去焦点时：当一个输入项失去焦点时。

选中改变时：适用于下拉框，当下拉框被选中的项发生了改变时，通常作为事件的一个逻辑条件。

选中时：当复选框或单选按钮被选中时。

取消选中时：当复选框或单选按钮取消选中时。

载入时：当元件从一个页面的加载中载入时。

文字改变时：当单行文本框或多行文本框中的文字发生改变时。

状态改变时：当动态面板被设置了“设置面板状态”动作时。

拖动开始时：当一个拖动动作开始时。

拖动时：当一个动态面板正在被拖动时。

拖动结束时：当一个拖动动作结束时。

向左拖动结束时：当一个面板向左拖动结束时。

向右拖动结束时：当一个面板向右拖动结束时。

向上拖动结束时：当一个面板向上拖动结束时。

向下拖动结束时：当一个面板向下拖动结束时。

滚动时：当一个有滚动的面板上下滚动时。

向上滚动时：当一个有滚动的面板，向上滚动时。

向下滚动时：当一个有滚动的面板，向下滚动时。

Axure 90元件交互样式

鼠标悬停：当鼠标悬停在元件上时，元件的显示样式。

鼠标按下：当鼠标按下元件时，元件的显示样式。

选中：元件被选中时的显示样式。

禁用：元件被停止使用时的显示样式。

获取焦点：当光标聚焦在元件（如文本框）上的显示样式。

=======================================

*** 作方法

第一步：

添加用例：在设计区域选中元件，在右侧交互面板中点击新建交互，我们会看到该元件可用的事件列表，点击其中的一个事件，点击右侧的用例图标或者直接选择想要添加的动作。

第二步：

插入动作：鼠标点击动作名称，开始添加动作，支持添加多个动作。当我们准备插入第二个动作时，点击用例下方的圆形十字架，开始插入更多动作。

第三步：

配置动作：动作选择完毕后，我们还需要为动作进行一些规则或属性的配置。比如，我们添加的动作是打开链接，在动作配置中，需要添加链接页面并选择页面打开的方式（当前窗口、新窗口/新标签、d出窗口和父级窗口），最后点击完成。

第四步：

设置交互样式：

选中元件，点击新建交互，可以进行悬停、选择、禁用等相关的交互样式设置；

第五步：

在预览或生成的HTML文件进行查看。

参考：>

以上就是关于Axure教程：登录·高保真设计全部的内容，包括:Axure教程：登录·高保真设计、【Axure笔记】8.如何使用url及变量链接页面并实现跳转、【Axure笔记】13. 关于交互的最后防线——启用情形等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！