如何利用Axure制作移动端产品原型

news2024/11/23 21:55:13

Axure是一款专业的快速原型设计工具,作为专业的原型设计工具,Axure 能够快速、高效地创建原型,同时支持多人协作设计和版本控制管理。它已经得到了许多大公司的采用,如IBM、微软、思科、eBay等,这些公司都利用Axure 进行产品设计和开发。

Axure的工作环境包括主菜单和工具栏、站点地图面板、控件面板、模块面板和线框图工作区,这个可视化工作环境使得用户可以轻松快捷地以鼠标的方式创建带有注释的线框图,而无需进行编程,在线框图的基础上,可以自动生成HTML原型和Word格式的规格

1总体说明

数通畅联的MDM基础数据平台可以使企业的多个业务系统中最核心、最需要共享的主数据进行整合,集中进行数据标准化,并用集成服务的方式把统一、完整、准确、具有权威性的主数据分发给需要的应用系统。MDM能创建并维护整个企业内主数据的单一视图,保证单一视图的准确性、一致性以及完整性,从而简化数据清洗工作,提高数据质量,加快业务系统对接、业务流程再造速度,提高业务响应速度,能有效优化企业IT环境、降低成本、提高企业效率

而想要进行后续移动端功能的开发,首先要通过移动原型设计将我们设计研发人员的设计想法更直观地呈现出来,帮助他们更好地理解设计思路和交互流程,同时通过原型也以提出更具体的意见和建议,有助于提高设计的可行性和易用性。

1.1工作需求

通过移动原型设计可以将我们设计研发人员的设计想法更直观地呈现出来,帮助他们更好地理解设计思路和交互流程,同时通过原型也可以提出更具体的意见和建议,有助于提高设计的可行性和易用性。

1.2工作要求

工作要求主要包括以下几个方面:

1.用户体验至上:在制作移动原型时,需要将用户体验放在首位,注重用户的操作习惯和心理需求,提供流畅、直观的用户界面。同时,还需要遵循常见的手势操作规范,确保用户可以通过滑动、捏合等手势进行操作。

2.从简单的页面开始:制作移动原型时,可以先从简单的页面开始,逐步完善产品功能和交互效果,再进行迭代升级。

3.注重细节:在制作移动原型时,需要注重细节处理,尽可能地模拟真实的场景和用户行为,以提升产品的质量和用户体验。

4.遵循设计规范:在制作移动原型时,需要遵循相应平台的设计规范和标准,以确保产品的一致性和易用性。

5.良好的团队协作:制作移动原型需要团队成员之间的密切协作和沟通,包括产品经理、开发人员等。团队成员需要相互配合,共同完成产品的设计和开发工作。

1.3工作挑战

在之前的工作经历中,并没有接触过Axure这个软件,对于Axure整体来讲比较陌生,并且对于MDM产品移动端的功能效果也是较为陌生,所以此项工作对于我来说算是一个挑战,但通过学习和实践是可以战胜工作中的挑战,并且可以将此过程熟记,掌握为自己的新技能。

2工作步骤

通过学习、实践可以战胜工作中的挑战,首先可以通过文档和视频去学习Axure的使用方法,其次要把设计文档中要实现的功能页面整理出来,再选择其他系统移动端的样式描摹整体页面规划。

2.1视频学习

首先在接到工作任务前,自己并没有了解过Axure这个软件,也不知道其使用方法,由于是在国庆假期前接到的工作任务,为了避免在节后回到公司因学习时间较长,耽误工作进度,在假期时通过在B站查找Axure的相关教学课程来学习Axure的使用方法,有的视频讲解地十分的详细,通过观看4-5节的视频已经了解了其基本操作。

2.2梳理功能

第二步是根据研发人员给出的设计文档来梳理每个页面,由于研发人员给出的设计文档内容非常详细,篇幅较长,把功能之间的链接,页面和页面之间的跳转单独梳理出来,就会方便进行原型的描绘。在功能梳理成功后,一定要和研发人员进行对接,确保自己的梳理成果和研发人员的设计思路一致,只有这样,才不会因为开始时方向的错误而耽误工作进度。

2.3系统参照

研发人员给出的设计文档中,很多页面是web端的设计样式,不能够直接照搬其结构,所以要考虑放到移动端原型里要改变为什么结构,尤其是表的结构以及按钮的结构,这些内容在移动端和web端所呈现出来的效果是不同的,后来经过查询,主要参照的是企业微信的结构。

3操作过程

学习之后就来到了实操步骤,首先进行页面的创建,再添加自己所需的元素,再根据功能跳转设置交互,整体完成之后进行预览,如在预览中出现交互不准确,页面不美观等问题及时进行调试优化,最后将成品导出分享。

