静态线框图 | Static Wireframes

Axure RP静态线框图

虽然Axure RP可以用来创建交互丰富的原型,但它也可以很好的用于创建交互简单或无交互的静态低保真原型,即使以后项目的交互变得非常丰富,但它们也都是从简单的线框图开始的,如果需要,可以在适当的阶段添加元件样式、内容复用(母版)、说明和输出选项(生成)的配置。

静态线框图中的元件

在设计过程的早期,基本的形状元件就可以满足需要,但到后期,需要提高线框图的保真度,基本的形状元件就被文本框、图片和图标替代。默认元件库中的标记元件,可以用于为线框图设计添加说明。

文本框

你可以直接把文本内容粘贴到Axure RP中,当你向画布中粘贴文本的时候,会自动创建一个包含了粘贴内容的文本段落元件。

你也可以把文本粘贴到画布中的元件上,只需要选中元件后使用[CTRL]+[V]进行粘贴,使用快捷键[CTRL]+[SHIFT]+[V]粘贴可以清除文本的原始格式,而使用元件自身的文本格式。

图片

添加图片的方法有多种,你可以从默认元件库中添加一个图片元件,然后双击它从计算机中选择图片文件,可以复制图片后直接粘贴到Axure RP中,还可以从计算机中选择图片直接拖到Axure RP的画布上。

图片也可以像形状元件调整大小、旋转、调整边框和圆角半径。

更多元件库

Axure RP还包括图标和设计模式库,使用元件库窗格中的下拉列表可以浏览其他元件库。

图标、设计模式和UI元素之外的元件库可以在Axure网站的元件库页面下载,这些资是由我们社区的用户提供的。(如果你创建了一个元件库并想在社区中分享,可以通过contactus@axure.com联系我们。)许多元件库都是免费的,其它的在下载的时候按次收费。

更新现有的用户界面

UI设计工作中的一项常规任务就是模拟对现有网页和其他用户界面的更新,最好的方式就是把你的UI界面截图后以图片元件的形式粘贴到RP图稿中,然后你可以使用“裁剪”和“切片”工具(单击主工具栏中的“更多”按钮)将部分截图剪掉或替换为其他元件,或者在你原始截图的顶部添加新的元件来说明你的设计。

元件对齐、网格和辅助线

当你把元件拖放到画布上时,你会发现在默认情况下就可以把一个元件与另一个对齐,元件对齐功能有助于整齐的排列元件。当你画图的时候,有很多元件对齐的选项可是使用,你可以在顶部菜单“布局>网格和辅助线”下找到这些选项,或者在画布上点击右键,选择“网格和辅助线”。

如果你不希望元件默认对齐,可以取消“对齐到元件(Snap to Widgets)”的勾选,你也可以选择显示网格和对齐到网格。默认情况下网格是由点组成的10×10像素的格子,网格的样式、颜色和间距可以通过右键菜单中的“网格设置”来调整。

你也可以为项目中的每个页面添加辅助线或为整个项目添加全局辅助线,拖动画布上方或左侧的标尺,就可以添加页面辅助线,按住[CTRL]或[CMD]键拖动,则可以添加全局辅助线——全局辅助线会在所有页面显示。当你通过菜单“布局>网格和辅助线>创建辅助线”来添加辅助线时,可以直接选用系统预设值,比如960网格系列。

尝试拖拽标尺来添加一条辅助线,按住[CTRL]或[CMD]来添加一条全局辅助线。

母版

母版是由元件组合而成,它只需要在一个地方维护,就可以在整个文件中复用,常见的模板用例包括创建页眉、页脚和导航。你对于模板的编辑,会自动应用到所有使用模板的地方,(这是模板与普通元件的最大区别,普通元件虽然也可以应用到整个文件中,但是不会随着原始元件的更新而更新),你可以把母版添加到页面中,也可以添加到其他母版中(译者补充:母版中还可以嵌套母版)。

创建母版有两种方法。如果你已经在图稿中添加了一些元件,然后意识到线框图的这部分需要在其他地方重复使用,而且最好可以随原始元件来更新,这时候你就可以选中这些元件,然后点击鼠标右键,选择“转换为母版”。(你选择的这些元件仍然会保留在图稿的原始位置,但这时候它们已经变成了你创建的母版的第一个用例。)或者你一开始的时候就设计好母版的内容,在Axure RP界面的左下方找到母版窗格,点击“添加母版”图标就可以创建一个新母版。

