绿韵花坊-植物交易平台原型设计

墨刀、Axure、Mockplus的各自的适用领域及优缺点

工具名称	适用领域	优点	缺点
墨刀	1.移动端/Web原型设计(适合小型项目) 2.适用团队协作场景 3.快速中低保真原型	1. 中文界面友好，学习成本低 2. 云端协作便捷，支持实时评审 3. 素材库丰富，拖拽操作高效 4.支持多平台预览	1. 高保真交互能力较弱 2. 复杂逻辑实现困难 3. 企业版价格昂贵 4.可以以链接和二维码形式输出但不能以文档输出 5.需要稳定的网络连接
Axure	1.适合企业级应用 2.适合复杂交互原型可以进行高保真设计 3.专业文档输出 适合大型项目	1.拥有丰富的交互组件和动态效果 2.支持自定义组件库 3. 可生成详细开发文档 有庞大的用户社区和教程资源，方便学习和解决问题	1. 学习困难(需要大量时间和精力) 2. 团队协作功能弱（需配合Axure Cloud） 3. 对硬件要求高 4.本地型软件，手机预览不方便
Mockplus	1.快速原型设计 2.移动应用和桌面应用设计 3.中等规模的项目	1. 极简操作，3分钟上手 2. 一键预览（支持手机扫码） 3. 性价比高（个人版免费） 4.有丰富的组件库和模板，方便快速构建原型 5.有多种输出形式	1. 动画效果单一 2. 缺乏深度交互设计 3. 企业级功能不足

植物交易平台原型设计选用

选用墨刀

原因:我们团队无原型设计经验是初学者且只有四人，选择墨刀进行植物交易平台的原型设计优势显著。相较于 Axure，墨刀易学习易上手，无需花费大量时间去学习复杂的操作，能让我们快速开始原型设计工作。Axure 虽功能强大，但价格较高，而墨刀有免费版本。与 Mockplus 相比，墨刀是专为移动端产品原型设计而生，其控件基于 APP 及 IOS、安卓系统平台，创建项目时可直接选择相应设备布局，减少工作环节，更贴合我们设计手机软件的需求。并且墨刀是线上化产品，只要有网络和账号，团队成员能随时进行设计，并且便于团队协作，内置海量组件、图标素材以及丰富的行业模板，能助力我们便捷地完成原型设计。

植物交易平台首页,商品页,分类,搜索,商品详情页等页面原型设计(链接)

原型设计描述

一、软件名称:绿韵花坊

二、界面设计说明

设计考虑因素：

1. 色彩采用蓝绿色系（#B4FDFF+白色为主色）
2. 功能齐全
3. 易交互实用
4. 界面美观
5. 界面设计一致性
6. 用户学习成本及使用习惯

1. 首页

功能：商品推荐/分类导航/搜索入口/底部导航
组成：

• 顶部搜索栏(点击进入搜索界面)
• Banner轮播图(具有宣传效果图)
  -分类标签 推荐(首页会有一些商品推荐,点击进入商品详情页面),养护技巧(是个下拉菜单,选择分类后首页会出现对应分类的养护教程,点击进入详情),更多分类(点击进入对应页面)
• 商品包含商品图片商品名称加买卖价格以及市场参考价以及商品定位
• 滑动到底的文字提示
  前置条件：无
  后置条件：可点击对应位置进入详情页/分类/搜索
  操作步骤：

1. 可以滑动浏览推荐商品/点击搜索/点击分类/
2. 点击任意商品卡片

---

2. 商品详情页

功能：商品信息展示/购买决策
组成：

• 商品图
• 价格/库存/养护时间/市场价格/养护手册/评论
• 询问卖家

前置条件：从商品卡片(可能在首页/搜索页/更多分类)进入
后置条件：发起购买的订单页/与卖家的聊天界面

操作步骤：

1. 查看商品详情
2. 点击"立即购买"/"询问卖家"/"加入购物车"

---

3. 商品页

功能：显示商品
组成：

• 商品图片+名称+市场价+定价+商品定位
• 返回首页箭头
• 滑动到底的文字提示

前置条件：从搜索点击确认或者分类点击分类名称
后置条件：可进入其他商品详情
操作步骤：

1. 滑动浏览商品
2. 点击商品卡片

4. 搜索页

功能：搜索商品
组成：

• 搜索框(点击输入文字)
• 确认按钮
• 取消按钮
• 推荐搜索栏

前置条件：从首页点击搜索
后置条件：可进入商品页
操作步骤：

1. 点击搜索框然后输入商品名称
2. 点击搜索跳转

6.分类页面

功能：选择种类会有对应的种类商品
组成：

• 搜索框
• 分类选项
• 返回首页按钮

前置条件：从首页点击分类
后置条件：可进入商品页/搜索页面
操作步骤：

1. 点击分类的选项进入商品页
2. 点击搜索框进入搜索页面

页面跳转流程说明

---

用户进入应用首页后，可根据需求选择跳转至搜索页、分类页或商品详情页；商品页支持用户跳转至商品详情页，或返回首页；在搜索页输入内容确认后，页面将跳转至商品页或取消返回主页；而分类页面则可跳转至商品页或搜索页或者返回首页，实现各页面间的灵活切换。