首页 > 其他分享 >实验一-原型设计 微信卡包页面

实验一-原型设计 微信卡包页面

时间:2024-04-18 20:12:52浏览次数:28  
标签:操作步骤 功能 界面 微信 原型 使用 卡包 交互 页面

微信卡包页面-原型设计分享
一、实验题目:原型设计
二、实验目的:掌握产品原型设计方法和相应工具使用。
三、实验要求
 对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。

1.墨刀:
  ~适用领域:墨刀适用于快速原型设计和协作,特别是在移动应用和网页设计方面。它提供了丰富的元素库和易于使用的界面,适合设计师、产品经理和开发团队之间的快速迭代和交流。墨刀,可以说是专为移动端产品原型设计而生。它的免费版本自带的部件、交互、功能,基本上能满足移动端产品原型的设计要求,并且墨刀的控件都是基于APP,以及系统平台IOS和安卓,因此在创建项目时可以首先选择相应的设备布局,减少了不少工作环节。
  优点:
   (1)原型区提供了许多兼具实用性与美感的高级组件,类型涵盖基础图标、页面、按钮、导航栏、弹窗、动态轮播、各式下拉菜单等。
   (2)可以在素材广场中搜索不同类型的组件直接添加到本地,拖拽即可复用。进行原型编辑时可直接拖动链接区域的小闪电图标到跳转页面。
   (3)拖拽一下,就能实现页面跳转效果,动作+目标+动效,交互逻辑清晰可见。用户界面简洁直观,易于上手;
   (4)具有丰富的元素库和模板,可以快速搭建原型;支持多人协作,便于团队合作。
  缺点:
   (1)目前原型的交互效果系统自带的还比较少,但基本满足日常所有原型的使用。
   (2)相对较简单,对于复杂交互和动效的支持不如其他工具;
   (3)在大型项目中可能会遇到性能方面的限制。需要充费才能够使用更强大的共享创建功能。
   (4)效果切换因为是采用连线的方式,有时候会让使用者脑子错乱的感觉。并且目前原型的交互效果系统自带的还比较少。

2.Axure:

适用领域:Axure适用于较复杂的原型设计和交互效果模拟,特别是在企业级应用和软件设计方面。它提供了丰富的交互组件和行为定义功能,能够较为真实地模拟用户操作体验。
  优点:
   (1)功能强大,支持复杂的交互和动效设计。
   (2)可导出高保真原型,便于与开发团队进行沟通和交流;
   (3)具有丰富的扩展和定制能力,满足不同项目需求。
   (4)使用成本很低
  缺点:
   (1)Axure的动态面板、中继器等功能都是强大的,但是不容易搞懂。
   (2)AXURE的素材也是很蛋疼的问题,大部分PM 都会在AXURE原型库、素材库去寻找相应的第三方素材库,进行载入,需要花费相应的时间。
   (3)学习曲线较陡峭,需要一定的时间和精力来掌握其高级功能;界面相对复杂,不够直观;较高的价格可能对个人用户和小团队不太友好。
   (4)手机端演示效果差,服务器不在国内,自带元件库用处不大等。

Mockplus:

适用领域:Mockplus适用于中等复杂度的原型设计和快速迭代,特别是在小型团队和个人项目中较为流行。它注重简洁易用的界面和快速搭建原型的能力。
  优点:
   (1)界面简洁,易于上手;拥有丰富的预设组件和模板,可以快速搭建原型;
   (2)支持多平台导出和在线分享,便于团队协作和反馈。
   (3)mockplus有组件库和图标库,界面设计较为方便。
  缺点:
   (1)相对于其他工具,功能和定制能力较为有限;
   (2)在复杂交互和高保真原型方面表现不如一些专业工具;缺乏一些高级功能和扩展性。

四、实验步骤
  1、主题名称:微信卡包页面
  2、功能介绍:为用户提供使用交通卡,会员卡,礼品卡和票券的使用
  3、背景分析:在电子化的时代,各种卡片都已经不需要随身携带,在微信里即可使用,大大增加了用户的方便程度。
  4、具体由以下界面构成:

(1)首页

界面组成:上方为退出和详情选项,下方有四个选项,可以根据需求进入各种卡的使用
 界面功能:可以查看自己所拥有卡类并使用
 操作步骤:点击您想使用的卡类的右侧箭头即可使用

(2)详情界面

界面组成:由快捷工具,热门问题与问题分类组成
 界面功能:可以查看历史卡券记录与查看各类问题
 操作步骤:点击所需求的界面即可进入

(3)会员卡界面

界面组成:由各类会员卡组成
 界面功能:可点击查看所拥有的会员卡并使用
 操作步骤:单击

