用axure製作手機介面原型的時候,往往會遇到像android中listview那種頁面,手指在介面上滑動,頁面也就跟隨滾動,拖拽到底部或者頂部的時候還有個回彈效果,如何在axure之中模擬這種滾動呢,是用其內部框架linline frame? 用這個有以下幾點不妥:
1. 該框架的邊框在手機上實在太醜。
2. 只能連線到其他介面,這是不舒服的一點,試想這個內部介面在導航中開啟,別人都不知道你這介面是怎麼回事。
下面我們用動態面板來實現這種效果,總體辦法是在動態面板中再巢狀乙個動態面板。
實現步驟如下:
1. 首先建立乙個動態面板,這裡命名為外層面板。如圖:
2. 外層面板只需要乙個狀態就行了。然後在該狀態中再新增乙個動態面板。將這個面板命名為內層面板。
這個動態面板為頁面的實際大小,這裡為了做滾動效果其長度應該比外層面板更長,這裡就兩倍長吧,滾動兩屏(根據實際自行決定長度),外層面板就相當於乙個遮罩的作用,擋住紅杏出牆的那部分。
3. 現在的結構如圖所示
接下來就是關鍵的步驟了。
4. 給內層面板新增拖動事件,如圖
5. 在頁面上端和下端新增兩個矩形框,作為辨識位,分別命名為上端、下端。如圖所示:
可以新增在頁面上,也可以新增在外層面板內部,接下來新增限制事件。
好大功告成,這樣就實現了拖拽滾動頁面,到頂部後自動回彈的效果。最後總結下其實非常的簡單,就是在動態面板中巢狀動態面板,然後在動態面板中的拖動事件中來移動內層面板的方式來模擬手指移動滑動的效果,最後通過兩個矩形框的限制達到限制移動範圍並回彈的目的。
趕緊試試吧。
同樣方法可以做手機橫向滑動效果。要做瀏覽的效果可以參看知乎中方法他這有個缺點就是沒加限制,如上方法新增限制就可以了,只是在新增矩形的時候可以將右側的矩形框新增到手機邊框外,避免拖出手機邊框。
Axure原型製作規範
axure原型製作規範 6.保真度 僅針對前端頁面 1 創新型產品 產品改版 為了體現新產品的業務邏輯,或展示產品的改進功能,本類原型要求高保真原型。具體包含 a 所有頁面有完整的鏈結,能順利跳轉 關閉 b 任何互動均有完整的流程和結束 c 關鍵功能 創新點要上色,不得使用自帶的灰白色 黑色 d 按...
如何用Axure快速製作APP互動原型
對於產品經理來說,熟練使用一些常用軟體是一項十分必要的技能。其中,作為乙個專業的快速原型設計工具,axure rp無疑在產品人心中擁有乙個難以撼動的地位。但就要ps一樣,雖然足夠專業,但同樣也會存在使用靈活性的一些問題。原型製作工具的核心功能無非就是通過元件的堆砌組合,來展示產品的目標形態和效果。a...
Axure 簡單原型設計
axure rp是乙個專業的快速原型設計工具。axure 發音 ack sure 代表美國axure公司 rp則是rapid prototyping 快速原型 的縮寫。axure rp是美國axure software solution公司旗艦產品,是乙個專業的快速原型設計工具,讓負責定義需求和規格...