日韩精品在线观看中文字幕,人妻无码久久久久久久久久久

產(chǎn)品經(jīng)理在制作完移動端產(chǎn)品原型后，發(fā)給給領(lǐng)導(dǎo)、開發(fā)、用戶看的時候會遇到每個人的手機(jī)屏幕尺寸都不相同，發(fā)布好的原型在不同手機(jī)上打開有的會剛好滿屏，有的卻不行。如何做到原型和實(shí)際產(chǎn)品一樣能夠在不同的尺寸下適配呢？利用Axure制作原型時有沒有辦法解決適配問題？今天我就來講一下Axure軟件的自適應(yīng)視圖功能，通過創(chuàng)建自適應(yīng)視圖來解決適配問題。
具體如何才能實(shí)現(xiàn)這一需求呢？我們可以通過以下三步完成，首先我們要先了解不同設(shè)備的原型尺寸，然后創(chuàng)建不同設(shè)備的自適應(yīng)視圖，最后是移動設(shè)備的瀏覽設(shè)置。下面我們來具體展開講一下。
1、了解不同設(shè)備的原型尺寸
隨著電腦屏幕分辨率的提升，PC端原型的尺寸也隨之改變。另外，因為各種移動設(shè)備的出現(xiàn)，原型不再是僅面向PC端，所以如何在移動端不同分辨率尺寸的多種設(shè)備上瀏覽原型，以及原型的尺寸又該如何去設(shè)置，是現(xiàn)在面臨的新問題。
PC端的原型尺寸：早幾年前，電腦屏幕的分辨率寬度一般都是1024px，所以PC端原型的尺寸一般采用960px的寬度。但是，現(xiàn)在屏幕分辨率寬度基本都在1920px以上，顯然再用960px 的寬度設(shè)計原型已經(jīng)不太合適，所以，現(xiàn)在常用的PC端原型寬度為1200px 。由于PC端網(wǎng)站高度一般不固定，所以高度方面不用考慮。
移動端的原型尺寸：由于移動設(shè)備的快速發(fā)展，導(dǎo)致移動設(shè)備的屏幕分辨率、屏幕尺寸等種類繁多。那么，如何來確定某一移動設(shè)備的原型尺寸呢？一般手機(jī)屏幕分辨率的尺寸是原型尺寸的3倍、2.5倍、2倍，有極少數(shù)手機(jī)是2.75倍。以iphone5s手機(jī)為例，這款手機(jī)分辨率為寬640px*高1136px，屏幕尺寸4英寸。它原型尺寸該是多少呢？它是2倍的倍率，所以它的原型尺寸是320*568 。
下面我簡單列舉了一下目前市面上各種主流手機(jī)的原型尺寸，希望對大家?guī)椭?。
安卓手機(jī)：360px*640px
蘋果手機(jī)：320px*568px（iPhone5s）、375px*667px（iPhone6s）、414px*736px（iPhone6s Plus）
需要特別主意的是iPhone6s Plus的物理分辨率為1080px*1920px ，但輸出分辨率1242px*2208px,原型尺寸要按輸出分辨率算。其實(shí)移動設(shè)備原型大小確定還有一種簡單的方法就是在移動設(shè)備截一張圖，把圖的大小按相應(yīng)倍率一除就能得到原型大小了。
2、創(chuàng)建不同設(shè)備的自適應(yīng)視圖
確定了不同設(shè)備的原型尺寸之后，我們就要創(chuàng)建不同設(shè)備的自適應(yīng)視圖了，這樣的好處是我不用給每一個尺寸的設(shè)備制作一個原型的源文件了。
首先、在菜單欄項目的選項中，選擇自適應(yīng)視圖。

網(wǎng)頁原型設(shè)計工具使用 axure在線預(yù)覽原型不一樣

文章插圖
請點(diǎn)擊此處輸入圖片描述
在打開的自適應(yīng)窗口中，就可以設(shè)置各種原型尺寸的視圖。默認(rèn)會有一個基本視圖，在沒有與打開原型的設(shè)備尺寸相匹配的視圖的情況下，會顯示基本視圖 ?；疽晥D無需做任何設(shè)置，即使填寫了寬度和高度，只會在畫布中出現(xiàn)相應(yīng)輔助線，并不會與該尺寸的設(shè)備相適應(yīng) 。（圖5-2）

