原型设计工具及实践

目录

• 原型设计工具比较

  • 墨刀

  • Axure

  • Mockplus

• 原型设计实践

  • 主题设计

  • 原型功能

  • 界面设计

  • 切换界面

  • 流程说明

原型设计工具比较

1. 墨刀

   适用领域:

   * 墨刀适用于快速创建简单的交互原型，适合于设计师、产品经理和开发人员等各个领域的用户。它拥有丰富的模板和组件库，可帮助用户快速搭建原型。
   

   优点:

   * 墨刀提供了丰富的模板和组件库，用户可以快速创建交互原型。
   
   * 墨刀支持多人协作，用户可以邀请团队成员一起编辑原型。
   
   * 墨刀支持云端保存和分享，用户可以随时随地访问和分享原型。
   

   缺点:

   * 墨刀功能相对简单，不适合制作复杂的原型。
   
   * 墨刀的交互效果相对较弱，不够灵活。
   

2. Axure

   适合领域:

   * Axure适用于设计师、产品经理和开发人员等专业领域的用户，尤其适合制作复杂的原型。Axure具有较高的学习曲线，需要一定的时间来学习和掌握。
   

   优点:

   * 可以在另一台电脑上，阅读和编辑Axure原型图；
   
   * 在Axure预览模式下，可以在浏览器左侧显示网页的目录；
   
   * Axure软件有Mac版本和windows版本。
   

   缺点:

   * Axure学习曲线较陡峭，需要花费一定的时间学习和掌握。
   
   * Axure的价格较高，不适合个人用户或小团队使用。
   

3. Mockplus

   适用领域:

    * Mockplus（摹客）是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。Mockplus的使用者包括产品经理、项目经理、UI设计师、程序员等用户。
   

   优点：

    * 使用起来异常的方便快捷,容易上手。
   
    * Pc端和Web端都有很好的支持。
   
    * 拥有初步免费和高级收费,小的设计不用花钱,大的设计,也是按月来收费。
   
    * 包含所有设备的设计方案,PC,Web,MP,而且设计支持很棒的素材库的下载。
   

   缺点：

    * 不支持手势交互。
   
    * 开发技术不稳定，功能很少不提供源文件，只能导出图片或者生成原型，但没有原型源文件。
   
    * Mockplus里线条没有提供隐形的扩展感应区，不容易点击。
   

原型设计实践

1. 主题名称:

     牛啵商城,一款牛啵的二手交易平台
   

2. 功能:

     * 用户注册和登录：允许用户创建账户、登录和注销。
   
     * 商品发布：允许商家发布二手商品的信息，包括商品的照片、描述、价格、交易方式等。
   
     * 商品搜索和筛选：允许用户根据关键词、价格、地理位置等条件进行商品搜索和筛选。
   
     * 商品购买：允许用户直接购买或议价购买商品。
   
     * 交易沟通：允许用户在交易过程中与卖家或买家进行沟通。
   
     * 支付系统：允许用户通过APP内置的支付系统进行交易支付，包括第三方支付平台的接入。
   
     * 物流配送：提供物流配送服务，包括快递、自提、送货上门等方式。
   
     * 评价系统：允许用户对交易过程和对方进行评价和评分，以提高用户的信誉和可信度。
   
     * 个人中心：允许用户管理个人信息、交易记录、收藏夹、购物车等。
   
     * 活动推广：为了吸引用户和提升APP的知名度，允许发布者创建折扣、限时优惠等活动并向用户推广。
   
     * 社区交流：例如评论、评价、分享和收藏物品等功能。这些功能可以帮助用户更好地了解卖家和物品，并增加购买意愿。
   
     * 资产管理：便于商家更好的管理自己的收益。
   

