|
一个好的用户界面（UI）的主要功能是为用户在用户意图和应用程序功能之间提供一个直观的映射，为用户既定任务的完成提供一个解决方案。基本上来说，用户界面（UI）描述了用户和网站之间交互以及用户访问其功能的方式。事实上，可用性是一个良好的用户界面的双积，它决定了用户是否可以轻松地执行网站提供的所有功能。可用性是每一个设计的重要组成部分，特别是在拥有大量功能和用户的网站上。
这篇文章我们来说说社会化媒体和社交网络的用户界面的一些至关重要的特征。文章讨论那些设计背后的重要特征，技术和概念，并通过一些优秀网站作为例子来解释这些特征为什么是重要的。这些简单的和通用的可用性策略几乎适用于任何地方和任何类型的用户界面。
1.简洁的界面是关键在深入用户界面的细节之前，必须指出的一点事实是：简洁的用户界面是社会化媒体和社交网络的共同特征。社会化媒体网站在色调和图形方面更加简洁。色调方面通常包括少数几种伴随着单色变化的颜色；背景一般为白色，更新（如状态更新）往往都是浅色以及（通常是绿色或黄色突出；警示通常用红色背景突出）
此外，你会发现图形往往也是非常简单的，并且运用地相当谨慎。这是由多种原因造成的。最重要的原因是一个简单的事实：生动形象的设计并非是真正有用的社交网站。社会化应用被认为是向用户提供了一个内容可以很容易地创造以及会话可以很容易地产生的共享环境，而强烈的视觉设计会造成不必要的干扰，使用户很难专注于他们的会话。
例如，Twitter可能是最简约的社会化用户界面之一。其UI非常的简洁，使用了极少的颜色，并把其服务的主要特征——文本输入框——放在前面。
换言之，由于信息流相当大一部分是为了大多数用户的，这自然就要求界面设计的越简单越好。如果界面上的图形元素用地太多，用户就会感到不舒服和混乱，因为这样用户就很难关注到特定的任务或区域。尽管简单的界面不只意味着只是一个简单的视觉设计。更重要的是，这意味着有用的界面选项的设计、安排以及展现都要以直观的方式。
社会媒体和社会网络站点的颜色往往是平淡和让人愉悦的，而不是鲜亮和让人不舒服的。一些功能不争取关注；其中许多大部分时间是无形的。事实上，绝大多数社会化媒体的界面是上下文相关的，很多功能只“按需”显示。拥有大量的数据和功能的网站，明亮的色彩只会让用户感到混乱并且会分散用户注意力。
2.显著和实用的搜索良好的搜索功能无疑是可用性和好的用户界面的顶峰。社会化媒体的搜索功能是必需的——因为社会化媒体有着大量的信息。社会化媒体的搜索功能，除了拥有传统搜索的多个层面的内容以外，社会化应用还提供了一个社交图联系中的高级搜索——无论是在小组，社区还是在兴趣上。网站顶部右上角是搜索框最合适的位置。用户期望在那里看到：搜索输入框和清晰可见的搜索按钮。
社会化应用的一个共同特征是使用即时搜索结果和过滤。当你往输入框输入文字的时候，搜索结果以下拉的形式被过滤。该过滤帮助用户快速找到他们寻找的内容，并剔除那些不相关的内容。
搜索结果页面比一个友好的搜索输入框设计显得更为重要。Digg最近更新了他们的搜索引擎，现在是一个非常实用和友好的搜索例子。您可以通过一些选项来组织搜索结果，这些选项如最佳匹配，MostDiggs，以及最新的。在左边你会发现时间范围列表，Digg范围，热门话题和热门分类。此外，您还可以按内容的来源来组织搜索结果。在搜索结果页的顶部还有一个巨大的搜索框，方便用户搜索其他关键字。
3.显著的召唤行动（Call-To-Action）按钮当然，社会化应用包含多种需要以某种方式交流的功能。因此，一些按钮和链接几乎需要置于在每一页上（注册可能是唯一合理的除外）。一些涉及到导航链接，另外一些让用户调整具体应用功能。按钮通常用于激励用户操作，而链接往往是被动的且更微妙。按钮往往更大，更生动，更令人难忘。不管是执行那个功能的按钮，都应该显著且可点。
通常，社交网站只有少数几个召唤行动的按钮，这些按钮，都应该鼓励用户采取行动（见WebDesignTrends:CallToActionButtons,ButtonsDesignShowcaseandGoodCall-To-ActionButtonsforgoodguidelinesforthedesignofcall-to-action-buttons）。这些按钮通常设计和放在突出的位置，而其他设计元素仍然非常微妙和简单（见下面的截图）。
一般来说，在用户界面设计中现实生活的比喻用法是非常可取的。因此，一个好主意不仅可以使使一个按钮更像一个按钮（例如，使用下拉阴影），更能确保——活跃的——和重点突出的设计，和按钮交流是实际上“按”的，在这种情况下，最好是添加压花效果而不是仅仅改变按钮或其边框的颜色。
按钮应该足够大，让用户能轻易注意到和选择。然而，形状大小并不是唯一一个可点击的按钮或链接的特征。另一个重要因素是内边距。如果你有一个链接线紧紧挤在一起，就不可能点击一个你其实想点击的那个。您可以考虑为您的链接或按钮的提供一些视觉支持。
在使用链接的时候，使用一些图标或者小插图有时是有用的，但这并不总是可行的，特别是在链接对于绝大部分用户不是很重要的时候。如果您需要强调一些重要链接，你应该考虑给链接加一些间距，使用突出的背景，使之成为一个大型点击块或只是取代一个突出的按钮。使用突出的背景，但不能太复杂。
同样重要的是要提到光标效果的重要性。光标效果让用户知道按钮实际上是可以点击的，并确认该用户的行为是被系统理解的。
4.温和的分隔元素各种信息块的有意义组织和展示可能是社会化用户界面设计师需要面对的高级设计问题之一。为了使内容可读，可浏览和容易被觉察到，内容块需要在视觉上被分隔开。换句话说，每个元素都需要以某种方式被定义且被显示为单独的元素。事实上，在布局里各个元素的分隔是最简单的使用户界面更加简洁的方式之一，用户可以轻松地与之交互。
但是，如果许多元素在视觉上被分隔开，界面上则会产生更多的信息块，布局也会因此变得更加复杂。因此，为了确保布局仍然可浏览，视觉上的分隔需要进行微妙的处理。在大多数情况下，横向和纵向线条运用中性平淡的颜色（例如灰色）。一个强有力的鲜艳的色彩——这往往是难以忽视的——将会分散用户的注意力。相反，“平静”的线条更容易被忽略，从而提供可视化的支持。
在一个页面布局中分隔元素究竟意味着什么呢？Twitter的使用视觉分隔来构造页面布局。你可以看到每两条tweet之间有一条虚线。如果没有这个分界线，几乎不可能快速扫描多行文本。像这样的小细节可明显改善用户界面，方便使用。
Delicious使用细小的1px灰色线来分隔其用户的热门书签。
您还可以看到元素之间的分隔在yuhou.cn上也在使用。就像Twitter，单一的灰色像素线分隔大量的文本，使得页面更容易浏览。
相反，Reddit在每条文本之间没有使用分隔，使得界面更加混乱，因此更难以扫描。有时候，一个大幅度活跃的白色空间也可能有助于在布局里分隔元素，但这种方法的缺点是，可能会使得网页拉得太长，以至于用户要使用垂直滚动条。
在Reddit上，运用高亮标题的方法来提高可浏览性，这样关注的重点完全落在了标题上，也不失是一个好的设计方法。
另一个分隔元素的技术是使用适当的布局结构，在视觉上分隔内容块/使用空白用以同样的目的。例如：Slashdot把每个内容块放在易于识别的框中，并使用背景图片来突出标题。
StumbleUpon采用的基于网格的结构，其中的每个内容项目有着相同的高度和宽度。这是另外一种有效的温和的分隔方式。
|