1. 项目缘起为什么选择 baoyu-design 作为高保真原型工具最近在做一个新项目的前期设计团队对原型的要求不再是简单的线框图而是需要能高度还原最终视觉、甚至能模拟部分交互逻辑的高保真原型。我们尝试过 Figma、Axure甚至用前端框架直接写但总感觉差点意思Figma 的交互和逻辑表达不够强Axure 的动态面板和条件逻辑学习成本高且效果生硬直接写代码又太慢偏离了快速验证设计的初衷。就在这个节骨眼上我注意到了 baoyu-design。最初吸引我的是它“设计即代码”的理念以及宣称的“无需编码即可生成高保真、可交互原型”。说实话这类工具见过不少但大多噱头大于实际。抱着试试看的心态深入体验后我发现它确实在 UI 设计工具与前端开发之间找到了一个非常实用的平衡点。它不像传统的原型工具那样把交互做成简单的“跳转”和“显示/隐藏”而是引入了类似状态管理、数据绑定和组件化开发的概念让你能用设计工具的操作方式搭建出逻辑清晰、视觉逼真、甚至能对接真实数据的原型。这对于产品经理、UI/UX 设计师以及需要快速向客户或团队演示复杂流程的前端工程师来说价值巨大。你不再需要花费大量时间向开发解释“这里点击后那个模块会变红然后弹出浮层浮层里的数据是从某个接口来的”而是直接做出一个能“点击、变红、弹出、展示模拟数据”的原型给对方看沟通效率直线上升。接下来我就结合一次从零开始的完整实战拆解如何用 baoyu-design 制作一个具备商业演示水准的高保真 UI 原型。2. 核心概念解析baoyu-design 与传统工具的本质区别在动手之前必须理解 baoyu-design 的几个核心设计哲学这决定了你使用它的方式和最终能达到的效果。如果还用 Axure 或墨刀的思维去套用可能会事倍功半。2.1 “组件”与“实例”构建可复用系统的基石这是 baoyu-design 最像前端开发思维的一点。在 baoyu-design 中你可以创建一个“主组件”Master Component。比如一个包含头像、昵称、简介的“用户卡片”。当你把这个主组件拖到画布上使用时你创建的是它的一个“实例”。任何对主组件的修改比如调整头像圆角大小所有实例都会同步更新。但每个实例又可以拥有自己的“覆盖”Override比如替换成不同的头像和昵称而不会影响主组件和其他实例。这带来的直接好处是设计系统的一致性维护变得极其简单。你可以轻松搭建一个包含按钮、输入框、导航栏、卡片等所有基础元素的组件库。当需要调整全局设计风格时只需修改主组件所有页面一键更新。这比在 Axure 里用“母版”要直观和强大得多因为“覆盖”功能让你在保持统一的同时又能满足个性化的内容填充。2.2 “状态”与“交互”让静态设计“活”起来传统工具里的交互通常是“当点击A时让B显示/隐藏或跳转到某页”。baoyu-design 在此基础上引入了“组件状态”的概念。一个按钮可以有“默认”、“悬停”、“点击”、“禁用”、“加载中”等多个状态。你可以为每个状态设计不同的样式颜色、文字、图标等。交互则是触发状态切换或其他动作的规则。你可以设置“当鼠标移入时将当前实例的状态切换到‘悬停’”“当点击时先切换到‘加载中’状态模拟请求2秒后切换到‘默认’状态并弹出提示浮层”。你甚至可以设置变量比如一个“计数器”变量点击“”按钮时让计数器加一并将这个变量的值绑定显示在某个文本上。这使得制作一个模拟增加购物车数量、切换选项卡、表单验证反馈等高保真交互变得像搭积木一样直观。2.3 “画布”与“框架”从页面思维到框架思维baoyu-design 的画布是无限大的但这不意味着你要在一个巨大的平面上作画。更高效的方式是使用“框架”Frame。你可以把框架理解为一个预设了尺寸如 iPhone 14 Pro、网页 1440px的容器或者一个逻辑上的功能模块区块。所有的设计和交互都在框架内部或框架之间进行。框架本身也可以作为组件并且框架之间可以通过交互进行导航类似于页面跳转但更灵活。这种设计鼓励你将一个复杂的应用拆分成多个逻辑独立的框架来管理而不是把所有元素都堆在一个页面上极大地提升了复杂原型的可维护性。3. 实战第一步环境搭建与项目初始化理论说得再多不如动手做一遍。我们假设要为一个“智能家居控制面板”制作高保真原型目标是演示灯光控制、场景切换和设备状态查看。3.1 软件安装与工作区熟悉首先访问 baoyu-design 官网下载对应操作系统的客户端。我强烈建议使用客户端而非网页版因为高保真原型可能会用到较多资源客户端在性能和稳定性上更有保障。安装完成后打开你会看到一个清爽的启动界面。baoyu-design 提供了多种项目模板如移动端、网页、平板等。对于我们的智能家居面板我选择“自定义尺寸”创建一个 1920x1080 的桌面端项目命名为“SmartHome_Dashboard_Prototype”。进入主界面后花几分钟熟悉一下布局左侧是图层列表和组件面板中间是画布右侧是属性检查器包括设计、原型、代码三个主要标签页顶部是工具栏。这个布局对于熟悉 Figma 或 Sketch 的用户来说应该非常容易上手。3.2 搭建基础设计系统颜色、字体、阴影在开始画任何一个具体控件之前先定义好设计系统。这就像盖房子先打地基能确保后续所有元素风格统一并且修改起来事半功倍。在右侧属性检查器的“设计”标签页最下方找到“样式库”区域。首先定义颜色主色我选择了一个科技感的蓝色#2A6DFF用于主要按钮、高亮状态。辅助色一个柔和的青色#00D4AA用于成功状态一个醒目的橙色#FF6B35用于警告一个红色#FF4757用于错误或重要操作。中性色定义一组从浅到深的灰色用于背景、文字、边框。例如背景灰#F8FAFC文字主要色#1E293B文字次要色#64748B边框色#E2E8F0。语义色将辅助色与具体语义关联如“成功”绑定青色“警告”绑定橙色。接着定义文本样式标题 H1字体 PingFang SC或系统默认无衬线字体字重 Semibold大小 32px行高 1.2颜色#1E293B。标题 H2字重 Semibold大小 24px行高 1.3。正文 Large字重 Regular大小 16px行高 1.5。正文 Normal字重 Regular大小 14px行高 1.5。辅助文字字重 Regular大小 12px行高 1.5颜色#64748B。最后定义效果样式如阴影阴影 Small用于卡片悬停X0 Y2 模糊4 扩展0 颜色rgba(0, 0, 0, 0.05)。阴影 Medium用于模态框X0 Y4 模糊8 扩展0 颜色rgba(0, 0, 0, 0.1)。定义完成后在后续设计中你就可以直接从样式库中选取这些颜色和文本样式确保全局一致。4. 核心组件库构建从按钮到卡片有了设计系统我们就可以开始构建可复用的原子组件了。我将从最小的按钮开始逐步构建更复杂的卡片。4.1 创建具备多状态的智能按钮绘制基础形状使用矩形工具R画一个 120x40 的圆角矩形圆角半径 8px。填充色选择样式库中的“主色”#2A6DFF。添加文字使用文字工具T输入“开关”应用“正文 Normal”文本样式颜色设为白色#FFFFFF并居中放置在矩形上。创建主组件选中矩形和文字右键点击选择“创建组件”或快捷键 CtrlAltK。这样一个名为“按钮”的主组件就诞生了。你可以把它拖到画布旁的“组件”面板中方便后续调用。定义组件状态这是关键一步。选中画布上的按钮实例或组件面板里的主组件在右侧“设计”标签页中找到“组件状态”区域。点击“添加状态”我们创建以下几个状态default默认状态就是我们刚才设计的样子。hover悬停状态。复制default状态将矩形填充色稍微调亮一点比如#3B7CFF并添加“阴影 Small”效果。pressed按下状态。复制hover状态将矩形填充色稍微调暗比如#1A5AE6并将阴影的Y偏移改为0模拟被按下的感觉。disabled禁用状态。复制default状态将矩形填充色改为中性色中的#E2E8F0文字颜色改为#94A3B8。loading加载状态。这是一个动态状态。复制default状态将文字“开关”暂时删掉在按钮中央放置一个小的旋转加载动画图标可以从图标库找或自己画一个简单的旋转圆环。设置默认状态在“组件状态”区域将default状态设为“默认状态”。这样每次拖出来的新实例初始都是default状态。现在一个拥有五种状态的智能按钮组件就做好了。你可以在属性检查器的“组件”区域直接为任何一个按钮实例切换状态预览不同效果。4.2 构建设备卡片组件设备卡片更复杂它包含图标、设备名、状态、开关等多个元素并且需要支持数据覆盖。搭建静态结构创建一个 240x180 的圆角矩形圆角12px作为卡片背景填充白色应用“阴影 Small”效果。在左上角放置一个设备图标如灯泡右上角放置一个我们刚做好的“按钮”组件实例。中间偏上放置设备名称文本如“客厅主灯”应用“正文 Large”样式。名称下方放置状态文本如“已开启”应用“辅助文字”样式颜色用语义色中的“成功”色。创建主组件选中所有元素创建名为“设备卡片”的主组件。设置可覆盖属性我们希望每个卡片实例能独立显示不同的设备图标、名称、状态和开关。选中主组件内的“灯泡”图标在右侧“设计”标签页的“图层”部分找到该图层将其重命名为一个清晰的名称如“icon_device”。baoyu-design 会自动将图层名作为可覆盖的属性名。同理将设备名称文本图层重命名为“text_device_name”状态文本重命名为“text_device_status”。处理开关按钮卡片里的开关按钮是我们之前创建的“按钮”组件的实例。我们希望在不同卡片里这个按钮能独立交互和切换状态。这不需要特殊设置因为按钮本身就是一个独立的组件实例它的状态管理是自包含的。我们只需要确保在卡片主组件里这个按钮实例的图层名清晰即可比如“btn_toggle”。使用与覆盖将“设备卡片”组件拖到画布上创建一个实例。选中这个实例在右侧“属性”面板的“组件”区域你会看到“覆盖”选项。在这里你可以直接上传新的图片来替换“icon_device”修改“text_device_name”和“text_device_status”的文字内容。而“btn_toggle”这个按钮实例你可以单独选中它然后在“组件”区域切换它的状态如从default切换到loading或者为它单独添加交互事件下一节详述。通过这种方式我们快速复制出了“客厅主灯”、“卧室空调”、“厨房插座”等多个卡片每个卡片都有独立的视觉内容和交互逻辑。5. 交互逻辑与动态数据模拟静态组件搭建好了现在让它们“动”起来并模拟真实的数据变化。这是高保真原型的灵魂所在。5.1 为开关按钮添加交互反馈我们以“客厅主灯”卡片的开关按钮为例。选中目标在画布上选中“客厅主灯”卡片实例内的“btn_toggle”按钮。添加交互切换到右侧“原型”标签页。点击“新建交互”按钮。设置触发条件在弹窗中首先选择“触发条件”。我们选择“点击时”On Tap。定义动作接下来定义“执行动作”。我们希望点击后发生一系列事情动作1改变自身状态选择“设置状态”。目标对象就是当前按钮自身This。将状态设置为loading。这模拟了向服务器发送控制指令的过程。动作2延迟为了模拟网络请求的等待我们需要添加一个延迟。点击“添加动作”选择“等待”。设置时长为1000毫秒1秒。动作3改变设备状态文本这是跨组件的交互。我们需要改变它所属的“设备卡片”上的状态文本。添加动作“设置文本”。这时需要选择目标对象。在图层列表中找到当前按钮所属的卡片实例下的“text_device_status”文本图层。选中它。然后将文本内容从“已开启”改为“已关闭”或者反之做一个切换逻辑。这里我们引入一个变量来实现智能切换。引入变量实现逻辑判断baoyu-design 支持简单的变量。我们创建一个布尔型变量isLightOn用来记录灯的状态初始值为true开启。修改动作3将“设置文本”的目标文本内容设置为动态值。点击输入框旁的“绑定变量/表达式”图标通常是一个{...}符号。输入一个条件表达式例如{isLightOn ? 已关闭 : 已开启}。这个表达式的意思是如果isLightOn为真则显示“已关闭”否则显示“已开启”。动作4切换变量值添加一个新动作“设置变量值”。选择变量isLightOn将其值设置为{!isLightOn}取反。动作5恢复按钮状态再添加一个“设置状态”动作将按钮自身的状态从loading改回default。动作6可选视觉反馈可以再添加一个动作在切换状态时短暂改变卡片背景色或图标颜色提供更强的视觉反馈。通过这一系列动作的串联我们实现了一个完整的、带加载状态模拟、状态文字同步更新、且逻辑自洽的交互流程。这远比 Axure 里简单的“切换可见性”要真实和强大。5.2 模拟动态数据温度与湿度实时显示对于环境监测类数据我们希望它看起来是实时变化的。我们可以用变量和循环动画来模拟。创建数据文本在画布上放置两个文本分别显示“温度23.5°C”和“湿度65%”。将它们的图层名命名为“text_temp”和“text_humidity”。创建变量创建两个数字变量currentTemp和currentHumidity初始值分别为 23.5 和 65。将文本绑定变量分别选中两个文本在右侧“设计”标签页的“内容”输入框中绑定变量。例如温度文本的内容设置为温度 {currentTemp.toFixed(1)} °C。.toFixed(1)是保留一位小数。模拟数据波动我们需要一个触发器来让变量周期性变化。可以创建一个隐藏的“触发器”组件比如一个小矩形为它添加“载入时”的交互。触发条件选择“载入时”On Load。动作1循环添加动作“循环”。选择“重复直到停止”。动作2等待在循环体内首先添加“等待”动作设置3000毫秒3秒一次更新。动作3修改变量添加“设置变量值”动作。这里我们可以用一个简单的随机函数来模拟波动。将currentTemp设置为{currentTemp (Math.random() - 0.5)}。Math.random()生成0-1的随机数-0.5后范围变成 -0.5 到 0.5这样温度就在当前值上下随机浮动0.5度。同理设置湿度。由于变量值改变绑定了变量的文本会自动更新。这样预览原型时温度和湿度的数值就会每隔3秒发生微小的随机变化营造出一种实时监测的效果极大地提升了原型的真实感和说服力。6. 页面导航与复杂流程串联单个页面的交互做好了现在我们需要把多个页面框架串联起来形成一个完整的用户流程比如从仪表盘点击一个设备进入该设备的详细控制页面。6.1 创建设备详情页框架在画布空白处新建一个框架Frame尺寸设为 1920x1080命名为“Device_Detail_Light”。在这个框架内设计灯光设备的详情页包含亮度调节滑块、色温选择、定时开关设置等更复杂的控件。这些控件同样可以用组件和交互逻辑来构建例如滑块拖动时实时更新亮度百分比数值。为详情页的“返回”按钮添加交互触发时“导航到”仪表盘框架。6.2 从列表页导航到详情页回到主仪表盘框架。选中“客厅主灯”卡片注意是选中整个卡片实例而不是内部的按钮。在“原型”标签页为其添加“点击时”的交互。动作选择“导航到”。目标选择我们刚才创建的“Device_Detail_Light”框架。在导航设置中可以选择过渡动画。这里选择“向左滑入”Push Left时长为300毫秒让页面切换更有动效感。6.3 使用“变体”管理同一组件的不同场景我们的设备卡片在列表页显示简洁信息在详情页顶部可能显示一个更大的、样式略有不同的版本。我们可以用“变体”Variants来优雅地管理。在“组件”面板找到“设备卡片”主组件右键选择“添加变体”。这会创建一个与原组件关联的新组件我们命名为“设备卡片/紧凑型”用于列表页。再添加一个变体命名为“设备卡片/详情页头图”调整其尺寸、布局和样式使其更适合放在详情页顶部。这样在需要使用不同样式卡片的地方直接从组件面板拖出对应的变体即可。它们共享相同的可覆盖属性如图标、名称但拥有独立的样式。修改主组件的某个基础样式如圆角半径所有变体会一起更新修改某个变体独有的样式则只影响该变体。7. 预览、分享与开发对接设计完成后我们需要预览交互效果并分享给团队成员或客户。7.1 本地预览与调试点击右上角的“预览”按钮或按P键baoyu-design 会打开一个独立的预览窗口。在这里你可以像真实用户一样点击、拖拽测试所有的交互逻辑。如果交互没有按预期工作可以关闭预览回到设计界面检查交互事件的条件、目标对象和动作顺序是否正确。预览模式是调试交互最重要的工具。7.2 生成分享链接与评论对于分享baoyu-design 提供了非常便捷的方式。点击右上角的“分享”按钮你可以创建一个仅预览链接或可评论链接。生成链接后任何有链接的人都可以在浏览器中查看你的高保真原型并进行交互。如果选择“可评论”他们还可以在画布的任何位置添加评论这对于收集反馈非常高效。你可以在设计界面直接看到并回复这些评论实现闭环沟通。7.3 设计稿交付与开发标注虽然 baoyu-design 的重心在交互原型但它同样提供了完善的设计稿交付功能。选中任意元素或框架在右侧“检查器”的“代码”标签页有时也叫“开发”或“导出”标签页可以看到该元素的 CSS 样式代码如宽高、位置、颜色、字体、边框、阴影等。开发者可以在这里获取精确的样式值而无需手动测量。你还可以选中多个图层一键导出为 SVG、PNG 或 PDF 等格式。更重要的是由于 baoyu-design 的组件化思维与前端高度一致当你构建了一套严谨的组件库后实际上已经为前端工程师提供了一份非常清晰的结构化设计规范。他们可以很容易地理解你的设计系统并据此搭建 React、Vue 等框架的组件代码实现从设计到开发的高效转化。8. 避坑指南与实战心得经过几个项目的实战我总结了一些 baoyu-design 使用中的常见“坑”和提升效率的技巧。8.1 性能优化保持原型的流畅度当原型变得非常复杂包含大量组件、交互和动画时可能会在预览时感到卡顿。慎用自动布局嵌套baoyu-design 的自动布局Auto Layout功能非常强大但过度嵌套复杂的自动布局尤其是包含大量可伸缩内容时会影响渲染性能。对于静态或简单列表部分可以不用自动布局手动调整有时更高效。简化不必要的交互预览在“原型”标签页设置交互时有一个“预览时”的选项。对于复杂的、由变量驱动的交互链可以暂时关闭预览只在最终测试时开启以提升设计时的操作流畅度。分框架管理不要把所有内容都堆在一个巨大的框架里。将不同功能模块、甚至不同用户流程的页面放在不同的框架中。通过导航连接它们。这样在编辑时baoyu-design 无需一次性渲染所有内容。8.2 交互逻辑的清晰性维护复杂的交互链容易变得混乱难以维护。命名命名命名为每一个框架、组件、图层、变量、交互事件都起一个清晰、易懂的名字。例如变量不要叫a、b而是叫isModalOpen、cartItemCount。交互事件描述可以写成“点击提交按钮 - 验证表单 - 显示加载 - 调用API”。使用“开始”帧管理流程可以创建一个专门的“流程图”框架用简单的矩形和箭头画出主要的用户流程和页面跳转关系。将这个框架标记为“开始”帧在框架属性中设置这样分享链接时查看者会首先看到这个流程图对整体结构有个概念再点击箭头进入具体页面原型。注释与说明对于特别复杂的交互逻辑可以在画布旁边添加一个文本说明框用简单的语言描述这个交互的业务逻辑和判断条件方便后续自己或他人理解。8.3 与团队协作的注意事项组件库统一管理如果是团队项目建议由一位主要设计师负责维护和更新全局的组件库颜色、文本样式、基础组件。其他成员从该库中调用实例而不是自己新建。这能最大程度保证设计统一。版本管理baoyu-design 支持类似 Git 的历史版本功能。在做出重大修改前可以手动创建一个版本快照。在团队协作中这能有效追踪设计变更和回溯。交付物打包除了分享交互链接在项目关键节点可以利用“导出”功能将主要框架导出为 PDF 或一组 PNG 图片作为存档或放入需求文档中。baoyu-design 的强大之处在于它用相对较低的学习成本实现了高保真原型所需的大部分能力。它可能不像纯粹的前端代码那样灵活但对于产品演示、用户测试、设计评审和开发沟通而言其效率和表现力是传统工具难以比拟的。关键在于转变思维从“画图”转向“搭建”充分利用其组件化、状态化和数据驱动的特性你就能做出令人印象深刻、足以“以假乱真”的产品原型。