Adobe Experience Design app

AdobeXd是Adobe公司突破軟件束縛的一款交互軟件，我們?cè)谶@里看到了不少新興工具的身影，對(duì)于設(shè)計(jì)師來說功能確實(shí)是可圈可點(diǎn)，不過有創(chuàng)新就算成功的，我們還是繼續(xù)期待更好的改進(jìn)吧，這里順帶放上Adobe Experience Design ios版下載地址！

Adobe Experience Design app功能特色

專業(yè)的矢量化圖形規(guī)劃軟件，是新一代頁面與移動(dòng)應(yīng)用的UX規(guī)劃工具，它不僅可用于矢量圖形設(shè)計(jì)(artboard)，并且還可用于原型設(shè)計(jì)。它支撐 現(xiàn)有 的工程類型，如web、iPhone、iPad或自定義尺度規(guī)劃，另外自帶有預(yù)設(shè)的UI Kit包。用戶可從iOS、google的Material Design或Windows來挑選。XD還能展現(xiàn)近來的文件，這么進(jìn)入原型規(guī)劃作業(yè)也更便利。

Adobe Experience Design app用戶評(píng)測(cè)

一、資源模板

打開軟件首先會(huì)彈出一個(gè)模板選擇頁面，這里為我們提供了 iPhone、iPad、Web 等常見的設(shè)計(jì)尺寸。同時(shí)自帶了一個(gè)簡(jiǎn)單的演示文件以及 iOS、Google Material 和 Win Phone 的常用控件庫。窗口右側(cè)則是近期使用的文件記錄。

二、整體界面

選擇一個(gè)合適的尺寸，我們便進(jìn)入了軟件的操作界面。和傳統(tǒng) Adobe 軟件界面相比，Xd 的界面要更接近于 Sketch，風(fēng)格更加清爽，信息層級(jí)更加清晰。

整個(gè)應(yīng)用可以分為設(shè)計(jì)和原型兩種工作模式，這一點(diǎn)讓工作流程變得更為清晰，用戶也無需在多個(gè)軟件下來回切換。接下來我就兩種模式展開介紹。

三、設(shè)計(jì)模式

我將該模式簡(jiǎn)單的劃分為了導(dǎo)航欄、工具欄、檢查器以及工作區(qū)四個(gè)區(qū)域。

用戶可以通過導(dǎo)航欄左側(cè)的按鈕在設(shè)計(jì)和原型兩種模式下進(jìn)行切換。而標(biāo)題欄右側(cè)則是顯示了當(dāng)前視圖的縮放比例，同時(shí)提供了播放和分享功能的按鈕（此功能后續(xù)會(huì)相繼展開）。

左側(cè)的工具欄提供以下幾種常用的工具：選擇工具、矩形工具、圓形工具、直線工具、鋼筆工具、文字工具以及新建畫板。對(duì)用的快捷鍵分別為：V R E L P T A 使用方法基本沿用 Adobe 其它軟件的用戶習(xí)慣，所以在此就不展開介紹了。

右側(cè)的檢查器主要包括了對(duì)齊，布爾運(yùn)算，對(duì)象尺寸、位置以及旋轉(zhuǎn)角度和外觀屬性。其中外觀屬性目前提供了透明度、描邊、填充以及投影這幾種選項(xiàng)。

Xd 的任意形狀都可以看做默認(rèn)的圖片剪切蒙版，直接將圖片拖放到相應(yīng)的對(duì)象上，圖片便會(huì)根據(jù)對(duì)象的尺寸進(jìn)行自動(dòng)縮放適配。需要的注意的是，如何你想再次編輯該圖片的形狀樣式，需要再次新建一個(gè)你需要的形狀對(duì)象，同時(shí)選中兩者，按下 Command+【M】鍵來新建新的剪切蒙版。通過后者新建的圖片對(duì)象是可以通過雙擊再次編輯圖片位置和屬性的。

除此之外，值得一提的是 Xd 提供了一種新的控制模式 Repeat Gird，在此我將其稱作批量控制。選中任意對(duì)象后點(diǎn)擊此按鈕，對(duì)象的定界框會(huì)由藍(lán)色變?yōu)榫G色，同時(shí)在水平和豎直方向多出兩個(gè)圓角矩形的按鈕，點(diǎn)擊并拖動(dòng)按鈕即可在不同方向上對(duì)該對(duì)象進(jìn)行批量復(fù)制，同時(shí)可以通過點(diǎn)擊對(duì)象之間的區(qū)域進(jìn)行拖動(dòng)來批量調(diào)整所有對(duì)象之間的間距。



