个人主页原型图（Axure制作一个APP原型有哪些流程步骤）

本文目录

• Axure制作一个APP原型有哪些流程步骤
• 使用Axure怎么制作一个多角色登录原型图
• 如何用Axure做出高保真的个人网站
• 微信界面对应的原型
• 怎么使用Axure制作个人简历原型

Axure制作一个APP原型有哪些流程步骤

对于新手小白而言，了解Axure产品原型的制作流程步骤是很重要的！不知道流程步骤，就很难进行原型绘制！因此，下面为大家详细的分享：Axure制作一个APP原型的流程步骤！如果你打算自学Axure原型设计的话，推荐的Axure自学视频课，专业讲师传授知识点，可以0基础学会软件功能操作以及动手实操~

Axure制作一个APP原型的流程步骤：

这里笔者使用自己正在制作的APP原型进行讲解。

版本：AxureRP9企业版

1.新建页面

底部导航分为5个部分，所以也对应着五个页面。在制作时先不考虑登录等其他页面，只做主界面。

1.在页面部分（注意不是概要部分）添加文件夹命名为主界面，放置主界面的页面。

2.在文件夹下面添加页面，底部导航点击每个图标跳转后对应的页面。由于该原型底部导航分为5个部分，所以在主界面下是五个子页面。每个子页面可以继续添加子页面，类似下图中我——个人主页，代表页面内跳转的页面。这里不再赘述。

2.页面布局

一个简易的页面基本都会包括状态栏、导航栏与标签栏（即底部导航）。

一般来说移动端的页面制作时尺寸设置为375*667

状态栏高20（状态栏可以下载AXURE元件库进行导入，也可以自己制作。）

导航栏高44

底部导航高49

除了这些以外的位置，便是可以放置主要内容的地方。

建议初学者可以直接使用矩形工具包括中间部分，再设置为动态面板。（下图中蓝色框线部分即是放置主要内容的地方，右键设置为动态面板后即可双击此动态面板进入）

注意，在右边样式部分，需要对动态面板进行选择“按需滚动”，这样才可以在预览时看到所有的部分。

02底部导航+页面跳转

了解完大致的框架搭建与页面的布局，那么就开始制作底部导航吧。网上许多教程都是状态的转换，虽然预览效果一样，但是对于制作一个APP而言还是不对的。

1.首先先添加一个母版，命名为底部导航。

2.接着选择好图片和文字，熟练运用组合，居中等将导航排布整齐。

一个图标与其对应文字为一个组合，方便后面的交互情形添加。

3.五个页面，对应该底部导航的五个状态。所以既要挑好选中前的图标，也要挑好选中后的图标。在这里我只对图标进行了改变表示选中。一般情况下文字颜色也会相应改变。

4.在状态1对其他图标组合进行交互设置。选中店铺组合，在右侧进行设置。

5.以此类推，将后面四个图标组合与页面进行相应的设置。然后复制多四个状态，再改变一下选中时的图标样式。注意每个状态中都要保证其他四个图标组合具备交互情形，才能让页面跳转成功。

6.右键母版——添加到页面，将该底部导航的母版设置到每个页面中，注意位置的摆放。

7.在工作区打开每个页面，并对页面进行交互设置。例如打开店铺页，设置如下。

8.给页面设置不同的内容，进行预览，就可以看到切换的效果啦。

以上就是关于“Axure制作一个APP原型有哪些流程步骤？”的内容分享了，希望能够帮到你！更多Axure精彩分享，尽在Axure相关文章！Axure因其能够快速、高效的创建原型，备受众多产品设计人员所使用！对于想要快速学会Axure原型设计的小伙伴，就可以选择精选的Axure自学视频课！不要犹豫，选择合适的课程开始学习体验吧~

使用Axure怎么制作一个多角色登录原型图

