Adobe体验设计技巧，提示和技巧
当Adobe将体验设计作为公共预览引入时，该公司同时完成了两项相当惊人的壮举。首先，他们在新兴的原型设计软件市场中占据了一席之地。其次，他们为用户创造了一个“正在进行中”的机会，并让用户影响这一进步。现在应用程序已经推出几个月，我认为现在是分享一些体验设计技巧，技巧和技巧的好时机。
但首先，您可能想知道Prototyping Software的含义。这个领域的主要参与者包括Proto.io，Principle，UXPin，Atomic.io，Experience Design和InVision。与生成静态设计的Sketch 3，Photoshop和Illustrator等应用程序不同，这些图形编辑器引入了当今移动和Web设计空间中常见的交互性，运动和其他功能。
随着移动设备的兴起以及对用户不可避免的激光般的关注，设计师不再需要制作一些草图，将几个组合在一起，然后发布项目或将其上传到Web服务器。 UI / UX工作流程从根本上改变了一些事情。该过程的每个步骤，从识别用户，草图，线框，模型和原型设计，现在都要经过广泛的用户测试。
这是最后阶段 - 原型设计 - 在项目进入最终生产之前发现并修复了痛点。这是屏幕上所有内容的交互性，动作，屏幕转换和放置非常重要的地方。问题和问题不能简单地显示为静态图像或口头解释。毕竟，这些产品适用于真人。而不是将所有这些转移到代码中，原型制作过程越来越多地由专为此目的而设计的图形软件承担。使用可视化编辑器比不断重写和调试代码更容易修复错误，替换图像，重写某些文本，移动按钮等等。
事实上，该软件已成为当今“快速原型设计”设计和开发环境中的关键组件。
话虽如此，让我们体验一下体验设计。
07年02月在Adobe Experience Design中使用简单圆创建目标引脚
XD的一个优点是它使用了矢量绘图工具。找不到图标？没问题。滚动你自己。这是如何做：
- 选择 椭圆工具 并且，按下Option / Alt-Shift键，绘制一个圆圈。
- 选中圆圈后，设置 将颜色填充到FF0000 和物业中的“无”边界。
- 双击圆圈以显示锚点。向下拖动底部锚点。
- 双击选定的锚点，曲线将替换为线条。
- 绘制另一个带有白色填充但没有笔划的小圆圈。将其移动到位并选择销和圆。在“属性”顶部的“对齐”面板中，单击“水平中心”按钮，然后创建“销”。
在Adobe Experience Design中创建背景模糊
在背景图像上具有文本或其他内容是常见的。这里的问题是图像，往往超过它上面的内容。解决此问题的一种方法是模糊背景图像。您可以在Photoshop或其他图像编辑软件中模糊图像，但这有点低效，特别是因为XD现在可以为您处理此任务。这是如何做：
- 创建一个新画板并添加背景图像。
- 选择矩形工具a在图像上绘制一个矩形。选中“矩形”后，将“填充”设置为“白色”，将“笔划”设置为“无”。
- 选中矩形后， 选择背景模糊 在属性面板中。三个滑块是模糊量，亮度和不透明度。这是他们的所作所为：
- 模糊量： 调整形状下方图像的模糊度。最大值为+50。
- 亮度： 调整图像中的高光和阴影。最小值为-50，最大值为+50。
- 不透明度： 影响形状的透明度和形状下图像的可见性。值范围从0％到100％。
如果您真的想要“切换”，请更改形状的颜色并使用“不透明度”值来更改图像的“外观”。
07年04月在Adobe Experience Design中创建一个Scrim
常见的设计问题是界面元素元素必须是常见的颜色，但是当放置在背景图像或纯色上时会丢失。解决方案是稀松布。稀松布是在界面元素和背景之间放置的稍微不透明的渐变。这在XD中很容易实现。这是如何做：
- 在XD中创建画板，添加图像并复制和粘贴适当的界面元素 UI工具包 - 文件>打开UI工具包 …… - 进入画板。在上图中，照片使状态栏和App Bar难以看清。
- 选择矩形工具 并画出一个矩形。在“属性”面板中，选择“填充”，然后从“颜色选择器”中的弹出窗口中选择“渐变”。将渐变颜色设置为黑色和白色。 将A值 - 不透明度 - 设置为60％ 和 白色A值为0％。
- 选中矩形后， 选择对象>排列>向后发送。界面元素现在在图像上可见。
在Adobe Experience Design中创建图像头像
在聊天应用程序中可以找到一种常见的设计模式，人们可以相互交谈，并且屏幕上会显示扬声器的图片。这些头像通常是被掩盖的图像。在XD中完成这个很简单。这是如何做：
- 您从美工板上的图像和圆形或其他形状开始。您可以用任何颜色填充圆圈。您不需要做的是添加笔触颜色。当你创建效果时它会消失，所以为什么要这么麻烦。如果确实需要加速圈，请将其复制到剪贴板。
- 将圆圈移动到图像上，然后选择图像和圆圈。选择bot对象后， 选择Object> Mask with Shape。释放鼠标时，将创建“头像”。从那里你可以调整它。
- 如果您需要添加笔划，请将位于剪贴板上的圆圈粘贴到画板上。选择副本后，关闭“属性”中的填充并添加笔触颜色和宽度。要对它们进行排列，请选择两个对象，然后单击属性面板顶部“对齐”选项中的“居中对齐”按钮。
- 如果你想在面具中移动照片， 双击面具。 这将显示图像和蒙版形状。单击图像并将其拖动到位。释放鼠标时，图像将位于蒙版内的新位置。
使用Adobe Experience Design Artboards
体验设计画板不仅适合您放置内容。他们也可以被操纵。您可以执行以下操作：
- 如果需要画板的横向和纵向版本，请复制画板，然后在选中副本的情况下，单击“属性”面板中的横向按钮。画板将更改为横向。如果画板上有内容，请单击画板名称，画板属性将显示在“属性”面板中。
- 要向Artboard和项目添加自定义颜色，请选择“画板”，然后单击“属性”面板的“外观”部分中的“填充颜色”芯片。输入颜色的十六进制值，然后单击+号。颜色将添加为自定义颜色。要在其他位置应用该颜色，请选择一个对象，然后单击“自定义颜色”芯片以应用该颜色。
- 画板可以垂直滚动。要执行此操作，请选择画板并在“属性”面板上或通过向下拖动画板底部来更改其高度。在属性面板的Scrollable区域中，从弹出菜单中选择vertical，然后输入屏幕的视口高度。蓝色虚线表示视口的底部。要测试它，请单击“播放”按钮并滚动。要关闭滚动，请在“滚动”下拉列表中选择“无”。
在Adobe Experience Design中编辑移动UI工具包
Experience Design包含用于开发iOS，Android和Windows UI的UI工具包。当你第一次打开它们时，你可能会认为它们设置得很好。不完全 - 这些套件中的每个零碎都是完全可编辑的。让我们通过构建Android线框来找到答案。
- 首先选择Artboard工具并选择 属性面板的Google部分中的Android Mobile.
- 选择文件>打开UI工具包> Google材料。这将打开Material Design UI Kit。选择放大镜和选框他屏幕指南画板。我喜欢从这个开始，因为它为我提供了适当的屏幕上放置界面元素的指南。如果您单击其中一个蓝色条，您将看到它已被锁定。 单击附加到每个锁的锁以解锁它。选取画板并将选区复制到剪贴板。返回到您的文档并将屏幕粘贴到您的画板中。
- 在美工板顶部的应用栏上单击一次。请注意如何选择它。选择“对象”>“排列”>“置于前面”。 您的选择现在位于屏幕指南之上。这应该告诉您屏幕上的每个元素都可以编辑。
- 双击状态栏 在顶部，在属性面板中等填充颜色为455A64。双击App Bar并将其填充设置为607D8B。这应该告诉您可以编辑UI工具包中的每个元素以满足项目的颜色规范。
- 图标怎么样？这是改变颜色的方法。 双击心脏 选择它。如果查看“属性”面板，可能会认为无法编辑选择。不完全的。 再次双击心脏。打开属性，然后将填充颜色更改为FF0000。对剩余的图标和文本重复此双击双击技巧。
