Axure RP母版中怎么制作可复用的网页

Axure RP母版中怎么制作可复用的网页,第1张

第一步:
下载安装Axure RP,我安装的是Axure RP70。
然后打开Axure RP,页面左下角的部分就是母版,我这里以QQ空间的页面为例,来做这个例子。
QQ空间由三部分组成:顶部的导航,左侧菜单和右边的详细显示界面。
其中顶部的导航和左侧的菜单很少变化,所以可以把这两个部分拆出来做成母版,复用到各个页面中。
第二步:
点击Axure左下角的母版部分的粉红色+,新建母版。新建两个分别起名叫“顶部导航”和“左侧菜单”。
将QQ空间的顶部导航部分截图下来粘贴到“顶部导航”母版中。
再将QQ空间的左侧菜单部分截图下来粘贴到“左侧菜单”母版中。
保存之后,这两个简单的母版就制作好了。接下来我们就把他们复用到“特别关心”和“与我相关”这两个页面中。
第三步:
在站点地图中新建两个页面,分别取名叫做“特别关心”和“与我相关”,新建好了之后是两个空页面。因为这两个页面中都包含了顶部导航和左侧菜单,所以我们就可以把之前新建好的两个母版“顶部导航”和“左侧菜单”复用到这两个页面中。
第四步:鼠标放在“顶部导航”母版上,右击鼠标,在d出框中选择“添加到页面”,意思就是:要将该母版添加到某些页面中。
第五步:
在d出的窗口中,将“特别关心”和“与我相关”页面都勾选上,意思就是要将该母版“顶部导航”添加到这两个页面中。
锁定为母板中的位置:母版在页面中的位置,就是母版当前的位置;
制定新位置:母版在页面中的位置,由xy轴重新指定;
置于底层:改母版将添加到页面的最底层。
将“左侧菜单”母版也按照上面的步骤,添加到两个页面中。
第六步:
打开“特别关心”页面,发现,母版都已经添加到页面中了,但是左侧菜单母版处于页面(0,0)位置,被覆盖了,那是因为我们在选择添加到页面的时候,把位置选成了“锁定为模板中的位置”,而左侧菜单母版的在母版中就是(0,0)所以,添加到页面中就被覆盖了。
但是在页面中拖动的时候,发现拖动不了母版,怎么解决呢?
我们可以选中被覆盖的母版,右击鼠标撤销“固定位置”,然后将母版拖动到合适的位置,保存就可以了。
将“与我相关”页面也按照上面的步骤整理好母版的位置。
第七步:
如果不小心把母版加错了页面怎么办呢?
点击加错了的母版,右击鼠标选择“从页面中移除”就可以选择要移除的页面了。

      原型是产品经理或者交互设计师所设计的某一需求或者某一问题的具体的解决方案。绘制原型的工具有很多,我们公司大多的产品用的都是Axure。用这个软件,高保真或者低保真原型都能做的很好。那么,怎样的原型才适合团队交流?

      毕竟绘制出来的原型并不是只给自己看的,还要讲解给团队里的成员,UI/前端/开发。特别是进行小组内评审的时候,通过演示原型,需要向他们讲解产品内部的逻辑、具体的页面、动效等,还要向他们询问设计是否合理,能否实现等,静心倾听他们的意见。这时候,原型就是一个思维传达的工具,将你的想法,翻译并灌输给你的团队成员。同样,原型是也团队的交流工具,针对绘制出来的原型,每个人都可以谈谈自己的看法,交流思想,完善原型不足的地方。

      所以原型绘制出来,必须要有基本的交付标准。

一、原型设计的基本交付标准

1清楚------让他人能明白产品是干什么的,包括什么功能,有哪些页面。

需要清楚地表达页面有哪些内容模块

需要清楚地表达模块内部的构成元素

2清晰------让队友知道具体有哪些要求,指导他们如何做

1功能 *** 作

  某一个功能可以进行哪些 *** 作,点击/鼠标悬浮/拖动等 *** 作,以及页面会有什么反应。(方便开发的工作)。

2 *** 作路径

       有一些 *** 作是要跳转页面,跳转的路径需要标清楚,跳到哪去了,涉及哪些页面,页面之间是如何联系的。防止用户迷失。
3点击状态

一些链接,按钮,需要标明它初始的时候是什么样,鼠标悬浮有什么效果(颜色/下划线/提示语等),点击的样式变化,以及点击后的样式。(这些可以为前端的工作提供方便)

4信息组合

相关的信息需要组合在一起,比如一些基本信息,姓名/性别/年龄等最好放一块,不要分开。不相关的保持距离。

5位置排序

页面的布局应该适应用户的习惯,浏览方式、工作任务。突出强调重点,方便用户的工作。一些数据可以思考一下它们的排列方式,按什么排序,能方便用户查找,仍旧是“以用户为中心”。

3周全-----产品的各种细节,不能疏忽

1交互状态

     某些重要的 *** 作,交互样式是怎样的,效果如何,最好单独抽出来做成高保真,演示给他人看,让他们对产品有深入的体验和感受。

2数据显示

原型上涉及的相关数据做好有真实的案例,将需要获取的关键数据全部展示出来,比如一篇文章,需要的数据:作者、发布时间、浏览量、喜欢数、收藏数等,方便开发准备必要的数据接口。

3异常考虑

需要考虑一些突发情况的应对,比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。

4配套页面

产品里的一些功能可能和其他产品有关联,需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。

4基本审美

1对齐

2间距

3颜色

4字体

推荐大家看看《写给大家看的设计书》这类易上手的书籍。

5基本规范

1页面尺寸

       web的宽度有960px、1000px、1200px,App有安卓、iphone5、iphone6等,需要与已有的产品保持统一的尺寸。

2字体大小

     标题可以是18px或者16px,内容可以是14px。既要考虑用户是否看到清,又要考虑美观。

3颜色

     原型不要有太多的颜色,坚持黑白灰,除非要突出,可以用其他的颜色。

4d窗

     d唱的样式最好做统一,d窗名+内容+ *** 作按钮+关闭

5元件

   不在原型正文添加过多的截图、图标样式,会对UI的设计造成干扰。

二Axure的快捷使用技巧

       工欲善其事必先利其器,工具使用的越娴熟,才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷 *** 作:

      首先在顶部菜单栏中找到<视图>,把需要的部件显示,就可以设置了。

1组件库的建立(能提高效率,保证产品层面的统一一致)

2母版的使用(适用于多页面通用的部分,修改后,集体自动更新)

3设置页面样式(页面的字体、背景能一次性设置好)

4元件的交互样式

5元件组合

       把要组合的原件用鼠标框在一起,按住ctrl+G,成为组合后就可方便复制拖动了。许下按住ctrl+shift+G,也可以点击选中后,点击下图的两个图标来组合和取消组合。

6对齐、居中、平均分布

选中要对其的内容,选择一种分布样式,就能快速得到整齐的原型样式,而不用一个个手动调整。

7输入框类型的设置(预设好类型)

一些输入框,可能需要设置默认文字,可以直接选中了输入框后,在原件属性里设置提示文字和一些限制。

8元件的提示语

        有些文字需要有鼠标悬浮显示提示语的动作,可以直接在原件的属性里设置“原件提示”,输入要显示的内容,即可。

三、制作原型的过程

1梳理功能点-------------------将需求转化为功能清单,标出重要等级(前提是需求已经梳理清楚)

2规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面,每个页面包含哪些元素

3整理原型目录----------------用Axure添加原型的几个页面,考虑页面之间的跳转关系

4设计页面的布局(打格子)-----用不同的色块,方框来表示这部分将要表示什么板块,设计好页面的布局

5填充各模块的细节----------在方框里把具体的信息和数据填充完整

6增加少量的交互动作--------------体现在一些涉及到任务的 *** 作

7页面注释-------------完善交互说明

8审查自检------------------功能是否覆盖完全;页面有没有缺失;流程是否明确;状态是否完备

四、原型应用中的经验

      因为我多是负责后台系统的优化,所以是直接和开发打交道,如果涉及前台页面,就需要UI先将原型做成,再由前端制作含有动效的demo,开发再按照demo开发。但是不论哪种,绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。

      第一次负责项目的时候,我用的是高保真,画完整的原型就花了一星期多,各种动作和交互,恨不得做个虚拟的产品。但是和开发讲了原型后,等来验收项目的时候,才发现,开发大部分都没有按照原型上的动作来,甚至连细节都有遗漏。一个个催着补上后,我开始思考这种方式是不是不太划算,太费事费力,结果又不太好。

       后来我看了我上级绘制的原型,都是以静态页面为主,可以说是低保真,但是每一种情况都详细地用图文描述清楚,点击之后是什么样子,将要获取什么数据,失败了会怎么样都有。而且这种方式,完成的特别快。于是我就选取低保真模式的开始画原型,结果发现,开发有时候并不能将一些动作做好。

       于是我开始“T式原型 ”。“T式原型 ”就是大部分是以低保真铺展开,将整个产品的逻辑都直接呈现出来,再在某些需要重点描述的地方用高保真描述深入。所以,我的原型大部分是以 低保真+注释说明和高保真+动作演示 的组合。 不过对于交互简单的产品来说,低保真模型足够了 。

       每个产品绘制原型的习惯和风格都有所不同,但关键还是需要进行小组会议来向队友们讲解原型和逻辑,在开发的过程中,需要多沟通。

       另外,分享大家关于AXURE学习的网站,可以在里面找到免费的软件安装包和教学课程。

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

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

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

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

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

填充:形状元件支持颜色填充和填充。颜色填充可通过顶部的工具栏或右侧的样式面板,进行配色。通过形状元件导入的,大小和位置固定在形状内部,不同于常规的导入。选中形状元件,右键单击下拉菜单中选择“导入图像”或在右侧样式面板选择本地,完成导入。
边框:形状元件可以设置边框的颜色、边框线的粗细(厚度)、线条的样式(直线、虚线)以及每条边框线(隐藏部分线框)的可见性。通过顶部工具栏或右侧样式面板均可以设置。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

动态面板专有样式

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

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

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

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

设置动态面板状态(交互动作)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

中继器专有样式

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

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

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

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

1、编辑该母版,将母版设置成组合。

2、点击组合-添加用例-载入时

3、置于顶层-当前元件

点击确定,设置成功。将该母版拖到页面中,添加的所有元件都无法遮挡住母版


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/10510952.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-09
下一篇2023-05-09

发表评论

登录后才能评论

评论列表(0条)

    保存