当前位置: www.89677.com > 互联网 > 正文

建议你认真看完,理清原型逻辑

时间:2019-11-05 21:08来源:互联网
原标题:Axure教程:省市县三级联动选择(全国省市区数据) 一、辅助线 看过连载前文的都知道,在Axure中完成一个基本的交互设置其实很简答,我们只要按照提示与引导一步步的选择

原标题:Axure教程:省市县三级联动选择(全国省市区数据)

一、辅助线

看过连载前文的都知道,在Axure中完成一个基本的交互设置其实很简答,我们只要按照提示与引导一步步的选择事件和动作,做好元件和情形的命名即可。当你熟悉了,情形的命名也可以省略了。

www.89677.com 1元件说明

省市县三级联动选择功能在互联网平台应用非常广泛,很多人在做产品设计时,不知道怎么实现三级联动效果,或者只能简单实现一两个固定城市的三级联动效果。如果要实现全国城市的三级联动选择呢?作者将通过这篇案列分享,教大家使用Axure制作实现“全国城市省市县三级联动选择效果”。

  • 全局辅助线
    作用于站点中所有页面,包括新建页面。
  • 页面辅助线
    只作用于当前页面
  • 自适应视图辅助线
    只显示在用户设置的自适应视图中
  • 打印辅助线
    用于观察页面效果,正确打印页面
    注:1mm=2.8px

我们知道有些事件的发生是有前提条件的,不同的条件会导致事件发生不同的动作,这就是事务的内在逻辑。“逻辑”一词最早由古希腊学者亚里士多德提出。狭义上逻辑既指思维的规律,也指研究思维规律的学科即逻辑学。广义上逻辑泛指规律,包括思维规律和客观规律。逻辑包括形式逻辑与辩证逻辑,形式逻辑包括归纳逻辑与演绎逻辑,辩证逻辑包括矛盾逻辑与对称逻辑。对称逻辑是人的整体思维(包括抽象思维与具象思维)的逻辑。

摘要:元件作为Axure 9.0的基础功能,线框图的绘制与交互事件的设置都离不开它,熟练掌握并了解每个元件的功能及用途,对原型设计来说尤为重要。这是一篇细到令人发指的关于元件的使用说明,不仅有基础的使用知识讲解,也有一些使用技巧的说明。Axure 9.0与8.0相比并没有增加新的元件,但9.0的元件却更好用,用起来更顺手,更有设计感,它的好用与顺手体现在每一个细节之中。

www.89677.com 2

二、对齐

www.89677.com 3在思考逻辑?.jpg

元件是线框图绘制过程中必不可少的基础元素,线框图是由一些列元件组合而成。因此认识和熟练了解每一个元件的特征,对绘制线框图或者原型来说是非常重要的,本章节就详细讲解每个元件的用途和应用特征。

实现效果

左对齐 Ctrl+Alt+L
右对齐Ctrl+Alt+R
居中对齐Ctrl+Alt+C
顶部对齐Ctrl+Alt+T
底部对齐Ctrl+Alt+B
上下居中Ctrl+Alt+M
进行对齐操作时会以先选中的元件为基准来对齐

当我们为事件添加第1个情形时,如果符合情形1的条件,则执行设定的交互动作;添加第2个情形时,则变成了否则这样的句式,则执行设定的交互动作,变成了与第1个情形对立的情况,即除第1个情形之外的条件下,执行情形2的动作。很多时候我们并不希望这样,比如我们希望在选择省份下拉列表时,选项中选择不同的省,下方显示该省的城市列表。这个时候就需要为省份下拉列表添加”选项改变时“事件,将各省的城市列表转换为动态面板不同的状态。在为省份下拉列表这一元件选择不同的选项时,设置动态面板显示不同的状态,将下拉列表的各项作为情形的逻辑条件。这个时候,其实我们希望每个情形的执行是并列关系,互不干扰。因此,在这里我们手动将其他情形切换为如果的逻辑句式。右击情形,选择“切换为[如果]或[否则]"。

1.2.1 公用元件

方框、椭圆、占位符、按钮、标题、标签和文本,这几个元件本质上都属于形状元件。选中元件,可以通过右侧对应的样式面板对元件进行编辑。

添加文本:选中元件,双击元件或右击在弹出菜单中选择“编辑文字”,即可对元件执行添加文本、编辑文本的操作。

选择形状:形状元件可以改变各种形状,包括矩形、三角形、圆形、弧形、五角星、爱心、水滴等。选中元件,右键单击在弹出菜单中选择“选择形状”。

www.89677.com 4选择形状

转换为图片:形状元件转换为图片后,可以保留形状元件上添加的交互和注释。选中元件,右键单击在弹出菜单中选择“转换为图片”。

www.89677.com 5转换为图片

填充:形状元件支持颜色填充和图片填充。颜色填充可通过顶部的工具栏或右侧的样式面板,进行配色。通过形状元件导入的图片,大小和位置固定在形状内部,不同于常规的图片导入。选中形状元件,右键单击下拉菜单中选择“导入图像”或在右侧样式面板选择本地图片,完成导入。

