大家好,今天我来给大家介绍100余种网页优化案例。
本文的这些案例一共分5大类,分别是注意力、操作引导、简化用户的脑力劳作、适合更多人、帮助用户解决错误。每大类有若干小节。
每个页面都要有一个视线上的入口,让用户第一眼就知道要看哪儿,而不是整个屏幕花里胡哨,争相夺芬,让用户陷入混乱。
简而言之,就是让用户知道,第一该看哪里,第二该看哪里,第三该看哪里
不要在页面中留下没有意义的留白区域
若非必要,尽量使用一列布局
以及使用元素重叠的方法,给用户一种连续感
世界充满了废品,格式塔心理学告诉大家,我们的大脑会时刻试图简化世界,克服生活中混乱感,比如我们往往会运用一些原则来将事物分类、整体化,这些原则有相似、靠近、闭合、连接、连续的图形和背景。
这些也可以运用在UI设计上,
比如我们可以对功能类似的菜单项分组化。
以及标题不要越界。
适当加些界面变化,可以让网页有更良好的交互感,但一定要注意,不要干扰用户。
我们可以用动画告诉用户发生了什么,
也可以使用一些明显的变色提示,让用户快速理解错误原因。
我们要尽可能让用户不消耗更多的注意力放在没用的东西上
弹出弹出框后,我们可以选择暗化模糊背景,
以及在图表上加深重要数据的颜色
删除界面上无意义的边框和不言自明的说明
隐藏不常用的功能
浏览器可能会在某些时刻隐藏滚动条,所以为防止用户不知道滚动后还会出现更多内容,所以我们可以在这里做些优化。
调整显示布局,提示用户去滚动
适当加些阴影,表示深度关系
直接使用文字或图标来告诉用户
既然您已经吸引并引导了用户的注意力,就可以帮助他们实现目标。
预测用户的意图。然后将目标定位在尽可能近的位置。
通常,用户会使用pogo棒。他们点击一个项目来查找信息。然后他们将返回上一页以对另一个项目重复该过程。那就是可用性差。通过在主要页面上放置重要信息来最大限度地减少pogo-sticking。
如果您不喜欢额外的混乱,您可以在悬停时包含该信息(请参阅下一个策略)。
用户喜欢不同的工作流程。为每个目标创建不同的路径,让用户为他们的工作流程选择最合适的路径。
让用户为每次交互做好准备。他们需要什么?他们如何进行?
在用户与元素交互之前,他们应该了解预期的结果。
用户有进步吗?他们的互动成功了吗?让他们知道。并诱使他们继续。
通常,我们解决表面级的需求。更深入。总是集思广益为什么用户需要某些功能或信息。然后解决潜在的意图。
除了引导用户,减少他们的认知工作流程。这样,你就可以延长他们的“心流”状态。
永远不要让用户执行数学运算。让电脑来处理。
接口就像机场。如果没有“你在这里”标记,用户可能会迷路。所以创建这些标记。
选择需要努力。通过简化这些任务来减少工作量。
创意很棒。但不要偏离传统设计。用户习惯于某些布局和结构。那些传统的设计很受欢迎,因为它们很有效。
当用户与您的界面交互时,他们应该体验到实时反馈。有什么成功的吗?它不成功吗?发生了什么变化?
消除所有不必要的等待期。如果用户需要等待,那么尽量减少这些负面影响。
避免当用户在元素内部单击时消失的内联标签。
减少来回眼球运动的数量。将所有补充数据保持在近距离内。
您可以使用PowerPoint或Keynote中的各种形状创建这些图标中的大多数。
在大多数情况下,清晰胜过创造力或行话。
大多数用户会通过扫描来处理您的内容。你不应该与之抗争。拥抱它。让你的界面更有利于扫描。
显然,文本应该是可读的。但是这里有一些技巧可以使它更具可读性。
小心在背景上显示文本。您可能需要通过叠加或模糊来添加对比度。让我们在我美丽的脸庞上添加文字……
创建一个文档,总结界面中每个元素的设计规范。
其他元素包括:
当一些人选择匹配的字体时,他们会搜索一种看起来与现有字体相似的字体。但这是错误的做法。通常,相似性看起来像是一个错误。
相反,要慎重。选择对比度明显的字体。如果您是新手设计师,您可以选择衬线与无衬线组合(衬线是字母末端的“树枝”)。
您的用户是具有不同目标的不同人。设计您的界面,使其适合所有人。
您的用户将是新手、专家或混合型。相应地设计您的界面。
有四种主要的入职策略:
这四种方法在2x2矩阵中很好地对齐。使用下图为您的界面选择最佳方法。
用户会有不同的需求。针对这些不同的工作流程自定义您的界面。
其他排序标准包括:
用户应该能够输入范围广泛的输入而不会产生任何后果。
您的界面应该适用于所有环境(例如,设备、浏览器等)。
在大多数界面中,错误是不可避免的。如果确实发生了,请帮助用户快速轻松地克服它们。
不要告诉用户单击“提交”一次。如果他们可以多次点击,他们会。相反,当用户单击它们时禁用按钮。这样一来,重复提交是不可能的。
您的界面中常见的错误是什么?识别这些错误中固有的信号。然后监视这些信号何时出现。
用户将失去焦点。你无法阻止它。但是,您应该在视觉上区分强大的功能,以便将破坏性错误的可能性降到最低。
始终为用户提供返回上一页或安全/可识别区域的选项。
例如,一些下拉菜单不提供逃生舱口。当用户单击一个选项时,他们不能再将其留空。
用户应该能够使用相同的数据返回到相同位置的序列。
用户并不完美。他们用光标出错。创建灵活且宽容的界面。
通常,用户点击不可点击的项目。不要与那些错误作斗争。相反,将可点击功能添加到这些公共区域。
永远不要给出标准的“出现错误”信息。解释错误的原因——最好是解决方案。
在您的界面中提醒用户他们过去的操作。
始终迭代和改进您的界面。使用这些策略开始。
如果一个页面获得了很多浏览量(但很少有独特的浏览量),那么仔细检查用户是否在该页面上粘住了pogo