3.1创建页面

在页面面板中,可以创建不同的页面,每个页面代表移动应用的一个界面,例如可能需要创建一个首页、一个详情页、一个列表页等。选择新建项目,并选择适合的尺寸,首先在Axure中选择矩形边框作为移动端的边框,在网上做了功课之后,选择高度为667,宽度为375是比较合适的尺寸。

3.2添加元素

在页面上添加各种元素,如按钮、文本框、图像、列表等。可以通过“工具箱”面板或者“库”面板来选择和添加元素,在Axure中预置的元素也比较丰富,在基本原件中有各种几何图形、文字样式和按钮、线条等,在表单原件里有下拉列表框、复选框等,在菜单和表格中可以添加菜单和表格,在标记原件中可以选择便签、标记等,除此之外还有很多个性化图标可供使用。

3.3设置交互

在Axure中,可以为元素设置各种交互,如点击、滑动、长按等,通过“交互”面板,可以为元素添加事件和动作。例如,当用户点击一个按钮时,可以显示一个弹窗或者跳转到另一个页面,而在本次工作中,我常用的交互是点击跳转以及单击隐藏显现。

3.4预览调试

在桌面浏览器中预览原型效果,检查交互和布局是否正确,如果在预览时存在一些布局不合理,交互不准确等问题,回到Axure进行调整,调整完毕后再次回到浏览器进行预览,点击刷新就可以查看修改后的效果,并且此时一定要将修改后的原型保存,否则直接关闭系统修改内容将无效了,根据预览和调试的结果,对原型进行优化和完善。这可能包括调整布局、修改颜色、优化交互等。

3.5导出分享

当完成原型设计后,可以将其导出为HTML文件也可以让团队成员进行查看和测试。在每次修改效果后,我都会找研发人员进行再次确认,对研发人员进行演示,让其查看是否和设计一致,最后将文件导出,将整体的效果以及功能交互通过文字和图片的方式整合成文档,发给领导进行查看、确认。

4问题总结

在进行整体工作的过程中,也发现了自己工作中存在的一些问题,由于是第一次接触Axure,存在例如思路不清,不知变动,没有站在用户的角度进行换位思考的问题,从而耽误了工作效率。

4.1思路不清

首先在正式开始测试之前,不仅没有具体的思路,完全处于懵懂状态,于是首先在平台下载了一个手机端移动原型的模板,但由于设计样式和我们产品存在的关系不大,并且图层过多,需要重新梳理所有页面,修改起来比较占用时间,所以还是决定自己从头开始,一点一点去建立各个页面,在自己的尝试下,发现只要掌握了基本操作方法,自己从头开始是思路比较清晰。

4.2不知变动

在本次使用Axure开始进行正式工作之前,并没有实际去思考web端和移动端应该存在的区别,在受到了领导提醒之后,通过自己上网查找以及寻求项目经理的帮助来解决了这一问题,项目经理指导我可以参照企业微信或者钉钉的整体样式去规划页面,这也让我茅塞顿开。

4.3换位思考

我们的产品就是为客户来进行服务,不论是原型设计还是其他的工作,都应该要站在用户的角度去思考问题,站在用户角度思考问题可以帮助我们更好地了解用户需求和体验,从而改进设计。通过模拟用户场景、简化操作流程也可以提升后续产品的可用性和用户体验,从而吸引更多的用户并提高产品的竞争力。

5后续思路

在进行利用Axure进行移动端产品原型工作的过程中,自己的工作方法得到了一些改善,并且有了一些心得体会,具体分为要多多了解产品,注重工作配合和对接,并且要及时进行记录反馈,以便更快、更好地完成工作。

5.1了解产品

在进行工作时,自己领悟到了如果想更好地完成此次工作,对于产品的了解必不可少,无论是在平时工作中接触到公司产品的积累还是在录制公司视频、撰写公司文档时都可以加深对产品的了解,对产品的了解越多,对于自己所做的工作就会越有底气,这样会减少反复修改的时间,能极大地提高工作效率。

5.2工作交互

工作可以促进团队协作、提高工作效率、增强团队凝聚力、促进个人成长,在工作过程中,我们应该注重工作交互的重要性,积极开展工作交互活动,以促进工作的顺利进行。例如在本次工作中,和研发部门的配合必不可少,一定要和研发部门进行工作内容需求确认,否则所出工作成果和预期不一致是非常失败的表现,在每次的工作调整前,都要先自己整理出相关文字和研发人员进行确认,遇到不懂得问题,寻求研发人员的帮助也能极大地提高工作效率。

5.3记录反馈

