国产午夜无码片在线观看网站,亚洲精品天堂成人片AV在线播放,亚洲天堂AV影院

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

Axure8.0教程：“百度一下，你就知道”搜索首頁原型設(shè)計

蝸牛PM

2015-11-20

2 評論 46054 瀏覽 153 收藏

12 分鐘

百度作為最大的中文搜索引擎，在某種程度上，有點學(xué)習(xí)google的簡約至上的原則，但是給人的感覺還是不夠徹底。今天，使用Axure 8.0花了一下午的時間基本重現(xiàn)了百度搜索主頁的原型。作為一個深信產(chǎn)品可以改變世界的小白來說，去細(xì)致的研究一個網(wǎng)頁時如何設(shè)計、如何實現(xiàn)交互的，會讓自己明白很多設(shè)計中的小細(xì)節(jié)。實現(xiàn)的交互、功能點如下：

未登錄的百度主頁：

交互效果：

右上角，當(dāng)鼠標(biāo)移入時，糯米、新聞、hao123、地圖、視頻、貼吧、登錄、設(shè)置的字體都會變成藍(lán)色，字體加粗；
點擊更多產(chǎn)品時，會彈出下拉的更多產(chǎn)品引薦；
點擊登錄時，會出現(xiàn)用戶登錄界面；
點擊設(shè)置時，會出現(xiàn)二級菜單，在選擇二級菜單選項時，字體顏色和背景顏色都會發(fā)生改變。

設(shè)計思想及簡單步驟：

使用背景覆蓋法和label部件重寫糯米、新聞、hao123、地圖、視頻、貼吧、登錄、設(shè)置，利用label的MouseOver這一功能實現(xiàn)鼠標(biāo)移入加粗和變色的效果；
點擊更多產(chǎn)品時，彈出二級菜單，鼠標(biāo)能夠進(jìn)入二級菜單，當(dāng)鼠標(biāo)移出二級菜單時，二級菜單收回。這在任何網(wǎng)頁，尤其是購物網(wǎng)站的導(dǎo)航中是很常見的。我們常使用的方法是將二級菜單做成動態(tài)面板，設(shè)置隱藏，然后顯示效果設(shè)置為treat as flyout。

（點擊圖片可放大，按F鍵查看原圖）

點擊登錄時，會出現(xiàn)登錄界面。在這里我要講一下Axture中的常用手法，點擊出現(xiàn)某一界面，就是將這一界面隱藏（hidden），然后使用某一觸發(fā)使其顯示(show)，至于show的過程的動態(tài)效果則可以根據(jù)具體情景設(shè)置。
點擊設(shè)置時，會出現(xiàn)二級菜單，在選擇二級菜單選項時，字體顏色和背景顏色都會發(fā)生改變。這個是這一部分最難點的地方。首先使用如上所講的treat as flyout實現(xiàn)二級菜單的顯示。然后，使用矩形框進(jìn)行對二級菜單選項進(jìn)行重寫，設(shè)置鼠標(biāo)移入時（MouseOver），背景顏色發(fā)生改變，字體發(fā)生改變。

（點擊圖片可放大，按F鍵查看原圖）

登錄界面：

交互效果：

用戶名和密碼，獲得焦點時輸入框會變成藍(lán)色，失去焦點時，變成灰色（這一點在注冊界面中，也會講解到，所以此處把這一功能省略）；
手機(jī)掃一掃登錄和用戶名密碼登陸互相切換；
點擊關(guān)閉，關(guān)閉登錄界面；
背景覆蓋法重新構(gòu)造復(fù)選框；
點擊立即注冊后，跳轉(zhuǎn)未登錄的用戶主頁，進(jìn)行登錄操作；
點擊登錄按鈕后，跳轉(zhuǎn)至登錄后的用戶主頁。

設(shè)計思想及簡單步驟：

手機(jī)掃一掃登錄和用戶名密碼登陸互相切換；在Axture中，不同頁面之間的切換使用的是在不同的條件下顯示動態(tài)面板的不同狀態(tài)。這一點很常用，要引起重視。點擊關(guān)閉按鈕，隱藏動態(tài)面板（hidden）。點擊注冊，跳轉(zhuǎn)至注冊頁面（open current link）。

（點擊圖片可放大，按F鍵查看原圖）

這里要重點講的是，點擊登錄后跳轉(zhuǎn)至用戶個性化界面。此時，我們可以注意到登錄的label標(biāo)簽已經(jīng)轉(zhuǎn)換為用戶名了。這里，我們就用到了全局變量。首先，設(shè)置全局變量。點擊項目（project）>全局變量（global variables）。設(shè)置全局變量為username。當(dāng)點擊注冊按鈕時，將用戶名文本框中的值傳遞給全局變量username，然后當(dāng)用戶個性化頁面載入時，將登錄label的文本值顯示為username。這一過程就是變量傳遞的過程。

（點擊圖片可放大，按F鍵查看原圖）

注冊頁面：

交互效果：

郵箱、密碼、驗證碼的設(shè)計：要分為這么幾種情況：沒有獲得焦點時的狀態(tài)；獲得焦點時的狀態(tài)、輸入錯誤、輸入正確；這每一個狀態(tài)下，所呈現(xiàn)出來的界面都是不一致的。
背景覆蓋法重新構(gòu)造復(fù)選框；
注冊按鈕：返回到主頁面進(jìn)行登錄操作。
點擊我已注冊，現(xiàn)在就登陸：彈出登錄對話框，登錄后跳轉(zhuǎn)至登錄后的用戶主頁。

設(shè)計思想及簡單步驟：

郵箱、密碼、驗證碼的設(shè)計：使用動態(tài)面板的不同狀態(tài)，在不同的條件下顯示不同的界面。那么要完成注冊環(huán)節(jié)，最終到達(dá)的界面應(yīng)該是<失去焦點正確>的界面。那么，這里就有涉及到了變量值的傳遞，但這里是局部變量。將任何界面中輸入的郵箱的跳轉(zhuǎn)至最終界面，那么其文本框中的值也要進(jìn)行傳遞。

1111

11111111

（點擊圖片可放大，按F鍵查看原圖）

注冊按鈕和我已注冊，點擊登錄的交互設(shè)計和上面所講的基本相同。

登錄后的百度個性化主頁：

交互效果：

設(shè)置、更多產(chǎn)品的交互設(shè)計與未登錄時的百度首頁是一樣的；
鼠標(biāo)移入用戶名時，會出現(xiàn)二級菜單，在選擇二級菜單選項時，字體顏色和背景顏色都會發(fā)生改變，點擊退出按鈕時，退出百度賬號；
左上角將鼠標(biāo)移入天氣時，會出現(xiàn)所在地區(qū)未來幾天的天氣情況；
工具欄：我的關(guān)注、推薦、導(dǎo)航、視頻、購物，選中某一項時，為粉色，顯示該項頁面；但是鼠標(biāo)移其余項時，則將其顯示為灰色；
當(dāng)鼠標(biāo)向下滑動時，在瀏覽器的上方會出現(xiàn)頂部搜索框；在瀏覽器的右下角會出現(xiàn)回到頂部的按鈕，一旦點擊右下角處的回到頂部按鈕時，網(wǎng)頁就會自動回到最頂端，按鈕隨之消失；
固定意見反饋按鈕到瀏覽器，點擊意見反饋按鈕時，出現(xiàn)意見反饋填寫對話框；該對話框也是固定在頁面的右下角；意見反饋對話框此處不再累贅，單擊右上角關(guān)閉按鈕即可將其關(guān)閉；
音樂電臺部分：點擊音樂電臺出現(xiàn)音樂播放器；當(dāng)單擊音樂播放器時的收回按鍵時，收回。

設(shè)計思想及簡單步驟：

工具欄的設(shè)計：利用矩形框覆蓋重寫我的關(guān)注、推薦、導(dǎo)航、視頻、購物，然后將其group。這是很關(guān)鍵的一部。group的作用就表明這五個部件已經(jīng)構(gòu)成了一個選項組，那么當(dāng)某一部件選中時，其余部件都是不選中?；谶@樣原則的基礎(chǔ)上個，設(shè)計MouseOver和Selected的交互效果。然后OnClick設(shè)計時，設(shè)計誰是被選中，誰是不被選中的。點擊工具欄的不同導(dǎo)航時，還會出現(xiàn)不同的點擊，顯示不同的頁面。呢么這又涉及到了動態(tài)面板的不同狀態(tài)的顯示的問題。此處不再累贅。這個建議Axtue初學(xué)者重點學(xué)習(xí)，因為這幾乎在每一個網(wǎng)頁中都會涉及到。

2015-11-20_11-26-16

（點擊圖片可放大，按F鍵查看原圖）

固定某一部件在瀏覽器的固定位置(Pin to browser)。這一功能是針對動態(tài)面板使用的。所以，要實現(xiàn)這樣的效果，必須將部件轉(zhuǎn)換成為動態(tài)面板。本案例中的回到頂部按鈕、提意見按鈕、意見反饋窗口、音樂電臺、音樂電臺播放器、頂部搜索框都是使用這樣的原理和設(shè)計實現(xiàn)的。
鼠標(biāo)向下移動時，出現(xiàn)頂部搜索框，按鈕顯示；點擊回到頂部按鈕時，回到頂部，按鈕消失。這一交互效果是本部分的重點。在Axture中，Window.scrollY函數(shù)指的是鼠標(biāo)向下移動的距離。我們可以設(shè)置邏輯條件，當(dāng)鼠標(biāo)向下移動一定的距離時，那么顯示頂部搜索框和回到頂部按鈕。如果鼠標(biāo)向下移動的距離太小，則將這些部件隱藏。至于，回到頂部按鈕的交互操作，我們需要借助頂部的一個輔助部件(hotspot)，一旦點擊按鈕，設(shè)置回滾操作。