网页设计中常见的五种交互设计错误

交互设计 从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析,然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现,事情就变得不是那么容易了。


交互设计从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析,然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现,事情就变得不是那么容易了。

其实大家遭遇的困境都很相似,用户已经很难被单纯炫酷的图片、流畅的悬停效果和出人意料的动效所打动,真正能让他们露出微笑的是持久、令人愉悦的交互设计用户体验。如果你对于日常的设计中的常见的误区有所了解,自然会有意识地绕过这些坑。

为了更好的设计,我们为你简单总结了一下最常见的5种交互设计的误区。

1、过度的创意

网页设计师 绝对不缺少创意。我们希望借工作表达自己,也一直在试图寻找能让产品脱颖而出的优秀创意。但是当涉及到交互设计的时候,推陈出新并不一定总是好的,它甚至 会对你的网站和产品产生不利的影响。的确,许多用户渴求新鲜的创意,但是在操作和交互上却往往希望协调可控,所以他们更倾向于熟悉的交互。Etsy的创业 总监Randy曾经撰文探讨过这个问题,文中直言“设计师们不要在此(交互设计)自作聪明了!”在这篇文中,他详细解释了为什么你不应该走极端去设计充满大量创新交互的网页。

Lotorama的网站为例子,漂亮的页面和柔和的音乐都非常的赞,但是用户进来之后会迟疑,想知道这个网站要如何操作。不要曲解我的意思,如果你是纯粹处于炫技,那么这种华丽而充满游戏性的网站绝对称得上是创意无限,但是对于普通用户而言,他们的直觉失去效果,茫然无措会成为网站浏览的障碍。

网页设计中常见的五种交互设计错误

下面是另外一个案例,这个名为Safety on the Slopes 的项目是为了说明冬季运动的危险的,整个网站的设计整洁,交互也直观。网站设计也有所创新,但是同时是以用户交互直觉为先决条件,以身临其境为目标。

网页设计中常见的五种交互设计错误

2、令人迷惑的交互

“不要自作聪明”的规则也应当应用在导航设计上。一些设计师试图运用别具一格不同寻常的名称,以活动更富有实验性的导航。比如这个Chijoff网站, 就让前来应聘的用户充满困惑。如果你是网站的访客,需要来回折腾一阵子,才能搞清楚这个名为“Co-Create”的页面实际上也就是常见的 “Services”页面。最纠结的是,即便是你将整个页面都看完之后,仍然高不清楚要怎么办,因为这个页面的底部仅仅只有一个表单,展示行业新闻,并且 仅仅提供一个注册入口!至于联系页面就更简单了,仅仅提供了一个邮政编码和一个邮件地址。总而言之,他们用各种手段让用户无法直接快速有效的联系上他们。

网页设计中常见的五种交互设计错误

在看看这个案例。你猜猜看,Maison Margiela 的页面上的“Universe”这个分类是干啥的?这个炫酷的链接,实际上是链接到他们的Facebook页面的……唉。

网页设计中常见的五种交互设计错误

反例当然也有,看看legworkstrdio的网站吧,他们的创意非常不错,导航清晰明确,用户也不会在导航中迷失。

3、杂乱无章

曾经有过一个阶段,设计师试图将所有的内容全都塞到一个页面当中去。虽然这个时代已经过去了,但是很多网站依然在犯这个错误,甚至在我们自己设计的时候,有时候也会身不由己地想这么做。看看这个在线商店的设计吧:

网页设计中常见的五种交互设计错误

设计师试图使用简单的配色方案,但问题是页面中大大小小的框、复杂多变的字体破坏了整体的风格,用户也在大量繁复的信息中懵逼。搜索框中“那么你今天想得到什么呢?”文案还是挺时尚的,但是页面风格却完全是过时的设计。

反观EBay的设计,在设计上则更为克制,保持清爽而简单的设计,凸显用户关注的内容,并且明确地提示用户下一步该怎么做。

网页设计中常见的五种交互设计错误

4、要有对比度

对比度是构建视觉层次最重要的手段之一,也是让视觉元素吸引用户的绝佳方式。在网页设计中,对比度不仅仅是通过色彩来呈现的,尺寸控制、形状设计、位置调整也都能表现出对比度。

最简单也是最生动的案例,就是下面的这个网站。设计师在网站的一致性上做的颇为不错,但是相对复杂的背景和文字内容、按钮等前景元素之间的对比不明显。

网页设计中常见的五种交互设计错误

相比之下,这个网站也采用了深浅色(黑白)的对比来进行设计,但是结果却截然不同。另外,充满创意的滚动效果也引入了颇为不错的视觉效果,很酷吧?

网页设计中常见的五种交互设计错误

5、忽视表单样式

表单设计其实是用户体验设计的基本组成部分之一。每个网站都有不同的设计目标,不论是销售产品、呈现信息还是提供沟通平台,然而许多设计漂亮的网站总会给你一个令人感到无聊到死的复杂表单,除了那些极其想加入会员或者想参与问卷调查的那些访客,许多用户(比如我)会直接关闭页面,离开网站。

有了JCF这样的跨浏览器解决方案之后,你就可以同丑陋的默认表单样式说再见了,你可以设计更优秀更人性化的表单那设计,来提升交互效率和用户体验

网页设计中常见的五种交互设计错误

