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

2021-12-28 收藏 0 点赞 0 网站建设

交互设计的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页面，这个页面的设计也间接表达了各个网站的情怀。