作者：xinxiandong

出处：http://www.jianshu.com/p/5d4a02f95d90

本文采用以下协议进行授权：自由转载-非商用-非衍生-保持署名|Creative Commons BY-NC-ND 3.0，转载请注明作者及出处。

一、需求背景

       目前360手机助手仅有全站的搜索功能，而【应用圈】页面中未包含搜索功能，用户无法搜索和获取【应用圈】内部的App。【应用圈】内部的App相比较全站的应用更加优质和专业，用户筛选的结果价值更大。

360手机助手体验版本号：3.4.40;

功能流程图

二、文档详情

（一）搜索入口

1.搜索图标的展示位置（图1-1），在页面的右上角：

�

图1-1首页搜索入口

1)用户点击“搜索”按钮后，向左侧滑出搜索页面（图1-2）；

2)在“订阅“和”发现“两个栏目下都可使用搜索功能，入口相同。

2.搜索页面详细设计（图1-2）：

图1-2搜索页

图1-3搜索框的“X“按钮

1)顶部搜索框部分：

—返回按钮：点击按钮后返回应用圈首页；

—搜索框：

a)默认提示语：请输入名称、关键字；

b)输入文字后右侧出现“X“（图1-3），点击”X“按钮后清空输入框文字，同时”X“按钮消失；

c)用户输入文字时，不引导用户输入相似关键词；不限制用户输入字长；

—“搜索“按钮：

a)只有一个状态，任何情况下均可点击，点击搜索按钮开始搜索；

b)当用户未填写任何关键字点击搜索按钮时，页面底部Toast提醒用户：请输入搜索关键字

图1-4 Toast提示用户输入搜索关键字

c)用户显示搜索结果后，再次点击搜索按钮时如果此时没有修改输入框的内容，则在当前页面进行刷新，获取的数据一致。不必每次都从服务器拉取信息，直接调取缓存中的数据，但是本页面内有刷新动作。

2)中部推荐热门搜索：

a)搜索共有4排4列共计16个热门搜索的标签；

b)标签的来源为用户搜索的关键词搜索次数的排序，手助运营负责维护和优化关键词；运营同学负责根据用户提交的搜索内容进行优化和提炼，累计最多的显示在客户端；

c)用户点击热门搜索的标签时，则以该标签作为索引的关键词进行检索。检索的结果展示为图2-1，用户可以直接查看和点击详细应用介绍。

3)底部搜索历史记录：

a)这一部分是搜索历史记录的列表，包含一个“历史“的按钮+搜索内容；

b)排序顺序是按照时间倒序排列，即时间越在后面排列越靠前；

c)如果没有历史记录则不显示此部分，标题“历史记录“部分也同时隐藏；

d)用户点击“历史记录”中的列表项，则以该关键词为检索关键词，展示列表结果。

e)点击“清空历史记录“，弹框提示用户：

图1-5 弹框提示用户

图1-6 Toast提示用户“搜索历史已清空”

i.文案：温馨提示 是否删除所有搜索历史？取消 确认

ii.点击“取消“按钮，不做任何处理，关闭弹窗，保持原页面状态不变；

点击“确定“按钮，两个步骤：1）删除用户的搜索历史，隐藏”历史搜索“标题，2）Toast提示用”搜索历史已清空“。

(二)搜索结果页设计

1.用户输入关键词未搜索到相关应用，则提示用户：未搜索到相关应用，请更换关键词搜索

图2-1未搜索到结果

1)用户可以继续输入，点击“X”按钮清除输入；

2)也可以点击热门搜索和历史记录的选项，则以该关键词作为检索依据，在本页面内显示搜索结果；

3)用户不修改输入框的内容，点击“搜索”按钮时，此时不更新当前页面，内容保持不变，同样还是提醒用户：未搜索到相关应用，请更换关键词搜索

2.用户输入关键词并点击搜索到结果后出现结果页如图2-2所示：

图2-2搜索展示页�

图2-3点击“更多“应用列表页

a)搜索展示页包含内容分为两部分：订阅栏+发现栏，对应“应用圈“首页的两部分，列表项的内容为各栏目中的应用；

b)用户对当前搜索结果不满意时可以继续搜索，点击“X”按钮清空输入框内容；输入其他关键词后重新进行检索新输入的关键词；

c)列表 标题项：图标+栏目名称，右侧为“更多>“按钮;内容为订阅栏、发现栏；

d)列表项 详解：

i.列表数目为三个（数目可根据设计稿进行修改，3-5个），以浏览次数为排列依据，取浏览次数前三位的应用，下拉时，右侧应有进度条提示用户下滑的进度；

ii.应用列表项包含应用logo（正方形）+应用名称+应用简介(少于25字)；

       应用简介这一步的内容应为手助运营同学优化内容，但是目前有很多应用和游戏直接提取了文章的前几十个字，这样的体验并不是很好。所以这一部分内容，个人建议手助运营同学手动调整一下，字数控制在10-20之间为最佳；

iii.用户的可点击区域为图中灰色部分，用户点击灰色部分即可进入应用的详细介绍页面。

e)点击“更多”按钮后显示应用的列表，这一部分为了保持与前面的一致性，保留了搜索框，用户同样可以在这个页面进行搜索。

i.应用列表项包含应用logo（正方形）+应用名称+应用简介(少于25字)，与上一页保持一致；

ii.用户点击“返回”时，返回上一级的搜索结果页；

iii.用户上滑时，右侧出现滚动条，提示用户列表项的查看进度。

f)点击应用详情页的“返回”按钮，如果来源为图2-1“搜索展示页”，则返回该页面；如果来源为图2-4应用列表页，则返回该页面；如果来源为应用圈的首页，则返回应用圈首页。

图2-4 应用详情页

后记：

写这篇文章的目的有三：

1、一个月的培训让自己感觉到了自己薄弱跟不足的地方，我也在努力弥补这些不足，希望能够每周抽出时间来认认真真对待产品这件事；

2、做事情不够集中精神，喜欢拖延，喜欢乱想。与其耽误时间做一些不切实际的事情，不如静下心来去做好手头的事情；

3、我也相信自己可以写好产品文档的，虽然这篇文档中还有一些问题，我希望把它们都记录下来，有一天我也能够回头来看自己的成长和进步。最害怕的不是你有多弱，而是安逸到你认为你足够优秀。感谢这一个月的飞扬培训，让我想到、思考了很多事情。