手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

软件工程基础作业——原型设计

2023-04-24 06:16:58 来源：博客园

软件工程基础作业——原型设计

软件工程基础作业——原型设计
- 我的gitee相关仓库地址：点这里！
- 关于原型设计工具选择的讨论
  - 选择范围及介绍：墨刀、Axure、Mockplus rp、Figma、Balsamiq
    - 1、墨刀
      使用领域
      优势
      缺点
    - 2、Axure
      使用领域
      优势
      缺点
    - 3、Mockplus rp
      使用领域
      优势
      缺点
    - 4、Figma
      使用领域
      优势
      缺点
    - 5、Balsamiq
      使用领域
      优势
      缺点
  - 工具需求分析
    - 问题抽象：
    - 相关需求：
  - 各工具领域适用及优缺点：
  - 结论
- 相关原型设计说明
  - 原型主题与名称
  - 原型故事与使用场景
    - 场景一：什么比较好？
    - 场景二：你怎么能这样？
    - 场景三：请给我个机会！
    - 场景四：我们的校园生活蒸蒸日上！
  - 原型页面关系
  - 功能考虑
  - 界面设计考量
  - 设计页面预览与说明
    - 1、主页
      界面预览
      界面功能
      界面组成
      前置条件
      后置条件
      操作步骤
    - 2、论坛页
      界面预览
      界面功能
      界面组成
      前置条件
      后置条件
      操作步骤
    - 3、热榜页
      界面预览
      界面功能
      界面组成
      前置条件
      后置条件
      操作步骤
    - 4、看贴页
      界面预览
      界面功能
      界面组成
      前置条件
      后置条件
      操作步骤
  - 界面切换流程

我的gitee相关仓库地址：点这里！

关于原型设计工具选择的讨论

选择范围及介绍：墨刀、Axure、Mockplus rp、Figma、Balsamiq

1、墨刀

使用领域

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

【资料图】

优势

操作交互简单、易上手、效率高
高保真度
易获取，支持全平台且有免费版
支持团队协作

缺点

作为线上设计工具，需要上网运行，同时产品也须保存在云端，安全性与可靠性较差
缺少高级组件，对于要求保真度非常高的原型来说无法满足
在复杂设计逻辑中的各项操作不够灵活

2、Axure

使用领域

Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等，另外，架构师、程序员也在使用Axure。Axure RP Pro能快速帮助设计者设计出快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。

优势

功能齐全、资源丰富、组件多样、行业内通用的工业软件
高保真度
能够离线使用，具有较高安全性与可靠性
支持团队协作

缺点

操作交互等不是很直观、需要付出一定的学习成本
获取上需付费获取正版，具有一定使用成本
寻找需要素材较为繁琐

3、Mockplus rp

使用领域

摹客（Mockplus）隶属于成都摹客科技有限公司，专注于一站式的产品设计及协作。依托摹客“1+2+1”（1个平台+2个工具+1个设计系统）的产品矩阵，为产品开发团队提供全流程协作、原型设计、UI设计和设计规范管理支持。摹客可以自产出原型及高保真设计，也支持多款主流设计工具（Figma/Sketch/PS/XD/Axure等）的设计稿交付，团队成员在产品、设计到开发的各个工作环节，使用不同设计工具，可通过摹客平台协同工作

优势

操作交互简单、易上手、效率高，适合小团队
矢量绘制
项目树层次划分清晰，结构明确
支持团队协作

缺点

稳定性来说相对较差，在大型项目中可能会有一定风险
缺少高级组件，对于要求保真度非常高的原型来说无法满足
对于免费版来说单个项目支持页面较少

4、Figma

使用领域

Figma，是一款基于浏览器的在线设计协作平台，集成了原型、UI、交付等功能，可以完成从线框图、原型设计、UI 设计到协作、设计系统管理、开发人员交付等各种环节。

优势

操作交互直观简单、易上手、效率高
高保真度
易获取，支持全平台且有免费版
支持团队协作，拥有最优秀的多人协作功能
在国外市场中日益成为主流

缺点

作为线上设计工具，需要上网运行，同时产品也须保存在云端，安全性与可靠性较差
缺少高级组件，对于要求保真度非常高的原型来说无法满足
Figma作为国外网站需要特殊手段连接
汉化以及相关中文社区生态较为缺少

5、Balsamiq

使用领域

Balsamiq Mockups 在软件产品原型图设计领域，特别是 Web 原型图设计领域尤其受欢迎。使用 Balsamiq Mockups 画出的原型图都是手绘风格的图像，看上去美观、清爽。它支持几乎所有的 HTML 控件原型图，还支持 iPhone 手机元素原型图。

优势

操作交互简单、易上手、效率高
强调快速开发而不拘与细节
支持团队协作

缺点

低保真的线框草图
平级页面层级，且缺少交互
对除web外页面设计支持都较差
无免费版，获取方式有一定成本

工具需求分析

#### 故事背景：四个仅具有课设项目背景的软工大二学生组队进行相关课程作业，需要在一周半内确定项目内容、完成需求分析，并快速完成相关原型设计，以便为后续代码实现进行铺垫。
问题抽象：
团队成员相关合作与开发经验较少，同时技术较为薄弱
任务时间为一周半，包含立项、分析、学习、设计四项内容
任务内容小组四名成员协作，每名成员负责至少四页原型页面设计，总计至少需要16页的内容
任务目标包括完成作业考核以及培养相关从业素养
相关需求：
操作便捷直观、学习成本较低
形式较为统一、便于管理
最好能四人及时协作提升设计效率
支持功能能够满足课设任务要求
效果美观
适用于主流市场
易获取

得出需求下考虑的各维度：上手难度、工作内容风格、协作便捷性、页面上限、保真度、使用领域及群体、获取相关。

各工具领域适用及优缺点：

原型设计工具	上手难度	工作内容风格	协作便捷性	页面上限	保真度	使用领域及群体	获取相关	支持平台	生态及功能	特别说明
墨刀	简易	简单易统一、精细方面较差	支持10人协作模式	20页	可支持高保真度	国内app原型开发、对预览效果要求较好的设研团队	可使用免费版	支持全平台	可使用用户分享模板	对超高保真度项目无法满足，国内使用生态在下滑
Axure	有一定门槛	精细复杂、但较难统一	支持5人协作模式	较多	可支持高保真度	国际原型开发通用、对预览效果要求较好的专业设研团队	30天试用版	支持windows、Mac	支持插件引入相关功能	对UI设计较为侧重
Mockplus rp	简易	简单易统一、精细方面较差	支持多人协作	单项目限制15页	可支持高保真度	国内app、游戏等原型开发、注重前期功能展示的设研团队	可使用免费版	支持全平台	可支持sketch等拓展插件	支持矢量绘制
Figma	比Axure	相比Axure更易统一与简易	能够较多人的协作	无限制	可支持高保真度	国际UI设计开发、专业UI设计团队	可使用免费版	支持全平台	国内生态较差，但功能十分强大	需要魔法上网、仅支持联网且十分不稳定、对中文支持较差
Balsamiq	简易	风格简约易用、便于统一	desktop对协作支持较差	无限制	低保真度	国际web原型开发、对项目早期功能与实现较为重视的设研团队	30天使用版	支持全平台	草图设计、对交互方面较差	基本不支持中文、且不重交互

结论

综合来看，Mockplus rp较为适合作为本次作业原型设计工具。

软件工程基础作业——原型设计

软件工程基础作业——原型设计

我的gitee相关仓库地址： 点这里！

关于原型设计工具选择的讨论

选择范围及介绍：墨刀、Axure、Mockplus rp、Figma、Balsamiq

1、墨刀

使用领域

优势

缺点

2、Axure

使用领域

优势

缺点

3、Mockplus rp

使用领域

优势

缺点

4、Figma

使用领域

优势

缺点

5、Balsamiq

使用领域

优势

缺点

工具需求分析

问题抽象：

相关需求：

各工具领域适用及优缺点：

结论

相关原型设计说明

原型主题与名称

原型故事与使用场景

场景一：什么比较好？

场景二：你怎么能这样？

场景三：请给我个机会！

场景四：我们的校园生活蒸蒸日上！

原型页面关系

功能考虑

界面设计考量

设计页面预览与说明

1、主页

界面预览

界面功能

界面组成

前置条件

后置条件

操作步骤

2、论坛页

界面预览

界面功能

界面组成

前置条件

后置条件

操作步骤

3、热榜页

界面预览

界面功能

界面组成

前置条件

后置条件

操作步骤

4、看贴页

界面预览

界面功能

界面组成

前置条件

后置条件

操作步骤

界面切换流程

我的gitee相关仓库地址：点这里！