1. 入門屋首頁
  2. 產品設計

Axure技能:自適應移動設備屏幕大小

《Axure新技能:自適應手機屏幕大小》相信不少人都已經看過,并對設置方法已經很熟悉了,但該教程只能適應iphone6的屏幕尺寸的比例,在iphoneX出來后屏幕比例改變了,舊的方法已經不能適應目前的全面屏手機了,但現在不用擔心了,筆者已經有新的方法可以去適應市面上98%移動設備(包括手機和平板)屏幕的,讓大家在演示原型的時候更加得心應手了。

目錄:

  1. 設置原型寬度
  2. 設置動態面板
  3. 發布項目
  4. 查看項目

1、設置原型寬度

我們把原型的寬度定為:375px(高度不限制,根據需要設置)。

Axure技能:自適應移動設備屏幕大小

2、設置動態面板

(1)把元件按需求組合并轉為動態面板,并設置為自動調整內容尺寸。

Axure技能:自適應移動設備屏幕大小

(2)需要在頭部固定的設置固定到瀏覽器,水平靠左、垂直靠上、始終保持頂層。

Axure技能:自適應移動設備屏幕大小

(3)中間列表滾動部分不需要設置固定到瀏覽器

Axure技能:自適應移動設備屏幕大小

(4)需要在底部固定的設置固定到瀏覽器,水平靠左、垂直靠下、始終保持頂層。

Axure技能:自適應移動設備屏幕大小

3、發布項目

其它的設置我就不多說了,主要說一下移動設備的設置。

  • 寬度:375
  • 高度:800(設置800最大可兼容至iphonex)

以上是建議尺寸,也可以使用其它的尺寸。

  • 最小縮放倍數:0.5
  • 最大縮放倍數:3.0 (設置3.0最大可兼容至ipad pro)
  • 允許用戶縮放:no

最重要的初始縮放倍數千萬不要填寫,填寫以后默認就以iphone6(設置的)的尺寸訪問,需要你縮放一下才能夠正常全屏顯示,如果沒有設置,則自動以你移動設置大小進行全屏顯示。

Axure技能:自適應移動設備屏幕大小

4、查看項目

發布完以后,放至網上,這個時候我們就可以用移動設備進行訪問了,我們可以看到無論是iphone5的4.3尺寸還是iphonex的5.8尺寸都是正常全屏顯示的。

Axure技能:自適應移動設備屏幕大小

寫在最后

原型訪問的方法有很多,大家都可以根據自己的實際情況進行選擇,本文只是提供可以自適應手機屏幕大小的方法,把原型放在手機上更多的時候是為了方便外出演示的時候,給客戶查看一種實際的效果,所以建議使用高保真原型比較妥。

原型只是展示和溝通的一種方式,并非產品經理的全部,請不要本末倒置,產品經理應該更注重在溝通、思維、邏輯、業務上,當然有時間把原型做好做漂亮也是一種技能。

作者:屋主
鏈接:http://www.kxhvmj.live/design/1017.html
來源:入門屋
入門屋著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權并注明出處。

聯系我們

400-800-8888

在線咨詢:點擊這里給我發消息

郵件:[email protected]

工作時間:周一至周五,9:30-18:30,節假日休息

广东11选五走势图