首页 > 其他分享 >实验1-----keep健身运动APP

实验1-----keep健身运动APP

时间:2024-04-21 20:12:16浏览次数:24  
标签:界面 APP 点击 原型 设计 健身运动 ----- Axure

一、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点。
Axure

优点:

1.有强大的编辑功能, 使得制作素材库会更便捷一点。
2.更快的复制粘贴,素材库和原型库会多一些。
3.可以项目共享,使得同事间可以同步工作,并保留所有工作历史,并可以随时到处历史版本的项目文档。

缺点:

1.正版的Axure售价高,学生等群体可能负担不起。
2.动态面板和中继器较为复杂,要完全弄懂也需要一定的时间成本,学习成本高。
3.Axure只支持在本地设计。

墨刀

优点:

1.操作效率高,易于上手。
2.动效丰富。
3.分享二维码到微信等十分方便。
4.可自动生成页面流程图。
5.专为移动端产品原型设计而生。基本上能满足移动端产品原型的设计要求并且系统控件都是基于APP,以及系统平台IOS和安卓,因此在里面可以首先选择相应的设备布局,减少了不少不必要的工作环节。

缺点:

1.必须在线操作(离线无法保存)。
2.免费版对于项目数量、页面数量有限制。
3.页面流程图不能自由操作。

Mockpuls

优点:

1.基础版免费使用,操作简单,上手快,交互简单(只需拖曳就可以),功能多样,组件资源丰富,预览方式和导出类型多样,支持团队协作。
2.有原型演示,可以帮助前端设计师、后端程序员更好地理解你的原型产品。
3.mockplus有组件库和图标库,界面设计较为方便。

缺点:

1.不支持鼠标悬停,手机预览不是很清楚,日历表组件是静态的。
2.表格功能还需要完善。

三者的比较

墨刀和Axure:

  总的来说墨刀和Axure就像美图秀秀和photoshop。前者都是简化了基础的操作,很像封装好了一个函数,你直接调用就可以了。大部分小伙伴外出拍了照片肯定是美图秀秀,选选效果,感觉不错之后立即分享。但是真的设计到很多的图层组合,可控地调整页面元素,还是会用到photoshop,这其实就涉及到不同的需求,你用这个软件是想达到什么目的,是更想研究逻辑结构还是更像展现原型效果,从目标来选择你的工具。

Mockplus除用于移动APP原型设计,还可以制作PC、网页的原型设计,它可以帮助UI设计师在最短的时间内完成产品原型图的设计。

最后用网上经常出现的十分贴切的比喻:

Mockplus和Axure这种原型工具相比:
如果说Axure这种原型工具是一头沉重的大象,Mockplus则是一只轻快的小鹿。至简即至繁。

Mockplus和墨刀这样移动APP原型设计相比:
如果说墨刀是移动APP原型设计工具上的一只麻雀,Mockplus则是一只成熟的老鹰。原型设计和功能比较齐全,而且应用场景广。

二、利用网络资源自学Mockplus或墨刀等原型设计工具,并利用原型工具自拟主题进行原型设计。
在本次原型设计实验中我将使用摩客进行原型设计。下面分为三点对设计过程进行说明。
1.主题
Keep健身运动APP
Keep是一个致力于提供健身教学、跑步、骑行、交友及健身饮食指导、装备购买等一站式运动解决方案。

2.功能
《Keep》是一款综合性的健身应用,主要功能包括提供各种健身教学、跑步、骑行训练,以及健身饮食指导和装备购买等
《Keep》还提供了线下运动空间和智能硬件产品,并拥有一个活跃的社区,用户可以在这里分享运动成果和经验。此外,《Keep》还支持智能运动手环等可穿戴设备,这些设备能够监测用户的心率、睡眠质量等健康数据,并与《Keep》应用同步,用户还可以参加各种线上线下的运动活动和俱乐部,享受运动的乐趣。

3.界面设计
(1)登陆界面

  • 首先打开软件将其登陆界面显示给用户
    这个界面我将其添加了交互命令,载入时触发实现 页面跳转命令,慢慢淡入到商城界面。

    (2)商城界面
  • 由搜索框,图片,各种图标,文字组件组成。
  • 搜索框我设置了热区命令,点击可以跳转到搜索键盘界面。
  • 点击“健康食品”按钮,可以跳转到健康食品界面。
  • 图片运用面板实现了滚动效果。

    (3)搜索键盘界面
  • 由各种组件和图片滚动面板组成。
  • 点击“取消”可返回到商城界面。
  • 图片运用了面板实现了滚动效果。

    (4)健康食品界面
  • 点击搜索键盘界面中的“取消”后,返回到商城界面。
  • 点击“健康食品”图标,进入到健康食品界面。
  • 由图标,文字,图片组件构成。
  • 点击“<”可返回到商城界面。
  • 点击“即时鸡胸肉”这个商品,可跳转到购买界面。

    (5)购买界面
  • 由图片滚动页面和各种按钮构成。
  • 点击“<”可返回到健康食品界面。
  • 点击“立即购买”图片按钮,可出现一个辅助面板弹窗,点击“X”可退出弹窗。
  • 再次点击弹窗上的“立即购买”按钮,可跳转到确认订单界面。

    (6)确定订单界面
  • 点击“立即购买”按钮后,跳转到确认订单界面。
  • 由图片,文字组件和“返回”按钮组成。
  • 点击“返回”可跳转回购买界面。

    4.界面切换流程图

    5.实验中遇到的问题及解决方法
    对于长图片滚动效果,弹窗设置,不太熟悉,与同学进行交流沟通后,并在网络上进行课程分析解决了这些问题。
    三、原型设计
    视频演示链接:https://www.bilibili.com/video/BV1pm41127cy/?share_source=copy_web&vd_source=c4339ef73f146be31f2f00322b6e1662
    原型链接:https://rp.mockplus.cn/rps/kvMVhfGM6U? 请查看《新项目》

