UX线框图和原型设计,Stock 中选择模板

作者:色剂产品    发布时间:2020-01-01 23:37    浏览::

图片 1

陈小姐有话说:在各门各类原型设计工具喷薄而出的年代,逗比(Adobe)公司又怎么能眼看市场分量被抢夺呢?所以在去年,他们终于推出了涵盖UI设计&交互设计的大杀器——Adobe Experience Design(简称Adobe XD)。这款新工具从零开始,虽然目前只拥有为数不多的几项小功能,但对UI设计基本够用,而且它很有竞争力的一点是——可以做!原!型!虽然目前只能实现页面跳转,但是我相信,凭逗比公司的实力,日后肯定能再进一步。这份更新日志是官方最新推出的,介绍了比起以往新添加的功能,小伙伴们可以作为参考。

每一位设计师都有自己钟爱的原型设计工具。但是当谈及UX线框图和原型设计的时候,通常就不止涉及一款工具了。迟早,你会发现你自己会在各种工具中挑花眼,只为找到一款合适的工具。我们由衷的感谢 Adobe 以及 Elaine Chao 为我们撰写这篇文章提供了便利。

脱水版

1、重复网格中的文本元素的样式会应用到每个元素,但是内容不会,而且可以通过拖拽的方式将txt文本导入并替换重复网格内的文本内容。前提是txt文本一个数据一行。

2、重复网格内的图形元素接受拖拽导入图片,并且图片会自动匹配图形的形状,同样可以使用拖拽的方式同时导入不同的图片。

3、元素之间、组之间的间距可以随时可视化调整。

4、可以取消重复表格,对元素进行个性化的编辑。

5、重复表格中的元素、组、整个重复表格都可以作为交互动作的触发区域。

6、以下正文不想看字,可以直接看动图。

图片 2

Adobe XD自发布以来,四个月更新了四个版本,年底还将推出Windows 版,值得期待。

下面是原文翻译:

Adobe去年10月发布的 Project Comet 提供了一个快速有效的一站式解决方案。几个月前,一个神秘代号的软件被泄露,并且发布了公众预览版:Adobe Experience Design CC(Adobe XD)。专为快速流畅的用户体验而设计,XD捆绑了一切你所需要的:勾勒想法,创建交互原型图,测试以及分享

正文

如果你是一个视觉设计师,你可能花了大部分时间在小的调整和重复的可视化元素上,有可能是你的客户要求扩大元素之间的间距,也有可能他们想要所有的头像都改成圆角,任何的一种要求,你会发现你得重复调整。

In Adobe Experience Design CC (Beta)可以通过重复网格这个功帮助设计师来从这些单调繁琐的工作中解脱出来。本文将讲解这个功能的厉害之处。欢迎大家下载试用。

Adobe在2016年11月迎来了全新的2017年版本,所有组件都焕然一新。Photoshop自然是设计师和摄影师最关注的,这次Photoshop CC 2017也没有让我们失望,加入了大量实用、强悍的新功能。

也许是因为现在只有Mac版,但别忘了, Windows 版本今年晚些时候就会推出了,相对于某些竞品,Adobe 能想着推出 Windows 版已经是天地良心了……

本人代表整个Adobe XD团队,激动地宣布:XD的最新月度更新2016.06版本已经可以下载使用了。

为了给你们使用XD创建一个良好的开端,我们精选了15个专业技巧,包括你可能在第一次使用XD的时候不会发现但是能够让你的原型设计流程更为流畅的性能。我们整理了所有的快捷键放在一个PDF文件中(97KB),你可以从这里下载。

1、创建和调整一个重复网格

一个重复网格就是一个特殊形式的组,就像创建组一样,我们选择对象然后把对象转化成重复网格。在这个练习中, 我们会创建一个包含头像和姓名的简单电话联系表。

1.快速创建项目文档

而且现在已经有日文、德文和法文版,下一个就是韩文版了,中文还会远吗!

我们力争制作出一款设计师喜爱的产品。我们十分关注来自用户的声音,无比感谢大家的评论、投票和建议,这些都可以帮助我们琢磨XD的功能并确定优先级,设计新的功能。感谢所有的反馈,并恳请大家一直给予我们建议。

Adobe XD现在还处于公测阶段并且可以免费下载,即使你没有注册Creative Cloud。而且还会定期添加新的功能。请注意,Windows版本还是开发中,要等到2016年的晚些时候才会发布,目前Adobe XD仅能在Mac OS X平台上使用。

步骤1:创建初始对象

1、在欢迎屏幕,随意选择一个画板类型开始一个新文件。