当你创建一个母版之后,请在母版窗格中的母版上点击鼠标右键,把鼠标移动到右键菜单中的“拖放行为”上来查看一下当前母版的拖放行为的选项。默认的设置是 “任意位置”,这样就可以把母版的用例拖放到其所在页面的不同坐标处,相比之下,“固定位置”则限制了母版的所有用例都只能放在与母版相同的坐标。通常页眉导航母版使用“固定位置”的设置,因为你可能需要你的页眉在所有页面的相同位置,另外页脚可能会使用“任意位置”的设置,因为不同页面的长度不同,页脚的位置也就不同。

元件和页面风格
默认元件库中的元件样式

默认元件库中的每个元件都有一个默认的样式,当你第一次使用这个类型的元件时,其样式就被导入了RP文件中。举个例子,当你添加一个矩形1元件时,它的样式“矩形1”(白色填充色、黑色细边框等等)就被加入到了你的项目中。

对“矩形1”样式进行修改后,所有使用了该样式的元件样式都会被修改,包括之后从元件库里拖出的一系列矩形1元件。

添加和编辑元件样式

编辑元件样式的方法有两种。一种是直接在元件上进行编辑,点击画布中的一个元件,将它的样式调整到你想要的样子,然后点击样式页签下元件样式下拉框后的蓝色“更新”提示,元件样式就会被你在元件上直接修改的样式更新,之后所有已经应用了该元件样式的元件都会显示为新的样式,包括以后要添加的元件也是如此。

另外一种方法就是点击“更新”下方的“创建”,(注意:如果你看不到这些选项,修改一下你所选元件的样式,之后就能看到它们。)点击“创建”后会打开元件样式编辑器,同时创建了一个包含所选元件属性的样式,给这个新建的样式明明,然后点击“确定”按钮保存修改并关闭元件样式编辑器。

你也可以不用在元件上编辑样式,而直接使用元件样式编辑器来添加和编辑样式,点击样式页签下元件样式下拉框后面的图标即可打开元件样式编辑器,如果你想同时编辑多个样式,可以按住[CTRL]或[CMD]来点选多个样式,然后进行编辑。

应用元件样式

应用元件样式可以在两个地方操作,一个是样式工具栏中的样式下拉列表(用户界面顶部工具栏的最左侧),另一个是检视窗口中样式页签下的元件样式下拉列表。

默认样式

除了应用的其他样式以外,所有元件都共用一个默认样式,如果你在默认元件样式中修改了样式属性,新的样式属性会更新到所有元件上。

(在新建的RP文件中还有一些其他样式,像“一级标题”-“六级标题”和“文本段落”,在将文本粘贴到画布上时就会用到这些样式。)

草图效果(页面)

使用草图效果可以使你的页面看起来像手绘一样,直线变得弯弯曲曲、粗细不均,所有元件上的文本字体都变成了一种风格(比如手绘风格),彩色图像可以变成黑白。

草图样式的设置功能位于检视器中的样式页签下。

元件和页面说明

在构建静态线框图时,使用元件和页面说明来描述交互行为,而不使用用例和动作(关于它们的更多内容将在下篇文章中介绍)。说明可以用来维护版本历史记录、状态跟踪以及元件文本和数据的来源。

说明字段

说明中可以使用不同的字段来编写不同类型的信息,点击检视窗口中说明页签下的自定义字段可以添加新的字段。

元件说明

对于元件说明,你可以使用“添加”下拉列表来选择不同类型的字段,包括文本、选项列表、数字、日期;而页面说明只能是文本类型。

元件说明字段可以根据不同的用途添加到不同的配置中,通过说明页签下顶部的字段下拉列表,你可以选择查看所有说明或仅仅查看特定字段配置的说明。

在浏览器中查看说明

生成可以使用浏览器查看的原型时,你可以选择所要包含的说明。在顶部菜单栏中找到“发布>生成HTML文件”菜单,点击打开“生成HTML”窗口,然后在左侧的列表中选择“页面说明”。通过勾选复选框来选择需要在生成的HTML文件中包含的说明字段,然后可以通过右边的箭头来调整字段的顺序。

元件说明并不是给图稿添加说明信息的唯一方式,你还可以使用默认元件库中的标记元件或自定义元件,为图稿添加标注和说明。通过标记元件为图稿添加的说明,可以直接在浏览器中查看,而不像元件说明那样还需要点击说明图标才能查看。

生成器

你的项目干系人通常不会直接在你的Axure RP中查看你的图稿,为了将你的图稿从RP中导出并转换成可以在浏览器中查看的格式,你需要将.rp文件生成新的文件,这些操作通过“生成器”的选项配置来完成。

每个新的.rp文件已经包含了多种类型的生成器:HTML、文本文档、打印等等。通过菜单“发布>生成HTML文件”可以设置HTML生成器的选项,包括导出文件的保存位置、需要导出的页面和说明以及其他许多选项。(如果你导出的HTML文件看起来比RP中的内容少,那么检查一下生成HTML的选项设置。)

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。