Axure
Leatrice
sunshine!
展开
-
实战案例11——复选数量统计
当选中一个复选框时,“一键订阅[0]”的[0]就会自动加1,当取消选中时,就会自动减1。当点击“一键订阅”按钮时,全选所有复选框。如下图所示:交互逻辑如下:...原创 2018-08-30 16:18:02 · 408 阅读 · 0 评论 -
Axure内联框架
如果想要保持页面的外部框架不变,根据菜单选择不同的页面在内部框架里显示,可以采用内部框架这一元件。如下所示:可以自定义页面1~页面3,当点击不同选项时,选择如果想每天学一点新的知识,敬请关注微信公众号微信扫一扫关注该公众号...原创 2018-09-03 20:13:12 · 6326 阅读 · 0 评论 -
“得到”App 原型设计和prd之“发现”页面(2)
今天深入去解析该APP里面的页面交互,有一点一头雾水的感觉,因为抓不到里面的分类点。为了更好的了解该产品,我把可以点的地方都点进去看了一遍,终于让我摸清楚了里面的一些分类。这里面分为4种:工作团队(解读人)、课程、电子书、听书。而书本的类型划分有40种:视野、心理学、历史、商学等等。(个人觉得划分也是有一些重复性)。分类好了之后,先把这4种类型的页面搭建起来,方便到时的页面跳转。工...原创 2018-09-06 19:50:19 · 955 阅读 · 0 评论 -
axure刷新效果
今天在剖析“得到APP”的界面框架的时候,看到了他的刷新设计,觉得很有意思,自己就做了一下。当鼠标下滑时,如下图 交互如下:原创 2018-09-13 00:03:11 · 1905 阅读 · 0 评论 -
Axure制作视觉差顶部搜索栏
自定义一个顶部搜索栏。如下图所示,当鼠标往上缓慢拖动时,搜索框宽度缓慢变窄,并且缓慢垂直上移;同时,“发现”两个字,慢慢地往顶部中心收缩直至消失。当鼠标往下缓慢拖动时,搜索框和“发现”都相反变化。当鼠标快速往上拉或者往下拉时,对应变化如下:此处的难点在于如何让“搜索”元件和“发现”图片随着鼠标移动而变化,这里需要进行计算:设置鼠标向上拖动和向下拖动的距离为0~-30,搜索栏初始...原创 2018-09-10 18:44:35 · 1061 阅读 · 0 评论 -
安全键盘设计
今天找到了可以处理键盘输入时,界面的焦点一直变化导致键盘无法正确输入的问题,那就是要用热区,反之键盘获取到焦点。在每一个键盘值(矩形)上面加上一层热区,并且热区命令要带有数字,这样方便后面交互处理的时候可以截取数字。具体设计如下:然后对热区增加单击事件,如下:这样就解决了焦点的问题。...原创 2018-09-10 19:19:07 · 1156 阅读 · 0 评论 -
Axure当表格随窗口变化尺寸时,如何增加行?
今天设计的时候遇到一个问题,我的表格会随着窗口变化尺寸,此时如果我增加一行,会导致表格重新刷新,表格尺寸跟原先的不匹配,这样应该怎么处理呢?试验了很多的方式,最终发现,在每行加载的时候,我重新去设置尺寸就OK了。 ...原创 2018-12-17 23:02:57 · 2660 阅读 · 0 评论 -
Axure手把手教你如何导入地图
今天要做的就是内联框架导入百度地图。原型设计(1)新建一个内联框架;(2)打开百度地图开放平台http://lbsyun.baidu.com/,点击最底下的“地图生成器”(3)制作html文件依据百度地图开放平台的步骤一步一步设置:步骤一:创建地图选择“定位中心点”,设置地图大小等,添加标注。步骤二、获取代码点击“获取代码”,则会显示如下窗口:...原创 2019-01-17 22:36:39 · 15670 阅读 · 1 评论 -
Axure如何填充背景图
如上图所示,如何在整个浏览器窗口填充背景图?打开页面样式,在“背景图片”处选择“导入”、“填充”即可达到上图效果。原创 2019-01-14 22:32:02 · 6421 阅读 · 2 评论 -
Axure导航二级菜单
效果:当鼠标移入或者单击“权限管理”时,“权限管理”填充色由蓝变为白,字体由白变成黑。同时,弹出两个子选项“账号管理”和“设备管理”,当鼠标移入子选项时,该子选项背景变为灰白色。当鼠标移出母选项和子选项时,弹框隐藏,同时母选项背景和字体颜色恢复原状。原型设计:(1)设置元件的选中状态(2)设置鼠标移入或移出该组件的事件为了更好设计逻辑,我们采用触发的方式,新...原创 2019-01-14 22:44:46 · 3678 阅读 · 1 评论 -
Axure 表格选中和取消选中
如上图所示,我们要做的效果:(1)当勾选某一项时,灰色的复选框变为蓝色,取消勾选时,蓝色变为灰色;(2)当我勾选了一个之后,再勾选下一个,之前的还是要维持选中状态;同理取消选中也是一样的。设计:(1)为了保持选中或者取消选中状态,我们在中继器数据表增加一列IsSelected选项,用于判断该选项是否是选中或者没选中状态。(2)设置复选框“选中”状态(3)增加一...原创 2019-01-15 22:42:36 · 8173 阅读 · 0 评论 -
面板状态切换与移动
初始状态如上,一张照片,上面有一层遮罩。当鼠标移入照片某一个区域的时候,黑色的透明遮罩就消失,红色半遮罩上滑,同时文字向下滑动到红色半遮罩上。逻辑图如下:元件准备:矩形TouchArea:用来鼠标移入时的触发矩形DescriptionLabel:描述照片的文字动态面板CoverPanel:切换红色和灰色的遮罩 state1 图片GreyCover...原创 2018-09-03 20:06:25 · 564 阅读 · 0 评论 -
“得到”App 原型设计和prd之“发现”页面(1)
最近在看“得到”这款App,想着通过它来反推他的原型设计和prd,就当练练手。感兴趣的可以每天和我一起实战一下。(1)prd文档大致框架列:(2)产品的结构图:为了提取产品的结构图,必须研究应用里面的各个功能点,目前我总结如下:(3)完成各个功能模块由于是手机APP,我们把每个功能模块用每个page展示,然后每个page通过内联框架嵌入手机框架中,如下图所示:“...原创 2018-09-05 23:04:14 · 1938 阅读 · 0 评论 -
Axure游戏列表翻页功能
今天我们要做的原型是游戏列表的翻页功能,如上图所示。具体设计如下:(1)当点击第一页和最后一页的时候,分别隐藏“上一页”和“下一页”按钮;否则,显示“上一页”和“下一页”按钮;(2)当点击第5页到第8页时,按钮变化如下: 第5页:1 ... 4 5 6 ... 12 第6页:1 ... 5 6 7 ....原创 2018-09-02 21:31:21 · 1477 阅读 · 0 评论 -
Axure实战——改变元件尺寸、增减商品数量、图片边框移动
改变原件尺寸 增减商品数量 图片外框移动This:标识当前元件对象,指事件交互所在的元件Target:表示目标元件对象,指case动作中所控制的元件width:获取元件对象当前的宽度,使用方法“[[元件对象.width]]”height:获取元件对象当前的高度,使用方法“[[元件对象.height]]”1、改变原件尺寸点击之前:点击之后:设置鼠标点击事件,...原创 2018-08-27 22:58:52 · 5274 阅读 · 0 评论 -
Axure实战案例3—商品切换功能
这一章节主要讲如何使用函数来制作商品切换主要有三个部分:翻页功能、商品展示区、商品项点击“上半角”,商品展示区会向前翻页,同时商品项中会选中对应的商品。点击“下半角”,商品展示区会向后翻页,同时商品项中会选中对应的商品。点击“商品项”中的某一张图,商品展示区都会对应显示被选中的那张图。首先“翻页”功能可以使用动态面板的来设计,动态面板设置4种状态,分别放置对应的商品图。而商品项...原创 2018-08-28 23:08:09 · 620 阅读 · 0 评论 -
Axure实战案例4——指针导航
今天主要讲解如何使用母版和函数来制作导航。下图是一个导航栏,“知识中心”、“流程中心”、“用户中心”分别对应三个页面page1 page2 page3。page1 page2 page3 思路:三个页面都有统一的导航栏(除了三角符号),所以应该将其做成一个母版,就是抽取出共性出来。那么怎么保证在点击任何一个选项的时候都能切换到正确的页面,并且那个页面也显示正确的三角形位置呢...原创 2018-08-28 23:24:23 · 2419 阅读 · 0 评论 -
实战案例5——滑动吸附顶部和回到顶部
这章节我们将讲解两个内容:(1)滑动吸附顶部(2)回到顶部的使用先来看第一个:滑动吸附顶部。下图是原始图片:窗口往上滑动到一定位置后(我们在里面增加了热区来做检测),红色边框部分会保持不动思路:可以在窗口滑动动作里增加一个事件,判断窗口滑动到热区的top时,红色边框部分就不移动了。具体事件请参考如下图接着我们来分析如何“回到顶部”。首先设计的逻辑是这...原创 2018-08-28 23:37:45 · 997 阅读 · 0 评论 -
实战案例6——商品图片变大
这个原型设计逻辑如下:(1)最下一排是月饼选项,当鼠标移入哪一项,哪一项就会显示红色的外框。(2)当鼠标选中哪一项的时候,上面的展示区就会显示对应的图片。(3)当鼠标移入展示区图片时,展示区有一个矩形的遮挡部分,该部分以鼠标为中心并且随着鼠标移动。(4)当鼠标在展示区图片上随意移动时,右侧放大区域会显示遮挡区的图片部分。难点:(1)如何设计遮挡区,并且随鼠标移动?...原创 2018-08-29 23:34:35 · 196 阅读 · 0 评论 -
实战用例7——50秒验证码验证
初始界面:当点击验证码时:(1)显示正在获取验证码的旋转图片;(2)60秒倒计时难点在于如何做60秒倒计时?为此,小编在空白区域内加了一个动态面板,该面板包含2种状态,并且创建了一个全局变量值为60。当点击“获取验证码”的时候,设置动态面板循环切换2种状态,状态每改变一次,全局变量就减一,同时将该全局变量的值设置到“获取验证码”的这个文本里。...原创 2018-08-29 23:41:58 · 478 阅读 · 0 评论 -
实战案例8——左侧菜单项滑动
该原型主要实现几个功能:(1)点击主菜单图标时,弹出左侧菜单项。(2)当鼠标在左侧边缘处往右拖动时,如果拖动速度快(200ms以内),则显示左侧菜单栏;如果拖动速度慢,如果已经将左侧菜单拖动出了1/2,就显示左侧菜单,否则,不显示。(3)当显示左侧菜单时,可以往左拖动隐藏菜单。具体原型设计如下:(1)利用主页面手机外壳元件的内嵌功能,内嵌页面1。(2)主菜单的点击事...原创 2018-08-29 23:52:09 · 820 阅读 · 0 评论 -
实战案例9——从不同方向滑入
如上图片,当鼠标从左侧移入时,从右侧滑入一图片,当鼠标从左侧移出时,该图片向右移出。如下图示:同理鼠标从右侧移入,从顶部或者底部移入都有对应的图片往相方方向移动。准备元件:底部图片,动态面板(state1为空透明,state2为新的图片)交互设计:难点在于怎么判断鼠标从哪个方向移入,对此参考了一种方法:在鼠标进入面板区域时,鼠标所在的位置,与面板的四个边界只有一个方向距离最...原创 2018-08-30 10:59:51 · 299 阅读 · 0 评论 -
实战案例10——模糊搜索列表
设计逻辑:数据库里面增加了关键词列,当检测到输入框中有文字变化时,就检测关键词列中是否包含输入框中的内容,如果有就显示出关键词,当鼠标选中相应的关键词,输入框的内容就变成选中的关键词。如下图:交互设计:...原创 2018-08-30 14:20:43 · 783 阅读 · 0 评论 -
Axure制作键盘
今天在设计界面的时候,突然想要设计一个键盘,因为一些网上设计的键盘,样式固定,并且都是针对某一个输入框的,我想要一款自己设计的简洁的,并且能检测界面上正获取到焦点的元件。如下:而我们的每个案件的交互事件都是设置焦点元件的值,但是这就导致一个问题:界面上的焦点会变化。这意味着,当我们的输入框获取到焦点,并且获取到按键数字后,该输入框突然失去了焦点,也许焦点变成键盘上的某一个按键。对此我一...原创 2018-09-07 23:00:09 · 2695 阅读 · 0 评论 -
Axure表格单选
今天要做一个表格的效果:只能选中一项,如上图所示,当我选中第一项时,第一项变蓝色,当我选中第二项时,第一项取消选中,第二项选中,变为蓝色。设计过程:(1)设置左边复选框的选中状态(2)设置选项组名称(3)增加触发事件,核心是要让表格刷新,这样就会让表格恢复初始状态,然后再设置当前项为选中状态,就可以维持单选。(4)增加交互事件...原创 2019-01-16 22:40:34 · 1259 阅读 · 0 评论