2、使用矩形工具画一个长方形(R)

3、在矩形的右边,使用文本工具(T),输入一些占位文字。

4、切换到选择工具(V),选择这两个对象,可以通过选框选择(在两物体周围框选),或者通过先选择一个对象,然后按住Shift的方式选择另一个对方。

请注意,这里不需要画得很精确,我们可以稍后调整这俩元素。

现在,在 Photoshop 中建立文件时,不再以空白页面启动,而是可以从 Adobe Stock 中选择模板。模板包含众多可用以完成项目的资源及插图。

好了,废话少说,来看看现在的Adobe XD到底成啥样了。

事不宜迟,让我们一起来感受新版本吧。

重复网格(Repeat Grid)

步骤2:创建和调整重复网格

1、在右侧的属性检查器中单击“repeat grid”按钮,或使用快捷键Cmd + R,把选中的这俩元素转换为一个重复网格。

现在得到一个重复网格,你现在可以看到两个绿色的圆角矩形,一个在右边,一个在底部,四周是绿色的虚线。

你可以对任何物品创建重复网格

2、单击并拖拽右侧的圆角矩形 到出现重复的内容。同理,拖拽底部的圆角矩形到出现重复的内容。

现在就有重复元素在重复网格里了。重复网格适用于所有的元素,不只是矩形和文字。

除了模板,你还可以从 Photoshop 预设集里选择或自定义大小来建立文件。当然也可以储存自己的预设集以便重复使用。

四月份

这次更新了什么新内容?

添加重复网格

为了免去你手动复制拷贝元素的麻烦,XD提供了一个功能叫做Repeat Grid。选择你要重复的条目,点击右侧属性查看面板中的repeat grid按钮(或者使用快捷键Cmd+R)。现在你就可以拽动绿色的控件来重复你的条目了。当你拖拽的时候,你可以按住Option键从中心位置向四周扩展进行重复网格的操作。这个对于想要保持群组元素始终位于画板中心的操作来说非常好用。

图片 3

点击查看动态gif图

步骤3:调整重复网格中的任意元素

我们可以双击来选中重复网格里的组件元素。更改元素后,可以按Esc键退出更改。我们也有其他的方法编辑组件元素。例如,可以深入到图层面板的中(Cmd

  • Y),或者直接选择(Cmd + Click)。

1、使用选择工具(V),双击任何重复网格。你可以看到一个浅蓝色的边框在你需要编辑的对象的周围。选择或者拖拽你的元素,在参考线的帮助下,可以更容易的对齐前面的矩形框。

2、单击文本对象,在右边的属性栏里可以改变字体和字号,重复网格内所有的文本对象都随着改变。

3、按Esc 退出编辑,在画板里拖动一个文本框,对齐前面的矩形。

调整一个所有的都会变化

打开方式:使用快捷键打开文件或新建文件来打开此对话框。

尺寸助手

我们从讨论区那里看到说给开发人员传递有价值的信息在工作流中很重要,所以我们首先为你的手机和网页工作流做了准备工作。我们开发出了这个属于一系列旨在给予开发人员所需信息来执行像素级设计的工具之一的尺寸助手。

尺寸助手用起来像桌上的直尺。选中画布上任一对象,无论哪个都可以,就会出现水平线、竖直线,并在上面显示距离尺寸。

启动尺寸助手

1.选中对象后,按住Alt/Option键,XD会显示这个对象四个边缘到艺术板的距离。当你在建立一个拥有固定位置的对象时会非常有用。

2.选中一个对象,按住Alt/Option键,将鼠标悬浮至其他对象之上,XD会显示两个对象之间的距离。

3.如果在视觉上一个对象在另一个对象之内,XD也可以显示它们之间的距离。

4.当两个对象的坐标轴不相交时,我们利用向导显示它们之间的距离。

5.当对象被旋转了,我们会计算、显示包裹它的长方形各边到其他对象的距离。

6.当你在移动对象时也可以看到尺寸助手。按住Alt/Option键,同时轻轻移动你的目标,你依然可以看到距离。

进入和退出编辑状态的内容

重复网格的操作会被看作是一个群组。如果你想在你的重复网格中为所有的条目添加内容,双击即可进入内容编辑,绘制,黏贴以及添加元素状态。这个功能避免你每次必须先解组然后再重新群组的麻烦。跳出群组或者重复网格,点击Escape键即可。

图片 4

点击查看动态gif图

步骤4:调整行和列的间距

现在我们创建好了重复网格,我们可以开始调整重复表格内行和列的间距。选中重复表格,也就是出现绿色虚线框的时候,鼠标悬停在元素之间可以激活行和列的调整指示,调整他们到我们需要的位置。

