总结网站Web端交互式设计的一些误区与注意点

交互设计的5个常见错误
艳丽的图片、顺畅的鼠标悬停效果和意外的动画,不再那么容易引起用户注意了。但难题却没有解决——如何创造令人愉快的用户体验,让用户面带笑容完成转化?如果你对常见的设计陷阱有所警觉,就能更少犯错。
为了方便——可能也为了让你知道你不是独自一人——以下总结了最常见的交互设计误区。

1、铺天盖地的创新
网页设计师都非常有创造力。我们希望通过作品来表达自我。我们总是在寻求创新的设计方法来脱颖而出。但是,当涉及到交互设计时,创新并不总是好事。甚至会给你的网站带来坏的影响。用户渴望熟悉的事物,他们总是会遵循一些特定的操作方式。
Randy J. Hunt,Etsy的创意总监和Product Design for the Web作者,清晰地陈述过:“嘿,设计师:别再TM自作聪明了。”在文章中,他详细解释了为什么别在网页设计上过分热衷创新。
以Iotorama网站为例。它挺漂亮,音乐深情,但是看着满屏幕移动的球,用户不知所措。不要误解我的意思,这个项目非常出色,超级有创造力!我喜欢这个大胆的创意,但它一点也不直观。

还有一个例子。Safety on the Slopes项目背后的创作者想到一个巧妙的交互式图形,用来警告用户冬季运动的危险。非常创新,同时也很直观、有趣、令人印象深刻。

2、令人困惑的导航
“不要自作聪明”的准则也可以沿用到导航上。有些设计师试图使用折衷的名称来寻求新颖。比如Chijoff 网站就让用户不知道他们究竟提供什么,如何聘请他们。需要看上好一阵子,才能理解“共同创造”页面实际上就等同于“服务”。甚至还有,通读整页后用户仍然 不知道该怎么做……页面末尾只有个小注册表单用来获取最新的行业新闻和提示!在“联系”页面也没有表单,只有邮编和邮箱地址。使人们联络或聘用他们非常困 难。

你能猜出“Universe”在Maison Margiela网站中是什么意思吗?实际上它链接到他们的Facebook主页。谁能想到?

 

相反,看看legworkstudio的网站。它的创意与超凡令人震撼。导航非常清晰不含糊。用户绝对不会迷路。

3. 杂乱无章
有一段时期,网站都试图把一切可能的东西摆上台面。那些日子已经一去不复返,但是很多网站仍然在犯这个错误。看看这个在线商城:

 

设计师试图坚持一种单色配色,但是大量颜色不同的色块、logo和字体,在这个页面上就足够让用户步履蹒跚。搜索框有着醒目的文案:“那么,今天你想要什么?”,但整个布局的外观和感觉非常过时。
EBay是主要在在线零售商之一,在这点上做得不错。没有用产品图片、促销和各种行动召唤塞满整个页面,而是保持它干净简洁,强调他们确实希望用户首先关注的东西,并附上清晰的提示,接下来该怎么做。

 

4. 注意对比
对比是创造视觉层级、吸引用户注意特定元素的最重要的方式之一。在网页设计中,对比不仅仅意味着颜色使用,也包括尺寸、形状和位置。
这个网站是最简单生动的例子。他们做到了统一一致,但整体背景和按钮并不够吸引人,尤其是在订购按钮上。

 

相比来看这个。颜色选用很接近,但结果却完全不同。而且,创新的滚动效果,流畅地介绍了产品的新功能——反光材料。很酷,对吧?

 

5. 忽视表单样式
表单设计是用户体验最基本的部分。每个网站都有一个目标——无论是树立榜样、直接售卖产品或是提供信息。不幸的是,许多网站有着光鲜的首页,却宁可用长表单和复杂的验证码来使用户厌烦致死。除非用户有强烈的先导动机,否则他们就会离开。
有了JCF这样的有效的跨浏览器的解决方案,是时候忘记那些丑陋的默认表单元素了,转向一种更加沉浸的用户体验吧。

 

另一件气人的事,是表单要求太多信息,或者没通过完善测试。例如sketchybusiness.io的表单高亮显示了所有的空白框,甚至包括非必填项。

 

如果你看了sketchybusiness.io的表单,你绝对会喜欢它的鼠标悬停和按钮按下状态。而且,“别害羞”的提示文案增加了一丝亲切幽默的感觉。

最后……
不要懒于测试!对你重要的对于顾客未必重要。他们在哪里遇到问题卡住?是导航、奇特的视觉差滚动效果、还是长时间加载的视频?用户测试的最大好处之一,是你可以通过用户的视角来观察,关注他们的需求、做出改进。不要抑制你的创造力。要牢记网站访客可能会感到困惑和沮丧。
你见过最糟的交互设计错误是什么?可以在评论中分享你的想法和故事。

交互设计需要注意什么


