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

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

案例描述：

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

元件準備：

包含命名：

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

思路分析：

輸入框的樣式在兩種不同狀態(tài)下切換，可以通過交互樣式來實現(xiàn)；

文本框獲取焦點時，呈現(xiàn)選中的樣式；

文本框失去焦點時，呈現(xiàn)未選中的樣式。

操作步驟：

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

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

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

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

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

思路分析：

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

鼠標單擊時，顯示動態(tài)面板；

鼠標移開時，隱藏動態(tài)面板。

操作步驟：

1、設置動態(tài)面板信息

• 拖進一個動態(tài)面板，調(diào)整大小

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

• 設置動態(tài)面板列表信息

• 勾選隱藏動態(tài)面板

2、設置文本框單擊時交互事件，觸發(fā)顯示動態(tài)面板

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

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

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

#專欄作家#

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

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。