Adobe XD 手機版導覽列覆蓋效果

手機的螢幕尺寸相較於電腦要小許多，所以在手機版的原型設計中，時常需要刪減或隱藏資料，像是導覽列、表單內容、卡片資訊和Footer區塊等等。Adobe XD內建的Prototype功能，只要４個步驟就能輕鬆呈現手機版導覽列覆蓋效果，讓我們跟著以下步驟操作吧！
一、 在手機版首面最上方，新增導覽列區塊及漢堡選單按鈕icon。

二、 新增一個相同尺寸的畫布，利用「Backgroung Blur」製作具有不透明度的模糊背景，再填上導覽列要呈現的資訊。

三、 切換到Prototype功能介面後，選取首頁的漢堡選單icon，並將其連結至導覽列畫布，Type請使用「Overlay」模式。

四、 最後在Preview階段，點選首頁的漢堡選單icon，就可以在首頁輕鬆覆蓋導覽列畫面囉！

以上是關於「Adobe XD手機版導覽列覆蓋效果」的製作方法，
這麼實用的小撇步，您一定要學會喔！

- 回450期電子報主頁 -
財團法人中華民國電腦技能基金會版權所有，未經確認授權，嚴禁轉貼節錄
 TEL：02-2577-8806 ‧ FAX：02-2577-8135 服務信箱： [email protected]