1、把你的鼠标悬停到文本元素的右边,也就是矩形的左边,不是文本元素的左边和矩形的右边,一旦出现粉红色的列指示,鼠标左右拖动,直到顶部的间距数字变成30。

2、同样的,鼠标悬停到上下两个矩形之间,鼠标上下拖动,间距也变成30。

3、继续调整各个元素之间的间距以及重复网格的大小直到你的画板里都是完整的元素,没有被切断的现象。

你可以轻松的调整行和列的间距

你可以把任意一组对象转换成为重复网格。当这些对象成为重复单元网格,你就可以批量编辑他们了。

如果不喜欢这种形式,可以在“首选项 常规”里选择旧版新建文档。

辅助网格

背景和对象模糊

随着这项功能的开启,你可以为任何形状或文字添加模糊效果了。

XD支持两种模糊:

· 对象模糊:模糊对象本身。

· 背景模糊:模糊对象的下层对象。

对象模糊:直接模糊你选中的对象。你可以利用侧边栏控制模糊的数值。

背景模糊,当视觉环境有焦点相当时,帮助你强调中一个具体的对象。这个效果经常用在iOS、macOS和Windows系统。

背景模糊有三个设置项:

· 模糊值

· 亮度(从暗到亮)

· 不透明度(改变元素填充的透明度)

调整空白边

想调整网格中的空白边?选择重复网格,悬浮在条目之间的空白处进行拖拽直到你想要的空白边出现为止。XD还提供了即时显示数字的功能,因此可以让你对各个元素之间的距离一目了然。

图片 5

点击查看动态gif图

2、在重复网格中使用数据

现在我们有了联系人列表的整体形状,我们可以在其中填充内容,最简单的方式是逐个编个元素。

2.程序内完整搜索功能

在这个版本中,我们可以定制网格画板,当需要更精确的布局时可以设置标准间距,当画板启用网格后,对象将自动与网格线对齐。

将原型嵌入网页

除了分享链接,你现在可以将原型嵌入网页了。这个同样允许你添加你的原型至Behance,这样每个人都能在网页环境下体验它们了。

只要你打开LINK  >嵌入,XD将为您提供一个iframe HTML代码段。

插入数据

使用真实数据进行设计是XD的另一非常棒的功能。和为每一个元素使用相同的替代文字不同,你可以从资源管理器中拖拽任何Return-separated TXT格式的文件到你的文字组件以保证网格中文字内容的独特性。

图片 6

点击查看gif图

步骤1:更新单个文本元素

1、Cmd +点击文本对象,在重复网格以选中它,进入重复网格,编辑输入文本模式。

2、双击文本,编辑文本内容,让文本看起来像一个名字。注意,重复网格中的其他文本的内容不会变成这个文本的内容,只有文本的样式会变成这个文本的样式。

Photoshop 现在具有强大的搜寻功能,可在ps软件中快速查找工具、面板、学习内容、Adobe Stock 资源等等 。 全都来自同一个对话框。可以在启动 Photoshop 后或当开启一个或多个文件时,立即搜寻项目。

文本调整

增加语言支持

除了英文版,XD现已推出日文、德文和法文版,日后也将会有更多的版本发布。

绘画

步骤2:创建一个图像填充模式

1、拖一个图像到一个矩形框,来导入这张图。这张图会自动填充到矩形区域,我们称之为自动蒙版。

2、把第二个图像拖拉到第二个矩形。我们定义重复网格的阅读顺序为从左到右右,从上到下。注意,现在重复网格显示的是第一张照片和第二张照片交替出现。现在我们已经创建了一个包含有两个照片的阵列。

3、把第三个图片拉到第四个矩形框内,不是第三个矩形框。我们就有一个4张照片重复的模式,第一个第三个是相同的照片。

4、把第四个照片放到第一个矩形框内,这个替换了在你四个照片阵列里面的第一个元素,这次在你阵列里面的四张照片就是不同的了。

你可以用图片和文字来覆盖重复网格中的对象

文本的覆盖的概念:我们可以更改单独一个文本框本身自己的文字,但是风格和样式是重复网格内所有文本的。然而我们可以构建和自动蒙版相同概念的重复阵列文本,创建与图片有关联的文本。例如,如果你把第三个图片放到第三个矩形框内,你就会创建一个3图片阵列的模型,相似的如果你把一个图片放到第五个矩形框里就会床架你一个5图阵列的模型。

然而我们提前就准备好的内容才真正能让我们感觉到乏味。

