关注移动产品设计 By Cola
Axure控件大小调整小技巧
在使用Axure RP 制作原型时,经常需要对Widgets的大小做调整;
一般我们都是通过拖动控件的边框来实现调整大小,但是如果目标区域比较狭小的时候,调整大小就比较费力,不是拖大了就是拖小了;
试试方向键吧!
选中需要微调大小或位置的控件,再选中需要微调的条件,如图,调整控件的高度:
如果需要增加控件的高度,方向键:“上á”
要减小高度的话,方向键:“下â”
Posted from Hangzhou, Zhejiang, China.
| 打印文章 | 这篇文章由Cola于2009年09月24日 15:43发表在Axure教程。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
没有引用
转载:来自Richard推荐的两个国外Axure RP案例
大约10月前 - 2个评论
首先感谢Richard的推荐,好东西给大家分享一下: 手绘风格的library http://consulting.ascentium.com/blog/ux-seo/Post222.aspx 注:风格上主要使用了手绘风格字体,可惜只有英文的,哪位同学有中文的手绘字体给我分享一下 :) Axure in Action 集合多种交互设计在一个案例中 http://userxper.com/blog/archives/448 注:这个案例里包纳了Axure能有的交互,能山寨出同样一个原型的话,恭喜你,毕业咯! 可惜的是,这些案例都是全英文的,大家辛苦一下把26个字母好好组合吧。
密码长度、有效性及安全性校验|Axure案例
大约11月前 - 2个评论
以蓉儿的Axure分享为基础,制作本案例。 本案例说明及实现效果:点此打开演示页面 1. 模拟用户注册输入密码界面: 2. 输入密码时提示密码长度文案: 3. 即时校验密码强度: 4. 密码一致性校验: 5. 所有校验通过后效果: 注:本Axure案例仅供练习和赏析,以熟练运用变量为目的,真实产品原型制作中不推荐。 Axure RP 实例源文件下载:密码长度、有效性及安全性校验Posted from Hangzhou, Zhejiang, China.
结合个人经历,浅谈如何用好Axure
大约11月前 - 16个评论
写在前面: 很高兴有访问我Blog的朋友能通过页面上的“e网打进”联系我; 很高兴他们都在学习Axure; 很高兴我能帮助他们解决眼前遇到的使用问题; 希望他们在使用Axure制作出原型后也很高兴! 更希望他们制作的原型能让它的受众也很高兴,他们通过原型更加了解需求,很快知道下一步该如何配合。 关于可乐: 一名半路出家的产品设计师,代码认识我,我不认识他; “出家前”的工作只涉及到销售、渠道、市场、运营和服务,技术方面顶多可以去应聘个网吧网管(仅限于规模在四五十台机器左右的),如果我肚子里那些能算技术的话…… Axure伴随着我一路成长至今一年有余,对我产品设计师的生涯来说,可谓功不可没!好像是从4.X版本开始入门的。 从工作内容的深入来说,Axure扮演了以下重要角色: 需求确认:和需求方确认我所理解的是不是他所想要的 表达想法:在产品会议上更好的告诉大家我想干什么 完善逻辑:在制作原型Demo时,要让它能帮我说话,传递功能需求,我至少要让这个Demo能跑起来吧? 这个过程对于产品功能的完整,逻辑的清晰来说,可谓事半功倍; 另外,Axure能让分支流程、异常流程更加生动,比流程图可生动多了。 沟通顺畅:没有仿真的Demo,让我同技术开发的同学去沟通,简直是鸡同鸭讲; 此处为褒义,因为开始我没有技术功底,将需求点转为开发逻辑,即转为开发同学能听懂的很难。 完善交互:最终的皮,还是需要UED同学帮忙的,至少我要能说清涉及哪些元素; 逐步的开始深入易用性、功能引导性,我需要和UED同学沟通具体元素的展示方式,位置等; 提前测试:在测试部门同学准备测试用例的时候,参照Demo他们能更快更早的发现潜在问题或逻辑不完善; 甚至在开发过程中,有时测试同学能很快指出开发同学的问题点,因为和Demo不一样 :) 至少在我所经历的项目中,没有发生到最后才发现开发出来的和需求严重不符的情况。 从Axure的功能点掌握来说,可乐经历了以下过程: 全页面时期: 这个时期能把需求、功能或产品的大概样子描绘出来; 只是在RP文件中用很多页面来表达需求,除了页面跳转外几乎没有什么交互命令; 曾经有输出的Demo文件打包压缩后近4M的经历…… 层层重叠时期: 开始会用Dynamic Panel了,会简单的在当前页面实现内容切换了,控件也丰富了起来; 这个时候也开始浅尝类似于开发同学看到自己的程序运行起来的那种快感了吧 :) 现在想来,在没有Dynamic Panel
关于Dynamic Panel Manager
大约11月前 - 2个评论
在使用Axure制作原型的时候,我们经常会用到层(Dynamic Panel); 在层比较多的时候,想要编辑特定层的内容就比较麻烦了,一来要选择到对应的层,二来还要选择到指定的State; 的确,没有使用Dynamic Panel Manager的时候,这个过程很痛苦。 1. 如何开启Dynamic Panel Manager? 菜单-View-勾选“Dynamic Panel Manager”,如图: 开启后在右下方就能找到Dynamic Panel Manager了: 2. Dynamic Panel Manager有啥用? 显示当前页面一共有几个层; 如果该层又有子层的话,以树状展示; 可以隐藏层,直接编辑该层以下的内容; PS: 这里的隐藏同层选项里的隐藏不同,选择Hide后,该层在编辑的时候就不可见,不会出来黄色区域; 在Dynamic Panel Manager中设置层为隐藏后,不影响输出效果; 如图,右键层并设置为“Hidden”后,层会显示为黄色区域: 注:当层设置为“Hidden”后,输出后默认不显示该层; 如图,在Dynamic Panel Panel将层设置为“Hide”后,该层不可见: 注:在编辑层时,不可以选择和设置层的可见性,如图,在编辑“访客详情”层时就没有隐藏选项: 只有在编辑页面时,才可以设置该页面层的可见性。Posted from Hangzhou, Zhejiang, China.
使用变量控制Tab标签或按钮的方法|Axure实例
大约1年前 - 8个评论
所有Axure RP教程中,最经典的应该是利用Axure RP制作Tab标签了吧,这部分内容涉及了页面、层及基本的交互。 以前我制作Tab的时候,为了表现Tab/按钮的选中状态,干脆将一排Tab/按钮都放到层里; 这样做的实质是点击Tab/按钮后切换到新的层,通过这种方法来达到Tab/按钮切换状态的效果。 涉及两层Tab/按钮嵌套时,可以用页面切换+层切换,如果有三层呢? 往下看之前请先留意以下注意事项: 1. 不建议大家都么做,因为这样已经有点追求最佳显示效果的味道了; 2. 不要把大把的时间放到交互动作或者变量应用上,除非你很清楚你在干什么; 3. 如果你想做到完美,请从小处做起:记得不能让每个控件的标签(Label)空着; —点此下载本实例Axure RP源文件 注:考虑项目敏感信息,具体页面内容做了处理但是不影响本案例理解,视觉方面敬请谅解 本实例要素:点击Tab/按钮时,为特定变量赋值并刷新页面,通过变量来控制层的切换的同时,使刚才点击的Tab/按钮显示为选中状态。 1. 点击Tab/按钮时赋值并重新加载当前页面: 使变量“Tab”的值为“1”(点击的是第一个按钮,如果是第二个,则变量值为“2”) 重新加载本页面(配合OnPageLoad来实现变量生效) 2. 在当前页面的OnPageLoad增加交互使变量生效: 如果变量“Tab”值等于“1”,则切换到对应的层(第一个层)并使刚才的按钮处于选中状态; 如果变量“Tab”值等于“2”,则切换到对应的层(第二个层)并使刚才的按钮处于选中状态; …….. PS:如果你觉得Tab/按钮很多,这样编写OnPageLoad交互事件挺累的话,建议你看一下页面上的Tab/按钮是否多了些?太多的Tab/按钮是否会影响到用户体验或产品功能传递呢?Posted from Hangzhou, Zhejiang, China.
特殊需求:关闭Axure RP输出Html页面默认的SiteTree和Notes
大约1年前 - 6个评论
这个标题听上去有点别扭,局限于个人的语言归纳能力以及相关术语表达能力,先这么看着吧。 具体需求: 1. 将Axure制作的原型文件输出成Html格式; 2. 将输出的Html页面文件直接放到公网上(内网也行,改Host也行,只要能被其它机器访问到); 3. 当其它用户访问该原型页面的时候,不加载左侧的SiteTree以及下方的Notes,直接看到更接近实际效果的页面。 PS:虽然访问者点一下CloseFrame也能关闭SiteTree,但还是要点一下。 模拟应用场景: 1. 为客户制作一个网站,最后定稿前的展示; 2. 向内部客户或其它部门展示最新项目及Feature的时候; 总之要让访问页面的人第一眼看到的页面和实际相差无几,当成是已经有的产品最好(销售更好忽悠 )。 现有应用场景: 项目过程中的Demo直接发布到外网,一方面更方便其它协同部门同事查看,另一方面免去了每次更新都要重新下载解压的麻烦,确保每次看到的都是最新的。 解决办法: 1. 打开输出文件中的index.html文件; 2. 找到“function Initialize()”,将“function Initialize()”后“{}”内的内容替换成:self.location.href = “[默认需要显示的页面名称].html”; ********************************************************************************************* 例修改前代码: function Initialize() { var pageName = QueryString(“Page”); if (pageName.length > 0) { parent.mainFrame.location.href = pageName + “.html”; } else { parent.mainFrame.location.href = “首页.html”; } } 修改后代码:
关于Axure RP 5.6 新版功能说明
大约1年前 - 4个评论
官方原文: New in Axure RP Pro 5.6 This update has some new features that make a variety of things in Axure RP easier to do like image slicing, importing from file to file, and duplicating masters as well a number of bug fixes. Enhancements include: • Image slicing (right click image, Edit Image->Slice Image) •
原创:Axure Library Widgets-字体资源下载
大约1年前 - 8个评论
前些天看了流沙的Axure组件封装(妙用字体)很有感,原来在Axure中字体还可以这么灵活应用! 然后灵机一动,把字体都封装成Axure Library Widgets那不是很方便吗?丰富的字体还能当Icon用,很好得弥补了Axure自带Icon组件不足的问题。丰富的字符–同一符号会有多个角度,也正好解决了现成的Icon在Axure里无法调整角度问题吧。 于是,连续几天我那个眼花啊…… 因为开始我是按照字母大/小写,符号来分类封装的…… 后来参照网上有人分享的字符对照表稍微轻松了点,同时增加了Symbol字符,详细请移步一款不错的wingdings图形Html字体对照程序 ,也可点此直接访问在线字符对照表。(注:请使用IE打开该页面,否则可能字符无法正常显示。) 自己DIY的字库控件如图: Webdings字符控件预览: Wingding字符控件预览: 这里就不一一展示了,有兴趣的同学可以下载使用,一共十三个Rplib文件。解压码:Axurer.com ************************************************** * 点此下载 * 备用下载 * ************************************************** 控件说明: 1. 控件所有字体均为文本格式; 2. 默认控件颜色为黑色,可通过调整字体颜色来按照需要调整颜色; 3. 默认控件大小(字体大小)为72,可通过调整字体大小调整控件大小; 4. 输出文件请使用IE查看,使用Firefox可能无法正常显示字体。 使用方法: 1. 将解压后的rplib文件保存到“我的文档”-“My Axure RP Libraries”文件夹。比如我的文件夹位置:D:\My Document\My Axure RP Libraries 2. 如果在“我的文档”中没有该文件夹,可手动创建。 3. 关闭已经打开的Axure RP文件,重新进入后可以在Widget控件框的下拉中找到刚才创建的控件。 初次制作Axure Library控件,有任何问题欢迎留言评论。
巧用Axure Rectangle控件制作图片圆角
大约1年前 - 6个评论
圆角图片或Icon在设计中使用的相当广泛,可惜Axure中不支持图片圆角效果。 总不能每次截完图片后都放到PS中或借助第三方图片去制作圆角效果吧? 让我们试一下Rectangle吧,其实是利用Rounded Rectangle做背景达到类似效果。 1. 截图后粘贴到Axure中,拖个矩形置于该图下层,并将矩形调成圆角: 2. 去除边框线,填充色取图片颜色,Ctrl+G(组合),完工: PS:为了使效果更显著一些,我加了个背景。 大家有其它的方法也可以在评论留言讨论 Posted from Hangzhou, Zhejiang, China.
如何自制Axure RP Widgets
大约1年前 - 没有评论
Axure RP的Widgets大家一定不陌生,用的最多的还是Wireframe,后续的也从网上下了一些。 但是,别人做的不一定贴切自己的需求,那就干脆自己动手,DIY一套属于自己的Widgets吧! 1. 打开Library编辑功能; 在Widgets中选择Create Library后,会要求你先为即将创建的Livrary命名,Axure Library的后缀名为“.rplib”。 2. 在Widget Library中添加自定义的Widget: Widget Library长得像原来的Sitemap,但是Widgets没有上下级关系,所以看上去原来的一个页面就是现在的一个Widget。 3. 选中Widget后就可以创造属于你自己的Widget啦! 注: 1. DIY的Library默认保存路径:D:\My Document\My Axure RP Libraries 2. Axure RP 5.5及以上版本支持Library 3. DIY的Widget支持自带交互命令,具体请再次DIY。
大约11月前
这个办法好啊 我以前都是先在记事本里输入个精确的数字 然后复制到高度那里 貌似高度输入数值不方便
大约11月前
我也是无意中发现的,这样方便不少咯~