登录
pixso怎么做交互
我来回答
磨旎
回答
第一步：登录Pixso
进入Pixso网站，登入Pixso账号，新建一个Pixso文件。
第二步：导入素材
可以使用Pixso绘制UI界面图，Pixso在精细化矢量设计、自动布局等UI所需的核心功能都已成熟，使用起来很方便。另外，也可以使用Pixso资源社区的素材。Pixso资源社区提供海量设计模板和素材，本地化字体资源，极大的提升了设计师的工作效率。同时，设计师可以选择每天花时间浏览Pixso社区学习基础知识，了解最新设计趋势，探索各种设计风格，为自己的项目收集大量视觉灵感和创意。
第三步：制作交互原型
选择Pixso右侧属性面板中的“原型”，进行原型制作，如下图所示。鼠标选择“Recom”文本，在右侧属性面板选择点击交互事件右侧的“+"图标，在弹出的弹窗里点击触发下拉框，下拉框显示触发事件包括单击、双击、悬停时、按下时、鼠标移入、鼠标移出、按下、松开，Pixso设计师在这里选择“单击”为触发条件。在操作下拉框包括无（默认）、跳转到、变体切换、打开弹窗、返回、关闭弹窗，这里选择“跳转到”，跳转目标页为“Home”页。选择动画下拉框，可选择即时、溶解、移入、移出、推、滑入、滑出多种动画，这里选择即时。选择底部导航“order”灰色图标，按照以上操作，设置触发为“单击”，操作为“跳转到”，跳转目标页面为“order”，动画效果为“即时”。选择底部导航“Home”灰色图标、“Community”灰色图标，“Me”灰色图标，设置参数同上。
第四步：预览交互原型
如下图所示，通过以上步骤设置好参数后以后，点击顶部导航栏的演示三角形图标，进行原型演示查看。
收起
2023-02-06
罗东紫
回答
切换右侧属性面板为“设计”，在顶部导航栏选择矩形工具，快捷键为【R】，绘制尺寸为169x88，填充色值为#C4C4C4、透明度为100%，圆角为100的圆角矩形，如下图所示。使用顶部导航栏圆形工具，快捷键为【O】，绘制尺寸为68x68的圆形，填充色值为#FFFFFF、透明度100%，并将其放在圆角矩形图层上，垂直方向居中对齐，左侧间距为13px，如下图所示。点击顶部导航栏创建组件，快捷键【command+option+K】，选中圆形与圆角矩形，将圆形与圆角矩形设置为一个组件，获得切换开关的“关”状态。选中之前创建的组件，在右侧属性面板的“变体”模块，点击右侧的“+”图标，创建一个变体，修改变体的圆角矩形填充色值为#40B0FF，透明度为100%。圆形移动到圆角矩形右侧，距离右边间距为13px，获得切换开关的“开”状态，如下图所示：鼠标点击切换右侧属性面板至“原型”，选中“关”状态组件，在右侧属性面板的“交互事件”模块，点击“+”图标，新增一个交互操作事件。鼠标点击“无”，在弹出的弹窗中进行原型设置，设置触发条件为“单击”，操作为“变体切换”，切换为“开”状态，设置“开”状态切换，方法步骤同上面的步骤6。切换右侧属性面板为“设计”，在顶部导航栏选择矩形工具，快捷键为【R】，绘制尺寸为169x88，填充色值为#C4C4C4、透明度为100%，圆角为100的圆角矩形。使用顶部导航栏圆形工具，快捷键为【O】，绘制尺寸为68x68的圆形，填充色值为#FFFFFF、透明度100%，并将其放在圆角矩形图层上，垂直方向居中对齐，左侧间距为13px。点击顶部导航栏创建组件，快捷键【command+option+K】，选中圆形与圆角矩形，将圆形与圆角矩形设置为一个组件，获得切换开关的“关”状态。选中之前创建的组件，在右侧属性面板的“变体”模块，点击右侧的“+”图标，创建一个变体，修改变体的圆角矩形填充色值为#40B0FF，透明度为100%。圆形移动到圆角矩形右侧，距离右边间距为13px，获得切换开关的“开”状态。鼠标点击切换右侧属性面板至“原型”，选中“关”状态组件，在右侧属性面板的“交互事件”模块，点击“+”图标，新增一个交互操作事件。鼠标点击“无”，在弹出的弹窗中进行原型设置，设置触发条件为“单击”，操作为“变体切换”，切换为“开”状态，设置“开”状态切换，方法步骤同上面的步骤6。
收起
2023-02-06
陆雪薇
回答
步骤一：在Pixso中新建文件
在 Pixso 中创建一个项目，以创建「WeUI浅色组件库」为例。点击左侧的「资源」选项卡，打开「WeUI浅色组件库」。WeUI 组件库提供了两个处于不同状态的按钮，分别将它们从左侧拖拽添加到编辑界面。
步骤二：创建多个组件
鼠标框选两个按钮，点击顶部工具栏「组件」右侧的下拉小三角，选择「创建多个组件」，将两个按钮转换为组件。
步骤三：创建组件变体
按钮图标转化为组件之后，在同时选中两个组件的状态下，点击右侧的「创建组件变体」，将两个组件放到一个组件集中。
步骤四：添加交互事件
点击右侧的「原型」选项卡，接下来我们要给两个组件添加交互事件，把鼠标移动到组件的右侧，会出现一个隐藏的控点。
步骤五：单击触发变体切换
长按鼠标，从控点拖拽出一条线段，将其连接到下面的组件，这样就在两个组件之间快速添加了一个「单击触发变体切换」的交互动效。单向添加一个交互事件，并不能实现最终点击按钮来回切换的效果，因此也要给下面的组件添加同样的交互事件，从组件右侧拖拽出线段连接到上面的组件。
步骤六：进行演示
添加完交互动效，从左侧的组件面板，拖拽添加一个按钮组件到画板中，点击右上角的「演示」进入演示视图，点击按钮就能实现切换开关的交互动效了。
收起
2023-01-31
其它产品问答
唐有欢
回答
打开Pixso官网，直接下载客户端，自动下载对应系统的版本。Pixso 是一款云端协同设计平台，支持多人 实时协作、在线设计和链接交付，具备白板、原型、 设计、交付、协作、资源管理等多种功能，为产研团队提供产品设计一体化解决方案，重新定义设计方式，重塑产品设计工作流程，全面提高工作效率，为数字化时代创意需求提供先进生产力。 Pixso 不仅为产品经理、设计师们提供了一个多人协同的产品设计平台，更提供了一套设计行为规范：项目成员以实现资源共享，设计套件、品牌规范可以同步使用，文件自动更新，团队成员可以直接在一个文件中同时进行设计和创作， 提升产设研团队的合作效率。组件和样式可以在团队共享，设计师共用设计资源，减少重复设计，形成产品统一的设计规范和视觉效果。
2023-01-17
3 个回答
提问
毕琪
回答
Pixso是一款集设计、原型、交付于一体的新一代实时设计协作工具，涵盖原型交互、专业UI设计、自动切图标注、云端自动备份等功能，通过跨设备的协同、实时云同步内容，打通产品、设计到研发的工作链路，全面覆盖原型、设计、交付全流程，即开即用，较海内外其他同类工具，Pixso的协作更高效，设计更流畅。可以用Pixso，设计资源，快速开启原型制作，模拟最终产品形态和交互效果。 直接在原型基础上，快速邀请团队成员开启设计协作。自动生成切图标注，打开浏览器就能获取 CSS、iOS、Android代码片段。
2023-01-17
3 个回答
查看更多
消息通知
咨询入驻
商务合作
