Adobe Experience Design CC 2017 Mac简称Adobe XD mac版,一款专业的图形设计軟件,此版本是目前的最新版本,新版本提供了多种实用工具,在整体界面、资源模板、设计模式、原型模式上都有很大的改进,给您带来全新的设计界面,赶快下载体验吧!
視覺設計.原型設計.網頁設計.測試和演示都建成了XD.您可以添加交互和動畫爲了准確演示你的設計對客戶或團隊成員.部分原型工具,零件設計應用,XD是圍繞著兩個標簽:設計和原型.設計標簽功能簡單的矢量和文本工具,可用于創建您的設計.原型標簽預覽,並分享你的設計.完成,或者正在進行中,設計可以很容易地共享通過公共鏈接,甚至可以打開手機,允許任何人在其預期的背景下你的設計經驗.公司的目的是爲了減少摩擦從設計.原型,並在演示.
一、資源模板
打开軟件首先会弹出一个模板选择页面,这里为我们提供了 iPhone、iPad、Web 等常见的设计尺寸。同时自带了一个简单的演示文件以及 iOS、Google Material 和 Win Phone 的常用控件库。窗口右侧则是近期使用的文件记录。
二、整體界面
选择一个合适的尺寸,我们便进入了軟件的操作界面。和传统 Adobe 軟件界面相比,Xd 的界面要更接近于 Sketch,风格更加清爽,信息层级更加清晰。
整个应用可以分为设计和原型两种工作模式,这一点让工作流程变得更为清晰,用户也无需在多个軟件下来回切换。接下来我就两种模式展开介绍。
三、設計模式
我將該模式簡單的劃分爲了導航欄、工具欄、檢查器以及工作區四個區域。
用戶可以通過導航欄左側的按鈕在設計和原型兩種模式下進行切換。而標題欄右側則是顯示了當前視圖的縮放比例,同時提供了播放和分享功能的按鈕(此功能後續會相繼展開)。
左侧的工具栏提供以下几种常用的工具:选择工具、矩形工具、圆形工具、直线工具、钢笔工具、文字工具以及新建画板。对用的快捷键分别为:V R E L P T A 使用方法基本沿用 Adobe 其它軟件的用户习惯,所以在此就不展开介绍了。
右側的檢查器主要包括了對齊,布爾運算,對象尺寸、位置以及旋轉角度和外觀屬性。其中外觀屬性目前提供了透明度、描邊、填充以及投影這幾種選項。
Xd 的任意形状都可以看做默认的图片剪切蒙版,直接将图片拖放到相应的对象上,图片便会根据对象的尺寸进行自动缩放适配。需要的注意的是,如何你想再次编辑该图片的形状样式,需要再次新建一个你需要的形状对象,同时选中两者,按下 Command+【M】键来新建新的剪切蒙版。通过后者新建的图片对象是可以通过双击再次编辑图片位置和属性的。
除此之外,值得一提的是 Xd 提供了一种新的控制模式 Repeat Gird,在此我将其称作批量控制。选中任意对象后点击此按钮,对象的定界框会由蓝色变为绿色,同时在水平和竖直方向多出两个圆角矩形的按钮,点击并拖动按钮即可在不同方向上对该对象进行批量复制,同时可以通过点击对象之间的区域进行拖动来批量调整所有对象之间的间距。

工具區域默認爲淺灰色底色,目前不支持編輯背景色值。
四、原型模式
Xd 目前版本的交互方式只支持页面之间的跳转。操作过程倒是非常简单。在原型模式下选中任意控件,其右侧便会出现一箭头符号,用户点击箭头符号并拖动,将引导线拉至任意页面即可完成简单的交互动画。
與此同時,還可以通過點擊控件或其指向頁面側邊的箭頭符號來控制動畫類型和參數。目前提供的屬性僅包括頁面出現的方式、持續時間以及緩入緩出屬性。
用户可以在选中需要预览的页面后点击导航栏右侧的预览按钮进行预览操作。同时 Xd 在预览窗口的右上角提供了视频录制功能。用户可以点击该按钮开始录制,在完成交互操作后,再次点击该按钮完成录制并导出视频。视频格式目前仅支持 mov 格式。
除此之外,用户还可以通过点击导航栏右上角的分享按钮,来创建可以在线预览的链接。文件会默认储存在 Adobe Creative Cloud 的资源库内。同时也可以通过点击分享按钮下的 Manage Links 按钮来编辑及管理这些内容。
我们也可以选择在移动端打开该分享链接来进行实际操作和预览。由于 Safari 浏览器会保留一部分标题栏以至于无法实现全屏预览。所以笔者找到了开发同学,写了一个可以使浏览器内容全屏预览的小程序。除此之外,还可以选择 Chrome 浏览器来达到类似效果。