1、一看就懂
这个说起来挺好理解的,就是让用户直观的理解产品功能,而事实上,这个概念包含的东西太多了,这里简单说下常见的2点。
图形化:图片相对文字来说,所承载的信息更直观,也更能渲染气氛,给用户留下更深的印象。常见于各种小图标,比如下载按钮,通常会看到用一个向下的箭头来表示。对于重要的按钮来说,一般会将其图形化,就算没有采用小图标来辅助表达,也会采用“色块”来讲“文字”图形化。
文字:刚说了图形化,其实并不是说,所以文字都可以用图形来替代,文字的存在还是很有必要的,特别是一些具有“独特性”的功能按钮,用户接触得少,没有相关的理解经验,难以图形化。大多数情况,文字不会删去,而会保留,辅助说明图形内容。文字还有一个很常见的问题,就是文字太多,用户没有耐心去看,或者看完后没有理解到所表达的核心。在设计的时候,要将文字删了再删,把“介绍文段”变成“产品口号”,有助于用户更好的了解产品。用词也很重要,如果产品定位是专业人员使用,那么可以使用一些专业术语,如果不是,请把各种专业术语“平民化”。
这一点,更偏向产品的表面形式,这需要交互设计师跟视觉设计师相配合,把产品页面中,需要突出的重点,更视觉设计师沟通好。这一步,也是用户感觉这个产品好不好用,最先接触到的一层,即从视觉效果反馈的结果。

2、一用就对
这点可以说是”一看就懂“的骨架,更多涉及产品的框架,让用户眼中的产品跟设计的产品一样。
归纳:同类功能归到一起去,这就像电商网站的导航,把各种商品归纳分类。在这里,交互设计师需要根据需求档,整理产品的框架,然后把同一类型的功能归到一起去。归纳说起来挺容易的,但是做起来涉及的因素就比较多了。经常看到一些产品,把同一个功能,重复出现在同个页面中,这种做法,不一定是不合理的。比如:登陆功能,一个页面经常有多个入口,一般也是合理的。在工作中,最常遇到产品经理想要突出某个新产品,明明这个产品功能应该归到A页面,但是产品经理要求去B页面宣传,这时候就要留意,这个位置是否合 理了。(这里要展开也讨论的话,都可以单独写一篇了,这里就简单举个例子:在电商里,如果把“手机套”放到“手机页面”去宣传,这里不一定是框架错了,如 果把“手机套”放到“电脑页面”去宣传,这里的框架就有问题了。)
一致性:这是交互设计最基础的知识之一,保证产品各种元素的一致性,不要让用户迷茫。比如标题的一致性,同一个功能,这里用A来表达,到了另一个页面,也要用A来表达。这里保障用户不会在使用过程中迷茫的基础。除了产品本身要保持一致性之外,在于产品所属的行业来说,这点还有一些有趣的方面可以讨论。对于产品的同行,特别是该行业中的老大,他们的设计是怎 样的,这点需要交互设计师去了解清楚。因为用户长期使用这些产品,会养成一些操作习惯,比如现在很多信息类APP,下拉代表刷新页面,如果你设计的信息类 软件,没有这个功能,那么在用户体验上,就会有所影响。
这点说白了,就是要搭建合理的结构框架,也是交互设计师工作的核心之一。保障用户操作顺畅,就靠它了。不过这里的标题“一用就对”,其实也不太严 谨,因为产品一般都允许用户“试错”,用户可以通过错误操作,来学会使用产品。这里就引出了下一点反馈的内容了,当然,这个错误不能是“致命错误”。

3、别发呆了
这点主要讲的是“反馈”,反馈也是交互设计的一个基础知识,涉及的范围挺广,但是核心就是要让用户别发呆,了解当前的操作,明白怎么去操作。
错误各种错误操作的反馈提醒,这点需要交互设计师去发现,一个产品可以存在的各种情况,简单点说,就是找茬,还不能找太少。比如:留言超过100个字符怎么办?再极端点,服务器空间不够,保存不了留言怎么办?用户短期内持续留言,服务器超负荷怎么办?这些情况都需要交互设计师考虑好,当然有些涉及开发编程的内容,这部分内容就需要跟相关技术人员沟通下。考虑后,还需要给出适当的视觉提醒,比如,提醒“你刚刚已经留言了,我们会尽快回复,如需补充内容,请30秒后重试”。
等待漫漫的等待,是大多数用户无法忍受的事,如果还没有适当的提醒,用户基本不会继续等待。对于长时间的等待,最好有具体时间倒计时,而不是以单纯进度 条的方式。而对于1-5秒之类的短时间等待,有时候采用纯进度条的方式会带来意外的收获。比如在游戏的跳转过程,因为读取数据需要等待,而这个过程大概要 2-3秒,这时候,如果采用读秒的方式,用户容易产生烦躁,特别是需要重复操作时,容易让用户觉得,游戏没优化好,怎么这里还要等待2-3秒啊;如果采用 进度条的方式,用户会把对游戏加载慢的原因,怪罪到自己的设备配置低。
导航导航相对于产品的游园指南,除了告诉用户有什么东西外,还承担着用户的指南功能,时刻告诉用户,当前位置在哪,不要让用户迷路了。这也是交互设计的基础之一,适当的指引,别让用户发呆。
反馈虽然也是属于表面层,但是这部分工作却是交互的重点之一。

