书名:Axure原型蓝图
ISBN:978-7-115-42804-2
本书由人民邮电出版社发行数字版。版权所有,侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。
如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。
• 著 [美] John Henry Krahenbuhl
译 肖心怡
责任编辑 陈冀康
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线:(010)81055410
反盗版热线:(010)81055315
Copyright ©2015 Packt Publishing. First published in the English language under the title
Axure Prototyping Blueprints.
All rights reserved.
本书由英国Packt公司授权人民邮电出版社出版。未经出版者书面许可,对本书的任何部分不得以任何方式或任何手段复制和传播。
版权所有,侵权必究。
Axure是当前广泛使用的一款快速原型设计工具,在设计界持续获得一致的好评。通过Axure,用户可以轻松创建各类原型。这为设计人员提供了极大的便捷。
本书包括9章内容,不仅介绍了Axure的基础知识,还介绍了社区网站、博客、作品展示页面、电子手册、电子杂志图片比赛网站、电商购物网站等设计。本书通过理论和实例相结合的方式,向读者完整地呈现了Axure的强大功能。
本书适合任何用户体验领域的专业人士、设计师、信息架构师或商业分析师参考学习。只要你对交互设计感兴趣,本书就能帮助你提高原型设计技能。
John Henry Krahenbuhl在构建实际、高效、创新的解决方面有超过20年的经验。在创造性思维和企业家精神的引领下,他主导或与人合作了7项已发布的专利,还有很多实用性的专利正在审批过程中。他还是一个全方位的管理专家,擅长产品在其整个生命周期过程中的管理,包括各种规范和用例的定义、原理图和PCB布局、产品化的软件、硬件的实现。
他是一位充满激情、经验丰富的领导者,对设计和用户体验有着不懈追求。他也是Packt出版公司出版的另外两本书《Axure RP Prototyping Cookbook》和《Learning Axure RP Interactive Prototypes》的作者。
对我的家庭致以感激和感谢。
我的孩子们:Matt、Jason、Lauryn和Henry。谢谢你们的理解和耐心,因为我花了太多本该属于家庭的时间在这本书上。
Melissa,我的妻子,我生命中的挚爱,感谢你一直给予我的支持和信任,帮助我保持专注。是你让我的内心充满快乐,我很幸运能和你分享我的生活!
Ryan J. Flynn是纽约的一位设计师和艺术家。他热爱信息和简约,涉足的领域包括零售、路径寻找、可穿戴、金融、营销、医药、法律等。工作之余,他利用闲暇时间探索布鲁克林最具韵味的一切事物。
Jan Tomas是UX设计公司CIRCUS DESIGN(www.circusdesign.cz/en)的老板和设计师,公司设在捷克。他长于用户研究与原型设计。他每天都要用到Axure RP来设计制作网页和移动端应用程序的原型,用以和开发者、经理们和其他利益相关者沟通交流。他具有大型国际项目的经验,也是微软认证的Windows用户体验设计专家。访问www.jantomas.cz可以了解到更多关于Jan的信息。
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与我们联系,我们将竭尽所能为你解决问题。
任何一个结构要保持稳定,都离不开坚实的基础。学习Axure也是一样,对其工作环境和界面有深入的理解,就是我们坚实的基础。一旦熟悉了软件基本工作环境,你将能够运用它快速地创建可交互原型。Axure的界面由主菜单、工具栏、站点地图、工作区和一些其他功能区组成。
在这一章中,你将了解到:
Axure工作环境和其他桌面程序并没有什么不同,我们现在就来看一看。
提示:
请打开一个空白的Axure文档,以便熟悉一下这个工具。在将来的运用中,本章可以作为Axure界面元素的快速参考。对此软件已经有一定了解的用户,可以快速略读本章当作复习。
打开一个空白的Axure文档,你会看到如图1-1所示的界面。
提示:
以上屏幕截图来自Mac版的Axure RP。PC版的Axure RP可能看起来略有不同。
图1-1
Axure的主要界面可以分成主菜单、工具栏、工作区以及工作区周围的功能面板等区块。下面我们依次来看一看。
最顶上的是主菜单,它包含如下项目:
“文件”菜单中包含用来新建RP文档(RP为“Rapid Prototyping”的缩写,是Axure生成文档的后缀名——译者注)的“New”(新建)选项和“Open”(打开)、“Save As”(另存为)、“Import from RP File”(从RP文件导入)等选项,以及打印、导出、备份、恢复等选项。
该菜单中包括“Cut”(剪切)、“Copy”(复制)、“Paste”(粘贴)、“Find”(查找)、“Replace”(替换)等选项。
“视图”菜单里包含“Panes”(功能区)、“Toolbars”(工具栏)、“Reset Views”(重置视图)、“Masks”(遮罩)等功能以及显示选项。
该菜单中主要是与元件和页面相关的选项(例如样式编辑和注释区),以及自适应视图、全局变量,还有项目设置等相关功能。
Arrange(布置)
该菜单中主要包括“Group”(编组)、“Ungroup”(取消编组)、“Bring to Front”(置于顶层)、“Send to Back”(置于底层),以及对齐功能(左对齐、右对齐、居中对齐等)。此外,还有网格和辅助线选项。
新版本中在“Publish”菜单下增加了“Preview”(预览)选项,让你能快速预览你制作的原型,以及“Generate HTML Files”(生成HTML文件)和生成规格说明书等相关命令。该菜单中还包括“More Generator and Configuration”(更多生成器和配置文件)选项。
在一个团队项目中,你可以与团队共享并且共同在一个项目上工作。该菜单下有“Generate Team Project from Current File”(从当前文件创建团队项目)、“Get and Open Team Project”(获取并打开团队项目)、“Browse Team Project History”(浏览团队项目历史记录)等选项。
该菜单中包含最小化和缩放选项。
在此菜单下,你可以进行搜索、访问Axure论坛、管理授权、检查更新等操作。
顶部主菜单栏的下方是工具栏。工具栏由两行组成。
Axure界面的中间部分是工作区。你打开的页面将出现在这里,你也将在这里进行拖动、放置元件来构建交互界面的工作。工作区的左边、右边、下边是不同的功能区。
提示:
Axure有标准版(Standard)和专业版(Pro)两个不同版本。与标准版相比,专业版在文档生成和团队协作项目方面有更多功能。通过 http://www.axure.com/compare可查看更多相关信息。
站点地图通常是指对一个网站中所有页面的自上而下的展示。在Axure中,“Sitemap”(站点地图)功能区将页面和文件夹按照层级架构来展示。“Sitemap”功能区在工具栏的下方。
当你打开一个空白的RP文件时,你会在“Sitemap”功能区看到四个页面,分别是“Home”(主页)、“Page 1”(页面1)、“Page 2”(页面2)、“Page 3”(页面3)。如图1-2所示。
提示:
在“Sitemap”功能区中,你会看到标题旁边有一个数字“4”,这是目前在站点地图中所包含的页面数。
图1-2
在面板的顶部,你会看到排成一行的八个按钮,它们分别是:
面板中代表最高层级页面的图标是左对齐的。当一个页面有了附属于它的子页面(child page)时,它就成了一个父页面(parent page),这时其左侧会出现一个灰色的小箭头,你可以通过这个小箭头收起和展开其附属的子页面。
有如下方法可以创建一个子页面:
图1-3
工作区(design area)也就是空白的画布,在Axure界面的中心区域,如图1-4所示。
图1-4
在“Sitemap”(站点地图)功能区中双击一个页面的名字或图标,就可以在工作区打开这个页面。在底部左侧的“Masters”(母版)功能区中双击母版的名字或图标,也可以在工作区打开这个母版。工作区顶部将会有标签页显示打开的页面或者母版的名字(例如,在“Sitemap”面板中双击“Home”页面,页面将在工作区显示,同时工作区顶部会有一个标签页显示“Home”)。
如果打开了多个页面或母版,标签页会在工作区顶部一直显示,除非你手动关闭它。当前被选中的标签页白底显示,未选中的标签页灰底显示,如图1-5所示。
图1-5
提示:
单击标签页上的“×”可以关闭这个标签页。你也可以单击标签页栏最右侧的向下箭头来管理标签页。
在往工作区中放置各种元件时,你可能需要网格来作为视觉参考。鼠标右键单击工作区中的任意空白区域,在弹出的选项中选择“Grid and Guides”(网格与辅助线),然后选择“Show Grid”(显示网格),就可以在工作区中显示网格。如图1-6所示。
图1-6
提示:
默认的网格间距是10px(像素)。如果要更改网格间距,用鼠标右键单击工作区的任意空白区域,在弹出的选项中选择“Grid and Guides”(网格与辅助线),然后选择“Grid Settings”(网格设置)。
你还可以在文档中使用辅助线。你可以选择预设的辅助线,也可以为某个单个页面添加辅助线。鼠标右键单击工作区的任意空白区域,在弹出的选项中选择“Grid and Guides”(网格与辅助线),然后选择“Create Guides”(创建辅助线)。在“Create Guides”(创建辅助线)对话框中,选择“Presets”(预设)下拉菜单即可使用预设的辅助线。有如下几种预设参数可供选择:
你还可以通过调整“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”(删除所有辅助线)。
前面已经提到,工作区的左、右、下方都有功能区。现在就让我们来进一步看看这些功能区。
在Axure界面的左侧、“Sitemap”(站点地图)功能区下方,是“Widgets”(元件)功能区。如图1-8所示。
图1-8
你可以在“Widgets”(元件)功能区中查看和选用界面设计中常用到的页面元素,也就是元件(例如图片、按钮、方形框等)。元件按照类型被组织到一个一个的元件库里,元件库可以分享,你也可以导入元件库到Axure。
在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”(脱离母版)是指,当将其放置到一个页面时,可以像其他元件一样在页面中随意移动位置,并且当母版更新的时候在此页面的位置不跟随变化。
“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。
“Widget Interaction and Notes”(元件交互与说明)功能区包含“Interactions”(交互)和“Notes”(说明)两个选项卡。你可以通过“Interactions”(交互)为你选中的元件添加交互行为。以图片元件为例,为其添加交互行为时你会看到如图1-13所示的界面,
图1-13
提示:
此处提供三种默认事件可供选择,分别是“OnClick”
(鼠标单击时)、“OnMouseEnter”(鼠标移入时)和“OnMouseOut”(鼠标移出时)。单击“More Events”(更多事件)将显示上图所示的其他事件。
“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”选项卡则是用来调整所选中元件本身的样式。该选项卡中的功能分为如下几组:
“Style”选项卡如图1-15所示。
图1-15
提示:
在工作区选中一个元件后,我们也可以通过工具栏上的“Edit”(编辑)功能来调整该元件的样式。我们还可以创建个性化的元件样式。在功能区中的“Base Style”(基本样式)部分,可以调出元件样式编辑器(单击 按钮),通过它即可创建个性化元件样式。访问网址[https://www. axure.com/ learn/basic/widgets](https://www. axure.com/ learn/basic/widgets)可查看更多信息。
“Widget Manager”(元件管理)功能区用来切换动态面板的可见性以及管理动态面板的状态。动态面板通常用来控制显示或隐藏内容。
图1-16是显示了两个分别名为“Panel 1”和“Panel 2”动态面板的“Widget Manager”面板。
图1-16
提示:
在“Panel 1”的旁边有一个蓝色的方块,这意味着Panel 1的默认状态是显示。而在“Panel 2”的旁边有一个灰色的方块,这意味着Panel 2的默认状态是隐藏。单击这个方块可以切换这两种状态。
在“Widget Manager”(元件管理)功能区顶部我们可以看到七个按钮,它们分别是:
与以前的版本相比,Axure RP 7及后续版本能够帮助我们更方便地创建自适应原型。我们可以通过新功能“Adaptive Views”(自适应视图)来实现这一点。通过“Adaptive Views”(自适应视图),我们可以为某一屏生成不同的尺寸,并且针对不同的节点进行优化。节点是根据浏览器窗口的像素宽度和/或高度确定的。
如果我们的网站或应用有相关的尺寸统计,我们可以参考尺寸统计来设置节点。当我们添加一个自适应视图时,可以根据宽度/高度来设置新的视图,也可以从软件提供的五个预设参数中选择。五个预设参数如下:
自适应视图继承父视图或基本视图中的属性。我们通常在基本视图(或默认视图)中完成主要的设计,再为每一个子视图添加额外的细节。
提示:
在子视图中进行的修改不影响父视图。
个人设计师或者团队在自适应视图设计过程中有两种主要的工作思路可供参考:
我们可以参考以下步骤来管理自适应视图。
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”(应用到所有视图)选项被勾选,则标签页将变为绿色,这意味着所有的改动将影响所有的视图。
在本章中,我们了解了Axure软件运行环境和界面的相关知识。我们知道了主菜单、工具栏、站点地图、工作区和各个功能区,还了解了页面、元件和母版,也对自适应视图有了初步的认识。
在下一章中,我们将以创建一个社区网站的过程为例,介绍如何为常用的网页元素创建可共用的交互。把这些共用元素放入可复用的母版之后,我们将为网站创建页头、轮播图片和全局页脚。