国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

未登錄的百度主頁(yè)：

交互效果：

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

設(shè)計(jì)思想及簡(jiǎn)單步驟：

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

（點(diǎn)擊圖片可放大，按F鍵查看原圖）

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

（點(diǎn)擊圖片可放大，按F鍵查看原圖）

登錄界面：

交互效果：

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

設(shè)計(jì)思想及簡(jiǎn)單步驟：

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

（點(diǎn)擊圖片可放大，按F鍵查看原圖）

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

（點(diǎn)擊圖片可放大，按F鍵查看原圖）

注冊(cè)頁(yè)面：

交互效果：

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

設(shè)計(jì)思想及簡(jiǎn)單步驟：

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

（點(diǎn)擊圖片可放大，按F鍵查看原圖）

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

登錄后的百度個(gè)性化主頁(yè)：

交互效果：

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

設(shè)計(jì)思想及簡(jiǎn)單步驟：

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

（點(diǎn)擊圖片可放大，按F鍵查看原圖）

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

（點(diǎn)擊圖片可放大，按F鍵查看原圖）

個(gè)性化頁(yè)面中的推薦部分：

交互效果：

• 實(shí)時(shí)熱點(diǎn)：鼠標(biāo)移入換一換時(shí)，顏色由黑色變成藍(lán)色，點(diǎn)擊換一換時(shí)，新聞會(huì)發(fā)生變化。

設(shè)計(jì)思想及簡(jiǎn)單步驟：

• 鼠標(biāo)移入，顏色變化，是我們上面講過(guò)的MouseOver功能，點(diǎn)擊換一換，新聞發(fā)生變化，是我們上面講過(guò)的OnClick事件觸發(fā)，和動(dòng)態(tài)面板的不同狀態(tài)的顯示。

通過(guò)以上的講解，我已經(jīng)實(shí)現(xiàn)了以上的功能，希望各路大神能給出指導(dǎo)意見，大家一起加油！

原型頁(yè)面展示：http://udr80a.axshare.com/#c=2

源文件下載：http://pan.baidu.com/s/1gdg5MLX 密碼：izii
本文由 @蝸牛PM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。