用户界面设计基础：初学者需要知道的一切

您可能已经看到它们出现在您的新闻源上，设计师和非设计师都在疯狂地分享他们的观点。 为什么？

我们大部分时间都在某种界面中工作。 当我们打开手机、启动笔记本电脑工作、通过社交媒体与朋友互动或在线购物时：所有这些人都有一个（希望是）经过深思熟虑的界面。

用户界面设计影响着我们所有人。 这就是为什么我们都有自己的看法，无论是否有意识。 幸运的是，越来越多的品牌开始意识到良好 UI 的重要性，我们的在线体验也变得更加愉快。

因为出色的设计不仅看起来不错，而且效果很好。 它是营销的一部分，并受到用户行为和消费者心理知识的推动。

因此，无论您是刚入门的设计师，还是希望聘请下一位伟大设计师的企业家或经理，您都需要了解一些基础知识。 创造不仅仅是一张漂亮的图片，提供更好的反馈，让用户更快乐，更好地帮助他们。

所以，让我们从基础开始。 我们将介绍的是：

• 什么是用户界面设计，以及它与用户体验设计有何不同
• 为什么用户界面设计如此重要
• 设计中的哪些元素构成了基础
• 如何使用设计思维开始高效设计

什么是 UI 设计和 UX 设计？

您可能会对 UI 和 UX 设计这两个术语感到困惑：用户界面和用户体验。 让我们从正确开始。 什么是 UI 设计，什么不是？

想象一下在有岩石的山丘上铺设一个足球场。 它可能看起来令人印象深刻，但它远非实用。

界面是您构建体验的基础。

两者应该一起工作。 当然，那里有一些重叠，但现在让我们专注于 UI 设计。

UI 代表用户界面：这是用户在网站、应用程序或任何类型的软件中移动的地方。 因此，设计用户界面与其说是外观，不如说是为行动而设计。

当然，它必须看起来很棒并且符合品牌的风格指南，但是用户界面设计是关于创建一个平台或页面，用户可以尽可能快速和顺利地执行所需的操作。

添加到购物车、预约、下载电子书：UI 设计将所有这些号召性用语置于聚光灯下。 最好少分心。

所以，如果你想成为一名优秀的 UI 设计师，你应该知道人们不一定会注意到你的设计。 苛刻，是的，但最好的用户界面是那些你几乎无法分辨它们的用户界面——没有障碍，没有打嗝。 这一切都是一帆风顺的。

为什么可靠的用户界面很重要？

如果你需要为作为 UI 设计师收取一定费用的原因进行辩护，这里有一个： 70%的在线业务失败，因为他们的网站或应用程序的可用性差而倒闭。

有些设计根本不是品味问题，而是心理问题。 好的用户界面设计直接影响转化率和用户满意度。

您希望有人尽快购买、预订或任何其他行动——在您失去他们的注意力之前。

您希望通过设计一个响应迅速、合乎逻辑且高效的界面来促进这些交互。

用户有很高的期望：看看我们每天都在使用的设计完美的应用程序的数量。

您要避免沮丧和糟糕的体验：词传播得很快，负面词传播得更快： 44%的购物者会告诉他们的朋友糟糕的在线体验。 88%的在线购物者表示他们不会在这样的体验后回来。

用户界面中最重要的元素

在你开始设计你的第一个网页或应用程序之前，让我们看一下你可以在界面中找到的所有重要元素的清单，以及你应该了解的内容。

我们可以将任何用户界面的元素大致分为四类。

1. 输入控件

1. 导航组件
2. 信息组件
3. 容器

以下是您可以在这四个类别中找到的元素。

输入控件

这是使用户能够将信息放入系统的任何东西。 想想他们可以留下电子邮件地址的框、他们同意使用 cookie 的复选框或可以选择约会日期的日历。

保持平衡很重要。 您希望避免构建一个需要太多信息并需要太多操作的界面。

尝试将其保持在最低限度，并且只收集您真正需要的输入。 此外，请确保在手机和台式机上都可以轻松地提供信息。 折叠式菜单可能适用于大屏幕，但不适用于智能手机。

导航组件

这些元素可以帮助用户在应用程序或网页中四处走动。 例如，chrome 页面右上角的三个点。 或者网站左侧的三行表明那里隐藏着一个菜单。

使用这些元素进行设计时，请选择人们认可的图标和形状。 房子表示家。 三角形的意思是“玩”。 这不是你应该太有创意的部分，你想让它保持简单易懂。

信息组件

信息元素是您与用户共享信息的地方。 想想一个进度条，它显示加载某些东西需要多长时间。 或者当您将鼠标悬停在按钮上时显示的工具提示，甚至是显示信息的消息框。

这里的诀窍是知道什么需要解释，什么不需要。 不要过度解释简单的东西，但如果你介绍一些“新”的东西，请确保用户知道如何使用它。

容器

让它适合，让它匹配。 容器用于将相关内容保持在一起，并确保它与用户屏幕的大小相匹配。

您只能在一个屏幕上同时执行这么多操作。 这就是容器将教给你的东西。 不要试图一次显示所有内容。

另请查看：网页设计和开发——所有你需要知道的

如何开始设计：使用设计思维方法

兴奋地开始设计了吗？ 您可能能够设想一个伟大的设计，但不知道从哪里开始。

总而言之，我们将向您展示什么是设计思维，以及它如何为您提供一个出色的框架，您将在其中创建出色的设计——效果很好。

设计思维是一个设计过程，它围绕用户如何理解、使用和采用设计，以及如何在其中表现。

人们必须学会使用你的设计吗？ 还是会自然而然地为他们带来更快、更多的转化？

设计思维可以帮助您创建满足用户需求的东西，并防止您过多地关注疯狂的设计理念——无论是您的还是您的客户的。

因为当你开始设计时要记住一件事：你是为用户做的。

设计思维发生在五个阶段。 我们将引导您完成它们。

第 1 步：移情

是时候了解未来的用户了。 当他们打开您的应用或点击您的网页时，他们在寻找什么？ 是什么促使他们去那里，他们在寻找什么经验，以及他们的行为方式？ 此信息对于继续该过程至关重要。

第 2 步：定义

你的设计将解决什么问题？ 这就是你应该如何处理打算使用的设计。 定义用户面临的关键问题和挑战，以及在设计过程中需要优先考虑的问题。

第 3 步：构思

是时候将所有与先前定义的挑战和问题相关的想法摆在桌面上。 找到这些问题的解决方案，并开始思考这在屏幕上会是什么样子。 头脑风暴、思维导图、素描——使用任何能让你的创意源源不断的技术，但又不会忽视你的真正目标。

第 4 步：原型

将在纸上看起来最好的想法放在一起并创建一个原型。 这可以是一个简化和缩小的版本，它当然不需要是可点击的。 在页面上为每个解决方案留一个位置，并检查您是否解决了所有问题。

第 5 步：测试

您将在第四步和第五步之间多次来回移动，因为您将积极地需要测试您的界面。 最好是真实用户。 收集反馈并观察人们对界面的反应，以找到并消除任何障碍。

您准备好创建您的第一个 UI 设计了吗？

如果您对用户界面设计充满热情，请先设身处地为用户着想。 访问网站和应用程序并积极尝试寻找改进点，并尝试了解做出某些选择的原因。 从长远来看，始终牢记这一点将使您成为一名出色的 UI 设计师。

阅读更多：

• Hootsuite vs Buffer – 哪个更适合社交媒体管理？
• 概述和报告是 Hootsuite 产品中的模块？
• 如何成为社交媒体上的内容创作者并赚取收入？
• 您如何吸引社交媒体用户在线分享您的视频内容？