·設(shè)計(jì)目的：
1） 在不影響現(xiàn)有用戶使用習(xí)慣的前提下，提升搜索輸入流程的便利性；

2） 在有限的空間內(nèi)，增強(qiáng)首頁搜索操作的歷史回溯能力，減少老用戶的搜索操作成本，提高他們的搜索效率；

3） 對新用戶的搜索引導(dǎo)更豐富，增加搜索的趣味性；

·設(shè)計(jì)方案草稿：

·主要流程

1） 進(jìn)入頁面，光標(biāo)默認(rèn)放置在輸入框內(nèi)，支持用戶直接輸入操作。同時(shí)，光標(biāo)后跟隨當(dāng)前搜索維度下的輸入提示信息；（如圖1.1）

圖1.1

2） 在圖1.1頁面狀態(tài)下，當(dāng)用戶輸入任意關(guān)鍵詞后，在輸入框內(nèi)部，清空系統(tǒng)默認(rèn)的輸入提示信息，顯示當(dāng)前輸入內(nèi)容。同時(shí)，自動(dòng)向下彈出聯(lián)想詞推薦，并給出可能的搜索結(jié)果數(shù)信息（如圖1.2）；

圖1.2

3） 在圖1.2狀態(tài)下，在輸入框的最后方顯示“一鍵清空”圖標(biāo)，當(dāng)用戶點(diǎn)擊此圖標(biāo)后，將清空所有輸入信息，并收回下拉框，輸入框內(nèi)僅保留光標(biāo)；（如圖1.3）

圖1.3

4） 在沒有任何輸入的情況下，點(diǎn)擊搜索框下方箭頭按鈕將有兩種可能情況：①如果是全新用戶，即沒有任何搜索相關(guān)的行為記錄，我們將彈出下拉框，給出我們的推薦熱詞列表（10條），并提示每條熱詞的搜索次數(shù)；（如圖1.4）

圖1.4

②如果用戶有過任何的搜索行為記錄，我們將彈出下拉框，給用戶最近的10條搜索歷史記錄，不滿10條的話顯示全部，超過10條顯示最近的10條，根據(jù)搜索時(shí)間順序排列，顯示最近一次搜索時(shí)間；（如圖1.5）

圖1.5

5） 在彈出任何的下拉列表中，只要鼠標(biāo)點(diǎn)選了其中的任何一條內(nèi)容（也可以通過鍵盤光標(biāo)移動(dòng)+回車確認(rèn)）后，就實(shí)現(xiàn)即時(shí)的搜索行為，引入搜索結(jié)果頁面；

·分支流程1

1） 進(jìn)入頁面，光標(biāo)默認(rèn)放置在輸入框內(nèi)，支持用戶直接輸入操作。同時(shí)，光標(biāo)后跟隨當(dāng)前搜索維度下的輸入提示信息；（如圖2.1）

圖2.1

2） 在圖2.1頁面狀態(tài)下，如果鼠標(biāo)點(diǎn)擊輸入框內(nèi)部區(qū)域，則清空系統(tǒng)的輸入提示信息，仍保留輸入光標(biāo)，處于待輸入狀態(tài)；（如圖2.2）

圖2.2

3） 如果用戶點(diǎn)擊搜索框上方的Tab鍵，將實(shí)現(xiàn)切換搜索維度操作，光標(biāo)維持在輸入框內(nèi)，同時(shí)系統(tǒng)顯示當(dāng)前維度下的輸入提示信息；（如圖2.3）

圖2.3

4） 在輸入框內(nèi)已有輸入信息的狀態(tài)下，（如圖2.4），點(diǎn)擊Tab，實(shí)現(xiàn)切換搜索維度操作后，保留輸入信息；（如圖2.5）

圖2.4

圖2.5

·分支流程2

1） 當(dāng)用戶輸入任意關(guān)鍵詞后，在輸入框內(nèi)部，清空系統(tǒng)默認(rèn)的輸入提示信息，顯示當(dāng)前輸入內(nèi)容。同時(shí)，自動(dòng)向下彈出聯(lián)想詞推薦，并給出可能的搜索結(jié)果數(shù)量；（如圖3.1）

圖3.1

2） 如果用戶點(diǎn)擊頁面其他無操作空白區(qū)，取消關(guān)鍵詞聯(lián)想推薦的下拉框，但保留搜索框內(nèi)的輸入信息和一鍵清空圖標(biāo)；（如圖3.2）

圖3.2

3） 在圖3.2頁面狀態(tài)下，如果用戶點(diǎn)擊搜索框下方的箭頭按鈕，將根據(jù)用戶屬性對應(yīng)彈出熱詞推薦或搜索歷史記錄下拉框（如圖3.3）；此時(shí)點(diǎn)擊下拉框內(nèi)的任意條目，被選中詞條將取代輸入框內(nèi)的詞，引發(fā)搜索并進(jìn)入搜索結(jié)果頁面；

圖3.3

4） 在圖3.3狀態(tài)下，如果點(diǎn)擊一鍵清空鍵，將清空輸入框內(nèi)信息，收回下拉框，僅光標(biāo)在輸入框內(nèi)顯示；（如圖3.4）

圖3.4

5） 在圖3.1的頁面狀態(tài)下，如果發(fā)生任何的輸入性操作，包括刪除部分現(xiàn)有信息（除輸入框內(nèi)信息為空的情況外）、追加輸入等行為，均彈出聯(lián)想推薦下拉框；（如圖3.4）

圖3.4

·啟發(fā)式評估意見整理——主要爭議點(diǎn)：
1） 默認(rèn)焦點(diǎn)：默認(rèn)光標(biāo)在輸入框內(nèi)，同時(shí)輸入框內(nèi)光標(biāo)后有說明性文本，從用戶習(xí)慣上講沒有先例，開發(fā)的可行性也需要評估；

設(shè)計(jì)師評估：光標(biāo)默認(rèn)在輸入框內(nèi)的設(shè)計(jì)，符合目前主流搜索引擎的規(guī)范，說明性文本是用來指導(dǎo)新用戶輸入操作，其本身不存在歧義和誤導(dǎo)，唯一需要考慮的是前端實(shí)現(xiàn)方面的可能及成本。所以我們暫定，在技術(shù)支持的前提下，保留設(shè)計(jì)。

2） 一鍵刪除：新增此功能的必要性存在爭議，圖標(biāo)語義也不是很明晰，容易讓用戶產(chǎn)生“關(guān)閉聯(lián)想詞下拉框”的誤解，進(jìn)而發(fā)生誤刪輸入內(nèi)容的可能；

設(shè)計(jì)師評估：綜合評估了該功能的使用場景，確實(shí)覺得在首頁上的相關(guān)場景不多，同時(shí)圖標(biāo)還存在誤導(dǎo)用戶、引發(fā)爭議的可能，所以決定先在搜索list等頁面的搜索框測試功能，等確認(rèn)效果后才同步到首頁；

3） 下拉推薦：下拉觸發(fā)區(qū)塊物理尺寸偏小，用戶不容易發(fā)現(xiàn)，同時(shí)點(diǎn)擊式的觸發(fā)的條件也增加了用戶的發(fā)現(xiàn)、使用成本；

設(shè)計(jì)師評估：從視覺上將確實(shí)有點(diǎn)小，但我們前期的設(shè)計(jì)出發(fā)點(diǎn)就是在不打擾現(xiàn)有正常流程的前提下，嘗試給老用戶和高端用戶一些新的交互體驗(yàn)，所以我們?nèi)匀粵Q定支持現(xiàn)有的圖標(biāo)尺寸和觸發(fā)條件，等上線測試后再?zèng)Q定下階段的優(yōu)化方向。

4） 共用區(qū)塊：針對不同屬性的用戶，提供不同的推薦內(nèi)容。同時(shí)從視覺上看，聯(lián)想詞下拉框也共用了此區(qū)塊，只是在形式上略有差別。正是由于在公共區(qū)塊存在不同反饋結(jié)果的可能，所以預(yù)計(jì)會(huì)對用戶造成較高的理解、學(xué)習(xí)、使用成本；

設(shè)計(jì)師評估：根據(jù)共用區(qū)塊提供的三類參考信息的目的（匹配并提供最符合用戶想法的輸入詞，幫助用戶高效完成輸入操作）來看，我們認(rèn)為應(yīng)該不會(huì)對用戶的理解、使用造成太大的困惑，更不會(huì)造成用戶的操作失敗。但考慮到評估期間內(nèi)的爭議比較突出，我們決定先期采用歷史記錄和熱詞推薦合并顯示的方案，上線測試后再?zèng)Q定下階段的優(yōu)化方向。

·優(yōu)化設(shè)計(jì)方案：

·主要流程

1） 進(jìn)入頁面，光標(biāo)默認(rèn)放置在輸入框內(nèi)，支持用戶直接輸入操作。同時(shí)，光標(biāo)后跟隨當(dāng)前搜索維度下的輸入提示信息；（如圖1-1）

圖1-1

2） 在圖1-1頁面狀態(tài)下，當(dāng)用戶輸入任意關(guān)鍵詞后，在輸入框內(nèi)部，清空系統(tǒng)默認(rèn)的輸入提示信息，顯示當(dāng)前輸入內(nèi)容。同時(shí)，自動(dòng)向下彈出聯(lián)想詞推薦，并給出可能的搜索結(jié)果數(shù)信息（如圖1-2）；

圖1-2

3） 在圖1-1頁面狀態(tài)下，在沒有任何輸入的情況下，點(diǎn)擊搜索框下方箭頭按鈕將有兩種可能情況：

①如果是全新用戶，即沒有任何搜索相關(guān)的行為記錄，我們將彈出下拉框，給出推薦熱詞搜索（10條），提示每條熱詞的搜索次數(shù)，并說明搜索歷史為“暫無”；（如圖1-3）

圖1-3

②如果用戶有過搜索行為，我們將彈出下拉框，給出用戶最近的搜索歷史記錄，不滿7條的話顯示全部，超過7條顯示最近的7條，根據(jù)搜索時(shí)間順序排列，同時(shí)根據(jù)實(shí)際顯示搜索歷史的條數(shù)，對應(yīng)顯示熱詞搜索的條數(shù)（歷史+熱詞=10條）（如圖1-4）

圖1-4

4） 在圖1-3、1-4頁面狀態(tài)下，在彈出的下拉框中，用戶點(diǎn)選了其中的任何一條內(nèi)容（可以是通過鼠標(biāo)或者鍵盤光標(biāo)移動(dòng)+回車進(jìn)行選擇）后，就實(shí)現(xiàn)即時(shí)的關(guān)鍵詞搜索操作，引入搜索結(jié)果頁面；

·分支流程1

1） 進(jìn)入頁面，光標(biāo)默認(rèn)放置在輸入框內(nèi)，支持用戶直接輸入操作。同時(shí)，光標(biāo)后跟隨當(dāng)前搜索維度下的輸入提示信息；（如圖2-1）

圖2-1

2） 在圖2-1頁面狀態(tài)下，如果鼠標(biāo)點(diǎn)擊輸入框內(nèi)部區(qū)域，則清空系統(tǒng)的輸入提示信息，仍保留輸入光標(biāo)，處于待輸入狀態(tài)；（如圖2-2）

圖2-2

3） 如果用戶點(diǎn)擊搜索框上方的Tab鍵，將實(shí)現(xiàn)切換搜索維度操作，光標(biāo)維持在輸入框內(nèi)，同時(shí)系統(tǒng)顯示當(dāng)前維度下的輸入提示信息；（如圖2-3）

圖2-3

4） 如果用戶點(diǎn)擊Tab項(xiàng)“更多”，將彈出下拉式選擇框；（如圖2-4）

圖2-4

5） 在頁面2-4狀態(tài)下，如果用戶點(diǎn)擊非觸發(fā)的空白區(qū)域，即未選擇下拉框中任意一個(gè)選項(xiàng)，將回復(fù)到最近的搜索維度；（如圖2-5）

圖2-5

6） 在頁面2-4狀態(tài)下，如果用戶選擇下拉框中任意一個(gè)選項(xiàng)，將切換Tab到該搜索維度，光標(biāo)維持在輸入框內(nèi)，同時(shí)系統(tǒng)顯示當(dāng)前維度下的輸入提示信息；（如圖2-6）

圖2-6

7） 在頁面2-6狀態(tài)下，點(diǎn)擊最后那個(gè)Tab項(xiàng)“博客”，將彈出下拉框，后續(xù)交互邏輯同頁面2-4；（如圖2-7）

圖 2-7

·分支流程2

1） 當(dāng)用戶輸入任意關(guān)鍵詞后，在輸入框內(nèi)部，清空系統(tǒng)默認(rèn)的輸入提示信息，顯示當(dāng)前輸入內(nèi)容。同時(shí)，自動(dòng)向下彈出聯(lián)想詞推薦，并給出可能的搜索結(jié)果數(shù)量；（如圖3-1）

圖3-1

2） 如果用戶點(diǎn)擊頁面其他無操作空白區(qū)，取消關(guān)鍵詞聯(lián)想推薦的下拉框，但保留搜索框內(nèi)的輸入信息；（如圖3-2）

圖3-2

3） 在圖3-2頁面狀態(tài)下，如果用戶點(diǎn)擊搜索框下方的箭頭按鈕，將彈出下拉框，顯示搜索歷史和熱詞搜索（如圖3-3）；此時(shí)點(diǎn)選下拉框內(nèi)的任意條目，被選中詞條將取代輸入框內(nèi)的詞，直接引發(fā)搜索行為并進(jìn)入搜索結(jié)果頁面；

圖3-3

4） 在圖3-3頁面狀態(tài)下，如果點(diǎn)擊彈出框下方箭頭按鈕，將收回下拉框，輸入框內(nèi)保留現(xiàn)有的輸入信息；（如圖3-4）

圖3-4

5） 在圖3-4頁面狀態(tài)下，如果發(fā)生任何的輸入性操作，包括刪除部分現(xiàn)有信息（除輸入框內(nèi)信息為空的情況外）、追加輸入等行為，均彈出聯(lián)想推薦下拉框；（如圖3-5）

圖3-5

·分支流程3

1） 當(dāng)輸入框中沒有任何輸入信息時(shí)候，點(diǎn)擊Tab，僅切換到對應(yīng)的搜索維度；（如圖4-1）

圖4-1

2） 當(dāng)輸入框中有任何信息時(shí)（如圖4-2），點(diǎn)擊非當(dāng)前維度的Tab（比如點(diǎn)擊“公司”項(xiàng)），直接引發(fā)對應(yīng)維度下的搜索行為并進(jìn)入搜索結(jié)果頁面；

圖4-2

3） 在圖4-1的各狀態(tài)下，點(diǎn)擊“搜索”按鈕，將進(jìn)入各模塊對應(yīng)的引導(dǎo)頁面；（如圖4-3、圖4-4）

圖4-3

圖4-4

http://zhuhequn.aliued.cn/