Adobe Experience Design CC(Preview)概览

去年 Adobe 就在网站上放出了 Adobe Project Comet 的简介和视频,如今已经可以下载到 Preview 版本体验试用了,当前版本将软件更名为 Xd(文件格式也是.xd),莫名戳中笑点......

目前,XD 暂时只有 Mac 版本,不过官网已经明确表示 Win 版即将推出,所以大家也不用担心。简单来说,XD 是一款矢量化图形设计+简单原型制作的软件,有点类似于 Sketch+Silver 的组合。鉴于 Silver 我申请了但是一直没有机会试用,所以也不好将两者对比,因此就简单给大家做一个 XD 的概览简介。

首先是打开软件的首页:

可以看到支持的设备与尺寸还是比较丰富的,同时还自带了一些常用的UI Kits,比如 iOS、Google Material 等。这样就可以帮助设计师快速从素材库选取内容搭建页面,十分方便。

整个软件的界面非常清爽,如果你对 Sketch 的使用很熟悉,那基本不需要任何额外的学习就可以直接上手使用。

上图就是 XD 的主面板了,左边分别有选中、插入矢量图形、钢笔、文字还有画板(Artboard,与Sketch类似),是不是很熟悉?右边就更简单了,选中不同类型的元素时就会出现相应的编辑内容,比如阴影、颜色、对齐、布尔运算还有生成表格等。对于矢量元素可以方便地添加、删除、编辑锚点,配合钢笔可以做出任何你想要的图形。

一个神奇的功能叫做 Repeat Grid,实际效果就是可以通过拖动来快速直观地生成一个 Gird。看我说起来好像和Sketch或者PS的同类功能没什么区别,但实际试一下就会发现XD的交互方式更佳直观简便。

鼠标按住某个间距时,会直接显示数值。并且如果你对间距进行拖动的话,可以让整个 Grid 间距跟着变化,整个过程只需要鼠标不需要其他额外的快捷键辅助。

图片的添加和替换也很容易,直接把 png 丢到对应的位置,XD 会帮助你自动匹配。当然如果不满意再自己调整就好。

其实设计部分这些功能就足够了,深层次的操作大家可以挖掘一下。下面介绍一下原型(Prototype)功能。

在界面的左上角可以快速在 Design 和 Prototype 切换。在 Prototype 界面下,选中元素会发现右边出现了一个小箭头,并且可以选择简单的动画类型和参数:

比较遗憾的是目前 XD 中只能做到页面的切换,也就是让另一个页面从不同的方向滑入切换原本的页面,最多也只能做到淡入淡出,想要让某个元素单独飞出来目前应该是做不到的。不过我觉得既然主打了原型功能,Adobe 应该不会只满足于页面切换吧,稍微来点复杂的效果嘛不然可满足不了日常需求。

软件自带了预览功能,可以在 Mac 上直接查看效果,当然也可以通过点击实现简单的交互。软件可以直接实现录制,不过好像尺寸分辨率都不能调整,目前只能导出 mov 格式的视频。另外暂时没有看到对应的 App 在手机上预览,不过通过 share 功能可以生成一个链接,发给别人之后就可以在手机上看了。比较郁闷的是不知道是不是我打开的方式有问题,链接一直没有打开成功。

总而言之,XD 软件的界面设计深得我心,Adobe 有 PS 和 AI 的基础我相信视觉设计部分肯定不会有问题,只是现在的交互部分还尚显稚嫩。话说回来这还只是 Preview 版本,相信 Abobe 在后续的迭代中会将它越来越完善。

点击原文查看 XD 官网,有视频等介绍,比文字直观多了。

时间: 2024-08-18 15:50:48

Adobe Experience Design CC(Preview)概览的相关文章

EXPERIENCE DESIGN CC简单体验概览

  Windows也有Sketch可以用了!前两天Adobe 全家桶刚加入了一款新产品叫Adobe Experience Design CC,今天@窒息红Leon 带大家一起体验下Preview 版本的各个特点. 去年 Adobe 就在网站上放出了 Adobe Project Comet 的简介和视频,如今已经可以下载到 Preview 版本体验试用了,当前版本将软件更名为 Xd(文件格式也是.xd),莫名戳中笑点-- 目前,XD 暂时只有 Mac 版本,不过官网已经明确表示 Win 版即将推出

EXPERIENCE DESIGN CC 体验版使用详细评测

  一.资源模板 打开软件首先会弹出一个模板选择页面,这里为我们提供了 iPhone.iPad.Web 等常见的设计尺寸.同时自带了一个简单的演示文件以及 iOS.Google Material 和 Win Phone 的常用控件库.窗口右侧则是近期使用的文件记录. 二.整体界面 选择一个合适的尺寸,我们便进入了软件的操作界面.和传统 Adobe 软件界面相比,Xd 的界面要更接近于 Sketch,风格更加清爽,信息层级更加清晰. 整个应用可以分为设计和原型两种工作模式,这一点让工作流程变得更为