打开方式:①选取“编辑 搜索”;②使用快速键;③在工具选择栏的右侧点击搜索图标 ()。

加入调整文本行间距的选项。

下一步会有什么?

画板网格(Artboard grids)

当使用钢笔工具的时候,画板网格提供了更多的方向选择。它可以让你拖拽对象对齐到网格,也可以让你一边绘制一边将你的锚点对齐到网格。启用网格(Grid)功能,点击位于工具栏上的画板图标,在右侧属性面板中的 网格(Grid) 选项中打勾即可。这里你也可以根据你的喜好修改网格的尺寸和颜色。

图片 7

点击查看动态gif图

步骤3:拖动文本文件到你的文本对象

1、创建一个文本文件,后缀为.txt。你也用Mac的文本编辑器创建(选择格式>纯文本)或者你喜欢的任何文本编辑器。每个数据独立一行。

2、存储这个文件,从Finder拖到重复网格的文本对象,就会导入到Adobe XD。

现在我们的对象重复基于文本文件的行数。如果我们的文本文件有四行,它将每一行文本对象和将前四后重复。

以下为搜索面板案例:

在接下来的几个更新中将有更多文本属性设置功能。

回到以前的艺术板

这个特征对返回按钮会非常有用,你可以使用更少的连接线,拥有更多的动态行为。

从中心位置绘制和调整尺寸

想从中心位置绘制和调整大小?按住Option键。

图片 8

点击查看gif图

步骤4:选择图像文件拖到你的矩形框内

1、在Finder中,选择若干图片。

2、拖拽到重复网格的矩形框内作为矩形框的填充内容。

3、选择矩形框的一个角来改变圆角大小,所有的操作,都可以看到界面给出反馈。

一次拖进来一张图片,你就创建了一个重复填充模式的阵列。然而就像文本一样,任何改变都会传递到所有的对象。

你可以轻松的修改重复网格的内容,也能通过拖入源文件的方式轻松的更改内容。注意数据是导入的,不是链接的,所以你对源文件做任何更改都不会影响Adobe XD里面的数据。文本的样式和元素的形状会应用到重复网格的其他元素上。

All tab

设计改进

缩放工具

我们根据反馈,添加了一个利用空格键和cmd键的临时的缩放工具。工具栏上的缩放工具即将发布。

贝塞尔曲线(Bézier Curves)

在XD中可以轻而易举地创建贝塞尔曲线。任何你用钢笔工具绘制的锚点只需通过双击就能转变成曲线。从曲线转换回直线的点再次双击即可。

图片 9

点击查看gif图

想要创建不对称的曲线,按照上述做法,按住Option键拖拽并且旋转控制点调整曲线即可。

图片 10

点击查看gif图

3、给重复网格增加内容

现在我们有了一个相当充实的联系人列表,我们可以继续我们的设计,逐步完成从我们同事和利益相关者那里接受到反馈。在这种情况下我们可能要增加元素,重复网格使得这变得很容易。

用我们的例子,我们会增加一个水平线区分离各个项目。

Learn tab

在第一个预览版中,我们可以为一个矩形的四个角设置一个半径,也可以通过“alt”编辑每个角的半径。现在,直接在属性检查器就可以单独对每个角进行设置。

导入、导出PDF

PDF在剪切板里非常常用,下次的更新将提供从其他软件比如Sketch、Keynote中复制、粘贴它们。你也同样可以导出选中的艺术板为PDF格式的文件。

附原网址:

陈小姐的絮絮叨叨:其实XD里有很多连Sketch也比不上的好用功能,爱尝试的朋友们去下载试试吧,毕竟现在在对Mac(没有Windows版本)用户免费体验:-D。

打开路径

如果你有一个闭合的路径,当你第一次选择钢笔工具的时候,起始点和结束点会高亮显示。点击此点会打开路径,这样你就可以根据需要继续绘制和改变形状。

图片 11

点击查看gif图

步骤1:在编辑环境下画

1、进入到重复网格的编辑环境

2、在项目下,通过线工具(L)按住shift拖拽来画一条水平线。

3、用选择工具,调整线的位置,直到和左面的矩形框对齐。

4、Esc 退出编辑环境。

我们可以在编辑环境下画任何元素或者增加文本。重复网格可以自动的覆盖每个元素,这就使得我们可以用一种新的更自由的方式区设计。

我们增加了一条线,但是现在每个项目之间还有重叠,在视觉上看起来就是很混乱的,我们需要把两个项目之间的间距进行调整,当这种情况发生的时候,在重复网格的行或者列的间距设置种会为一个负数。

Photoshop tab

拖拽功能

