輕易模仿 flexbox 效果 – Adobe XD 新功能「Stacks」以及更多

環球 IT 消息科技新聞精選教學網頁界面設計網頁製作

CSS 的 flexbox 是當今前端設計師常用的排版方式,但在製作原型時並不見得容易,可幸 Adobe XD 在 2020 年 6 月更新時便引入「Stacks」新功能,讓用戶輕易地排列群組內的元件。當然,是次 6 月更新亦有 Scroll Groups 等新功能,就在這裡一次過介紹。

Adobe XD 這 4 大特色功能還不懂?快學起來向 UI 設計師邁進吧!

Adobe XD:免費下載

Adobe CC:馬上訂閱

Stacks

網頁設計有不少重複排列的元素,如導覽列(navigation bar)內的連結、文章的標籤(tags)、側欄(sidebar)的推薦閱讀等等。這些在前端都可以用 flexbox 輕易完成,而在原型(prototype)界面設計中,Adobe XD 的用戶可使用全新的 Stacks 來讓排版變得更方便。

要使用 Stacks,第一步就是要將排版的物件加入群組(Group)。選擇了群組後,便可在右邊看到 Stacks 選項。

Adobe XD 的 Stack 功能

勾選 Stacks 時,Adobe XD 會自動選擇群組物件推疊的方向。這個時候,群組內的物件便可使用 Stacks 賦予的功能,例如是交換位置,現在只需拖曳群組內的物件便可,再不用逐一移位。

Adobe XD 轉換物件位置

除此之外,作為模仿 flexbox 效果的功能,用戶亦可快捷地將每個物件平分空間,只需緊按 Shift 或者使用 Shift + S 便可。

Adobe XD 的 Stack 功能可為物件平分空間

Scroll Groups

除了 Stacks 之外,Adobe XD 亦加入了 Scroll Groups。顧名思義,就是讓用戶可設計出水平和垂直的捲動效果,以模擬貼文、列表、幻燈片、相片集等元素。如果用戶想模擬幻燈片(Carousel/ Slider)效果,Scroll Group 可輕易做到。

點選所需物件後,可在右邊選擇水平、垂直或全部方向的 Scroll Group。之後,群組兩端就能調節可觀看的大小。 進入預覽模式後,即可展示出捲動效果。

Adobe XD 的 Scroll Group 功能

注意:在 Windows 環境中,要預覽水平捲動效果,只能使用 Trackpad,現階段未能使用滑鼠;垂直捲動效果就可使用滾輪預覽。

全新 Plugin 「Chart」

今次的 Chart 插件方便用戶將圖表插入到 XD 檔案中。用戶可使用 Google Sheets、CSV、JSON 和 REST API 提供數據,再選擇需要的圖表類型,包括折線圖、區域圖、棒形圖、散佈圖等。當然,用戶亦可選擇圖表樣式,如顏色、字型、線條等。

圖片來源:How to create data visualization framework with Chart plugin

此外,今次的更新亦迎來 Design Token、Slack 整合等,不妨留意。

Adobe XD:免費下載

Adobe CC:馬上訂閱

自學 Adobe XD 無難度!網上課程大搜集

Adobe XD 已成為新興的界面設計工具,如果想掌握軟件的使用方法,除了閱讀網上教學,更可參加課程!

Udemy – 從 Adobe XD 入門網頁設計

為初學者而設的 Adobe XD 課程,除可快速上手 Adobe XD 操作之外,更可學習 UI/ UX 設計概念!

馬上報名!

六角學院

由台灣六角學院設計之 Adobe XD 課程,讓學員學習設計網頁。除了 Adobe XD,六角學院亦有 JavaScript、Vue 等課程!

詳細資料!