注册 | 登录
你如何定义自己，就如何定义这个世界；
你如何定义这个世界，就如何定义你的产品。
从零开始学运营，10年经验运营总监亲授，2天线下集训+1年在线学习，做个有竞争力的运营人。
本文将介绍如何使用Axure RP来制作一个简易登录窗口的原型，与所有的Axure RP初学者共勉。最终的原型图将如下图所示：
创建如图所示的原型，可以简单的分为两个部分：
搭建简易登录窗口界面，
定义交互行为。
下文将按部分详细介绍。
另外，注明一下，笔者所用工具为：
Axure RP 6.5 + 汉化包
第一步：搭建简易登录窗口界面
首先我们需要一个装饰的背景，本文选用矩形面板，其图标如下，将其拖入主页：
拉伸至合适大小，并填充好颜色，本文选用灰色：
然后，需要三个部件来显示初始提示信息，分别为“登录窗口”，“用户名：”，“密码：”，本文选用文本面板，其图标如下：
创建时可只拖入一次，剩下两个用ctrl+c，然后ctrl+v来复制粘贴即可。
调整好文本面板长度和字体大小（文本面板的宽度是随着字体大小自动变化的）：
将登录窗口的文本面板对应的命名为：“logInfo”：
笔者建议初学者养成设置标签名的习惯，标签名作为唯一标识部件的名称，在之后的交互定义中起到变量名的作用。
完成后拖动三个文本面板至矩形上，并调整好位置：
最后，我们还需要两个文本输入框，一个登录的按钮，本文分别选用文本框，和按钮，如下图所示：
操作和前面三个文本面板相似，不作赘叙。将两个文本输入框分别命名为“userName”，“password”，登录按钮为“submitButton”。
得到如下图：
恭喜你，到这一步，你已经完成了基本界面的搭建。怎么样？是不是很简单？:)
接下来我们将看到，如何实现基本的登录交互。
第二步：定义交互行为
当对Axure RP稍微熟练了之后，其实可以凭借下图，就能了解定义了哪些交互：
可以看到，本文的交互定义都集中在登录按钮点击时上。总共有三个用例，分别为用例1，2，3，定义了三种输入情况：
用例1：当用户输入用户名或者密码为空时，按下登录按钮，logInfo（初始显示为“登录窗口”）将显示“请输入用户名或者密码”
用例2：当用户输入用户名为“ym”，密码为“1”时，按下登录按钮，logInfo（初始显示为“登录窗口”）将显示“你好，游某~”
用例3：当用户输入用户名不为“ym”或者密码不为“1”时，按下登录按钮，logInfo（初始显示为“登录窗口”）将显示“用户名或密码错误”。
用例的优先级为从上到下依次减弱。
下面将选用例1作为例子看看如何实现。
实现也分为两步。
第一步添加条件：
鼠标左键单击“登录”按钮，右边会出现“OnClick（点击时）”，左键双击之，将会弹出如下窗口：
选择“添加条件”，并在新弹出来的窗口中，按下图所示添加条件：
确保无误后单击确定。
第二步添加符合条件的结果：
上一步按确认后将得到如下图所示，请选择图中红箭头所指：
然后在新弹出来的窗口中按下图所示结果编辑：
确认无误单击确认，然后再确认。Voila! 按照上面所示方法，添加剩下两个用例即可。
完成后你应该有了如本文开篇所示，按下F5生成原型，并用你最喜欢的浏览器打开，是不是有些许的满足感？
作者：游某
赞赏是对原创者的最大认可
收藏已收藏 | 36赞已赞 | 41
你如何定义自己，就如何定义这个世界；
你如何定义这个世界，就如何定义你的产品。
产品经理群
运营交流群
数据分析群
文案交流群
Axure交流群
关注微信公众号
大家都在问
26个回答26人关注
2个回答1人关注
10个回答15人关注
17个回答19人关注
19个回答22人关注
23个回答37人关注您还可以使用以下方式登录
当前位置：&>&&>& > Axure RP 8如何设计出自适应页面的元件
Axure RP 8如何设计出自适应页面的元件
&　　1、双击打开Axure RP 8设计软件，在基本元件中拖曳一个矩形1到画布上，如下图所示：　　2、再次在基本元件里拖曳两个按钮到画布上，放在矩形框上方，如下图所示：　　3、再拖曳一个占位符到矩形框下方，如下图所示：
欢迎转载：
相关推荐：网站蓝图 Axure RP高保真网页原型制作 中文PDF扫描版
为鼓励上传资源，我们采用积分下载方式，希望您能发布更多更好的资源互相分享
1.上传软件或电子书,源码,资料等,审核后即获2积分;如发布时设了下载需积分，其他用户下载后你将获得相应积分
2.当您首次注册时，可以获送10个下载积分，供您下载资源和熟悉网站下载的使用
3.发现资源有误或其他问题，通过举报按钮反馈后我们将奖励积分
4.您可以在论坛通过发帖等方式获取
5.参加本站可以在有效期内不限次数下载
6.您也（1元=10积分）或
7.我们会不定期举办各种活动，参加活动可以获取积分，请关注下载频道首页公告。
您可能遇到这些“伪问题”：
1.资料无法解压：
请确保所有分卷均下载完毕，如果有未知后缀文件，请搜索相应解压软件；
2.chm文件无内容：
您的电脑锁定了这一文件，请右击文件属性，点击右下方“解除锁定”，关闭文件后再打开；
3.下载不下来：
请尝试重新下载（重新下载不扣积分）；
4.杀毒软件报毒：
黑客安全及破解类软件容易报毒，但可正常使用，如担心安全请谨慎使用。
Axure RP就是用来给网站画图纸的软件。它如同服装设计师的样衣，如同建筑师的图纸，如同电影导演的故事板，如同售楼处的样板间。总之，它能让你在真正付出时间和金钱来制作一个网站之前，能够完全了解到最终真正网站所具有的功能，设计，交互和用户体验。就亲眼看到，亲手用到一个网站。然后在这个原型的基础上进行用户测试和改进，节省大量的时间和金钱。比这个更棒的是，它能让别人一下子就明白网站是做什么的，如何使用一个网站以及要花多少人力物力把一个网站给做出来。
在原型的基础上进行用户测试和改进，节省大量的时间和金钱。本书直入正题，用24个取自淘宝、雅虎、新浪、谷歌、苹果等著名网站的网页功能点和5个整体网站的综合案例，详细说明如何使用Axure RP一步一步制作网站高保真原型图，也就是网站的图纸。
您对本软件有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力
下载地址：
您正在下载：网站蓝图 Axure RP高保真网页原型制作 中文PDF扫
热门最新推荐
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。
文章下载读书Axure RP 8怎么设计图片点赞功能的网页原型
&　　1、打开Axure RP 8软件，在元件库中找到图片元件，拖一个到画布上，如下图所示：　　2、在&Icons&中找到手形向上和手形向下的图标，并拖动到图片元件下方，如下图所示：　　3、选中图片元件，导入外部图片到图片元件里;修改两个手形填充色，分别为绿色和红色，如下图所示：　　4、在两个手形图标附近添加两个输入框，调整输入框宽度和位置，如下图所示：　　5、选中手形向上的图标，添加鼠标单击时用例;设置一个全局变量addData，并设置文本，如下图所示： 　　6、选中变量右侧图标，插入变量或函数[[addData]];设置完毕后，预览该页面，如下图所示： 　　注意事项：　　注意设置全局变量变量值++的方法　　注意插入变量或函数的方法
技术支持与报障：js@msdn.hk
版权所有 @msdn我告诉你&&
我爱数码，创享生活
联系?合作：hz@msdn.hk&&
备案号：粤ICP备号
广东省通信管理局
互联网清理整顿}