www.89677.com 6颜色填充www.89677.com 7图片填充

边框:形状元件可以设置边框的颜色、边框线的粗细、线条的样式以及每条边框线的可见性。通过顶部工具栏或右侧样式面板均可以设置。

www.89677.com 8设置边框线

编辑控点:通过拖动控点的位置,可以将元件改变成任何你想要的形状,一般元件有4个控点。选中形状元件,右键单击下拉菜单中选择“编辑控点”或点击顶部工具栏中的点,拖拽元件边框上的小菱形位置,可以改变元件现状。

www.89677.com 9编辑控点

变换形状:可以对形状元件进行水平和垂直翻转,对多个形状元件进行布尔运算,改变点的连接方式(直线连接或曲线连接)。选中形状元件、右键单击下拉菜单中选择“变换形状”,弹出的右侧菜单中选择变换方式。

www.89677.com 10变换形状

指定选择组:与单选按钮组效果类似,当组中有一个元件被选中后,其他组元件自动切换为未选中状态,常用语于Table切换或标签导航。若将元件添加到指定的组,首先选中形状元件,右键单击下拉菜单中选择“指定选择组”,编辑选择组名称。

www.89677.com 11指定选择组

工具提示:常用于一些操作提示,如Axure工具栏、页面与大纲、库与母版等相关的操作按钮,鼠标悬停在按钮上方,显示提示信息。选中形状元件,右键单击下拉菜单中选择“工具提示”,编辑提示信息。

www.89677.com 12工具提示

圆角效果:形状元件可以将直角转换为圆角。选中元件,拖动左上角的倒三角手柄来控制圆角的半径,也可以通过右侧样式面板输入角度来调整圆角效果。在样式面板中,还可以设置各圆角的可见性,可以做到部分顶点显示为圆角,部分顶点显示为直角。

www.89677.com 13圆角设置

阴影:可以为形状添加外部阴影、内部阴影和文字阴影,增加原型的保真程度。选中元件,通过顶部的工具栏或右侧的样式面板为形状元件添加各种阴影,可以自由设置阴影的投影位置、大小、颜色以及模糊程度。

www.89677.com 14阴影的设置

不透明度:通过拖动右侧样式面板中的滑块,可以灵活设置形状元件的不透明度。

www.89677.com 15设置不透明度

边距:控制形状元件内的文字与上下左右四个边框线的距离。选中形状元件后,通过右侧的样式面板调整文字与四个方向边框线的距离。

www.89677.com 16调整边距

自适应宽高:根据形状元件内的文字内容,可以自适应宽度和高度,减少了手动调整元件尺寸和文字换行的操作。选中元件,点击右侧样式面板的适合文本宽度或适合文本高度。选择适合文本宽度,则所有文本在一行显示,形状元件的宽度跟着文字的宽度而自动调整;选择适合文本高度,则形状元件的高度随着文字的高度而自动调整。

www.89677.com 17自适应文本的宽

交互样式:形状元件支持添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时的交互样式。选中形状元件,点击右侧交互面板,点击新建交互,为元件设置样式效果。

www.89677.com 18设置样式效果

图片元件可以用来添加图片和插图,以表达你的设计理念、产品创新、照片等更多内容。

导入图像:拖拽一个图片元件到设计区域,双击或右键单击菜单中选择“导入图像”,导入图片。Axure支持的图片格式包含:JPG、GIF、PNG和BMP。

粘贴图片:从任意处复制一张图片均可以粘贴到Axure中,当我们复制的图片较大时,系统会提示“该图像过大,可能导致应用程序运行缓慢,您要优化它吗?”,建议点击是,系统将会无损压缩图片大小。一般从excel或CSV复制内容时,建议点击右键,选择“选择性粘贴,粘贴为图片”,直接Ctrl+V通常会粘贴为文本格式。

www.89677.com 19优化提示www.89677.com 20excel粘贴

添加/编辑图片文字:导入图片后,右击图片选择“编辑文字”,图片上的文字还可以进行样式编辑,如颜色、大小、字体等。

www.89677.com 21编辑图片文字

水平和垂直翻转:导入图片后,选中图片,右键弹出菜单中选择“水平翻转”或“垂直翻转”,可以对图片进行水平和垂直翻转。

分割图像:分割与裁剪在设计领域俗称切图。两者的区别在于是否保持了图片的完整性,前者完整保留图片内容,后者默认保留选定部分内容。选中图片,右键单击菜单或在右侧样式面板中选择分割图像,出现十字架虚线,十字架交叉处即为切点,点击设计区域右上角的+、—和|选择切割线,—代表了横线切割,+代表了竖线切割。

www.89677.com 22分割图像

裁剪图像:分为裁剪、复制和剪切三种方式。裁剪图片只保留选定区域,复制不对原图像有任何影响,剪切从原图片中切除选定区域。选中图片,右键单击菜单或在右侧样式面板中选择剪裁图像,通过拖拽虚线矩形框四个顶点的位置来调整裁剪范围大小,移动矩形框确定裁剪的区域。点击设计区域右上角的裁剪、复制和剪切可以选择剪裁的方式,默认为剪裁。

