Axure教程：模擬百度經(jīng)驗(yàn)編號?？啃Ч?/h2>

RAEDME大鵬

2017-08-13

2 評論 6819 瀏覽 49 收藏 12 分鐘

本文作者將詳細(xì)跟大家講解，如何使用 Axure模擬百度經(jīng)驗(yàn)編號?？啃Ч?/p>

相信很多小伙伴都使用過“百度經(jīng)驗(yàn)”，比如你在百度搜索某個(gè)軟件怎么用，某個(gè)事情怎么辦的時(shí)候，經(jīng)常會(huì)在搜索結(jié)果中看到比較靠前的結(jié)果帶有“百度經(jīng)驗(yàn)”字樣的結(jié)果，然后點(diǎn)進(jìn)去進(jìn)入的是百度經(jīng)驗(yàn)的專題頁面。

在百度經(jīng)驗(yàn)的專題頁面，通常會(huì)有分步的講解，而每一步都會(huì)有一個(gè)編號，當(dāng)頁面向下滾動(dòng)時(shí)，編號便會(huì)向上移動(dòng)依次排列?？吭跒g覽器的頂部，就像下面的效果。

（點(diǎn)擊預(yù)覽）

本文就是要詳細(xì)跟大家講解如何使用 Axure 來實(shí)現(xiàn)這種效果，更多精彩內(nèi)容，請繼續(xù)瀏覽。

1、原型解析

這個(gè)原型的交互事件只有一個(gè)，就是上下滾動(dòng)窗口，而這事件最終達(dá)到的效果就是使得編號可以根據(jù)上下滾動(dòng)的距離自動(dòng)的進(jìn)行?？亢透S頁面滾動(dòng)；而對于編號的?？浚瑒t是需要編號①?？吭跒g覽器窗口頂部，編號②?？吭诰幪枹傧旅?，編號③?？吭诰幪枹谙旅?，以此類推，同時(shí)已經(jīng)停靠的編號背景色會(huì)由綠色變?yōu)榛疑?/p>

2、設(shè)計(jì)思路

提到“?？俊倍郑ɑ蛘呓小拔健保?，可能小伙伴們最先想到的是動(dòng)態(tài)面板的“固定到瀏覽器”效果，確實(shí)，動(dòng)態(tài)面板的這一特性在很多場景中都非常實(shí)用，而且特別方便。然而，在這個(gè)案例中，卻不適用這種方法，因?yàn)閯?dòng)態(tài)面板的“固定到瀏覽器”屬性，會(huì)使得動(dòng)態(tài)面板自始至終都是固定在頁面的特定位置，而無法隨著頁面的滾動(dòng)進(jìn)行固定或取消固定，那么此路不通就需要另辟蹊徑了。

其實(shí)在很多時(shí)候進(jìn)行原型設(shè)計(jì)，不能被交互的表象給迷惑，也就是說不能一條道走到黑，我們需要學(xué)會(huì)繞彎子。那么在這個(gè)案例中，如何來繞彎子呢？雖然不能直接使編號進(jìn)行?？?，但是我們可以根據(jù)頁面滾動(dòng)的距離來移動(dòng)編號到指定的位置，其實(shí)核心就是通過移動(dòng)來實(shí)現(xiàn)，而移動(dòng)的時(shí)機(jī)或者說條件，就是根據(jù)窗口的滾動(dòng)來定義了。

3、制作過程

1）準(zhǔn)備編號部件

隨意準(zhǔn)備幾個(gè)編號部件（本案例中使用4個(gè)編號），這里我用的是“橢圓形”部件，然后在部件上分別寫上數(shù)字編號。

為了方便后續(xù)工作的處理，我們給這4個(gè)部件分別進(jìn)行命名（比如1,2,3,4，以代表各自對應(yīng)的編號）。

