网站设计分析:关于交互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,跟实际产品一样,是会迭代和不断被修改的,所以,一定要记得存档。即使是在同一个原型上做修改,也一定要做记录,这对后续回顾很重要。


  后话:交互Demo设计,是每个交互设计师最最基本的技能,这也是一个梳理思路很好的方式,但不是唯一的形势,Axure也不是唯一工具。只要能清晰表达产品思路、界面UI、流程逻辑及交互状态的好用工具都是值得去尝试的。

  (原文链接:http://heyuchan.com/?p=529)

时间: 2024-09-30 04:50:56

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

关于交互Demo设计的一些建议

为方便产品经理.设计师.开发及项目相关人员能够看到直观的效果,进行更有效的沟通:提供直观的产品设想,说明用户将如何与产品进行交互,在交互设计的过程中一定会产出各种各样的产出物,如流程图.思维图.纸上的草稿.甚至高保真演示稿. 这里简单分享下自己在项目过程中的交互Demo设计的一些心得. Axure 制作交互Demo的软件有很多,个人比较喜欢且习惯的就是Axure.Axure操作简单明了,对于初学者来说,非常容易上手:它也拥有强大的交互演示动作,对于高级使用者来说,制作非常高保真的演示Demo,

网站设计分析:交互设计那些事儿(二)

中介交易 SEO诊断 淘宝客 云主机 技术大厅 <交互设计那些事儿>之一完工后,承蒙各位抬爱,在微博时代被大量转发和分享,也让我收到一些邮件,询问我下篇为何还不出来?请原谅我的惰性,每个周末都给自己找了不少借口一拖再拖,上个周末又在家里养了两天的病--在此提醒朋友们,换季季节,多喝水,多休息,少生病哈. 一. 理论前提 1. 人机交互与人类信息处理机制理论 既然产品设计出来不是给设计师用的,而是给用户用的,他们如何理解.认知.使用产品才是最重要的.因此"定义用户",&quo

交互Demo设计:交互设计心得经验分享

文章描述:交互Demo设计,是每个交互设计师最最基本的技能,这也是一个梳理思路很好的方式,但不是唯一的形势,Axure也不是唯一工具.只要能清晰表达产品思路.界面UI.流程逻辑及交互状态的好用工具都是值得去尝试的. 为方便产品经理.设计师.开发及项目相关人员能够看到直观的效果,进行更有效的沟通;提供直观的产品设想,说明用户将如何与产品进行交互,在交互设计的过程中一定会产出各种各样的产出物,如流程图.思维图.纸上的草稿.甚至高保真演示稿. 这里简单分享下自己在项目过程中的交互Demo设计的一些心得

网站设计分析:专题网页设计 你怎么看?

认识专题--既然是关于某个主题的专题,那么一个简介视乎是必不可少的,各大专题页我们都能看到这样一个简介,或长或短,但一定要深刻醒目. 页面特性:产品页面简洁易用,专题页面绚丽视效印象深刻. 在页面设计当中,产品页面(如facebook 微博 twitter 微吧等)的设计.注重功能,交互,设计要考虑用户长时间的浏览体验.视觉上侧重间距,布局,按钮和logo,及icon样式.注重规范和视觉识别性.样式通常简洁易用,绚丽元素少,视觉上并不强调冲击力. 专题页面时效性有限(大多专题是有推广及活动时间限

网站设计分析:浅谈设计中的逻辑

逻辑(理则学),源自古典希腊语λόγος (logos),最初的意思是"词语"或"言语",还引申出意思"思维"或"推理".逻辑经常被认为对论证评价准则的研究,尽管逻辑的精确定义在哲学家之间尚有争议的事情.这个主题还是有所依据的,逻辑学家的任务是相同的:提出大量的有效和谬误的推论,从而允许人们区别出好论证和坏论证. 逻辑,也就是思维的规律.小时候有人问我一群羊加一群羊等于多少群羊,我二话不说是两群羊,他说错了,是一大群羊.1+1

网站设计分析:了解网页设计中的分割布局

随着互联网的高速发展,各种各样的网站层出不穷.在这样的环境下,用户是如何在浩瀚的互联网海洋中快速挑选网站的呢?网页设计师又如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式--分割布局,这种布局方式试图让用户初览页面时感受到一种友好的浏览体验. 下面进入翻译正文: 作为网页设计师,我们可以参考的设计范例和布局原则有很多,比如说:栅格化.纵向一致性.F型布局.Z型布局.三分法则.黄金分割法等等.注重这些原则将会给你的设计带来视觉吸引力和功能

电子商务网站设计分析三:登陆注册页设计

电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情有可能瞬间大打折扣. 电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象.用户之所以如此反感,也不完全因为流程繁琐,网站的表现形式不够友好.人性化也是原因之一,甚至还有网站令用户很直接的感受到一种强迫性. 市场环境让几乎所

电子商务网站设计分析系列之二:首屏设计

屏(above the fold)是指不滚动web网页屏幕就能被用户看到的画面. 世界著名的网页易用性专家尼尔森曾经有报告显示,首屏以上的关注度为80.3%,首屏以下的关注度仅有19.7%.这两个数据足以表明,首屏对每一个需要转化率的网站都很重要,尤其是电商网站. 相关阅读:电子商务网站设计分析系列之一:首页导航 在电子商务网站中,用户最急切需要获得的不外乎两点:吸引人的商品或店铺,以及网站能够给予他的信任感.信任需要积累,因此,各类宣传推广信息就成了电商首屏展示的不二之选. 一个能引人驻足停留

电子商务网站设计分析:登陆注册页设计

  AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的登陆注册页设计,欢迎关注! 电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情有可能瞬间大打折扣. 电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象.用户之所以如此反感,也不完全