UI设计基础-2017元件面板元件面板（一）.docx

UI设计基础 PAGE 1 目 录 TOC \o 1-3 \h \z \u 一、概述 1 二、步骤 6 三、流程图元件 7 使用元件 本课程讲述构成页面的元素，各种所需的控件，通过拖动到页面上需要的位置便可实现添加控件的功能。元件分为默认元件和流程图两种，可以载入和管理第三方元件，可以使用流程图元件创建流程图等。 选项：可以对自定义元件和第三方元件进行管理。 查找：会出现一个搜索框，用于搜索文件。 使用选择元件下拉菜单：可在默认元件、流程图元件和全部元件之间切换。 Axure元件默认分为4类——基本元件、表单元件、表单和表格以及标记元件。 Axure RP8.0中增加了新的默认元件和标记元件。 默认元件： 图片元件：可以导入任何尺寸的JPG、GIF、PNG图片，图片元件拖入编辑区后，可以通过双击选择本地磁盘中的图片，将图片载入到编辑区，axure会自动提示将大图片进行优化，以避免原型文件过大；选择图片时可以选择图片原始大小，或保持图片元件的大小。 矩形元件：矩形的应用比较广泛，比如作为页面的背景、按钮、以及一些元件的遮盖等；矩形的形状可以通过鼠标右键点击–编辑选项—改变形状，来变成我们需要的形状，比如做选项卡时候我们需要顶部圆角的矩形，就可以通过改变矩形的形状来实现。 3.文本标签元件和文本段落元件：在网页中文本的名称是lable，用于页面中添 加说明文字、文字连接，或一些动态的提示。 占位符元件：制作原型时，可以用它来代替对一些没有交互或者交互比较简单容易说明的区域；也可以做成关闭按钮。占位符在保真比较高的产品原型中作用不大。 默认按钮、主要按钮和链接按钮元件：这些是原来的形状按钮元件，这些按钮具有特殊的功能，例如TAB一样的按钮、特殊形状的按钮和支持鼠标悬停改变样式的按钮。可以说这3个按钮结合了原来的形状按钮元件和矩形元件的优点。 圆角矩形元件：这个个人认为是因为圆角矩形应用广泛，所以单独拿出来作为元件给使用者，免去了对矩形的设置。 动态面板元件：非常重要的axure元件，必须要学会使用的元件，动态面板的显示、隐藏、多状态等，都是非常有用的。 内联框架元件：内联框架元件就是人们说的iFrame控件，iFrame是HTML的一个控件，用于在一个页面中显示另一个页面。从Axure RP 7.0版本开始使用内联框架元件，可以应用任何一个以“Http://”开头的URL所标识的内容，例如一张图片、一个网站、一个Flash,只要能用URL标识就可以了。 中继器元件：中继器元件可以用来生成有重复ltem（条目）组成的列表页，例如商品列表、联系人列表等，并且可以非常方便地通过预先设定的事件，对列表进行新增条目、删除条目、编辑条目、排序和分页的操作。 水平线元件：就是一条水平的线，可以作为表示页面一些区域分割时使用，比如在两块不同区域之间添加一条水平线，来明显的区分。水平线可以通过设置元件属性中的角度Roto变成斜线来使用。 垂直线元件：和水平线一样的作用。 图片热区元件：用于点击图片中某个区域产生交互事件时使用，图片热区也是矩形的一种，可以通过设置矩形无边框，背景色100%透明度来实现。 文本框（单行）元件：用于输入文字的axure元件，用于登录、标题、密码框（鼠标右键–编辑选项–隐藏文本）等功能。 文本框（多行）：从字面意思就知道了它的功能，用于实现更多文字内容输入的axure元件，用于回复、评论、微博发布框这类的功能。 下拉列表（框）元件：鼠标点击时展开多个选项的axure元件，主要用来类别选择或多条件查询效果时使用。 ?列表框元件：一个多选项的列表，带滚动条效果，应用场景可以参考word自定义快速访问工具栏中选择添加项的效果。 ?复选框元件：复选框用于同类别内容可以同时选择多个时候使用，比如注册时候个人兴趣的选择，又比如批量删除邮件时选择多个邮件的功能。 ?单选按钮：多个选项仅能选择其一时候使用，比如性别选择。多个单选按钮联动效果需要同时选中多个需要联动的单选按钮—鼠标右键—编辑选项–指定单选按钮组来实现。不嫌麻烦的话也可以通过设置每个单选按钮的onclick事件来实现。 提交按钮：这个元件比较普通，没有额外的样式可供选择。 表格元件：每个表格都可以设置单独的事件，但是axure还不支持单元格的合并。 菜单纵向元件：主要用于网站导航。多使用于网站后台。 菜单横向元件：主要用于网站导航，多使用于网站前台。 ?树状菜单元件：用于创建一个属性目录，主要用于网站导航。多使用于网站后台。 页面快照元件：将页面快照元件拖曳到页面编辑区内，双击弹出引用页面对话框，选择一个页面后，元件