Axure 原型 | 教你使用自適應視圖構建界面

14 評論 116229 瀏覽 202 收藏 6 分鐘

在Axure中,我們可以使用自適應視圖來調整界面的展示。例如PC瀏覽就顯示PC樣式,手機瀏覽就顯示手機的樣式,根據設備的不同分辨率來展示對應的界面。

先預覽下這期有些啥:【點我預覽】http://t9ymya.axshare.com/auto.html

GIF

如上演示中,界面適配了iphone5、iphone6 及 iphone6 plus。它需要使用axure中的自適應視圖功能才能實現。

教程步驟

第1步:找到設置自適應視圖的管理入口

在操作區域頁面的任意【空白位置】單擊鼠標,即可在右側檢視面板》屬性中找到自適應管理入口。

2016-9-29 16-27-31

第2步:管理自適應視圖

1、啟用自適應視圖,并新建小、中、大,三種自適應視圖的尺寸

設置?【?。?00*300】、【中:>=300*500】、【大>=400*600】并逐一繼承上一個。

2016-9-29 16-37-44

設置完畢后,我們返回操作區域查看,界面發生了如下的變化:

界面多了你設置過的自適應視圖的三個Tab,并多了根據設置產生的參考線。

2016-9-29 16-48-25

我們在界面【小】中放入一個文本框,并在各個Tab中填充到參考線的寬度,做一個Demo來驗證自適應視圖是如何運作的:

GIF

完成如上步驟后,我們在chrom瀏覽器中通過拉動屏幕調整分辨率觀察自適應視圖的運作:

GIF2

我們發現,隨著窗口大小的變化,文本框A自動切換對應的大小。

至此,我們已經初步的學會自適應視圖的基本原理和操作。下面我們再來看看自定義視圖中的其它設置:

2、在基本視圖【最左側視圖】里修改,會同步影響其它視圖【因為其它視圖繼承基本視圖】

GIF3

3、在其它視圖里修改,會修改該視圖+繼承于它的視圖中的內容【本例中400繼承300】

GIF5

4、如果勾選影響到所有,則所有的視圖都會同步被修改

GIF6

我們發現,只有新增添的屬性是會同步變化的,如上的演示中,【小】視圖的文本就沒有加粗效果。

繼承關系的設置:

2016-9-29 17-56-46

工作中的使用建議

日常工作中,幾乎極少使用自適應視圖。因為Axure功能非常強大,如果你是一個設計師或者要做一些精細的交互稿,它就可以滿足你。而作為產品經理,更重要的是將邏輯和需求講解明白,并且大部分都是明天要,所以是效率優先,自然不能帶多少交互。

工具的掌握都是多學多用,多做demo例子。產品經理還是要以思維邏輯為優先,如何能快速的將需求理清,并整理為案,通過原型快速的將需求傳達出來,才是重點。

當然熟練掌握Axure也是必備技能之一,待你工作效率已經超越別人2-5倍的時候,你就不會滿足靜態稿了。學無止境!

內容下載地址:

作者鏈接:http://pan.baidu.com/s/1pKSiUi3 密碼:htcz

在線預覽:http://t9ymya.axshare.com/auto.html

 

本文由 @陳張良 原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 可以 分享一下你做的效果作品嗎?麻煩了樓主 ?? ,感謝

    來自福建 回復
  2. 可以 分享一下你做的效果作品嗎?麻煩了樓主,感謝

    來自福建 回復
  3. 你好,樓主。百度云盤的鏈接可以分享一下嗎

    來自福建 回復
  4. 自適應視圖非常好用啊,要做公司的官網,正愁我是不是要畫兩份甚至多份原型圖呢,這個功能還是聽開發說的,就看到了axure也有自適應的功能,但是說實話挺好用的,這就在前提是開發準備用一串代碼維護兩個前端,將所有的東西都模塊化,接下來看設計師的造化了

    來自浙江 回復
  5. 我設置后預覽沒有自適應的效果,請問是什么原因呢

    來自北京 回復
  6. 原來axure有這個功能啊,好強大!正急需,謝謝分享

    來自廣東 回復
  7. 啥機構呢?

    來自北京 回復
  8. 收獲頗豐

    回復
  9. 很贊!最近打算好好學Axure

    回復
  10. 看著不錯哈哈

    來自北京 回復