标签：界面 实践 搜索 消息 原型 工具 互动 墨刀

目录

•  一.原型设计工具比较

  1.墨刀

            适用领域

            优点

            缺点

   2.Axure

            适用领域

            优点

            缺点

  3.Mockplus

            适用领域

            优点

            缺点

• 二.原型设计

1. 主题名称

2. 功能

3. 界面设计考虑因素

4. 切换界面

         5.界面切换流程

---

 

一、原型设计工具比较

1. 墨刀

 （1）适用领域：

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

   （2）优点：

               墨刀提供了非常多的元件，用户可以快速创建原型。

               墨刀支持多人协作互动，用户可以非常方便的邀请团队成员一起编辑并且改造原型。

               墨刀支持云端保存和分享，用户可以随时随地访问和分享原型。

   （3）缺点：

              墨刀只能进行交互设计，不适合进行文档的操作，功能太过简单。

              墨刀的系统太过简单，不能进行太过复杂的操作。

2.Axure

（1）适用领域：

Axure RP是美国“Axure Software Solution”公司出品的一款快速原型（Rapid Prototyping）软件。商业分析师，信息架构师，可用性专家，产品经理，IT咨询师，用户体验设计师，交互设计师，界面设计师，架构师、程序开发工程师都可以使用。

 

（2）优点：

             Axure是专门用来画原型的工具，当然也可以画流程图。Axure是产品经理必备的工具，甚至是专门为产品经理设计的工具。

             Axure可以更快的进行复制黏贴，有很强大的编辑功能。

（3）缺点：

            学习成本高，高级元件的使用有一定学习门槛。

            手机端演示效果差，服务器不在国内，自带元件库用处不大等。

3.Mockplus

（1）适用领域：

摹客（Mockplus）隶属于成都摹客科技有限公司，注重一站式的产品设计及协作。摹客支持全工序的产品设计，连接从需求到开发，为企业产品团队提供原型设计、UI设计、PRD文档撰写管理、全流程协作、自动标注切图、高效评论审阅，支持全部主流设计稿交付，帮助产品经理、设计师、开发人员高效设计协作。

（2）优点：

               Mockplus基础版免费使用，操作简单，上手快，交互简单(只需拖曳就可以)，功能多样，组件资源丰富，预览方式和导出类型多样，支持团队协作。

               Mockplus有原型演示，可以帮助前端设计师、后端程序员更好地理解你的原型产品。

               Mockplus有组件库和图标库，界面设计较为方便。

（3）缺点：

              不支持鼠标悬停，手机预览不是很清楚，日历表组件是静态的。

              表格功能还需要完善。

---

 

二、原型设计

1.主题名称

闲鱼

2.功能

商品发布：允许商家发布二手商品的信息，包括商品的照片、描述、价格、交易方式等。

一键转卖：使用淘宝账号体系的用户可以一键转卖在淘宝上已经购买的物品，物品的原价，名称，主图都会自动贴加，用户只需要输入转让价就行，简单快捷，可谓是剁手党的福利。

商品分类：对各种产品进行分类。

商品关键字浏览搜索：搜索关键字进行产品的搜索。

同城商品浏览搜索：通过位置来确定商品，实现更快的线下交易。

商品鱼塘：咸鱼鱼塘是在地理位置上用户聚集区，不仅能促进同社区乃至同城的闲鱼交易，而且可以提高用户粘性。

用户互动留言：交易前聊一聊，通过该平台买家可以向卖家咨询商品的详细信息，增大了商品信息的完整性，解决买家的疑惑，同时卖家也能够在此衡量买家购买欲的强烈度，可以有效提高交易成功率，增加成交量。

商品购买：允许用户直接购买或议价购买商品。

3.界面设计考虑因素

用户体验感：将用户体验感确定为第一因素，通过简单的界面让用户熟悉使用这个应用软件，便于使用与操作。

信用问题：将信用方面，应放在主要体现的界面中，并且醒目便于寻找。

社区聊天：通过界面的转换来进入聊天界面中，确立一个聊天过程。

4.切换界面

1.消息通知界面

界面功能

• 查看消息
• 搜索联系人，消息
• 选择进行聊天

界面组成

• 界面搜索框
• 搜索输入框
• 搜索按钮
• 消息通知框
• 图片与聊天的展示框

前置条件

• 打开消息通知界面

后置条件

• 进入消息互动界面

操作步骤

• 选择互动消息界面
• 进入聊天搜索界面

2.搜索界面

界面功能

• 搜索聊天记录界面

界面组成

• 搜索输入框
• 搜索按键

前置条件

• 进入搜索聊天记录界面

后置条件

• 搜索想搜索的聊天记录

操作步骤

• 点入搜索框进入搜索聊天记录界面
• 进行搜索所需要的聊天记录

3.互动消息界面

界面功能

• 查看互动消息

界面组成

• 互动消息

前置条件

• 点入互动消息界面

后置条件

• 查看互动消息

操作步骤

• 进入互动消息界面
• 查看或者没有互动消息

4.通知消息界面

界面功能

• 查看通知消息

界面组成

• 通知消息框或者此时没有通知消息

前置条件

• 点入通知消息

后置条件

• 查看通知消息

操作步骤

• 进入通知消息界面
• 查看通知消息有无

5.界面切换流程

1.  首先打开消息通知界面
2. 点击搜索界面，进行聊天记录的搜索
3. 点击互动消息，查看互动消息内容
4. 点击通知消息，查看通知消息内容

   

    界面切换流程图

 

 

 

 

 

 

 

 

 

标签：界面,实践,搜索,消息,原型,工具,互动,墨刀
From： https://www.cnblogs.com/tiankaima/p/17351204.html