多角色登录是许多系统都需要具备的功能。例如，在招聘网站中，登录角色包括求职者、hr招聘者、猎头、内部员工等。那么，我们使用Axure进行设计制作一个多角色登录的原型图，应该怎么操作呢？如果你也感到好奇，就可以跟着下面的步骤操作~自学Axure，就上！精选Axure自学视频课为不同阶段朋友提供精准专业对点学习！无论0基础还是有一定基础，都可以获取专业的课程学习~

使用Axure制作一个多角色登录原型图教程：

这里我们直接用动态面板，该案例动态面板内共有4个状态，分别是状态1（用户选择页面）、状态2（个人用户登录页面），状态3（企业用户登录页面），状态4（内部员工登录页面）状态1（用户选择页面）

如下图所示，用户选择页面是比较简单的，包括提示文字（请选择您的身份登录）、3个选择项（矩形+图标）。

该页面的交互也很简单，鼠标单击个人用户时，我们用设置面板状态的交互，将动态面板设置到个人用户登录页面即可。

同理，鼠标单击企业用户时，用用设置面板状态的交互，将动态面板设置到企业用户登录页面，鼠标单击内部员工时，用用设置面板状态的交互，将动态面板设置到内部员工登录页面。状态2（个人用户登录页面）

个人用户登录页面，主要包括返回图标、文字标签（个人用户登录），输入框（手机号码和密码），登录按钮，错误提示弹窗，背景图片和中继器摆放。

返回图标的交互：设置面板状态，将动态面板设置回状态1（用户选择页面）即可。

登录按钮：鼠标单击登录按钮时，我们要首先判断手机号码是否为空，如果为空，就要设置提示弹窗的位置为请输入手机号。

然后再显示错误弹窗，如果密码输入框为空的话，就是设置提示弹窗的文字为请输入密码。

最后还需要通过判断手机号和密码是否正确，这里需要用到中继器，中继器的作用是用来判断手机号和密码是否一一对应。中继器内包含两列account和password，我们在里面可以填写默认的个人用户手机号以及对应的密码。这里中继器只是用于记录，所以可以默认隐藏，或者将内部自带的矩形删除。

回到鼠标单击登录按钮的交互，如果上面手机号码和密码框都不为空，那么我们就要先对中继器进行筛选，筛选条件为中继器accout列的值等于手机号输入框里的内容，并且password列的值等于密码输入框内的值。

进行筛选之后需要根据中继器可视条数，就是筛选完成之后，中继器还有没有显示的内容。我们可以用visibleItemCount函数进行统计。一般而言，结果只会出现1或者0，如果等于0的话，证明我们输入的手机号密码组错误，这是我们设置错误提示的文字为手机号或密码错误，并且显示错误提示的弹窗；

如果结果为等于1的话，就是我们输入的手机号和密码没错，能对应上，那么我们就能完成登录了，一般而言是会跳转到首页或者之前的页面，我们用打开链接的交互来做就可以了。

如果结果大于1的话，证明有2组或以上的手机号和密码一样的，这样可能是我们填写初始数据时不小心填错。

最后还有错误提示弹窗的交互：默认隐藏，如果触发上面3种错误就会显示，这属于软提示，提示3秒后隐藏即可。

状态3（企业用户登录页面）

其实企业用户的界面和个人用户的登录界面类似都是包括返回图标、文字标签（企业用户登录），两个输入框，登录按钮，错误提示弹窗，背景图片、中继器，不同的就是，企业用户一般是用企业邮箱来登录，个人用户是用手机号登录。我们可以复制上面个人的页面，然后在修改文字、图片和排版。

返回图标的交互：和上面一样都是设置面板状态，将动态面板设置回状态1（用户选择页面）。

登录按钮、弹窗的交互逻辑思路都是和上面一样的，只是设置提示的具体文字变了，如果是复制过来的话，大家只需简单修改一下文字内容、图标、背景、中继器内的密码组、交互里设置的提示文字就可以了。状态4（内部登录页面）

内部员工登录的页面和上面两个登录页面的材料是一样的，只不过是改改文字和背景，已经登录输入的不是手机号或企业邮箱，变成了员工号。

交互也是一样的，我们简单修改提示弹窗在3种错误状态下的文字即可。

这样，我们就完成了多角色登录的原型模板了，后续如果要增加角色页面也很简单，只需要复制一个登录页面，简单需改一下文字、图标、背景就可以。

好啦，以上的内容就是“使用Axure怎么制作一个多角色登录原型图？”的相关分享了，希望对你的Axure学习操作有一定的作用哦！学习Axure，一篇就学会是不大可能的，而几篇几十篇几百篇Axure文章就不一样了。学习更多Axure，Axure相关文章、问答、视频教程综合助力~入门Axure很简单，但是精通Axure交互设计可能就花费时间！所以，想要很好的学会Axure，建议还是专业课程学习哦~

如何用Axure做出高保真的个人网站

如何用Axure做出高保真的个人网站

越来越多的人想创建自己的个人网站，分享自己平时的工作总结和收藏，整理成自己的个人网站，既能帮助同行相互学习，又能体现自己的能力。我用axure做了一个个人网站，以这个网站为例，如何用Axure做出高保真的个人网站，一起来跟看看！

如果后期维护量比较频繁，建议正常开发网站，以后的维护需要一个后台。Axure的网站只适合维护量小、简单的网站。

一.正常网站开发流程与axure网站的比较。

1.正常流程。

2.axure制作流程。

二.什么样的个人网站不适合axure。

1.需要后台维护。

所谓后台维护，是指需要开发一个官网后台，每天通过后台上传新文章、新内容等信息。Axure只能做显示效果，所以不适合axure在这种场景下做网站。

2.有很多页面和内容。

首先，axure的网站导出的html文件比较大，比正常前端开发的网站大很多。如果整个网站的页面比较多，或者单个页面的内容/图片比较多。网站加载慢，所以axure不适合在这种场景下做网站。

3.有复杂的动态效应和相互作用。

目前，大多数复杂的动作和交互都是用h5和css3完成的。以前我们也可能在网站上看到flash或者AE做的动作。目前大部分都是用flash和AE把前端转换成代码实现的。使得网站浏览更加流畅。如果在axure中加入复杂的动态效果和交互，肯定会影响网站的加载速度，从而大大降低网站的浏览效率。

三.说明axure网站制作的难点。

1.整体尺寸控制。

这个网站的效果是内容区宽度固定，背景宽度自适应。

(1)内容区域的宽度。

考虑到主流的显示分辨率，我把内容区的宽度设为1200px。所有内容和图片都要放在1200px以内。可以在页面上拉一条参考线到横坐标1200的位置。设计的时候可以从最左边开始，不给左边留空间。接下来，我们将讨论页面居中的方法。

(2)整页居中。

前一篇文章之所以说不能留空格，是因为我们要把页面设置成居中对齐。选择项目-页面样式，并在页面布局中选择第二个。当选择此选项时，当轴绘制时，页面仍然在最左边，当浏览器预览时，整个页面将显示在中心。

(3)自适应背景宽度。

如果网站某个页面的背景颜色相同，直接点击当前页面的空白处，然后选择样式——背景颜色，选择自己需要的颜色。

如果一个页面的不同模块有不同的背景颜色，那么我们需要用动态面板来实现。首先拉一个动态面板，把高度设置成你需要的高度，宽度可选。但是为了方便给这个模块添加内容，建议把宽度拉下来和网页内容的宽度一样，比如1200px。然后在样式里设计你需要的背景色，然后检查100%宽度。浏览器预览后，模块的背景颜色会根据每个分辨率进行调整。

2.导航。

我做的导航效果固定在浏览器顶部。之所以要固定在浏览器顶部，是因为页面多的时候，用户滚动到底部就可以直接看到并操作导航了。

制造过程:

(1)拉一个动态面板，导航高度为动态面板的高度，宽度拉至1200px。(宽度必须下拉内容区域的宽度，因为导航内容应该放在动态面板中)

(2)设置动态面板的背景色(即导航背景色)，勾选100%宽度。

