Home » 線上教學 » 第十章 Adaptive Views » 10 Adaptive views

10 Adaptive views

第十章:Adaptive Views(響應式設計)

本節學習目標

  • 了解何謂Adaptive views
  • 學會使用Adaptive views

  響應式設計幫助使用者將 prototype 根據不同裝置上的螢幕尺寸來設計不同版面的呈現與佈局。使用者可以自由定義切換版面佈局的數值,透過建立一個主要頁面,在其中建立不同尺寸的排版方式來完成 prototype 在不同裝置上呈現的樣子。

10-1

新增Adaptive views

點選工作區上的符號,開啟 Adaptive views 視窗,
按下加號就可以新增不同解析度的畫面。

Name 名稱、Width 寬、Height 高
Condition:
is less than or equals 小於或等於
is greater than or equals 大於或等於
設定套用的狀態。

完成後按下 OK 即可新增。


10-2

編輯Adaptive views 畫面

在工作區上會看見 Base 以及新增過的選項。

Base就是會看到原先的預設畫面,
另外就是其他新增過 Adaptive views 的項目,
紅色的線就代表著該畫面之大小,
便可依照該大小進行內容的編輯。


10-3

瀏覽 Adaptive views 效果

首先點選 Preview(F5) 進行預覽。

接著可以點選 Select Adaptive View 之圖示,選擇瀏覽狀態。
或是直接利用拖拉的方式,將瀏覽器視窗拉成該尺寸,
就能瀏覽原型在不同螢幕尺寸時會顯示的樣子。

Leave a Reply