再之后，把4個(gè)編號進(jìn)行垂直排列，盡量使得4個(gè)編號的間距足夠大，可以跨越幾個(gè)頁面，這樣在預(yù)覽的時(shí)候頁面才能出現(xiàn)滾動(dòng)條，才可以實(shí)現(xiàn)后續(xù)的滾動(dòng)效果。另外需要注意的一點(diǎn)則是盡量保證每個(gè)編號的的坐標(biāo)是整數(shù)（只是為了方便）。

下面是本案例中對編號的大小和坐標(biāo)的設(shè)置，直徑為50的橢圓形，四個(gè)編號的橫坐標(biāo)都是100，縱坐標(biāo)分別是100,400,800,1200。

之后統(tǒng)一設(shè)置4個(gè)編號的選中效果，這里主要是設(shè)置填充色（隨便你喜歡的什么顏色，比如黃色）。同時(shí)設(shè)置4個(gè)編號均為“選中”狀態(tài)，設(shè)置選中狀態(tài)的目的則是為了通過切換選中狀態(tài)來實(shí)現(xiàn)編號填充色的改變。

2）設(shè)置窗口滾動(dòng)事件

其實(shí)這個(gè)過程，從結(jié)果來看非常簡單，但最終的結(jié)果也并非一蹴而就。最初的時(shí)候還是經(jīng)過了一系列的嘗試，比如關(guān)于如何添加窗口滾動(dòng)事件的條件，向上滾動(dòng)和向下滾動(dòng)是否采用不同的事件等等。那最終的結(jié)果呢，就是下面這樣。

只需要給頁面添加一個(gè)“窗口滾動(dòng)時(shí)”事件即可。Case1 到 Case5 分別表示了滾動(dòng)窗口時(shí)的五種情況，由于 Case 的執(zhí)行順序關(guān)系，我不得不按照 Case1 到 Case5 這樣的順序來處理事件，但是在下面的講解中，我會(huì)反過來進(jìn)行，從 Case5 到 Case1 的順序進(jìn)行講解，因?yàn)檫@個(gè)順序更符合我們看到的交互效果的順序。

接下來我將用一組示意圖來分別講解5個(gè) Case，圖中標(biāo)識的窗口代表原型預(yù)覽時(shí)的瀏覽器窗口，而整個(gè)圖則代表的是頁面的一部分，其中包含在瀏覽器窗口中顯示的頁面，滾動(dòng)到窗口上邊界之外的頁面，以及在窗口下邊界之外尚未顯示到窗口中的頁面。

【Case5】

窗口滾動(dòng)距離<100

窗口滾動(dòng)范圍在頂部與標(biāo)題①之間的時(shí)候會(huì)觸發(fā) Case5 事件，這時(shí)候是沒有任何標(biāo)題停靠效果的，但當(dāng)窗口在這個(gè)范圍內(nèi)滾動(dòng)的時(shí)候，可能是開始滾動(dòng)，也可能是滾動(dòng)到頁面最后之后又回到了這個(gè)區(qū)間，所以需要考慮第二種情況，增加一些動(dòng)作（上面 Case5 下的動(dòng)作）來保證原形的可靠性。

【Case4】

100≤窗口滾動(dòng)距離＜350

當(dāng)窗口向下滾動(dòng)或者向上滾動(dòng)到 Case4 的區(qū)間時(shí)，編號①?？吭诖翱陧敳?，編號②仍然隨頁面滾動(dòng)，在這一步需要注意的是編號①已經(jīng)停靠在窗口頂部，編號②要?？吭诰幪枹傧旅?，所以窗口滾動(dòng)范圍的最大值需要減少一個(gè)編號的高度，如上圖所表示。而最終編號①停靠的位置則是頁面滾動(dòng)的位置“Window.scroll.Y”，其他編號的位置保持原來的絕對位置不變。

在 Case4 中，編號①會(huì)?？?，在?？繒r(shí)設(shè)置其的選中狀態(tài)為“false”以實(shí)現(xiàn)改變填充色的效果。

