原型模式「原型」可以让您在设计稿中对画板与画板,图层与画板之间创建交互流程,并进行演示播放。点击右侧属性面板中的「原型」即可进入「原型模式」添加交互事件在原型模式下选中「画板内的图层」或「画板」,选中图层后右边框的中心会出现「触发点」。鼠标点击并拖拽「触发点」至「目标」图层,即可完成创建交互事件。创建完成后可在右侧面板查看该交互事件的属性您还可以选中画板后,直接在右侧「原型」-「交互事件」点击“加号”,直接添加交互事件
原型播放的入口可以通过以下三种方式开始预览原型:在编辑页面界面的右上角点击「播放」按钮原型模式下的右侧面板中的流程列表,鼠标悬停后的播放按钮画板的左上角的「交互流程」播放按钮设备模型演示模式支持添加设备模型,还原更真实的实机效果,设计界面右侧 Tab 栏【原型】模块下,在【演示模型】内点击设备模型下拉菜单,选择各种类型的设备模型Tip: 同样还可以切换设备模型的横屏或者竖屏效果聚光灯模式演示
了解原型事件「触发」「操作」「目标」「动画」四者结合就会组成一个完整的原型事件,我们可以这样简单去理解触发:事件在什么情况下会发生操作:事件发生后会进行什么行为目标:行为的目标对象是谁动画:丰富事件发生行为的多样性原型触发触发:决定了在发生什么动作下事件会被激活开始生效「单击/双击」:鼠标点击/双击热点 Tip:单击/双击通常用于常规的作用,例如打开链接,或者单击按钮
Pixso AI 支持用户通过自然语言快速生成、编辑设计稿或图片。现已结合 Agent 模式,可以生成设计系统、设计检查清单,修改布局、字体、文本内容等等。当您使用文生设计稿时,只需输入对页面内容、布局和视觉风格的描述,AI 就会将文字需求转换为可编辑的设计稿。图片编辑内包含多项功能,包括移除背景、提升分辨率、背景替换、风格转变、局部修改、人物改造等等,通过自然语言与 AI 对话,即可实现各种
流程指的是在多个画板之间的交互事件连接,从A画板开始到B画板结束就是一个流程。Pixso 的原型交互流程功能,为标记一个流程的起始点,单个流程起始点可以包含多个交互线路。便于在演示的时候,快速定位到需要演示的流程起始点,且可以演示不同交互目标的线路。创建交互流程当您创建交互事件时,就会默认在初始画板左上角创建一个「交互流程」或者您可以在原型模式下,选中任意画板后,在右侧面板中点击「加号」添加
。3. 设置弹窗您可以通过该选项创建提示弹窗、交互式菜单、警报或确认弹窗。4. 设置溢出行为您可以决定原型页面如何响应滚动。创建更高级的用户交互,例如轮播、列表或交互式地图。5. 调整原型基础设置您可以设置延时视图的背景和播放的起始画板流程。标注面板右侧面板中的第三个选项是标注面板。您可以通过这里查看如何在代码中表达您的设计元素,也可以查看到所选中元素的基础属性,并且复制属性值。您可以选择代码并复制:CSS(网页开发)
选择设计稿并输入修改要求后,AI 会根据您的描述调整页面中的布局、文案、颜色、组件和视觉风格。您可以使用编辑设计稿来优化现有方案、替换局部内容,或快速尝试不同的设计方向,同时保留无需修改的部分。为了获得更准确的结果,建议明确说明修改对象、调整方式和预期效果,例如“将返回按钮改为蓝色,并增加圆角”。描述越具体,修改结果通常越符合预期。启动方式可以从多个入口进入以进行设计稿编辑左侧 Tab 栏左侧
视图功能名称macOS快捷键Windows快捷键多人协作光标⌘ ⌥ \Ctrl Alt \标尺⇧ RShift R参考线Alt R⌥ R布局网格Ctrl GCtrl Shift 4像素网格⌘ 'Ctrl '吸附到像素网格⌘ ⇧ 'Ctrl Shift '打开图层列表⌥ 1Alt 1打开组件列表⌥ 2Alt 2打开设计面板⌥ 8Alt 8打开标注面板⌥ 9Alt 9打开原型面板 ⌥ 0Alt 0预览像素⌥ YCtrl Alt P显示内存使用情况F9F9
容器概念介绍在Pixso中,您可以直接将图层添加到画布中。如果要针对特定设备或屏幕尺寸进行设计,则可能需要为设计创建专用的区域,这就是容器的作用。如果您以前使用过设计工具,那么您将熟悉容器,选择画布的某个区域来进行设计。与传统画板不同,您还可以在其他容器中嵌套容器,以创建更复杂的设计。在容器内,您可以使用其他功能,如布局网格、自动布局、约束和原型设计。创建容器可在 Pixso 顶部编辑页面
哪些设计规范可以给AI使用?将已发布的资源库勾选【允许AI使用】,才能在AI中选中并使用。设置入口一团队落地页-资源tab(需要库文件的编辑权限)设置入口二资源库弹窗左下角(需要库文件的编辑权限)设置入口三管理后台-资源库管理(企业版管理员使用)AI 调用自定义设计系统流程1. 选择目标设计系统打开设计文件中的 AI 面板,在对话框中选择【自定义设计系统】,再选择已经勾选供 AI 使用的库文件
D2C教程请查看教程文档:https://pixso.cn/app/design/GF0vZnIFGuRLKsK0WOAq9Q?icon_type=1&page-id=0%3A1 邀请您加入 Pixso 设计文件「D2C 教程文档」D2C Plus 配置详情以及教程请查看开发者文档:https://pixso.cn/developer/zh/d2c/quick-start.html
其他编辑者。生成历史版本设计师可以通过自动或手动保存的历史版本对已经完成的设计稿进行记录存储,方便设计者进行多版本对比查看并进行修改,最后定稿交付。手动保存历史版本手动保存生成的历史版本会附带用户的信息,您可以通过该功能对已经完成的设计稿进行保存对比并附上简短的版本备注并@相关成员,这些备注将会被文件的协作者所阅读。除了在历史版本列表的上方+号可以手动保存,您还可以在编辑页的菜单项中或者使用快捷键来快速