4、总结
一看就懂,通过视觉上的优化,让用户更直观的理解产品功能
一用就对,通过产品框架上的优化,让用户更顺畅的使用产品
别发呆了,通过用户的眼睛,让用户开开心心使用产品
小技巧:
(1)设计好一个产品后,把文字重新读一篇,思考,如果这段文字删了,会不会对用户使用造成影响,不会的话,那就删了吧。
(2)随便打开一个页面,然后看看有没有合适的“当前位置”指南,会不会迷路,如何返回之类的。
(3)重新检查一次里面的用词/图标,是否一致。
(4)常见的遗漏情况:软件/硬件(兼容性问题比较常见);网络状态(无网、超时、慢等);转场(过程是否可以取消,是否有反馈等)
(5)大必杀,找几个“新用户”(没有接触过该产品的人),看他们操作。
写在最后,情感化设计,从我大学开始,就一直对这块内容很感兴趣,而如今作为一名初级交互设计师,我觉得情感化设计可以更好的融入产品之中去,就比如各个网站的404页面,这个页面的设计也间接表达了各个网站的情怀。

转自:http://zc.lvchakeji.com/news/1228.html

原文地址:https://www.cnblogs.com/nanfangbeifang/p/9676035.html

时间: 2024-08-04 00:40:16

总结网站Web端交互式设计的一些误区与注意点的相关文章

Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

摘要 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯 方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events).本文将简要介绍这4种技术的原理,并指出各自的异同点.优缺点等. 1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询. Comet技术.WebSocket技术.SSE(Server-se

移动端网页设计经验与心得

原文:移动端网页设计经验与心得 智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能

移动APP服务端API设计应该考虑到的问题

转载:http://www.hutuseng.com/article/how-to-design-api 2014年,移动APP的热度丝毫没有减退,怎样为您的移动端app设计良好的服务器端接口(API)呢? 下面谈谈我个人的一些想法. 2014年,移动APP的热度丝毫没有减退,并没有像桌面软件被WEB网站那样所取代,不但如此,越来越多的传统应用.网站也都开始制作自己的移动APP,也就是我们常说的IOS客户端.android客户端.这仿佛又回到了多年前的CS架构,那时候我们用VB.VC.Delph

dr-helper项目设计介绍(一个包含移动端和Web端的点餐管理系统)

一.源码路径 https://github.com/weiganyi/dr-helper 二.界面 通过浏览器访问Web服务,可以看到界面如下: ADT-Bundle编译工程生成dr-helper.apk,安装后可以看到应用界面如下: 三.背景 Java诞生后主要就是用于Web开发,随着Android的兴起,其在移动领域也应用广泛.我在学习了Java相关的一系列技术后,想找个项目来实际运用一下.因此我考虑可以基于Java相关的技术来构建一个包括移动端和Web端的餐厅管理系统,在这个项目里我会综合

2016年第6本:简约至上--交互式设计四策略

看此书是想把勘探管理中心的网站精简一下.全书也很简短,180多页,除掉一半的图,文字估计不到100页.全书内容概括为8个字:删除.组织.隐藏.转移. 豆瓣评分8.4:https://book.douban.com/subject/5394309/ 图灵交互式设计丛书当前有28本(真够多的):https://book.douban.com/series/5907 第1章 话说简单 复杂的产品不可持续:增加的功能越多,就越难发现真正对用户有价值的新功能. 在做技术产品的设计时,至少有三个角度:管理人

Comet技术详解:基于HTTP长连接的Web端实时通信技术

前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 关于这4种技术方式的优缺点,请参考<Web端即时通讯技术盘点:短轮询.Comet.Websocket.SSE>.本文将专门讲解Comet技术.(本文同步发布于:http://www.52im.net/thread-334-1-1.html) 学习交流 - 即时通

Web响应式设计中应避免的八大误区

开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本.但是,要做最大限度相应的网页设计,有些误区你应当避免. 不要优先为桌面版设计 开发者通常会犯的一个常见错误是,但他们设计网站时优先考虑桌面版,因为在这些人严重,将基于桌面版的网站转变为针对其他设备的响应式web设 计 是件很轻松愉快的事情.但是,这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题.甚至会造成返工,当然,大量的错误也会蔓延出来. 然而,基于移动设备开发网

移动端网页设计经验与心得(转)

智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能有良好的浏览体验,得花一番功夫.

【问底】夏俊:深入网站服务端技术(一)——网站并发的问题

摘要:本文来自拥有十年IT从业经验.擅长网站架构设计.Web前端技术以及Java企业级开发的夏俊,此文也是<关于大型网站技术演进的思考>系列文章的最新出炉内容,首发于CSDN,各位技术人员不容错过. 注:本文首发于CSDN,转载请标明出处. [编者按] 本文来自拥有十年IT从业经验.擅长网站架构设计.Web前端技术以及Java企业级开发的夏俊,此文也是<关于大型网站技术演进的思考>系列文章的最新出炉内容,首发于CSDN,各位技术人员不容错过. 以下为正文: 一. 引子 <关于