在工作中,记录反馈的重要性不容忽视,反馈是促进个人成长和组织发展的关键因素之一。通过记录反馈,进而采取行动加以改进,同时反馈也可以更好地理解组织的目标和期望,从而更好地完成工作任务。此外,记录反馈还可以促进团队成员之间的沟通和协作,增强团队凝聚力和工作效率。在本次的工作中记录反馈也尤为重要,首先要把领导的意见记录下来,再去和研发部门进行确认实施步骤,之后在每一次的改进过程中都要将改进的记录下来,帮助自己记录总结,也方便领导进行查看,可以提高整体的工作效率。

5.4持续学习

在本次工作中也让我认知到了持续学习的重要性,一开始自己并不会使用Axure,但经过学习也顺利的完成了工作。首先,持续学习可以帮助自己不断提高自己的专业知识和技能,以适应不断变化的工作环境和任务需求。随着科技的快速发展和市场竞争的加剧,我们都需要不断学习新的知识和技能,才能跟上时代的步伐,提高工作效率和质量。其次,持续学习可以提高自身的竞争力,使其在职业生涯中保持优势。第三,持续学习可以增强自身的自我价值和成就感。通过不断学习和成长,可以更好地实现自我价值,同时也会获得更多的成就感和满足感,这有助于提高自身的工作积极性和工作满意度。

总之,持续学习是工作中不可或缺的一部分,通过不断学习和成长,我们可以更好地适应不断变化的工作环境,提高工作效率和质量,实现自我价值,获得更多的成就感和满足感。同时,组织也可以通过支持员工的学习和发展,提高整体绩效和竞争力。因此,在工作中,我们应该注重持续学习的重要性。

通过本篇文章将如何利用Axure制作移动端产品原型进行了简单介绍,使用Axure无需编程或代码基础,具有丰富的交互效果,并且界面简洁易用,是一款非常实用的原型设计工具,它可以帮助设计者快速地设计出交互效果良好的产品原型。总之,Axure是一款非常实用的原型设计工具,它可以帮助设计者快速地设计出交互效果良好的产品原型,并且可以自动生成演示文件和规格文件,方便客户确认和开发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1288270.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TA-Lib学习研究笔记(九)——Pattern Recognition (2)

TA-Lib学习研究笔记(九)——Pattern Recognition (2) 形态识别的函数的应用,通过使用A股实际的数据,验证形态识别函数,用K线显示出现标志的形态走势,由于入口参数基本上是open, hig…

并发集合框架

