设计出色的搜索体验 - 基础知识
原文发布于 2012 年 12 月 14 日（星期五）
大家好！我叫 Kate Dramstad，是 SharePoint 搜索团队的一名项目经理。SharePoint 2013 中的搜索体验的可扩展性比以往任何时候都要高 - 我们已授权设计人员和开发人员构建他们能够想象得到的一切。不过，在自定义搜索体验时必须谨慎行事，布局合理的页面与布局杂乱的页面之间只有一步之遥。我们希望与您分享一下我们在如何设计既华丽又好用的搜索体验方面的一些想法。
整页对齐
搜索体验的最重要的因素之一是所有页面元素的对齐方式。在我们的默认设计中，您会发现优化 Web 部件（沿页面左侧显示排序选项）和 SharePoint 搜索中心图标（左上角的放大镜图像）都是左对齐的。此外，搜索框、导航和结果也是左对齐的。搜索框的顶部与图标的顶部对齐；导航的底部与图标的底部对齐。
图 1. 搜索结果页上的所有元素都与一个网格对齐（此处用绿色显示）
虽然这看起来只是一个小细节，但通过将页面上的元素与网格对齐，实际上可帮助用户更轻松地浏览页面。各个组成部分将通过空白区域内醒目的垂直线和水平线来分隔开。这使用户更易于区分页面上的各个组成部分，这一点非常重要。未对齐的页面在最好的情况下只不过是让大多数用户“感觉糟糕”，而在最坏的情况下，还会实际阻碍用户有效地查看结果。如果未对齐各个组成部分，则会生成“锯齿型边缘”。当用户尝试浏览锯齿型边缘时，眼球得来回转动。眼睛沿直线进行扫视的效率会更高。
图 2. 在此图中，搜索图标移至左侧，不再与网格对齐
在向页面添加新的组成部分或重新排列现有组成部分时，如果您希望使体验尽可能完美，则一定要想着这个网格。
图 3. 我们在这里修改了内联结果，使其包含星级评定功能和一些其他的元数据。请注意添加的功能是如何仍旧保持与网格对齐的。
整个页面的外观
对齐方式并不是唯一要重点关注的方面。您还应关注页面上的颜色、字体及各种控件的数目。搜索结果页面的重点应始终为结果本身，因此，在设计结果页面的各个组成部分的样式时，您需要确保不会使用户的视线远离结果。以下是一些提示和技巧。
尽可能使用为人所熟知的颜色映射
例如，对于搜索结果，有这样一个惯例，即蓝色文本为可单击的结果标题，绿色文本为给定结果的 URL。抛开这个惯例会迫使用户更多地考虑所查看的内容。
图 4. 交换标题和 URL 的颜色会令用户感到困惑。应尽量按照符合为人所熟知的惯例的方式使用颜色。
尽可能少地使用颜色
颜色通常用于帮助突出某些重要内容，如所选的筛选器选项、结果标题或 URL。但是，使用多种颜色会让所有内容都尝试突出显示并竞相吸引用户的关注。最终导致的结果是，任何内容都未突出显示，因为这造成了绚丽的视觉混乱。
图 5. 不同的颜色过多会分散用户的注意力，导致难以确定浏览位置和重点内容。应限制在 UI 中使用的颜色的数目。
尽可能少地使用字样和字号
使用字体、字体大小和粗体/斜体的原因与使用颜色的原因类似 - 帮助突显某些重要元素。与使用颜色的情况一样，如果您使用过多的样式和字体，则将导致所有内容出现混乱。我们的产品团队通常将此情况称作“敲诈信”，页面看起来就像是由不同的杂志剪报拼凑而成的！
尽可能保持各种控件的简单外观
看一下图 6 中的“修改效果”(Modified) 标题下的日期筛选器直方图改进版。将这个改进版置于我们的默认页面上最初是存在风险的，因为它是一个外观复杂的控件，相对于基于文本的筛选器可能显得过于突兀。不过，我们将颜色与页面的其他部分的颜色保持了一致，同时保持了形状和线条的整洁简单。在添加任何自定义控件时一定要做与我们同样的工作。
我们还尝试对饼图筛选器进行了改进。不过，可以看一下图 6 中的这个改进版是如何分散注意力的。
图 6. 自定义饼图筛选器包含的颜色过多，并且与其他控件的视觉样式不匹配。这非常容易让人分心。
现在，看一下图 7，看看我们简化配色方案和形状之后会出现什么情况。
图 7. 这个饼图改进版通过使用 UI 中已用的颜色并与其他控件的视觉样式保持一致，从而使用户有足够的兴趣来立即探究其用途 - 不过，它不会让用户过于分心而偏离自己的任务
页面的概念性划分
在设计搜索体验时，您应考虑审美和概念上的细节。根据常见搜索惯例和我们自己的调查，我们已基于功能和用户交互模式将页面的组成部分划分为了不同的区域。当添加或重新排列组成部分时，最好是保持概念性的分区，以便用户不会在查找操作方法时失去方向。
例如，我们所有的筛选操作都在搜索结果页的左侧进行。当用户需要筛选其结果集时，他们总是知道查看这个位置。若要将一个新的筛选器添加到页面，最好是将其添加到其他筛选器的旁边，这样一来，用户无需在页面中搜寻即可找到该筛选器。
图 8 展示了默认搜索结果页的概念性分区的概况。
图 8. 搜索结果页被分为五个功能区。在自定义此页面时，应尽量将新元素添加到相应的功能区。
以上只是一些帮助您开始构建出色的搜索体验的指导信息。我期望您能发表评论和提问！
这是一篇本地化的博客文章。请访问 Designing a beautiful search experience – The basics 以查看原文