[组图]阿里输入框交互尝试、启发式评估及优化建议

·设计目的：1） 在不影响现有用户使用习惯的前提下，提升搜索输入流程的便利性；2） 在有限的空间内，增强首页搜索操作的历史回溯能力，减少老用户的搜索操作成本，提高他们的搜索效率；3） 对新用户的搜索引导更丰富，增加搜索的趣味性；·设计方案草稿：·主要流程1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图1.1）图1.12） 在图1.1页面状态下，当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数信息（如图1.2）；图1.23） 在图1.2状态下，在输入框的最后方显示“一键清空”图标，当用户点击此图标后，将清空所有输入信息，并收回下拉框，输入框内仅保留光标；（如图1.3）图1.34） 在没有任何输入的情况下，点击搜索框下方箭头按钮将有两种可能情况：①如果是全新用户，即没有任何搜索相关的行为记录，我们将弹出下拉框，给出我们的推荐热词列表（10条），并提示每条热词的搜索次数；（如图1.4）图1.4②如果用户有过任何的搜索行为记录，我们将弹出下拉框，给用户最近的10条搜索历史记录，不满10条的话显示全部，超过10条显示最近的10条，根据搜索时间顺序排列，显示最近一次搜索时间；（如图1.5）图1.55） 在弹出任何的下拉列表中，只要鼠标点选了其中的任何一条内容（也可以通过键盘光标移动+回车确认）后，就实现即时的搜索行为，引入搜索结果页面；·分支流程11） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图2.1）图2.12） 在图2.1页面状态下，如果鼠标点击输入框内部区域，则清空系统的输入提示信息，仍保留输入光标，处于待输入状态；（如图2.2）图2.23） 如果用户点击搜索框上方的Tab键，将实现切换搜索维度操作，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2.3）图2.34） 在输入框内已有输入信息的状态下，（如图2.4），点击Tab，实现切换搜索维度操作后，保留输入信息；（如图2.5）图2.4图2.5·分支流程21） 当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数量；（如图3.1）图3.12） 如果用户点击页面其他无操作空白区，取消关键词联想推荐的下拉框，但保留搜索框内的输入信息和一键清空图标；（如图3.2）图3.23） 在图3.2页面状态下，如果用户点击搜索框下方的箭头按钮，将根据用户属性对应弹出热词推荐或搜索历史记录下拉框（如图3.3）；此时点击下拉框内的任意条目，被选中词条将取代输入框内的词，引发搜索并进入搜索结果页面；图3.34） 在图3.3状态下，如果点击一键清空键，将清空输入框内信息，收回下拉框，仅光标在输入框内显示；（如图3.4）图3.45） 在图3.1的页面状态下，如果发生任何的输入性操作，包括删除部分现有信息（除输入框内信息为空的情况外）、追加输入等行为，均弹出联想推荐下拉框；（如图3.4）图3.4·启发式评估意见整理——主要争议点：1） 默认焦点：默认光标在输入框内，同时输入框内光标后有说明性文本，从用户习惯上讲没有先例，开发的可行性也需要评估；设计师评估：光标默认在输入框内的设计，符合目前主流搜索引擎的规范，说明性文本是用来指导新用户输入操作，其本身不存在歧义和误导，唯一需要考虑的是前端实现方面的可能及成本。所以我们暂定，在技术支持的前提下，保留设计。2） 一键删除：新增此功能的必要性存在争议，图标语义也不是很明晰，容易让用户产生“关闭联想词下拉框”的误解，进而发生误删输入内容的可能；设计师评估：综合评估了该功能的使用场景，确实觉得在首页上的相关场景不多，同时图标还存在误导用户、引发争议的可能，所以决定先在搜索list等页面的搜索框测试功能，等确认效果后才同步到首页；3） 下拉推荐：下拉触发区块物理尺寸偏小，用户不容易发现，同时点击式的触发的条件也增加了用户的发现、使用成本；设计师评估：从视觉上将确实有点小，但我们前期的设计出发点就是在不打扰现有正常流程的前提下，尝试给老用户和高端用户一些新的交互体验，所以我们仍然决定支持现有的图标尺寸和触发条件，等上线测试后再决定下阶段的优化方向。4） 共用区块：针对不同属性的用户，提供不同的推荐内容。同时从视觉上看，联想词下拉框也共用了此区块，只是在形式上略有差别。正是由于在公共区块存在不同反馈结果的可能，所以预计会对用户造成较高的理解、学习、使用成本；设计师评估：根据共用区块提供的三类参考信息的目的（匹配并提供最符合用户想法的输入词，帮助用户高效完成输入操作）来看，我们认为应该不会对用户的理解、使用造成太大的困惑，更不会造成用户的操作失败。但考虑到评估期间内的争议比较突出，我们决定先期采用历史记录和热词推荐合并显示的方案，上线测试后再决定下阶段的优化方向。·优化设计方案：·主要流程1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图1-1）图1-12） 在图1-1页面状态下，当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数信息（如图1-2）；图1-23） 在图1-1页面状态下，在没有任何输入的情况下，点击搜索框下方箭头按钮将有两种可能情况：①如果是全新用户，即没有任何搜索相关的行为记录，我们将弹出下拉框，给出推荐热词搜索（10条），提示每条热词的搜索次数，并说明搜索历史为“暂无”；（如图1-3）图1-3②如果用户有过搜索行为，我们将弹出下拉框，给出用户最近的搜索历史记录，不满7条的话显示全部，超过7条显示最近的7条，根据搜索时间顺序排列，同时根据实际显示搜索历史的条数，对应显示热词搜索的条数（历史+热词=10条）（如图1-4）图1-44） 在图1-3、1-4页面状态下，在弹出的下拉框中，用户点选了其中的任何一条内容（可以是通过鼠标或者键盘光标移动+回车进行选择）后，就实现即时的关键词搜索操作，引入搜索结果页面；·分支流程11） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图2-1）图2-12） 在图2-1页面状态下，如果鼠标点击输入框内部区域，则清空系统的输入提示信息，仍保留输入光标，处于待输入状态；（如图2-2）图2-23） 如果用户点击搜索框上方的Tab键，将实现切换搜索维度操作，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2-3）图2-34） 如果用户点击Tab项“更多”，将弹出下拉式选择框；（如图2-4）图2-45） 在页面2-4状态下，如果用户点击非触发的空白区域，即未选择下拉框中任意一个选项，将回复到最近的搜索维度；（如图2-5）图2-56） 在页面2-4状态下，如果用户选择下拉框中任意一个选项，将切换Tab到该搜索维度，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2-6）图2-67） 在页面2-6状态下，点击最后那个Tab项“博客”，将弹出下拉框，后续交互逻辑同页面2-4；（如图2-7）图 2-7·分支流程21） 当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数量；（如图3-1）图3-12） 如果用户点击页面其他无操作空白区，取消关键词联想推荐的下拉框，但保留搜索框内的输入信息；（如图3-2）图3-23） 在图3-2页面状态下，如果用户点击搜索框下方的箭头按钮，将弹出下拉框，显示搜索历史和热词搜索（如图3-3）；此时点选下拉框内的任意条目，被选中词条将取代输入框内的词，直接引发搜索行为并进入搜索结果页面；图3-34） 在图3-3页面状态下，如果点击弹出框下方箭头按钮，将收回下拉框，输入框内保留现有的输入信息；（如图3-4）图3-45） 在图3-4页面状态下，如果发生任何的输入性操作，包括删除部分现有信息（除输入框内信息为空的情况外）、追加输入等行为，均弹出联想推荐下拉框；（如图3-5）图3-5·分支流程31） 当输入框中没有任何输入信息时候，点击Tab，仅切换到对应的搜索维度；（如图4-1）图4-12） 当输入框中有任何信息时（如图4-2），点击非当前维度的Tab（比如点击“公司”项），直接引发对应维度下的搜索行为并进入搜索结果页面；图4-23） 在图4-1的各状态下，点击“搜索”按钮，将进入各模块对应的引导页面；（如图4-3、图4-4）图4-3图4-4[ 关键词：输入框　设计　原文/来源链接 ]                          >> 相关文章·交互设计模式：Spatial Memory(空间记忆)(4顶)·交互设计实用指南:“有效性”之“操作入口(2顶)·[北京]中关村在线招聘高级网页设计师(1顶)·阿里手机版List页图文排版案例(2顶)·[图示]白社会视觉设计诞生记(1顶)