接口
当您打开UXPin Editor时,您将看到UI由左侧的Toolbar、右侧的Properties面板、顶部栏和底部栏组成。
的窗口的顶部提供您在设计时使用的所有工具和选项。你在其中看到的内容很大程度上取决于你在画布上选择的内容。从左边开始,如果什么都没有选择,你可以回到仪表板,在最近打开的原型之间切换,在设计或文档模式之间切换。然后,在顶部栏的中间,您将看到原型的名称和当前正在进行的迭代的名称。单击它以访问所有迭代的列表。接下来,在原型的行为……您可以创建原型的新迭代,导出或重命名原型。在右边,你有共享、设备预览和预览按钮,以及缩放选项。如果你的团队中有人开始与你在同一个项目上合作,你也会在Top Bar中看到他们的头像。
到正确的在编辑器中,您有属性面板,允许您调整设计中任何元素的属性。
在工具栏到左,您可以访问所有最常用的工具,我们称之为快速工具。
在中间,你有画布,这是你设计的地方。
在底酒吧,有自动保存指示器,视图设置,辅助功能,和帮助菜单,你可以找到快捷方式,视频教程,提示和技巧,社区论坛和什么是新的UXPin部分。
提示
要切换整个UI的可见性,在Mac上使用Cmd \快捷键,在Windows上使用Ctrl \。
视图设置
在UXPin中,您可以更改各种视图设置。您可以从编辑器的右下角访问所有它们。这就是你可以:
- 之间切换光明和黑暗的主题。当您选择自动时,主题将遵循您的macOS设置。
- 切换标尺、网格、参考线、智能参考线、交互指示器、像素网格和抓拍。
- 显示或隐藏热点。
- 决定是否要在悬停时显示属性面板。
- 打开和关闭拼写检查器。
- 改变大小轻推。
请注意
Auto主题适用于macOS Mojave或更高版本,至少需要Chrome 76或Safari 12.1。
页面
所有页面都列在页面和图层面板中。您可以从Editor的左下角访问该面板。可以创建的页面数量没有限制。
管理页面
你可以通过拖动页面和图层之间的水平线来展开和折叠页面面板,或者双击它。然后,单击“页面名称”旁边的向下箭头。这将打开站点地图,您可以在页面之间快速切换。你可以更改画布大小属性面板中的每个页面。
添加页面
添加新页面有三种方法。
- 单击Pages面板顶部的加号图标,将页面添加到列表底部。
- 右键单击页面名称并选择添加页面在下面添加一个新页面。
- 使用
Alt
”N”
快捷方式。
嵌套页面
您可以通过在其他page之上拖放来将page放置在其他page中——我们称之为嵌套.因此,您可以组合Pages构建复杂的接口。
删除页面
右键单击要删除的页面并选择删除从上下文菜单。若要一次删除多个页面,请使用”转变”
按下。如果你不小心删除了一个页面,你可以在20秒后通过单击恢复它撤销.
重命名页面
重命名页面有两种方法。您可以双击页面名称,或者右键单击页面并选择重命名.您可以在页面名称中使用表情符号。在Mac上使用Command-Ctrl-Space快捷键访问表情符号选择器。在Windows上,按住Windows键并按下句号(.)或分号(;)。
复制页面
要复制页面,右键单击并选择重复的.该页面的副本将出现在列表的末尾。
若要一次复制多个页面,请使用”转变”
按下,用右键打开上下文菜单并选择重复的.
隐藏页面
若要从列表中隐藏页面,请使用页面名称旁边的eye图标。这样,它就不会在预览、导出和站点地图中可见。
分配颜色标签
您可以为每个页面设置颜色标签。但是,颜色将不可见预览。
一次查看所有页面
若要鸟瞰所有页面并一次性查看所有页面,只需单击面板顶部的图标或使用Alt
”O”
快捷方式。
层
当一个元素被添加到编辑器时,就创建了一个层。它创建了一个新图层,并在Pages & Layers面板中列出。右键单击图层面板中的一个图层将打开上下文菜单。你可以直接从编辑器或面板中删除一个图层。只需单击该层,并删除它与删除键。
选择图层
你可以在图层面板或直接在画布上选择一个图层。如果一个图层嵌套在一个组中,点击它将选择整个组。要在组中选择低一层的图层,双击它。
还有其他选择嵌套元素的方法:
- 按住
Ctrl
并单击以选择嵌套元素或选择画布上的所有元素。 - 为了更准确地在画布上选择被锁定、重叠或完全隐藏在其他层下的层,只需右键单击你想选择的层并选择选择图层从上下文菜单。这可以让你在光标下看到图层的完整列表,并选择你想要的一个。
过滤和分配颜色标签
您可以通过框,形状,文本,形式(输入,文本区域,复选框,单选,选择,多选和按钮),图像,图标,热点,组,组件,颜色和其他,其中包括视频和音频元素筛选层。
要为图层或组分配颜色标签,请在图层面板中右键单击该图层打开上下文菜单。然后,选择一个给定的颜色。若要删除现有的颜色标签,请单击标有“x”的方框。
调整层
要调整一个图层的大小,请选中它,然后单击并拖动它的任何句柄。你也可以通过选择一个图层并在属性面板中输入它的尺寸来调整它的大小。
复制图层
复制一个图层,你可以使用:
- 的
Ctrl
”C”
而且Ctrl
”V”
快捷键 - 的
Ctrl
”D”
快捷方式 - 复制而且粘贴上下文菜单中的选项
- 重复的从上下文菜单
你也可以按住Alt
点击并拖动它,把它带到一个新的位置。当你复制元素时使用Alt
然后拖动,UXPin会记住复制偏移量。
复制多层与真实数据
使用鼠标悬停在元素和上的选择Alt
向下,您将在右下角看到一个蓝色控制句柄。拖动它可以复制整个选区。如果元素被填充数据,它们将与刷新的内容复制。我们称之为权力复制.
重新排列的层
要移动一个图层,转到图层面板,并将图层拖放到所需的区域。您还可以使用右侧面板顶部的顺序功能将图层移动到前面、后面、前面或后面。当图层被隐藏时,这是移动图层的好方法。
重命名图层
在图层面板中重命名图层时,双击图层名称重命名。然后,不按Enter来应用新名称,按”选项卡”
移动到下面的层或”转变”
而且”选项卡”
移动到上面的层。你也可以使用Ctrl
”R”
在面板中更改已选中图层的名称。
切换层的可见性
要隐藏一个图层,单击面板中图层名称旁边的眼睛图标。一旦隐藏,你只能在图层面板中选择它们,而不是在画布中。此外,隐藏层将不可见预览,但您仍然可以切换它们的可见性规范模式.隐藏一个图层,但让它在画布上可选的一个好方法是将不透明度设置为0%,而不是使用小眼睛图标。
锁定层
要锁定一个图层,选择元素并单击右侧面板中的挂锁图标或Ctrl
”转变”
”l”
把它们锁起来。
组
当您将多个元素分组在一起时,您可以将它们视为一个层。要创建一个组,请选择元素并单击组元素在顶部栏或使用Ctrl
”G”
快捷方式。还可以从Top栏、上下文菜单或”转变”
Ctrl
”G”
快捷方式。
第一次单击该组将选中整个组。要在组中选择单个图层,双击它,使用Ctrl
单击,或从图层面板中选择它。
若要锁定组中的所有图层,请长按Alt
然后点击图层面板中Group旁边的lock图标。
若要更改组的可见性,请单击该组旁边的眼睛图标。要显示隐藏组中的一个元素,只需将该元素移动到图层面板中的组上方。但是,全部单击可见性图标Alt
将保持该组内的所有图层隐藏,即使您将它们移到组外。
在组内移动元素时,组的边框将调整以适应组内的所有元素。要将元素移进或移出组,请在“图层”面板中拖动它们。您可以在其他组中嵌套组。要同时折叠图层面板中的所有组,只需使用Ctrl
Alt
”l”
快捷方式。
裁剪所选内容
您可以裁剪任何一组内容,然后定义您想要的滚动方式,水平和/或垂直。创建组可以启用裁剪所选内容选项。检查并裁剪内容。这反过来又使水平滚动而且垂直滚动它允许您在预览时定义要滚动内容的方向。
快速的工具
“快速工具”栏包含您在设计时可能最常用的所有工具。它的特点是现成的形状,钢笔工具,你可以用来绘制自己的自定义形状。接下来是表单元素、文本、图像、音频或视频等媒体。此外,还有图标、热点、评论和搜索。
指南
指南让你将你的画布分成几部分,均匀地分布你的元素。抓住画布旁边的一个标尺,移动鼠标光标,并将指南放在任何你想要的地方。参考线也可以捕捉到元素和画布边缘。要检查选定元素到参考线的距离,请长按Alt
然后将鼠标悬停在指南上。您还可以一次删除所有水平或垂直引导线。只需右键单击画布上的任何地方并选择移除水平导向,移除垂直导向或移除所有参考线.
属性面板
在属性面板中,您可以更改设计中任何元素的属性,并编辑画布属性。它被划分为部分,你选择的层类型将决定哪些部分在给定的时间在属性面板中可用。例如,当您选择一个文本元素时,您将能够在排版部分编辑它,当您选择一个图像时,您将能够调整其半径或在图像部分编辑它。
所选图层的活动属性将显示为黑色,而与该图层无关的属性将保持灰色。
您可以从“属性”面板访问的其他属性和功能:
数学
在UXPin中,您可以在任何带有数字的值输入中执行数学运算。你可以加、减、除、乘。选择一个或多个图层并使用+,- - - - - -,*,或/在任何一个数值域中。
对于半径和填充,您可以为每个角或边设置不同的值-只需单击值旁边的正方形图标。
Scrubbable输入
只要可以手动为元素输入值,可擦洗的输入就更有趣了。在UXPin中,您可以通过拖动Properties面板中的标签来擦除值。
- 将元素放置在画布上。
- 选择元素并将鼠标悬停在带有数值输入的标签上。
- 左右拖动光标可增加或减少该值。
或者,如果没有标签,只需点击输入并按下Ctrl
.如果你用Shift拖动,这个值会改变10px。
即使到达终点(桌面应用程序和谷歌Chrome),光标也会超出屏幕。
变焦
UXPin中有许多缩放选项。您可以使用顶部栏右上角的缩放输入来更改缩放百分比以及使用下拉菜单中其他可用设置的数字。
“放大”和“缩小”选项允许您以预先确定的增量调整“放大”:2,3,5,10,25,33,50,75,100,200,300,400,500,600,700,800,900,1000,1200,1600,3200,6400,12800,25600。您还可以使用快捷键来放大Ctrl
”+”
然后缩小Ctrl
”-”
.或者,将画布缩放到特定的百分比,50%,100%和200%。检查缩小至选区缩放时将选定元素置于视口的中心。
要查看整个设计,请使用“适合所有人”快捷方式”转变”
”1”
.若要放大到选定元素或一组元素,请使用“适合选择””转变”
”2”
.若要将工作台居中,请使用”转变”
”3.”
.如果你的画布是空的,大小是固定的,”转变”
”3.”
将您的画布居中在屏幕的中间。
持有”Z”
进入缩放模式,这就是当你可以:
- 点击放大
- 持有
Alt
单击可缩小 - 拖动以选择要缩放的区域
还有像素网格,在800%或更高的缩放级别下可见,每个正方形代表1个像素。当放置或移动物体时,它们会与网格结合。这可以防止在导出元素时出现像素错位错误。