摘要：几乎所有低代码平台都宣称「一套设计，同时适配 PC 和移动端」。但一个真实商业项目交付后你会发现：响应式适配在 To C 官网上够用，在 To B 业务系统里是个坑。本文用彩云织布行管家的双端交付复盘，讲清 myBuilder 为什么坚持 PC 端和 H5 端分开设计、独立设计器——以及双端数据如何打通、流程如何联动。

---

一、复盘从一个立项争论开始

彩云织布行管家是 myBuilder 官方用 40 人天研发的商业纺织 SaaS 进销存。立项时团队内部有一场争论，可能你也经历过：

「要不要做响应式？一套设计自动适配双端，开发量省一半。」

主张响应式一派的理由很充分：市面上低代码平台都这么做，Bootstrap 栅格 12 列折叠，PC 三列变手机一列，看起来完美。

最终团队否掉了这个方案，选择了 PC 端和 H5 端分开设计。 交付之后的真实使用数据，反过来验证了这个决定。复盘下来，双端分开设计不是「多花了功夫」，而是「把功夫花在了对的地方」。

先看这个项目双端的真实使用画像：

维度	PC 端	H5 端
使用者	内勤、财务、仓管（坐着干活）	老板、业务员、客户（站着办事）
核心操作	录单、批量改价、报表核对、对账	查库存、查价格、拍照查布、审批
单次使用时长	30 分钟～数小时连续	30 秒～3 分钟碎片化
屏幕尺寸	1280px+，鼠标+键盘	375px 左右，拇指单手
网络环境	店内稳定 WiFi	仓库角落 4G 信号两格

注意最后一行的差别——这已经不只是界面问题，是工程问题。下面逐条复盘。

---

二、复盘一：「一套设计自适应双端」在商业系统里的三个坑

坑一：交互模式根本不同，不是「缩小」能解决的

响应式的本质假设是：手机是 PC 的缩小版。这在内容展示型页面（官网、博客）上成立，在业务系统上是错的。

真实的反例来自织布行管家的销售出库单：

• PC 端开单：业务员左手键盘敲货号，右手鼠标从候选列表里点选，一个熟练内勤 90 秒开完一张 20 行的出库单。依赖的是：快捷键、Tab 键跳转、hover 展开详情、多列表格内联编辑
• 手机端开单：老板娘在仓库里对着布卷，需要的是：扫码直接带出货品、大号数字键盘输米数、语音备注、拍照留底

你会发现这两端没有一行交互逻辑是相同的。如果把 PC 的交互「自适应」到手机上，得到的是一个用拇指点 12px 下拉框的灾难；如果把手机的交互同步到 PC，业务员会疯掉——没有人想在大屏幕上点大按钮。

结论：双端的差异不是分辨率差异，是交互范式差异。分开设计是唯一解。

坑二：信息密度差异 10 倍，折叠不是答案

进销存的核心界面是一张库存表。PC 端 1280px 的宽度下，这张表可以同时展示：

货号 | 品名 | 色号 | 缸号 | 克重 | 幅宽 | 库存数 | 在途数 | 进价 | 销售价 | 库位 | 状态

12 列，一屏 20 行，眼睛扫一遍就能做决策。

到了 375px 的手机屏，这 12 列怎么办？响应式方案的标准做法是：折叠。重要的列留下，次要的列收进「展开详情」。

真实场景里发生了什么？老板娘在仓库想确认「这缸布还剩多少米、在哪个库位」，折叠方案下她要：点开列表 → 找到那行 → 点「展开」 → 上下滚动找库位列。三步操作，8 秒。 而单独设计的 H5 端把这件事做成了卡片式：首屏直接是搜索框 + 扫码入口，命中货品后大字显示库存数和库位。一步，2 秒。

省下的 6 秒/次，乘以一个仓管一天 200 次查询，就是每天省出 20 分钟——商业系统的体验差距就是这样积出来的。

坑三：双端用的根本是两个功能子集

复盘使用数据后发现一个更本质的问题：H5 端用户从不使用 PC 端 80% 的功能，反过来也一样。

功能	PC 端使用率	H5 端使用率
开销售出库单	高	低（紧急补单才用）
扫码查库存/库位	低	极高
批量调价	高	无
移动审批	无	极高
月度报表核对	高	低
客户欠款查询	中	极高

如果用一套设计自适应，H5 端会被迫背上一堆用户永远不点的菜单——响应式「省下的设计工作量」，最终变成了用户每一次使用时多翻一屏的导航成本。双端分开设计，恰好给了你机会给两端各做一次功能裁剪。

三、myBuilder 的解法：界面分开设计，数据同源一套

分开设计听起来美好，但会立刻引出一个新问题：双端会不会变成两套系统？ 改一个数据结构要改两端，维护成本翻倍。

myBuilder 的架构答案是：界面层彻底分开，数据层和业务层完全共享。

┌───────────────┐    ┌─────────────┐
│  PC 页面设计器  │   │H5 页面设计器  │   ← 界面层：分开设计
│ （后台页/前台页/│   │（独立 H5 组件 │
│   看板页/报表）│    │库与交互范式） │
└──────┬────────┘    └──────┬──────┘
       │                    │
       └────────┬───────────┘
                ▼
       ┌────────────────┐
       │ 业务接口设计器  │   ← 业务层：同一套接口
       │ （低代码配置生成）│
       └────────┬───────┘
                ▼
       ┌────────────────┐
       │   统一数据模型  │   ← 数据层：同一份模型
       └────────────────┘

这个分层带来三个直接收益：

1. 改一处，双端生效：库存表加一个「缸号」字段，改的是数据模型——PC 页面和 H5 页面各自把字段拖进界面即可，不用写两遍接口
2. 接口不用重复开发：H5 端调用的查询库存接口和 PC 端是同一个，权限校验（接口授权、令牌校验）天然双端一致——不会出现「PC 端看不到进价，手机端却漏出来了」这种安全事故
3. H5 页设计器是原生组件库：不是把 PC 组件压缩变形，而是为移动端交互范式（扫码、下拉刷新、底部弹层、大号触控区）单独设计的一套组件

四、复盘二：分开设计之后，双端怎么「协作」

分开设计不等于各干各的。彩云织布行管家交付后，真正让老板觉得「值」的不是双端各自好用，而是双端流程联动：

老板在外面跑客户，PC 端（内勤）录了一张销售出库单，金额超过 5 万触发审批流 → 老板手机收到消息通知 → H5 端打开单据详情，看品名、数量、客户欠款 → 点「同意」 → 内勤 PC 端的待办列表实时刷新，单据进入审核通过状态，仓库打单发货。

这条链路里，myBuilder 的工作流引擎是串联双端的中枢：

• 流程节点在 PC 端设计器里配置（条件分支：金额 > 5 万走老板审批，否则自动通过）
• 消息通知自动触达 H5 端（待办推送，不用单独开发 App 消息通道）
• 审批操作在 H5 端完成（单据详情页只读展示 + 审批按钮，移动端组件）
• 流程状态实时回流 PC 端（单据状态机联动按钮权限：审核通过后开单人不能再改）

这就是「分开设计 + 数据同源」的完整闭环：界面各美其美，流程天下大同。

五、诚实的边界：什么时候「一套设计」是够的

不是为了分开而分开。复盘里我们也明确列出了响应式仍然适用的场景：

场景	一套设计自适应够吗	建议
官网、活动页、内容展示	够	前台页设计器做响应式即可，没必要分开
简单表单（报名、登记、问卷）	基本够	组件少，折叠成本低
业务系统（进销存/ERP/OA 审批）	不够	双端分开设计，各自裁剪功能
重交互系统（大屏看板、批量作业）	PC 专属	不必强行做移动端

判断标准一句话：用户在两端做的事情是否相同。 做的事相同（看同一篇文章），一套设计够用；做的事不同（PC 录单 vs 手机查库审批），必须分开。低代码平台把「一套设计双端」当卖点宣传，本质是把 To C 内容站的经验错误地平移到了 To B 业务系统上——听起来省事，落地时全部变成用户的使用成本。

---

六、避坑清单：双端分开设计的 5 个检查项

如果你正准备开始一个双端商业项目，这份复盘沉淀的检查项直接拿去用：

1. 先做双端功能清单，再动手设计——列出每个功能在 PC 端和 H5 端的使用率，只把两端都高频的功能做到两端，其余按画像裁剪。不做这步，分开设计会退化成「双端各抄一遍 PC」
2. 数据模型只建一份——双端分开设计指的是界面层。如果有人建议「H5 端单独建一套表」，立刻拦下来，那是两套系统，不是双端
3. 接口权限双端用同一套校验——接口授权、令牌校验在业务接口层配置，天然双端一致。千万不要在 H5 端页面里另写一套前端权限就以为安全了，前端权限只管体验
4. 移动端交互按「单手 30 秒」设计——一个 H5 操作超过 3 步或需要双手，就回去重设计。仓管的手是拿着布卷的
5. 流程节点考虑双端触达——设计审批流时问一句：这个节点的人，事发时在电脑前还是在路上？在路上的节点必须验证 H5 端审批体验

---

七、写在最后

「一套设计适配双端」是一个漂亮的 PPT 愿景，但商业软件的用户不会为 PPT 买单——老板娘只会在仓库里用手机查库存的那 2 秒里，决定这套系统值不值得续费。

myBuilder 选择把 H5 页设计器和 PC 页面设计器彻底分开，等于承认了一个朴素的工程事实：两端用户是两拨人，在两个场景，干两件事。 承认差异，比追求表面的「一次设计」更接近商业交付的本质。

想亲手试试 H5 页设计器和双端流程联动，可以登录 myBuilder 运营平台，教程中心有完整的视频教程——从建一个 H5 页面到配置双端审批流，跟着做一遍比读十篇文章都直观。

---

互动：你的项目里踩过「响应式适配业务系统」的坑吗？评论区聊聊你遇到的最离谱的移动端适配需求。