2018年08月_Leatrice

12月 09月 08月

原创实战案例11——复选数量统计

当选中一个复选框时，“一键订阅[0]”的[0]就会自动加1，当取消选中时，就会自动减1。当点击“一键订阅”按钮时，全选所有复选框。如下图所示：交互逻辑如下： ...

2018-08-30 16:18:02 415

原创实战案例10——模糊搜索列表

设计逻辑：数据库里面增加了关键词列，当检测到输入框中有文字变化时，就检测关键词列中是否包含输入框中的内容，如果有就显示出关键词，当鼠标选中相应的关键词，输入框的内容就变成选中的关键词。如下图：交互设计： ...

2018-08-30 14:20:43 792

原创实战案例9——从不同方向滑入

如上图片，当鼠标从左侧移入时，从右侧滑入一图片，当鼠标从左侧移出时，该图片向右移出。如下图示：同理鼠标从右侧移入，从顶部或者底部移入都有对应的图片往相方方向移动。准备元件：底部图片，动态面板（state1为空透明，state2为新的图片）交互设计：难点在于怎么判断鼠标从哪个方向移入，对此参考了一种方法：在鼠标进入面板区域时，鼠标所在的位置，与面板的四个边界只有一个方向距离最...

2018-08-30 10:59:51 305

原创实战案例8——左侧菜单项滑动

该原型主要实现几个功能：（1）点击主菜单图标时，弹出左侧菜单项。（2）当鼠标在左侧边缘处往右拖动时，如果拖动速度快（200ms以内），则显示左侧菜单栏；如果拖动速度慢，如果已经将左侧菜单拖动出了1/2，就显示左侧菜单，否则，不显示。（3）当显示左侧菜单时，可以往左拖动隐藏菜单。具体原型设计如下：（1）利用主页面手机外壳元件的内嵌功能，内嵌页面1。（2）主菜单的点击事...

2018-08-29 23:52:09 826

原创实战用例7——50秒验证码验证

初始界面：当点击验证码时：（1）显示正在获取验证码的旋转图片；（2）60秒倒计时难点在于如何做60秒倒计时？为此，小编在空白区域内加了一个动态面板，该面板包含2种状态，并且创建了一个全局变量值为60。当点击“获取验证码”的时候，设置动态面板循环切换2种状态，状态每改变一次，全局变量就减一，同时将该全局变量的值设置到“获取验证码”的这个文本里。 ...

2018-08-29 23:41:58 486

原创实战案例6——商品图片变大

这个原型设计逻辑如下：（1）最下一排是月饼选项，当鼠标移入哪一项，哪一项就会显示红色的外框。（2）当鼠标选中哪一项的时候，上面的展示区就会显示对应的图片。（3）当鼠标移入展示区图片时，展示区有一个矩形的遮挡部分，该部分以鼠标为中心并且随着鼠标移动。（4）当鼠标在展示区图片上随意移动时，右侧放大区域会显示遮挡区的图片部分。难点：（1）如何设计遮挡区，并且随鼠标移动？ ...

2018-08-29 23:34:35 200

原创实战案例5——滑动吸附顶部和回到顶部

这章节我们将讲解两个内容：（1）滑动吸附顶部（2）回到顶部的使用先来看第一个：滑动吸附顶部。下图是原始图片：窗口往上滑动到一定位置后（我们在里面增加了热区来做检测），红色边框部分会保持不动思路：可以在窗口滑动动作里增加一个事件，判断窗口滑动到热区的top时，红色边框部分就不移动了。具体事件请参考如下图接着我们来分析如何“回到顶部”。首先设计的逻辑是这...

2018-08-28 23:37:45 998

原创 Axure实战案例4——指针导航

今天主要讲解如何使用母版和函数来制作导航。下图是一个导航栏，“知识中心”、“流程中心”、“用户中心”分别对应三个页面page1 page2 page3。 page1 page2 page3 思路：三个页面都有统一的导航栏（除了三角符号），所以应该将其做成一个母版，就是抽取出共性出来。那么怎么保证在点击任何一个选项的时候都能切换到正确的页面，并且那个页面也显示正确的三角形位置呢...

2018-08-28 23:24:23 2426

原创 Axure实战案例3—商品切换功能

这一章节主要讲如何使用函数来制作商品切换主要有三个部分：翻页功能、商品展示区、商品项点击“上半角”，商品展示区会向前翻页，同时商品项中会选中对应的商品。点击“下半角”，商品展示区会向后翻页，同时商品项中会选中对应的商品。点击“商品项”中的某一张图，商品展示区都会对应显示被选中的那张图。首先“翻页”功能可以使用动态面板的来设计，动态面板设置4种状态，分别放置对应的商品图。而商品项...

2018-08-28 23:08:09 625

原创 Axure实战——改变元件尺寸、增减商品数量、图片边框移动

改变原件尺寸增减商品数量图片外框移动 This:标识当前元件对象，指事件交互所在的元件 Target：表示目标元件对象，指case动作中所控制的元件 width：获取元件对象当前的宽度，使用方法“[[元件对象.width]]” height：获取元件对象当前的高度，使用方法“[[元件对象.height]]” 1、改变原件尺寸点击之前：点击之后：设置鼠标点击事件，...

2018-08-27 22:58:52 5295

原创 Axure实战案例——页面设计

原型图核心页面说明文档修改记录在制作原型过程中，随着需求和交互流程的变动，需要不断的调整，优化，调整原型，这时建议对对rp文件版本进行控制，标识哪个版本新增/修改/优化了哪些功能，以便以后的查看和跟踪，有些类似word文档的修订记录。流程图流程说明，主要是通过流程图（具体工具可以是Viso），来说明本次功能需求的核心业务流程，以本次项目为例，主要包括三个流程，分别是：找回密码、登...

2018-08-26 16:04:10 25878 1