文章插圖
請點(diǎn)擊此處輸入圖片描述
點(diǎn)擊窗口中的添加按鈕可添加新視圖，新視圖需要填寫名稱、寬、高、繼承于誰。

文章插圖
請點(diǎn)擊此處輸入圖片描述
強(qiáng)調(diào)事項：新增視圖都要繼承于基本視圖或其它視圖。被繼承的視圖為父視圖，繼承于父視圖的視圖為子視圖。在編輯視圖內(nèi)容時，默認(rèn)父視圖編輯內(nèi)容時，子視圖同步改變，而子視圖編輯內(nèi)容時，父視圖不會改變。如果在父視圖編輯內(nèi)容時，子視圖對應(yīng)的內(nèi)容已經(jīng)發(fā)生改變，則不會受父視圖的編輯所影響。
添加完自適應(yīng)視圖后如何編輯不同試圖的內(nèi)容呢？首先對每個頁面開啟自適應(yīng)功能，在檢視面板的屬性中設(shè)置，如下圖。

文章插圖
請點(diǎn)擊此處輸入圖片描述
然后就可以開始對不同視圖進(jìn)行原型設(shè)計了
3、移動設(shè)備瀏覽設(shè)置
在完成原型設(shè)計發(fā)布時，在生成HTML的設(shè)置窗口中，點(diǎn)擊左側(cè)列表中的移動設(shè)備，然后在右側(cè)的界面中勾選“包含視口標(biāo)簽” 。完成這個設(shè)置后，原型就能夠自動被設(shè)備識別，正常顯示了。

文章插圖
請點(diǎn)擊此處輸入圖片描述
在面板中還要設(shè)置寬度、高度、縮放倍數(shù)等內(nèi)容，具體如何設(shè)置呢？往下看
寬度：默認(rèn)為“device-width”，即設(shè)備寬度。一般保持默認(rèn)即可。
高度：可填寫“device-height”，即設(shè)備高度。也可不填。
初始縮放倍數(shù)：指在移動設(shè)備上加載原型時，顯示的初始尺寸縮放比例 ?？蛇x數(shù)值為0-10，可為小數(shù)；如：寬度為640的原型需要在寬度為320的設(shè)備上顯示時，可以設(shè)置初始縮放比例為0.5，這樣在320的設(shè)備上則能夠顯示全部內(nèi)容。如果原型尺寸與設(shè)備尺寸一致，這里填寫1或者1.0即可。
最小縮放倍數(shù)：是指移動設(shè)備根據(jù)自身尺寸自動縮放原型尺寸的最小值 ?？蛇x數(shù)值為0-10，可為小數(shù) 。如：最小縮放倍數(shù)設(shè)置為1.0時，用寬度320的設(shè)備查看寬度為360的原型，是沒有辦法縮小到1屏查看的，只能滾動頁面才能看到全部內(nèi)容，所以，如果想縮小原型的尺寸看到全部內(nèi)容，要把最小縮放倍數(shù)設(shè)置為0.8以下才可以。
最大縮放倍數(shù)：允許設(shè)備中原型縮放的最大倍數(shù)可選數(shù)值為0-10，可為小數(shù) 。如：原型尺寸為320*568，最大縮放倍數(shù)設(shè)置為2時，通過雙指放大原型頁面，最大尺寸為640*1136 。
允許用戶縮放：允許用戶進(jìn)行縮放，不填寫或blank即可，不允許用戶進(jìn)行縮放，填寫no 。
禁止頁面垂直滾動：勾選后當(dāng)原型的內(nèi)容高度超出設(shè)備高度時，無法滾動頁面顯示超出部分的內(nèi)容。
【網(wǎng)頁原型設(shè)計工具使用 axure在線預(yù)覽原型不一樣】完成上述操作之后就可以發(fā)布原型給領(lǐng)導(dǎo)、技術(shù)、用戶等人員查看了。同時也都能看到自己手機(jī)屏幕大小的原型了。今天就講到這里，咱們下期見?。。?

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：