用户界面设计的关键要素以及如何在设计应用程序或网站时使用它们

用户界面(UI)设计侧重于用户与界面的直接交互，以及布局、外观和感觉以及响应时间。UI对用户有直接的影响，所以它必须满足许多用户的需求才有价值。

另一方面，用户体验(UX)设计包括UI，但关注外部因素，如消费者品牌感知和营销。有关UX和UI设计之间差异的更详细讨论，请阅读“用户体验101:指南和专家提示创建最畅销的应用程序和产品，你的客户会喜欢ob欧宝娱乐app手机下载”。

UI设计的基础看起来很简单，但它们需要计划、研究、测试、一些美术和一些科学来使一切无缝地工作。UI设计师必须平衡业务需求和用户需求(包括新用户和老用户)。此外，设计师必须添加新功能，确保一切看起来都很好，并正确地运行，并让用户与熟悉的组件接地。Reinhard Oppermann教授写了用户界面章节书中的设计教育和培训信息技术手册．Oppermann在书中写道:“用户界面设计不是一项遵循机械定义良好的需求的任务，但用户界面设计也是想法、直觉和经验能力的复杂组合。”

如果一个界面不能像预期的那样运行，如果用户不能使用它来做他们想做的事情，或者如果他们只是不喜欢看它，他们会找到其他方法来完成他们的任务(例如，别人的应用程序或网站)。

为了创造一个功能强大且引人注目的UI，设计师应该牢记以下关键理念和专业领域:

• 用户需求:这是UI设计中最重要的部分。设计师需要了解并尊重用户的需求。
• 要求:接口必须满足业务目标，设计人员需要了解满足这些目标的需求。
• 研究:与研究人员合作(或者自己成为研究人员)将有助于设计师为UI创造更好的设计。研究的一些关键项目包括:
  
  • 专家评论:研究人员使用他们的技能和积累的知识来批评设计并提供改进建议。
  • 测试:把UI放在潜在用户面前，看看它在现实世界中的表现如何，然后利用这些数据来改进设计。
  • 原型:创建UI的粗略版本，用于测试、专家评审，并验证概念是否按预期工作。
• 信息架构:了解屏幕布局、标签和跨页面的组织如何影响界面，将有助于设计师改善体验。
• 外观:如果用户不喜欢看最终设计，他们就不会想要使用它。
• 更新:更新软件允许设计师和工程师添加新功能、修复错误或适应新的硬件配置。更新应该遵循与初始版本相同的过程，以确保UI不会受到损害。

接口是用于交互的。人们使用界面做各种各样的事情:获取快速信息(蛋糕要多久才能做好?)，完成更复杂的有限任务(填写表格申请贷款)，或执行开放式任务(玩游戏打发时间)。考虑到用户需求而精心设计的UI组件将更容易实现用户目标。只读文本字段和图像是基本的UI组件。下面是一些更复杂的组件及其在设计中的作用。

输入组件

其中一些组件的外观将根据设备的操作系统和浏览器而有所不同。

复选框和单选按钮:这些在表单或设置页面中使用，用于从短列表中选择项目。单选按钮允许用户选择一个项目。复选框是项目旁边的方块;用户可以从列表中选择一个或多个。当用户接受条款和条件时，单个复选框也是一个选项。

列表:菜单是列表，也是填写表单时要选择的项。在选择如何排序列表时，您应该考虑列表的内容。如果项目列表总是以特定的顺序出现，例如月或日，则使用该顺序。如果列表不需要以特定的方式排序，比如州或国家，它们可以按字母顺序排列。如果研究或使用指标显示这些项目有一个明确的优先顺序，比如顶级域名(。com，。net。edu等)，按受欢迎程度列出它们。

有几个显示列表的选项:

• 下拉菜单:使用这种设计允许用户从列表中选择一个项目。
• 列表框:当您希望用户能够选择多个要选择的项目时，这是一个理想的选择。

按钮:最基本的交互元素。按钮可以是形状、图标或纯文本。无论它们的形式是什么，都要确保用户能够明显地与之交互。

例如，在现已不存在的Windows Phone操作系统的早期版本中，应用程序和联系人列表的标题按字母顺序排列。

每个字母都是一个按钮，暴露出一个字母网格，允许用户跳转到字母表的任何地方，这一点并不明显。许多用户不知道这一点，他们会浪费时间浏览字母表。

切换:toggle是开关，通常用于更改设置。以下是来自iOS的例子:

数据输入字段:当用户需要提供信息时，他们通常会使用数据输入字段。它们可以有长度限制(密码)，需要特定字符(电子邮件地址字段检查是否有@和句号)，或者具有有限的字符集(邮政编码)。设计师可以通过解释每个字段旁边需要什么来帮助用户(例如“出生日期应该是XX/XX/XXXX格式”)，或者在可用时暴露专门的虚拟键盘，比如电话号码字段的数字键盘。

搜索字段:这些是专门的数据输入字段，也被视为导航组件。

日期和时间选择器:另一个专用数据输入字段的例子是，设计人员在部署日历或数字时钟时使用此选项，以确保系统的输入格式正确。以下是USAA网站上的一个日期选择器的示例。

导航组件

面包屑路径:这些显示你在网站上的位置，可以采取几种形式:

• 路径:因为有很多方法可以导航到同一个网页，这个方法可以显示你所经过的确切路径。诺德斯特龙采用路径:
  
• 过滤器/属性:当你在网页或应用程序上选择选项时，网站可能会显示过滤器，用户通常可以一次删除一个。下面是Zappos显示过滤器或属性的方式。
  
• 等级:不管你是如何通过搜索或导航到达那里的，你都会看到你在网站的层次结构中的位置。这是百思买的一个例子:

滑块:滑块显示您在页面中的位置，并且通常内置在浏览器中(查看浏览器窗口的右侧，当您滚动浏览该网站时，您将看到一个滑块)。指示器的大小大致显示了与完整文档相比页面的长度。

分页指标:如果有多个页面的结果，分页指示器会告诉您您在哪个页面。有些显示页面总数或提供细化选项。

谷歌显示您所在的页面，但不提供总页数。

Amazon显示了总页数:

Monoprice显示页面数量，并允许您每页显示更多或更少的项目(通过一些数学运算，您可以计算出可用项目的总数):

图标:可点击或点击的简单图像。图标可以代表一个应用程序，比如智能手机主屏幕上的相机或日历图像，也可以代表应用程序中的一个功能。设计师必须仔细选择图标，这样用户才能轻松理解它们的含义。有些图标根据其外观是直观的(例如打印机图标)，而有些则需要用户了解它们(例如代表Twitter的鸟)。

设计的小屋有关于如何创建图标的提示。

标签:标签像内容一样分组，并允许用户跳转到相同或相关类别中的项目。以下是BBC.com网站关于卡西尼号探测器的报道。

可用性咨询公司尼尔森诺曼集团(Nielsen Norman Group)遵循他们自己的UI设计建议，在搜索结果中包含标签(以及每个标签找到的结果的数量)。

教授用户体验课程的交互设计基金会在他们的文章末尾使用了这种格式:

信息组件

提示:当光标悬停在屏幕上的项目上时出现的描述。下面是b谷歌文档中的一个例子:

进步的指标:可视化地表示您在流程中的进展(例如，在下载大文件、进行调查、创建新用户配置文件或完成购买时)。它们通常采用页面计数条或圆圈的形式。如果在后台有事情发生，用户需要等待，那么指示器应该是动画的，这样用户就不会认为它被冻结了。指标与面包屑的不同之处在于，它们表明你在完成目标的过程中走了多远，而面包屑只提供用户当前位置的信息。

通知:它们有多种形式，从宣布新邮件的横幅到应用程序图标上的彩色圆圈中的未读短信计数器。

错误消息:理想情况下，错误消息永远不会出现。当他们这样做的时候，他们应该是清晰和简洁的:

• 描述问题(请求的用户名太短）.
• 解释如何修复它(用户名长度至少为8个字符）.
• 永远不要责怪用户。

有关错误消息的更多详细信息，请阅读用户体验地球的接受。

覆盖窗口:这不是一个新的浏览器窗口，而是出现在页面主体内容前面的窗口内消息(类似于弹出窗口)。覆盖层用于通知(我们添加了一个新功能!)或要求(你想注册我们的电子邮件列表吗?）.

当部署覆盖层(也称为模态)时，设计师应该使主体内容变暗，这样用户就会被吸引到覆盖层上。一些覆盖层允许用户在其外部点击或单击以取消它。另一些则需要在覆盖层的某个地方点击，通常是在X或close这个词上。无论你以何种方式向用户发出退出覆盖的信号，它都应该很容易找到，并且足够大，可以点击。这是一个来自crack手机网站的好例子。

叠加可能很烦人，所以要谨慎使用。你可以在这里找到更多关于叠加和情态的想法面向大众的用户体验．

其他UI组件

功能可见性:可见性是关于用户如何与屏幕上的其他项目进行交互的线索。给文本加下划线来表示链接是一种常见的(几乎不可见的)功能。在现实世界中也可以找到启示，就像门把手表示你拉动。数字信息的一个很好的例子是预览，它显示下一项或下一行的一部分——这告诉用户他们可以滚动查看更多内容。下面是一个来自iTunes应用程序的例子，它显示了垂直和水平滚动都是可用的。

功能可以分散在整个界面中。有些是直观的，而其他用户则需要学习。常见的UI功能示例如下:

• 图标旁边的三角形表示它将公开一个选项列表。
• 按钮上的灰色文本表示它没有活动。
• 在网页左上角的公司标志是可点击的，并带你回到主页。这是一个非直观的提供性的例子，但它是足够常见的，用户期望它。

容器:它们提供了可视化的分离来显示相关的组件。它们可以是显式的(一个方框)或隐式的(额外的空白)。

字体、颜色和纹理:这些看似无关紧要，但却是强大UI设计的核心。糟糕的选择可能会让文本无法阅读，或者让应用程序看起来不舒服。这里有一些主观性，但本着简单和清晰的精神，找到使UI易于阅读的字体、纹理和调色板，并始终如一地使用它们。

部件:这些是出现在网页上的单一用途的应用程序。例如，一个乐队可以在他们的页面上有一个小部件，允许用户播放他们的歌曲，一个餐馆可以在他们的菜单旁边显示一个预订小部件，或者一个作家可以在他们博客的主要内容旁边运行他们的Twitter feed。

音乐家Neko Case有一个Spotify小工具。

西雅图餐厅The Corson Building有一个日历小工具。

有很多关于UI设计实践和原则的想法。重要的是找到或创建一套标准，并在实践和原则中坚持它们。遵守这些标准将确保外观和功能的一致性。如果你不确定从哪里开始，Jakob Nielsen的10个启发是一个很好的起点。这是一个全面的清单，但仍然足够灵活，可以适应多种情况。以下是一些关键的实践和原则:

用户需求至关重要

用户的需求是需要牢记的最重要的概念。用户需要从UI中获得许多东西，但在较高的层次上，大多数用户想要:

• 自由和控制:用户应该负责发生的事情，是否可以轻松地退出他们不想继续的过程，或者启动他们想要采取的下一步行动。您不应该强迫用户执行操作。
• 灵活性:无论经验水平如何，任何人都应该能够使用UI。当有人获得经验时，UI应该仍然能够满足他们的需求。
• 效率:快速并预测用户的需求，使交互更快。Kathleen Johnson说:“Toyota.com有一个非常漂亮的网站，上面有很多很棒的图片，但是速度慢得令人心痛。速度真的很重要。”此外，还要预测用户需要更快地进行交互。
• 清晰:确保每个组件的目的是明确的。举个简单的例子，如果可用性测试或其他研究表明图标的含义不明确，可以考虑用文字代替它。
• 一致性:颜色和字体，以及共享元素的位置和功能不应该在UI中变化。

减少认知负荷

如果用户无需思考就能进行更多互动，他们就会越开心。换句话说，以史蒂夫·克鲁格(Steve Krug)的书名为例不要让我思考认真对待。这本关于网页设计的有影响力的书最初出版于21世纪初，并于2014年更新。以下是一些减少认知负荷的方法:

• 保持界面简单:当它不与不重要的组件竞争时，更容易找到重要的组件。
• 使用常用元素:大多数人都知道问号提供帮助，两条竖线表示暂停视频或音乐，放大镜表示搜索功能。使用这些将使交互更快，更让用户满意。
• 提供反馈:用户应该始终知道他们的位置，他们可以做什么，以及当他们这样做时会发生什么。
• 写好:用户看到的任何消息都应该简明地解释情况，如果是错误消息，还应该提供解决方案。大多数用户不是开发人员，所以要避免使用技术术语。
• 位置问题:控件应该与它所控制的项紧密相连或在视觉上相连。错误消息也应该靠近发生错误的地方。

关闭此覆盖层的控件与其消息相距甚远，因此很容易被忽略。

• 将行动分成可管理的小块:每个屏幕都应该有一个焦点(这就是为什么大多数电子商务网站将结账过程分成多个步骤)。但不要过于简化。例如，华盛顿州就业安全网站的用户每周必须回答一系列约15个问题，每页一个问题。这样做太过分了:最好在每页上都有一些相关的问题。
• 预测错误:理想情况下，设计师将能够预测可能出现的错误并防止它们发生。例如，表单上的提交按钮应该处于非活动状态，直到完成所有必需的字段(并且必需的字段应该被清楚地标记，通常使用星号)。当错误确实发生时，设计师应该帮助用户识别、诊断并从中恢复。简要解释发生了什么以及如何解决它。
• 提供帮助:在需要的时候，一点帮助是无价的。最好的地方是在语境中。例如，用任何要求标记数据输入字段(密码长度至少为8个字符）.复杂的系统可能需要更广泛的帮助;确保它很容易找到。
• 组织:这是信息架构师域。正如约翰逊解释的那样，“……信息架构是网站的骨架。如果没有一个强大而稳定的架构，网站就不会有一个良好的结构或能力。”逻辑地组织页面上和站点上的组件。

新用户vs.老用户

不同的用户有不同的需求。Johnson解释说:“新用户会探索，所以架构和命名非常重要。”他们还会利用额外的帮助，比如工具提示和常见问题解答。专家级用户需要访问较少使用但对其任务非常重要的UI专用部分。了解可能使他们的工作更容易的新功能是很重要的。一般来说，最大的用户群介于两者之间。他们正在寻找访问特定工具的途径，并且对站点有粗略的了解，因此让他们在获得信息和指导的支持以及获得高级功能的同时继续学习是很重要的。从本质上讲，您为新用户构建的东西对专家用户和中级用户也有帮助。在此基础上建立一个强大的基础，让高级用户快速访问他们需要的工具。

现实世界如何影响数字世界

一个熟悉的对象可以引导用户。Skeuomorphism是一种设计概念，其中软件表示类似于现实世界的对应项。在数字时代的早期，第一台麦金塔电脑上的垃圾桶图标是一个明确的指示，可以把不想要的文件拖到哪里。

其他简单的例子包括，当点击或点击计算器按钮时，它会出现按下的声音，或者当你用手机拍照时，它会发出快门的声音。更精致的例子包括一个日历应用程序，它的页面看起来像桌上的记事本(有些页面甚至用点画皮革的边框来强调)，或者在一个电子阅读器应用程序中，它的藏书看起来像是放在书架上的(甚至有阴影)。

近年来，拟物化已经不再受设计师的青睐平面设计已经变得很普遍。在平面设计中，按钮是二维的而不是三维的，纹理是最小化的，图标是程式化的而不是逼真的。平面设计减少了视觉上的混乱，简化了一些交互。

随着普通大众对电脑和智能手机的功能越来越熟悉，拟物化也越来越不需要了。但拟物化的痕迹依然存在。许多图标都以它为核心:一个类似35mm相机的图标用于拍照，一个信封图标用于阅读电子邮件，或者一个齿轮图像用于更改设置。

拟物化仍然是有用的，因为它给用户一种熟悉的感觉。当新功能迁移到数字领域时，与模拟对应物建立某种连接将有助于用户进行转换。与其他支付方式相比，使用智能手机在商店里不太常见，因此数字支付界面使用信用卡/借记卡的图像来指示每个账户。当智能手机支付赶上银行卡支付时，设计师可能会创造出新的视觉隐喻。

考虑默认情况

在选择默认值时要小心，因为用户可能不会更改它们。以下是一些常见的默认值:

• 当使用向导安装提供“典型”和“自定义”设置的软件时，“典型”通常是默认设置;大多数用户将其留在那里并继续前进。这是一个很好的练习。
• 在iOS联系人应用中手动添加新联系人时，点击“添加电话”就会显示类别家里的传真(因为这是他们按字母顺序排列的列表中的第一个)。几乎每个人都必须改变这一点，所以这不是一个好的做法。
• 当用户填写表单时，最好为复选框、单选按钮或列表设置默认选项(如果研究表明大多数用户会选择它)。对于用户需要考虑的项目(例如条款和条件以及隐私设置)，最好不要设置默认值，而是强迫用户做出选择。

响应设计

响应式设计是一种HTML代码，它使网站适应用户使用的设备(从手机到大屏幕显示器)。这是将用户需求放在首位的一个具体例子。

外表很重要

网站或应用程序的外观是UI设计师的经验和愿景能够产生真正影响的地方。考虑下面的例子:哪个网站让你想下订单?这不是对他们产品的评判，只是他们的设计。ob欧宝娱乐app手机下载

想要了解更多的原则，请考虑以下由权威专家提出的简洁但强大的方案。

Larry Constantine和Lucy Lockwood是以用户为中心设计的先驱，他们提出了以下原则:

结构:有目的的组织，为用户提供清晰度和一致性。

简单性:简化常见任务，以用户理解的方式进行交流，并提供与较长的流程相关的快捷方式。

可见性:完成任务所需的每个组件在需要时都应该是可见的。何志强博士他补充说，你应该围绕一个主要目的或中心来设计屏幕。

重用:相同的操作应该总是产生相同的结果，组件应该在整个UI中重复出现。如果已经有了可行的方法，就不要重新发明轮子。换句话说，这重复了识别比回忆更好的观点。

公差:基于康斯坦丁和洛克伍德的原则，约翰逊说:“你的UI应该是宽容的。它不应该让用户觉得自己是个失败者。给你的用户一个机会，允许他们在学习过程中优雅地失败。”

在他的书中人机界面，杰夫·拉斯金改编了艾萨克·阿西莫夫的小说机器人三定律用户界面设计的两条法则

• 电脑不应该伤害你的工作，或者因为不活动而让你的工作受到伤害。
• 电脑不应该浪费你的时间，也不应该要求你做不必要的工作。

UI设计师对UI如何工作以及用户如何与UI交互有着深刻的想法。这被称为概念模型．另一方面，用户对界面如何工作以及如何与界面交互有着深刻的了解。这被称为用户模型．

在关于用户界面设计的一章中，来自于办公自动化卷信息系统系列丛书中的主题、作者艾莉森·李和弗雷德·h·洛霍夫斯基解释一下这些概念:

概念(系统)模型是系统设计者的抽象框架，系统及其运行的世界都建立在这个框架之上。它封装了关于系统工作的知识，以及如何使用这些知识来完成任务....

另一方面，用户(心理)模型是基于用户的知识和经验对概念模型的个性化的、某种程度上的高级理解。这不仅是一种个人描述，也是一种处方。用户不仅使用他的心智模型来执行被教导的任务，而且还执行最初未包含在概念模型....中的任务

因为用户的心智模型是基于系统的概念模型，所以正确地构思概念模型(即，它是完整和一致的)是非常重要的。一个概念模型给出了一个粗略的、不完整的系统概念，或者不连贯、不彻底，这将使系统难以理解，并可能导致概念模型和用户模型之间的冲突。

如果设计师能够很好地完成自己的工作，并使用来自研究的数据和已知的设计理念将一个一致且清晰的界面组合在一起，并使其看起来非常好，那么这两个模型就会有很大的重叠。

除了本文介绍的理论之外，还有许多关于UI设计的理论。但它们都有以下几个共同的概念:

• 用户需求至上
• 做好调查
• 别让他们思考
• 是明确的
• 是简单的

通过设计一个灵活的平台来满足你的团队的需求，并随着需求的变化而适应，从而使你的员工能够超越自己。

Smartsheet平台可以轻松地从任何地方计划、捕获、管理和报告工作，帮助您的团队更有效地完成更多工作。报告关键指标，并通过汇总报告、仪表板和自动工作流实时了解工作情况，以保持团队的联系和信息。

当团队对要完成的工作有了清晰的认识时，就不知道他们在同样的时间内能完成多少工作。今天就免费试用Smartsheet吧。