案例來源：百度-搜索界面

案例效果：點擊搜索框后搜索框邊線變藍，下方顯示最近搜索記錄，如圖

案例描述：

在搜索界面中，包含頂部菜單欄、搜索欄和底部網站備案信息等。當焦點進入搜索框時，搜索框邊框變為藍色，同時下方顯示出最近搜索記錄；失去焦點時，恢復灰色，下方最近搜索記錄收起。

元件準備：

包含命名：

• 矩形（搜索框）：搜索輸入框
• 文本框（用于輸入文字）：文本框
• 矩形（搜索按鈕）：百度一下，按鈕

思路分析：

輸入框的樣式在兩種不同狀態下切換，可以通過交互樣式來實現；

文本框獲取焦點時，呈現選中的樣式；

文本框失去焦點時，呈現未選中的樣式。

操作步驟：

1、設置元件“搜索輸入框”的選中時交互樣式為淡藍色邊框；

2、設置搜索文本框【獲取焦點時】，【選中】元件“搜索輸入框”；

• 事件交互設置：獲取焦點——元件——設置選中——選中——配置動作（選擇搜索輸入框）——設置狀態值為true——確定

• 事件交互設置：失去焦點——元件——設置選中——取消選中——配置動作（選擇搜索輸入框）——設置狀態值為false——確定

至此，點擊搜索輸入框邊線變藍已經實現，接下來我們看如何讓下方顯示搜索歷史。

思路分析：

點擊搜索框下方顯示出最近搜索歷史，可以通過動態面板+交互來實現；

鼠標單擊時，顯示動態面板；

鼠標移開時，隱藏動態面板。

操作步驟：

1、設置動態面板信息

• 拖進一個動態面板，調整大小

• 雙擊動態面板，彈出動態面板管理，設置名稱，雙擊命名好的“列表”，進入動態面板頁面

• 設置動態面板列表信息

• 勾選隱藏動態面板

2、設置文本框單擊時交互事件，觸發顯示動態面板

• 事件交互設置：鼠標單擊時—元件——顯示/隱藏——顯示——搜索歷史——確定。

• 事件交互設置：鼠標單擊時—元件——顯示/隱藏——隱藏——搜索歷史——確定。

至此，我們即完成了這么一個簡單的百度搜索交互設計。

#專欄作家#

紫沐渲葉，人人都是產品經理專欄作家，一只有點小驕傲小文藝的產品菜鳥，喜歡倒騰產品和設計，看好O2O、教育和人工智能。

本文原創發布于人人都是產品經理，未經許可，不得轉載。