关闭智能辅助线

智能辅助线可以让你对齐任何元素到画板:例如邻近两个对象的距离,画板的边缘和中心以及其它对象。如果这些让你过于分心或者你的画板过于复杂,你可以在拖拽的时候按住Cmd键关闭这些智能辅助线。

图片 12

点击查看gif图

步骤2:调整负间距

1、鼠标悬停在重叠空间,抓住矩形框的顶部或者底部向下拉,直到不存在重叠,然后进行下一步。

增加元素扩展项目会导致负间距

我们解决了这个问题,但是我们已经创建的元素该如何添加呢?我们可以不用从一个地方粘贴到另一个地方。

Stock tab

这个版本中,我们不但可以从浏览器中将图片拖放到XD画布,还可以直接将txt纯文本文件拖入XD。

修改不透明度

快速修改对象的不透明度,选择对象然后开始输入数字即可。9=90%,8=80%,等等;0则将不透明度返回到100%。

图片 13

点击查看gif图

步骤3:在重复网格编辑环境下的剪切和复制

1、下载星星和旗子的svg文件到剪贴板上,并放在你画板外。这就是把星星文件导入到你的文件。

2、把导入的图形转化为一个重复网格,然后拖右面的拉手,直到你有总共四个星星。调整内间距,使他们更紧密

3、剪切(Cmd+X)带有星星的重复网格,然后双击你联系表里面的任何一个项目进入到编辑环境。

4、粘贴(Cmd+V)你带有星星的重复网格将会出现在你项目中间,然后移动到文本下面

有时候我们想要拆开重复网格,因为我们有时候想与后面的对象独立开来。为了实现这个目的,我们会取消重复网格来方便我们进行更改。

1

支持嵌入式图像

图像

步骤4:取消组内重复网格和按需要编辑

1、因为你已经在联系人列表编辑环境下,可以直接点击带有星星的重复网格以选中它。

2、点击属性栏里的取消分组按钮,取消选中的重复网格的分组,取消分组也可以通过从右击菜单(Ctrl-click或者鼠标右键)、或者快捷键(Cmd+shift+G)的方式。

3、选择两个星星不进行填充。

(译者注:只是星星这个重复网格内的星星们不一样了,大的联系人表格的重复网格还是会重复这些编辑后的星星们)

如果你的图片是一个SVG文件,输入后是一个可编辑的图形。你可以用重复网格排列和复制,然后在解除分组调整。

你甚至可以在你创建重复网格之后添加对象,通过在编辑环境下绘画或者粘贴的。如果你有负间距,你可以轻松的通过鼠标停留在重叠区域,对内间距进行调整。你也可以把重复网格作为一个简单的校准工具。

注:退出搜索对话框,按ESC键或CMD+F或者点击PS界面上搜索对话框外的任何位置。

当从AI复制/粘贴或导入SVG时可以选择嵌入式图像。此外,当你选择导出为SVG时,我们还增加了“嵌入”或“链接”图像的选项。

图像蒙版

如果你想给一张图像加上蒙版,将图像拖拽到一个矩形框中自动剪切或者用一个对象对他进行遮罩。遮罩动作给你很多控制权,通过使用布尔群组进行遮罩允许你从新定位甚至遮罩复杂的对象。通过双击,你可以调整蒙版以及被遮罩的图像。蒙版不会破坏图像,如果你觉得效果不好,可以取消群组从新进行遮罩。

图片 14

4、一个重复网格的原型

现在我们有一个重复网格,我们准备把它和在原型里面的另一个画板进行关联,使用Adobe XD,我们可以在设计和创建原型模型之前简单切换,同时允许我们在UI 和交互之间进行同时编辑。

在本文中我们创建第二个画板和我们的重复网格在三种不同的场景互相关联。

1

共享的改进

原型设计

场景1:整个重复网格对单个交互

1、使用画板工具(A)创建第二个画板,点击你已有画板的右面创建另一个画板。

2、通过单击左上角顶部选项卡,切换到原型模式,或者快捷键Cmd+ Tab

3、选择在你第一个画板里的重复网格,在重复网格的右侧中间位置会出现一个带箭头的连接器。

4、塑标左键按住这个连接器并拖到下一个画板,在弹框中的transition一项中,选择合适的页面跳转方式,然后按esc键或者左键单击弹框以外的部分,来关闭弹框。

5、可以按下播放按钮或者快捷键Cmd+Enter 进行预览,点击预览窗口中的重复网格进行交互。

从重复网格连线

这一场景中我们把整个重复网格,包括里面的元素,作为交互出发区域。

3.SVG字体