axure的基本用法

发布网友 发布时间：2022-04-20 04:56

我来回答

共3个回答

懂视网 时间：2022-05-13 22:48

当时看了本书，网站蓝图，然后瞎倒动起来。如下

---

一般注册过程包括以下步骤：

1.用户按照提示填写表单。

2.用户在填写表单的时候提示是正确否输入了内容，如果没有，提示用户。

3.用户提交表单，所有项是否都正确，如果出错，提示哪项有错误。

4.用户成功提交表单或者取消表单。

在填写表单过程中，常见验证方法有如下几种：

1.用户是否在注册的用户名或ID中使用了非法字符。

2.用户是否输入了内容。

3.两次输入的密码是否一致。

4.是否是合格的Email地址。

5.长度是否在6-12个字符之间。

下面我们用Axure7.0来完成通用注册的设计，以下包括最基本的输入框变化和提示文字变化。

一.表单的布局

拖拽7个文本标签，然后给它们命名为如图所示。

全部选中，点击右对齐使得他们都对其，再点击垂直分布，使他们的上下间距相同。

拖拽5个文本框，分别对应如下项目，然后全选，选择左对齐。

选中每行的文本和文本框选择上下居中，使每行的都对其。

为性别添加相应输入部件，用两个单选按钮，对齐。姓名为男和女。

选中它们，右键，选择指定单选按钮组，然后在弹出的框中输入组名性别，这样就实现了单选。

为所在地添加一个下拉列表部件。然后编辑列表项，为列表条添加选项。

再添加一个按钮部件，命名为:立即注册

二.制作输入框变化框边

当我们填写某个文本框输入框时，输入框会被高光显示，然后右侧提示用户输入什么。如果输入的不符合要求，右侧会提示。

选中5个文本输入框，右键，选择隐藏边框。（最后会说明为什么隐藏）

拖拽一个动态面板，命名为邮箱。再添加一个状态，分别命名为输入和未输入。

再输入状态下添加两个矩形，边框颜色和填充颜色如图。第二个矩形是提示文字。

矩形大小比文本框多出2个像素大小，为了切换状态时完全覆盖最初的文本框。

把最先放上去的那个文本输入框置于顶层。

切换到未输入状态，把输入状态下第一个矩形复制到这里，再把边框颜色改为默认的灰色。

修改面板顺序，把未输入状态放在前面。

面板顺序

点击预览，界面如下图所示。

三.让边框动起来

为我的邮箱输入框添加如下状态，使得鼠标移动到那里未输入状态，不在那里为未输入状态。

1

生成后看到如下界面：

四.添加其他输入框和提示

这部需要把邮箱那部分制作好的动态面板复制到其他输入项中。

复制到其他选项，注意调整坐标。

修改其他动态面板名字。

需改其他动态面板输入状态下的提示文字。

1

把动态面板都至于底层，输入框置于顶层。

分别添加状态，与邮箱添加状态时一样。

五.完成效果

在此我们将最开始的文本输入框隐藏，代替它的的动态面板的未输入状态，边框为黑色，在鼠标移动后就变为输入状态，显示为蓝色和提示文字。这样就完成了注册设计中的边框效果和提示文字。还有验证输入，验证密码，处理验证码等以后再做总结。

---

还有下篇来着，但是实在太费时间了。

原型毕竟只是实现想法的过程，大家也不要太追求强交互，高保真。

热心网友 时间：2022-05-13 19:56

http://v.youku.com/v_show/id_XMjQ1MDY2MjYw.html

http://v.youku.com/v_show/id_XMjUxMjYyNjE2.html

热心网友 时间：2022-05-13 21:14

