以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://p.pnq.cc/ue/?p=185

交互设计文档4:Axure交互实例

作者:季子乌  |   发布: (网友)稻草   |   时间:2009-03-11 09:15:00 文字大小:- +

上下文链接:交互设计文档-1:经验和设计工具交互设计文档-2:设计工具的选择 交互设计文档-3:Axure线框图实例

 上篇用SNS未登录首页的实例介绍了Axure RP Pro制作线框图(Wireframe)的基本操作方法,嗯,那只是个入门。这个工具更多的“好东西”在这篇,以及在大家自己的研究之中。下面,我就把我所用到过的“好东西”先来分享分享,嘿嘿!

  1. Masters(通用模块)
    上篇的未登录首页中的底部,在网站中是通用的内容,因此我们可以利用到Masters(通用模块)。在通用模块中新增一个取名为“footer”的Masters。
    axure-example2-1
    双击“footer”模块名进行编辑,将Home页中footer的内容剪贴到模块中。为了在页面中的准确定位,我给footer也加了一个底色框。
    axure-example2-2
    然后别忘了把“footer”拖到Home页中相应的位置哦。
    axure-example2-3
     
  2. Menu(菜单)和Quick Link(快捷链接)
    RP中制作多级菜单非常方便,只需要用到组件工具中的:
    axure-example2-4
    一个Menu(Vertical):垂直菜单,一个Menu(Horizontal):水平菜单。
    菜单默认的一级Menu Item(菜单选项)有3个,我们可以通过右击某个选项来插入同级菜单(Menu Item)和增减下一级菜单(Submenu)。还可以编辑菜单
    axure-example2-51
    Tips:按键盘Tab键只会让当前聚焦点在菜单选项间浮动,不能增加新菜单选项。
    新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同;
    另外,在菜单中修改任一菜单选项的宽度,整个菜单的宽度都会被修改。也就是说,菜单宽度值是各个一级菜单选项的和,而不是自己事先定好的宽度。
    axure-example2-6
    拉长或缩短整个菜单的宽度时,只有最后的一级菜单选项的宽度被改变。可以通过拖动来选择多个菜单选项,在公共栏中对内容显示进行相关操作。
    axure-example2-7
    Tips:要先选中上级菜单选项,下级菜单才会显示出来;
    下级菜单显示的起始位置是上级菜单的左边线,并且无法超过左边线。通过右击菜单中的“Edit Rollover Style(编辑翻转样式)”项,可以制定鼠标移动到菜单上时的菜单样式变化。
    axure-example2-9
    Apply to:
    This menu item only :只应用到对当前菜单选项;
    This menu only:只应用到同级菜单;
    This menu and all submenus:应用到所有同级菜单和下级菜单;Tips:为菜单添加了Rollover Style之后,菜单选项的左上角会出现一个黑白小框,鼠标移动到小框上,就可以看到Rollover Style的预览效果。
    axure-example2-10为菜单加上链接,我们选择菜单选项“首页”,再选择Interactions(交互)事件中的“Quick Link”
    axure-example2-31
    在Link  Properties(链接属性)中选择网站页面地图中的“Home”页。一个链接就添加好了。
    axure-example2-32 
    当然,也可以添加外部链接(Link to an external url or file)、重新加载当前页(Reload current page)、返回前一页(Back to previous page)。
     
  3. 表单和交互事件-关键字匹配实例
    前一篇介绍了一些表单组件的使用(文本输入框Text Field、下拉菜单Droplist、复选框Checkbox等),下面我们通过“关键字匹配”实例中交互事件,深入一点来认识表单的丰富交互效果。做一个类似google搜索的“查询建议”的关键字匹配实例:
    google-keywords
     
    我们简单模拟这个效果,寻找好友中姓“李”的朋友和叫“李查……”的朋友。实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。=
    点这里先看看我做好的效果,下面的图片效果:
    axure-example2-show
     
    过程讲解:
    用Text Panel、Text Field和Button 先做好搜索内容。然后拖出一个Dynamic Panel(动态面板):
    axure-example2-11
    在Text Field下面拉伸出一个“查询建议”的区域来:
    axure-example2-13
    在Label标签栏分别为工作区中的Text Field和Dynamic Panel命名为“keyword”和“matching”双击“matching”,为它加上3个State(状态):
    axure-example2-12
    第一个状态设为空内容,双击第二个状态(matching1)进行编辑,用List Box(选择框):
    axure-example2-17
    在List Box中添加多个姓“李”的好友名字选项。
    axure-example2-22
    注意:Allow multiple(允许多选)不要勾选。回到工作区,选择“matching” 动态面板,双击第三个状态(matching2),继续制作“查询建议”菜单,这次都叫“李查……”。
    以下是“matching1”和“matching2”状态的菜单内容。我们分别为两个选择框命名为“matchingList1”和“matchingList2”。
    axure-example2-23axure-example2-24
    Tips:可以看到两个状态的边缘都有一条蓝色虚线,这就是我们在调用动态面板的时候为它预设的区域大小。超过蓝色虚线的部分将在页面中无法被显示出来。

    下面开始添加Interactions(交互事件)。为表单添加交互事件的方法,先选中工作区中的表单组件,然后在Interactions面板选择“Add case..”添加事件。
    axure-example2-15
    或是用一些预设的交互行为作为条件,为组件添加事件。
    OnClick:点击
    OnKeyUp:键入
    OnFocus:聚焦
    OnLostFocus:失去聚焦

    为“keyword” 文本输入框OnKeyUp(键入行为)添加事件。键入“李”时,显示“matching” 动态面板中的“matching1” 状态。
    axure-example2-25
    勾选Select Actions(选择动作)中的“Set Panel state(s) to State(s)(改变动态面板的状态)”,在“Step 3: Edit the Actions description(第三步:编辑动作描述)”中选中蓝色的Set Panel链接,将动态面板“matching”的默认状态“none”改为“matching1”,即前面设好的姓“李”的“查询建议”状态。
    axure-example2-27

    点击右上角的“Edit Condition(编辑条件)”,为Case设键入时的keyword值。
    可通过下拉菜单和输入框设置条件:“text on widget(文本组件)”,找到“keyword”文本输入框,equals value “李”(变量值等于“李”)。
    axure-example2-26

    以下还需要添加几个Case,这里不详说,大家试着自己做一下:
    OnKeyUp行为下:
    Case 2:当键入“李查”时,“matching”动态面板状态变为“matching2”
    Case 3:当键入值不等于“李”时,“matching”的状态变回为“none”
    OnFocus行为下:
    Case 1:keyword的值是“李”,“matching”动态面板状态变为“matching1”
    Case 2:如果keyword的值是“李查”,则“matching”动态面板状态变为“matching2”
    OnLostFocus行为下:
    Case 1:“matching”动态面板的状态为“none”
     
    为“matching”动态面板内的两个状态添加交互事件,效果是“当某个查询建议被选中时,keyword文本输入框的文本值变为选中的内容”。
    “matchin1”状态里的“matchingList1”选择框,OnChange行为的Case 1:
    axure-example2-28
    这样的Case我们需要做5个,因为我们有5个姓李的好友。我们可以通过Copy Case和Paste Case,来复制和粘贴。
    axure-example2-29
    但我们需要把equals的值“李安”分别改成其他的名字……

    再选择OnChange,复制所有的Case:
    axure-example2-18
    到“matchin2”状态里的“matchingList2”选择框
    axure-example2-20
    将多余名字(不叫“李查”)的Case删除“Delete Case”
    axure-example2-21
    别忘记需要将选择框的名称修改为“matchingList2”
    axure-example2-30

    总算好了,发布看看吧(捏汗ing~~)~~点这里看效果;and 点这里下载.rp源文件,源文件包括了前篇中制作的SNS首页和今天讲解的所有内容。

  4. RP Pro5.5多动作-倒计时跳转页面实例
    RP 5.5版本之后,支持多个Action(动作)同步,这样我们可以制作出更多的交互效果来了。比如说:倒计时跳转页面
    新建一个页面,添加一个Text Panel加上内容“将在  秒后跳到首页!”。在文本空格处加上一个Dynamic Panel(动态面板),在Label中为它取名为“stopwatch”。
    axure-example3-11
    再为它加上“s5”到“s1” 5个状态,分别编辑5个状态,在里面加上内容“5、4、3、2、1”5个倒计时秒数。
    Tips:建议文本中输入空格时用全角输入,否则它将跟Dreamweaver一样在HTML不能显示全部的空格,这样会产生与设计时的错位。利用工作区下面的Page Interactions(页面交互栏)为页面添加事件。
    axure-example3-2
    双击“OnPageLoad”,这时我们看到5.5版本中有一个选项“Advanced Editor(高级编辑器)”
    axure-example3-31
    利用这个高级编辑器我们可以为页面同时添加多个动作。选择“Add Action”增加动作,可以不断为页面添加动作。
    axure-example3-4
    Wait Time(ms)(等待时间)是我们等下要作为倒计时用的动作,单位是毫秒(ms),1秒=1000毫秒。我们按步骤为页面事件添加动作:
    axure-example3-51
    “stopwatch”秒表跳在“s5”第5秒;
    等待1秒;
    “stopwatch”跳到s4;
    等待1秒;
    “stopwatch”跳到s3;
    等待1秒;
    “stopwatch”跳到s2;
    等待1秒;
    “stopwatch”跳到s1;
    等待1秒;
    跳到首页。“Step 2: Select Actions”区域中的动作可以通过右上角的三个小按钮进行“上移、下移、删除”操作。另外,跟前面讲的表单交互一样,“Step 3”动作描述中的参数可以通过蓝色文字链接进行修改。
    完成添加事件,多个动作一次完成。点这里看效果吧!

据称Axure是目前Windows系统最好的原型设计工具了,它的强大就在于这些交互事件,远不止我说的这些。欢迎大家继续研究、发现和探讨。
如果你说这些交互操作太复杂了?!嗯,是的,如果你不需要用到交互效果,可以选择其他更轻巧工具(如Mockups 或 Pancil)。但既要做原型又要达到交互效果,又加上你是Win操作系统的话,Axure无疑是当前最好的选择了。而且,Axure也是有汉化包的,大家可以去google之哦~~偶已经习惯于用“有道桌面词典”+ 英文版软件了=。=(这是无奈的习惯~~)
祝你“用餐”愉快~~

:D 终于收尾了,撒花~~~~

更多
打印  |  相关话题:原型(Prototype) Axure   |  类别:信息和交互  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买