一、原型设计对比
墨刀 (Modao)
定位：轻量级、云端高效协作的原型工具。
适用领域：移动端应用（App）、微信小程序、H5 营销页面的快速原型设计；适合敏捷开发团队、初创项目以及对高保真交互要求不极致的业务。
优点：
- 极致的上手速度与效率：内置海量成熟的移动端组件和行业模板，支持拖拽式拖出界面，能以极快的速度搭建出满足演示需求的视觉原型。
- 强大的云端实时协作：基于 Web 端，支持多人在同一个项目里同时编辑。生成的原型链接可直接在手机端或浏览器预览，评委或客户可以随时批注，协同体验极佳。
- 开发交付无缝衔接：自带标注功能，设计完成后的原型可以直接产出坐标、颜色、代码片段等代码级标注，方便程序员直接查看。
缺点
- 复杂逻辑表达能力弱：无法处理复杂的条件判断（If-Else）、全局变量及高级动态面板，难以还原深度复杂的业务逻辑流转。
- 数据离线保存不便：极度依赖网络环境。虽然有桌面端，但核心仍是云端架构，断网或企业私有化部署成本较高。
- 大项目性能瓶颈：当单个项目内的页面数量达到几百页，或者页面内矢量元素过多时，云端加载和运行速度会出现明显的卡顿。
Axure RP
定位：工业级、全能型的专业高保真原型设计工具。
适用领域：复杂的大型系统、B端后台管理系统、专业级复杂交互策略的推演；适合资深产品经理、交互设计师以及对逻辑严密性有极端要求的政企/大厂项目。
优点
- 无与伦比的交互控制力：通过强大的动态面板（Dynamic Panel）、全局变量、条件条件分支（If/Else）以及函数（Functions），几乎可以 1:1 模拟出任何真实软件的运行逻辑和复杂高保真交互。
- 强大的 B 端与数据处理能力：其独有的“中继器（Repeater）”组件，可以实现原型的增删改查、排序、筛选等真实数据库操作，是设计复杂列表和后台系统的神器。
- 离线与私有化安全性高：以本地文件（.rp）的形式存在，不需要联网即可独立工作。对于金融、政府等对数据保密性要求极高的项目，Axure 是合规首选。
缺点
- 学习曲线极其陡峭：由于功能过于强大，涉及类似编程的逻辑概念（如变量、函数），新手很难快速掌握，通常需要专门的学习和积累。
- 团队协作体验较重：虽然有 Axure Cloud，但相较于现代纯纯的 Web 端工具，它的团队版本控制（Check-in/Check-out）略显繁琐，容易发生文件冲突。
- 视觉输出相对传统：自带的默认组件风格较为古老，如果想要做出高颜值、现代化的 UI 视觉效果，需要花费大量时间去调整样式或导入第三方元件库。
Mockplus (慕客)
定位：介于墨刀与 Axure 之间，强调“快”与“低代码”的组件化原型工具（分为经典版 RP 和新版 DT/云版）。
适用领域：中大型项目的中低保真原型快速产出；适合追求“快节奏”交付、需要快速验证产品概念（MVP）的设计团队。
优点
- 独创的“封装”交互：不同于 Axure 写代码式的交互，Mockplus 提倡“可视化拖拽交互”。比如将一个“连接线”从按钮直接拉到目标页面或组件上，即可完成弹窗、切换等操作，直观且高效。
- 强大的组件集成与重用：内置超过 3000 个图标和大量封装好的封装组件（如格子、滚动区、搜索框等），通过独有的“格子（Grid）”功能，可以一键对重复列表进行排版复制。
- 全产业链矩阵打通：慕客旗下拥有 Mockplus（原型）、Mockplus Cloud（协作/交付）和 DT（UI设计），打通了从原型到 UI 设计再到开发交付的全流程。
缺点
- 自由度相对受限：由于大量组件和交互被深度“封装”，导致用户在追求某些个性化、细微的动画微交互或复杂微操作时，会受到工具框架的限制，不如 Axure 自由。
- 生态定位略显尴尬：在极致的移动端快和精美度上，有时受到墨刀的竞争压力；在极致的复杂 B 端逻辑推演上，又无法完全取代 Axure 的统治地位。
- 新旧产品割裂：目前产品线既有传统的桌面经典版，又有主打云端的 RP/DT 版，对于新用户而言，产品选择和版本认知存在一定的学习成本。
二、原型设计说明
主页
主页承担商品曝光、快速加购和活动裂变入口。
主要功能包括：
-
每日秒杀横向滑块
- 展示限时特价商品。
- 显示秒杀价、原价、剩余库存和倒计时。
- 用于承接每日固定活动，增强用户打开小程序的理由。
-
商品分类双栏布局
- 左侧为固定分类导航。
- 右侧展示当前分类下商品。
- 用户点击左侧分类后，右侧商品列表随之切换。
-
底份 + 叠加购买模式
- 商品以固定底份展示，例如“新鲜黄牛肉 约250g/份”。
- 用户不需要输入克数，只需要点击“+”增加份数。
- 降低非标生鲜称重带来的前端复杂度和用户理解成本。
-
转发给朋友
- 主页提供醒目的“转发给朋友”按钮。
- 分享路径模拟携带
inviter_id参数。 - 用于后续实现老带新、群内裂变、邀请绑定。
![Snipaste_2026-05-31_12-19-55]()
购物车
购物车承担加购商品确认、配送方式选择和运费激励。
主要功能包括：
-
购物车商品列表
- 展示商品名称、规格、份数、单价和小计。
- 所有金额在 JS 数据中按“分”存储，页面展示时格式化为“元.角分”。
-
阶梯运费进度条
- 显示当前购物金额距离免运费门槛的差额。
- 用户可以直观看到“还差多少钱免运费”。
- 用于提高客单价。
-
配送方式切换
- 支持“骑手配送”和“到店自提”。
- 使用
radio-group进行切换。
-
自提门店选择器
- 当选择“到店自提”时，动态展示门店选择器。
- 默认门店为“东诚市场总店”。
- 可切换预留门店，方便后续扩展多自提点。
历史记录
历史记录承担订单状态追踪和复购入口。
主要功能包括：
-
历史订单卡片
- 展示订单号、下单时间、商品明细、订单金额。
- 清晰标注订单状态：待支付、备货中、配送中、已送达、退款/售后。
-
再来一单
- 每个订单卡片右下角提供“再来一单”按钮。
- 点击后模拟将该订单商品重新加入购物车。
- 适合生鲜高频复购场景。
我的
我的页面承担用户资产、地址入口和 B 端入口隐藏。
主要功能包括：
-
用户信息
- 展示头像、昵称和绑定手机号。
-
收货地址管理入口
- 展示默认地址。
- 点击后模拟进入地址管理。
-
优惠券资产
- 展示可用优惠券数量和可抵扣金额。
- 为后续新人券、老带新返券、售后补偿券预留入口。
-
掌柜模式暗门
- 页面底部使用
wx:if="{{role > 0}}"控制展示。 - 当前原型中
role: 1，方便测试。 - 点击后进入掌柜工作台。
- 页面底部使用