www.89677.com 23裁剪图像

图片边框和圆角:通过工具栏和样式面板可以给图片添加边框。设置边框的颜色、边框线的厚度、边框线的样式。拖动图片左上角的倒三角或直接在样式面板设置圆角半径,来达到设置圆角的目的。(设置界面与形状元件类似,不在重复截图)

不透明度和阴影:通过拖动样式面板中的滑块可以设置图片的不透明度。图片元件仅能设置外部阴影,设计方法与形状元件类似。(设置界面与形状元件类似,不在重复截图)

优化图片:使用通过图片功能,在保证基本不影响图片浏览质量的前提下(降低图片的像素密度,但一般肉眼无法察觉,基本可以忽略),使得图片占用的存储空间更小,同时也可以提升原型的加载速度,提升浏览体验。通常在导入大图时,Axure会自动提示是否需要优化,也可以手动优化。选中图片,右键点击菜单选择“优化图像”。

www.89677.com 24优化图像

等比例缩放:按住shift键盘,同时拖动图片边角的顶点,可以按比例缩放图片。选中图片,通过工具栏或样式面板中锁定宽高比例,更改宽或高的值也可以做到等比例缩放。

www.89677.com 25等比例缩放图片

图片交互样式:图片也可以像形状元件一样添加交互样式,可以添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时样式效果。(设置界面与形状元件类似,不在重复截图)

在原型设计时,通常需要将原型的几个版块或内容进行区隔,这个时候利用水平线和垂直线就会比较方便。

箭头:通过工具栏或样式面板可以为横线或垂直线设置箭头样式。选中线条,在工具栏或样式面板中点击箭头样式,在下拉列表中任意选中想要的箭头样式。

www.89677.com 26选择箭头样式

颜色、厚度和样式:可以为线条添加颜色、设置厚度和样式,在工具栏和样式面板中均可以设置。按住shift键,拖动线条,可以改变线条的长短。

www.89677.com 27设置颜色、厚度和样式

旋转线条:Windows按住Ctrl,Mac按住cmd,同时将鼠标悬停在线的末尾进行拖拽,或者在样式面板中直接输入旋转角度。注意这里的旋转角度均按照顺时针方向旋转。

www.89677.com 28旋转角度

热区是一个浮在最顶层的透明图层,热区可以放置在任意元件的上方,为热区设置交互其实也等同于为热区下方的元件设置交互。

多个元件设置同一交互:如资讯列表页,需要同时为图片和文章标题设置一个鼠标单击跳转事件,这个时候可以直接在图片和标题上覆盖一层热区,为热区设置鼠标单击事件。

单个元件中的某一区域设置交互:利用热区覆盖在元件上的局部区域,为热区设置鼠标单击事件,即可起到元件的局部区域可点击效果。

热区的可见性:预览原型效果时,热区是透明不可见的,但在Axure源文件中默认会显示为一个透明的遮罩层,通过菜单栏中的视图>遮罩>热点,可以隐藏掉遮罩,与预览时的效果是一样的。

www.89677.com 29热区设置交互&隐藏遮罩

动态面板可以创建多个状态,每个状态下面都可以装有若干个元件,每个状态可以当做是一个全新的页面,在这里可以任意摆放元件,设置元件的样式甚至是交互,因此它更像是一个巨大的容器。动态面板是在原型制作中使用最多的高级元件,很多交互效果都依赖于动态面板来实现。

动态面板状态:动态面板是由一个或多个状态组成的,每一个状态里面都可以包含多个元件。同一时间,动态面板只能显示一个状态,使用交互设置可以显示或隐藏动态面板以及各状态的可见性。添加动态面板有两种方法,第一种,直接从元件库拖拽动态面板至设计区域;第二种,将要设置为动态面板的元件右键单击选择“转换为动态面板”。其中第二种方法,可以直接调整动态面板的大小至合适尺寸。第一种方法,如果状态中元件的尺寸大于动态面板时,则超出部分在动态面板中将不可见。在样式面板中可设置“调整大小以适合内容”,以保证状态中元件的可见性。

编辑动态面板状态:双击动态面板选择一个状态进行编辑,进入状态中,我们会看到中间有一个白色矩形区域,矩形区域为动态面板的画布,超出部分,则在动态面板中不可见,如果看不到白色矩形,则一定是在样式面板中为动态面板勾选了“调整大小以适应内容”,取消勾选,则可以在状态中看到白色矩形。在状态中编辑元件,就和我们平常在页面中编辑元件一样操作。设计区域的右上角可以切换隔离状态,默认为隔离。隔离状态是指是否将动态面板以外的元件纳入进来。点击设计区域右上角的关闭按钮,则为退出动态面板状态,回到页面。

www.89677.com 30自适应内容www.89677.com 31编辑状态

