• 网站设计分析:关于交互Demo设计的一些建议
  •  

    \

     

      为方便产品经理、设计师、开发及项目相关人员能够看到直观的效果,进行更有效的沟通;提供直观的产品设想,说明用户将如何与产品进行交互,在交互设计的过程中一定会产出各种各样的产出物,如流程图、思维图、纸上的草稿、甚至高保真演示稿。

      这里简单分享下自己在项目过程中的交互Demo设计的一些心得。

      

    \

     

      Axure

      制作交互Demo的软件有很多,个人比较喜欢且习惯的就是Axure。Axure操作简单明了,对于初学者来说,非常容易上手;它也拥有强大的交互演示动作,对于高级使用者来说,制作非常高保真的演示Demo, 也是非常有成就感的。

      Balsamiq

      提供了丰富的手绘风格的web常用元件,能创建接近于纸上手绘的原型,让人有眼前一亮的感觉,个人建议初稿方案的时候可以考虑用这个更能吸引人。

      Mockups

      与Balsamiq 风格相似,而 Mockups最大的特色是网页版,无需下载安装,可以基于web的存储在任意电脑上联机打开。

      其他还有一些工具,就不做介绍了,因为个人也没有使用过,比如:

      Microsoft Office Visio、Pencil sketch、Design Studio、Prototype Composer、Lucid Spec、Irise Professional Edition、Adobe Reader…

      每个软件都是各有特色,也有利弊,但软件都只是工具,用哪个都无妨,只要符合自己的习惯就好,关键是产出物。

      相对中保真的交互Demo

      工具之后,就是Demo稿的设计了。在平常的项目中,我基本上都是使用Axure 工具,也是大家常用的工具。而交互Demo也只要出到相对中保真的状态即可,所谓的相对中保真,就是产出交付物中能体现出用户在每个页面上期望看到的内容,以及这些内容在页面上的相对优先级,并要提供流程说明和操作方式及响应状态的表述。

      不是粗糙的草稿方案,也不要出太高保真的视觉效果。草稿方案,可以用手绘或者接近手绘效果的工具(balsamiq、Mockups),不见得都需要用axure; 而高保真的原型需要花费更多的精力,也不够高效,除非是用于汇报演示方案、或是为可用性测试制作高保真原型。

      

    \

     

      一、遵守栅格规范

      很多新人交互设计师都比较容易忽略这一点,没有按照栅格规范来布局,这样容易导致的结果就是:视觉设计师在按照栅格排版时,发现在交互稿中能排下的内容,在视觉稿中排不下了,这样就还得返回去改交互稿,或是需要重新设计布局。

      所以要养成习惯,在设计初时,一定要先根据栅格进行布局,同时也要保证交互稿中的字号、间距尽量符合视觉要求(比如间距最小10像素等),以免给视觉造成不必要的困扰。

      

    \

     

      二、不要使用截图与颜色

      有些产品人员或设计师为了能方便,拼凑各种竞品的截图,组成一个页面。这样即不规范,也大大降低了交互稿的档次,还会对视觉设计师也有一定的干扰,个人是非常厌恶的。

      另外,交互阶段的产出方案,应该更聚焦在信息布局、内容层次、操作流程。不太建议在交互稿上使用色彩(除了文字或特殊状态),避免对视觉设计师造成不必要的干扰。如果真的有一些关于想法,可以通过文字描述,或者直接告诉视觉设计师需要营造什么样的氛围,达到什么效果。

      让色彩、质感、具体形势交给视觉设计师,多点空间让视觉设计师去尽情发挥。

      

    \

     

      三、不要沉迷于复杂的交互动作效果

      Axure提供了丰富的动作脚本支持,使得动态模拟真实界面交互变成可能, 能实现状态切换、时间动画以及其他一些惊人的小玩意。

      但有时候我们需要思考,在日常项目中是否需要花费这么多的精力和时间?

      这也取决于于这个原型是用于什么情境。如果原型是用以进行早期的可用性测试,或为争取资源的高保真演示汇报Demo,也许需要我们快速产出接近于实际界面的可操作效果。

      而如果只是用于流程中的交互物,提供给视觉设计师或前端工程师进行开发,那么过度的设计和效果只能是浪费精力。

      

    \

     

      四、一定要有一套属于自己的控件库

      把常用的控件、功能组建、图标、标注等制作成通用的标准小单元,插入到部件库(widgets),在制作交互Demo时,只需要调出需要的控件即可,这可以大大的提高你的效率。

      

    \

     

      关于原型控件,每个原型工具都有,可以网上搜索或者调用下他人分享的。但个人建议,还是根据自己的习惯或产品设计规范,制作一套自用的标准控件库。

      五、善用master,提高效率

      大量的页面进行统一的更新也是相当麻烦的一件事。在制作时,直接用master制作复用的模块,来取代复制黏贴,在需要调整时,只需要调整master文件即可。

      master是Axure提供的类似于自定义组件的功能,你可以在master设计常用的交互组件,然后在不同的页面引用,如页面头尾、菜单等会在大部分页面公用内容,非常适合做成master,然后在各个界面中拖曳相应到指定位置。这样当这些共用内容需要修改时,只需修改mater即可。

      

    \

     

      六、版本存档也很重要

      Demo,跟实际产品一样,是会迭代和不断被修改的,所以,一定要记得存档。即使是在同一个原型上做修改,也一定要做记录,这对后续回顾很重要。

      

    \

     

     麦谷网络济南网站建设分享。

添加时间:2013-08-27 点击次数:42

麦谷公益   |   律师声明   |   商务合作   |   联系我们   |   网站地图   |   网站百科

Copyright © 2003 - 2011 Meganet. All Rights Reserved 鲁ICP备09105359号

艾默生UPS电源 艾默生UPS官网 艾默生空调官网 艾默生空调 艾默生精密空调 精密空调网 山特UPS电源 艾默生UPS电源
癫痫病 北京癫痫医院 北京癫痫病医院 癫痫病能治愈吗 癫痫病可以治愈吗 癫痫病的早期症状 癫痫病的早期症状 癫痫病的最新治疗方法 癫痫病人不能吃什么 癫痫病是怎么引起的 北京肾病医院 肾病医院排名 肾病的早期症状 北京肾病医院哪家好 肾病医院 西安康杰癫痫病医院 癫痫病能治愈吗 癫痫病是怎么引起的 北京癫痫病医院 癫痫病的最新治疗方法