输入边框&原型设计

从产品原型，到产品迭代，中间经历多少产品工程师拍脑袋创造出来那么多页面样式以及逻辑关系。

当然最终还是要通过我们这些工（cheng）程（xu）师（yuan）来实现具体的功能，但是在产品设计阶段，我们也能发挥死的差不多的脑细胞，迸发我们的创意。

广志在这里认为：产品创意谁都有，就是我们没有付出那么多的时间及精力去实现那些酷炫的思维方式。

推出第一期的原型设计：输入框的动态。（灵感来源生活，虽然现在都快用烂了）

硬件环境：win10+Axure RP pro 7.0    **如何安装不再赘述**

用处：很多页面中都有输入的入口，在app中已经有很多动态的动画来实现更加有趣的输入效果，这里介绍的为网页版的输入框。

效果：包括最基本的输入框变化和提示文字变化。

1----新建文本提示和输入框：

简单的在元件库中拖拽出来就好了，简单到不能再简单了，兄弟你这要不会，别当我兄弟了。

 

2-----拖拽一个动态面板，要注意大小，建议比输入框略大，当然这个东西是可以调整的

3------设置动态面板的属性，先要命名，然后设置两种情况，当然有很多种方法来实现打开“管理面板状态”窗口

a。鼠标双击动态面板区域（最快，最方便）

b。鼠标右键动态面板区域，选择“管理面板状态“

4---------为面板状态添加效果。双击"未输入"，为未输入添加 状态

5------用同样的方法添加输入状态的效果。双击“输入”，想要切回我们的index，注意面板的提示，上面的图我已经框出来了。为了不会发生位置偏移，我直接复制了“未输入”状态的矩形原件到“输入”状态。

、

6----最重要的一步到了，首先要隐藏我们的文本框。接着要为文本框的获取焦点和失去焦点的交互添加效果

首先是获取焦点，就是鼠标点击输入框时

这里主要为输入状态添加元件交互，展示效果基本就是点击输入框，输入框变蓝，不点击状态，输入框为输入的颜色。需要注意的是我们添加元件交互的是输入框。不是动态面板。

然后是失去焦点的状态，即为鼠标点击了除了输入框的位置。

相同的操作，相同的

7-----添加过元件交互之后，要把输入框的框线隐藏并且要把输入框置为顶，为了能直接展示出未输入的状态而不会遮挡我们做好的动态面板我们要把输入框的背景颜色改为透明。（如果你仔细观察的话，会发现输入框你的外框线和普通的矩形框线有区别）

这里对比一下这一步的区别：

到这里基本就已经完事了，可以点击预览按钮或者按F5来实现预览现在的功能状态。

难度概要：注意矩形边框的位置

  注意文本框的层级关系

  注意状态变化时的边框颜色变化

  文本框位置可以调整，避免闪动光标与框线左竖线重合

人人都能做产品经理么？

答案自在人心