本文主要給大家講解知乎 PC 端頂部欄的交互原型制作，一起來文中看看~

先來看一下知乎頂部欄是怎樣的，看圖：

下面開始制作我們的原型 ~

一、準(zhǔn)備元件

（1）打開 Axure 新建一個文件，在你要制作的頁面里面點(diǎn)擊右側(cè)的樣式 – 頁面排列方式（修改為居中）- 背景顏色為 #F2F2F2 ，如圖：

（2）然后我們在界面中拖進(jìn)一個矩形，w 為 1000 px ，h 為 50 px ，色值為 #FFFFFF ；

（3）然后拖進(jìn)三個文本，分類輸入：“首頁 ” 、“發(fā)現(xiàn) ” 、“話題” ；

（4）拖進(jìn)一個矩形，w 為 320 px ，h 為 34 px ，色值為 #FFFFFF ，邊框顏色為 #E2E2E2 ，邊框圓角為 2 px ，命名為：“輸入框背景”；

（5）然后再拖進(jìn)一個文本輸入框，長度、寬度需要比 “輸入框背景” 小一點(diǎn)，這里我們設(shè)置 w 為 300 px，h 為 32 px ，右鍵隱藏邊框 ，命名為：“輸入框” ，然后把它放在 “輸入框背景” 之中 ；

（6）在組件庫中選擇一個搜索 icon 放進(jìn)輸入框里面，這里我們給它設(shè)置 w 、h 均為 16 px ；

（7）最后一步，我們到阿里巴巴矢量圖標(biāo)庫 中，搜索以下圖片（ 不用一模一樣，能表達(dá)意思即可 ）。

小知識點(diǎn)：

在阿里巴巴矢量圖標(biāo)庫 中，我們選擇圖片點(diǎn)擊下載時，可以選擇 .svg 格式的圖片，這是可以不用管色值什么的，因?yàn)槲覀儼?.svg 格式的圖片拖進(jìn) Axure 后，在屬性里面，會看到圖片下面會有一句 “ 轉(zhuǎn)換SVG圖片為形狀 ” ，轉(zhuǎn)換之后就可以隨意編輯了。

看圖：

完成以上的所有操作后，我們可以得到以下效果：

各位小伙伴完成以上效果之后，就可以開始做下一步了 ~

二、設(shè)置交互樣式

（1）點(diǎn)擊 “首頁” 、“發(fā)現(xiàn)” 、“話題” ，右鍵點(diǎn)擊設(shè)置選項(xiàng)組名稱 – 命名（ 這里隨意命名即可 ），然后繼續(xù)右鍵點(diǎn)擊交互樣式 – 選中 – 字體顏色為 #333333?，最后一步把 “ 首頁 ” 設(shè)置為默認(rèn)選中狀態(tài) ；

（2）全選右側(cè)三個圖標(biāo)，右鍵點(diǎn)擊交互樣式 – 鼠標(biāo)懸停 – 填充顏色為 #333333 。

需要設(shè)置樣式的地方不多，小伙伴們做完就可以繼續(xù)下一步了 ~

三、設(shè)置交互用例

（1）給 “首頁” 、“發(fā)現(xiàn)” 、“話題” 都添加用例，設(shè)置順序?yàn)椋菏髽?biāo)單擊時 – 選中 – This – true ；

實(shí)現(xiàn)了第一步，標(biāo)題的切換就做好了 ~

（2）全選 “輸入框背景” 、“輸入框” 、“搜索 icon” 、“提問按鈕” ，右鍵點(diǎn)擊轉(zhuǎn)換為動態(tài)面板，設(shè)置該動態(tài)面板添加用戶鼠標(biāo)單擊時 – 隱藏 “提問按鈕” – 設(shè)置尺寸 “輸入框背景” 為400 × 34 ，“輸入框” 為 380 × 32 ，動畫均為：線性，500毫秒。設(shè)置移動 “搜索 icon” 移動到 x 為 374 ，y 為 9 。

完成了以上設(shè)置，就實(shí)現(xiàn)了點(diǎn)擊輸入框的效果，看圖：

設(shè)置完鼠標(biāo)單擊時的效果，然后我們再來添加它在失去焦點(diǎn)時的設(shè)置，下面就不一一描述了（ 太多文字你們也不愛看 ），請看圖 ~

展示一下效果 ~

這樣我的整一個頂部欄的大致效果就都做好了，完成的小伙伴可以先回顧一下自己做的東西，消化一下。然后下面來講講進(jìn)階的東西 ~

四、進(jìn)階

（1）我們在輸入框的下面給他新增一個“ 熱搜 ” ，即點(diǎn)擊輸入框時，輸入框下方顯示一個熱搜出來，失去焦點(diǎn)時則隱藏，只需要在原有的設(shè)置上加一個顯示隱藏的設(shè)置即可。

看圖：

看效果：

（2）我們把整一個白色的矩形背景給它右鍵點(diǎn)擊轉(zhuǎn)換為動態(tài)面板，右鍵點(diǎn)擊 “100%寬度” 。然后把該動態(tài)面板里面的界面背景調(diào)整跟矩形背景一樣的顏色（ #FFFFFF ）即可，看圖：

（3）然后我們就完成了所有制作了，來看看最終效果：

文件百度云鏈接：https://pan.baidu.com/s/1GPkg-QKluWJQoqOOc_yDRA 密碼:6zht

以上就是本次 Axure 教程的所有內(nèi)容，希望這些內(nèi)容可以幫助到大家，謝謝 ~

本文由 @?李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議