去年起就开始关注 Adobe Project Comet 这一软件，今日得知终于发布了正式预览版本，同时改名为 Adobe Experience Design CC。于是第一时间下载了软件，趁热写了这一份评测。

一、资源模板

• 打开软件首先会弹出一个模板选择页面，这里为我们提供了 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 浏览器来达到类似效果。

五、功能小结：

1. 无标尺功能，在不拖动物体的情况下无法做到如 PS 或 Sketch 一样，直接查看对象之间的间距尺寸。
2. 无缩放工具，目前仅支持通过 Command + 【+/-】进行视图缩放,无法做到如 Sketch 一样做到针对特定对象的聚焦缩放。
3. 无像素预览模式，所以无法做到图标边缘的像素对齐，在输出 PNG 格式切图时会出现边缘模糊的情况。
4. 目前仅支持纯色填充，无渐变或其他选项。
5. 文字属性目前仅支持对齐方式及字间距的调整，无行高、段落等选项。
6. 支持编辑节点 ，但无端点、交点、虚线、闭合路径、描边扩展等选项。
7. 圆角矩形无法如 AI 一样，单独调整某一圆角的度数。
8. 支持页面之间的交互跳转，不支持同一页面控件间的位移、缩放及透明度动画。

所以目前版本的 Xd 是无法独立完成界面以及图标的绘制。当然，这些问题对于 adobe 来说应该不存在技术难点。问题在于 Xd 的定位是一款需要与 PS、AI 协作的轻量化交互原型工具，还是更趋于独立。或许 adobe 本身也在思考与观望，V0.5 版本也仅是投石问路的一次尝试。



除了上述简介以外，官网也为我们提供了4个基础的入门教程，在这里附上地址链接：https://helpx.adobe.com/experience-design.html

总而言之，Xd 作为一款新的交互软件，在它的身上我们能够看到不少新兴工具的身影。同时也能看出 Adobe 公司突破其已有软件束缚，所做的一些新尝试。虽然软件本身还有着许多不足之处，但对于产品设计师来讲，它的一些功能还是可圈可点的。正如其官网所述：A new experience in user experience。作为 V.0.5 的预览版本，或许我们应该对其多一些包容，也期待 Adobe 能够给我们带来更多新的惊喜。

从电商视觉设计转型到UI设计，近半年来摸爬滚打也算刚刚入了互联网行业的大门，结合这一段时间的工作经验与阅读所得，将互联网产品方案设计的几个阶段总结于此，借此梳理一下思维，也希望能够给新人一些帮助。

阶段一：市场调研及换位思考（战略层）

明确商业目标和用户目标，在两者之间寻求平衡

1.公司角度：站在市场以及需求方的角度，思考该产品的产生背景、设计目的、运营方式，开发周期以及预算。

2.用户角度：对用户场景、需求、痛点进行综合分析，评估产品方案的可行性，总结产品设计过程中需要注意的事项。

阶段二：构思与可视化（范围层）

确定产品功能框架，确定产品需求及开发优先级

1.用户调研：

识别和理解目标用户，做好用户需求采集工作，具体方式不在此展开。

2.竞品分析（竞品分析从阶段一即可开始，并贯穿于整个开发过程）：

同类需求功能实现方式的参考。

重要功能或特色功能的场景与竞争力。

PGC和UGC的质量与风格。

重视内容与功能的实际使用感受，而非表面框架及产出数量 。

3.思维导图（发散与归纳）：

围绕一个点，对外扩展分支，无固定逻辑。

可使用多色彩来表达，让图表更清晰，分类更明确。

完成头脑风暴后，将想法进行分类归纳，精简出大的产品功能框架。

阶段三：原型与打磨 （结构层、框架层）

完成信息架构与交互设计

1.草图绘制（思维可视化）：

将产品的各个功能模块在纸上具体化，绘制出主要页面的草图方案，这种做法成本低、速度快、便于修改。

2.原型制作

使用原型绘制工具制作出产品初步原型，丰富产品内容，优化交互逻辑和用户体验，从情感化角度进行润色。

3.方案评估

针对原型方案进行评估测试，进一步检验产品的可用性与易用性，查漏补缺，不断优化。

阶段四：风格界面设计（表现层）

1.定义视觉风格

2.视觉信息分层

3.细化产品元素

4.优化用户体验

产品设计流程比较复杂，过程中的每一点都可以逐条展开，我在这里只罗列出了方案设计的大致流程以及每个阶段需要注意的要点。以上几个阶段既可用于产品初期开发，也适用于后期功能迭代，以及推广运营活动的方案策划。根据产品、活动的开发周期和成本，以及团队的具体情况，亦可灵活变通，因地制宜。

如果你对我感兴趣，或者对这篇文章有任何想法和建议，欢迎随时和我交流。

参考文章：《我的产品设计流程》，《我的交互设计流程》    参考书目：《用户体验要素》