管理动态面板状态:双击动态面板进入编辑状态,点击设计区域左上角可以管理动态面板的状态,在这里可以增加状态、复制状态、删除状态。

www.89677.com 32管理动态面板状态

动态面板专有样式

滚动条:当动态面板尺寸小于状态内容尺寸时,需要为动态面板设置滚动条以查看状态中的更多内容。滚动条有四种样式:不需要、根据需要滚动、纵向滚动、横向滚动。选中动态面板,在右侧样式面板中设置滚动条样式。

100%宽度:勾选后动态面板各状态在浏览器中打开后,可用显示完整的宽度,而不受动态面板自身宽度影响。

固定到浏览器:始终固定在页面的某个特定位置,如App的底部导航,资讯类产品的顶部标签导航都可以利用“固定到浏览器”的样式效果。选中动态面板,点击右侧样式面板的“固定到浏览器”,勾选固定到浏览器窗口,选择固定位置的方向,设置边距,勾选保持在前面(将动态面板图层置顶)。

www.89677.com 33动态面板滚动条样式www.89677.com 34100%宽度www.89677.com 35浏览器中固定位置

其他通用样式

动态面板的位置和尺寸、填充、边框、阴影和圆角等这些公共样式的属性设置同形状元件一致,请参考上文说明

设置动态面板状态

面板切换:对于有多个状态的动态面板,可以使用设置动态面板状态这一动作切换到指定的状态,这也是动态面板最常用的交互动作。在用例的交互动作中选择“设置动态面板状态”,在状态项中下拉选择切换的状态。下拉选择的切换状态包含以下四种切换方式:指定状态(state1/state2...)、上一个状态、下一个状态、停止切换、值。

上一个/下一个:选择上一个状态、下一个状态时可以进行状态的重复循环,设置中自动勾选“从最后一个到第一个自动循环”,在更多选项中还可以设置首次循环的时间间隔。这样动态面板就可以按照规律无限循环下去,循环切换常用于轮播图的自动播放。

停止切换:当我们需要停止动态面板无限循环时,如停止图片轮播或内容广播,可以在状态列表中选择停止切换。

值:使用值来设置动态面板状态时,需要注意值必须与动态面板的状态名称一致时,才能生效。当需要基于某一个页面存储的全局变量值在本页面中使用“页面加载时”事件来设置动态面板到指定状态。此时,只需要设置一个简单的交互用例即可实现。

动态面板切换动画:进入与退出都可以设置过渡动画,在设置用例时的动作配置中选择动画效果。进入与退出支持设定的动画效果包含:逐渐、向上滑动、向下滑动、向左滑动、向右滑动、向上翻转、向下翻转、向左翻转、向右翻转。设定动画效果后,我们需要为每个过渡动画设置时间,注意这里的时间单位是毫秒。

更多选项:如果原来动态面板为隐藏,在这里可以勾选为显示,还可以设置展开和收起的状态。

www.89677.com 36动态面板改变状态

当我们需要引用页面或页面中某个部分的内容时,可以使用内部框架达到引用的效果。内部框架既可以引用Axure文件中的页面,也可以引用外部的页面。

从元件库中拖动内部框架至设计区域,双击内部框架,在弹出的窗口中选择链接的内部页面,或填写外部页面的URL地址,点击确定,完成引用页面的设置。右侧的样式面板可以设置隐藏边框,下拉选择滚动条的显示方式和预览类型。滚动条的显示方式包含:根据需要滚动、总是滚动和从不滚动,这里的滚动条设置包含了垂直滚动和水平滚动。预览类型包含:无、视频、地图和自定义预览,自定义预览支持从本地导入图片。这里的预览设置仅为Axure内部预览,在浏览器预览看不到设置效果。

www.89677.com 37设置引用页面www.89677.com 38滚动条&预览

中继器元件由中继器数据集和中继器项两部分构成。中继器可以用于需要重复设置的元件,如商品列表页、资讯列表页、联系人列表、表格等。

编辑中继器:从元件库拖动中继器至设计区域,双击中继器进入中继器编辑页面,中间的白色区域为中继器的画布,中继器的画布大小既可以手动调整,也可以根据页面内容自动调,在设计时无需手动拖动顶点来控制画布大小。画布外的元件,将会同步至中继器的左侧或上方。中继器画布右上角有一个隔离开关和关闭按钮,隔离开关的作用同动态面板一致,默认为关闭,点击开启后,会将中继器周围的其他元件均纳入进来,像是一个容量超大的乾坤袋。中继器编辑页面可以任意放置元件,如同在一个全新页面进行线框图设计。

www.89677.com 39编辑中继器

中继器数据集:中继器元件是由中继器数据集的数据项填充,填充的数据项可以是文本、图片甚至是链接。Axure 9.0中,在中继器内部和外部均可以编辑数据集。右侧的样式面板中,我们可以看到类似于表格形状的即为数据集,在单元格里可以任意填充数据。数据集中的行与列的数据可以任意编辑,值得注意的是数据集列的命名需要为英文,否则在中继器项载入数据时将无法关联数据集内容。

