浅谈网页设计中有趣的交互设计

发布时间:2014/6/26 标签: 设计技巧, 交互设计 分类:设计

交互设计的本质是对用户行为的一种设计,直达内心的设计能够影响用户自身的情感,从而引导用户的行为、提升趣味性和愉悦度等,这些都是针对用户情感化设计的领域。针对用户情感进行设计时,需要考虑产品的用户群,有趣的交互设计将会为产品塑造个性,需要明确产品个性是否与目标用户相符。富有灵感和创意的设计与一般设计的区别在于,它不那么容易被想到和实现,一旦它被实现,一定是个非常有趣并且迷人的网站。

1.图形视觉化

人们往往会忽略身边所熟悉的事物,这是人本身的适应性所造成的,当在熟悉的状态当中出现新奇有趣的东西时,人们的注意力也会被集中过来。网页中,不规则的形状设计可以生成最有趣、最吸引人的网站,用常态之外的形状来创造视觉上的兴趣点,更有利于用对网站的清晰辨识,并且方便快捷访问。每个网站需要有它的独特性来吸引用户,但表达这些独特性的元素,一定不能对用户理解内容产生干扰。

2.“大”时代登场

对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局。无论是采用大字体、大背景还是大按钮,都极具视觉冲击力,吸引用户注意力。

3.合理的用户引导

任何一个交互的过程对于新用户来说都不能保证所有人都能准确完整地走完一个流程。必须要在用户打开网站之后,引导用户完成某些主要任务流程,帮助用户快速掌握网站的使用方法,减少用户的思考时间,让用户快速体验到网站中的乐趣,激起用户对功能的尝试欲望。同时也要避免接连不断的展示引导信息,这样不仅会加重短期记忆,而且会让新用户认为应用过于复杂,望而生畏。

4.合理的信息架构

合理的信息架构是减少信息层级,追求信息到达用户的最短距离,能够帮助用户更方便快捷地在网站上寻找到他们需要的信息,从而有效地提升网站的用户体验。在设计的表现形式上追求界面扁平,注重通过弱化视觉效果来强化应用的功能。

合理结构设计尊重大多数用户的使用习惯,一般要采用人体工程学的设计原理,将网站上各种功能的操作都遵循右手使用习惯,并且在一些地方进行标识引导左手上网的用户习惯,这样才能够让网站的结构显得更加人性化。另外,这对搜索引擎排名有实质影响,尤其是从长远来看,因此遵循搜索友好性的基本原则是比较明智的。

5.导航隐藏功能

将鼠标放到导航的标签上,原本静态的图标(如冰箱)将会自动打开,告知你的当前位置。图标在鼠标不触碰的情况下呈现静态,有趣的交互使整个网站看起来更有意思。

点击后:

6.具有亲和力的图形化导航

最近的导航设计越来越多的采用了图标,代替了原有的文字,并且有意的扩大了单个标签的点击区域。文字加图标解决了用户易用(交互、文案),以及想用(视觉,交互)来表现的问题。

7.反馈设计

反馈和交互意味着使用适当的反馈方式,以及与程序之间的交互,让用户时刻知道当下发生了什么,而不仅仅是当事情出错时显示一个警告。对网站用户而言,反馈属于提示信息类型的一种。

案例一按钮的提示状态:内容为空时不可点击的按钮状态和有内容的按钮的区别。按钮为灰色状态,不可发表内容。

(google plus当前状态不可发布内容)

(当有内容之后,按钮被点亮,内容可以正常发布)

8.交互设计(讲故事)

做设计的过程,就是一个不断讲故事的过程。交互设计师应该具备凭空想象复杂交互行为的能力。通过流程图,强迫自己把各种分支流程都考虑到,穷举出各种CASE,而另一个好用的方法即是讲故事。

假如我们就是用户本身,很容易的就能发现不符合逻辑的事实——因为故事很容易讲不下去。但是没有故事得连续性,片段的话语很容易“蒙混过关”。

讲清楚一个故事之后,还要把故事拆分成任务,按任务优先级去绘制交互原型,然后拿着低保真原型去找用户测试(最好可以在真实环境中去测试)。等到高保真DEMO出来之后,还是要迭代测试,还原真实的故事,再把问题反馈到讲故事的环境,修改情节和场景,使故事不断丰满。

总结:有趣的交互设计是对枯燥的事物进行的一次转变,以一种轻松、幽默的方式进行展示,在不失其功能性的基础上增加一些想像力,这样的尝试能够使用户产生有趣且愉快的感觉,这是一种积极的情感,对你的产品也会有正向的帮助。

现代浏览器推荐

做为一名前端人员,您有责任且有义务让用户升级浏览器拥有完美的浏览体验,与国际接轨,同时让更多的前端人员不再苦逼! 本站将不再支持IE9以下的版本!

QQ交流群

学习使人进步,交流让人提高!

Bootstrap/HTML5/CSS3交流群:233808496

Orchard/Nopcommerce/Umbraco交流群:187502451

Bootstrap/HTML5/CSS3交流二群:385480040