作者：[美] John Henry Krahenbuhl 卡恩布尔
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Axure原型蓝图试读：
前言
Axure是当前使用广泛的一个重要的快速原型工具，在设计界持续获得的好评如潮。通过Axure，可以很容易地创建线框图和可点击的原型。通过AxShare（Axure基于云的原型托管服务）以及新发布的AxShare移动端App，用其制作的原型可以很容易地实现与合作者和客户的共享。
这些只是Axure流行的部分原因。在Axure 7发布时，Axure同期展示了一个新的框架，这个改进的框架还支持自适应原型。
除此之外，还有更多改进，包括如Axure软件中的中继器元件、AxShare中的plugin功能等，将原型制作提升到了一个新的水平。在Axure RP 8和Axure RP 8 Pro中水准更加上了一个台阶。
本书给新手和有经验的用户提供了一些常用的设计范式以供探讨和继续学习。有了这些新的设计范式和方法，读者可以更快地完成项目，并将交互水平提高至新的层次。
这本书是爱的结晶，也是我关于Axure和原型设计的第三本书。我希望本书能帮助读者走向精通Axure。我的其他两本书Axure RP Prototyping Cookbook和Learning Axure RP Interactive Prototypes也是由Packt出版公司出版，和本书一起，构成了Axure三部曲。
希望我的书能帮助你增长知识，成为你的参考材料。此外，如果你有需要，Axure社区（http://www.axure.com/community）随时可以给你提供更多的见解和帮助。本书内容
第1章“Axure基础”对新手来说是Axure的入门介绍，对已有一定经验的用户来说则是重新梳理一遍该软件的术语、界面和核心概念。本章同时简要介绍了Axure 7中的新功能—自适应视图。
第2章“创建一个社区网站”中，介绍了如何为页头、图片轮播等页面元素创建交互，以及一个显示社交媒体（如Facebook，Twitter）feeds的右侧边栏。
第3章“创建一个博客”带领读者探讨一个典型博客（例如常见的基于WordPress的博客）的设计范式与交互。
第4章“导入社交媒体内容聚合”介绍了向Axure原型中导入主流社交媒体（如Facebook，Twitter，Instagram，Pinterest）feeds的方法。
第5章“作品集展示页面”中，我们模拟了一个带视差滚动效果的作品集展示网站。
第6章“创建电子手册”讲解了如何利用AxShare中的plugin功能插入JavaScript脚本，进一步扩展Axure的交互功能。
第7章“创建电子杂志”中，我们将学到如何利用新的自适应视图功能，创建一个优化了电脑桌面、平板电脑、手机等不同屏幕尺寸设备上显示效果的电子杂志。
第8章“创建图片比赛网站”讲解的是如何创建一个图片比赛网站。该图片比赛网站包括注册流程、图片展示以及查看参赛作品详情功能，并同样利用自适应视图功能优化其在电脑桌面、平板电脑、手机等不同屏幕尺寸设备上的显示效果。
第9章“创建电商网站购物车”探讨了如何创建一个同样适应电脑桌面、平板电脑、手机等不同屏幕尺寸设备的电商网站购物车。读者还将学到如何创建一些常用的交互，如移除条目后，购物车显示的货品数量自动更新。你需要准备什么
你需要有Axure 7，Axure RP或更新版本的Axure软件，连上互联网，以及学习可交互原型设计的愿望。如果你还没有安装Axure，可前往http://www.axure.com下载免费试用版本。谁需要这本书
任何用户体验领域的专业人士、设计师、信息架构师或商业分析师，只要愿意深入了解Axure中的通用设计范式和提高交互原型设计的技能，就可以阅读本书。阅读本书前应在线框图设计方面有一定的经验，并且对交互设计有兴趣，希望提高原型设计技能。格式和图例
本书将通过不同的字体样式来区分不同的信息。以下是一些例子和相应的解释。
代码文本、数据库表名、文件夹名称、文件名、扩展名、路径名、虚拟URL、用户输入以及Twitter账号名等将使用不同字体，如“URL通常会显示在第三行，以‘src=’开头”。
提示：警示或重要说明
小技巧：小提示或小技巧读者反馈
我们永远欢迎读者的反馈。请让我们知道你们对这本书的看法——你喜欢什么，不喜欢什么。你们的反馈对我们非常重要，它们将帮助我们找到对你们最有帮助的选题。
请将你们的反馈通过邮件发送给我们，我们的邮箱地址是feedback@packtpub.com。请在邮件标题中附上书名。
如果你是某一领域的专家，并且有兴趣成为相关书籍的作者或是贡献者，可以访问网址www.packtpub.com/authors。客户支持
对于我们尊敬的读者，我们提供以下附加服务。下载示例代码
你可以访问网址http://www.packtpub.com来下载和书籍有关的示例代码文件。如果你是从别处买到的此书，可以访问网站http://www.packtpub.com/support注册账号，我们将把相关文件通过邮件发送给你。勘误
尽管我们尽量做到最好，但错误还是很难避免的。如果你在本书中发现错误，不管是笔误还是代码错误，请告诉我们，我们将不胜感激，因为这将帮助我们在后续版本中改进，也将帮助今后的读者获得更好的阅读体验。如果你在书本中发现任何错误，请访问http://www.packtpub.com/submit-errata告诉我们：选择你要报错的书，点击“Errata Submission Form”链接，输入错误详情。一旦你的表单成功提交，相关错误信息将会提交到我们的网站或者添加至相关书籍的勘误表。
要查看之前提交过的勘误信息，可以访问https://www.packtpub.com/books/content/support，输入你要查询的书名进行搜索，相关的信息将会出现在“Errata”一栏下。关于盗版行为
互联网上的侵权、剽窃行为是所有媒体都面临的问题。我们非常重视保护我们版权内容的权益。如果你在网上发现任何对我们的图书进行盗版的行为，请及时告知我们链接地址或进行侵权行为的网站名称，我们将马上处理。
你可以将可能有侵权行为的网址发送到邮箱copyright@packtpub.com。
我们非常感谢你帮助我们保护我们作者的权益，也非常荣幸能够为你提供有价值的内容。疑问解答
如果你对本书有任何方面的问题，可以通过邮箱questions@packtpub.com与我们联系，我们将竭尽所能为你解决问题。第1章 Axure基础
任何一个结构要保持稳定，都离不开坚实的基础。学习Axure也是一样，对其工作环境和界面有深入的理解，就是我们坚实的基础。一旦熟悉了软件基本工作环境，你将能够运用它快速地创建可交互原型。Axure的界面由主菜单、工具栏、站点地图、工作区和一些其他功能区组成。
在这一章中，你将了解到：
Axure工作环境和界面
自适应视图1.1 工作环境和界面
Axure工作环境和其他桌面程序并没有什么不同，我们现在就来看一看。
提示：
请打开一个空白的Axure文档，以便熟悉一下这个工具。在将来的运用中，本章可以作为Axure界面元素的快速参考。对此软件已经有一定了解的用户，可以快速略读本章当作复习。
打开一个空白的Axure文档，你会看到如图1-1所示的界面。
提示：
以上屏幕截图来自Mac版的Axure RP。PC版的Axure RP可能看起来略有不同。图1-1
Axure的主要界面可以分成主菜单、工具栏、工作区以及工作区周围的功能面板等区块。下面我们依次来看一看。
最顶上的是主菜单，它包含如下项目：
File（文件）“文件”菜单中包含用来新建RP文档（RP为“Rapid Prototyping”的缩写，是Axure生成文档的后缀名——译者注）的“New”（新建）选项和“Open”（打开）、“Save As”（另存为）、“Import from RP File”（从RP文件导入）等选项，以及打印、导出、备份、恢复等选项。
Edit（编辑）
该菜单中包括“Cut”（剪切）、“Copy”（复制）、“Paste”（粘贴）、“Find”（查找）、“Replace”（替换）等选项。
View（视图）“视图”菜单里包含“Panes”（功能区）、“Toolbars”（工具栏）、“Reset Views”（重置视图）、“Masks”（遮罩）等功能以及显示选项。
Project（项目）
该菜单中主要是与元件和页面相关的选项（例如样式编辑和注释区），以及自适应视图、全局变量，还有项目设置等相关功能。
Arrange（布置）
该菜单中主要包括“Group”（编组）、“Ungroup”（取消编组）、“Bring to Front”（置于顶层）、“Send to Back”（置于底层），以及对齐功能（左对齐、右对齐、居中对齐等）。此外，还有网格和辅助线选项。
Publish（发布）
新版本中在“Publish”菜单下增加了“Preview”（预览）选项，让你能快速预览你制作的原型，以及“Generate HTML Files”（生成HTML文件）和生成规格说明书等相关命令。该菜单中还包括“More Generator and Configuration”（更多生成器和配置文件）选项。
Team（团队）
在一个团队项目中，你可以与团队共享并且共同在一个项目上工作。该菜单下有“Generate Team Project from Current File”（从当前文件创建团队项目）、“Get and Open Team Project”（获取并打开团队项目）、“Browse Team Project History”（浏览团队项目历史记录）等选项。
Window（窗口）
该菜单中包含最小化和缩放选项。
Help（帮助）
在此菜单下，你可以进行搜索、访问Axure论坛、管理授权、检查更新等操作。
顶部主菜单栏的下方是工具栏。工具栏由两行组成。
第一行工具栏主要包含如下功能：
Selection mode（选择模式）：可选择“Intersected Mode”（随选模式）、“Contained Mode”（圈选模式）或“Connector Mode”（连接模式）
Zoom（缩放）：通过下拉菜单设置默认缩放比例
Publishing（发布）：预览、AxShare功能（例如，通过Axure的云端共享服务发布你的原型）以及其他“Publish”（发布）菜单中的功能
Arrangement of widgets（布置元件）：“Group”（编组）、“Ungroup”（取消编组）、“Front”（前移一层）、“Back”（后移一层）、“Align”（对齐）、“Distribute”（平均排布）以及“Lock”（锁定）和“Unlock”（解锁）元件位置
Interface layout（操作界面布局）：单击这个切换按钮，可以选择显示或隐藏左右两边的功能区
第二行工具栏主要包含如下功能：
下拉菜单调整选中元件的样式
元件样式编辑器
格式刷
字体选项（如字体、字体样式、尺寸、粗细、斜体、下划线、颜色、项目符号列表、插入超链接等）
文字对齐方式（如左对齐、居中对齐、右对齐、顶对齐、中间对齐、底对齐）
填充颜色
外部投影效果
描边选项（如颜色、粗细、图案以及箭头样式）
元件位置和可见性（例如，坐标（x,y），w（宽度），h（高度），以及隐藏命令）
Axure界面的中间部分是工作区。你打开的页面将出现在这里，你也将在这里进行拖动、放置元件来构建交互界面的工作。工作区的左边、右边、下边是不同的功能区。
左边的功能区包括：
Sitemap（站点地图）：你可以在“Sitemap”（站点地图）功能区中总览你设计页面的层级
Widget（元件）：“Widget”（元件）功能区显示元件库，帮助你快速创建线框图和流程图
Masters（母版）：“Masters”功能区显示你整个项目中重复使用的部件。母版常包括页头、页脚等页面元素
在工作区下面，也就是界面底部中央的区域是“Page Properties”（页面属性）面板。该面板包含三个选项卡：
Page Notes（页面说明）
Page Interactions（页面交互）
Page Style（页面样式）
右边的功能区包括：
Widget Interactions and Notes（元件交互与说明）：“Widget Interactions and Notes”（元件交互与说明）包含“Interactions”（交互）和“Notes”（说明）（仅Axure RP Pro版本）两个选项卡
Widget Properties and Style（元件属性与样式）：“Widget Properties and Style”（元件属性与样式）包含“Properties”（属性）和“Style”（样式）两个选项卡
Widget Manager（元件管理）：“Widget Manager”（元件管理）功能区显示工作区内的所有元件（如动态面板等）
提示：
Axure有标准版（Standard）和专业版（Pro）两个不同版本。与标准版相比，专业版在文档生成和团队协作项目方面有更多功能。通过http://www.axure.com/compare可查看更多相关信息。1.1.1 页面
站点地图通常是指对一个网站中所有页面的自上而下的展示。在Axure中，“Sitemap”（站点地图）功能区将页面和文件夹按照层级架构来展示。“Sitemap”功能区在工具栏的下方。1．“Sitemap”（站点地图）功能区
当你打开一个空白的RP文件时，你会在“Sitemap”功能区看到四个页面，分别是“Home”（主页）、“Page 1”（页面1）、“Page 2”（页面2）、“Page 3”（页面3）。如图1-2所示。
提示：
在“Sitemap”功能区中，你会看到标题旁边有一个数字“4”，这是目前在站点地图中所包含的页面数。图1-2
在面板的顶部，你会看到排成一行的八个按钮，它们分别是：
Add Page（新增页面）
Add Folder（新增文件夹）
Move Up（上移）
Move Down（下移）
Indent（降级）
Outdent（升级）
Delete（删除）
Search（搜索）2．创建子页面（child page）
面板中代表最高层级页面的图标是左对齐的。当一个页面有了附属于它的子页面（child page）时，它就成了一个父页面（parent page），这时其左侧会出现一个灰色的小箭头，你可以通过这个小箭头收起和展开其附属的子页面。
有如下方法可以创建一个子页面：
在“Sitemap”面板中单击选择一个页面，单击“Indent”（降级）命令，然后选择“Move Up”（上移）或“Move Down”（下移）命令来移动页面在层级架构中的位置。
将一个页面向右侧拖动，可以同时向上或向下拖动来确定合适的位置。当拖动到其他页面上的时候会出现一个蓝色的框，此时松开，蓝色框的页面就成为了该页面的父页面。
选中父页面后右键单击，在弹出的选项表中选择“Add”（添加），然后选择“Child Page”。如图1-3所示。图1-31.1.2 工作区
工作区（design area）也就是空白的画布，在Axure界面的中心区域，如图1-4所示。图1-41．打开页面
在“Sitemap”（站点地图）功能区中双击一个页面的名字或图标，就可以在工作区打开这个页面。在底部左侧的“Masters”（母版）功能区中双击母版的名字或图标，也可以在工作区打开这个母版。工作区顶部将会有标签页显示打开的页面或者母版的名字（例如，在“Sitemap”面板中双击“Home”页面，页面将在工作区显示，同时工作区顶部会有一个标签页显示“Home”）。
如果打开了多个页面或母版，标签页会在工作区顶部一直显示，除非你手动关闭它。当前被选中的标签页白底显示，未选中的标签页灰底显示，如图1-5所示。图1-5
提示：
单击标签页上的“×”可以关闭这个标签页。你也可以单击标签页栏最右侧的向下箭头来管理标签页。2．显示网格
在往工作区中放置各种元件时，你可能需要网格来作为视觉参考。鼠标右键单击工作区中的任意空白区域，在弹出的选项中选择“Grid and Guides”（网格与辅助线），然后选择“Show Grid”（显示网格），就可以在工作区中显示网格。如图1-6所示。图1-6
提示：
默认的网格间距是10px（像素）。如果要更改网格间距，用鼠标右键单击工作区的任意空白区域，在弹出的选项中选择“Grid and Guides”（网格与辅助线），然后选择“Grid Settings”（网格设置）。3．添加辅助线
你还可以在文档中使用辅助线。你可以选择预设的辅助线，也可以为某个单个页面添加辅助线。鼠标右键单击工作区的任意空白区域，在弹出的选项中选择“Grid and Guides”（网格与辅助线），然后选择“Create Guides”（创建辅助线）。在“Create Guides”（创建辅助线）对话框中，选择“Presets”（预设）下拉菜单即可使用预设的辅助线。有如下几种预设参数可供选择：
960 Grid: 12 Column（960网格：12栏）
960 Grid: 16 Column（960网格：16栏）
1200 Grid: 12 Column（1200网格：12栏）
1200 Grid: 15 Column（1200网格：15栏）
你还可以通过调整“Create Guides”（创建辅助线）对话框中的预设数值来设置辅助线。对话框如图1-7所示。图1-7
提示：
默认情况下，辅助线是对整个文档生效的。如果希望只给当前页面创建辅助线，可以取消勾选对话框中的“Create as Global Guides”（创建为全局辅助线）选项。
如果需要创建单条的辅助线，可以进行如下操作：
1．鼠标移动到页面显示区左边或顶端的标尺，直接拖动到页面上你所需要的位置。
2．如果要移动某条辅助线，直接将其拖动到你希望的新位置。
提示：
默认情况下，单条的辅助线在页面上显示为蓝色，它只对当前页面有效。如果要将这条参考线应用到所有页面，可在创建它时按住键盘上的Command键（Mac电脑；如果你使用的是Windows系统，按住Ctrl键）。默认情况下，全局的单条辅助线在页面上显示为粉红色。
3．要删除一条辅助线也很容易，只需要选中它，然后按下键盘上的Delete键。
4．要删除所有辅助线，鼠标右键单击工作区的任意空白区域，在弹出的选项中选择“Grid and Guides”（网格与辅助线），然后选择“Delete All Guides”（删除所有辅助线）。1.1.3 功能区
前面已经提到，工作区的左、右、下方都有功能区。现在就让我们来进一步看看这些功能区。1．“Widgets”（元件）功能区和元件库
在Axure界面的左侧、“Sitemap”（站点地图）功能区下方，是“Widgets”（元件）功能区。如图1-8所示。图1-8
你可以在“Widgets”（元件）功能区中查看和选用界面设计中常用到的页面元素，也就是元件（例如图片、按钮、方形框等）。元件按照类型被组织到一个一个的元件库里，元件库可以分享，你也可以导入元件库到Axure。2．“Masters”（母版）功能区
在Axure界面的左侧的最下方、“Widgets”（元件）功能区下方，是“Masters”（母版）功能区。如图1-9所示。
提示：
在“Masters”（母版）功能区中，你会看到标题栏“Masters”旁边显示数字“1”。这是在当前打开的Axure项目文件中可用的母版的数量。“Masters”（母版）功能区中展示在一个RP文件中可用的所有母版。母版可能是你设计中用到的单个元件，也可能是由一系列元件（包括其中的交互）组成。通常情况下，利用母版可以让你做一次修改就能更新到所有使用了该母版的页面。
我们可以为母版选择不同的“Drop Behavior”（拖放行为，也就是将母版放置到页面上时如何处理其位置）。三个选项如图1-10所示。图1-9图1-10
提示：“Lock to Master Location”（固定位置）是指，当母版被放置到一个页面时，它永远固定在同一位置。“Break Away”（脱离母版）是指，当将其放置到一个页面时，可以像其他元件一样在页面中随意移动位置，并且当母版更新的时候在此页面的位置不跟随变化。3．“Page Properties”（页面属性）功能区“Page Properties”功能区包含“Page Notes”（页面说明）（仅Axure RP Pro）、“Page Interactions”（页面交互）和“Page Style”（页面样式）三个选项卡。其中“Page Interactions”（页面交互）中提供如图1-11所示交互行为。
提示：
此处提供三种默认事件可供选择，分别是“OnPage Load”（页面载入时）、“OnWindowResize”（窗口调整尺寸时）和“OnWindowScroll”（窗口滚动时）。单击“More Events”（更多事件）将显示上图所示的其他事件。“Page Style”（页面样式）选项卡用来调整单个页面的样式或选择使用页面默认样式。该选项卡下的功能如图1-12所示。图1-11图1-12
你可以选择使用默认样式或自定义你需要的页面样式。你可以通过“Page Align”（页面对齐）来选择左对齐或居中对齐页面（仅应用于HTML），也可以设置页面的背景色、背景图片、水平对齐、垂直对齐、背景图片是否重复显示。“Sketch Effects”（手绘效果）选项可以让页面以手绘效果呈现。
提示：
要了解更多页面样式相关的信息，可以访问https://www.axure.com/learn/basic/page-style。4．“Widget Interaction and Notes”（元件交互与说明）功能区“Widget Interaction and Notes”（元件交互与说明）功能区包含“Interactions”（交互）和“Notes”（说明）两个选项卡。你可以通过“Interactions”（交互）为你选中的元件添加交互行为。以图片元件为例，为其添加交互行为时你会看到如图1-13所示的界面，图1-13
提示：
此处提供三种默认事件可供选择，分别是“OnClick”（鼠标单击时）、“OnMouseEnter”（鼠标移入时）和“OnMouseOut”（鼠标移出时）。单击“More Events”（更多事件）将显示上图所示的其他事件。5．“Widget Properties and Style”（元件属性与样式）功能区“Widget Properties and Style”（元件属性与样式）功能区包含“Properties”（属性）和“Style”（样式）两个选项卡。“Properties”选项卡显示选中元件的属性。以图片元件为例，选中该元件后“Properties”的显示如图1-14所示。图1-14“Interaction Styles”（交互样式）是指元件在一个交互行为完成时的视觉样式，例如，我们可以为一个元件被选中的状态和未激活的状态设置不同的样式。我们还可以为“MouseOver”（鼠标悬停）“MouseDown”（鼠标按下）设置不同的样式。
提示：
有一些元件有特殊的样式和属性。例如，选中一个图片元件后，“Widget Properties and Style”（元件属性与样式）功能区中会出现切割（钢笔形状的按钮）和剪切按钮，而选中一个段落元件后则不会出现这两个按钮。要了解更多不同元件的样式信息，可以访问https://axure.com/learn/basic/widgets。“Style”选项卡则是用来调整所选中元件本身的样式。该选项卡中的功能分为如下几组：
Location + Size（位置+尺寸）
Base Style（基本样式）
Font（字体）
Borders, Lines + Fills（边框+线型+填充）
Alignment + Padding（对齐+边距）“Style”选项卡如图1-15所示。图1-15
提示：
在工作区选中一个元件后，我们也可以通过工具栏上的“Edit”（编辑）功能来调整该元件的样式。我们还可以创建个性化的元件样式。在功能区中的“Base Style”（基本样式）部分，可以调出元件样式编辑器（单击按钮），通过它即可创建个性化元件样式。访问网址[https://www. axure.com/ learn/basic/widgets](https://www. axure.com/ learn/basic/widgets)可查看更多信息。6．“Widget Manager”（元件管理）功能区“Widget Manager”（元件管理）功能区用来切换动态面板的可见性以及管理动态面板的状态。动态面板通常用来控制显示或隐藏内容。
图1-16是显示了两个分别名为“Panel 1”和“Panel 2”动态面板的“Widget Manager”面板。图1-16
提示：
在“Panel 1”的旁边有一个蓝色的方块，这意味着Panel 1的默认状态是显示。而在“Panel 2”的旁边有一个灰色的方块，这意味着Panel 2的默认状态是隐藏。单击这个方块可以切换这两种状态。
在“Widget Manager”（元件管理）功能区顶部我们可以看到七个按钮，它们分别是：
Add State（添加状态）
Duplicate State（复制状态）
Move Up（上移）
Move Down（下移）
Delete（删除）
Widget Filter（元件过滤器）
Search（查找）1.2 “Adaptive Views”（自适应视图）
与以前的版本相比，Axure RP 7及后续版本能够帮助我们更方便地创建自适应原型。我们可以通过新功能“Adaptive Views”（自适应视图）来实现这一点。通过“Adaptive Views”（自适应视图），我们可以为某一屏生成不同的尺寸，并且针对不同的节点进行优化。节点是根据浏览器窗口的像素宽度和/或高度确定的。1.2.1 规划自适应视图
如果我们的网站或应用有相关的尺寸统计，我们可以参考尺寸统计来设置节点。当我们添加一个自适应视图时，可以根据宽度/高度来设置新的视图，也可以从软件提供的五个预设参数中选择。五个预设参数如下：
Large display（大屏显示器）（1200×任意高度或以上）
Landscape tablet（平板电脑横屏）（1024×任意高度或以下）
Portrait tablet（平板电脑竖屏）（768×任意高度或以下）
Landscape phone（手机横屏）（480×任意高度或以下）
Portrait phone（手机竖屏）（320×任意高度或以下）
自适应视图继承父视图或基本视图中的属性。我们通常在基本视图（或默认视图）中完成主要的设计，再为每一个子视图添加额外的细节。
提示：
在子视图中进行的修改不影响父视图。
个人设计师或者团队在自适应视图设计过程中有两种主要的工作思路可供参考：
移动端优先：
以最小尺寸为基本视图
每一个子视图以前一个视图为基础，逐渐放大
从大屏到小屏
以最大尺寸为基本视图
每一个子视图以前一个视图为基础，逐渐缩小1.2.2 管理自适应视图
我们可以参考以下步骤来管理自适应视图。
1．单击工作区左上角“Manage Adaptive Views”（管理自适应视图）按钮打开“Adaptive Views”对话框。如图1-17所示。图1-17
提示：
我们也可以从主菜单中打开“Adaptive Views”（自适应视图）对话框，其路径为“Project”（项目）—“Adaptive Views”（自适应视图）。
图1-18所示为“Adaptive Views”（自适应视图）对话框默认状态。图1-18
2．单击绿色+按钮添加一个新的视图。
3．在“Presets”（预设）下拉菜单中，选择“Portrait tablet”（平板电脑竖屏），再单击绿色+按钮继续添加新的视图。
4．在“Presets”（预设）下拉菜单中，选择“Portrait phone”（手机竖屏）。当你添加完所有需要的视图后，单击“OK”（确定）按钮关闭“Adaptive Views”（自适应视图）对话框。
以刚才的步骤为例，添加完两个视图后的“Adaptive Views”（自适应视图）对话框如图1-19所示。图1-19
5．在以上平板电脑竖屏和手机竖屏设置好之后，工作区的显示如图1-20所示。图1-20
此时我们可以看到自适应视图工具栏中多出了三个标签页，分别对应着我们设置的“Base”（基本）、“768”和“320”三个不同视图。
提示：
通常情况下，工作区的顶端并不会显示基本视图或子视图的标签页。自适应视图的相关标签页仅在视图被创建之后才会显示。要了解更多关于自适应视图设置的相关信息，可以访问http://www.axure.com/learn/adaptive/setting-up。
标签页有蓝色、橙色、灰色和绿色四种颜色分别代表不同状态。在上述例子中，“Base”标签是蓝色的，表示这个视图当前是打开可编辑的状态。“768”和“320”是橙色的，表示它们是子视图，如果当前选中视图的样式进行了更改，它们会受影响。如标签页为灰色，表示它们不会被选中视图样式的更改所影响（例如，如果选中的是一个子视图，它的标签页将是橙色的，而相关父视图的标签页将为灰色）。“Affect All Views”（应用到所有视图）选项被勾选，则标签页将变为绿色，这意味着所有的改动将影响所有的视图。1.3 小结
在本章中，我们了解了Axure软件运行环境和界面的相关知识。我们知道了主菜单、工具栏、站点地图、工作区和各个功能区，还了解了页面、元件和母版，也对自适应视图有了初步的认识。
在下一章中，我们将以创建一个社区网站的过程为例，介绍如何为常用的网页元素创建可共用的交互。把这些共用元素放入可复用的母版之后，我们将为网站创建页头、轮播图片和全局页脚。第2章 创建一个社区网站
社区网站将有相似兴趣的人聚集在一起，提供相关信息，并且提供一个可针对特定主题进行讨论的论坛。通常，我们在研究不同的社区网站时能看到很多相似点：首先，在这样的网站中信息会被分组，每一组中又会有话题列表。用户在选择时可以通过分组来缩小范围，再选择某一个帖子来查看更多细节。
在这一章中，我们会学到如何完成以下任务：
检视整个项目
从客户处得到的背景信息
架构社区网站
检视站点地图
检视论坛与新闻流程
确定和创建母版
完成页面设计2.1 检视我们的项目
在理想情况下，我们能够在项目的一开始就参与进来。我们可以在项目范围界定的过程中提出意见，并提供时间和成本的估算，这些都将体现在工作说明书（statement of work，SOW）中。在需求发现阶段，我们可以通过采访各方面的利益相关人士来确定项目目标和制定我们的方案。从客户处得到的背景信息
在我们的社区网站项目中，客户是一个非盈利的创业组织，他们将开发一个针对火星探索的论坛。客户要求看到一个能体现网站所有页面的原型，还希望看到用户执行以下操作的用例：
1．从主页单击“Forum & News”（论坛和新闻）。 2．单击某一个“Category”（分类）的页头来查看该分类下的话题列表。 3．单击“Topic”（话题）来查看相应的“Topic Detail”（话题详情）页面。
客户还希望这个社区网站包括三个主要部分。这三个主要部分是：“Our Journey to Mars”（我们的火星旅程）“Forum & News”（论坛与新闻）“Universal Charter”（宇宙宪章）
此外，客户还要求首页上有轮播图片，网站还要有社交媒体订阅（social media feed）。有了这些从客户处来的细节和内容，我们就可以开始规划这个社区网站的架构了。2.2 架构我们的社区网站
我们从创建站点地图和流程图开始。有了这些，就可以了解怎么去创建母版。大家应该还记得母版的意义是生成可复用的页面元素。母版帮助我们更快速地进行设计，我们只要改动页面上需要改动的地方就可以。通常，在母版上进行的改动会自动应用到使用了该母版的所有页面上去。
现在我们可以来看看站点地图以及论坛与新闻的流程了。2.2.1 检视站点地图
站点地图是帮助我们对网站进行规划以及方便团队成员之间互相沟通的工具。站点地图显示一个网站的层级关系，突出点击路径、点击深度，还能大致确定总共需要的页数。
根据前文提到的客户提供的背景信息，我们在“Sitemap”（站点地图）功能区创建了一个站点地图，如图2-1所示。图2-1
在“Sitemap”（站点地图）功能区中创建一个站点地图的步骤如下：
1．单击“Add Page”（添加页面）按钮，并将页面命名为“Sitemap”。 2．双击“Sitemap”页面旁边的按钮，在工作区中打开这个页面。 3．右键单击按钮，选择“Generate Flow Diagram”（生成流程图）。 4．在“Generate Flow Diagram”（生成流程图）弹出的对话框中，选择“Standard”（标准）后单击“OK”（确定）。下载示例代码：你可以登录你的账户，并从http://www.packtpub.com网站下载你购买过的所有Packt出版的图书中所提到的示例代码。如果你是从别处购买的此书，可以访问http://www.packtpub.com/support并注册，我们会将需要的文件直接邮件给你。2.2.2 检视论坛与新闻流程
基于客户提供的背景信息和商业需求，我们通过“Widgets”（元件）功能区中的“Flow Widget Library”（流程图元件库）创建了流程图。流程图描述了针对给定用例的主要页面和决策点。我们的论坛与新闻流程图如图2-2所示。图2-2
现在我们可以来确定并创建我们需要的母版了。2.2.3 确定和创建母版
要想明确母版中需要的元件和交互，我们需要关注网页设计的基本要素。在我们这个设计中，我们需要有header（页头）、page body（页面主体）和footer（页脚）。图2-3是我们为这个网站设计的首页的大致样式，其中header，page body和footer都被标记了出来。图2-3
在明确了页面的分区后，我们接下来就要考虑元件的逻辑分组及其交互行为之间的共性。一旦确定了母版中需要的元件，就可以通过raised events（触发事件）来创建自定义交互行为。根据这个思路，我们决定是否需要创建如下母版：
Header（页头）
BreadCrumb（面包屑导航）
Secondary_Page_Body（二级页面主体）
Informational_Page_Body（信息展示页面主体）
Forum（论坛）
Footer（页脚）
除了母版外，我们还要确定所需要的全局变量。根据项目需求，我们将创建如下全局变量：
CarouselClicked
VerticalOffset
HorizontalOffset
Index
BreadCrumbComponent
Topic
TopicHeadline
TopicFilter
提示：
在之后的迭代中，我们可以很容易地添加和移除全局变量。通常在我们针对给定的页面元素、用例和流程、不断完善交互行为和改善用户体验的过程中，会发生这样的情况。
接下来，我们将创建全局变量，并且为每个母版进行设计和添加交互。1．创建全局变量
现在我们要来创建全局变量。在设计过程中，全局变量的应用能让我们在不同页面间共享数据。可以参照以下步骤创建全局变量。
1．在菜单栏选择“Project”（项目）—“Global Variables”（全局变量）。
2．在“Global Variables”（全局变量）对话框中，单击绿色+按扭，输入“CarouselClicked”。单击“Default Value”（默认值）输入区，输入0。
3．重复以上步骤七次，创建其他我们所要用到的全局变量。需要输入的参数如表2-1所列。表2-1Variable name（变量名称）Default value（默认值）VerticalOffset0HorizontalOffset0Index0BreadCrumbComponent10TopicAllTopicHeadlineInteresting TopicTopicFilter0
4．完成上述步骤后，“Global Variables”（全局变量）对话框如图2-4所示。图2-4
5．单击“OK”（确定）。
创建好所需的全局变量后，接下来就该完成母版的设计和交互了。让我们从前往“Masters”（母版）功能区中添加母版开始。2．在“Masters”（母版）功能区中添加母版
我们需要在“Masters”（母版）中添加六个母版，步骤如下。
1． 在“Masters”（母版）功能区中，单击“Add Masters”（添加母版）按钮，输入“Header”（页头）后按回车。
试读结束[说明：试读内容隐藏了图片]