ADOBE EXPERIENCE DESIGN CC簡單體驗(yàn)預(yù)覽

1、ADOBE EXPERIENCE DESIGN CC簡單體驗(yàn)預(yù)覽一網(wǎng)學(xué)   編者按：Windows也有Sketch可以用了！前兩天Adobe 全家桶剛加入了一款新產(chǎn)品叫Adobe Experience Design CC，今天作者帶大家一起體驗(yàn)下Preview 版本的各個(gè)特點(diǎn)。去年 Adobe 就在網(wǎng)站上放出了 Adobe Project Comet 的簡介和視頻，如今已經(jīng)可以下載到 Preview 版本體驗(yàn)試用了，當(dāng)前版本將軟件更名為 Xd（文件格式也是.xd），莫名戳中笑點(diǎn)目前，XD 暫時(shí)只有 Mac 版本，不過官網(wǎng)已經(jīng)明確表示 Win 版即將推出，所以大家也

2、不用擔(dān)心。簡單來說，XD 是一款矢量化圖形設(shè)計(jì)簡單原型制作的軟件，有點(diǎn)類似于 SketchSilver 的組合。鑒于 Silver 我申請了但是一直沒有機(jī)會試用，所以也不好將兩者對比，因此就簡單給大家做一個(gè) XD 的概覽簡介。首先是打開軟件的首頁：可以看到支持的設(shè)備與尺寸還是比較豐富的，同時(shí)還自帶了一些常用的UI Kits，比如 iOS、Google Material 等。這樣就可以幫助設(shè)計(jì)師快速從素材庫選取內(nèi)容搭建頁面，十分方便。整個(gè)軟件的界面非常清爽，如果你對 Sketch 的使很熟悉，那基本不需要任何額外的學(xué)習(xí)就可以直接上手使用。上圖就是 XD 的主面板了，左邊分別有選中、插入矢量圖形、

3、鋼筆、文字還有畫板（Artboard，與Sketch類似），是不是很熟悉？右邊就更簡單了，選中不同類型的元素時(shí)就會出現(xiàn)相應(yīng)的編輯內(nèi)容，比如陰影、顏色、對齊、布爾運(yùn)算還有生成表格等。對于矢量元素可以方便地添加、刪除、編輯錨點(diǎn)，配合鋼筆可以做出任何你想要的圖形。一個(gè)神奇的功能叫做 Repeat Grid，實(shí)際效果就是可以通過拖動來快速直觀地生成一個(gè) Gird。看我說起來好像和Sketch或者PS的同類功能沒什么區(qū)別，但實(shí)際試一下就會發(fā)現(xiàn)XD的交互方式更佳直觀簡便。鼠標(biāo)按住某個(gè)間距時(shí)，會直接顯示數(shù)值。并且如果你對間距進(jìn)行拖動的話，可以讓整個(gè) Grid 間距跟著變化，整個(gè)過程只需要鼠標(biāo)不需要其他額外的

4、快捷鍵輔助。圖片的添加和替換也很容易，直接把 png 丟到對應(yīng)的位置，XD 會幫助你自動匹配。當(dāng)然如果不滿意再自己調(diào)整就好。其實(shí)設(shè)計(jì)部分這些功能就足夠了，深層次的操作大家可以挖掘一下。下面介紹一下原型（Prototype）功能。在界面的左上角可以快速在 Design 和 Prototype 切換。在 Prototype 界面下，選中元素會發(fā)現(xiàn)右邊出現(xiàn)了一個(gè)小箭頭，并且可以選擇簡單的動畫類型和參數(shù)：比較遺憾的是目前 XD 中只能做到頁面的切換，也就是讓另一個(gè)頁面從不同的方向滑入切換原本的頁面，最多也只能做到淡入淡出，想要讓某個(gè)元素單獨(dú)飛出來目前應(yīng)該是做不到的。不過我覺得既然主打了原型功能，Ado

5、be 應(yīng)該不會只滿足于頁面切換吧，稍微來點(diǎn)復(fù)雜的效果嘛不然可滿足不了日常需求。軟件自帶了預(yù)覽功能，可以在 Mac 上直接查看效果，當(dāng)然也可以通過點(diǎn)擊實(shí)現(xiàn)簡單的交互。軟件可以直接實(shí)現(xiàn)錄制，不過好像尺寸分辨率都不能調(diào)整，目前只能導(dǎo)出 mov 格式的視頻。另外暫時(shí)沒有看到對應(yīng)的 App 在手機(jī)上預(yù)覽，不過通過 share 功能可以生成一個(gè)鏈接，發(fā)給別人之后就可以在手機(jī)上看了。比較郁悶的是不知道是不是我打開的方式有問題，鏈接一直沒有打開成功。總而言之，XD 軟件的界面設(shè)計(jì)深得我心，Adobe 有 PS 和 AI 的基礎(chǔ)我相信視覺設(shè)計(jì)部分肯定不會有問題，只是現(xiàn)在的交互部分還尚顯稚嫩。話說回來這還只是 Preview 版本，相信 Abobe 在后續(xù)的迭代中會將它越來越完善。原文地址：zhuanlan.zhihu推薦閱讀:福利網(wǎng)站：數(shù)千種LOGO矢量圖搜索免費(fèi)下載AI新手教程！教你如何繪制扁平化風(fēng)格的卡通動物頭像優(yōu)秀字體排版的網(wǎng)頁設(shè)計(jì)【網(wǎng)頁設(shè)計(jì)培訓(xùn)】