UI 设计的一致性:改善用户体验的 8 个技巧!

当前位置:首页>设计文章>UI>UI 设计的一致性:改善用户体验的 8 个技巧!
TOPIC:


UI UX

Consistency

UI Design UX Design

UI 设计的一致性:改善用户体验的 8 个技巧!
Article:2022/07/26

Hi~,欢迎来到「交互设计新视觉系」技法专栏的第七期!

在现代社会的飞速发展和海量信息的包围下,人们倾向于选择简单,有时甚至没有考虑这个选择。为了减少认知负荷,用户寻求捷径、模式和模型,使与数字世界和众多沟通渠道的互动变得轻松和直接。在用户体验设计中,支持这一目标的因素之一是一致性

本文为大家分享介绍什么是一致性为什么它很重要存在哪些类型的一致性,以及如何在设计实践中实现它:

什么是一致性

网页设计Mayple

一致性意味着无论通信点或渠道如何,产品都以相同或类似的方式与用户进行通信。在用户体验方面,这意味着相似的元素在外观和功能上都是相似的,这样可以减少认知负荷,使交互更加流畅和直观

考虑到今天人们承载了太多的信息,他们倾向于选择容易理解和互动的产品。更重要的是,一致性为产品外观和工作方式的和谐感奠定了可靠的基础。和谐总是我们任何体验中令人向往的一部分。一致性使用户界面可预测和可学习,而品牌则因此而获得可靠而统一的演示和性能

一致性雅各布尼尔森(Jakob Nielsen)在1994年定义的10个基本可用性启发式方法之一,这是交互设计的核心原则。此列表中的一致性基于这样一个原则:即用户不必怀疑不同的词语、情况或操作是否意味着相同的事情。

为什么设计一致性很重要

UI 设计的一致性:改善用户体验的 8 个技巧!
一致的网页、移动应用设计Vertt汽车共享服务

1.元素的一致性能减少用户为实现其目标而必须执行的操作数。以这种方式减少认知负荷,节省了用户的时间和精力。

试想一下,为了在你的网站上找到他感兴趣的东西,需要采取很多步骤,这是多么令人沮丧。

2.遵循这样的标准,您可以减少用户与您的产品互动时的误解。对于新用户来说,界面也会变得更加容易学习。

人们倾向于按照他们已经使用其他网站的方式行事。因此,当我们否认一致性和标准原则时,可能会给用户带来困惑,因为他们已经习惯了以某种方式行事。因此,要让用户无需学习如何使用您的网站。

3.一致性支持网站或应用程序的强大品牌形象

UI 设计的一致性:改善用户体验的 8 个技巧!
一致的网页、移动应用设计Vertt汽车共享服务

一致性的类型

从影响因素的角度来看,一致性可以是视觉功能性的。

视觉一致性是基于使相似的物体或元素看起来相同使元素之间的联系清晰建立一个稳固的视觉层次结构是至关重要的。它涉及图标、字体、图像大小、按钮、标签和其他重要内容。例如,当你组织一篇文章时,所有类型的文本元素(标题、副标题、正文、引言等)都应该使用相同的排版呈现系统,以便于浏览和结构化。如果你正在创建一个包含多种类型文章的博客或媒体,他们必须坚持相同的视觉表现系统,这样他们才能被视为一个完整的出版物,而不是一堆杂乱无章的帖子。

功能一致性意味着相似对象的行为方式相同例如,大多数网站在网站标题的左上角使用徽标或出版物名称,通过单击它,用户可以返回主页或刷新主页。大多数用户已经习惯了这种模式,并期望它以这种方式运行,即使是在他们第一次访问的网站上。

UI 设计的一致性:改善用户体验的 8 个技巧!
UI 设计的一致性:改善用户体验的 8 个技巧!
UI 设计的一致性:改善用户体验的 8 个技巧!
异国水果应用程序的屏幕

从连接和规模的角度来看,一致性可以是内部外部的。

内部一致性是关于界面或品牌的不同部分,这些部分的外观和行为就像一个清晰的系统例如,当您将产品不同页面或屏幕上的所有CTA按钮都以相同的方式着色和设计时,用户将能够在用户旅程的任何一步快速区分它们

外部一致性是关于界面中看起来和行为类似于大多数此类产品的典型模式的部分。例如,当您即使在销售无形产品的网站上使用购物车或为文本链接加下划线以提示它们是可点击的时,也是如此。

一致性设计技巧

01

使用简单的语言熟悉的术语短语模式。不要用复杂的语言吓唬你的用户。如今,当效率如此重要时,任何由语言混乱引起的延迟都至关重要。

