一、实验题目:原型设计
二、实验目的:掌握产品原型设计方法和相应工具使用。
三、实验要求
(1)对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。
(2)利用网络资源自学Mockplus或墨刀等原型设计工具,并利用原型工具自拟主题进行原型设计。主题可以是高校二手交易平台、高校社团、在线听歌、老年手机、家庭相册管理等。
具体要求:
(1)对主题名称、功能、界面设计考虑因素等进行说明;
(2)每位同学提供至少四个切换界面,每个界面提供界面功能,界面组成,前置条件,后置条件,操作步骤简单说明;
(3)提供界面切换流程说明。
一、墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点
1.墨刀
适用领域:
浏览器注册使用, Windows、Mac 桌面客户端,同时支持 iOS、Android 端预览。
优缺点:
优点:云端操作,网页分享,墨刀的APP原型可以支持下载在手机里
缺点:价格较贵,不能画流程图,功能还不是很全面
2.Axure
适用领域:
应用领域软件、网页原型设计
优缺点
优点:操作变化多端,自带组件库并支持第三方组件库,提供强大的交互支持,有完整的教程及支持文档,支持原型预览。
缺点:只能免费试用30天,性价比不高,专业需求度高。
3.Mockplus
适用领域:
Mockplus除用于移动APP原型设计,还可以制作PC、网页的原型设计,它可以帮助UI设计师在最短的时间内完成产品原型图的设计。
优缺点:
优点:基础版免费使用,操作简单,上手快,交互简单(只需拖曳就可以),功能多样,组件资源丰富,预览方式和导出类型多样,支持团队协作。
缺点:不支持手势交互。
二、使用摹客完成汽车信息与交易平台的原型设计
实验选题为汽车平台交易app,完成了首页,搜索页面,热搜排行榜,车辆的信息对比以及联系销售的原型设计。这些功能使该app在汽车交易平台中全面领先,下面是设计过程及原型图:
(1)首页
在首页中完成了排行榜,新车上市跳转
点击搜索框或搜索图标可跳转到搜索页面,页面右上角加入了位置选择可以客户将位置选择为想搜索的城市。并加入轮播图和顶部渐变色使整体页面紧凑美观
(2)排行榜页面
该页面实现与首页和搜索页面的连接
点击左上角可以返回首页,点击搜索图标可跳转到搜索页面。
该页面还是实现了不点击按钮时为默认(灰白色),
点击按钮时显示与原来按钮不同的颜色,并且在点击其他按钮使,
该按钮返回原样。实现了与按钮的交互,并且可以让客户对按钮的点击更直观的体验到。
(3)新车上市
在此页面中,加入了返回首页的跳转,并加入日期选择栏,可以让客户自由选择想要查询的日期。
此页面还加入了按钮交互功能,不点击按钮时为默认(灰白色),
点击按钮时,按钮颜色改变,并且点击其他按钮时,原点击按钮回复原状。
(4)新车上市中车辆信息页面(在该原型设计中为领克01)
进行车辆信息对比,以及价格的显示
在右上角可以选择城市,并且实现了可以联系销售的功能。
点击联系销售,会滚出一个面板,可选择在线联系或者电话联系
(5)搜索页面
该页面实现与上一页的跳转,点击左上角可以跳转回上一页。
使用搜索框,并对搜索框加了阴影,使其更具有立体感,并在空白处加入热搜榜,使页面不单调不无聊且更美观