2018-12-09

如何设计一个优秀的用户界面




在设计Web应用程序时,功能通常被放在第一位。在大多数情况下,这是一件好事。

人们(大多)使用应用程序是因为它们很有用,而不是因为它们看起来很漂亮。但这并不意味着你可以忽略良好的用户界面设计,或者只是简单地整理一个通用的用户界面。良好的UI设计增加了用户对任何Web应用程序的总体满意度。

好的UI设计在很多方面都类似于好的网页设计。色彩理论、消极空间和布局原则都仍然适用。但是UI设计在很多情况下需要更多的思考,因为它需要交互性。

访问者不仅会看你的网站,他们还会和你的网站互动,有时是以你意想不到的方式进行的。在开始进行web应用程序设计之前,花时间真正探索UI设计是非常重要的。

下面是设计一个很好的用户界面的一些原则和想法。

 

一致性是至关重要的。
在用户界面设计中,页面、功能和选项之间的一致性至关重要。用户在使用你的程序时会对某些事情产生期望,如果这些东西在不同的页面之间发生变化,那么这既会让人困惑,也会让人沮丧。

例如,如果在应用程序的主页上,用户在具有顶部导航栏的页面之间导航,请确保在后续页面上显示相同的顶部导航栏,并确保从其链接的页面以相同的顺序显示。

其他需要保持一致的内容包括您的配色方案和总体布局,以及指向重要页面的链接,这些页面可能不会直接在应用程序中使用(例如帐户页或常见问题解答)。

 

你的用户会犯错误
无论您如何仔细地设计用户界面,以及它是多么直观,您的用户有时都会犯错误。有时只是因为他们无意中点击了。其他时候,这是因为他们没有真正注意到自己在做什么,或者没有阅读页面的内容。

在这两种情况下,重要的是用户能够轻松地撤销他们所犯的错误。

你会注意到许多网络应用程序,包括谷歌文档,几乎任何时候你做什么,一个链接似乎取消了最后的行动。在其他应用程序中,你可能需要使用菜单来撤销一个动作,但是最好的网络应用程序仍然可以让你在任何时候都可以轻松地返回一两步。

 

突出显示更改
当在使用Web应用程序时进行更改时,如果您突出显示这些更改,则对您的用户非常有用。例如,如果您的应用程序包含来自各种来源或用户的信息提要,那么突出显示新内容是一项有用的功能。

有许多方法可以突出显示内容。最流行的方法之一是在新内容的背后加上阴影背景。

其他应用程序使用图标来表示新内容。无论您决定做什么,请确保新内容指示不会干扰内容的可读性。同样重要的是,要使这些通知具有非侵入性,以避免分散当前不关心更改内容的用户的注意力。

titanpad
TitanPad使用颜色编码来表示每个用户所做的更改。



 

启用键盘快捷键
并不是所有的用户都会使用键盘快捷键,即使你让他们可用。但对于习惯于键盘快捷键的用户比例而言,不包括快捷键可能会对用户的满意度产生灾难性的影响。

想想用户在你的网站上执行的最常见的操作,并确保键盘快捷键是可用的。

也要确保您使用的任何键盘快捷键都是合乎逻辑的。某些快捷方式通常用于某些函数(如Ctrl+Z用于撤销或Ctrl+V用于粘贴),因此请确保这些快捷键继续工作,就像在其他程序中一样。

合理地选择快捷方式中使用的键,这样您的用户就很容易记住它们。确保您还将它们包含在它们各自操作旁边的任何下拉菜单中。

 

使用熟悉的标准和公约
广泛使用的应用程序已经为应用程序的工作方式设定了一定的标准。例如,人们习惯于看到文件夹图标的“打开”,或剪贴板的“粘贴”。

它们还习惯于在特定的应用程序菜单下显示某些选项和操作(创建一个新文档或文件几乎总是位于“File”菜单下拉框下;复制和粘贴几乎总是在“编辑”菜单下拉菜单下)。

想想已经建立起来的应用程序,它们所做的事情与你的应用程序所做的类似,看看它们是如何组织行动和使用什么图标的。

如果您看到不同应用程序之间的一致性,您应该认真考虑为您自己的应用程序使用相同或类似的图标。它使用户更直观地从另一个应用程序切换到您的应用程序,并将改善他们的体验。

 

提供个性化选项
许多web应用程序允许用户对其帐户进行自定义。有些网站允许您调整配色方案或上传自定义图形。另一些则允许您重新安排布局或首次登录时显示的内容。还有一些允许您创建自定义页面或类似的内容来显示您所关注的信息。

考虑一下可能的定制,这将改善您的应用程序的功能和用户体验。

一些应用程序可能无法从定制中获益,而另一些则充满了可能性。即使是简单的事情,如允许用户上传自己的标志,或改变颜色方案或字体以适应他们的个人喜好,也会对用户的体验和满意度产生巨大的影响。

highrise
高层允许用户定制仪表板的配色方案。这样的小定制选项可以极大地提高用户满意度。



 

使用工具提示和集成帮助消息
许多应用程序开发人员都提供了大量的使用应用程序的文档,这对于新用户来说是非常有帮助的。但在许多情况下,这些文档保存在自己的网站上单独的部分。为了访问它,用户必须有效地离开应用程序。

虽然对于复杂的应用程序来说,大量的文档仍然是个好主意,但是将工具提示和帮助信息集成到页面的模态窗口或侧边栏中可以提高大多数用户的可用性。

这是一种无缝的方式,可以在某人实际使用您的应用程序时提供帮助,这样可以节省他们的时间,并使整个体验更加愉快。

 

使用选项卡式导航和按钮执行操作
与按钮或文本链接相比,选项卡导航具有许多优点。然而,最重要的是它所具有的微妙的心理效应。

标签是用笔记本或活页夹唤起的。每个选项卡表示一个新的节或主题。在线上也是如此。标签会让人们下意识地想到移动到一个站点或应用程序的一个新的部分。

另一方面,纽扣引起了一种行动。在提交表单之类的事情上使用按钮在心理上是有意义的,因为人们将按钮与做某物因此,要获得最佳的用户体验,请记住选项卡=导航,按钮=操作。

 

把所有东西都遮住在Modal窗户后面
这是有时被忽视的最基本的事情之一。当打开一个模态窗口时,确保你遮住了窗口后面背景中的所有东西。这使窗口更加突出,消除了分心。

nirvana
有阴影背景的模态窗口的一个很好的例子。



 

使用相关图标和标签
许多开发人员选择在他们的应用程序中使用图标,而不给这些图标贴上标签。除了绝对最常见的图标外,这通常是一个错误,只会混淆用户。

添加在图标悬停时出现的ALT标记并不是避免混淆的好办法,因为它仍然需要用户的太多努力。

把标签放在你的图标旁边意味着它们可以立即被识别。当用户熟悉每个图标的含义时,他们将能够更快地找到他们正在寻找的东西,在此之前,他们可以很容易地看到每个图标的确切含义。

另一种选择是使用户能够隐藏标签,尽管确保默认选项是显示标签。

 

保持简单
最好的接口尽可能简单有效。不要为了增加钟声和口哨而加铃铛和口哨。如果函数有明确的用途,那么添加它。如果没有,那就不要。

设计元素也是如此。如果元素有目的,那么可以添加它。但要避免添加看起来漂亮的东西。它们只会增加视觉混乱,使用户感到困惑。选择完成任务的最简单的解决方案。

这并不一定意味着你的应用程序需要极简主义。但请记住,大多数人使用应用程序是为了他们的功能,而不是他们的设计。只要设计不影响他们高效使用应用程序的能力,那么他们甚至不太可能关注应用程序的视觉元素。

 

有效工作流
在设计用户界面时,需要考虑用户的工作流程。人们使用特定类型的软件和特定应用程序的方式是预先确定的,你需要设计你的界面以符合这些模式。

例如,如果某些操作通常是相互关联的,那么将它们组合在应用程序的同一区域。

研究一些用户的工作流程,看看是什么阻碍了他们高效地完成任务,然后找出如何改进UI以满足他们的需求。在某些情况下,仅靠UI无法解决这些问题,但有时它可以解决这些问题。

 

15例大用户界面
有数以百计,甚至数以千计的网页应用程序与奇妙的用户界面设计。这里有十多个给你一些想法。

肖普
肖普用户可以很容易地删除、编辑或查看他们已经上传的产品,以及添加新产品。

shoply


INVOICERA
Invoicera使用选项卡导航和按钮执行操作。它还保持相对简单和直进的布局和色彩方案.

invoicera


潘多拉
很明显背后的设计师潘多拉在设计用户界面时,考虑到MP3播放器和其他媒体设备上的界面。这是一个直观和易于使用的设计,几乎没有学习曲线。

pandora


乌福
乌福表单设计界面是一个应用程序所能得到的最直观的界面。当您开始设计一个新表单时,将显示帮助消息,以便在不需要离开页面的情况下准确地解释该做什么。

wufoo


格罗维沙克
格罗维沙克使用图标帮助导航和功能。常见的图标,如“播放”和“跳过”按钮没有标签,但其他,如主页和收藏图标,是。

grooveshark


威迪娅
威迪娅使用直观的界面,只需单击即可编辑任何内容。他们还使用菜单,只有当你停留在一个想法,这减少了视觉混乱,他们可以让用户选择两种颜色方案。

wridea


背包
背包使用按钮进行操作,使用选项卡进行导航,使用起来更加直观。

backpack


记住牛奶
记住牛奶使用选项卡导航和按钮执行操作。它们还包括一些有用的符号,这些符号大多否定了对单独文档的需要。

rememberthemilk


TA-DA名单
Ta-da列表使他们的界面尽可能简单。没有额外的信息,只有手头的任务。它令人难以置信的直观,并创造了一个优秀的用户体验。

tadalist


雷伦塔
雷伦塔使用选项卡导航和标签图标。他们还坚持电子邮件程序的标准惯例,因此他们的用户几乎没有学习曲线。

relenta


维维蒂
维维蒂使用直观的用户界面,考虑到非设计师用户的需求。每当您登录时都会提供提示,文档很容易访问和用户友好,允许您在实际离开正在处理的页面之前选择所需的帮助类型。

viviti


弹跳
弹跳界面非常直接和简单.可用的工具是直观的(只需拖动一个区域来记录、写反馈,然后共享)。

bounce


梅特福尔
梅特福尔使用如此直观的界面,几乎不需要任何文档。看一看这个应用程序,它只需几秒钟就能立即识别出如何使用它,以及不同的图标和颜色代码意味着什么。

meetifyr


DOINGTEXT
DoingText通过不需要任何类型的注册过程来简化使用。文档只是基于URL的,协作者只需要URL。它使协作几乎成为一个瞬间的过程。

doingtext


书写板
书写板在主内容区域旁边的侧边栏中包括有用的样式帮助。