关于交互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-21 02:43:19

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

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

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

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

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

阿里手机版Demo设计及UE分析

阿里手机版List页图文排版案例 基础背景介绍 1)据"深圳移动"调研,目前阿里客户的主流手机屏幕分辨率通常是176×220和240×320,考虑到目前手机发展的实际趋势,建议以240×320为主要设计平台: 2)176×220屏幕,通常是我们一般意义上的FeaturePhone,字体尺寸一般为16px,少部分为12px和14px: 3)240×320屏幕,通常为我们所说的中端手机,主流字体尺寸为20px(FeaturePhone)和12px(SmartPhone),少部分为14px和

浅谈关于JavaScript API设计的一些建议和准则

  这篇文章主要介绍了浅谈关于JavaScript API设计的一些建议和准则,文中列举了许多知名的JS API进行辅助说明,极力推荐!需要的朋友可以参考下 设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的API设计,也是一样的.但是API设计常常很少关注软件发展,因为为其他程序员写代码的重要性要次于应用UI设计和最终用户体验. 但是API设计,作为

几款适合设计师的交互内容设计工具

  这里所指的交互内容(不包括游戏)主要为以下几类: --交互杂志及交互式电子书: 美国的连线杂志<Wired>,科技新时代<POPULAR SCIENCE>于2010年便推 出了ipad端的交互杂志,时尚传媒集团旗下的多种杂志以及ELLE也相继推出了多款iPad交互杂志. --品牌展示及产品指南: 在appstore上可以看到大量的品牌app,从时尚.美容到汽车,各大品牌相继推出了互动性很强的品牌推介及产品指南app. --互动童书及多媒体漫画: 平板电脑由于操作简单,不需要太多

交互网页设计原则:整洁清晰明确

  在网页交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰,自然易懂.这样用户才能够有效的获取这些信息,并迅速作出决定. 1.什么是"简洁自然,清晰易懂"? 简洁清晰:使信息最简化 "少即是多".提倡使用最少的元素来表达最多的信息.如果信息繁杂,将使用户承担大量的信息负担,造成信息过载,影响效率,不能帮助用户解决问题. 自然易懂:使用用户语言 用户获取信息的方式多样,并且对信息的理解程度也各有不同,所以使用用户平时使用和理解的表达方式去传递信息,更可以被用户

移动Web设计:Mobile Web设计中的建议和禁忌

文章描述:如果你正准备为你的网站制作一个移动设备版本,那这篇文章将会对你相当有用,在本文中,将探索移动Web网页编码设计的各种技巧和注意事项. 如果你正准备为你的网站制作一个移动设备版本,那这篇文章将会对你相当有用,在本文中,将探索移动Web网页编码设计的各种技巧和注意事项: 为了移动设备上的用户体验可以被接受,代码得怎么设计. "Mobile Web"与普通网站的不同之处? 可以让网站成功运行在移动设备和桌面浏览器上的基本技巧 一些Mobile Web设计中的建议和禁忌.以及大量资源

交互设计分析:设计原则的要点

文章描述:交互设计分析:设计原则的要点. 在我们开始一个项目的设计的时候,脑子里肯定有无数的构想.是做视觉冲击强烈.夺人眼球的绚丽风格?还是复古的拼贴风?又或者目前最in的极简主义设计,让重点醒目的跃于画面之上?作为设计师,我们总是日积月累的收集各种各样的好创意,好的设计方案.但怎么能在那么多积累的想法中找到对即将开始的项目最合适它的创意或视觉效果呢? 除了靠我们作为设计师的本能感觉和一直以来积累的经验以外,还有一个很重要的东西能帮助我们决定,那就是--制定设计的原则. 什么是设计原则? 设计的

Mobile Web设计中的建议和禁忌

在这篇文章中,我将努力揭开Mobile Web开发的神秘面纱,换句话说,也就是为了移动设备上的用户体验可以被接受,代码得怎么设计.我将阐述"Mobile Web"与普通网站的不同之处.可以让网站成功运行在移动设备和桌面浏览器上的基本技巧.一些Mobile Web设计中的建议和禁忌.以及大量资源 – 你可以去找到更多有用的信息. Mobile Web和普通网站到底有何不同呢? 这是个很好的问题 – 首先,也许我们应该从"什么是Mobile Web"的问题开始.毕竟,用