工具區(qū)域默認(rèn)為淺灰色底色，目前不支持編輯背景色值。

四、原型模式

Xd 目前版本的交互方式只支持頁面之間的跳轉(zhuǎn)。操作過程倒是非常簡(jiǎn)單。在原型模式下選中任意控件，其右側(cè)便會(huì)出現(xiàn)一箭頭符號(hào)，用戶點(diǎn)擊箭頭符號(hào)并拖動(dòng)，將引導(dǎo)線拉至任意頁面即可完成簡(jiǎn)單的交互動(dòng)畫。

與此同時(shí)，還可以通過點(diǎn)擊控件或其指向頁面?zhèn)冗叺募�頭符號(hào)來控制動(dòng)畫類型和參數(shù)。目前提供的屬性僅包括頁面出現(xiàn)的方式、持續(xù)時(shí)間以及緩入緩出屬性。

用戶可以在選中需要預(yù)覽的頁面后點(diǎn)擊導(dǎo)航欄右側(cè)的預(yù)覽按鈕進(jìn)行預(yù)覽操作。同時(shí) Xd 在預(yù)覽窗口的右上角提供了視頻錄制功能。用戶可以點(diǎn)擊該按鈕開始錄制，在完成交互操作后，再次點(diǎn)擊該按鈕完成錄制并導(dǎo)出視頻。視頻格式目前僅支持 mov 格式。

除此之外，用戶還可以通過點(diǎn)擊導(dǎo)航欄右上角的分享按鈕，來創(chuàng)建可以在線預(yù)覽的鏈接。文件會(huì)默認(rèn)儲(chǔ)存在 Adobe Creative Cloud 的資源庫內(nèi)。同時(shí)也可以通過點(diǎn)擊分享按鈕下的 Manage Links 按鈕來編輯及管理這些內(nèi)容。

我們也可以選擇在移動(dòng)端打開該分享鏈接來進(jìn)行實(shí)際操作和預(yù)覽。由于 Safari 瀏覽器會(huì)保留一部分標(biāo)題欄以至于無法實(shí)現(xiàn)全屏預(yù)覽。所以筆者找到了開發(fā)同學(xué)，寫了一個(gè)可以使瀏覽器內(nèi)容全屏預(yù)覽的小程序。除此之外，還可以選擇 Chrome 瀏覽器來達(dá)到類似效果。

五、功能小結(jié)

無標(biāo)尺功能，在不拖動(dòng)物體的情況下無法做到如 PS 或 Sketch 一樣，直接查看對(duì)象之間的間距尺寸。

無縮放工具，目前僅支持通過 Command + 【+/-】進(jìn)行視圖縮放,無法做到如 Sketch 一樣做到針對(duì)特定對(duì)象的聚焦縮放。

無像素預(yù)覽模式，所以無法做到圖標(biāo)邊緣的像素對(duì)齊，在輸出 PNG 格式切圖時(shí)會(huì)出現(xiàn)邊緣模糊的情況。

目前僅支持純色填充，無漸變或其他選項(xiàng)。

文字屬性目前僅支持對(duì)齊方式及字間距的調(diào)整，無行高、段落等選項(xiàng)。

支持編輯節(jié)點(diǎn) ，但無端點(diǎn)、交點(diǎn)、虛線、閉合路徑、描邊擴(kuò)展等選項(xiàng)。

圓角矩形無法如 AI 一樣，單獨(dú)調(diào)整某一圓角的度數(shù)。

支持頁面之間的交互跳轉(zhuǎn)，不支持同一頁面控件間的位移、縮放及透明度動(dòng)畫。

所以目前版本的 Xd 是無法獨(dú)立完成界面以及圖標(biāo)的繪制。當(dāng)然，這些問題對(duì)于 adobe 來說應(yīng)該不存在技術(shù)難點(diǎn)。問題在于 Xd 的定位是一款需要與 PS、AI 協(xié)作的輕量化交互原型工具，還是更趨于獨(dú)立。或許 adobe 本身也在思考與觀望，V0.5 版本也僅是投石問路的一次嘗試。

Adobe Experience Design app怎么用

官網(wǎng)專門為用戶打造的四個(gè)入門教程，這里是傳送帶