经验分享:关于交互Demo设计的一些建议 - 优设网 - UISDC

经验分享:关于交互Demo设计的一些建议

2013/09/29 13488评论区

banner-关于交互demo设计中的一些建议0

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

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

延伸阅读:
经验分享!移动端设计开发流程(附神器推荐)

关于交互demo设计中的一些建议-pic1

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; 而高保真的原型需要花费更多的精力,也不够高效,除非是用于汇报演示方案、或是为可用性测试制作高保真原型。

关于交互demo设计中的一些建议-pic3
 

一、遵守栅格规范

很多新人交互设计师都比较容易忽略这一点,没有按照栅格规范来布局,这样容易导致的结果就是:视觉设计师在按照栅格排版时,发现在交互稿中能排下的内容,在视觉稿中排不下了,这样就还得返回去改交互稿,或是需要重新设计布局。
所以要养成习惯,在设计初时,一定要先根据栅格进行布局,同时也要保证交互稿中的字号、间距尽量符合视觉要求(比如间距最小10像素等),以免给视觉造成不必要的困扰。

关于交互demo设计中的一些建议-pic2
 

二、不要使用截图与颜色

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

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

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

关于交互demo设计中的一些建议-pic4
 

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

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

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

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

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

关于交互demo设计中的一些建议-pic5
 

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

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

关于交互demo设计中的一些建议-pic6

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

五、善用master,提高效率

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

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

关于交互demo设计中的一些建议-pic7
 

六、版本存档也很重要

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

关于交互demo设计中的一些建议-pic8
 

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

原文地址:Heyuchan

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:156982)分享实战经验。
设计微博:拥有粉丝量55万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/interaction-design-demo

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里