原型利器前瞻!Adobe Experience Design CC 體驗(yàn)概覽
![](http://image.woshipm.com/wp-files/img/85.jpg)
今天知道 Adobe 家族剛加入了一款新產(chǎn)品,叫 Adobe Experience Design CC。今天,帶大家一起體驗(yàn)下 Preview 版本的各個(gè)特點(diǎn)。 去年 Adobe 就在網(wǎng)站上放出了 Adobe Project Comet 的簡(jiǎn)介和視頻,如今已經(jīng)可以下載到 Preview 版體驗(yàn)試用,當(dāng)前版本將軟件更名為 Xd(文件格式也是.xd)。 目前,XD 暫時(shí)只有 Mac 版本,不過官網(wǎng)已經(jīng)明確表示 ?Win 版即將推出。簡(jiǎn)單來說,XD 是一款矢量化圖形設(shè)計(jì) + 簡(jiǎn)單原型制作的軟件,有點(diǎn)類似于 Sketch+Silver 的組合。XD?主要增加了交互,并且能夠?qū)换ヤ浵瘛_@更加方便產(chǎn)品經(jīng)理對(duì)需求和交互了,不是么? 首先是打開軟件的首頁: 支持的設(shè)備與尺寸還是比較豐富的,比如 iPhone 的 6P、6、5S 等設(shè)備和尺寸。同時(shí),XD 還自帶了一些常用的 UI Kits,比如 iOS、Google Material 以及 Microsoft Matetial 等,這樣就可以幫助設(shè)計(jì)師以及產(chǎn)品經(jīng)理快速?gòu)乃夭膸?kù)選取內(nèi)容搭建頁面和原型。是不是很方便呢? 不過,相比較 Sketch 而言,XD 在選擇設(shè)備與尺寸上還有比較大的提升空間。新建文檔的時(shí)候,沒有辦法直接選取設(shè)備和尺寸。另外,在畫布中新建所需的畫板(主要為選擇對(duì)應(yīng)設(shè)備尺寸的畫板而言)也不是太方便。 整個(gè)軟件的界面非常清爽,如果你對(duì) Sketch 的很熟悉,那基本不需要任何額外的學(xué)習(xí)就可以直接上手使用。另外,如果你是 Adobe 的忠實(shí)用戶,他們的界面布局也基本上是一致的。 上圖是 XD 的主界面了,左邊是工具欄,包括選中、插入矢量圖形、鋼筆、文字還有畫板(Artboard,與Sketch類似),是不是很熟悉?右邊是類似 Sketch 的檢查器,選中不同類型的元素時(shí)就會(huì)出現(xiàn)相應(yīng)的編輯內(nèi)容,比如陰影、顏色、對(duì)齊、布爾運(yùn)算還有生成表格等。對(duì)于矢量元素可以方便地添加、刪除、編輯錨點(diǎn),配合鋼筆可以做出任何你想要的圖形。 另外,提及一點(diǎn),XD 在圖層的支持上現(xiàn)在并不好。如果設(shè)計(jì)師或者產(chǎn)品設(shè)計(jì)規(guī)劃較復(fù)雜的界面,對(duì)圖層的使用是一項(xiàng)比較重要的功能。主要是需要較快的選擇圖層進(jìn)行編輯和調(diào)整,不然真的會(huì)頭疼。這一點(diǎn),XD 和 Axure 很類似。 一個(gè)神奇的功能叫做 Repeat Grid,實(shí)際效果就是可以通過拖動(dòng)來快速直觀地生成一個(gè) Gird。看我說起來好像和 Sketch 或者 PS 的同類功能沒什么區(qū)別,但實(shí)際試一下就會(huì)發(fā)現(xiàn) XD 的交互方式更佳直觀簡(jiǎn)便。 鼠標(biāo)按住某個(gè)間距時(shí),會(huì)直接顯示數(shù)值。并且如果你對(duì)間距進(jìn)行拖動(dòng)的話,可以讓整個(gè) Grid 間距跟著變化,整個(gè)過程只需要鼠標(biāo)不需要其他額外的快捷鍵輔助。 圖片的添加和替換也很容易,直接把 png 丟到對(duì)應(yīng)的位置,XD 會(huì)幫助你自動(dòng)匹配。當(dāng)然如果不滿意再自己調(diào)整就好。 其實(shí)設(shè)計(jì)部分這些功能就足夠了,深層次的操作大家可以挖掘一下。下面介紹一下原型(Prototype)功能。 在界面的左上角可以快速在 Design 和 Prototype 中切換。在 Prototype 界面下,選中元素會(huì)發(fā)現(xiàn)右邊出現(xiàn)了一個(gè)小箭頭,并且可以選擇簡(jiǎn)單的動(dòng)畫類型和參數(shù): 比較遺憾的是目前 XD 中只能做到頁面的切換,也就是讓另一個(gè)頁面從不同的方向滑入切換原本的頁面,最多也只能做到淡入淡出,想要讓某個(gè)元素單獨(dú)飛出來目前應(yīng)該是做不到的。不過我覺得既然主打了原型功能,Adobe 應(yīng)該不會(huì)只滿足于頁面切換,未來一定會(huì)增強(qiáng)這個(gè)功能的。 軟件自帶了預(yù)覽功能,可以在 Mac 上直接查看效果。軟件還可以對(duì)交互效果進(jìn)行錄制,不過好像尺寸分辨率都不能調(diào)整,目前只能導(dǎo)出 mov 格式的視頻。另外暫時(shí)沒有看到對(duì)應(yīng)的 App 在手機(jī)上預(yù)覽,不過通過 Share 功能可以生成一個(gè)鏈接,發(fā)給別人之后就可以在手機(jī)上看了。 總而言之,XD 軟件的界面設(shè)計(jì)還算是比較有特色的,但是總體感覺,抄襲 Sketch 的影子太明顯,或許是我用 Sketch 太久的原因吧……另外,Adobe 有 PS 和 AI 的基礎(chǔ)我相信視覺設(shè)計(jì)部分肯定不會(huì)有問題,只是現(xiàn)在的交互部分還尚顯稚嫩。畢竟現(xiàn)在還只是 Preview 版本,相信 Abobe 在后續(xù)的迭代中會(huì)將打造得越來越好。 XD 官網(wǎng):http://www.adobe.com/products/experience-design.html#x
又要去熟悉新的工具…好累
?? ?? ??