另外一个恼人的情况是,表单要求太多,想法不成熟,或者并未经过良好的测试。比如sketchybusiness.io 这个网站中,表单突出了所有的空白字段,即使有些是不需要填写的。

网页设计中常见的五种交互设计错误

反观mostlyserious.io的表单设计,你会喜欢表单中的鼠标悬停提示。另外,其中“Don’t be shy”的提醒为整个表单增添了人性化的元素。

网页设计中常见的五种交互设计错误

结语

网站并不是做好了就够了,你还需要多加测试!有许多问题并不是意料之中的。用户会在哪里碰到问题?导航中的设定是否符合用户的意识?视差效果和内置 的视频是否能够流畅加载?让用户参与测试最大的好处是你真的开始拥有用户的视角,而非你自己的脑补,了解实际的需求,才能有所改进。不要试图限制你的创造 力,但是也不要忘记基本的原则,这样才能在不为用户带来困惑和沮丧的同时,给予他们惊喜。

 

译文来自:优设

原文地址:designmodo

优设译者:@陈子木

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32341/

(0)
CatherineCatherine
上一篇 2017-06-05 01:38
下一篇 2017-06-05 03:35

相关推荐

  • 交互设计规范分享:页面信息展示、信息交互和通用组件规范

    本规范按web交互属性分三个部分:页面信息规范、信息交互规范、通用组件规范。

    2017-05-19
  • 译文 | 记忆设计:怎样设计可被牢记的友好体验

    本篇文章中,我将向大家分享:怎样设计能够为用户留下一个记忆中的正面印象?在以前,锁匠开锁需要花费很多时间开锁,甚至需要将整个门破坏掉,那个时候,顾客通常会很满意的付给锁匠报酬,甚至是优厚的小费;但现在,开锁的设备更加先进了,锁匠开锁花费的时间越来越少,锁匠能够做到在三、四分钟内将锁打开,然而顾客却变得越来越吝啬,锁匠再也收不到优厚的小费了,并且常常被抱怨要价偏高,他们认为锁匠并没有花费太多的功夫就将锁打开了。

    2017-05-19
  • Project Flow 重新定义人机交互

    摘要 : 渡鸦科技在2015年8月6日晚上召开的Project Flow 发布会,推出了一个服务系统,旨在建设成“只一个APP”的生活场景。 2015年8月6日晚上7点钟 渡鸦科技发布了一款产品,名叫:project flow ,据渡鸦科技负责人 9…

    2015-08-06
  • 我对移动记账 App 的设计探索

    现代智能手机给我们提供了非常多丰富实用的功能,比如平时颇为在意金钱去向的我,就是一个 手机记账 App 的使用者,曾经尝试过各种记账 App,但好像都有那么一点不满意,于是我就想如果是我来设计这么一款 App 的话…

    2015-09-15
  • 用户体验系列05:降低用户记忆负担的五种类型

    碎片化应用,是一个日益被强化的概念,诠释了用户的使用场景。其实在碎片化应用的背后,也映射出用户需要面对海量的数据,需要承载的东西太多了。一个好的产品,在某些方面应该是能够帮用户减负的产品,降低用户记忆负担就是重要的一环。能让产品帮用户记忆的,就尽量不让用户记,增加用户负担。这里我汇总了五种常见的类型,以供大家参考。一个用户正在用手机看新闻,此时屏幕顶部弹出一条消息,告诉你预约的家政人员会在下午上门;然后用户退出新闻客户端,看到家政APP图标右上角提示有一条信息;打开APP并进入消息中心,看到了那条信息。除了提醒信息外,还提供了家政人员的姓名、电话等信息,用户可以直接点击手机号联系家政人员;当用户完成了一系列操作,退出APP,APP图标的提示标识也消失了。

    2017-05-03
  • seeds对话未来丨“用户交互设计天才”Kaveh Shirdel

    对话未来丨seeds系列分享会seeds, 由蔚来原创打造,是一个分享有趣观点、新知与灵感的讲堂,它寓意着每一个思想的火花都像一颗种子,被灵感浇灌后,汇成大树。2015年3月seeds诞生,从一个面向蔚来全球员工的内部讲演平台,发展到不断吸引各行各业的主讲人,并且在蔚来App公开直播的产品。到目前为止,seeds 已举办了13场演讲。今年,seeds会走进我们各个城市的蔚来中心,成为常设活动。我们也欢迎各位用户成为seeds的主讲人。人...

    2018-04-29
  • 图形界面的末路?聊聊未来可能会流行的「对话式交互」

    人类花费数十年才将计算机交互从以命令行为代表的文字界面(TUI)发展到以用户界面为核心的图形界面(GUI),然而这显然不是终点。图形界面之后会出现什么?我们已经隐隐可以窥探到其身影。一起来看看未来流行的交互方式是什么。

    2017-05-20
  • 网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • 经验总结:APP页面提示样式,选择合理的就好

    最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同,对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好,按照自己的规范选择合理的就好。

    2017-05-11
  • UI设计师:教你以问答形式“来“把玩”APP

    作为APP狂热分子,定期去App Store或者其他渠道找新鲜的产品来玩儿,已经持续了很多年。但是光浮于表面的玩儿,还不够。因为只有了解产品背后的逻辑才能更全面的解读为何会那么设计。

    2017-05-02