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

2016-02-16 22:14 11 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享浅谈网页设计中有趣的交互设计技巧,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - 平面设计 】

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

1.图形视觉化

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

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

2.大时代登场

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

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

3.合理的用户引导

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

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

4.合理的信息架构

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

5.导航隐藏功能

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

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

点击后:

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

7.反馈设计

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

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

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

注:Google plus当前状态不可发布内容

浅谈网页设计中有趣的交互设计技巧,PS教程,图老师教程网

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

8.交互设计

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

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

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

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

来源:http://www.tulaoshi.com/n/20160216/1575518.html

延伸阅读
交互设计从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析,然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现,事情就变得不是那么容易了。 其实大家遭遇的困境都很相似,用户已经很难被单纯炫酷的图片、流畅的悬停效果和出人意料的动效所打动,真正能让他们露出微笑的是持久、令人愉悦的交互设计和用户...
设想并构建出区别于常见网站布局的创新式设计是一件很难的事情,但是一旦把这件事做好,就可以设计出那些最富有趣味又令人着迷的网站。 你几乎每天都可以见到这些网站,每次看到他们,你都会感慨到:多希望我当初能够想到这个点子。设计师们正在完成一项了不起的工作,设计出一系列精美的网页元素并将其组合在一起,这些网页不但具备可用性...
很有幸能看到这篇文章,作者见证了腾讯CDC从寥寥数人变成一个成熟团队的整个过程,成长经历相当有可读性,且值得设计师学习反思的地方太多,无论是哪个领域的同学,都推荐阅读收藏。 前言:今年同时是我工作的第十个年头,今天也是我的生日,如果一路往上回顾,应该是有不少故事的,如果要讲,我总是习惯性从我工作的第5个年头开始,一方面 5...
HTML5为提高手机网页的体验提供了诸多的可能性,交互效果越来越接近原生App,故而成为Web App,有望将APP功能引向浏览器,让移动平台的竞争由系统平台转向了浏览器之间。 Web App比起原生App和wap有着自身的优缺点,先简单了解下其特点,掌握设计趋势,也便于以后在设计中应用。 离线存储 离线存储的意思是第一次访问是下载网页,以后在...
阿里巴巴资深交互设计师 :这是一次内部分享,新部门的同学们希望我聊聊我过去从事的交互设计,做个了面对入门者等级的PPT,和各位简单聊了聊。发到微博上,也敦促自己 对交互设计从业经历做个简单总结。 一. 什么是交互设计 要谈什么是交互设计,先要了解这几个概念。 网页设计年代,大概是从2004年开始热起来了,等到我毕业的2006...

经验教程

489

收藏

75
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部