• 一、原型设计工具比较
  • 1.墨刀
  • 2.axure
  • 3.Mockplus
• 二、原型设计
  • 1.主题
  • 2.主要功能
  • 3.界面设计考虑因素（登录部分）
  • 4.页面切换
  • 5.页面切换流程

一、原型设计工具比较

1.墨刀

• 适用领域

墨刀是一款功能强大的原型设计工具，适用于设计师、开发者、产品经理等多个领域。

• 优点

1.界面简洁易用，操作简单，符合国人使用习惯；
2.支持快速交互设计，支持多种手势模拟；
3.持多人协作设计，团队协作效率更高；
4.具有丰富的设计元素库和插件，能够创建出复杂的交互原型；
5.可以输出多种格式的文档、代码和图像文件，方便与其他软件进行集成和互换。

• 缺点

1.价格较高，对于小型企业或个人用户来说相对较贵；
2.对于一些高级功能需要付费；
3.国内市场占有率较低，社区支持不如 Sketch 等竞争对手完善。

2.axure

• 适用领域

Axure RP是一款高级的原型设计工具，适用于互联网产品和应用程序的设计和开发。

• 优点

1.功能丰富，可以创建交互式原型，包括流程图、线框图和注释等；
2.支持多人协作设计，具有团队协作功能，可以加强设计师之间的沟通与合作；
3.可以输出多种格式的文档、代码和图像文件，方便与其他软件进行集成和互换；
4.可以自定义视觉样式，并与各种操作系统进行兼容；
5.可以使用动态面板、小部件和其他组件来模拟复杂的用户界面及交互体验；
6.提供了广泛的第三方插件支持。

• 缺点

1.学习曲线较陡峭，需要一定的时间学习和掌握；
2.定价比较高；
3.对于小规模的项目，可能会感觉工具的功能过于复杂而不实用。

3.Mockplus

• 适用领域

Mockplus是一款简单易用的快速原型设计工具，适用于互联网产品、移动应用程序和桌面软件等多个领域。

• 优点

1.操作简单，界面简洁直观；
2.有丰富的UI组件库，满足用户快速完成原型制作的需求；
3.支持批量导出HTML静态页面、CSS样式、SVG图像等常见的前端开发资源；
4.支持云端协作设计，方便与团队之间共享设计资料；
5.可以创建高交互性的界面原型，提供了很多动画特效和手势操作的支持。

• 缺点

1.功能相比一些高级的原型设计工具稍显简单；
2.不支持定制化开发；
3.兼容性可能存在一定问题（在一部分浏览器上体验不如预期）。

二、原型设计

1.主题

• 一个高校社团管理平台（ClubHub）

2.主要功能

• 对一个高校学生社团进行管理
• 学生可通过该平台了解自己及其他社团的相关信息

3.界面设计考虑因素（登录部分）

• 用户友好性。登录界面的设计需要简单清晰，让用户能够快速找到登录入口，舒适地完成登录操作。
• 安全性。需要采用安全可靠的登录方式，如密码、手机验证码等，确保其账号信息安全。
• 用户体验。简洁明了、易于操作的界面可以为用户提供更好的使用体验，并且欢迎用户使用该平台，提高用户留存率和活跃度。
• 设计风格。对于社员管理平台来说，一种现代化、未来感的设计风格是值得考虑的选择，这将为平台赋予前沿科技的形象，吸引年轻社员的注意力。并且需要考虑字体排版、色彩等设计细节方面的合理搭配。
• 稳定性与可维护性。登录页面的设计需要考虑后期的系统维护和平台升级，所以设计中要理解开发团队的工作需求，确保代码可读性和可维护性，就可以减少后期变更成本。

4.页面切换

1. 密码登录界面
   

• 界面功能
  • 使用密码登录
  • 提供注册和忘记密码的入口
  • 提供其他登录方式
• 界面组成
  • 手机号密码输入框
  • 登录按钮
  • 注册按钮
  • 忘记密码按钮
  • 其他登录方式按钮
• 前置条件
  • 打开APP
• 后置条件
  • 进入主页
• 操作步骤
  • 打开APP,默认密码登录
  • 输入手机号、密码，点击登录或选择其他登录方式
  • 无账号点击注册按钮
  • 有账号但忘记密码了点击验证码登录或点击忘记密码

2. 验证码登录界面
   

• 界面功能
  • 获取验证码
  • 使用验证码登录
  • 提供注册和忘记密码的入口
  • 提供其他登录方式
• 界面组成
  • 手机号验证码输入框
  • 登录按钮
  • 注册按钮
  • 忘记密码按钮
  • 其他登录方式按钮
• 前置条件
  • 打开APP，点击验证码登录
• 后置条件
  • 进入主页
• 操作步骤
  • 无账号点击注册按钮
  • 有账号但忘记密码了点击验证码登录或点击忘记密码
  • 输入手机号，点击获取验证码，输入验证码，登录

3. 注册界面
   

• 界面功能
  • 提供其他登录方式
  • 获取验证码验证来注册账号
• 界面组成
  • 手机号、验证码、密码输入框
  • 注册、获取验证码按钮
  • 其他登录方式按钮
• 前置条件
  • 在密码登录界面点击注册按钮
• 后置条件
  • 返回密码登录界面
• 操作步骤
  • 依次输入内容，点击注册
  • 选择其他登录方式

4. 忘记密码界面（1）
   

• 界面功能
  • 使用验证码验证是否为本人操作
  • 提供其他登录方式
• 界面组成
  • 手机号验证码输入框
  • 验证码获取按钮
  • 其他登录方式按钮
• 前置条件
  • 在密码登录界面点击忘记密码按钮
• 后置条件
  • 进入忘记密码界面（2）
• 操作步骤
  • 输入手机号，点击获取验证码，输入验证码，点击验证

5. 忘记密码界面（2）
   

• 界面功能
  • 设置一个新的密码
  • 提供其他登录方式
• 界面组成
  • 两个密码输入框
  • 确认按钮
  • 其他登录方式按钮
• 前置条件
  • 在忘记密码界面（1）中成功验证
• 后置条件
  • 返回密码登录界面
• 操作步骤
  • 输入新密码，确认新密码，点击确认

5.页面切换流程

首先打开APP，默认在密码登陆界面；如果有账号可以选择使用密码登录或点击验证码登录使用验证码登录；如果忘记密码可以选择验证码登录或点击忘记密码按钮；如果没有账号，点击注册进入注册界面。在完成注册或忘记密码后都会返回密码登录界面。