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