(3)在属性中，选择固定到浏览器，选中固定到浏览器窗口，水平和垂直。始终保持底部在顶部。如果没有其他内容覆盖导航，请检查它。我的导航右侧有一个二维码需要覆盖导航，所以我的没有勾选。(如果没有勾选，在设计所有页面的时候注意把导航动态面板放在顶层。)

导航文本:导航文本需要放置在动态面板中，文本需要有三种状态:当前页面状态、鼠标悬停状态和正常状态。

3.横幅处理。

横幅的图是整个网站最大的图。不建议将横幅的图片直接放入axure文件，这样不能自适应，影响加载速度。

纯色背景横幅制作工艺:

与上述教学类似，使用动态面板实现横幅背景颜色的自适应。

尽量用轴打文字，少用图片。

横幅的图片需要经过photoshop处理，最后以png格式保存，背景透明。然后把图片拉进axure文件。

非实体背景横幅制作流程:

需要把横幅背景装饰成很宽的图片，有条件的话设置成5000px。在动态面板样式中选择背景图片-导入该图片。检查属性中的100%宽度。

尽量用轴打文字，少用图片。(如有必要，可将文本处理成背景图像并导入)

4.按钮的效果。

所有可点击的图形按钮和文本按钮都需要有三种状态:正常状态、鼠标悬停状态和鼠标按下状态。

在属性交互样式设置中设置鼠标悬停和鼠标按下的效果。

5.二维码的效果。

我的二维码的效果是，鼠标悬停在导航右侧的二维码图标上，从上到下推出二维码，鼠标离开，从下到上撤回二维码。

制造过程:

(1)在动态面板中拉一张二维码图片，放在图标下面的位置。

(2)选择固定在浏览器上，选择水平居中(根据网站大小调整边距)，选择垂直固定。检查以始终保持顶部。

(3)在导航动态面板的二维码图标中添加两个事件，如图:

6.跳转到本网站以外的链接。

网站上有一些文章，推荐等模块。点击后，我们跳转到不在本网站的链接。我们需要将点击事件添加到可点击区域，链接到外部链接，并在新的浏览器窗口中打开它们。具体操作如图:

四、注意事项。

1.尽可能少地插入图片和文本。

比如横幅上的文字，里面的各种文字推荐，尽量不要以图片的形式放进去。尽量用axure排版。

2.注意细节。

既然是高保真，就不能像低保真那么粗糙，整个网站的字体、大小、间距、颜色等细节。注意ui设计之类的细节。

3.统一交互效果。

可点击的区域，比如文章，鼠标悬停的时候应该有变化，比如外部灯光，笔画等效果。遵循设计原型，每一次操作都给用户及时的反馈。

4.图像压缩。

尽量压缩使用的每一张图片，在不降低画质的前提下。

5.买个域名。

你可以选择从腾讯云和阿里巴巴云买哪个便宜。尽量选择常见的域名后缀，比如cn、com等。前面的字母可以用拼音选择，也可以用自己的名字拼写。

五.发布上线。

以上就是如何用Axure做出高保真的个人网站的内容了，如果想学习更多Axure教程可以来，课程体系完善：从软件入门到分类教程，从理论知识到职场实战，打造了一体化的学习、内容服务体系。

微信界面对应的原型

