原型设计：东诚生鲜小程序原型设计

一、原型设计对比

---

墨刀 (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 参数。
  • 用于后续实现老带新、群内裂变、邀请绑定。
    
    
    

购物车

购物车承担加购商品确认、配送方式选择和运费激励。
主要功能包括：

• 购物车商品列表

  • 展示商品名称、规格、份数、单价和小计。
  • 所有金额在 JS 数据中按“分”存储，页面展示时格式化为“元.角分”。

• 阶梯运费进度条

  • 显示当前购物金额距离免运费门槛的差额。
  • 用户可以直观看到“还差多少钱免运费”。
  • 用于提高客单价。

• 配送方式切换

  • 支持“骑手配送”和“到店自提”。
  • 使用 radio-group 进行切换。

• 自提门店选择器

  • 当选择“到店自提”时，动态展示门店选择器。
  • 默认门店为“东诚市场总店”。
  • 可切换预留门店，方便后续扩展多自提点。

历史记录

历史记录承担订单状态追踪和复购入口。
主要功能包括：

• 历史订单卡片

  • 展示订单号、下单时间、商品明细、订单金额。
  • 清晰标注订单状态：待支付、备货中、配送中、已送达、退款/售后。

• 再来一单

  • 每个订单卡片右下角提供“再来一单”按钮。
  • 点击后模拟将该订单商品重新加入购物车。
  • 适合生鲜高频复购场景。

我的

我的页面承担用户资产、地址入口和 B 端入口隐藏。
主要功能包括：

• 用户信息

  • 展示头像、昵称和绑定手机号。

• 收货地址管理入口

  • 展示默认地址。
  • 点击后模拟进入地址管理。

• 优惠券资产

  • 展示可用优惠券数量和可抵扣金额。
  • 为后续新人券、老带新返券、售后补偿券预留入口。

• 掌柜模式暗门

  • 页面底部使用 wx:if="{{role > 0}}" 控制展示。
  • 当前原型中 role: 1，方便测试。
  • 点击后进入掌柜工作台。