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