目录 前言 正文 1.集合框架结构 2. ConcurrentHashMap (1)验证 HashMap 不是线程安全的 (2)验证 Hashtable 是线程安全的 (3)验证 Hashtable 不支持并发 remove 操作 (4&#xff09…

graphics.h安装后依旧报错

问题解决一: 我在网上找了很多,都说找到graphics.h这个文件,放到include这个目录下,我照做了,然后 当我进行编译时,自动跳到graphics.h这个文件并出现一堆报错 问题解决二: 看一下这两个文件是…

摄像头选型号指南

镜头选型工具 - HiTools - 海康威视 Hikvisionhttps://www.hikvision.com/cn/support/tools/hitools/cl8a9de13648c56d7f/ 1. 海康威视摄像头选型号指南 海康威视摄像头选型号指南-CSDN博客文章浏览阅读3.7k次。跟客服对话比跟AI对话好不了多少,能噎死人&#xff0…

题目:区间更新(蓝桥OJ 3291)

题目描述&#xff1a; 解题思路&#xff1a; 差分模板题。 题解&#xff1a; #include<bits/stdc.h> using namespace std;const int N 1e5 10; int a[N], diff[N] ;//数组的大小不可能开到大于1e9int res(int n, int m) {for(int i 1; i < n; i)cin >&g…

对比两阶段提交,三阶段协议有哪些改进?

本文我们来讨论两阶段提交和三阶段提交协议的过程以及应用。 在分布式系统中&#xff0c;各个节点之间在物理上相互独立&#xff0c;通过网络进行沟通和协调。在关系型数据库中&#xff0c;由于存在事务机制&#xff0c;可以保证每个独立节点上的数据操作满足 ACID。但是&…

AI模型部署 | onnxruntime部署YOLOv8分割模型详细教程

本文首发于公众号【DeepDriving】&#xff0c;欢迎关注。 0. 引言 我之前写的文章《基于YOLOv8分割模型实现垃圾识别》介绍了如何使用YOLOv8分割模型来实现垃圾识别&#xff0c;主要是介绍如何用自定义的数据集来训练YOLOv8分割模型。那么训练好的模型该如何部署呢&#xff1f…

小航助学题库白名单竞赛考级蓝桥杯等考scratch(10级)(含题库教师学生账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09; 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;

chineseocr项目不使用web推理-docker容器化

整个流程介绍 拉取 ufoym/deepo 镜像 -- 因为包含了主流深度学习框架&#xff0c;镜像4G出头。拉取 chineseocr 项目代码。修改代码&#xff0c;不使用web&#xff0c;增加命令行传入图片路径的功能打包成docker镜像。 开始 拉取 ufoym/deepo 镜像 &#xff1a;cpu版本为例 do…

封装ThreadLocal

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 为什么要封装ThreadLoc…

geemap学习笔记020:如何搜索Earth Engine Python脚本

前言 本节内容比较简单&#xff0c;但是对于自主学习比较重要&#xff0c;JavaScript提供了很多的示例代码&#xff0c;为了便于学习&#xff0c;geemap将其转为了Python代码。 Earth Engine Python脚本 import ee import geemapee.Initialize()geemap.ee_search() #搜索Ear…

Vue3网站用户引导功能【Intro.js】

一、介绍 Intro.js 是一个用于创建网站用户引导、功能介绍和教程的 JavaScript 库。它允许开发者通过步骤和提示突出显示网站上的特定元素&#xff0c;以帮助用户更好地了解和使用网站的功能。以下是 Intro.js 的一些关键特点和用法介绍&#xff1a; 更多Intro.js 功能网址&a…

图扑数字孪生压缩空气储能管控平台

压缩空气储能在解决可再生能源不稳定性和提供可靠能源供应方面具有重要的优势。压缩空气储能&#xff0c;是指在电网负荷低谷期将电能用于压缩空气&#xff0c;在电网负荷高峰期释放压缩空气推动汽轮机发电的储能方式。通过提高能量转换效率、增加储能密度、快速启动和调节能力…

电子编曲软件FL Studio2024汉化中文免费版下载

电子编曲需要什么软件&#xff1f;市面上的宿主软件都可以完成电子编曲的工作&#xff0c;主要适用电子音乐风格编曲的宿主软件有FL Studio、Ableton Live等。电子编曲需要什么基础&#xff1f;需要对于电子音乐足够熟悉、掌握基础乐理知识以及宿主软件的使用方法。 就我个人的…

Linux cgroup技术

cgroup 全称是 control group&#xff0c;顾名思义&#xff0c;它是用来做“控制”的。控制什么东西呢&#xff1f;当然是资源的使用了。 cgroup 定义了下面的一系列子系统&#xff0c;每个子系统用于控制某一类资源。 CPU 子系统&#xff0c;主要限制进程的 CPU 使用率。cpu…

王道数据结构课后代码题p175 06.已知一棵树的层次序列及每个结点的度,编写算法构造此树的孩子-兄弟链表。(c语言代码实现)

/* 此树为 A B C D E F G 孩子-兄弟链表为 A B E C F G D */ 本题代码如下 void createtree(tree* t, char a[], int degree[], int n) {// 为B数组分配内存tree* B (tree*)malloc(sizeof(tree) * n);int i 0;i…

CENTOS 7 添加黑名单禁止IP访问服务器

一、通过 firewall 添加单个黑名单 只需要把ip添加到 /etc/hosts.deny 文件即可&#xff0c;格式 sshd:$IP:deny vim /etc/hosts.deny# 禁止访问sshd:*.*.*.*:deny# 允许的访问sshd:.*.*.*:allowsshd:.*.*.*:allow 二、多次失败登录即封掉IP&#xff0c;防止暴力破解的脚本…

搞程序权益系统v1.1

继1.0出来后我就把antdui换成elem 新增号卡功能现在只支持对接号氪系统 大家问我这个程序到底有什么用&#xff0c;我这边已经在写和WordPress对接文件&#xff0c;到时候在WordPress网站打开该程序就可以把订单同步到你的程序里面去&#xff0c;当然自己有集成能力也可以到小…

FairGuard无缝兼容小米澎湃OS、ColorOS 14 、鸿蒙4!

随着移动互联网时代的发展&#xff0c;各大手机厂商为打造生态系统、构建自身的技术壁垒&#xff0c;纷纷投身自研操作系统。 而对于一款游戏安全产品&#xff0c;在不同操作系统下&#xff0c;是否能够无缝兼容并且提供稳定的、高强度的加密保护&#xff0c;成了行业的一大痛…

python笔记:dtaidistance

1 介绍 用于DTW的库纯Python实现和更快的C语言实现 2 DTW举例 2.1 绘制warping 路径 from dtaidistance import dtw from dtaidistance import dtw_visualisation as dtwvis import numpy as np import matplotlib.pyplot as plts1 np.array([0., 0, 1, 2, 1, 0, 1, 0, 0…