原型设计

用原型设计工具制作《微信界面跳转》

一、常见使用的原型设计工具墨刀、Axure、Mockplus.

下面是墨刀、Axure、Mockplus等原型设计工具优、缺点以及适用领域

(1)优点:

墨刀:容易上手,界面很简单明了一些,和PPT类似左面是自己的项目页面右面是对项目添加的一些操作;可以直接生产分享链接和二维码,同时能自动形成页面流程图,这就很方便。还支持团队协作。
Axure:Axure作为老牌的原型图工具,功能最齐全,交互最多样,基本任何想要的效果都可以实现,尤其在制作PC端原型图上有优势。
Mockplus:基础版免费使用,操作简单,上手快,交互简单(只需拖曳就可以),功能多样,组件资源丰富,预览方式和导出类型多样,支持团队协作;有原型演示,可以帮助前端设计师、后端程序员更好地理解你的原型产品;mockplus有组件库和图标库,界面设计较为方便。

(2)缺点:

墨刀:必须在线操作,离线无法保存文件;免费版对于使用程度用很大限制。
Axure:axure缺点同样也相当明显,Axure的动态面板、中继器等功能都是强大的,但是不容易搞懂。AXURE的素材也是很蛋疼的问题,大部分PM 都会在AXURE原型库、素材库去寻找相应的第三方素材库,进行载入。需要花费相应的时间。
Mockplus:不支持鼠标悬停,手机预览不是很清楚,日历表组件是静态的;表格功能还需要完善。

(3)适用领域:

墨刀:墨刀适用于一些简单,快速的在线原型设计工作,设计便捷,协同办公效率高;但是使用界面免费有限页面数量,和受网络影响可能导致页面丢失让墨刀下降了一个层次,通过Axure对比,原型末班不像Axure那么丰富。
Axure:Axure作为一款专业的快速原型设计软件,其实在功能上是十分齐全的,并且交互的样式也比较多样,主要是通过动态面板、函数、中继器等几个模块就几乎可以实现任何常见的交互效果,所以说Axure在制作PC端原型图上是占有非常强大的优势的;除此之外,Axure还拥有强大的编辑功能,使得你所制作的原型更具生动化!你还可以将常用的交互和组件进行打包!
Mockplus:Mockplus(摹客)是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。

二、微信跳转功能使用摹客来制作

1.注册摹客

2.新建选择要用的尺寸

3.建立目录

目录如下:

        微信
        通讯录
        我
        支付

共计四个页面实现简单的微信区功能

  • 微信页面

功能:跟常用联系人聊天,可以搜索,添加好友发起群聊,扫一扫,收付款

页面组成:常用聊天联系人聊天框,“微信”图标,“通讯录”图标,“我”图标,“发现”图标

前置条件:点击界面微信图标进入微信

后置条件:可以点击“通讯录”图标跳转到通讯录页面,可以点击“发现”图标跳转到发现页面,可以点击“我”图标跳转到个人页面

  • 通讯录页面

功能:可以添加好友,选择好友聊天,可以搜索,添加好友,发起群聊,扫一扫,收付款

页面组成:联系人,“微信”图标,“通讯录”图标,“发现”图标,“我”图标 ,新添的朋友,群聊,标签,公众号,企业微信联系人标签

前置条件:点击界面“通讯录”图标

后置条件:可以点击“微信”图标跳转到微信页面,可以点击“发现”图标跳转到发现页面,可以点击“我”图标跳转到个人页面

  • 个人页面

功能:可以看见我的微信简单信息,可以发朋友圈,扫二维码

页面组成:我的头像,微信名,微信号,二维码,支付,收藏,相册,卡包,表情,设置标签,“微信”图标,“通讯录”图标,“发现”图标,“我”图标

前置条件:点击界面“我”图标

后置条件:可以点击“微信”图标跳转到微信页面,可以点击“通讯录”图标跳转到通讯录页面,可以点击“发现”图标跳转到发现页面

  • 支付页面

功能:收付款,钱包余额,腾讯服务

页面组成:收付款,钱包余额,腾讯服务的信用卡还卡,微粒贷借钱,手机充值,理财通,生活缴费,Q币充值,城市服务,腾讯公益,医疗健康图标,界面返回图标,防疫健康码图标

前置条件:点击界面“我”页面中的支付图标

posted @ 2024-04-12 18:49  beisheng2001  阅读(21)  评论(0编辑  收藏  举报