(4)交通卡界面

界面组成:由欢迎使用交通卡组成
 界面功能:可点击查看所拥有的交通卡并使用
 操作步骤:单击开始使用

(5)券和礼品卡界面

界面组成:由各类券与礼品卡卡组成
 界面功能:可点击查看所拥有的会员卡并使用
 操作步骤:单击

(6)票证界面

界面组成:由发票和证件组成
 界面功能:可点击查看所拥有的发票,可以添加证件
 操作步骤:单击!

五、原型演示
视频演示链接:【摹客-哔哩哔哩】 https://b23.tv/0RdHSJY
原型链接:https://rp.mockplus.cn/run/y18HMw98Wx/0zHGqOdMxt?cps=expand&rps=expand&nav=1&ha=0&la=0&fc=1&dt=iphoneX&out=0&rt=1&as=true

标签:操作步骤,功能,界面,微信,原型,使用,卡包,交互,页面
From: https://www.cnblogs.com/wjy-yaya521/p/18144298

相关文章

  • h5 自适应页面背景图无法自动适应的问题
     有时候制作好自适应页面,上面用的是背景图,发现在手机中,宽度会出现不能100%显示的问题,虽然样式中我们使用了width为100%。加入以下语句<html><head><metaname="viewport"content="width=1200px">当只设置width属性值,而不指定initial-scale属性值时,大多数浏览器......
  • 【Python微信机器人】写一个监控采集公众号文章的插件
    原文链接:https://mp.weixin.qq.com/s/f8zbM6wMld3koqjaFbCuxw前言弄了个视频号下载后,同一个问题每天都会被问,回答的有点烦了。想了想根本原因还是缺少一个交流平台,微信群的话,刚进群的看不到之前的聊天记录。想整个知识星球,发现只能弄个收费的,免费的需要激活码才能创建。而有......
  • 微信小程序中生命周期钩子函数
    微信小程序App的生命周期钩子函数有以下7个:   onLaunch(options):当小程序初始化完成时,会触发onLaunch(全局只触发一次)。   onShow(options):当小程序启动或从后台进入前台显示时,会触发onShow。   onHide():当小程序从前台进入后台时,会触发onHide。   onError(......
  • 微信小程序 版本更新 强制更新新版本
    在点击小程序发布的时候选择,版本升级选项 之前用户使用过的再打开小程序页面就会弹出升级弹窗modal在utils.js中声明版本更新方法 //static/utils/index.jsexportfunctioncheckUpdateVersion(){//创建UpdateManager实例constupdateManager=uni.getUp......
  • java多渠道消息推送-(微信公众号、钉钉、邮箱、系统内部、短信等)
    1.消息对象定义1.1 通用消息对象定义packagecom.yj.notice.message;importcom.yj.commons.tools.utils.DateUtils;importcom.yj.commons.tools.utils.StringUtil;importcom.yj.notice.costant.NoticeMethodEnum;importlombok.AllArgsConstructor;importlombok.Bu......
  • 常见问题——VS调试出现:未加载mscorlib.pdb 的页面
    问题:VS在调试程序的时间,出现单独一个报错页面:未加载mscorlib.pdbmscorlib.pdb包含查找模块mscorlib.dll的源文件所需的调试信息解决方法:点击调试=>选项=>调试=>勾选:常规点击启用我的代码=》勾选:启用时若没有用户代码则发出警告(仅限托管)参考:https://www.cnblogs.com/Can-da......
  • 通过前端事件获得控件所在页面html
    //输入框获取焦点事件functionhandleInputFocus(){ console.log('handleInputFocus2',event); letpgHtml=$(event.target).prop('ownerDocument').body.innerHTML;//jquery控件所在网页html(不知道为啥直接event点不出ownerDocument) letcurrHtml=$(event.target).pr......
  • vue页面表格组件高度控制
    //浏览器窗口内部高度console.log("window.innerHeight",window.innerHeight);console.log("document.clientHeight",document.documentElement.clientHeight);console.log("body.clientHeight",document.body.clientHeight);//获取vue组件元素的高度console.l......
  • element的表格页面宽度变化问题 (防抖函数)
      //表格问题(防抖函数) constdebounce=(fn,delay)=>{ lettimer=null; returnfunction(){ letcontext=this; letargs=arguments; clearTimeout(timer); timer=setTimeout(function(){ fn.apply(context,args); },delay); } } const_R......
  • flutter 尝试创建第一个页面(三)
    新建目录assets 存放图片在pubspec..yaml中添加flutter:#ThefollowinglineensuresthattheMaterialIconsfontis#includedwithyourapplication,sothatyoucanusetheiconsin#thematerialIconsclass.uses-material-design:trueasset......