实战案例2：模拟百度账号登录界面设计,实现边框变色及超链接

案例2：模拟百度账号登录界面设计

（1）元件准备：6个矩形，2个文本框，1个复选框，1张图片

（2）分析：这个界面设计主要包括文本框的边框变色及超链接的设置

                a.输入框的样式在两种不同状态下切换，当点击时边框变为蓝色，反之蓝色消失，这个效果可以通过交互样式实现；

                b.文本框获取焦点时，呈现选中的样式；

                c.文本框失去焦点时，呈现未选中的样式；

                d.超链接的实现。

补充说明：

本案例中的输入账号及密码这两个“输入框”是指矩形边框与文本框共同的一组内容，而非文本框元件。

---

---

操作步骤：

1.“输入框“”组合输入实现：

首先选择一个矩形，调整到适当大小，这里为了区分我们将它命名为border01,然后选择一个文本框，在属性的提示文字中填写“电话/邮箱/用户名”，将它拖到矩形当中，使它尽量与border01大小吻合，并将该文本框命名为“隐藏文本框01”；同理密码输入框的矩形命名为border02，在属性的提示文字中填写“密码”，并将文本框命名为“隐藏文本框02”，为了使界面美观，我们将两个文本框隐藏起来，具体操作如下：

2.边框变色：当用户点击输入框时，边框变为蓝色。

 （1）边框颜色选择的具体操作：

（2）为边框颜色填充添加交互行为：

（3）当不在选中边框时，边框颜色恢复初始状态，要想实现这个功能，需要在“失去焦点时”添加一个交互行为，添加方式与“获取方式类似”，添加完成之后如下所示：

 

2.文本框的隐藏：

（1）未隐藏之前效果：

（2）双击文本框，勾选属性中的隐藏边框，隐藏之后如下所示：

3.选择一个复选框并添加交互行为，让用户可以选择下次是否自动登录，如下所示：

 

 添加一个按钮，命名为登录按钮，并修改按钮标识为“登录”，这里省略步骤。

4. 添加超链接，选择两个矩形，命名为超链接01，在鼠标单击时的交互中添加超链接，操作如下所示：

 “立即注册”添加超链接的方式与“忘记密码“”类似：

5.添加一张百度标识图片及一个矩形来提示文字，将标识图片直接复制到想要粘贴的位置，选择一个矩形，在该矩形中输入“用户名密码登录”，并修改该矩形边框的颜色为白色，效果如下：

6.预览效果与登录百度账号的页面类似：

当点击“忘记密码”或者“立即注册”会跳转到设置的链接，这里我是直接复制了百度账号跳转的链接，就不展示出来了。

经过这个案例的实操，我发现要模仿别人的页面，花的时间也不算特别多，但是要想将整个操作过程全部完整的描述出来还是需要花很多时间的， 中间因为种种事情间断了很多次，导致搞了很久，今天终于把它完全整完了，欢迎大家指正。