Adobe XD 推出免費方案,這將會是你學習 UI 設計的入門磚?

林育正 Riven
RAR 設計攻略
Published in
7 min readMay 17, 2018

設計界佔有一席之地的的軟體公司Adobe 5/16 日宣佈推出Adobe XD CC起步方案(Adobe XD CC Stater Plan),免費提供全面整合的UX/UI設計平台,是目前唯一結合設計、建立原型功能與提供工業級效能的跨平台體驗設計平台,且能夠整合設計師的現有工作流程及Photoshop 和Illustrator 等工具。

Adobe XD 起步方案
昨天剛好看到不少朋友分享,其中不乏工程師圈子,看得出來這個軟體受到不少新的關注,剛好最近有在一些地方教學推廣Adobe XD,也踩到不少雷,這邊整理給躍躍欲試的你,希望能帶來一點幫助。

先來看看 Adobe XD 到底是拿來幹嘛的

三大主要用途 —從Adobe XD 入門網頁設計

做設計 — 可以拿來製作網頁、APP的設計稿,匯入大家常用的 Illustrator、Photoshop檔案。

做原型 — 將不同的介面設計圖連結起來,產生互動,去模擬數位產品的使用。

做溝通 — 做當你的原型準備好了,你可以分享給工程師或是客戶,讓他們過目。

對囉在Adobe XD上市之前,設計師們更常使用的介面設計軟體是 Sketch 。

(2018/11/30更新)

「Adobe Xd設計實務|成為UI設計師的8項核心技能」

一次點滿所有技能的線上課程~感謝支持已於上線第一天成功達標!

Adobe XD 跟 Sketch 哪個好用?

先說結論:Adobe XD 是非常有潛力超越 Sketch成為最潮最普及的 UI 設計軟體。

Sketch以目前(2018/5) 我覺得還是略贏。特別是 ver.49 更新後的Link、Cloud跟Preview,完全追上Adobe XD原有的特色功能,而且18N的中文化語系,對UI新手來說非常友善。

但如果你是使用 PC (Windows) 電腦,沒得選就是 Adobe XD了。

Prototyping, Libraries on Sketch Cloud

Adobe XD 特色功能

本篇重點還是在 Adobe XD ,以下簡介幾個我認為較特別的項目,提供想開始使用 XD 的你一些參考:

跨 Windows 及 Sketch 雙平台

這就甭多解釋了,不少人就是衝著這個使用 Adobe XD,雖然身邊不少設計師朋友都是Mac果粉,但考慮到教育環境的限制,舉凡高中大學、政府機構等電腦設備限制,預測將來可能都會以 Adobe XD 作為設計軟體,除非有一天Sketch 也說開放 PC 使用。

用 Layout Grid 更順手地開網格

Grid 不管是設計網頁或APP,都是相當重要的概念,部分平面設計師也會使用它來製作視覺設計;在XD 裡面,不論欄位、顏色、間距,通騰都可以在右側編輯欄中調整;其實以新手來說,這項功能比Sketch 更為直觀好操作。

產品設計神功能 — Repeat Grid

輕鬆地複製及拉間隔

這招在製作卡片式設計或響應式RWD 時特別好用,使用上也簡單、直覺,不用一個一個在那邊群組、複製、貼上。

拿來繪製 texture 、pattrn 等圖形也是相當方便!

Assets 搭配 Symbol 更對味

有用過 Sketch 的朋友對於 Symbol 肯定不陌生,看高手玩巢狀symbol 更是特別精彩,Adobe XD當然不會放過這個殺手級功能,並加入 Assets管理介面,更方便地做統一性的更改,將 UI 設計規範做好做滿。

內建 spec 輸出 guideline

還在 beta版本

昨天剛好適逢 Zeplin 主機壞掉事件XD ,臉書上不少朋友哀嚎遍野,其實這也是第三方雲端儲存服務會發生的缺點,之前的 Sketch Measure 本地端標註,相較之下更為穩定。

Adobe XD 內建的 spec 輸出規範,也算方便,不過在瀏覽器跑的時候預覽會等頗久,且每一次都要重新load,有時候會慢的讓人焦慮。

取得 UI 設計的入門磚

看到這裡會不會感到興奮呢?趕緊下載免費 Adobe XD 來玩玩吧!

如果對於這類軟體不是很熟悉,建議你可以從塗鴉開始xD

就先來畫一隻小叮噹吧! — 從Adobe XD 入門網頁設計

Adobe XD 實作上相當簡單,我原本也都是使用 Sketch進行專案設計,兩者比較起來其實功能上都大同小異,但XD裡有不少類似 Illustrator 跟PS 的功能與快捷鍵,原本若是已經熟稔這兩套軟體的平面設計師,上手速度會非常快!

我覺得Sketch是贏在地球上有相當多的設計師、藝術家使用,造就了什麼問題Google就有,甚至能找到方便的玩家自製外掛!這些都源自於其完整的社群生態系,在現階段還沒有充足的 Adobe XD 使用者情況下,更甭說中文用戶了,那不如我們就來自己建立一個吧!

如果想要跟大家一起練習 Adobe XD 以及UI設計,可以加入這個臉書繁中社團,共同分享資訊以及交流 :)

Adobe XD 練功坊

一塊建立起 Adobe XD 社群!

相關學習資源:Daily UI 100天練習生UI Club

安裝 Adobe XD 前請詳閱公開說明書

並非只要有 PC (Windows) 就可以用

電腦作業系統需為 Win 10 以上,且版本需求為 1703。

對一般工作者及Mac使用者來說,不算是什麼門檻。

但以我最近的教學上與各單位討論環境時,最常遇到的就是學校/政府機關等電腦教室版本過舊,或是Win7升級限制,無法安裝 Adobe XD。這意謂著Adobe 要從大學、民間擴展用戶體驗設計(UX)的領域,還是需要一點時間。

如果你也遇到了同樣殘念問題,可以參考用安裝 VM(虛擬機) 的方式讓大家可以使用,這部分篇幅過長暫不討論。

Adobe XD 還不支援 Windows端的 Zeplin

如果公司是使用 Zeplin 當作設計標註工具,目前的 Adobe XD 是還沒有支援 Windows版本串連的。

免費Adobe XD 有什麼限制

發佈公開的原型(Prototyping)和設計規格(spec)只能各1個,雲端儲存只有2GB。可以透過訂閱Adobe Creative Cloud擴充。

總結

Adobe Creative Cloud產品長暨執行副總裁Scott Belsky表示:「在設計產業,用戶體驗設計(UX)是成長最快的領域之一。全新的起步方案將協助新進藝術家或企業品牌,不需要投入任何資金,就可擁有設計與提供優越數位體驗所需的一切工具,探索迅速擴展中的使用者體驗領域。」

整理一下目前專案流程常使用的工具,提供剛入門 UI/UX的人做參考。Adobe XD 試圖將以下數位產品開發工具全部整合一起,我也非常期待那一天的到來,可以肯定的是現階段還有很多待改善的地方,並且也因為使用人數上較Sketch少,許多配套軟體及外掛並不是那麼多,建議可以先多方嘗試使用於專案開發上,都會走出最理想的開發流程。

網路上相關資源很多,但也因此資訊爆炸亂,如果剛開始想學習 UI 設計,該怎麼開始怎麼走呢?這邊整理了在學習路上重要的觀念與資源,希望能夠讓想入門 UI 設計的同學們一些參考 :D

日常的小分享或生活動態都在 個人臉書 歡迎追蹤!

相關合作洽談請來信至:riven@monospace.tw

我是Riven 我們下次見囉~!

--

--

林育正 Riven
RAR 設計攻略

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design