产品笔记一：使用axure8.1制作手机app底部导航栏效果

使用工具：Axure pr 8.1版本。

制作效果如下图：选中任意tab切换到对应界面，以及选中状态的改变。

作为一名初学者，元件的组合选中以及拖动，动态面板的使用，中间还是有几个细节需要注意的，笔者初学自己研究了好久，百度并没有用，也许是关键词不合适，总找不到合适的答案。好，废话不多说，下面开始 *** 作步骤。

1.1、创建导航栏母版，axure界面左侧底部母版栏，点击加号创建一个母版并命名。

1.2、双击母版，进入母版编辑页面。在这里进行那些拖动等 *** 作啦。

2.1、我们观察到导航栏总共5个tab组成，每个tab里有两个元素一张图片，一个文本标签。但是为了可以方便的设置宽高调整距离均分屏幕并且组合拖动设置点击状态等，我们将图片和文本放到一个矩形框里。

2.2、拖动一个矩形到界面上，拖动一张图片原件，一个文本标签元件。如下图，调整大小样式等。

2.3、要想整体拖动这三个元件，那么就要将这三个元件组合在一起。按住command键（我用的mac），选中矩形，图片，文本标签 右键-->点击组合，即可将是哪个元件组合在一起。

2.4、点击组合元件右键-->转换为动态面板。双击它，会d出下面的d窗，输入动态面板名称。添加状态：选中以及未选中两个状态。你可以先添加选中，然后双击选中状态进入编辑选中状态页面，添加选中时的图片，文字以及文字颜色等。然后回到动态面板点击加号旁边的复制可以复制选中的状态，并命名为未选中，双击未选中去修改里边的图片以及文字颜色等即可。这样间距之类的就不用去重复设置了。

2.5、其他四个tab只要复制第一个创建编辑好的动态面板去修改里边的状态的图片和文字就好了，就不用重复创建了。

2.6、拖动到底部导航栏矩形内部调整好间距均分屏幕。

3.1、给每个tab点击时要进入对应的页面，那么我们在下图中添加5个对应的页面。

3.2、选中第一个tab，在左侧首页属性，点击鼠标单击时。如下图：

点击链接，打开链接，当前窗口，点击首页，确定。

3.4、至此底部导航栏母版制作完毕。然后最后一步，将母版应用在各个页面上。点击右侧底部导航栏，右键-->选择将母版添加到页面中。选择全部全部页面即可。

点击首页Tab，选中首页时，其他tab的状态需要变成未选中。这个是如何改变呢？通过页面载入时，设置各个tab的状态

4.1、比如点击找车页面，右侧属性，点击页面载入时。如下图：

4.2、双击页面载入时，d窗，选择设置面板状态，找车选择选中状态，其他选择未选中状态。其他tab相同设置。如下图：

至此，所有步骤完成。

发布预览一下就可以了。

1、我们先打开我们的axure软件，点击新建，然后将我们的手机模型拖拽进我们的axure，点击我们的“动态面板”将其往编辑窗口拖拽。如下图

2、创建好我们的动态面板之后，按住“ctrl+c”将其复制下来，然后双击我们的“外层动态面板”下面的state1，然后按住“ctrl+v”将我们的“外层动态面板”复制下来

3、然后双击我们的“内层动态面板”下面的state1，然后点击“矩形”，并将其图案拖拽到我们的内层动态面板中，调整好位置，并给其填充颜色。

4、在拖进一个占位符，并调整其位置，如图所示。

5、然后点击我们导航栏上面的“外层”，并将我们的“内层”图案拖拽平移一段距离，如下图。

6、然后点击“矩形”，用来量我们“外层”和“内层”之间的距离，方便我们的侧边栏的移动。如下图。量出距离之后，即可将其删掉。

7、点击我们导航栏的“内层”，然后在我们选中我们刚才的“占位符”，然后点击我们的“鼠标单击时”选项，如下图。

8、进入我们的“单击鼠标时”之后，点击“移动”，勾选“内层”，然后在下面的“y”内输入我们刚才量出来的距离，即“-134”

9、点击上面的“添加条件”选项，选择“变量值”、“！=”“0”，然后点击确定。

10、再次重复第八和第九步骤，“y”值改为“134”，其他不变，然后点击上面的“添加条件”选项，选择“变量值”、“==”“0”，然后点击确定。

11、然后再次点击我们的“case1”，找到并点击下面的“设置变量值”，勾选“变量”，然后将变量值设为“0”，点击确定，“case2”我们也重复此动作，只是在设置变量值时，不设为0即可。

12、最后，我们可以预览我们做出来的效果了，我们按住F5，或者点击上面的“预览”，进入网页之后，我们上下滚动鼠标即可看出我们的效果了。

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

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

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

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

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

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

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

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

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

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

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

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

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

完成，来看一下效果案例链接： https://fm3meu.axshare.com

Donny，微信公众号：UE_diary，人人都是产品经理专栏作家。工作两年多的产品交互设计师，不定分享一些产品交互细节。

题图来自Unsplash，基于CC0协议

---