WordPress divi主题

每个网页设计项目都应遵循的 10 条良好 UI 设计规则

by | May 15, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

Geocities 网站使用硬编码、永不改变的 HTML 的日子已经一去不复返了。 今天的网站和应用程序是动态的和交互式的。 作为设计师,我们的工作是让他们与我们的 Web UI 设计交互的界面尽可能接近理想。 幸运的是,有一些几乎通用的规则可以提供帮助。 我们汇集了我们认为最好的设计原则,以便您可以增强所有未来的网页设计项目。

google广告开户

每个网页设计项目都应遵循的 10 条良好 UI 设计规则

订阅我们的 Youtube 频道

1. 让用户需要的一切都易于访问

良好的 UI 设计规则

无论是网页设计应用程序的一系列设计工具、视频游戏中角色的清单、电子表格还是其他任何东西,如果用户找不到他们想要的东西,他们就会从你的软件中跳出来。 选项卡使事物易于访问。 快捷方式和悬停工具提示也是如此。

例如,我们选择使用标签来组织 Divi。 您需要的所有工具都在构建器中,按类别分开。 工具栏也可以类似地访问。 如果您使用 WordPress,管理工具栏使您能够快速访问帖子编辑器、主题定制器、插件设置等。 选项已明确标记,您无需搜索它们。

另一个例子是帮助/支持/联系选项。 在设计 UI 时,无论是用于移动应用程序、Web 应用程序、WordPress 网站还是其他任何东西,您的用户都会 总是 需要找到帮助按钮(或联系支持按钮)。 他们绝对需要在某个时候与您联系. 这就是为什么您必须始终确保将帮助按钮放在前面和中心位置的原因。 看看迪维。 在每个模块中,我们都为您准备好了支持按钮,在您需要时触手可及。

最重要的是,帮助窗口会弹出一个视频教程,介绍您正在使用的任何功能。 通过包含这个模块,Divi 变得更易于访问且不那么令人沮丧。 此外,作为 UI 的一部分,帮助的位置在整个产品中是一致的。 这将我们带到了下一点……

2. 保持一致

良好的 UI 设计规则

就像我们刚才所说的那样,在您的 UI 中保持一致的功能布局很重要。 但是您还应该关注您的 UI 在整个产品中的工作原理和外观是否一致。 不要将菜单放在一页的顶部和另一页的底部。 不要在每次加载时重新排列菜单项。 确保您的用户知道您网站上的内容。 如果您在博客文章下方保留联系表格,请不要决定将其关闭。 用户会注意到并感到困惑。

WordPress divi主题

一致性还包括您的字体和设计应该从一个页面到另一个页面。 不要在页面之间交换页眉/正文字体。

有一个有趣的想法叫做最小惊讶原则,它说如果你让你的用户对某件事的工作方式感到惊讶……重新设计它,让它更直观。

此外,您应该确保您的 UI 适合您的平台——iOS 应用程序在某些情况下与 Android 应用程序的工作方式不同。 桌面网站对菜单、画廊甚至产品结账的需求与移动网站不同。 一致性意味着您不会因为让用户不得不弄清楚在您的网站上做什么而让他们感到沮丧。

3. 清楚

这可能看起来像上面的重复,但清晰度和一致性是不同的。 清晰意味着您希望您的用户始终知道该做什么。 在某些方面,这也会渗透到用户体验设计中,因为它减少了用户的挫败感,提高了留存率并降低了跳出率。

清晰是极简主义(在某种程度上是野兽派)网页设计如此受欢迎的原因。 人们不会对任何网站或页面的目的感到困惑,因为没有(或很少)混乱。 您想提供与 Ling’s Cars 截然相反的体验。

实现清晰的一种方法是在不同页面上从一个步骤移动到另一个步骤。 让您的用户从产品页面导航到购物车页面,再到结帐页面,再到选择您的付款页面,再到下订单页面,而不是让结帐流程向下滚动页面 – 或包含在单个部分或框中确认页面。 (亚马逊会这样做,如下图所示)。

他们将确切地知道他们在这个过程中所处的位置,从而消除任何歧义。 这对于移动用户来说尤其重要,因为屏幕空间非常宝贵.

4. 提供反馈

用户想要的最后一件事是不了解发生了什么。 如果他们按下按钮,请提供按钮被按下的指示。 你可以通过多种方式做到这一点。 您可以为按钮设置动画,使其看起来沉入页面。 加载图标(如 MacOS 彩虹轮)提供反馈,“我们正在处理您的请求”,而无需说出来。

如果您允许用户上传文件(例如使用 Dropbox 或 Google Drive),请指明剩余时间。 提供一个弹出窗口或模式,告诉他们他们的行动是成功的,可以减少挫败感和困惑。

fiverr建站WordPress程序员

真的,每当用户在您的界面中采取任何行动时,只需一个小小的确认就可能导致良好的体验和平淡无奇的体验不同。

5. 使用识别,而不是回忆

良好的 UI 设计规则

与良好的考试技巧相反,您希望您的用户在看到您的网站时能够认出它的所有内容。 他们不应该去思考和回忆信息。 最重要的是,您正在简化界面,以便每个部分都直观且从一个点移动到另一个点。 这可以通过使用我们上面提到的可识别图标来完成。 人们识别某些事物的某些图标。

也可以通过使用虚拟导览来指导用户完成一个过程,即使这不是他们的第一次。 一旦第一个模态出现,他们就会识别该过程,并且他们不必花费精力来准确回忆如何执行这些动作。

独立站选品工具

您还可以通过适当的消息传递来实现此目的,该消息提醒您的用户您网站上的内容是做什么的。 我们在 Divi 中通过简单的悬停工具提示来实现这一点——即使有人不记得图标的作用,我们也会引导他们了解它的功能。 之后,他们应该识别图标。 或者至少是工具提示,如果他们再次悬停。 甚至是悬停获取信息的过程。

6.选择人们首先如何互动

照片来源 John Picklap,由 MarieClaire.com 提供

你知道最糟糕的是什么吗? 推拉门。 尤其是当您只是推动前一个以到达那个时。 该建筑的设计师使用户界面不一致,因此您不知道如何做您需要做的事情。 按下什么东西怎么样 看起来 就像一个没有的按钮,但无论如何都在等待响应? 嗯,那是因为那些设计师没有考虑到他们的用户将如何与他们的产品进行交互。 所以当你设计你的 UI 时,选择一个动作(也许两个)并坚持下去。

在移动设备上,这往往是滑动。 看看 Snapchat。 几乎每一个动作都是通过滑动来执行的,包括访问您的设置和个人资料。 您可以在 Snapchat 上向下滑动以查看自己,向左滑动以进入对话,向右滑动以进入故事,向上滑动以进入您的记忆(或本周所称的任何内容)。 他们选择了他们希望用户如何与他们的产品交互并设计他们的 UI 来适应这种情况。 不是反过来。

高质量外链购买

在设计 UI 时,选择是否要使用菜单和点击、图标、滑动和手势,或者完全使用其他东西。 Alexa 和 Siri 使用语音输入作为他们的主要 UI 交互。 他们提供信息和执行任务的方式是围绕该特定输入设计的。 作为用户,您可以直观地知道该做什么,因为这些信息一开始就为您准备好了。 设计师告诉你该做什么,而你做到了. 您的用户会感谢您为他们做同样的事情。

7. 遵循设计标准

古语 如果它没有坏,不要修理它 适用于此。 如果标准有效,确实没有必要尝试振兴某些东西。 从图标使用到元素的标准放置。 您不想违背用户的期望。 人们知道问号 (?) 表示帮助。 所以不要使用感叹号 (!). 如果您希望用户找到您的移动菜单,请使用汉堡图标(三个堆叠的线),而不是网格。

想想搜索栏。 在大多数网站上,它们往往位于相似的位置:侧边栏顶部或标题菜单的末尾。 如果不存在,则为页面顶部的中心。 如果您决定在侧边栏底部、页脚或博客文章文本下方包含唯一的搜索字段,人们将不知道在哪里查找。 即使您使用标准放大镜图标识别它。

跳出框框思考并寻求新的创新设计并没有错,但这并不意味着该设计难以使用。

JasperAI 10000字免费额度试用

8. 元素等级很重要

不,我们并不是说地、风、水或火中的任何一个都是其他人的老板。 我们的意思是,您页面上的元素需要针对实用程序和用户查看页面的方式具有清晰的层次结构。 基本上,您要确保最重要的功能位于各自页面的顶部。 此外,这种层次结构可以有机地引导用户向下浏览页面,引导用户通过您的服务。

随着过程的进行而尺寸减小的大元素表示重要性和顺序。 颜色和对比度也是如此。 使用空白也很重要,因为杂乱会阻碍用户的进步并使视线远离页面的目的。 简洁的线条、大量的空间和明确定义的元素可以直观地向您的用户指示如何在您的 UI 中移动,而无需任何文档或注释。

一个不错的经验法则是,您希望让事情从左到右,从上到下流动。

9. 保持简单

查看此联系表:

WordPress备份工具updrafplus

现在看看这个:

两者都是提出请求的联系表格。 其中一个填写没有问题,而另一个则更令人头疼。 除了作为政府表格之外,底部表格的设计不是为 用户 但对于管理员。 那不是你的工作。 你的工作是让用户的事情尽可能顺畅. 做到这一点的最好方法之一就是删掉任何不是绝对必要的东西。

10. 让您的用户保持自由和可控

我们想要触及的最后一件事——也是你想要对 UI 做的最后一件事——是从用户那里获得控制权。 或者让他们感到被你的设计限制或限制。 您想要授权他们,并且您的 UI 应该允许他们执行他们想要的操作。 这条规则有两个部分: 上下文和许可.

首先,用户需要采取的任何行动都应该位于他们想要采取行动的附近。 如果他们需要编辑帖子, 编辑 按钮应该靠近 节省, 发布/提交, 预览 纽扣。 事实上,更好的选择是用户可以在任何特定项目(或页面)上执行的所有操作的上下文菜单。 如果您在 UI 中保持一致,正如我们上面所讨论的,您的用户将理解这些上下文菜单或工具栏将始终具有任何给定元素的完整操作列表。

此外,您的 UI 应该始终让用户觉得他们可以退出或恢复他们采取的任何操作。 当你设计 UI 时,他们会使用它. 所以他们需要许可(甚至可能是自由)来做他们需要做的事情来完成工作。 这样做可以像添加一个 取消 按钮到您的电子商务结帐的每个页面(因为按下浏览器的后退按钮可能会导致事情变得混乱)。 也许这是一个 撤消 功能,所以他们觉得实验是可以的。 或大型项目的修订历史记录(例如在 Google Drive、WordPress 或 Git 中)。

当您的用户感到自由和不受约束时,您显然遵循了一些良好的 UI 设计原则。

用户界面准备好了吗?

糟糕的双关语。 我知道,对不起。 但是有了这些 UI 规则,您绝对可以准备好将您的下一个网页设计项目赶出公园。 虽然其中一些可能比其他项目更适用于某些项目,但好的 UI 就是好的 UI,…

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题