win7系统如何安装Adobe after effects cc软件

  具体方法如下: 1.首先下载好我们的软件,解压之后打开文件夹,找到红色的安装程序; 2.双击打开安装程序,弹出图片中的提示框点忽略,不弹出直接进入下一步,等待软件安装初始化完成; 3.初始化完成之后,出现安装页面,购买和试用,这时关闭我们的网络,使电脑处于脱机状态,点击试用,出现登录按钮; 4.点击登录提示网络连接失败,我们点击稍后再试; 5.这时会弹出安装页面,选择安装磁盘,点击安装; 6.等待程序安装完成; 7.提示安装完成之后,关闭我们的软件,在开始菜单找到Adobe after ef

Adobe Premiere Pro CC视频处理软件新特性

  Adobe Premiere Pro CC在Premiere Pro CS6的基础上进行了重要的改进并增加了新的功能.重点包括增加多GPU支持,使用户利用所有的GPU资源,让多个Adobe Premiere Pro CC工作在后台排队渲染,有效提高速度;重新设计了软件界面以及时间线,提供新的选择性粘贴属性对话框;新的"链接"和"定位"帮助用户轻松找到编辑过程 中所需的文件;在Muticam编辑中加入了多轨音频同步功能;提供全新的隐藏字幕功能;内置更多的编解码器和

《Adobe Premiere Pro CC完全剖析》——第1章 在Adobe Premiere Pro中编辑 与格式无关

第1章 在Adobe Premiere Pro中编辑 作者:Jeff I.Greenberg 这一章一度被叫作"编辑的新方法",可惜它已经并不新了.这种方法大约有三或四年的历史,最早在CS5中被引入.那么,这个"新"的编辑方法是什么呢?它的基本观点是:不要让工具成为你的障碍. 只需要将素材拖到一个项目然后开始编辑. 使用任何你认为对工作来说最好的工具. 曾经,你会受到可用视频格式的限制.如果你的软件不支持这种格式,你必须逾越各种障碍来让素材可以使用(参见本章后面&q

Adobe Experience Cloud:重新定义用户体验

数字化转型正在重塑企业的方方面面.企业若想在这个IT技术时代立于不败之地,就必须走上数字化转型之路.成功的数字化转型需要企业紧密的协作.周到的规划,以及所有部门之间的相互理解.除此之外,数字化时代是以客户为中心的一个时代,客户体验也是企业致胜的一大关键. 数字化转型:客户体验是区分企业的最重要因素 在这个数字化时代,企业越来越多地发现,客户比以往更加理智,更加谨慎,他们不会再盲目地消费.如果某一企业的价值观和需求与客户不符,他们就会离开选择其它产品,毕竟选择还是很多的.但是,顶级的客户体验是吸引

《Adobe Flash Professional CC经典教程》——第1课 工作流程1.1 启动Flash并打开文件

第1课 工作流程 课程概述在这一课中,将学习如何执行以下任务: 在Flash中创建新文件 调整"舞台"设置和文件属性 向"时间轴"中添加图层 在"时间轴"中管理关键帧 在"库"面板中处理导入的图像 在"舞台"上移动和重新定位对象 打开和使用面板 在"工具"面板中选择和使用工具 预览Flash动画 保存Flash文件 访问Flash的在线资源 完成本课的学习需要不到1个小时的时间.先从光盘

《Adobe Flash Professional CC经典教程》——1.2 了解工作区

1.2 了解工作区 Adobe Flash Professional CC的工作区包括位于屏幕顶部的命令菜单以及多种工具和面板,用于在影片中编辑和添加元素.可以在Flash中为动画创建所有的对象,也可以导入在Adobe Illustrator.Adobe Photoshop.Adobe After Effects及其他兼容应用程序中创建的元素. 默认情况下,Flash会显示"菜单栏"."时间轴"."舞台"."工具"面板.&qu

《Adobe Flash Professional CC经典教程》——1.13 查找关于使用Flash的资源

1.13 查找关于使用Flash的资源 Adobe Flash Professional CC经典教程为了获取关于使用Flash面板.工具及其他应用程序特性的完整的.最新的信息,请访问Adobe网站.选择"帮助">"Flash支持中心",将连接到Adobe专业帮助网站,可以在那里搜索Flash的帮助和支持文档,以及与Flash用户相关的其他网站.论坛.产品指南和升级等. 注意:如果Flash在启动时检测到没有连接到网络,选择"帮助">