一次小改版的总结
这篇文章原本是用来准备在某培训机构试讲的，最终放弃了。
由于历史原因，PC版网站搜索结果页的导航栏存在搜索框长度过长、导航一级菜单间距过密和视觉流程不符合当前场景的问题，需要进行改版。
旧版导航栏：
搜索结果页用于展现用户在首页搜索及头部搜索功能键入关键词的查询结果。
在进入搜索结果页时，用户期待即将展现的搜索结果符合自己的预期，而是否符合预期需要看展现的结果如何即可。不符合预期的原因主要有两个：关键词不正确和找不到匹配的内容。这时就需要检查键入的关键词，以及对关键词进行修正。
因此，搜索框在此页面主要有两个用途：确认键入关键词的正确性和引导再次使用搜索功能。
举个例子，中文拼音输入法应用大多数都具有多个词组备选。例如输入fc，有可能出现“非常”“费茨”等词，我们希望搜索“费茨”，但因为手误，搜索的是“非常”，这时我们需要在搜索框确认关键词是“非常”还是“费茨”或其它，然后决定是否需要修正关键词并再度搜索以获取预期结果。
设计之前
设计并不是凭空想象就能捏造出来的。在对导航栏改版前，首先要了解改版的对象----导航拦。根据用户的使用目的，搜索栏可大致分为三组：logo、导航菜单组、搜索框组。
Logo和导航菜单组的使用目的这里就不展开叙述了。
搜索框组包含文本、输入框、清空按钮和搜索按钮。
logo
导航菜单
搜索框
本次的改版仅对以上三部分展开设计。
着手设计
通过前期对旧版导航栏分析和与需求方的沟通中，发现旧版导航栏存在搜索框过长和菜单选项间距过密的问题。
经过多次尝试，调整了菜单选项之间的边距，并对搜索框进行了视觉优化。
Logo、导航菜单组和搜索框组分别是不同的内容，在空间上应该保持一定的距离，因为根据亲密原则，空间上接近的内容，我们更容易将之归类到一组。
在设计过程中，应当时刻注意适当调整版面各视觉元素，以保持版面的平衡，平衡能让观者产生安稳舒适的感受。
反思
调整完成了，交稿下班咯~
慢着！这新版真的没问题了吗？
视觉流程符合当前场景吗？
什么鬼？！
前面谈到，用户进入当前页面的目的是为了看查询结果是否符合预期，如果不符合预期，将视情况做出是否需要调整关键词的决定，即是否需要到搜索框键入新关键词。
在综合前句分析与这三部分的使用目标进行分析后，不难得出搜索框比导航菜单有更高优先级的结论。根据优先级调整了导航栏的视觉流程：logo → 搜索框 → 导航菜单组，同时注意调整各组，保持版面的平衡。
视觉流程是指网站界面设计对于用户的视觉引导，信息的呈现和阅读的顺序。
在对视觉流程进行调整之后，需要明确调整后的视觉流程是否了符合受众阅读习惯和知觉心理吗？用户的学习成本高吗？
不如我们来看看相关的搜索结果页案例。
1.bing
左右布局，搜索框紧跟着logo，右侧放置登录入口及抽屉菜单，导航菜单放置在搜索框的下面。
2.搜狗
搜狗在布局上与bing一致。
3.百度
上下布局，搜索框紧跟logo，右侧放置登录入口，导航菜单单独一栏。
4.京东商城
上下布局，搜索框比较突出，居住显示，导航菜单单独一行。
5.网易严选
上下布局，搜索框紧跟logo居右对齐，导航菜单单独一行。
6.微博
双搜索框，主logo、全局搜索和导航菜单放置于顶部通栏。副logo与局部搜索放置在一起，搜索框比较明显。
通过以上案例，可以看到，搜索框大部分都是紧跟着logo，遵循logo → 搜索框 → 导航菜单（弱）的视觉流程，符合一般用户的阅读习惯。另外，这些案例都是进入行业较早，用户基数庞大的网站，经过多年持续的沉浸，用户已经对搜索结果页有较为固定的认知，所以用户对这样的搜索结果页排布学习成本较低。
因此，本次改版的视觉流程是符合受众的阅读习惯的，用户也易上手。
易用性走查
这里所述的易用性是指易于操作使用以完成任务流程。前面提到，用户进入搜索结果页的目的是为了获得预期的查询结果，因此用户希望花最短的时间看到搜索结果，所以此时的用户体验最好。
用户在快速阅读过程中，会自动过滤无关的信息，除非无关信息比较突出使得用户的注意力被分散，为了避免导航菜单过于突出，新版的导航菜单使用了常规字重的字体，并刻意与搜索框拉开较远的距离。在列举的案例里，大部分案例的导航菜单也做了适当的弱化处理。
如何才能有效缩短用户看到搜索结果的时间呢？我们先看看新版的搜索结果页视觉流程分析。
视觉流程是用户阅读信息的顺序，当用户目光从A点移到C点的距离最短时，所花的时间最短。根据费茨定律，当目标的大小一定时，距离越短，到达目标所花的时间越短。所以，此时用户可以花尽量短的时间看到搜索结果，即搜索结果列表。
总结
艺术是感性的，但设计是理性的。每一个设计方案都应该是缜密思考的结果，经得起推敲。