3. 界面设计考虑因素:

     * 用户体验：设计应该专注于提高用户体验，确保易于使用和导航。通过使用直观和简洁的布局、图标和颜色来实现。
   
     * 交易流程：设计应该使购买和出售物品的过程简单和容易，使用户可以快速找到想要的物品，与卖家进行交流并完成交易。
   
     * 搜索功能：设计应该提供高级搜索选项和过滤器，以便用户可以根据价格、地理位置、物品类型等准确地搜索物品。
   
     * 物品列表：设计应该呈现物品列表，以便用户可以快速浏览、筛选和排序可用的物品。此外，设计应该使用户可以查看物品的详细信息，包括价格、照片、描述和其他详细信息。
   
     * 信任和安全：设计应该在用户之间建立信任，确保交易过程安全。例如，可以提供用户评级、交易历史记录和付款保护等功能。
   
     * 社交互动：设计应该鼓励社交互动，例如评论、评价、分享和收藏物品等功能。这些功能可以帮助用户更好地了解卖家和物品，并增加购买意愿。
   
     * 多平台支持：设计应该支持多个平台，例如手机、平板电脑和桌面电脑。此外，设计应该考虑响应式设计，以便在不同屏幕尺寸和设备上实现良好的用户体验。
   
     * 品牌一致性：设计应该与品牌的整体视觉风格一致，包括标志、颜色、字体和排版等方面。这有助于提高品牌的可识别性，并加强用户对品牌的信任感。
   

4. 切换界面:

   • 圈子界面

   

   • 界面功能:

    1. 浏览社交商品
   
    2. 可以进行选择推荐,最近发布,猜你喜欢来显示不同的页面
   
    3. 可以点击头像进行交互,查看个人主页
   

   • 界面组成:

    1.  商家头像图片
   
    2.  商家物品图片
   
    3.  商家物品的价格
   
    4.  一个选项卡:(推荐|最近发布|猜你喜欢)
   

   • 前置条件:

    点击下边框圈子进入圈子主页
   

   • 后置条件:

    进入商家主页
   

   • 操作步骤:

    1. 点击猜你喜欢,推荐,最近发布进行切换页面
   
    2. 点击商家头像即可进入商家主页
   

   • 商家主页

   

   • 界面功能:

    1. 浏览商家姓名,ip地址
   
    2. 可以选择关注商家,与商家聊天
   
    3. 可以浏览该商家的笔记及收藏
   

   • 界面组成:

    1.  商家头像,用户名,ip地址,简介
   
    2.  关注以及消息按钮
   
    3.  笔记界面
   
    4.  收藏界面
   

   • 前置条件:

    点击圈子主页商家头像
   

   • 后置条件:

    点击消息按钮,进入消息界面
   

   • 操作步骤:

    1. 可以点击关注按钮,以及消息
   
    2. 可以点击笔记及收藏查阅商家不同信息
   

   • 消息页面

   

   • 界面功能:

    1. 可以点击赞和收藏观看自己曾经浏览记录
   
    2. 可以知道最近关注的商家及博主
   
    3. 可以在商家页面进行留言,并@朋友
   
    4. 可以创建聊天,进行私聊
   

   • 界面组成:

    1.  三个图标,以及三个解释文字
   
    2.  消息通知面板,以及日期和未回复消息数量
   
    3.  创建聊天
   

   • 前置条件:

    点击消息按钮,进入消息界面
   

   • 后置条件:

    点击消息面板中消息进入下一个页面
   

   • 操作步骤:

    1. 点击赞与收藏,新增关注,评论和@查看记录
   
    2. 点击创建聊天,或者可以点击下方的消息通知
   

   • 消息页面

   

   • 界面功能:

    1. 可以浏览商家对你进行的留言
   
    2. 可以显示商家的头像以及名字
   

   • 界面组成:

    1.  日期
   
    2.  商家消息框以及商家头像及名字
   

   • 前置条件:

    点击消息通知按钮,进入消息通知界面
   

   • 后置条件:

    点击消息面板中消息进入商家主页
   

   • 操作步骤:

    点击消息通知的消息头像进入商家页面或者进入客服页面
   

   5. 切换界面流程

   首先点击下边框圈子进入圈子的主页,在圈子主页中点击商家头像可进入商家个人主页,
   再点击下边框的消息界面,在消息界面中点击消息通知,即可进入消息通知界面。
   

   • 流程图如下: