首页 > 编程知识 正文

学做表格基础教程,JavaScript基础教程

时间:2023-05-05 17:47:24 阅读:28665 作者:813

另一方面,Axure界面介绍1、页面导航面板(Pages ) Axure的页面管理采用了类似操作系统的文件夹和页面文件的管理方式,不同之处在于页面文件中也可以存在子页面

页面文件管理导航面板

2、“目录”(Libaries ) Axure目录可以使用与PPT相似的模板或Office提供的各种形状、图标,通过拖动快速创建原型。

Axure的库导航

2.1目录加载Axure提供了多种目录加载功能,包括官方网站下载、本地加载、原始共享加载和手动创建。 其中,通过手工制作,可以将我们日常常用的图形、样式、效果等作为目录进行管理。 如果使用,可以直接拖动到画布上。 这里的原始格式不是简单的图形、形状和样式,还包含网页支持的特殊效果,如渐变、隐藏、幻灯片和链接跳转

零件库管理

2.2目录使用目录,提供简单的导航过滤器和部件名称检索功能。

库过滤器

零件库搜索

拖动以使用组件

3 .“工具栏”(ToolBar )工具栏包含指向常用按钮的快捷方式条目,您可以通过鼠标单击将其激活,也可以通过快捷方式关键帧将其激活。

有两种模式。 处于交叉模式。 如果在按住鼠标的同时拖动来选取多个元素,则如果鼠标滑动的区域与元素相交,则会选取该元素。 包含模式:如果在按住鼠标的同时拖动以选取多个元素,则只有当鼠标滑动的区域完全覆盖该元素时,才会选取该元素。

缺省设置为“相交”模式,这类似于在PPT中选择的模式。

锁定位置主要是将元素锁定在特定位置,以便于处理其他元素。 锁定元素后,将无法拖动位置。

工具栏

预览功能是指在浏览器中公开浏览当前涉及的原型。 其原理是,Axure构建一个小的静态文件服务器,将创建的原型转换为HTML文件并发布到服务器,然后由浏览器访问和预览。

通过将设计的原型图像转换为HTML静态文件,当设置了各种操作时,Axure会自动生成js的方法以实现HTML的特殊效果。

工具栏

4 .在“查看器面板”(Inspector )画布上,选择元素,然后在右侧看到样式面板。 它包括三个部分。 样式与CSS所需的各种属性类似。

4.1“样式”(Style )面板提供了元素所需的各种样式属性设置功能,包括元素名称、框模型中的边框、内部和外部边距、圆角、透明度、字体、着重号和对齐方式

“样式”面板

4.2备注面板(Notes )可对元素设定元素备注,备注后效果如下图:

元素注释

4.3“交互面板”(Properties )属性面板提供了绑定整个网页所需的各种事件所需的设置,包括单击事件、双击事件、显示、隐藏和链接。

属性设置面板

5、“轮廓”面板(Outline ) Axure提供所有元素的轮廓导航面板,类似于PS的“图层管理”面板,每个元素的组合、取消组合、元素覆盖顺序调整、元素名称命名、组名命名、组名提供用于控制多个层和元素的边界入口。

“轮廓”面板

二、基础操作1 .要使用组件1.1设置组件名称,请在视图面板中修改元素名称,或在“轮廓”面板中选择“修改”。

元件名称设定

1.2可以在“样式”面板中设置零件的大小、位置和角度,并设置零件的大小和位置。 也可以通过拖动进行设置。

x :从左侧到右侧距离,单位px

y :从上到下距离,单位px

w :元件宽度、单位px

h :元件长度、单位px

r :元素的角度、单位度

t :文字角度、单位度

设定元件的尺寸、位置和角度

1.3选择要更改其颜色以设置组件颜色和透明度的组件,单击快捷功能区上的“设置背景颜色”按钮,然后选择适当的颜色或在组件样式中设置颜色。

设置元件的颜色和透明度

1.4设置组件的盒模型属性Axure完全支持在网页布局中设置盒模型属性。

设置长方体模型中的每个属性

1.5默认情况下,符号在“可见样式”面板右上角的隐藏选择框中隐藏。 选中后,缺省情况下符号将隐藏,并且在画布上以浅色存在。

默认隐藏组件

对于添加标记1.6符号字符的符号,双击该符号可以输入字符。

双击以添加字符

2、组件交互2.1要设置组件的类型、Tips和约束条件,请在视图面板的属性面板窗口中选择组件类型(文本、电子邮件、密码等)、位置主机

窗体交互的基本属性设置

2.2设置在选择组件事件组件后显示的交互式属性接口,并选择事件类

型(点击、双击、右键、鼠标滑过、点击后等),在弹出的对话框中,可设计页面跳转、界面元素显示隐藏、渐入渐出效果等各类动作。

事件设置

2.3设置下拉列表值

通过元件库选择List Box元件,在检视的交互属性面板点击添加项菜单,可以批量添加下拉值。

下拉列表值设定

2.4单选按钮唯一选中

可以对多个单选按钮设置唯一选中效果,选中多个单选按钮,设置按钮组名即可。

单选按钮唯一选中

3.其他常用操作 3.1转换元件为图片

右键中可支持元件转化为图片的操作

转为组件为图片

3.2 元件组合和取消组合

在实际的原型绘制过程中,需要将多个元件组合成一个整体,比如多个单选框需要组成一组、文字描述和按钮元件、页面的header、footer、导航条等。

组合

取消组合

3.3 调整元件的层级

类似与HTML中的Z-index一样,多个元件存在压盖的层级顺序,默认的顺序是先拖入的元件被后拖入的元件压盖,也即后来居上。可通过右键调整层级,也可以在概要(Outline)处拖拽调整,概要出的层级是靠上部的元件压盖靠近下部的元件。

右键调整元件层级

概要(Outline)拖拽调整

3.4 添加事件执行的条件

在事件设置页面,可通过添加条件的方式,来满足复杂的交互

设置条件的入口

条件设置面板

3.5 设置变量

局部变量

全局变量

4、常用功能设置 4.1 设置形状并排显示时边框是否重叠

边界重合设置

4.2 显示和隐藏交互和说明编号

一个元件设置了备注或者添加了交互时间后,默认显示编号,可设置显示或不显示

脚注序号显示隐藏

4.3 显示/隐藏两侧的功能面板

点击可展开左侧或右侧的面板

左右侧面板开关

4.4 响应式布局设置

​ 通过设置自适应视图,使得原型HTML在多种分辨率设备中查看时,系统会根据自身分辨率,自动与分辨率相适合的原型进行匹配,并显示出来。

自适应视图

多终端分辨率设置

三、Axure RP撰写需求文档

需求文档的撰写已经从最开始的纯文字,逐渐转变到图文结合,再到线框图,再到原型图,再到JS高仿真Demo等形式,为的是保证客户需求的传达和落地不偏离,环节交接无抛接。

总的来说,需求文档有三个作用:

1. 传达客户、功能、应用、产品开发需求;

2. 保证各环节沟通有理有据

3. 软件及产品质量控制有具体标准

​ 很多程序猿在开发时,一般都是看着效果图和原型图写代码,只有在遇到问题时,才会查看word文档。也就是说,开发需要一边写代码,一边看效果图,一边看原型,还要时不时查看文档。

​ 而且,大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那需求写word真的合适吗?这样的用户体验真的好吗?花费大量时间写word真的有价值吗?在Axure画原型的同时,我们为什么不能直接在旁边标注呢?这样岂不是方便快捷很多吗?

​ 其实,流行一种直接在原型图上标注的需求文档撰写方式。在新版的Axure8中,也已经推荐了原型加标注的需求文档样式。Axure8新增了一组部件—不干贴,就是方便产品设计人员进行功能标注。

以下方式仅供参考

需求文档结构

脚注模式

不干胶模式

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。