・设计目的：

1） 在不影响现有用户使用习惯的前提下，提升搜索输入流程的便利性；

2） 在有限的空间内，增强首页搜索操作的历史回溯能力，减少老用户的搜索操作成本，提高他们的搜索效率；

3） 对新用户的搜索引导更丰富，增加搜索的趣味性；

・设计方案草稿：

・主要流程

1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图1.1）

图1.1

2） 在图1.1页面状态下，当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数信息（如图1.2）；

图1.2

3） 在图1.2状态下，在输入框的最后方显示“一键清空”图标，当用户点击此图标后，将清空所有输入信息，并收回下拉框，输入框内仅保留光标；（如图1.3）

图1.3

4） 在没有任何输入的情况下，点击搜索框下方箭头按钮将有两种可能情况：①如果是全新用户，即没有任何搜索相关的行为记录，我们将弹出下拉框，给出我们的推荐热词列表（10条），并提示每条热词的搜索次数；（如图1.4）

图1.4

②如果用户有过任何的搜索行为记录，我们将弹出下拉框，给用户最近的10条搜索历史记录，不满10条的话显示全部，超过10条显示最近的10条，根据搜索时间顺序排列，显示最近一次搜索时间；（如图1.5）

图1.5

5） 在弹出任何的下拉列表中，只要鼠标点选了其中的任何一条内容（也可以通过键盘光标移动+回车确认）后，就实现即时的搜索行为，引入搜索结果页面；

・分支流程1

1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图2.1）

图2.1

2） 在图2.1页面状态下，如果鼠标点击输入框内部区域，则清空系统的输入提示信息，仍保留输入光标，处于待输入状态；（如图2.2）

图2.2

3） 如果用户点击搜索框上方的Tab键，将实现切换搜索维度操作，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2.3）

图2.3

4） 在输入框内已有输入信息的状态下，（如图2.4），点击Tab，实现切换搜索维度操作后，保留输入信息；（如图2.5）

图2.4

图2.5

・分支流程2

1） 当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数量；（如图3.1）

图3.1

2） 如果用户点击页面其他无操作空白区，取消关键词联想推荐的下拉框，但保留搜索框内的输入信息和一键清空图标；（如图3.2）

图3.2

3） 在图3.2页面状态下，如果用户点击搜索框下方的箭头按钮，将根据用户属性对应弹出热词推荐或搜索历史记录下拉框（如图3.3）；此时点击下拉框内的任意条目，被选中词条将取代输入框内的词，引发搜索并进入搜索结果页面；

图3.3

4） 在图3.3状态下，如果点击一键清空键，将清空输入框内信息，收回下拉框，仅光标在输入框内显示；（如图3.4）

图3.4

5） 在图3.1的页面状态下，如果发生任何的输入性操作，包括删除部分现有信息（除输入框内信息为空的情况外）、追加输入等行为，均弹出联想推荐下拉框；（如图3.4）

图3.4

・启发式评估意见整理――主要争议点：

1） 默认焦点：默认光标在输入框内，同时输入框内光标后有说明性文本，从用户习惯上讲没有先例，开发的可行性也需要评估；

设计师评估：光标默认在输入框内的设计，符合目前主流搜索引擎的规范，说明性文本是用来指导新用户输入操作，其本身不存在歧义和误导，唯一需要考虑的是前端实现方面的可能及成本。所以我们暂定，在技术支持的前提下，保留设计。

2） 一键删除：新增此功能的必要性存在争议，图标语义也不是很明晰，容易让用户产生“关闭联想词下拉框”的误解，进而发生误删输入内容的可能；

设计师评估：综合评估了该功能的使用场景，确实觉得在首页上的相关场景不多，同时图标还存在误导用户、引发争议的可能，所以决定先在搜索list等页面的搜索框测试功能，等确认效果后才同步到首页；

3） 下拉推荐：下拉触发区块物理尺寸偏小，用户不容易发现，同时点击式的触发的条件也增加了用户的发现、使用成本；

设计师评估：从视觉上将确实有点小，但我们前期的设计出发点就是在不打扰现有正常流程的前提下，尝试给老用户和高端用户一些新的交互体验，所以我们仍然决定支持现有的图标尺寸和触发条件，等上线测试后再决定下阶段的优化方向。