www.89677.com 40编辑数据集

中继器的项:中继器中重复布局的元件这里称之为项,双击中继器元件,进入中继器进行编辑,中继器页面中的元件会被重复加载多次(中继器有几行信息,就被重复加载几次)。

www.89677.com 41中继器的项

加载项:利用交互事件每项加载时将数据集中的数据填充到设计区域。

插入文本:双击交互事件每项加载时,添加设置文本动作,设置value值时,点击右侧的fx,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量Item.Phone,点击确定完成文本的加载。完成此设置后,当中继器每项加载时,就会将数据集中列的内容自动插入到刚刚设置的文本元件中。

www.89677.com 42中继器文本加载

导入图片:导入图像到数据集中并使用“设置图像”动作将图片插入到中继器的项中。在做这项交互设置前,需要提前在中继器中准备一个图像元件,用来关联显示中继器数据集的图像。在数据集中右击想要插入图片的项,选择“导入图像”,选择插入本地图像。右侧交互面板中点击“每项加载时”事件。添加“设置图像”动作,选择目标元件(中继器数据集事先设置图片元件的那一列内容)。设置图像时(SET DEFAULT IMAGE),选择值,点击右侧的fx,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量Item.Head portrait,点击确定完成图像的加载。完成此设置后,当中继器每项加载时,就会将数据集中列(Head portrait)的内容自动插入到刚刚设置的图像元件中。

www.89677.com 43中继器图像加载

插入页面链接:中继器数据集中的项可以添加引用页,当用户点击某个指定的元件时,触发链接跳转。数据集中右键点击空白项并选择“引用页”,选择本地页面。在中继器中选择一个触发跳转动作的元件,为其添加单击事件,添加“在当前页打开”动作,然后选择链接到外部网址或本地页面,点击fx,在弹出的编辑窗口中,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量Item.link,点击确定完成链接跳转的设置。

www.89677.com 44添加链接

中继器内部元件的交互:中继器的数据项可以添加任意交互,如同正常元件一样。

中继器专有样式

布局:中继器的内容支持按垂直、横向样式展示内容。垂直布局时,可以设定每一列数据有几项;横向布局时,可以设定每一行有几项。选中中继器,布局样式中选择垂直或横向,勾选换行,填写每一列或每一行项的数量。如果不勾选换行,则所有的项将全部垂直展示成一列或横向展示成一排。

www.89677.com 45中继器布局

项的背景:项的背景既可以设置单一颜色,也可以设置两种不同的颜色交替显示。勾选样式面板中的交替颜色,设置背景色和交替色。默认情况下,中继器内容没有背景色,页面看上去是白色,是因为整个页面背景默认显示白色,并非中继器项背景为白色。

分页:中继器为我们提供了分页功能,当中继器项较多时,可以设置分页。选中中继器,在样式面板中,勾选多页,设置每页项的数量和开始页。

www.89677.com 46背景与分页

本篇结语:下一节将重点讲解文本输入框、下拉列表框、列表选择框、复选框和单选按钮的使用说明及使用技巧。后续每一篇章节尽量控制篇幅,这一篇基础元件的说明有点长,基础性的东西才是最重要的,所以值得详细讲解,也希望大家能够有更深刻的理解。

如果你对Axure或原型设计有兴趣,希望系统性地学习Axure知识,掌握更多Axure使用技巧;或者希望通过临摹交互案例,进一步提升高保交互设计能力。请点击下方关注按钮,查看更多连载作品

点击获取案例作品源文件

www.89677.com 47

三、存储

www.89677.com 48如果或否则.png

  1. www.89677.com,可以任意选择全国所有省份、选择该省份对应的城市、选择该城市对应的县区;
  2. 未选择省份时,点击“城市下拉选择”,提示“请先选择省份”;
  3. 未选择城市时,点击“县区下拉选择”,提示“请先选择城市”;
  4. 切换选中省份时,重置城市及县区选项;
  5. 切换选中城市时,重置县区选项
  6. 当前选项处于下拉框选项状态时,点击其他选择框,隐藏当前选项下拉框;
  7. 下拉选项框展示时,下拉箭头向上,下拉选项框隐藏时,下拉箭头向上;
  8. 动态显示三级行政区移入状态、选中状态、取消选中状态。
  • RP格式
    单一用户模式
  • RPPRJ
    团队协作的项目文件
    签入控制
    可以取消签出
    版本控制和恢复到历史版本
  • RPLIB
    自定义元件库模式

全部:当全部条件都满足时,才能执行设置的动作,每个条件之间是“与”的关系,需要同时成立。我们以登录为例,点击登录按钮时,我们需要判断账号、密码,只有当账户和密码都正确,才提示“登录成功”。账号和密码的条件表达式,他们之间的逻辑关系就是全部。任何:当其中一个条件满足时,就可以执行设置的动作,每个条件之间是“或”的关系,即只要求其中一项成立。还是以登录为例,点击登录按钮时,判断账号和密码,如果其中一个不正确,则提示“账号与密码不匹配,登录失败”。

