Axure 学习案例：动态面板制作淘宝登录页面 |
您所在的位置：网站首页 › 淘宝手机端首页怎么设计 › Axure 学习案例：动态面板制作淘宝登录页面 |
|
效果分析 通过点击右上角的图标切换扫码、账号登录方式； 在扫码登录页面，鼠标移入、移出二维码时，二维码平行移动，并且弹出图片的动态效果；在账号登录页面，当文本框获取焦点后，输入框的边框为蓝色。失去焦点后，边框颜色为灰色。 淘宝登录原型预览元件组成介绍 扫码登录页面元件介绍。 动态面板_扫码登录.png账号登录页面元件介绍。 动态面板_账户登录.png实现步骤 设计动态面板 打开 Axure ，新建文件，在画布中拖入动态面板，并且设置动态面版宽度和高度均为 350。然后双击动态面板，打开面板状态管理窗口，为面板多增加一个状态（面板变为两个状态），并且将面板重命名，命名随意，方便个人理解即可。如下图显示，其中 scan_code 状态就是需要存放扫码登录界面的元件，user_name 状态就是存放用户名登录界面的元件； 动态面板管理界面设计 scan_code 页面 鼠标双击「scan_code」，打开scan_code页面； 将面板背景颜色调整为 #F0F8FA； 在页面中拖入一个矩形，选中矩形后右键，将矩形转换为自定义形状，调整图形形状为去掉右上角的五边形。去掉右上角是为了显示右上角的图标。 拖放一张电脑 icon 到右上角，图标可以在 iconfont 这个网站找到。 scan_code添加五边形和电脑图标插入二维码和手机图片，设置二维码图片大小为 140*140，将手机图片设置为隐藏。 插入二维码图片和手机图片设置鼠标移入时用例。第一个，设置鼠标移入二维码区域时，当前组件（二维码）移动，设置参数为：绝对位置、x=30，y=78，动画为线性、时间为500毫秒；第二个，设置等待时间300毫秒；第三个，显示弹窗图片，动画为逐渐，时间为200毫米。（思路是加上等待时间的300毫秒，二维码停止移动时图片完全显示出来） 设置鼠标移入二维码时水平左移 设置显示弹窗图片设置鼠标移出二维码用例。选中二维码，新增鼠标移出用例，当前组件（二维码）移动，设置参数为：绝对位置、x=110，y=78，动画为线性、时间为500毫秒；第二个，设置等待时间200毫秒；第三个，显示弹窗图片，动画为逐渐，时间为300毫米。（思路是当二维码移动将要接触图片的时候，图片开始隐藏） 设置鼠标移出二维码时水平右移 设置隐藏弹窗图片经过上面的步骤，scan_code 主要的交互效果已经完成，接下来就是将其他的文本元素补齐就好了，这些内容比较好理解，所以不过多讲述；补齐其他元件后，scan_code完整的元件目录如下； scan_code完整的元件完成上面的步骤之后，scan_code 页面的已经完成，看一下实际效果： scan_code页面的实际效果设计 user_name 状态 鼠标双击「user_name」，打开 user_name 页面； 同样的，将面板背景颜色调整为 #F0F8FA；跟前面一样，添加任意图形和右上角图标； user_name 添加五边形和半个二维码图标 设置用户名输入框。首先，插入icon文本，使用FontAwesome字体，（关于FontAwesome字体请移步：如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计，大小为37*40。第二，插入文本框，260 * 40，设置文本框属性隐藏边框，提示文字：会员名/邮箱/手机号。第三，添加矩形框，大小为298*42，并且放置在icon和文本框底部。 设置用户名输入框设置密码输入框。跟设置用户名输入框一样的形式添加密码输入框。 设置密码输入框6.设置文本框获取焦点后用例。选择用户名输入框，添加获取焦点时用例，用户名输入框底下的矩形框（用户名框）选中状态为Ture。在添加用例，当文本框失去焦点时，用户名框状态为False. 设置用户名输入框底下的矩形框为选中设置用户名框被选中时的交互样式。前面一步中，输入框获取焦点后，底下的矩形框（用户名框）就会被选中，所以需要继续设置用户名框被选中时边框颜色又灰色变为蓝色。（简单理解就是输入框获取焦点可以触发用户名框选中，用户名框选中就会变色。） 设置用户名框被选中时的交互样式 设置密码输入框获取焦点后的交互效果。跟用户名输入框一样设置密码输入框，达到相同的效果。完善页面其余的信息，完善后整个user_name状态下元件组成。 user_name元件组成user_name状态页面已经完成，整体的效果如下： user_name整体效果 设置点击右上角图标切换扫码登录和账号登录页面。 原型制作到这一步，基本已经完成，但是还没有起到动态面板的作用，关键的时候到了，接下来就是设置通过点击右上角的图标实现不同登录界面的切换。设置scan_code状态页点击右上角半个电脑转换为账号登录。选择右上角的电脑图标，添加一个单击用例，添加「设置面板状态」，配置动态中选中动态面板，选择状态为user_name。 为右上角电脑图标添加单击用例设置user_name状态页点击右上角半个二维码转换为扫码登录。跟上面同样的操作，选择右上角的半个二维码图标，添加一个单击用例，添加「设置面板状态」，配置动态中选中动态面板，选择状态为scan_code。 为右上角二维码图标添加单击用例最后，整个原型基本完成，可能还需要增加一些额外的细节需要继续优化，需要慢慢调整，但是基本符合淘宝登录界面，整体的预览效果如下。 淘宝登录原型预览总结这个原型涉及到的知识点 通过移入移出鼠标实现元件的移动、显示和隐藏之间的切换。 通过获取焦点实现其他的元件选中，并且实现被选中的组织交互样式的改变。 通过切换动态面板的不同状态实现不同页面的切换。原型文件下载地址： http://pan.baidu.com/s/1jIp4YmM |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |