什么是用户界面设计?初学者的指南

“我该怎么用这个?”这是UI设计师最不想听到的五个词。

在创建网站时，应用程序，可穿戴或任何数字产品时，您希望它尽可能容易和高效。这可能意味着在会员站点的主页上进行登录按钮，或者在电子商务网站上的清晰位置中添加购物车图标，因此访问者可以立即转到结账页面。

这些决策是用户界面(UI)设计的一部分。在这篇文章中，我们将涵盖关于这个主题你需要知道的一切，包括:

• 什么是UI设计；
• UI设计原则；
• UI设计工具；
• 如何为一个网站设计UI；和
• 最佳UI设计示例．

UI在这方面发挥着重要作用用户体验．如果应用程序的设计不是直观的或内聚的，用户就不会有好的体验——但是UI和UX不一样。当比较UX VS UI，你会发现UX是一个更加全面的术语。它是研究，开发，测试和改进产品的所有方面的过程，以确保满足用户的需求和期望。另一方面，UI更具化妆品，仅关注产品的演示文稿。

然而，这并不意味着UI设计师的工作很简单。他们必须决定在页面上放些什么，放在哪里。例如，徽标可以放在页面的顶部，也可以放在页面的底部，或者两者同时放置。当用户将鼠标悬停在按钮上时，按钮可能会改变颜色，或者没有动画。考虑到元素的层次性和交互性，UI设计师必须确保每个视觉元素都是有吸引力的，吸引人的，并与页面上的其他元素以及整个品牌保持一致。

用户界面设计原则

虽然每个应用程序都需要一个独特的界面，但有一些基本原则应该指导任何项目。你可以在网上和教科书上找到几十种，但有少数是最知名和最受关注的。其中包括10 UI设计的10个可用性启发式由Jakob Nielsen，界面设计的八个金色规则本·施耐德曼(Ben Shneiderman)著交互设计原则由Bruce Tognazzini。这些原则大部分是重叠的，所以我们将在下面对它们进行压缩和总结。

1.保持一致。

在您的功能的颜色中的一致性，您选择的排版，您创建的动画 - 即使在您使用的单词中也会导致您的界面中的整体凝聚力对用户体验和您的品牌标识很重要。

例如，在一个形式上说，按钮文本是“提交”，另一个是“发送”。您的用户不应该想知道这些不同的词是否意味着同样的事情。为表单进行“提交”或“发送”的所有按钮复制将保持内部一致性，这是本原则的一半。

另一个是外部一致性。这意味着您要遵循其他产品的约定，以避免强制您的用户学习新的东西。例如，在几乎任何站点的导航菜单中，您将找到标有“Home”的选项。这是指其主页。现在想象你有一个导航选择“房子”。大多数用户都会想到它的主页，但没有花费额外的第二个或两个令人费解的东西。您可以通过遵循其他网站和应用程序设置的约定来避免以这种方式增加用户的认知负载。

2.让用户感受到控制。

您希望让用户觉得他们控制界面，因此他们将花费更多时间探索和学习应用程序。这意味着让他们犯错误或扭转他们的行为。所以弹出窗口应该有明确的纽扣，结账页应该有简单而清晰的方式返回或编辑购物车信息，编辑应该有撤消和重做选项，等等。

这是a的一个例子灯箱弹出窗口在LoveOhLou上，用户可以选择输入他们的电子邮件地址或点击关闭按钮。

图像源码

3.提供反馈。

另一种增强用户信心的方法是在用户导航和与界面交互时向他们提供反馈。第一个反馈点可能是一个加载动画，它告诉用户他们访问页面的请求是成功的，内容正在被检索。还有许多其他方式可以通知用户。

例如，在电子商务网站上获取订单确认消息。通知用户已确认其订单可以提供救济或成就感。否则，用户可能尚不清楚他们的订单是否成功，并重新尝试并重复订单，或在放置之前退出。