原理分析

四、组合对象与锁定对象

假设正确的账号为13333333333,密码为mima333

(1)利用中继器的数据存储功能,用三个中继器分别存放省份、城市、区域数据;

Ctrl+G 可以选中多个元器件,然后把它们组合在一起,可以一起完成移动、缩放、隐藏、排列、锁定和添加样式。

www.89677.com 49全部.pngwww.89677.com 50任何.png

  • 省份中继器只需1列,用来存放全国所有省份数据;
  • 城市中继器需要2列,用来存放省份数据及城市数据(注意省份名称要和省份中继器的省份名称一致);
  • 县区中继器需要2列,用来存放城市数据及县区数据(注意城市名称要和城市中继器里城市名称一致);

Ctrl+K 锁定对象位置

一个完整的条件语句由表达式和运算符构成,表达式的内容可以是文本、变量值、变量值长度、元件文字、元件文字长度、选项、选中状态、面板状态、元件的可见性、元件范围、键盘按键、指针等一切可以通过外在形式表达的内容。运算符包含了算数运算符、关系运算符和逻辑运算符。

(2)利用“省份下拉”元件的单击事件触发省份下拉选项的展示与隐藏;

五、注意点

www.89677.com 51表达式.pngwww.89677.com 52运算符.png

(3)利用临时变量将选中的省份名称赋值给省份输入框,从而显示当前已选省份;

-文本框不可以设置圆角属性(可以添加矩形框与文本框,再隐藏文本框边框属性即可)

连接两个表达式的算数运算符为==和!=。前一个为赋值符号,即将符号右侧的内容赋值给左侧表达式;第二表示不相等,即运算符两侧的内容不相等。

(4)利用“省份输入框”元件的文本改变事件,触发城市文本输入框的显示及城市下拉选项框的内容;

-点击文字后输入框获取焦点:为文字添加事件即可
条件事件:直接为用例添加条件即可

条件表达式中间的关系运算符包含了大于、小于、小于等于、大于等于。代表了两侧表达式之间的大小关系,表达式的内容通常是可以量化的数值或变量。

(5)利用“城市下拉”元件的选中状态事件,判断省份是否选中,未选中城市则给出“请先选择省份!”的错误提示;

-条件判断if else
在设置事件时先设置条件判断然后再设置事件。

条件表达式中,可供选择的逻辑运算符有:包含、不包含、是、不是。主要表达运算符两侧内容的包含关系和是非关系。

(6)城市、区域涉及的各元件设置方式同“2、3、4、5”步骤。

-事件中是先选中再禁用,先启用在选中

一个事件下可以添加多个情形。比如,你有一个下拉列表框,其中的项是不同的省份,你可以为给“选项改变时”事件添加多个不同的情形,通过不同的下拉列表项,执行不同的动作。默认情况下,从第二个情形开始都是否则形式的语句,可以手动点击切换为如果形式的语句。在原型中,用例是从上至下按顺序执行的。我们也可以让每个满足条件的情形都被执行。要做到这一点其实很简单,右击情形,并选择“切换为[如果]或[否则]”,将否则切换为如果。例如,在注册表单中,对每个文本输入项的内容进行单独验证。当点击注册按钮时,可以为每个文本框添加一个如果结构的条件情形,如果不符合条件,情形就动态显示不同的错误提示。

元件准备

六、动态面板

www.89677.com 53注册提示.png

www.89677.com 54

特点1、动态面板是一个多空间的元件容器,它是实际存在的(会占据空间)只是看不见而已。默认显示第一个面板

  1. 使用矩形、文本框、按钮及文本标签等元件,完成登录界面线框图的搭建。文本框作为输入项元件、按钮为登录,两个文本标签作为登录成功和登录失败的提示信息,注意做好各元件的命名工作。

  2. 为登录按钮添加“鼠标单击时”事件,选中登录按钮,在元件事件列表中选择“鼠标单击时”事件,元件动作列表选择”显示/隐藏“,目标元件选择“登录成功提示”,插入第二个动作“等待”,设置等待1000毫秒,插入第三个动作“显示/隐藏”,目标元件选择“登录成功提示”。

    www.89677.com 55登录成功-动作配置.png

  3. 为情形添加条件,我们期望实现的效果是:当输入的账号和密码都正确时,提示“登录成功”;当账号或密码有一个错误时,则提示“账号与密码不匹配,登录失败”。

  1. 省份输入框背景(省份背景),放在输入框底部
  2. 省份输入框(省份显示),用于显示已选择的省份名称
  3. 省份下拉指示图标(省份选择),用于点击触发展示下拉选项,隐藏下拉选项
  4. 省份下拉组合选项(包括一个中继器sf,动态面板sfn,动态面板sfw),用于显示所有省份名字
  5. 城市输入框背景(城市背景),放在输入框底部
  6. 城市输入框(城市显示),用于显示已选择的城市名称
  7. 城市下拉指示图标(城市选择),用于点击触发展示下拉选项,隐藏下拉选项
  8. 城市下拉组合选项(包括一个中继器cs,动态面板csn,动态面板csw),用于显示所有城市名字
  9. 县区输入框背景(县区背景),放在输入框底部
  10. 县区输入框(县区文字),用于显示已选择的城市名称
  11. 县区下拉指示图标(县区选择),用于点击触发展示下拉选项,隐藏下拉选项
  12. 县区下拉组合选项(包括一个中继器xq,动态面板xqn,动态面板xqw),用于显示所有县区名字
  13. 操作提示组合元件(提示框),用于显示校验出错时的提示
  14. 背景,整个案例的演示背景,可要可不要

