中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文作者將詳細跟大家講解，如何使用 Axure模擬百度經驗編號?？啃Ч?。

相信很多小伙伴都使用過“百度經驗”，比如你在百度搜索某個軟件怎么用，某個事情怎么辦的時候，經常會在搜索結果中看到比較靠前的結果帶有“百度經驗”字樣的結果，然后點進去進入的是百度經驗的專題頁面。

在百度經驗的專題頁面，通常會有分步的講解，而每一步都會有一個編號，當頁面向下滾動時，編號便會向上移動依次排列?？吭跒g覽器的頂部，就像下面的效果。

（點擊預覽）

本文就是要詳細跟大家講解如何使用 Axure 來實現這種效果，更多精彩內容，請繼續瀏覽。

1、原型解析

這個原型的交互事件只有一個，就是上下滾動窗口，而這事件最終達到的效果就是使得編號可以根據上下滾動的距離自動的進行?？亢透S頁面滾動；而對于編號的停靠，則是需要編號①停靠在瀏覽器窗口頂部，編號②停靠在編號①下面，編號③?？吭诰幪枹谙旅?，以此類推，同時已經?？康木幪柋尘吧珪删G色變為灰色。

2、設計思路

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

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

3、制作過程

1）準備編號部件

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

為了方便后續工作的處理，我們給這4個部件分別進行命名（比如1,2,3,4，以代表各自對應的編號）。

再之后，把4個編號進行垂直排列，盡量使得4個編號的間距足夠大，可以跨越幾個頁面，這樣在預覽的時候頁面才能出現滾動條，才可以實現后續的滾動效果。另外需要注意的一點則是盡量保證每個編號的的坐標是整數（只是為了方便）。

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

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

2）設置窗口滾動事件

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

只需要給頁面添加一個“窗口滾動時”事件即可。Case1 到 Case5 分別表示了滾動窗口時的五種情況，由于 Case 的執行順序關系，我不得不按照 Case1 到 Case5 這樣的順序來處理事件，但是在下面的講解中，我會反過來進行，從 Case5 到 Case1 的順序進行講解，因為這個順序更符合我們看到的交互效果的順序。

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

【Case5】

窗口滾動距離<100

窗口滾動范圍在頂部與標題①之間的時候會觸發 Case5 事件，這時候是沒有任何標題?？啃Ч?，但當窗口在這個范圍內滾動的時候，可能是開始滾動，也可能是滾動到頁面最后之后又回到了這個區間，所以需要考慮第二種情況，增加一些動作（上面 Case5 下的動作）來保證原形的可靠性。

【Case4】

100≤窗口滾動距離＜350

當窗口向下滾動或者向上滾動到 Case4 的區間時，編號①停靠在窗口頂部，編號②仍然隨頁面滾動，在這一步需要注意的是編號①已經?？吭诖翱陧敳?，編號②要?？吭诰幪枹傧旅妫源翱跐L動范圍的最大值需要減少一個編號的高度，如上圖所表示。而最終編號①?？康奈恢脛t是頁面滾動的位置“Window.scroll.Y”，其他編號的位置保持原來的絕對位置不變。

在 Case4 中，編號①會停靠，在?？繒r設置其的選中狀態為“false”以實現改變填充色的效果。

【Case3】

350≤窗口滾動距離＜700

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

在 Case3 中，編號①已經?？浚幪枹跁？?，因此需要設置編號②的選中狀態為“false”以改變其填充色。

【Case2】

700≤窗口滾動距離＜1050

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

在 Case2 中，編號①，②已經?？?，編號③會?？浚虼诵枰O置編號③的選中狀態為“false”以改變其填充色。

【Case1】

窗口滾動距離≥1050

當窗口向下滾動或向上滾動到 Case1 區域時，全部編號依次停靠在窗口頂部，Case1 的滾動范圍最大值直接到頁面底部。編號①，②，③，④的?？课恢梅謩e是“Window.scroll.Y”，“Window.scroll.Y+50”，“Window.scroll.Y+100”，“Window.scroll.Y+150”。

在 Case1 中，編號①，②，③已經?？?，編號④會?？?，因為編號④是最后一個編號，所以在?？恳院蟛辉俑淖兤涮畛渖?。

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

4、補充說明

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

另外，關于第三部分制作過程中的5個 Case 的示意圖，并非預覽時看到的效果，而是在 Axure 工作區中看到的效果，因此5個編號的填充色跟實際預覽時會有差異（未停靠的編號填充色應為淺綠色，?？亢蟮木幪栴伾優闇\灰色）。

#專欄作家#

RAEDME大鵬，人人都是產品經理專欄作家，微信公眾號raedme

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議