网站策划是中间产品的策划，组合到一个网站整体，互联网行业产品经理的一项重要工作，就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是结合批注、大量的说明以及流程图画框架图wireframe，将自己的产品原型完整而准确的表述给UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改prototype 直至最终确认，开始投入执行。
　　进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的Axure RP，是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时，此软件也在产品经理圈子中广为流传。之所以Axure RP得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。
　1、 打开软件，按F1调取帮助文档，对照文档学习。
　2、 登录http://www.axure.com/au-home.aspx 查看flash视频学习。
　3、 登录 Axure 博客 http://axure.com/cs/blogs/Default.aspx，了解软件最新信息。
　4、 登录讨论组http://axure.com/cs/forums/Default.aspx，参与讨论。
下面具体看下Axure RP流程:
　　界面与功能(Interface & Function)
不论学习什么，打基础是很重要的。关于基础练习，我印象最深的故事是王羲之练习书法的故事，将一池水染黑，需要怎样的毅力？再有就是达芬奇与鸡蛋的故事，一个简单的鸡蛋，达芬奇画了无数次。我相信正是他们的一步一个脚印，才让他们有了后来伟大的成就。故事老套，道理浅显，可是我认为很重要。
学习软件，应该先熟悉每个面板，每个基础功能，才能够真正谈到运用。所以我的学习方法是了解软件的基础功能开始。
一、欢迎界面与功能
运行Axure RP后，首先弹出的是欢迎界面，它拥有的功能和其他软件的欢迎界面没有什么特别的不同。
　　功能区1：文档区，这个区域显示用户最近打开的Axure RP文件，用户可以快捷的打开之前编辑的文件。同时也提供快捷按钮，可以创建新文档与打开Axure RP默认文件夹。
　　功能区2：认证区，这个区域显示注册信息。
　　已经注册的用户，显示注册者名称，与已经获得认证的图标。
　　未注册用户，显示注册链接，引导用户完成注册注册。
　　功能区3：Axure RP学习中心。主要包括在线学习、帮助文档、问题反馈三个环节。
　　a、在线学习提供了三个链接：
　　video tutorial：点击后进入视频学习中心，可以通过观看相关的flash教程学习Axure RP，不过都是e文解说。
　　online community：进入Axure RP的官方讨论组，在线讨论学习。
　　Axure blog：进入Axure的官方论坛，了解最新资讯。
　　b、帮助文档也提供了两个链接，但是其实起到的是一样的效果，都是打开帮助文档，只是跳往不同的章节罢了。
　　c、问题反馈，通过点击链接可以发邮件到support@axure.com，以寻求获得帮助。
　　在欢迎界面中，Axure还提醒用户，用4.6高版本的软件创建保存的Axure文件，无法用以前的低版本查看。
　　同时，如果我们不希望下次打开软件再看到这个面板，我们可以通过选择“Don't show this at startup”实现。
　　二、软件主界面与功能
关闭欢迎界面后，我们进入软件的主界面，淡蓝色调的ui，并不是很张扬。
　　功能区1：命令区，和我们操作的所有office软件一样，包含文件、编辑、查看和帮助，这些功能大抵是差不多的。table也很容易理解，就是对表格编辑的命令。而Axure特有的几个特殊的命令栏目是
a、wireframe：线框，包含所有画原型线框图的相关命令。
b、object：包含所有对工作区物体的操作命令，操作放入工作区的所有widgets，包括组合、排序、锁定以及脚注命令等。
c、generate：自动生成html演示文件、word说明文档，以及对生成规则进行自行编辑、定义。
　　功能区2：工具栏，基本和office风格一模一样，功能也很容易上手。
　　功能区3：工作区，这就是我们平常操作工具，创建prototype的舞台，将自己的构思在这里释放，将自己的想法在这里展现。
　　工作区的上部显示打开的文件名，可同时打开多文档，进行操作。
　　功能区4：站点地图，Axsure RP创建的文件是模拟真实网站页面关系的，sitemap就是通过树形目录关系，管理所有的站点页面文件与流程图文件。科学的文件关系结构，对有效的演示文档与生成易读的说明文档相当重要。
　　我的操作习惯是先画流程图，然后根据流程图构建页面文件框架，最后才开始页面的具体设置。期间可以将文件分为LOFI（低保真）与HIFI（高保真）两个部分进行分别展示，有利于不同的需求者使用。
　　功能区5：器具箱，囤积了所有用来画wireframe与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区，进行操作。对于这里面的对象，我们有必要一一详细了解。
　　功能区6：复用模块区，这里创建的页面文件和sitemap的页面相似，唯一不同的是，master的每个文件，可以当作一个整体，被sitemap反复调用。这个功能就相当于程序开发中的程序复用，用好这个功能，可以减少我们很大一部的工作量。也更容易理解网页文件的关系，了解网页设计师、程序员是怎么构建网站的页面的。
　　功能区7：页面笔记，用来对当前创作页面进行注释与说明。同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。
　　功能区8：页面载入时的交互功能。通过在这里设置，不同条件下，页面初次打开时的状况。
　　功能区9：注释与交互区。这个注释和交互和7、8不同，7、8针对的是页面，而9针对的是页面中的元素，也就是一个个widgets。
　　功能区的上面部分设置交互条件。通过鼠标点击、滑入、滑出，设置触发的事件，与对应widgets相应的变化。这一部分对没有程序基础的人可能会有一点难度，我稍后会做详细解释。
　　功能区的下面部分是注释部分，用户可以对选定的对象进行详细的注释。Axure已经设置了几个默认的注释字段，但是其实这些默认的注释字段，大家完全可以不使用，因为它可能和你要说明的东西风马牛不相及。
　　那么该怎么办呢？Axure提供了自主设置字段，只要你自己设置好自己常用的字段，然后按照自己的习惯编写就可以了。比如说你要说明对象的功能、优先级、参数，那么你在设置中加入这三个字段就好了。Axure最大的优势就是你设置的这些注释，在生成说明文档时，Axure自动帮你生成PRD规格的表格文档，你可以省去相当大的编号工作，与文档工作。这些我在之后也会做说明。
　　这些就是Axure的主要功能区，但是其实还有两个小的角落大家可能会忽略，那就是6、7、8区下面的一行系统信息，这里显示的信息很重要，但是一般人却经常会忽视。我只所以说重要，因为我们在给ui设计师wireframe的时候他们总会问，这里多少像素，那里多少像素，可是我们在画wireframe的时候却无法度量。Axure创建的wireframe，完全可以生成html，因此我们可以在画的时候就度量好每个像素距离。但是我们要怎么做呢？这就需要利用到下面这行小信息栏了。
　　信息栏左边显示的是文档保存情况。而右边呢，当你将一个widgets放入工作区，并选择这个widget时，这里就有用了，它显示的是你所选择widget的高宽，以及距离页面顶部和左边的px距离。通过使用上下左右键，结合这个信息栏，你可以一步一步将它移动到你想去的地方。有意思吧？章要说的是文档管理。文档管理看似简单，但是这是从操作功能上来说的，而我在说功能上的时候，想把我对文档管理的理解也一并说一下。
　　文档管理的目的，其实是为了有一个清晰的产品思路。刚开始工作的时候，我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的，我也不例外。没有好的整理习惯，这直接导致每次寻找先前的文档都要花费相当长的时间，甚至不小心误删，如果恰好有事请假，别的同事也无法接手工作。
　　所以，做一个prototype需要首先构建一个清晰的文档关系，这样一方面能够让自己清楚文件关系与位置，更主要的是让开发者与接受者能清晰理解你的思路，生成更合理的产品说明word文档。
　　Axure RP的sitemap，与windows的树形目录相似，是以父子关系构建页面关系的，每个页面既可以是一个页面page，也可以是一个流程图flow。