吕皓月 杨长韬 编著
前言
产品经理如果能理解功能的复杂度,从而当程序员说出需要一个星期来完善这个功能的时候,产品经理不会觉得无厘头(因为产品经理花了不少时间才想出这个滑动的办法啊!将心比心,将苦比苦!)。而且,当产品经理付出了这种思考的努力,绝对会比走过去直接跟程序员说:“嘿,我就要苹果首页那样的搜索框”这种方式要好上太多倍。
相信我,没有什么比产品经理和程序员之间彼此强烈的信任能带给项目更好的东西了。嗯,就像婚姻一样的关系……
Axure的故事
Victor,一个电器工程师,然后变成了一个软件开发者,再后来变成了一个产品经理;Martin,一个经济学家和一个自学成才的黑客。两人在一起共同工作的时候,通过阅读基于PPT、Visio和Word格式的产品需求文档来开发软件,两人不约而同地认为:应该有更好的办法……然后,Axure诞生了。
Axure的第一个版本在2003年诞生,它是第一个被设计用来制作基于浏览器的网站原型的软件。目前,Axure被公认为是网页原型工具中的标准。
Axure的四大特色功能
概念图 设计既可粗略设计,也可精细设计;
文档将部件注释和页面说明导出生成文档;
合作在设计团队中共享项目
概念图 设计
在Axure中,仅仅使用方块、占位符、形状和文本,可以让你飞快地制作漂亮的线框图。
当你准备更加精细的视觉美化时,加上颜色、渐变、半透明填充、导入图片、使用网格和参考线进行精确定位,或者在其他工具(比如Photoshop,Illustrator等)的帮助下,使你的项目达到你需要的合理的真实程度。
你可以在项目的任何阶段,随时通过调整精细度来将原型图修改为灰度的、手绘的效果。客户可能会因为这种原生态的感觉而喜欢上它。通过这种方式,你可以免去用户不必要的期待,让他们专注于功能、内容和互动。(而不是颜色、圆角还是直角、透明还是不透明)
合作
使用共享项目,可以在所有成员间同步工作。
Axure会保留所有的工作历史,并且可以导出之前版本的项目文档。使用一个共享的网络目录可以建立共享项目,还可以在一个SNV服务器上创建一个项目。最棒的是,所有的这些都是免费的。
案例1 雅虎首页幻灯
目标效果:用户鼠标在下面四个深蓝色背景小图片上进行悬停操作的时候,上面的大图和文字就会跟着切换。
Dynamic Panel部件
在Axure中,这种由鼠标悬停发起,然后部件的状态在多个状态之间切换的效果,就是Dynamic Panel最擅长完成的效果。
上面那个显示大图的面板就是一个动态面板,下面四张深蓝色背景的缩略图是四个Image部件。
我们为这四个Image部件添加OnMouseEnter事件,也就是鼠标悬停的时候触发的事件。当触发这个事件的时候,根据当前鼠标悬停的是哪一张小缩略图,来决定上面的大面板应该是哪一个状态。可以想象,上面的大面板有四个状态,每个状态里面是一张大图片,分别对应下面的一张小缩略图。
案例2 分享到新浪微博
其它功能:
倒计时3秒自动倒数3秒,然后关闭窗口。
案例3 Gmail的进度条
操作网站、等待加载图片、加载页面、上传文件等步骤时,会有一个进度条,提示用户页面正在工作中,并且向用户传递了大约要等待的时间,以避免用户焦急。
案例4 新浪富媒体广告示意
我们在打开一些门户网站时,经常能看到大篇幅的Flash广告,一般播放5~10秒钟,然后收缩起来变成一个小的图标缩在屏幕右侧。这类广告通常会打扰用户,但是因为其动态、吸引眼球的效果,也成了广告投放喜欢的一种方式。
我们以新浪的几个广告效果为例,说明一下如何使用Axure制作广告效果。打开新浪首页,发现有两个首屏广告在投放中,如下图右侧所示。
其中一个是必胜客的广告,一个是中国移动的广告。
当鼠标悬停在右侧的必胜客广告上时,必胜客的一个条幅广告会出现在页面的最上方。
这两个广告播放完毕后,都会消失,并且不会同时播放。
案例5 iCast广告
iCAST广告就是大家经常在各大网站看到的,在页面右下角播放的视频广告。
制作方法与首屏广告非常类似,只不过特殊的地方就是:如果在播放过程中用户滚动了页面,那么iCAST广告会随着移动,始终位于右下角。
其它功能:
广告播放完毕后,自动关闭广告
案例6 雅虎首页全屏展开广告
这个例子与案例4类似,只是在页面加载时,上方的Flash展开开始播放。
播放完成后,向上收起形成一个小的Flash广告条,继续播放。
案例7 淘宝首页导航鼠标悬停效果
有很多网页的元素、导航或者是模块,当鼠标悬停的时候会改变背景色以给用户一个明确的提示,提示用户当前的选择区域,我们可以在淘宝的首页看到很多对于这种方式的运用。
案例8 淘宝商城的全局导航
随着网站内容的逐渐增多,传统的一栏或者双栏导航已经没有办法将所有内容罗列出来了,所以,现在很多网站,开始采用可伸缩的全局导航来帮助用户寻找到自己感兴趣的类目。
可伸缩的意思就是当用户的鼠标在一级分类上悬停时,一级分类下属的二级和三级分类就会显示出来,而当用户结束悬停后,二级和三级分类就会收缩起来。
案例9 点评网的打分效果
打分是在网站上非常常见的用户互动的功能,比如餐饮网站点评网中用户为餐饮商家的打分、淘宝购物交易后给店家的点评等。
一般要求用户在1分到5分之间对服务和商品进行评价,用户鼠标在打分区域上滑动的时候,分值也会进行变化。用户确定分值后按下鼠标,那么打分就完成了。
案例10 谷歌搜索提示效果
大家打开百度或者谷歌搜索的首页,随便输入一个关键字进行查询,就会发现输入框的下方会出现一个面板,提示用户十个跟用户输入的关键词相关的关键词。这个功能,对用户不知道如何选择关键词,输入错别字时有很大的帮助。
我们要处理的,就是随着用户的输入,展现一个搜索提示的面板,并且这个面板中的内容随着用户的输入而改变。
为了简化,我们假设用户最终要输入的查询关键词是“苹果5手机”,随着用户一个字一个字的输入,动态面板中的内容会不断变化,提示用户可以选择的提示关键词。我们先准备好用户的输入内容和提示面板中提示词的对应关系,如下表:
TextField部件有一个特殊的事件,叫做OnKeyUp(按键弹起),这个事件,在用户通过键盘输入时每次键盘按键弹起的时候触发。所以,用户每输入一个字,就必定会触发这个事件,我们在这个事件中去判断用户的输入,然后匹配内容,改变面板状态即可。
案例11 自己设计网页播放器
这章,我们要做的是自己设计和施工一个播放器的外壳。然后为了演示需要,在壳里面嵌入一个视频Flash文件。我们设计自己的播放按钮、暂停按钮、音量按钮等,然后把它们制作为一个播放器。
案例12 凡客首页的跑马灯文字链
在很多新闻资讯网站或者电商网站,可以看到滚动的新闻文字链和商品文字链。这一节我们来学习如何在Axure中制作滚动的文字链。
过度原型化
这个例子,是一个典型的“过度原型化”的例子,是指在原型的制作上花费了太多的时间。我们完全可以放一个静止的文字链,然后通过文字描述的方式沟通。
案例13 促销的倒计时牌
案例14 制作PPT(提案)
在Axure中,你可以像设计网页一样设计PPT,把你的PPT想象成是一个多个页面的网页就可以了。所有在PPT中能实现的特效、动画和排版,在Axure中都可以实现。
案例15 淘宝商城首页幻灯效果
案例16 新浪微博的图片和视频
案例17 制作iPhone交互效果
在本节中,我们教大家如何使用Axure制作iPhone APP应用的高保真模型。
在Axure RP的网站上,有很多免费的部件库供大家使用:http://www.axure.com/widgetlibraries
大家也可以把自己常用的部件,或者自己制作的页面转化成标准的部件,然后共享出来。
案例18 引用任意页面的任意部分
在这个例子当中,要做一个“出行搜索”。
假设我们要去某个地方度假,需要先乘火车,然后乘飞机,然后订酒店,查看目的地的攻略等,也要买一些常用的出行商品……
出行搜索就是这样一个一站式服务网站。在这个页面上,你可以查询火车票,也可以查询机票,还可以订酒店。
我们把所有跟出行相关的内容都整理到一个页面上来,对于火车票搜索,我们引用酷讯网的火车票搜索部分,对于机票搜索,我们引用去哪儿网的机票搜索部分,对于酒店搜索,我们引用携程网的酒店搜索部分,对于攻略搜搜,我们引用途牛网的自助游部分……让用户在同一个网站,可以分别行使不同的功能。
这里,是用InlineFrame部件,来引用不同页面的不同的部分(仅仅只是某个坐标区域的一部分,而不是整个页面),然后把它们组织到一起进行显示。
案例19~20 登录注册
一般的注册过程包括如下几个步骤:
用户按照提示填写表单;
在用户填写过程中,动态提示用户是否正确输入了内容,如果没有,则提示用户;
用户提交表单,如果所有项目填写正确,则提交成功,否则,提示用户哪些项目出错;
用户成功提交表单或者取消表单。
我们在用户填写过程中,常见的验证方式有如下几个:
用户是否在注册的用户名或者ID中使用了非法字符?
用户是否输入了内容?
两次输入的密码是否一致?
长度是否在6~12个字符之间?
案例21 Apple首页的滑动搜索框
打开苹果首页,单击右上角的搜索框,发现当获得鼠标输入焦点的时候,它会自动展开,而当失去焦点的时候,它又会自动关闭,不占用空间。这样给了苹果的导航更多空间去容纳各种产品的信息——滑动切换,完全的苹果风格。
案例22 优衣库淘宝商城购物车
购物车是所有的电商网站都具有的功能,允许用户像在超市购物一样,先把自己想要的商品放在购物车里面,然后一次性的付款结算。在这里,我们以淘宝的购物车为例,来讲述如何在Axure中制作购物车效果。
案例23 Looklet的真人试衣间
试衣间是这样一种应用:用户将看到一个虚拟模特,可以选择身材跟自己相似的模特,然后把一些漂亮的衣服给虚拟模特穿上,看看效果,然后决定是不是自己需要的效果。
案例24 游戏“大家来找茬”
所以,这两张图片,其实就是带有一些热区的图片,热区放在有“茬”的地方,两张图片中的热区的相对位置是一致的,当用户点中了隐藏的、标志为正确的热区的时候,就成功了,我们通过醒目的标志告诉用户选择正确了,否则,用户就是没有找到“茬”或者找错“茬”了。