![网站蓝图3.0:互联网产品(Web/APP/Apple Watch等)Axure 7原型设计宝典](https://wfqqreader-1252317822.image.myqcloud.com/cover/502/27110502/b_27110502.jpg)
1.5 Axure RP的特色功能
Axure RP有四大特色,分别如下。
1.5.1 概念图+设计【Sketch+Design】
1.即可粗略设计,也可精细设计的工具【Tools for quick and dirty or polished designs】
在Axure RP中,仅仅使用方块、占位符、形状和文本、可以让你飞快地制作出漂亮的线框图。当你做好准备进行更加精细地视觉美化的时候,你可以加上颜色、渐变、半透明填充、导入图片、使用网格和参考线进行精确定位,或者在其他工具(比如Photoshop,Illustrator等)的帮助下使你的项目达到你需要的合理的真实程度(Fidelity)。
如下图所示,第一张是比较粗略的线框图(Wireframe Prototype),第二张是视觉美化之后的高保真原型图(High-Fidelity Prototype)。他们都算作是原型,只是真实程度(Fidelity)不同。我们在本书中,会主要关注高保真原型图的制作。大家学会了制作高保真的,自然制作低保真的就水到渠成了。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1739365867-Yhg6eO6J5928ku0b9Ove8WNjDbDtRkas-0-eeed4df58a772d3f0af8bce2610790d0)
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0028_0002.jpg?sign=1739365867-FVeVL27GUVc8llaZDcfPiVWvIGsSP54q-0-2e07d0fd2fa5665e3aba15a0aab9c155)
2.能够随时地切换到手绘草图的效果【Switch to a sketch,hand drawn feel instantly】
现在你可以在项目的任何阶段,随时地通过调整精细度(Sketchiness)来将原型图修改为灰度的、手绘的效果。客户可能会因为这种原生态的感觉而喜欢上它。并且通过这种方式,你可以免去用户不必要的期待,让他们专注于功能、内容和互动(而不是颜色,圆角还是直角,透明还是不透明),如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1739365867-KmtBPbeyZpUYNeUtqVNXRG08LbSCuaai-0-4d532cac9ff67281aea60a72e94ff383)
上图就是将精细度设置得比较低的时候,线框图的效果。大家可以看到,Axure RP会自动地将矩形的边框变得崎岖不平,从而展现一种手绘的效果。大家可能还不是很清楚,那么我们再举一个例子。
我们在Axure RP中新建一个项目,然后拖曳一个矩形部件到页面区域中(大家可能还不太熟悉这个流程,不过没有关系,之后我们会详细介绍),现在这个矩形部件看起来是这个样子的,如下图所示。(一点儿也不意外,对吗)
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0029_0002.jpg?sign=1739365867-BpPvuWE4LbwMIM21WqF4OcaKT17rJLEk-0-660bc74f5c75f6063274a357c3d991ea)
然后,我们在页面属性区域的Page Formatting选项卡中找到Sketch Effects选项区域,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0029_0003.jpg?sign=1739365867-15b0dsrXMOCnX4fIRgYPkHCfMEtolovM-0-cdd8e4b37abe967094b8369c6e7729ff)
然后将其中的Sketchiness滑动杆的值向右设置为45。这个时候我们再看看刚才的那个矩形部件,已经被“蹂躏”成这个样子了,如下图(左)所示。
如果你把Sketchiness设置为100,那么就进一步变成了如下图(右)所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0029_0004.jpg?sign=1739365867-CK0F4s4syVXutTmgoXXBk2o4YyjmrjTt-0-1a4e59ea24db3cb318f4c1af2b61fc0e)
当然,你可以把它变回去!
3.几分钟内快速上手并且每天都能够变得更快【Start in minutes and get faster every day】
从你使用Axure RP的第一天开始,Axure RP经典的图形工作环境(非常类似于我们熟悉的Windows界面和Office界面),如下图所示。行内文本编辑和超过50种的键盘快捷键就能够让你高效地工作。当你开始熟悉选择模式,部件样式和动态面板管理器这些功能之后,你的效率将与日俱增。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0030_0001.jpg?sign=1739365867-R3UH4sSHXBV934UeTBYLp8tpvlIdmkTD-0-7effeab73e2a46c9903177006e009bd9)
4.使用主部件,可以做到“一处修改,处处更新”【Change one,update everywhere with masters】
如下图所示。使用主部件【Masters】来制作那些需要重复使用的部分,比如网站的头部【Headers】,尾部【Footers】或者其他模板【Template】。一旦主部件被更新了,那么所有此主部件的副本都将自动被更新。你可以尽你所需在页面中使用Masters,甚至可以在Masters中再次使用Masters从而获得最大的复用性。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0030_0002.jpg?sign=1739365867-GERTISSMZORxDgAalMoUfjLDcKvKMHFK-0-df00d22c3d5b7d3c9e64c08674280d80)
5.部件库让你大踏步地开始【Widget libraries to jump start your projects】
下载那些发布的或者其他客户分享的部件库到你的Axure RP部件库中,或者创建你自己独一无二的部件库吧。加入你自己的图标、商标、品牌元素或者设计模式,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0030_0003.jpg?sign=1739365867-pOkSm9QYOcYk4IZFyzXkd4RltYQTRmgJ-0-33343da69cb1549aaca46f47037f0546)
Axure RP的开发者社区提供了大量的部件库,广告行业使用的,iPhone的,Android的。部件库就像是PowerPoint的模板一样,能够让用户迅速地开始原型的创作。
1.5.2 互动
1.不仅仅是点击这么简单
你可以非常容易地创建简单的点击流网页,也可以使用条件逻辑、动态内容、动画、拖放、计算来创建高级功能丰富的原型。你并不一定要创建高保真的原型,但是如果需要,你就可以很容易地把你的设计上升到新的高度,让你能够更加方便地评估,获得用户反馈以及用户测试。使用Axure RP,你可以很容易地创建目前市面上常见的网页上的几乎所有的基于CSS、JavaScript和Ajax的交互动态功能。比如下面这个功能,就是著名图片分享网站Flickr的一个功能。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0031_0001.jpg?sign=1739365867-8RLnIPvj2DqhvnjBeTGyM1PsuRHI9Vol-0-6fd0bea66afb1852a1082302f092d9a0)
2.无需编程知识,所见即所得
选择一个事件,比如OnClick【点击】、OnMouseEnter【鼠标悬停】或者OnKeyUp【按键弹起】,然后选择一个用例并且选择动作,比如Open Link【打开链接】、Set Widget Value【设置部件值】或者Show Panel【显示面板】。最后为动作设定选择参数,就完成了。一旦你掌握了这个诀窍,你会惊讶于你能做的,并且为居然能够如此快速地实现功能而感到惊叹。
在Axure RP中,完全不懂代码的人经过一定的学习也可以完成简单的网页互动功能,而这些功能原本是需要对CSS、HTML、JavaScript熟练掌握的工程师才可以做到的。虽然我建议互联网的从业者多少都要懂一些代码,但是这种便捷性能够极大地简化我们的工作。比如说我们对着一个PowerPoint上的页面截图说“这里可以点击,这里可以拖曳”,这样的效果就完全没有我们真正地在页面上进行点击和拖曳来得直接和生动,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0031_0002.jpg?sign=1739365867-gqEVX7D6nRQItgHohvDdafP2aYuepnBV-0-4f7fd4eac43f01a375f45d2786b51532)
3.一键点击生成HTML代码,无需浏览器
单击一个按钮,Axure RP会立刻将你的设计生成基于HTML代码和JavaScript代码的原型,并且该原型可以在Internet Explorer、Safari、Firefox或者Chrome中浏览,如下图所示。决策者、开发者和测试人员可以查看,并且与页面进行互动而无须安装Axure RP或者特定的浏览器。你可以把你的文档发布到网络上,或者在http://share.axure.com上进行分享。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0032_0001.jpg?sign=1739365867-KRDSrFvcfdcX5mxH9852orLQgSuzu2QY-0-436b1a7dcd156fe2a8fa84c36d0c602e)
4.你的原型就是你的品牌
它是你的网站原型,那么就应该是你的品牌。所以你的客户应该在原型中看到你的Logo而不是Axure RP的Logo。因此,你可以添加Logo图片和标题到你的原型中,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0032_0002.jpg?sign=1739365867-FQ8yWhdwO7KeR2YoqtScxZqqjajEjxPn-0-73b8003667a02b16b09232643c2f4fd0)
1.5.3 文档
1.部件注释和页面说明
如下图所示,你可以对部件和页面添加说明从而更好地解释背景情况和详细的描述功能。注释应按照自定义的字段进行组织,以便于更好地管理信息和使文档标准化。页面说明还可以针对不同的受众分成不同的类别。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0032_0003.jpg?sign=1739365867-YWox3s3STOOzVI1PlqxFmYUNvmhMrWje-0-61c7cf23e791618691f22ae520ac5efe)
2.强大的,可自定义的Word文档生成器
Axure RP可以生成自定义页头、页脚、标题页和标题样式的Word文档模板,你可以选择是一栏显示还是两栏显示,设定截图、注释和页面说明的顺序,然后,点击一个按钮就可以立刻生成自定义规格说明,随时可用,并且可以随每次升级而自动更新,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0033_0001.jpg?sign=1739365867-bsRa1uR343XqzYwUj09cHP8rPmDX4uHa-0-f80cb446d2acbdfc3f1a9657d6c3e855)
3.导出所有文档
Axure RP不仅仅可以导出所有的部件注释和页面说明,还可以将部件的一些值,比如列表部件或者下拉类别部件中的所有供选择的值,导出为Word文档。你可以随时选择是要导出那些有注释的部件还是所有的部件,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0033_0002.jpg?sign=1739365867-dzFHhkLh1BFcUDIwp4ucESQca41Snr3w-0-f92f0c7edda0379999000317634eba76)
4.通过过滤器将注释分类,然后导出为不同的文档
我们可以通过设定过滤器的方式,根据注释中的不同值,将不同值的注释分别导出。这一功能可以使你在跟踪某个特定的版本或者在注释中更改了需求时,可以仅仅导出某个版本或者某个变化后的注释,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0033_0003.jpg?sign=1739365867-UYhg8nCSawHeqRYsYrmnQN6KOhukYdVq-0-ba7a9d3b0872cfde80a563dcb3c9cea0)
1.5.4 合作
1.在设计团队中共享项目
使用共享项目以便于在所有成员间同步工作。Axure RP会保留所有的工作历史记录,并且如果需要的话,还可以导出之前版本的项目文档。使用一个共享的网络目录以便于建立共享项目。或者在一个SVN服务器上创建一个项目。最棒的地方就是,所有的这些都是免费的,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0034_0001.jpg?sign=1739365867-Dbe2PwEphIhVllfKpJzOI3PUDgEDlx4w-0-8df18046b8f80f2ee10a3787032dc027)
2.Axure Share共享你的项目并且获得反馈
只需要单击一个按钮,Axure RP就可以把你的设计生成为由HTML、JavaScript组成的原型,并且可以在IE、Firefox、Safari和Chrome当中浏览。相关利益者、开发者、测试者可以立刻看到并且开始互动。他们甚至都不需要安装Axure RP和任何播放器。你可以把你的原型发布到网络存储,网站服务器和Axure Share——一个由Axure提供的网络发布空间,如下图所示。
![](https://epubservercos.yuewen.com/8F6493/15477639005571806/epubprivate/OEBPS/Images/figure_0034_0002.jpg?sign=1739365867-2FnMzuFS9KjmLVinyB3DwsWDNZc5HDMk-0-7640cbfb0b08657ac55d37c13ee2bc48)