【Case3】

350≤窗口滾動(dòng)距離＜700

當(dāng)窗口向下滾動(dòng)或向上滾動(dòng)到 Case3 區(qū)域時(shí)，編號①和編號②依次?？吭诖翱陧敳?，編號③仍然隨頁面滾動(dòng)，同 Case4 的原理相同，Case3 的滾動(dòng)范圍最大值需要減少兩個(gè)編號的高度。編號①和編號②的?？课恢梅謩e是“Window.scroll.Y”和“Window.scroll.Y+50”，其他編號位置保持絕對不變。

在 Case3 中，編號①已經(jīng)停靠，編號②會(huì)停靠，因此需要設(shè)置編號②的選中狀態(tài)為“false”以改變其填充色。

【Case2】

700≤窗口滾動(dòng)距離＜1050

當(dāng)窗口向下滾動(dòng)或向上滾動(dòng)到 Case2 區(qū)域時(shí)，編號①，②，③依次?？吭诖翱陧敳?，編號④仍然隨頁面滾動(dòng)，同 Case3 的原理相同，Case2 的滾動(dòng)范圍最大值需要減少三個(gè)編號的高度。編號①，②，③的?？课恢梅謩e是“Window.scroll.Y”，“Window.scroll.Y+50”和“Window.scroll.Y+100”，其他編號位置保持絕對不變。

在 Case2 中，編號①，②已經(jīng)?？?，編號③會(huì)?？?，因此需要設(shè)置編號③的選中狀態(tài)為“false”以改變其填充色。

【Case1】

窗口滾動(dòng)距離≥1050

當(dāng)窗口向下滾動(dòng)或向上滾動(dòng)到 Case1 區(qū)域時(shí)，全部編號依次?？吭诖翱陧敳?，Case1 的滾動(dòng)范圍最大值直接到頁面底部。編號①，②，③，④的?？课恢梅謩e是“Window.scroll.Y”，“Window.scroll.Y+50”，“Window.scroll.Y+100”，“Window.scroll.Y+150”。

在 Case1 中，編號①，②，③已經(jīng)?？?，編號④會(huì)?？浚?yàn)榫幪枹苁亲詈笠粋€(gè)編號，所以在?？恳院蟛辉俑淖兤涮畛渖?/p>

到這里全部的事件和動(dòng)作已經(jīng)添加完成，雖然沒有涉及到任何復(fù)雜的動(dòng)作、函數(shù)、變量等內(nèi)容，但是這處理的邏輯還是需要好好梳理一下的。尤其是關(guān)于這5個(gè) Case 的先后順序，由于每個(gè) Case 都是需要滿足一定的條件時(shí)才會(huì)觸發(fā)，因此判斷條件也決定了五個(gè) Case 必須的排列順序，否則無法正常觸發(fā)事件。

4、補(bǔ)充說明

對于 Axure 的原型預(yù)覽，不同瀏覽器的預(yù)覽效果是不盡相同的，拿本案例來說，如果想獲得最佳的預(yù)覽效果，那必然是 Google 瀏覽器，而 IE 瀏覽器的效果則不那么理想。

另外，關(guān)于第三部分制作過程中的5個(gè) Case 的示意圖，并非預(yù)覽時(shí)看到的效果，而是在 Axure 工作區(qū)中看到的效果，因此5個(gè)編號的填充色跟實(shí)際預(yù)覽時(shí)會(huì)有差異（未停靠的編號填充色應(yīng)為淺綠色，?？亢蟮木幪栴伾?yōu)闇\灰色）。

#專欄作家#

RAEDME大鵬，人人都是產(chǎn)品經(jīng)理專欄作家，微信公眾號raedme

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

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

收藏已收藏{{ postmeta.bookmark }} 點(diǎn)贊已贊{{ postmeta.postlike }}

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App

Axure教程百度經(jīng)驗(yàn)