在Axure中中捆,我們可以使用自適應(yīng)視圖來調(diào)整界面的展示遏餐。例如PC瀏覽就顯示PC樣式,手機瀏覽就顯示手機的樣式灭将,根據(jù)設(shè)備的不同分辨率來展示對應(yīng)的界面疼鸟。
先預(yù)覽下這期有些啥:【點我預(yù)覽】http://t9ymya.axshare.com/auto.html
如上演示中,界面適配了iphone5庙曙、iphone6 及 iphone6 plus空镜。它需要使用axure中的自適應(yīng)視圖功能才能實現(xiàn)。
教程步驟
第1步:找到設(shè)置自適應(yīng)視圖的管理入口
在操作區(qū)域頁面的任意【空白位置】單擊鼠標(biāo)捌朴,即可在右側(cè)檢視面板》屬性中找到自適應(yīng)管理入口吴攒。
第2步:管理自適應(yīng)視圖
1、啟用自適應(yīng)視圖男旗,并新建小舶斧、中欣鳖、大察皇,三種自適應(yīng)視圖的尺寸
設(shè)置?【小:200*300】、【中:>=300*500】什荣、【大>=400*600】并逐一繼承上一個矾缓。
設(shè)置完畢后,我們返回操作區(qū)域查看稻爬,界面發(fā)生了如下的變化:
界面多了你設(shè)置過的自適應(yīng)視圖的三個Tab嗜闻,并多了根據(jù)設(shè)置產(chǎn)生的參考線。
我們在界面【小】中放入一個文本框琉雳,并在各個Tab中填充到參考線的寬度,做一個Demo來驗證自適應(yīng)視圖是如何運作的:
完成如上步驟后翠肘,我們在chrom瀏覽器中通過拉動屏幕調(diào)整分辨率觀察自適應(yīng)視圖的運作:
我們發(fā)現(xiàn),隨著窗口大小的變化束倍,文本框A自動切換對應(yīng)的大小。
至此盟戏,我們已經(jīng)初步的學(xué)會自適應(yīng)視圖的基本原理和操作。下面我們再來看看自定義視圖中的其它設(shè)置:
2柿究、在基本視圖【最左側(cè)視圖】里修改,會同步影響其它視圖【因為其它視圖繼承基本視圖】
3蝇摸、在其它視圖里修改,會修改該視圖+繼承于它的視圖中的內(nèi)容【本例中400繼承300】
4探入、如果勾選影響到所有狡孔,則所有的視圖都會同步被修改
我們發(fā)現(xiàn),只有新增添的屬性是會同步變化的蜂嗽,如上的演示中苗膝,【小】視圖的文本就沒有加粗效果。
繼承關(guān)系的設(shè)置:
工作中的使用建議
日常工作中植旧,幾乎極少使用自適應(yīng)視圖辱揭。因為Axure功能非常強大,如果你是一個設(shè)計師或者要做一些精細的交互稿病附,它就可以滿足你问窃。而作為產(chǎn)品經(jīng)理,更重要的是將邏輯和需求講解明白完沪,并且大部分都是明天要域庇,所以是效率優(yōu)先嵌戈,自然不能帶多少交互。
工具的掌握都是多學(xué)多用听皿,多做demo例子熟呛。產(chǎn)品經(jīng)理還是要以思維邏輯為優(yōu)先,如何能快速的將需求理清尉姨,并整理為案庵朝,通過原型快速的將需求傳達出來,才是重點又厉。
當(dāng)然熟練掌握Axure也是必備技能之一九府,待你工作效率已經(jīng)超越別人2-5倍的時候,你就不會滿足靜態(tài)稿了覆致。學(xué)無止境昔逗!
內(nèi)容下載地址:
作者鏈接:http://pan.baidu.com/s/1pKSiUi3密碼:htcz
在線預(yù)覽:http://t9ymya.axshare.com/auto.html