整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
次教各位小伙伴使用內(nèi)聯(lián)框架來實(shí)現(xiàn)頁面滾動(dòng)，除此之外還會(huì)有一些小案例 ~
先來看看 天貓 首頁 頂部欄 的效果 ~
（以上圖片已是上傳的極限， 各位看官要是看不清，請(qǐng)自行下載天貓，打開首頁觀看）
所以今天我們就拿天貓首頁的頂部欄為例子，來講解在 Axure 里面是如何制作的 ！！
先看圖：
（以上圖片分三部分講，背景元件色值為：#E4E4E4，下面不重復(fù)講）
1.首先新建 Axure 文件，頂部電量條可由大家隨意制作（ w：375 ，h：20 ），如果有相關(guān)組件庫的小伙伴可直接拖入 ；
2.頂部欄區(qū)域，拖進(jìn)一個(gè)元件當(dāng)做背景（ w：375 ，h：44 ），從 阿里巴巴矢量圖標(biāo)庫 （ http://www.iconfont.cn ）下載以下 icon 如圖擺放即可 ；
3.在頂部欄區(qū)域的下面，拖進(jìn)一個(gè)元件當(dāng)做背景（ w：375 ，h：44 ），再在該元件上面放置一個(gè)純白色矩形（ w：335 ，h：30 ），命名：“ 輸入框背景 ”、一個(gè)文本框（ w：290 ，h：28 ），命名：“ 輸入框 ” 、一個(gè)搜索 icon （ w：14 ，h：14 ），命名：“ 搜索 icon ” 。把 輸入框背景、輸入框、搜索icon 選中右鍵點(diǎn)擊組合，命名：“ 輸入框控件 ” ，完成 ；
完成以上的元件準(zhǔn)備，然后我們先把他放置在一旁，等待使用…
4.然后把第一個(gè)頁面命名為：“ 外頁 ” ，在新增一個(gè)頁面命名為：“ 內(nèi)頁 ” ，拖動(dòng) “ 內(nèi)頁 ” 為 “ 外頁 ” 的子級(jí)，如圖 ：
5.然后我們雙擊進(jìn)入 外頁 的頁面，從左側(cè)組件庫拖進(jìn)一個(gè)內(nèi)聯(lián)框架（ w：375 ，h：667 ），為了美觀我們?cè)谶@個(gè)內(nèi)聯(lián)框架底部再拖進(jìn)一個(gè)矩形（ w：377 ，h：669 ），然后我們點(diǎn)擊內(nèi)聯(lián)框架，在右側(cè)屬性 – 內(nèi)聯(lián)框架 – 選擇框架目標(biāo) – 內(nèi)頁 – 確定。
繼續(xù)點(diǎn)擊內(nèi)聯(lián)框架，右鍵點(diǎn)擊 – 轉(zhuǎn)換成動(dòng)態(tài)面板 ，把該面板“ 自動(dòng)調(diào)整為內(nèi)容尺寸 ”，然后進(jìn)入該動(dòng)態(tài)面板，把內(nèi)聯(lián)框架的寬高都增加 17 px，如圖 ：
6.把剛才步驟 1 – 3 的內(nèi)容，放入到內(nèi)頁里面（ x ：0 ，y ：0 ），內(nèi)頁的內(nèi)容比較緊靠左上角，這樣才不會(huì)出現(xiàn)待會(huì)移動(dòng)的時(shí)候體驗(yàn)不好，如圖 ：
7.全選以上圖片所有內(nèi)容，右鍵點(diǎn)擊 轉(zhuǎn)換為動(dòng)態(tài)面板 ，在右側(cè)屬性設(shè)置 – 固定在瀏覽器 – 水平固定：左 、垂直固定：上 。如圖：
8.然后我們?cè)谠撛偷南路饺我夥胖镁匦?，在每個(gè)矩形里添加 1、2、3 文字，增加識(shí)別度 ：
完成以上的所有部分，可以先生成預(yù)覽看一下效果了 ~
以上就做好了所有的元件準(zhǔn)備，內(nèi)容比較多（ 因?yàn)橛行┬』锇閯偨佑| Axure ，拆分得比較細(xì)，各位老司機(jī)將就一下 ~ ），弄完之后我們就可以開始下一步操作了 ~
1.雙擊進(jìn)入內(nèi)頁，在頁面的空白處設(shè)置 窗口滾動(dòng)時(shí)（Case 1） ：
a.設(shè)置條件：值 – [[Window.scrollY]] – 大于等于 – 5 ；
b.移動(dòng)輸入框控件 – 移動(dòng)：絕對(duì) – x 為：60 ，y 為：27 – 動(dòng)畫：線性 – 時(shí)間：250 毫秒 ；
c.設(shè)置尺寸：“ 輸入框 ” w ：170 ，h ：28 – 錨點(diǎn)：左上角 – 動(dòng)畫：線性 – 時(shí)間：250 毫秒 、“ 輸入框背景 ” w ：215 ，h ：30 – 錨點(diǎn)：左上角 – 動(dòng)畫：線性 – 時(shí)間：250 毫秒 ；
d.設(shè)置 “ 背景 ” – 隱藏 – 動(dòng)畫：向上滑動(dòng) – 時(shí)間：500毫秒 ；
2.雙擊進(jìn)入內(nèi)頁，在頁面的空白處設(shè)置 窗口滾動(dòng)時(shí)（Case 2） ：
a.設(shè)置條件：值 – [[Window.scrollY]] – 小于 – 5 ；
b.設(shè)置 “ 背景 ” – 顯示 – 動(dòng)畫：向下滑動(dòng) – 時(shí)間：500毫秒 ；
c.移動(dòng)輸入框控件 – 移動(dòng)：絕對(duì) – x 為：20 ，y 為：71 – 動(dòng)畫：線性 – 時(shí)間：250 毫秒 ；
d.設(shè)置尺寸：“ 輸入框 ” w ：290 ，h ：28 – 錨點(diǎn)：左上角 – 動(dòng)畫：線性 – 時(shí)間：250 毫秒 、“ 輸入框背景 ” w ：335 ，h ：30 – 錨點(diǎn)：左上角 – 動(dòng)畫：線性 – 時(shí)間：250 毫秒 ；
以上完成之后就可以得到以下效果了，是不是很簡(jiǎn)單？
然后我們完成以上步驟之后，我們還可以在該頁面的下面放置一個(gè) “ 返回頂部 ” 的 icon ，意為：當(dāng)我們下滑到一定位置時(shí)，顯示 “ 返回頂部 ” icon ，點(diǎn)擊該 icon 時(shí)，返回至頂部并隱藏 “ 返回頂部 ” icon …
下面我們來開始制作 ~
1.從左側(cè)元件庫拉出一條橫向水平線，長(zhǎng)度小于 375 px 即可，命名為：“ 頂部 ” ，然后置于底層；
2.拉入一個(gè)作為 “ 返回頂部 ” 的 icon （ w：40，y：40 ），或者隨意拉一個(gè)矩形代替都可以；
3.點(diǎn)擊 icon 右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，右側(cè)設(shè)置固定到瀏覽器（此處跟以上相同設(shè)置即可）；
4.設(shè)置 “ 返回頂部 ” icon 交互用戶，鼠標(biāo)單擊時(shí) – 滾動(dòng)到元件<錨鏈接> – 勾選：頂部 – 僅垂直滾動(dòng) – 動(dòng)畫：線性 – 時(shí)間：250 毫秒 ；
5.把 “ 返回頂部 ” icon 放置在內(nèi)頁（ x：315，y:586 ）的位置，點(diǎn)擊隱藏 ；
6.在內(nèi)頁的空白處設(shè)置 窗口滾動(dòng)時(shí)（Case 3） ：
a.設(shè)置條件：值 – [[Window.scrollY]] – 大于等于 – 500 ；
b.顯示 “ 返回頂部 ” icon – 動(dòng)畫：逐漸 – 時(shí)間：250 毫秒；
7.在內(nèi)頁的空白處設(shè)置 窗口滾動(dòng)時(shí)（Case 4） ：
a.設(shè)置條件：值 – [[Window.scrollY]] – 小于 – 500 ；
b.隱藏 “ 返回頂部 ” icon – 動(dòng)畫：逐漸 – 時(shí)間：250 毫秒；
完成以上設(shè)置就可以了，下面我們來看一下效果 ~
好的，以上就是本次的所有講解，謝謝大家！！
需要的可以下載看看。同時(shí)有相關(guān)問題的可在以下留言區(qū)留言，我將第一時(shí)間回復(fù) ~
本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
語：今天，本文作者和大家分享一下如何通過Axure實(shí)現(xiàn)網(wǎng)站Tab導(dǎo)航欄切換內(nèi)容頁和返回頂部交互，希望看后對(duì)你能有所幫助。
我們?cè)谑褂弥鯐r(shí)，會(huì)發(fā)現(xiàn)向下滾動(dòng)頁面，網(wǎng)站Tab導(dǎo)航欄會(huì)發(fā)生內(nèi)容切換；同時(shí)滾動(dòng)超過一定距離，會(huì)出現(xiàn)回到頂部按鈕，點(diǎn)擊該按鈕，即可返回頁面頂部。
頂部欄兩種狀態(tài)及下滑頁面準(zhǔn)備，我是通過截圖的方式準(zhǔn)備的：
回到頂部按鈕、鼠標(biāo)移入按鈕時(shí)所顯示的浮窗，將該組合命名為“回到頂部-總”：
將頂部欄的兩種狀態(tài)分別放入動(dòng)態(tài)面板中的狀態(tài)1與狀態(tài)2中，將動(dòng)態(tài)面板命名為statusBar；
添加鼠標(biāo)移入回到頂部按鈕顯示”回到頂部”氣泡：
添加向下、向上滑動(dòng)頁面，頂部狀態(tài)欄切換；
其次，對(duì)窗口添加交互：
將“回到頂部-總”組合轉(zhuǎn)為動(dòng)態(tài)面板，將該動(dòng)態(tài)面板命名為“回到頂部-總panel”，固定動(dòng)態(tài)面板顯示位置，并隱藏：
添加錨點(diǎn)元件，我們?cè)诖诉x擇熱區(qū)元件，因?yàn)闊釁^(qū)具有透明的特性，將其命名為TopLocation：
為“回到頂部”按鈕增加交互，鼠標(biāo)移入顯示“回到頂部”氣泡，移除隱藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時(shí)】用例，設(shè)置動(dòng)作【滾動(dòng)到元件】，選擇TopLocation，垂直線性滾動(dòng)500毫秒。
在上面交互的應(yīng)用中，我們會(huì)用到Window.scrollY函數(shù)，該函數(shù)為窗口函數(shù)；窗口函數(shù)一共包括以下四種：
本文由 @小青 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
在日常交互場(chǎng)景中，我們經(jīng)常會(huì)使用【返回頂部】或者【錨點(diǎn)定位】功能，來快速到達(dá)自己想去的頁面，那么如何使用 Axure 實(shí)現(xiàn)這一交互效果呢，本文將利用 Axure 中【滾到元件】的交互去實(shí)現(xiàn)這兩個(gè)功能。
這個(gè)功能在日常使用中非常常見，其實(shí)最簡(jiǎn)單的方式就三點(diǎn)
1、默認(rèn)隱藏【返回頂部】；
2、頁面向下滑動(dòng)一定距離后顯示【返回頂部】；
3、點(diǎn)擊【返回頂部】返回到頁面頂部
接下來開始動(dòng)手做吧:
最上面的矩形作為頂部?jī)?nèi)容，再畫一塊矩形拉長(zhǎng)頁面，最后用一個(gè)動(dòng)態(tài)面板畫一個(gè)回到頂部的按鈕。
首先頁面是可以持續(xù)滾動(dòng)的，而【返回頂部】的按鈕是固定在頁面上的，所以需要對(duì)按鈕所在的【動(dòng)態(tài)面板】配置【固定到瀏覽器】
接下來給【動(dòng)態(tài)面板】設(shè)置【單擊】【滾動(dòng)到原件】，目標(biāo)為【頂部矩形】
這個(gè)時(shí)候【返回頂部】的功能就做完了，但是當(dāng)頁面已經(jīng)處于頂部的時(shí)候，通常情況下是不需要顯示返回按鈕的，而是當(dāng)頁面向下滑動(dòng)一定距離后才顯示，所以可以優(yōu)化一下
我們點(diǎn)一下畫布的空白處，給頁面添加【窗口滾動(dòng)時(shí)】的交互，當(dāng)窗口垂直滑動(dòng)的距離大于頂部矩形高度的手則【顯示】 【動(dòng)態(tài)面板】 ，否則就【隱藏】
交互設(shè)置完成之后我們?cè)偃ツJ(rèn)隱藏【動(dòng)態(tài)面板】就完成了
當(dāng)網(wǎng)頁內(nèi)容較長(zhǎng)時(shí)，通過設(shè)置錨點(diǎn)，用戶可以通過點(diǎn)擊鏈接直接跳轉(zhuǎn)到頁面的特定區(qū)域。
這種方式不僅提升了頁面的可訪問性，也使得用戶在瀏覽大量信息時(shí)更加快捷。
接下來模擬這樣一個(gè)場(chǎng)景：四個(gè)內(nèi)容四個(gè)標(biāo)題，一個(gè)動(dòng)態(tài)面板
然后給動(dòng)態(tài)面板設(shè)置【單擊】【滾動(dòng)到原件】的事件，目標(biāo)就是對(duì)應(yīng)的標(biāo)題，一 一對(duì)應(yīng)設(shè)置好就完成啦
感謝您的閱讀，希望本文能夠啟發(fā)您的設(shè)計(jì)靈感，期待在設(shè)計(jì)的道路上與您相遇
– 歡迎點(diǎn)贊、關(guān)注、轉(zhuǎn)發(fā)、收藏【我碼玄黃】，gonghao同名
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