UI 设计的一致性:改善用户体验的 8 个技巧!
02

“标准”地使用标准界面元素。UI 元素(如消息窗口、图标、滚动条)对用户来说应该是清晰的。在这种情况下,“创造力”只会令人烦恼。

UI 设计的一致性:改善用户体验的 8 个技巧!
03

规划 UI 时使用标准网站布局人类的记忆“记住”了主要界面元素的标准和最方便的位置

例如,将我们的徽标放在左上角对用户体验有好处,将搜索按钮放在右上角是件好事。正如我们所记得的,“登录”总是在右上角。因此,不要害怕遵循这些标准来帮助您的用户实现其目标。

UI 设计的一致性:改善用户体验的 8 个技巧!
04

不要欺骗用户的期望。您网站的界面应“执行”其功能。如果用户想购买机票,他们希望轻松找到预订按钮。一致性意味着您的网站具有所有必需的元素,例如YouTube具有视频播放器。

UI 设计的一致性:改善用户体验的 8 个技巧!
05

遵循视觉元素的一致性。字体,颜色,内容等应该和谐地在一起。HTML5和CSS3技术约定也是保持一致性原则的方法之一。

UI 设计的一致性:改善用户体验的 8 个技巧!
06

使其与您的品牌相匹配。您的数字界面必须反映您的品牌。用户应该能够立即在您的网站或应用程序与您的其他通信工具(名片,小册子,传单等)之间建立连接。最简单的方法之一就是遵循您的视觉识别指南,并使用相同的徽标,字体和颜色。尽量在品牌的词汇和语气上保持一致。

UI 设计的一致性:改善用户体验的 8 个技巧!
07

找到风格并坚持下去。缺乏一致性会导致缺乏可信度,没有什么比具有多种样式的界面更糟糕的了。所指是具有不同翻转,颜色不匹配,字体过多,照片集不同的号召性用语......请记住,按钮、菜单、字体、形状、空间、视觉材料等应在整个网站或应用中保持一致。遵循此建议将使整体UI在视觉上更漂亮,更流畅,也更专业

通常,设计师对这些小UI元素的关注不够。随着在线平台免费提供并立即提供数百个图标,我们已经变得如此懒惰,以至于我们不仅不再费心设计自定义图标,而且我们甚至不在乎从单个集合中挑选它们。不幸的是,使用一堆不同的图标系列会导致混乱和不可靠。因此,请确保您花时间创建个性化图标或从独特的图标集中选择它们。

UI 设计的一致性:改善用户体验的 8 个技巧!
08

必要时,应遵循一致性原则,用户界面的基本元素不应引起误解但要明智地使用这个原则:如果它有意义并提升用户体验,不要害怕创新。

UI 设计的一致性:改善用户体验的 8 个技巧!
感谢阅读:)

在许多情况下,遵循规则并不是那么糟糕。一致性和标准原则证明了这一点。它可以让你节省时间和过度思考,特别是当没有理由这样做的时候。您使用的语言、UI 元素、网站功能和布局首先应该具有功能性。

(部分图文来自网络,若有侵权,请联系删除。)

UI 设计的一致性:改善用户体验的 8 个技巧!
福利时刻

扫码添加小助手微信

转发+截图领取书籍福利~

UI 设计的一致性:改善用户体验的 8 个技巧!
《人眼的 Web UI 设计:视觉一致性原则》

了解如何创建视觉上一致的界面而不显得无聊

帮助大家做出更好的设计~

加入UI&UX交流社群~

设计资源/书籍资源/知识互动

还有更多神秘福利!

UI 设计的一致性:改善用户体验的 8 个技巧!
往期推荐 | READ MORE

UI 设计的一致性:改善用户体验的 8 个技巧!

U设计资讯:动态界面的未来?设计与自然环境同步的用户界面美学

UI 设计的一致性:改善用户体验的 8 个技巧!

眼见不一定为实:UI交互设计师要向字体设计师学习的6个视觉技巧

UI 设计的一致性:改善用户体验的 8 个技巧!

知识干货:每个原型都是一个重要实验?为你推荐最佳原型设计工具!

文字丨Jelly

编辑丨Jelly

如果觉得我们做的还不错点个赞和在看吧!

温馨提示:

文章标题:UI 设计的一致性:改善用户体验的 8 个技巧!

文章链接:https://www.uied.cn/16109.html

更新时间:2023年04月18日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI交互设计干货

案例研究:一款帮助人们对抗零食渴望的移动应用——NOSH!(文末加入交流群)

2023-4-18 11:20:21

UI设计干货

Moonvy 月维,设计素材周刊 #021 期

2023-4-18 13:40:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索