• 百圖網免費素材千人群

百圖網 > PS教程 > 設計技巧 > Adobe XD CC,交互新利器體驗評測

Adobe XD CC,交互新利器體驗評測

damaer
damaer

2017-10-29

評論 0

瀏覽

收藏

一、資源模板

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

Adobe XD CC,交互新利器體驗評測

二、整體界面

選擇一個合適的尺寸,我們便進入了軟件的操作界面。和傳統 Adobe 軟件界面相比,Xd 的界面要更接近于 Sketch,風格更加清爽,信息層級更加清晰。

Adobe XD CC,交互新利器體驗評測

整個應用可以分為設計和原型兩種工作模式,這一點讓工作流程變得更為清晰,用戶也無需在多個軟件下來回切換。接下來我就兩種模式展開介紹。

三、設計模式

我將該模式簡單的劃分為了導航欄、工具欄、檢查器以及工作區四個區域。

Adobe XD CC,交互新利器體驗評測

用戶可以通過導航欄左側的按鈕在設計和原型兩種模式下進行切換。而標題欄右側則是顯示了當前視圖的縮放比例,同時提供了播放和分享功能的按鈕(此功能后續會相繼展開)。

Adobe XD CC,交互新利器體驗評測

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

右側的檢查器主要包括了對齊,布爾運算,對象尺寸、位置以及旋轉角度和外觀屬性。其中外觀屬性目前提供了透明度、描邊、填充以及投影這幾種選項。

Adobe XD CC,交互新利器體驗評測

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

Adobe XD CC,交互新利器體驗評測

除此之外,值得一提的是 Xd 提供了一種新的控制模式 Repeat Gird,在此我將其稱作批量控制。選中任意對象后點擊此按鈕,對象的定界框會由藍色變為綠色,同時在水平和豎直方向多出兩個圓角矩形的按鈕,點擊并拖動 按鈕即可在不同方向上對該對象進行批量復制,同時可以通過點擊對象之間的區域進行拖動來批量調整所有對象之間的間距。

Adobe XD CC,交互新利器體驗評測

?

工具區域默認為淺灰色底色,目前不支持編輯背景色值。

四、原型模式

Xd 目前版本的交互方式只支持頁面之間的跳轉。操作過程倒是非常簡單。在原型模式下選中任意控件,其右側便會出現一箭頭符號,用戶點擊箭頭符號并拖動,將引導線拉至任意頁面即可完成簡單的交互動畫。

與此同時,還可以通過點擊控件或其指向頁面側邊的箭頭符號來控制動畫類型和參數。目前提供的屬性僅包括頁面出現的方式、持續時間以及緩入緩出屬性。

Adobe XD CC,交互新利器體驗評測

用戶可以在選中需要預覽的頁面后點擊導航欄右側的預覽按鈕進行預覽操作。同時 Xd 在預覽窗口的右上角提供了視頻錄制功能。用戶可以點擊該按鈕開始錄制,在完成交互操作后,再次點擊該按鈕完成錄制并導出視頻。視頻格式目前僅支持 mov 格式。

除此之外,用戶還可以通過點擊導航欄右上角的分享按鈕,來創建可以在線預覽的鏈接。文件會默認儲存在 Adobe Creative Cloud 的資源庫內。同時也可以通過點擊分享按鈕下的 Manage Links 按鈕來編輯及管理這些內容。

Adobe XD CC,交互新利器體驗評測

我們也可以選擇在移動端打開該分享鏈接來進行實際操作和預覽。由于 Safari 瀏覽器會保留一部分標題欄以至于無法實現全屏預覽。所以筆者找到了開發同學,寫了一個可以使瀏覽器內容全屏預覽的小程序。除此之外,還可以選擇 Chrome 瀏覽器來達到類似效果。

五、功能小結

無標尺功能,在不拖動物體的情況下無法做到如 PS 或 Sketch 一樣,直接查看對象之間的間距尺寸。

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

無像素預覽模式,所以無法做到圖標邊緣的像素對齊,在輸出 PNG 格式切圖時會出現邊緣模糊的情況。

目前僅支持純色填充,無漸變或其他選項。

文字屬性目前僅支持對齊方式及字間距的調整,無行高、段落等選項。

支持編輯節點 ,但無端點、交點、虛線、閉合路徑、描邊擴展等選項。

圓角矩形無法如 AI 一樣,單獨調整某一圓角的度數。

支持頁面之間的交互跳轉,不支持同一頁面控件間的位移、縮放及透明度動畫。

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

Adobe XD CC,交互新利器體驗評測

除了上述簡介以外,官網也為我們提供了4個基礎的入門教程,在這里附上地址鏈接:https://helpx.adobe.com

總而言之,Xd 作為一款新的交互軟件,在它的身上我們能夠看到不少新興工具的身影。同時也能看出 Adobe 公司突破其已有軟件束縛,所做的一些新嘗試。雖然軟件本身還有著許多不足之處,但對于產品設計師來講,它的一些功能還是可圈可點的。正如其官網所述:A new experience in user experience。作為 V.0.5 的預覽版本,或許我們應該對其多一些包容,也期待 Adobe 能夠給我們帶來更多新的驚喜。


: 利器

美式足球比分迅盈