|
当人们设计网络应用程序（Web App）的时候，通常最注重的是功能。大部分时候，这是好事。 多数人使用程序是因为程序有用而不是漂亮。但这并不是说，你就不用认真考虑用户界面（UI - user interface）设计，只要随便整个普通的用户界面就行了。好的用户界面设计能够提升任何网络应用程序的整体用户满意度。 在许多方面，好的用户界面设计和好的网络设计类似。颜色理论，负空间（Negative space），布局仍然有效。但是由于用户界面承担的交互功能，在许多时候必须更加深思熟虑。 网站访问者不会只是来看看，他们会和网站产生互动。有时候，他们的互动方式甚至可能出乎你的意料。在你开始进行网络程序设计之前，先花时间琢磨用户界面设计非常关键。 下面是一些关于杰出用户界面设计的原则和想法。 界面统一，至关重要 在进行用户界面设计的时候，保证页面、功能和选项设置之间的一致性很重要。用户在使用你的程序时会有所期待。如果每个页面上的相同元素老是变来变去，不但让人糊涂而且使人沮丧。 比如说，如果在主页上用户使用的是顶部导航条在不同页面之间进行切换，你必须确保在打开的子页面中也有顶部导航条，且上面的链接顺序与主页的一致。 其他需要保持一致的包括页面配色方案和整体布局，以及程序中可能会间接使用到的重要链接（比如说，账号管理和FAQ帮助文件）。 你的用户有时会犯错 不管用户界面多么直观，你在设计的时候多么小心，你的用户偶尔还是会犯错。有时只是因为他们不小心点错了地方，有时是他们操作的时候没有注意到，或者根本没在看网页。 不管怎样，重要的是确保用户能够轻易地撤销他们的错误操作。 你会注意到在许多的网络程序中，包括Google Docs，几乎任何时候只要你做些什么，就会看到一个撤销上次操作的链接。在其他程序中，你可能得使用菜单来撤销一个操作。但是最好的网络程序还是会尽量保证任何时候都能轻松返回上一步或两步。 高亮显示改变的内容 当用户在使用程序过程中，高亮发生变化的内容对用户很有帮助。比如说，你的程序包含来自不同源许多人的大量信息，一旦有新内容就马上高亮显示的功能很有用。 高亮显示内容的方法有很多。最流行的方法之一是为新内容添加阴影背景。 其他程序使用图标来表示新内容。不管你决定如何做，请确保新内容标识不会影响内容的可读性。同时还要保证这些提醒不会打扰不关心内容变化的用户。 
TitanPad 使用颜色来标示每个用户做出的改变 启用键盘快捷键 即使能用键盘快捷键，也不是每个用户都会使用它们。但是对于那部分习惯了键盘快捷键的用户，没有这项功能对用户满意度的影响极其恶劣。 想一想用户在你的网站上的常见操作，并确保提供相应的快捷键。 同时，请确保你设定的快捷键是合理的。有些快捷键通常用于某些特定的功能（比如说Ctrl+Z撤销操作，Ctrl+V粘贴），所以请确保这些通用快捷键能正常使用。 请合理地选择快捷键，方便用户记住它们。同时也不要忘记在任何下拉菜单中，相应操作命令旁边包括这些快捷键。 使用大家熟悉的标准和惯例 一些广泛使用的程序已经为一般操作设定了一定的标准。比如说，人们已经习惯看到用于“打开”的文件夹图标，以及用于“粘贴”的剪贴板。 他们也习惯在特定的程序菜单下方看到特定的选项和命令（新建文档或文件总是位于“文件”下拉菜单下面；复制和粘贴总是在“编辑”菜单下拉框中）。 想一想有哪些现成的程序与你的程序功能类似，看一看他们是如何组织操作命令以及使用的是什么图标。 如果你看见不同的程序使用的图标一致，你应该认真考虑使用同样或者类似的图标。这对于从另一个程序转过来的用户更加直观，用户体验更好。 提供个性化选项 许多的网络应用程序允许用户对他们的帐户进行自定义。一些网站允许你调整配色方案或者上传自定义的图形。一些网站允许你重新调整布局或者登陆显示界面。还有一些网站允许你创建自定义的页面或者显示你关心的信息内容。 请考虑既能够提升程序功能又能够改善用户体验的自定义选项。 用户定制对于一些程序来说可能用处不大，但是对于其他程序则潜力无限。即使是简单的个性化选项也能够对用户的体验和满意度产生剧烈影响。比如说允许用户上传他们自己的Logo，或者根据个人偏好改变字体或颜色。 
Highrise允许用户自定义他们的仪表盘（dashboard）。像这样的小小自定义选项却能大大增加用户满意度。 用户提示和内置帮助信息 许多的程序开发者会发布全面的程序使用文档。这些文档对于新用户来说非常有用。但是在很多情况下，这些文档被放在网站上某个独立的版块。用户要访问它就必须离开程序。 虽然对于复杂的程序而言，全面的程序使用文档仍然是个好主意。但是在常用的窗口或者页面上的侧边栏，集成用户提示和内置帮助信息能够方便大多数用户。 这为程序使用者提供了无缝式帮助，节省了他们的时间，使得整个用户体验更加愉快。 使用标签导航和命令按钮 与按钮或文字链接相比，标签导航有很多优势。但是最重要的优势其实是它微妙的心理暗示。 标签令人想到使用笔记本或活页簿。一个标签表示一个栏目或主题。在网上也是如此。标签令人下意识中联想到从网站或程序的一个版块移动到另一个。 另一方面，按钮则令人想到命令。使用按钮命令如提交一个表单合乎情理，因为人们总是把按下按钮和做事情联系在一起。所以为了达到最佳用户体验，请记住 标签 = 导航，按钮 = 命令。 对话窗口背后阴影显示 
这是最基本的原则，有时却被人忽视。请在对话窗口背后使用阴影背景。确保窗口突出显示，用户不易分心。 使用阴影背景的对话窗口范例 使用相关图标和标记 许多开发者在程序中使用的图标不带相关标记。除非是绝对常用的图标，否则这样做是不对的，只会令用户犯迷糊。 当鼠标移动到图标上，再显示悬浮标签也不是避免混乱的好办法。因为这对于用户而言仍嫌麻烦。 在图标旁边直接加上文字标记，用户马上就可以看到。随着用户不断熟悉每个图标的意思，他们能够更快地找到相应的图标。那时候，他们很容易就明白每个图标代表什么。 你也可以允许用户隐藏这些标记，不过必须确保默认显示标记。 保持简单 最简单的界面就是最好的界面。不要为了增加功能而增加功能。如果一个功能有明确的作用就增加，没有就不要增加。 设计元素也是如此。如果为了某个目的需要增加某个元素，可以增加。但是请不要增加一些花里胡哨，只是好看的东西。它们只会使界面显得凌乱，令用户感到糊涂。请选择最简单的办法来完成工作。 这并不是说你的程序必须是极简主义。但是，请记住大多数人使用程序看中的是功能而不是设计。只要设计不干扰用户使用程序的效率，他们可能甚至都不太会注意程序的视觉元素。 高效的工作流程
在设计用户界面的时候，你需要考虑用户的工作流程。人们已经预先决定了使用特定类型的软件和程序的方法，你设计的界面得顺从用户的使用习惯。 比如说，如果一些操作命令关系密切，就把它们归为一组，放在程序里的同一个地方。 研究一些用户的工作流程，找到影响他们高效完成工作的阻碍因素。然后弄明白如何改善用户界面来满足他们的需求。有时候，单靠用户界面不能解决问题，不过有时候可以。 15个出色的用户界面设计范例 世界上有成千上万个绝妙的网络程序用户界面设计。相信这里给出的十几个范例能够为你提供一些想法。 Shoply 在Shoply上，用户可以很容易地删除、编辑或者查看已上传的产品，以及添加新的产品。 
Invoicera Invoicera 使用标签导航和命令按钮。同时界面保持相对简洁，布局和配色也一目了然。 
Pandora Pandora的幕后设计师在设计用户界面时，显然借鉴了MP3及其它媒体播放器上的界面设计。界面非常直观易用，不用学习就能上手。 
Wufoo Wufoo’s的窗体设计再直观不过了。当你开始设计一个新窗体时，不用离开当前页面就能看到详细的操作帮助信息。 
Grooveshark Grooveshark 使用图标来帮助导航和显示功能。大家都能认出的图标如“播放”和“跳过”按钮没有文字标记。但是其他的图标如“主页”和“收藏”则有。 
Wridea Wridea 的界面非常直观，只有轻轻一点就能编辑任何地方。他们还使用悬浮菜单，只有当你把鼠标移到到“某个主意”上，扩展菜单才会显示。这减少了视觉上的杂乱无章。用户还可以在两种不同的配色之间切换。 
Backpack Backpack 使用标签来导航，按钮来操作。这样使用起来非常直观。 
Remember the Milk Remember the Milk 使用标签导航和命令按钮。他们还提供了有用的注释 ，几乎不再需要用到单独的帮助文档。 
Ta-da List Ta-da Lists 的界面尽量简洁。只有当前任务，没有任何多余的信息。这实在是太直观了，用户体验超棒。
Relenta Relenta 使用标签导航和带文字标记的图标。他们还严格遵从电子邮件程序的使用习惯，用户几乎不用学习就能轻松上手。
Viviti Viviti 考虑了他们的非设计师用户而采用了非常直观的界面设计。每次登录都能看到帮助小贴士。帮助文档也非常友好，容易访问。在离开你正在工作的页面之前，你可以先选择想要的帮助类型。
Bounce Bounce’s 的界面非常简洁明了。工具使用也非常直观（只要在区域里拖拽就可以创建便条，写上反馈，然后分享）。
Meetifyr Meetifyr 的界面是如此直观，几乎不要用到任何帮助文档。只需要瞧上几秒钟的时间，用户就能马上知道如何使用，以及每个图标和每种颜色代表的意思。
DoingText DoingText 不需要注册就可以直接使用。每个文档都是基于简单的URL路径。协同工作者只需要知道相应的URL路径即可。协同工作几乎可以即刻生效。
Writeboard Writeboard 在主内容区域旁的侧边栏上提供了非常有用的风格帮助说明。
|