第一步：首先制作原型页面尺寸和顶层系统信息。 这里有几点需要注意： 第一，原型尺寸采用320*570的宽度，这也是用了这么久的好比例。它是用axure的矩形控件绘制的。 第二，线框的线条颜色必须调整，需要灰显。具体效果如上图所示。 第三，顶层的系统信息可以做成一个通用控件，很多地方都会用到，也可以做成一个master。 第二步：完善底部菜单。 请注意： 可以查一下上一篇文章提到的图标，去阿里的素材网找一下。找图标的时候，尽量找看起来比较常用的图标。 图标尺寸为30*30像素，图标下的文字为11号尺寸，颜色与边框颜色相同。 最后，我的图标和文本的颜色需要显示，以突出我在当前页面。 红点的徽标大小为10*10像素，可以用矩形控件进行圆形变形。 第三步：填写个人信息菜单项。 这里有几点需要注意： 整个原型背景色的填充是灰色的。 图片需要稍微修圆，圆角可以通过点击图片左上方的黄色倒三角左右拖动来调整。 个人信息栏的背景颜色可以直接显示在矩形中。其他个人信息放在这个矩形上。因为背景颜色是灰色的，所以可以突出显示个人信息栏。 第四步：继续填充菜单。 注意： 注意图标大小和左对齐一致，图标对应的文字需要大小、颜色和左对齐一致。 线条分割要求等比例分割，线条首端不接触边框，末端接触边框。 至此，我的微信的页面原型基本可以了。虽然保真度不是特别高，但至少能表现出需求的欲望。除此之外，一些交互的东西，比如图标文字的大小、着色、线条等细节，在这个原型制作中都考虑到了。越来越熟，越来越快，需要不断的练习，作者自己也花了10分钟左右的时间做了这个原型。

怎么使用Axure制作个人简历原型

个人简历，想必对于各位进入职场工作的小伙伴都制作过。不过一般制作的个人简历都是文档样式的，而今天，我们将为大家分享到的是使用Axure制作的个人简历，感兴趣的小伙伴就可以跟着学习操作哦！入门Axure做产品经理，就上来学习！精选多套优质Axure自学视频课，综合全面的教会大家Axure软件基础操作以及原型交互，让你可以理论+实践全面发展~

使用Axure制作个人简历原型步骤：

一、准备元件

首先制作我们的界面，还有排版我们需要在每一块需要填写的内容，以及在每一个模块的背景上做一个命名用于后面做点击侧边栏页面跟随。

这一步需要完成几个点：

界面设计排版（标题、关于本人、自我介绍、优势特长、工作经验、所做项目、教育/培训经历）

模块背景命名（用户后面做侧边栏点击滚动的设置）

第二步我们把一些需要把第一个板块隐藏起来的内容给画好，这里可以放你自己的微信二维码、手机号码之类的联系方式。

这一步需要完成几个点：

添加联系方式（二维码、微信、QQ、微博）

把元件画好之后就进行下一步~

我们把侧边栏给做一下，这里我们需要画一个小矩形，然后我们把相对应的图标放进去，还有在右侧放一个标识如下图。

这一步需要完成几个点：

画矩形；

添加图标；

文字标识。

上面就说了左侧栏的步骤，右侧栏只要按照同样的逻辑走即可，就不一一简述了。

第一步，把界面第一个模块右上角二维码做一个点击显示的效果，我直接放设置交互用例：

效果也看一下：

第二步设置左侧栏交互用例如下图，鼠标单击时则跳转至某个模块、鼠标移入移出的用例。在这里简单说明一下：因为是自己一年前多的简历，有些效果没有简化可能会比较复杂一点。如果小伙伴有更好更简单的方式实现这个效果，那是最好的。右侧的制作步骤一样，位置换一换就可以了，这里不重新讲解。

这一步需要完成几个点：

设置鼠标单击时的交互用例；

鼠标移入移出时的交互用例。

再来看一下效果：

基本上的制作已经做完啦，下面可以看看其他进阶操作。

我们在页面的空白处设置窗口滚动时，当浏览窗口Y轴滑动的值大于500时，显示左侧栏；当浏览窗口Y轴滑动的值大于1000时，显示右侧栏；否则将隐藏左/右侧栏。

根据以上的设置，就可以展示出文章上下滚动时，侧边栏显示/隐藏的效果了。

好咯，关于“怎么使用Axure制作个人简历原型？”的内容今天就分享到这里了，希望你能从中学到东西哦！Axure学习，的Axure相关文章、Axure自学视频课都是不错的选择！文字理解能力强的话，个人推荐Axure文章学习；但是想要专业学习Axure的话，还是推荐大家选择Axure自学视频课系统学！不仅可以更加清晰有条理，大家也都能够利用自己的碎片化时间学习！