主頁> 科技新聞 >輕易模仿 flexbox 效果:Adobe XD 新功能「Stacks」以及更多

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

留言
分享文章:

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:馬上訂閱

尋找線上學習平台:
Udemyhahow六角學院Coursera

馬上領取Hahow好學校 9 折優惠

去看個書,好不好?

實戰 UX 工作現場|創造更有價值的產品與服務

書名:實戰 UX 工作現場|創造更有價值的產品與服務

作者:松薗美帆, 草野孔希

簡介:這是一本實踐使用者經驗(UX)研究的入門書。「聽說過『UX研究』這個詞,但不太清楚具體內容⋯⋯」、「我想嘗試一下UX研究,應該從何處開始好呢⋯⋯」除了腦中出現這類想法的人以外,還有一些人的煩惱是:「雖然已經開始進行UX研究了,但說真的,我對實作方法沒有自信⋯⋯」。筆者希望能為這些人提供助力,因此將實務工作中獲得的UX知識與洞察統整成一本書。當讀者準備踏出第一步,或是持續進行UX研究時,都能將這本書當作如同導師的存在,放在身邊隨時翻閱參考。

立即購買:博客來

Hahow 線上課程

不小心就學會!用 UI 設計方法製作網站

課程名稱:不小心就學會!用 UI 設計方法製作網站

UI UX 網頁設計入門課程,學習完整的前端設計、網頁設計課程,掌握程式碼管理、設計切版、專案設計開發流程等要點,透過實際案例的剖析,讓你清楚掌握 UI/UX 領域的思考方式。

獲取線上課程:Hahow 好學校

從入門到業界實戰 - UI / UX 前端網頁設計

課程名稱:從入門到業界實戰 – UI / UX 前端網頁設計

UI UX 網頁設計入門課程,學習完整的前端設計、網頁設計課程,掌握程式碼管理、設計切版、專案設計開發流程等要點,透過實際案例的剖析,讓你清楚掌握 UI/UX 領域的思考方式。

獲取線上課程:Hahow 好學校

訪客留言