标签:界面,APP,点击,原型,设计,健身运动,-----,Axure
From: https://www.cnblogs.com/xie-ranya/p/18149355

相关文章

  • 博客园商业化之路-商业模式:帮助开发者用代码改变口袋
    二十年来,由于一直没有找到商业模式,园子不是长大的,是亏大的,漫漫二十年只有3年左右是挣钱的,其他时间都是亏;这二十年,园子不是发展起来的,是挣扎起来的,经历了好几次起死回生。在熬过三年危机后,现在到了不找到商业模式就活不下的穷困潦倒地步,之前在商业化上碌碌无为现在到了无路可退。......
  • 前端资源共享方案对比-笔记:iframe/JS-SDK/微前端
    vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage但是本文还是详细说一遍:为什么需要异步加载语言包主要还是缩小提代码包,没有按需加载前,语言包内容太多好几屏幕全部是,虽然从webpack-analysis看图里面占比可以忽略不计......
  • ABC 287 D - Match or Not
    题目链接:第一次提交:依据题意直接模拟,喜提\(\sfTLE\)。#include<bits/stdc++.h>usingnamespacestd;boolcheck(stringa,stringb){ for(inti=0;i<a.size();i++){ if(a[i]=='?'&&b[i]!='?')a[i]=b[i]; elseif(......
  • Kernel panic - not syncing: Out of memory: system-wide panic_on_oom is enabled
    内存不足,导致Java 进程被杀掉。 [1534.300650]Kernelpanic-notsyncing:Outofmemory:system-widepanic_on_oomisenabled[1534.301803]CPU:5PID:2930Comm:javaKdump:loadedTainted:GO5.10.0-60.18.0.50.r1083_58.hce2.x86_64#1[153......
  • [学习笔记] 丢番图方程 & 同余 & 逆元 - 数论
    首先,他们几个都是兄弟,有着极大的相似性。另外,他们的各自的思想都能够很好的服务于另外几个,有助于加深理解。线性丢番图方程丢番图不是个图啊!他是个man……——百度百科现在主要说的是二元线性丢番图方程:通用形式为\(ax+by=c\)。其中常数全都为整数。很像不定方程对吧?现在在......
  • 01-大语言模型发展
    AI大模型的相关的一些基础知识,一些背景和基础知识。多模型强应用AI2.0时代应用开发者的机会。0大纲AI产业的拆解和常见名词应用级开发者,在目前这样一个大背景下的一个职业上面的一些机会实战部分的,做这个agent,即所谓智能体的这么一个虚拟项目,项目需求分析、技术选型等1......
  • vue v-for中key的作用,使用index作为key会怎么样?
    原理其主要的目的就是优化性能。vue在更新dom时会比较key值相同的元素内容是否发生改变,如果不变则不更新页面,这样可以使得尽可能减少页面的更新,提高性能。假如我渲染3个元素,不设置key值,即默认策略应该是标识为index,即0,1,2。假如我在第一个元素后加一个元素,则实际上原先的bc......
  • JVM-part1-类加载子系统组成,及流程
    类加载子系统的作用:将所需要的Class文件进行加载,加载流程存在一下几个阶段:第一个阶段为加载阶段(Loading阶段):这个阶段是将引导类加载器和非引导类加载器需要加载的Class文件进行加载。具体来说:引导类加载器(BootStrapClassLoader):这个加载器的作用是将java_home/jre/lib下的Cl......
  • C语言程序设计-实验报告6
    实验项目名称:实验6循环结构程序设计(for语句的应用)实验项目类型:验证性实验日期:2024年4月15日一、实验目的1.熟练掌握三种循环语句并能正确运用;2.能够用循环实现一些常用算法,如穷举法,迭代法,递推法等;3.进一步学习程序调试;4.了解中国算法,百钱买百鸡。二、实验硬、软件环境......
  • uni app uview新增商品页(无限级分类选择和多图上传)
    uniappuview新增商品页(无限级分类选择和多图上传)给自己的牛腩商品库UNIAPP加的一个新增功能,就是通用的新增页面,用的uview2(https://uviewui.com/components/intro.html),能选择无限级分类和多图上传,自已觉得这个新增页面在以后做uniapp项目的时候很多地方会用到吧,先记下来了,以......