4） 共用区块：针对不同属性的用户，提供不同的推荐内容。同时从视觉上看，联想词下拉框也共用了此区块，只是在形式上略有差别。正是由于在公共区块存在不同反馈结果的可能，所以预计会对用户造成较高的理解、学习、使用成本；

设计师评估：根据共用区块提供的三类参考信息的目的（匹配并提供最符合用户想法的输入词，帮助用户高效完成输入操作）来看，我们认为应该不会对用户的理解、使用造成太大的困惑，更不会造成用户的操作失败。但考虑到评估期间内的争议比较突出，我们决定先期采用历史记录和热词推荐合并显示的方案，上线测试后再决定下阶段的优化方向。

・优化设计方案：

・主要流程

1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图1-1）

图1-1

2） 在图1-1页面状态下，当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数信息（如图1-2）；

图1-2

3） 在图1-1页面状态下，在没有任何输入的情况下，点击搜索框下方箭头按钮将有两种可能情况：

①如果是全新用户，即没有任何搜索相关的行为记录，我们将弹出下拉框，给出推荐热词搜索（10条），提示每条热词的搜索次数，并说明搜索历史为“暂无”；（如图1-3）

图1-3

②如果用户有过搜索行为，我们将弹出下拉框，给出用户最近的搜索历史记录，不满7条的话显示全部，超过7条显示最近的7条，根据搜索时间顺序排列，同时根据实际显示搜索历史的条数，对应显示热词搜索的条数（历史+热词=10条）（如图1-4）

图1-4

4） 在图1-3、1-4页面状态下，在弹出的下拉框中，用户点选了其中的任何一条内容（可以是通过鼠标或者键盘光标移动+回车进行选择）后，就实现即时的关键词搜索操作，引入搜索结果页面；

・分支流程1

1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图2-1）

图2-1

2） 在图2-1页面状态下，如果鼠标点击输入框内部区域，则清空系统的输入提示信息，仍保留输入光标，处于待输入状态；（如图2-2）

图2-2

3） 如果用户点击搜索框上方的Tab键，将实现切换搜索维度操作，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2-3）

图2-3

4） 如果用户点击Tab项“更多”，将弹出下拉式选择框；（如图2-4）

图2-4

5） 在页面2-4状态下，如果用户点击非触发的空白区域，即未选择下拉框中任意一个选项，将回复到最近的搜索维度；（如图2-5）

图2-5

6） 在页面2-4状态下，如果用户选择下拉框中任意一个选项，将切换Tab到该搜索维度，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2-6）

图2-6

7） 在页面2-6状态下，点击最后那个Tab项“博客”，将弹出下拉框，后续交互逻辑同页面2-4；（如图2-7）

图 2-7

・分支流程2

1） 当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数量；（如图3-1）

图3-1

2） 如果用户点击页面其他无操作空白区，取消关键词联想推荐的下拉框，但保留搜索框内的输入信息；（如图3-2）

图3-2

3） 在图3-2页面状态下，如果用户点击搜索框下方的箭头按钮，将弹出下拉框，显示搜索历史和热词搜索（如图3-3）；此时点选下拉框内的任意条目，被选中词条将取代输入框内的词，直接引发搜索行为并进入搜索结果页面；

图3-3

4） 在图3-3页面状态下，如果点击弹出框下方箭头按钮，将收回下拉框，输入框内保留现有的输入信息；（如图3-4）

图3-4

5） 在图3-4页面状态下，如果发生任何的输入性操作，包括删除部分现有信息（除输入框内信息为空的情况外）、追加输入等行为，均弹出联想推荐下拉框；（如图3-5）

图3-5

・分支流程3

1） 当输入框中没有任何输入信息时候，点击Tab，仅切换到对应的搜索维度；（如图4-1）

图4-1

2） 当输入框中有任何信息时（如图4-2），点击非当前维度的Tab（比如点击“公司”项），直接引发对应维度下的搜索行为并进入搜索结果页面；

图4-2

3） 在图4-1的各状态下，点击“搜索”按钮，将进入各模块对应的引导页面；（如图4-3、图4-4）

图4-3

图4-4

建议继续学习：

1. 输入框的大小    (阅读：3336)
2. 模拟宽度自适应的输入框    (阅读：2181)