另一个例子是在用户结账前告诉他们离免费送货还有多远。Wrap Life提供了这个重要的信息来设定用户对最终成本的预期，并鼓励用户花更多的钱。

图像源码

4.使用户能够解决错误。

用户界面不能简单地使用户能够犯错并停止 - 它必须使它们能够克服这些错误。这就是错误消息进入的地方。错误消息使用纯语言和清除视觉效果来指示问题并建议解决方案将允许用户了解，修复并避免将来同样的错误。

错误消息的常见示例是您可以在登录页面上获取的“错误密码”通知。此消息通常会建议解决问题的两种方法：一，您可以尝试再次输入密码或两个，可以重置密码。

在包装免费商店，它将简单地提供所输入的电子邮件地址或密码的错误消息不正确。用户可以继续尝试猜测组合，或单击忘记密码以重置它。

图像源码

5.防止错误。

您希望为用户提供自主权，而是确保他们仍然可以介绍接口并成功完成操作。这就是为什么你不仅应该有对错误作出反应的机制，而是为了防止它们。您可以通过向用户提供撤消选项，以确认其个人或付款信息，警告消息或限制的限制来防止错误，以防止用户完成操作。

在设置密码时，请考虑通常的束缚。通常情况下，密码必须满足一定的长度要求，有字母和数字的组合，至少包含一个特殊字符，并且是唯一的。在满足这些要求之前，您无法创建密码。这有助于防止用户创建其他用户已选择的密码或应用程序无法正确接受或处理。这也是一种安全措施。

如果错误地填写表单，您将看到另一个错误的错误示例。例如，如果留下必填字段空白，则无法提交表单。相反，您将收到一条错误消息，要求您查看表单并纠正错误。这是下面的一个例子。

图像源码

6.不要依赖用户记住信息。

无论用户在界面上，是否滚动到主页的底部或点击它们已准备好结账，他们应该拥有所需的所有信息来获取他们的下一步。它们不必从网站的另一部分中记住信息，或通过滚动页面或击中后按钮来找到它。

例如，说，您正在提供折扣。代码列在您的主页上的醒目横幅中 - 但您的网站上无处可行。这意味着当用户位于产品页面时，他们可能会想知道折扣又是多少。或者如果它们在结帐页面上，它们可能必须返回主页以复制代码。在搜索过程中，他们可能决定完全放弃购物车或您的网站。

您可以通过确保信息易于在整个用户界面中看到或检索来避免这种情况。对于上面的例子，你可以在你的网站的每个页面上放置一个带有折扣代码的横幅，这样不管用户在哪里都很容易找到。

在提供折扣时，基于UX的鞋类商店COIX在其主页上具有英雄图像以及显示其产品档案页面上的折扣金额的图标。它还显示了每个产品页面上的价格降低，以便用户不必回顾折扣金额或进行任何数学以弄清楚新价格。

图像源码

7.保持简单。

保持用户界面简单并不意味着使其平整并避免阴影，效果或其他装饰元素。它只是意味着在设计界面时使用最少的方法。思考：必须包含哪些元素，以使用户能够完成他们的目标。其他任何东西都会争夺用户的注意力，可能更好地遗漏。

8.为不同类型的用户设计。

假设你在为内容管理系统．一些用户可能对其他CMS平台有很多经验，而另一些用户可能以前从未使用过。这就是为什么在设计时要同时考虑专家和初学者的原因。

您可以通过为专家提供初学者和快捷方式和其他加速器提供演示或工具提示建议来完成此操作。所有这些功能都应在任何时间跳过或退出选项。这样，需要指令的用户可以利用演示和建议，而更高级的用户可以正确地使用平台及其快捷方式。

WordPress管理仪表板提供了一个很好的例子。初学者可以单击Help选项卡来查找有关导航、布局和仪表板内容的信息，以及支持线程或文档的链接。更高级的用户可以简单地将这个选项卡最小化。

1.了解您的用户的痛点。

了解您的用户的痛点是UI设计过程（和UX设计过程）的重要第一步。这不仅仅是关于人口统计数据。他们多大了，他们生活的地方 - 这些不是最重要的问题。您必须了解您的用户需求（包括他们不知道所需的内容），他们有什么期望以及他们在完成任务方面所面临的挑战。只有这样，您才能创建一个可以尽可能简单且有效的用户界面。

不仅仅是数据和分析，这将采取同理心。访谈，在线调查和用户测试会话只是几种方法，您可以深入了解将使用您的网站的人员。这些见解将通知UI设计过程的每个阶段。

2.写用户故事。

执行面试，调查和用户测试后，您将有许多有关您用户的丰富信息。使用和组织此信息的一种方法是创建用户故事。根据UI / UX Architect Tom Brinton的说法文章UXBooth，用户故事描述了用户想要使用该应用程序完成的基本目标。他们通常只有一个句子并遵循这种格式：“作为一个用户，我想...... [一些目标]。”

考虑一下用户在送餐服务套件上的目标可能需要完成。以下是使用用户故事格式的一些示例：

• “作为用户，我想创建一个新帐户。”
• “作为用户，我想登录。”
• “作为用户，我想添加我的支付信息。”
• “作为一个用户，我想更改我的地址。”
• “作为一名用户，我想改变收到快递的频率。”
• “作为一个用户，我想改变我送货的那一天。”

您需要集思广益更多的用户故事，以确定送餐服务套件的所有用户目标。虽然这一步可能需要花费大量的时间，但它值得付出努力。首先确定用户故事将确保用户的需求和行为决定应用程序的设计和功能——而不是反过来。

3.制作一个界面清单。

现在您已经清楚地了解了用户想要什么和需要什么，您可以创建用户完成目标所需的UI元素和特性的清单。网页设计师Brad Frost将其称为“接口库存．” You’ll need typography, images, media, tables, forms, buttons, a navigation system, and any other odds and ends that make up an interface.

如果您和您的团队已经设计了其中的一些组件，或者在其他市场推广中使用了它们，那么Frost建议将它们截屏，并将它们汇编并分类到PowerPoint中。在这个阶段，您将能够识别任何不一致的地方——也许您设计了一个具有圆角边缘的按钮，而另一个团队成员设计了具有方形边缘的按钮——并开始识别模式。这将有助于简化UI设计过程。

4.识别设计模式。

当您完成界面清单时，您可以识别常见的设计模式。设计模式是软件设计中重复出现问题的普遍解决方案。雷竞技苹果下载官方版它们不是代码，而是解决可以应用于不同情况的问题的模板或描述。例如，假设问题是网站有许多部分，但导航菜单的空间有限。在那种情况下，一个垂直下拉菜单可能是一个解决办法。识别这些模式将有助于在UI设计过程中保持一致性和效率。

5.创建原型。

原型是一个半功能布局，提供了高保真预览的实际应用程序的界面如何看待和感觉。大多数原型都不会有应用程序的全功能，但它将模拟应用程序的工作方式，允许客户端和其他利益相关者单击界面。通过原型，UI设计人员和其他利益相关者可以展示和讨论这些元素如何工作，测试他们的想法和进行更改。在此阶段，UI设计人员通常将其设计交给开发人员以开始实现。

现在我们已经了解了UI设计过程的步骤以及原型的重要性，让我们看看一些可以帮助您创建响应式和交互式原型的工具。

1.Justinmind

JustInmind是一个用于设计响应性和完全交互式原型的免费工具。您可以设计UI元素的样式，大小和布局，以适应不同屏幕的外观和感受，并使用全方位的交互，动画和转换来设计界面的交互性。

2。草图

超过一百万人使用，素描是一个设计平台，使用户能够在与团队合作的同时创建原型，以将他们的想法带到生命。作为基于向量的工具，素描允许您轻松调整绘图，原型或线框的大小而不会使质量变失。要使用草图，可以制作一个一次性付款或支付每月订阅．

3.奇迹

Marvel是一种灵活的工具，用于为任何设备创建线框，样机和原型。您可以在工具中构建模型，从草图上载您的图像或同步设计。用奇迹，您将获得数百万资产，图库照片和图标，添加到您的设计中。在任何时候，您都可以向您的团队或其他利益相关者提供对您的项目的可见性，并在其他人的设计中留下评论或注释。有一个自由计划以及两份保费计划和一份企业计划．

4.Wondershare Mockitt.

Wondershare Mockitt Design是一款快速原型制作工具，具有内置的UI资产和模板库。您可以将UI组件拖放到页面上，创建和重用自己的库，并在同一页面上与队友进行实时协作。还有一个免费的版本两个高级订阅计划．

5.Invision工作室

Invision Studio是最受UI设计师欢迎的免费原型制作工具之一。与Sketch一样，Invision Studio也是基于矢量的工具。这意味着你可以快速、轻松地设计、调整和缩放高保真的交互式原型，自动适应任何屏幕。你可以使用Invision Studio的Boards功能分享你的设计，客户和队友可以直接评论你的设计。

6.Figma.

Figma为UI设计人员提供强大的设计功能。您可以在更少的时间内创建动画原型，使用约束功能对不同的屏幕大小进行调整到不同的屏幕大小，并使用组件功能重用项目中的元素。您还可以共同编辑相同的项目，以确保您可以根据设计提供并响应反馈。

7。Adobe XD.

Adobe XD是UI和UX设计人员使用的一体化工具。您可以提供线框，动画，原型，协作等。由于它是基于素描和Invision Studio，因此Adobe XD使您可以为任何屏幕创建高保真设计。有一个自由计划以及个人和企业的付费计划．

最佳UI设计示例

您知道设计用户界面需要的流程和工具。现在让我们查看可能会激发您创建下一个项目的真实网站和应用程序的一些示例。

1.酒+和平

葡萄酒+和平是一家创新的葡萄酒公司，努力将消费者连接到美国最令人兴奋的raybet电子竞技葡萄酒和生产者。虽然它来自全国各地的葡萄酒，但葡萄酒+和平受到某些州的直接葡萄酒发货法的限制。而不是依靠消费者导航到其常见问题解答页面，葡萄酒+和平在每个页面上都有一个横幅，用户可以输入他们的邮政编码以检查公司是否能够运送到他们的地区。raybet电子竞技

这是一种很好的方法，可以让用户感觉自己在控制中，向他们提供重要信息，并防止他们下无法完成的订单，而无需依靠他们自己回忆或找到信息。

2。Naba Zabih

Naba Zabih是一位婚礼和私人摄影师，他们在美国和世界各地旅行为婚礼。随着座右铭“我相信魔术，”Zabih设计了她的网站，以朴实的配色方案和剧烈的颜色方案，脚本字体始终如一地下来。

正如她用她的照片所做的那样，她的目标是使用许多图像，过渡，动画和空格来讲述一个故事，因此滚动网站的经验更像是通过相册翻转。此产品组合网站提供了具有一致性和简单性的设计的优秀示例。

3.德拉西斯集团

Delassus集团是摩洛哥番茄，柑橘，葡萄，鳄梨和鲜花的摩洛哥种植者。当您第一次访问该网站时，德拉西州集团首次成立时，有一个60秒的视频解释，它产生的东西及其社会责任使命。

不熟悉公司或首次访问该网站的用户可以观看整个视频，或没有声音。raybet电子竞技那些熟悉或重复网站访问者的人可以简单地跳过视频并重定向到主页。此UI不仅为用户提供控制的经验 - 它也专为不同类型的用户设计。

4.嗨,皮肤

嗨，皮肤是一个皮肤护理服务，为每个独特的肤色提供定制和个性化的面部护理和面部锻炼。为了证明其对客户的幸福和皮肤健康的承诺，Hi，皮肤网站提供了一组不同的模特护理他们的皮肤、微笑和大笑的图片和视频。

它还为用户提供了几条清晰的路径，以了解有关公司的美学家，服务和地点团队的更多信息，因此用户可以按照他们探索该网站。raybet电子竞技在媒体，大量空间和小文本之间击中平衡，您将注意到将用户注意不同元素的颜色的污染物。例如，上面视频右上角的橙色按钮鼓励用户预约。

5.HalloBasis

Hallobasis是设计对Felix Vorbeck和Johannes Winkler的网站。专业从事视觉通信，整个网站都证明了他们在品牌，平面设计和网络设计中的技能。

它的“接受cookie”消息值得特别提及。它只向用户提供有关cookie策略的最基本信息，然后为用户提供立即接受这些信息或了解更多信息的选项。虽然弹出窗口的设计很简单，但它的位置在页面的顶部，即用户滚动的位置，强调了用户在不完全扰乱用户体验的情况下接受cookie的重要性。

6.西班牙集合

西班牙收藏是一个旅游网站，在西班牙和葡萄牙提供豪华旅游经验。它的座右铭是：“过上自己独特的冒险！”因此，它使网站为用户提供了如此多的自主权。

在主页上，他们可以点击关于公司，首席执行官和创始人的一系列视频，以及其他团队成员扮演它们，或滚动它们。raybet电子竞技它们可以单击滑块中的不同集合，朝向页面底部，或者他们可以单击导航标头的集合。如果他们这样做，他们将被带到一个页面，鼓励他们选择体验或目的地，每个选项都有多种选项。

7。美味的汉堡应用程序

上面不是应用程序从App Store下载，而是由Tubik团队创建的UI设计。此UI铭记有两个用户：想要浏览的用户以及用户确切地了解他们想要订购的用户。

对于想要浏览的用户，每个菜单项都有过滤选项、照片和包括价格在内的关键信息。点击特定产品后，他们可以点击标签上的成分，查看产品中的成分，并对其进行定制。对于那些确切知道自己想要什么的用户来说，颜色的重音突出了价格和像“添加到购物车”这样的行动呼吁，以便快速扫描和结账。

8。Dribbble

Dribbble是一个为设计专业人士创建的网站，用于查找和展示他们的创意工作。它旨在在其网站的每一页上执行此操作，包括404个错误页面。

丢失的访问者而不是发现自己被重定向到具有特定颜色的流行设计的页面。如果它们不感兴趣，他们可以使用滑块以不同颜色的设计浏览设计，或者它们可以使用搜索栏查找特定的设计或设计器。它们还可以单击左上角的徽标返回主页，或单击右上角的“联系我们”才能被带到帮助中心。这使得用户感到妨碍界面，即使它们犯错误或单击破碎的链接。

9。LinkedIn应用程序

图像源码

LinkedIn应用程序有一个简单的用户界面，这与它的品牌是一致的:你会认出字体、蓝色和灰色的配色方案，以及网站上使用的图标。

该应用在其用户船上流动中特别擅长。一旦用户开始创建帐户，他们将通过流程的不同阶段进行指导。各种屏幕将邀请用户完成个人信息，确认他们的电子邮件，关注LinkedIn组和思想领导者，并接受建议将更多人添加到专业网络中。虽然每个屏幕都会简要解释他们被要求的内容，但用户可以选择跳过一些这些步骤并以后完成它们。

UI设计的重要性

每天，我们都与之互动用户界面-无论是使用微波炉，登录应用程序，还是在电子商务网站上购物。成功的UI设计可以决定用户体验的好坏。理解和应用UI设计原则以及网站设计指南- 简单，导航性，一致性和用户以用户为中心 - 以及使用正确的工具可以帮助您为您的产品创建最佳界面。