案例來(lái)源：百度-搜索界面

案例效果：點(diǎn)擊搜索框后搜索框邊線變藍(lán)，下方顯示最近搜索記錄，如圖

案例描述：

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

元件準(zhǔn)備：

包含命名：

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

思路分析：

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

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

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

操作步驟：

1、設(shè)置元件“搜索輸入框”的選中時(shí)交互樣式為淡藍(lán)色邊框；

2、設(shè)置搜索文本框【獲取焦點(diǎn)時(shí)】，【選中】元件“搜索輸入框”；

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

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

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

思路分析：

點(diǎn)擊搜索框下方顯示出最近搜索歷史，可以通過(guò)動(dòng)態(tài)面板+交互來(lái)實(shí)現(xiàn)；

鼠標(biāo)單擊時(shí)，顯示動(dòng)態(tài)面板；

鼠標(biāo)移開時(shí)，隱藏動(dòng)態(tài)面板。

操作步驟：

1、設(shè)置動(dòng)態(tài)面板信息

• 拖進(jìn)一個(gè)動(dòng)態(tài)面板，調(diào)整大小

• 雙擊動(dòng)態(tài)面板，彈出動(dòng)態(tài)面板管理，設(shè)置名稱，雙擊命名好的“列表”，進(jìn)入動(dòng)態(tài)面板頁(yè)面

• 設(shè)置動(dòng)態(tài)面板列表信息

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

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

• 事件交互設(shè)置：鼠標(biāo)單擊時(shí)—元件——顯示/隱藏——顯示——搜索歷史——確定。

• 事件交互設(shè)置：鼠標(biāo)單擊時(shí)—元件——顯示/隱藏——隱藏——搜索歷史——確定。

至此，我們即完成了這么一個(gè)簡(jiǎn)單的百度搜索交互設(shè)計(jì)。

#專欄作家#

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

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