特点2、动态面板可以设置推动元件,进而不会与已显示元件重叠显示。
用于显示提示框

假设正确的账号为13333333333,密码为mima333

隐藏提示文件,重新布局元件后效果如下:

特点3、动态面板独有的事件有拖动、载入、状态改变、滚动

  1. 为第一个情形添加条件,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择==;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择==,表达式上方的符合选择“全部”,点击确定,完成条件设置。

    www.89677.com 56登录成功-条件表达式.png

  2. 为事件添加第二个情形,点击添加情形,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择!=;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择!=,表达式上方的符合选择“任何”,点击确定,完成条件设置。点击插入动作,动作列表中选择“显示/隐藏”,目标元件选择“登录失败提示”,选择显示;插入动作“等待”,等待时间设置1000毫秒,插入动作“显示/隐藏”,目标元件选择“登录失败提示”,选择隐藏。

    www.89677.com 57登录失败-条件表达式.pngwww.89677.com 58登录失败-动作配置.png

www.89677.com 59

特点4、可以通过设置“显示”和“设置动态面板状态”来显示我们想要显示的动态面板中页面。两者任选其一即可。

实现步骤 1. 准备省份数据及操作显示元件

内联框架

  1. 拖动下拉列表框至设计区域,添加列表项,项的内容为省份名称,命名为省份;拖动一个列表框至设计区域,添加列表项,项的内容为省城市名称;将列表框右键转换为动态面板,复制多个状态(注意每个状态的命名,建议以省命名),每个状态的列表框显示不同省份的城市,动态面板命名为城市。

  2. 我们期望实现的效果是,当下拉列表框选择不同的省份时,下方的列表框显示对应省份的城市列表。

  3. 选中省下拉列表,在元件事件列表中选择“选项改变时”事件,选择“设置面板状态”动作,目标元件选择动态面板,选择对应的面板状态,点击完成,完成动作设置。

    www.89677.com 60广东-设置动作.png

  4. 为刚才的情形1设置条件,点击添加条件,在条件创建弹框中,运算符左侧分别选择被选项和当前,运算符右侧分别选择选项和广东,点击确定,完成条件设置。

    www.89677.com 61广东-设置条件.png

拖入一个中继器sf,给中继器的默认Column0列添加全国所有省份数据,要加上“请选择”数据

特点:
可以在框架内设置不同页面,并且如果页面大于框架大小,框架可以通过滚动条滚动显示;而动态面板只能显示固定区域的 内容
切换不同内部页面时通过链接到不同页面即可;而动态面板则是设置显示属性

5.为事件添加第2个情形,添加逻辑条件,在条件创建弹框中,运算符左侧分别选择被选项和当前,运算符右侧分别选择选项和浙江。点击插入动作,动作列表选择”设置面板状态”,选中“城市”动态面板,面板状态切换为“浙江”,点击完成,完成动作设置。

www.89677.com 62

七、中继器

www.89677.com 63浙江-设置条件.pngwww.89677.com 64浙江-设置动作.png

将中继器的数据通过每项加载时赋值给矩形,矩形显示的数据就是省份待选项数据

用于模块化的内容制作与显示。

  1. 其他省份的城市列表切换显示同上一步一致。

www.89677.com 65

先添加中继器数据集,然后再设置中继器每项的模板样式,然后再将中继器中的数据添加到每一项中显示出来。

将中继器sf转换为动态面板sfn,动态面板的大小为220px*240px。设置动态面板的滚动条属性为“自动显示垂直滚动条”

www.89677.com 66

www.89677.com 67

设置方式

实用小技巧:将可滚动的动态面板sfn转换为动态面板sfw,动态面板的大小为200px*240px。设置动态面板的滚动条属性为“无”,从而可以实现滚动且隐藏滚动条的效果

添加行
通过设置事件,绑定数据,添加行即可。

www.89677.com 68

删除行
方法1、在模板上面直接删除:通过绑定事件来删除数据行。

准备三个元件,分别是:省份背景矩形放在最下面,省份显示文本框放在中间层,省份选择矩形放在最上面。

www.89677.com 69

省份数据涉及的所有元件整理后如下图所示:

直接删除

www.89677.com 70

方法二、在页面内选中的项将被删除:通过标记项和选中来,然后删除被标记的项。

省份数据涉及的所有元件整理后如下图所示:

www.89677.com 71

www.89677.com 72

标记选中项

  1. 准备城市数据及操作显示元件

www.89677.com 73

cs中继器(城市待选数据)有两列,一列s保存省份数据,一列cs保存城市数据,注意省份与城市的对应关系。其余操作步骤同省份数据,此处不再描述。

设置

www.89677.com 74

方法三、在页面内最后一个被选中的项将被删除:先取消所有的标记然后再标记当前项即可。注意:要把中继器默认的“隔离选项组效果”取消掉,不然就不能进行选中切换。

  1. 准备县区数据及操作显示元件

www.89677.com 75

www.89677.com 76

删除最后被选中的

  1. 设置省份数据相关元件事件

更新数据
先标记要编辑的项,然后再更新。

单击省份选择时,切换该元件的选中状态;选中时,箭头向上(FontAwesome字体),显示省份下拉选项;取消选中时,箭头向下(FontAwesome字体),隐藏省份下拉选项

www.89677.com 77

www.89677.com 78

例子

省份下拉选项展开,单击某一项时,将该项值赋值给省份显示文本框,同时触发省份选择的单击事件(作用是隐藏省份下拉选项框)

www.89677.com 79

www.89677.com 80

编辑按钮事件设置

当省份显示文本框内容改变时,将城市显示文本框的内容改为请选择(重置城市数据),触发城市中继器的载入事件

排序
直接设置事件中的排序即可

www.89677.com 81

筛选
直接设置事件中的筛选即可,注意筛选条件的设置。

4、设置城市数据相关元件事件

设置每页显示项数以及跳转到指定页
直接设置每页显示项数即可,可以直接在中继器样式设置,也可以在事件中“设置每页显示项目数”;跳转到指定页可以在事件中设置当前显示页数;同时,可以直接设置“next”“previous”“last”来进行跳转页码。

单击城市选择时,切换该元件的选中状态;

七、全局变量

选中时,需要判断省份显示的文字是否为请选择:

全局变量可以在该项目中所有页面应用(读取与改写)。

  • 如果省份显示为“请选择”,表示省份还没被选中,设置界面提示为“请先选择省份!”,1秒后,自动隐藏提示
  • 如果省份显示不为“请选择”,表示省份已经被选中了,这个时候,需要为中继器添加筛选功能,仅显示已选中省份对应的城市数据;箭头向上(FontAwesome字体),显示城市下拉选项

八、布局变量

取消选中时,箭头向下(FontAwesome字体),隐藏城市下拉选项

局部变量只在某一个动作中有效,在另一个动作中就无效了。

www.89677.com 82

九、函数

中继器添加筛选功能,仅显示已选中省份对应的城市数据,设置方式如下:

axure中可以输入文字的地方后面都可以输入fx函数。
其中函数语法:[[变量1*变量2]];变量进行运算必须在[[ ]] 内,在[[ ]]]外运算符无效,只会被当做字符串处理

www.89677.com 83

制作tab框

当城市显示文本框内容改变时,将县区文字文本框的内容改为请选择(重置县区数据)

www.89677.com 84

www.89677.com 85

效果一

  1. 设置县区数据相关元件事件

www.89677.com 86

县区各元件点击、显示事件与城市各元件一致,以下是事件设置截图,具体不在描述

效果二

www.89677.com 87

www.89677.com 88

www.89677.com 89

设置所有的tab选项组名称

实用小技巧:利用显示事件的“灯箱效果”,背景色为黑色,透明度设置为20%。提示效果很漂亮。

Axure中是通过设置图片选中状态后改变图片来实现。
同时要设置相互切换的tab为一组,这样就可以一直只选中一个tab。

www.89677.com 90

单选按钮的制作

本案例已完成,点击查看上一篇案例《动态随机获取“大小写字母与数字”验证码》;

www.89677.com 91

作者:十月大神,个人网站: www.pmgod.cn

单选按钮

本文由 @十月大神 原创发布于人人都是产品经理。未经许可,禁止转载

Axure的默认单选按钮是不能设置样式的,所以只能通过选中状态下填充颜色自己制作。

题图来自 Unsplash ,基于 CC0 协议返回搜狐,查看更多

对勾框制作

责任编辑:

www.89677.com 92

对勾框

添加一个矩形,在矩形中添加✔然后设置矩形选中状态后文字颜色为其他色。

文本框的制作

www.89677.com 93

文本框

文本框都是用一个矩形设置边框样式,用一个隐藏边框的文本框输入内容。

列表选项的关联选择

www.89677.com 94

列表关联选项

例如选择广东省时,第三栏中的内容自动变为广东省市区列表。
方法:通过把市区列表转换为动态面板,设置省市列表框的事件,然后改变动态面板状态。
小技巧:可以把动态面板中页面值设置得和省市列表中一样,这样就可以快速匹配。

www.89677.com 95

设置状态

www.89677.com 96

面板中页面值设置

编辑:互联网 本文来源:建议你认真看完,理清原型逻辑

关键词: