私人助理的最佳工作地点
Web应用的10个UI设计要点
当我完成了我的第一个web应用(CompVersions，它允许你收集客户的反馈)时，我惊讶地发现我在旅程开始时没有考虑到的用户界面决策和考虑的数量。我想和你们分享一些。
这些设计上的考虑可能表面上看起来很明显，但一旦你经历了设计和开发过程，就很容易忘记它们，因为它们就像调味品一样——当它们在那里时，你几乎注意不到它们，但如果它们消失了，你的食物就不好吃了。
空白状态
空白状态是指当用户还没有输入任何数据(除了他们注册账户后的电子邮件地址)时，你的应用程序的外观和功能。这是你的用户将会遇到的第一个互动和场景，它可以创造或破坏他们的第一体验和印象。
这个状态是留住用户的关键时刻，因为此时用户还没有投入足够的资金使用应用，所以他们不会被鼓励去寻找其他解决方案。
处理空白状态的一种方法是使用媒体向用户展示如何使用界面，例如，视频或带有截图的产品介绍。例如，在注册一个Fitbit您首次呈现和登录身份验证的用户，您可以使用应用程序的不同组件的幻灯片呈现。
你也可以在UI中为首次使用的用户提供提示、提示和提示，指出功能。例如，下面，你可以看到FreshBooks显示一条消息，告诉您还没有创建任何估计，然后为您提供创建估计的链接。
在我的web应用程序中，你第一次登录时，你会看到四个按顺序编号的框。在没有完成第一个选项的情况下，您无法进入第二个选项，这样就没有猜测，用户立即知道要开始做什么。在空白状态下，也只有一个文本框和按钮可见，所以对于下一步应该是什么没有歧义。当用户完成每个步骤时，下一个框将为他们解锁，他们可以继续。
让我们看几个空白状态的更多例子。在Basecamp，他们向用户展示的第一件事是一个视频，让你大致了解web应用程序的工作方式。
Dropbox有一个有趣的方法。他们会在“开始”选项卡上给你一个“开始”标签，上面有一系列的行动项目，让你逐步了解需要做什么才能从使用Dropbox中获得最大价值。
当您完成操作项时，它们横出，左侧的框逐步填充，直到您完成。
Dropbox通过奖励玩家完成“入门”选项卡中的项目，鼓励玩家探索和使用应用，有效地将产品的培训和熟悉阶段游戏化。
配额/使用信息显示
如果你有一些限制，比如存储空间，你可以创建的项目数量等，你应该不断地给用户提供他们还剩多少的视觉提示，这样，如果需要，他们可以在达到限制前升级他们的帐户。最好包括一些有帽的单位的可见测量。
你不想突然告诉你的用户他们的存储空间不够了或者其他有限制的东西，让他们措手不及。想象一下，你的工作时间很紧，你正在写一封带有大文件附件的邮件。您按下发送按钮后才发现您的文件配额已经达到。你会成为一个沮丧的用户。
让我们浏览显示配额/使用信息的一些示例。
在Gmail.，您可以看到简单的文本信息，显示您使用的存储量以及您有多少存储（在MB中），以及您用完的存储量的百分比。他们使用不同的颜色（绿色）在布局的页脚上找到了这一点，以突出。
Dropbox与一个简单的视觉显示屏，向您展示一个带您用完的存储百分比的栏。
在Evernote.，配额/使用信息在接口中不持久;你必须访问设置页面才能看到它。这并不像让它在用户界面上长期显示(或提供到使用信息的快捷链接)那样直观。
对于我的应用程序，我使用了一个简单的文本显示，显示存储空间分配以及用户拥有的客户端和项目数量的配额。
计划升级/降级
您如何设计UI以提醒用户他们可以在不干扰工作流程的情况下升级他们的计划？一旦用户购买了一个计划，他们可能想要升级或降级，并且您不想将它们从您的应用程序中发送到执行此操作。它应该是无缝方便的，因此对用户计划的更改最佳地在应用程序中完成。
让我们通过一些例子来说明应用程序如何处理用户计划的变化。
FreshBooks的升级提醒是持久的，位于web应用程序的页脚。它是一个持续的提醒，不会阻碍用户的工作流程，因为它位于UI的任务区域之外。
Basecamp的升级屏幕清楚地向您展示了更改计划后的收获。
Dropbox的升级界面简洁明了，如下图所示。
在我的应用程序CompVersions上，以下是升级界面的样子。
UI元素的状态
按钮、文本区域、输入字段等元素可以有几种状态。正常状态、悬停状态、禁用状态、激活状态、不活动状态、焦点状态等等，都可以帮助用户确定他们可以对给定元素执行哪些可能的操作。它提供给他们视觉线索，让他们知道他们正在与什么交互，而不是与什么交互。
这些状态是非常重要的考虑因素。它们为你的UI添加了触感和感觉，让你的应用有一种鲜活的感觉。
国家在一些事情上是很明显的导航菜单和按钮，因为这些都是标准的用户界面元素，但是你想要吸引注意的部分呢或者不常见的UI元素呢?
在CompVersions的例子中，我想用尽可能多的微妙的视觉线索引导用户通过四个盒子。一种方法是，当框框悬停在框框上方时，框框会改变颜色，以表明它是一个可接口的UI元素。
当光标离开盒子时，它会向下倾斜。
它们似乎都是无缝的，但我必须做出一个有意识的决定，为每个州编写CSS规则。
下面是当你记录食物时，Fitbit上的UI元素的不同状态。非活动状态是紧凑的，但是有关于如何与元素接口的明确说明(一个添加一个注意文本控件)。当你点击添加一个注意文本控件，它切换到活动状态，具有一个文本区域(一个标准文本输入UI元素)，内联指令说，“写一个新笔记……”，同时处理空白状态场景(即尚未添加笔记)。
让我们看看Basecamp价格表上的悬浮状态示例。当您将鼠标悬停在一个定价计划上时，该计划将高亮显示，并显示带有更多信息的工具提示。
保持用户界面的简单和直观
这是所有UI设计师都会告诉你的东西，但这是一个很难理解的概念，除非你不得不设计自己的UI:保持简单。
做出关于什么，艰难的事情。您如何尽可能简单地展示Web应用程序的用户界面，同时仍然有助于功能丰富？您如何在一个屏幕中设计30个不同可能的用户操作而不使其看起来像战斗机的驾驶舱？
适用时应该练习的一件事进步的信息披露．如果用户不需要按钮，菜单或链接-隐藏它。为用户让道，让他们做自己想做的事，而不必费力地面对大量的选择。
例如，在Dropbox上，你可以对你的文件执行多个上下文命令。以下是你的Dropbox中文件的不活跃状态:
当您悬停在文件上时，逐步公开了一个上下文菜单，显示您可以在目标文件或子文件夹上执行的其他任务，例如删除或移动．
这个概念在理论上听起来很容易，但令人惊讶的是，如果你的应用程序有很多功能，那就令人惊讶。
你一定要有吗编辑始终在每个可编辑项目上的命令，或者在用户遍历可编辑项目时逐步披露此命令？如果它是后者，如果用户没有在该项目上徘徊，则如何表明可以执行的命令？您是否使用图标来保存某些空间或者只是使用说明的文本命令编辑或者你有一个图标和一个文本命令?如果你使用图标，直观的符号是什么?该符号是否与界面中已经存在的其他图标冲突?如果你使用一个文本命令，它应该说编辑或编辑项目？
这只是你需要不断做出微观决定的众多因素中的一个;当用户使用你的应用后，你便很难改变自己的决定，因为即使是用户界面的微小改变也需要用户进行重新培训和调整，这将阻碍他们的工作流程。
保持内容简单、直观和一致确实可以让UI易于使用，而这需要做的工作比许多人想象的要多。
潇洒地使用视觉效果
图像和图标可以帮助易用性。使用图标，图形，图表，照片等等视觉效果可以完全替换长块文本和数据表。它可以使数据更容易的可读性，它们可用于向视觉提示提供一定命令所做的。
视觉效果是图形用户界面中强大的元素。让我们看一些例子，看看视觉元素是如何在一些web应用程序中使用的。
下面,垃圾桶图标，这是一个可识别的和普遍的符号删除命令，当您将鼠标悬停在Basecamp上的待办事项上时，将逐步显示为可能的操作。
下面，你可以看到一个垃圾桶图标，这个图标允许你拖放待办事项聊天泡泡当单击该图标时，允许您对待办事项项进行评论。
思考在上述情境菜单中所做的设计选择的原因。为什么编辑命令一个文本链接?也许是因为这是用户执行最多的主要任务，而UI设计师希望它有一个更明显的视觉外观(使用逆格式塔心理学的相似律)。为什么图标是这样排列的?为什么评论泡沫图标与其他图标分离?
在适当的地方提供指示和信息
有时候，你需要一个标注框或通知区域，告诉用户一些他们需要知道的特定信息，以便最有效地充分发挥UI的潜力。在正确的地方尽可能多地提供这些有用的信息，并确保它们以一种不会妨碍用户工作流程的方式集成到界面中。
例如，如果对命令使用图标，则可以使用alt和标题属性，让用户快速了解鼠标悬停在图标上时该图标将做什么。
不要过度。关键是识别需要更多信息和指令的位置。如果有太多的工具提示，提示，标注框等。用户可以对它们脱敏，并且它们可以干扰应用程序的使用，因为它们不断分散用户的注意力。
优化界面速度
web应用程序应该是快速响应的。当连续的任务之间存在巨大的延迟时，用户可能会无意识地抵制使用应用程序。应用程序是完成特定工作的工具，如果速度不快，那么它就不是一个非常有效的工具。
在大多数情况下，使用最佳实践优化页面响应时间将有助于确保你为用户提供尽可能快速和高效的体验。这些最佳实践大部分都是常识，为了最大限度地提高你的收益，你应该首先关注前端网页的性能(例如，减少页面资产的文件大小，减少渲染网页所需的HTTP请求数量)。
尽可能使用CSS。减少对JavaScript的需求。如果有其他可比较的选择，不要使用Flash(因为它可能会占用资源)。
使用数据进行设计以帮助您做出明智的决定并帮助你看看你是否可以开始使用CSS3，以节省不得不加载CSS背景图像圆角和颜色梯度。尽量使用CSS3。如果没有必要，就不要使用图像——圆角、文本阴影、框阴影和其他所有流行的美学元素比支持它们的web浏览器中的图像渲染得更快。
通过使用由Lea Veroukeep创建的幻灯片演示来自学实用的CSS3;在开发应用时，要经常参考它。
设计与渐进增强记住可以帮助你优化前端性能。为了整个用户群的整体利益(如果数据表明旧浏览器的使用率相对较低)，允许自己在美观方面做出一些牺牲。
使用适当的光标指针和Alt属性
这是一个我们很多人都忘记了的小窍门。JavaScript DOM操作可以使任何元素都可以单击。然而，有时我们忘记适当地设置可点击元素的样式。通过将光标更改为指针来对可单击的元素进行样式化，有助于表明元素是交互式的。这是那种你不注意到的东西，直到它不在那里。
假设你创建了跨度可以使用web开发库点击的元素jQuery．
超文本标记语言
．．．< td > . class=" Delete -row">删除此记录 . class=" Delete -row">< / td >…
jQuery
$ (' span.delete-row ') .click(函数(){美元(这).parent (tr) .remove ();}）;
虽然HTML元素是交互式的，但它不会将鼠标指针更改为游标。为此，您可以使用CSS或jQuery。
CSS
span.delete-row {光标:指针;｝
jQuery
$ (' span.delete-row ') .click(函数(){美元(这).parent (tr) .remove ();}）. css(“光标”,“指针”)；
此外,使用alt如果你在UI中使用图标，它可以帮助人们确定图标的用途。例如，即使你用的是垃圾桶图标而不是“删除”一词，让alt属性表示“删除”。
不仅alt和标题属性帮助屏幕读者为视视障碍用户，它还有助于消除未在视觉上受损的用户的含糊不清。
完成状态
你需要考虑数据输入后应用程序会是什么样子。在CompVersions的例子中，我想在一个视图中显示(按时间顺序)一个特定的流程——客户端信息、项目名称、舞台名称和图像名称。
使用Basecamp，这是仪表板视图。用户获得所有项目和与该项目相关的活动的快速快照。
对于Dropbox来说，这只是你账户中所有文件和文件夹的列表。
这个状态往往是设计我们的应用程序时设计/模拟的第一个屏幕，因为一旦用户开始使用我们的产品，这将是最常见/访问的状态。
结论
还有许多其他关于上述所有成功完成的Web应用程序示例。一旦我经历了这个过程并发现了这些东西，我开始在其他应用程序中注意到它们 - 它成为一种自然习惯，我想。
以我的经验来看，当你意识到在制作界面时你需要真正思考、考虑和决定许多小事情时，你会感到很惊讶。当你想要尽快发布一款产品时，你很容易忽略细节，但如果你花些时间去润色这些小细节，你的界面就会变得非常棒，你的用户也会喜欢使用它。
在设计界面时，你能得到的最好的赞美就是它们易于使用。我希望我在这里和你分享的东西能让你离赞美更进一步。
