├── .gitignore ├── README.md ├── TOC.md ├── accordion-control.md ├── account-login.md ├── adaptive-views-tutorials.md ├── animated-screen-transition.md ├── auto-rotating-banner.md ├── auto-tab-fields.md ├── building-interactions.md ├── conditions-values-variables.md ├── custom-tooltip.md ├── downloads ├── Axure Bike Pics.zip ├── AxureAccordionControl.rp ├── AxureAccountLogin.rp ├── AxureAdaptiveTutorial.zip ├── AxureAutoRotatingBanner.rp ├── AxureAutoTab.rp ├── AxureCustomTooltip.rp ├── AxureDragAndDropImages.rp ├── AxureDraggableMap.rp ├── AxureDroplistSelection.rp ├── AxureEcommerce.zip ├── AxureFlyoutMenu.rp ├── AxureInteractiveButton.rp ├── AxureLightboxTutorial.rp ├── AxureMobileWeb.zip ├── AxureNavigationMenu.rp ├── AxurePassTextToNextPage.rp ├── AxurePhotoCarousel.rp ├── AxurePreviousNextButtons.rp ├── AxureRepeaterTutorial.rp ├── AxureRequiredFields.rp ├── AxureSetPanelOnNextPage.rp ├── AxureSettingTextOnDroplistSelection.rp ├── AxureShowHiddenWidget.rp ├── AxureTabControl.rp ├── AxureTermsAndConditions.rp ├── AxureWebsite.zip └── AxureiPhoneAppResources.zip ├── drag-and-drop-image.md ├── draggable-map.md ├── droplist-selection.md ├── dynamic-panels.md ├── ecommerce-website.md ├── embed-video-and-maps.md ├── flyout-menu.md ├── getting-started.md ├── images ├── accordioncontrol1.png ├── accordioncontrol2.png ├── accordioncontrol3.png ├── accordioncontrol4.png ├── adaptivetutorial1.png ├── adaptivetutorial2.png ├── adaptivetutorial3.png ├── adaptivetutorial4.png ├── adaptivetutorial5.png ├── adaptivetutorial6.png ├── adaptivetutorial7.png ├── advanced-conditional-logic-account-login-tutorial1.png ├── advanced-conditional-logic-account-login-tutorial2.png ├── advanced-conditional-logic-account-login-tutorial3.png ├── advanced-conditional-logic-account-login-tutorial4.png ├── advanced-conditional-logic-account-login-tutorial5.png ├── advanced-conditional-logic-account-login-tutorial6.png ├── advanced-conditional-logic-autotab-fields-tutorial1.png ├── advanced-conditional-logic-autotab-fields-tutorial2.png ├── advanced-conditional-logic-autotab-fields-tutorial3.png ├── advanced-conditional-logic-autotab-fields-tutorial4.png ├── advanced-conditional-logic-autotab-fields-tutorial5.png ├── advanced-conditional-logic-autotab-fields-tutorial6.png ├── advanced-conditional-logic-terms-and-conditions-tutorial1.png ├── advanced-conditional-logic-terms-and-conditions-tutorial2.png ├── advanced-conditional-logic-terms-and-conditions-tutorial3.png ├── advanced-conditional-logic-terms-and-conditions-tutorial4.png ├── advanced-conditional-logic-terms-and-conditions-tutorial5.png ├── advanced-conditional-logic-terms-and-conditions-tutorial6.png ├── advanced-conditional-logic-terms-and-conditions-tutorial7.png ├── advanced-conditional-logic-terms-and-conditions-tutorial8.png ├── advanced-droplist-selection-tutorial1.png ├── advanced-droplist-selection-tutorial2.png ├── advanced-droplist-selection-tutorial3.png ├── advanced-droplist-selection-tutorial4.png ├── advanced-droplist-selection-tutorial5.png ├── advanced-droplist-selection-tutorial6.png ├── advanced-required-fields-tutorial1.png ├── advanced-required-fields-tutorial10.png ├── advanced-required-fields-tutorial2.png ├── advanced-required-fields-tutorial3.png ├── advanced-required-fields-tutorial4.png ├── advanced-required-fields-tutorial5.png ├── advanced-required-fields-tutorial6.png ├── advanced-required-fields-tutorial7.png ├── advanced-required-fields-tutorial8.png ├── advanced-required-fields-tutorial9.png ├── advanced-set-widget-values-droplist-selection-tutorial1.png ├── advanced-set-widget-values-droplist-selection-tutorial2.png ├── advanced-set-widget-values-droplist-selection-tutorial3.png ├── advanced-set-widget-values-droplist-selection-tutorial4.png ├── advanced-set-widget-values-droplist-selection-tutorial5.png ├── advanced-variables-pass-text-next-page-tutorial1.png ├── advanced-variables-pass-text-next-page-tutorial2.png ├── advanced-variables-pass-text-next-page-tutorial3.png ├── advanced-variables-pass-text-next-page-tutorial4.png ├── advanced-variables-pass-text-next-page-tutorial5.png ├── advanced-variables-pass-text-next-page-tutorial6.png ├── advanced-variables-pass-text-next-page-tutorial7.png ├── advanced-variables-set-panel-next-page-tutorial1.png ├── advanced-variables-set-panel-next-page-tutorial2.png ├── advanced-variables-set-panel-next-page-tutorial3.png ├── advanced-variables-set-panel-next-page-tutorial4.png ├── advanced-variables-set-panel-next-page-tutorial5.png ├── advanced-variables-set-panel-next-page-tutorial6.png ├── advanced-variables-set-panel-next-page-tutorial7.png ├── advanced-variables-set-panel-next-page-tutorial8.png ├── autorotatingbanner1.png ├── autorotatingbanner2.png ├── autorotatingbanner3.png ├── buildinginteractions1.png ├── buildinginteractions2.png ├── buildinginteractions3-1.png ├── buildinginteractions3-2.png ├── buildinginteractions4.png ├── buildinginteractions5.png ├── buildinginteractions6-1.png ├── buildinginteractions6-2.png ├── conditionsvv1.png ├── conditionsvv2.png ├── conditionsvv3.png ├── conditionsvv4.png ├── conditionsvv5-1.png ├── conditionsvv5-2.png ├── conditionsvv6.png ├── conditionsvv7.png ├── conditionsvv8.png ├── customtooltip1.png ├── customtooltip2.png ├── customtooltip3.png ├── customtooltip4.png ├── draganddropimage1.png ├── draganddropimage2.png ├── draganddropimage3.png ├── draganddropimage4.png ├── draganddropimage5.png ├── draganddropimage6.png ├── draganddropimage7.png ├── draganddropimage8.png ├── draggablemap1.png ├── draggablemap2.png ├── draggablemap3.png ├── draggablemap4.png ├── draggablemap5.png ├── draggablemap6.png ├── ecommerce1.png ├── ecommerce10.png ├── ecommerce11.png ├── ecommerce12.png ├── ecommerce13.png ├── ecommerce14.png ├── ecommerce15.png ├── ecommerce16.png ├── ecommerce17.png ├── ecommerce18.png ├── ecommerce19.png ├── ecommerce2.png ├── ecommerce20.png ├── ecommerce21.png ├── ecommerce22.png ├── ecommerce23.png ├── ecommerce24.png ├── ecommerce25.png ├── ecommerce26.png ├── ecommerce27.png ├── ecommerce28.png ├── ecommerce29.png ├── ecommerce3.png ├── ecommerce30.png ├── ecommerce4.png ├── ecommerce5.png ├── ecommerce6.png ├── ecommerce7.png ├── ecommerce8.png ├── ecommerce9.png ├── flyoutmenu1.png ├── flyoutmenu2.png ├── flyoutmenu3.png ├── flyoutmenu4.png ├── flyoutmenu5.png ├── flyoutmenu6.png ├── gettingstarted1.png ├── gettingstarted2.png ├── gettingstarted3.png ├── gettingstarted4.png ├── interactivebutton1.png ├── interactivebutton2.png ├── interactivebutton3.png ├── interactivebutton4.png ├── interactivebutton5.png ├── interactivebutton6.png ├── introducingdynamicpanels1.png ├── introducingdynamicpanels2.png ├── introducingdynamicpanels3.png ├── introducingdynamicpanels4.png ├── iphone-app-screen-transition-tutorial1.png ├── iphone-app-screen-transition-tutorial2.png ├── iphone-app-screen-transition-tutorial3.png ├── iphone-app-screen-transition-tutorial4.png ├── iphone-app-screen-transition-tutorial5.png ├── iphone-app-screen-transition-tutorial6.png ├── iphone-app-screen-transition-tutorial7.png ├── iphone-app-screen-transition-tutorial8.png ├── iphone-appscrolling-content1.png ├── iphone-appscrolling-content2.png ├── iphone-appscrolling-content3.png ├── iphone-appscrolling-content4.png ├── iphone-appsliding-menu-tutorial1.png ├── iphone-appsliding-menu-tutorial2.png ├── iphone-appsliding-menu-tutorial3.png ├── iphone-appsliding-menu-tutorial4.png ├── iphone-appsliding-menu-tutorial5.png ├── iphone-appsliding-menu-tutorial6.png ├── iphone-appsliding-menu-tutorial7.png ├── iphone-appsliding-menu-tutorial8.png ├── iphone-appswiping-slideshow1.png ├── iphone-appswiping-slideshow2.png ├── iphone-appswiping-slideshow3.png ├── iphone-appswiping-slideshow4.png ├── iphone-appswiping-slideshow5.png ├── iphone-appswiping-slideshow6.png ├── lightbox1.png ├── lightbox2.png ├── lightbox3.png ├── lightbox4.png ├── lightbox5.png ├── lightbox6.png ├── lightbox7.png ├── masters-tutorials-previous-next-link-1.png ├── masters-tutorials-previous-next-link-2.png ├── masters-tutorials-previous-next-link-3.png ├── masters-tutorials-previous-next-link-4.png ├── masters-tutorials-previous-next-link-5.png ├── masters-tutorials-previous-next-link-6.png ├── masters-tutorials-previous-next-link-7.png ├── mobilewebsitedesign1.png ├── mobilewebsitedesign10.png ├── mobilewebsitedesign11.png ├── mobilewebsitedesign12.png ├── mobilewebsitedesign13.png ├── mobilewebsitedesign14.png ├── mobilewebsitedesign15.png ├── mobilewebsitedesign16.png ├── mobilewebsitedesign17.png ├── mobilewebsitedesign18.png ├── mobilewebsitedesign19.png ├── mobilewebsitedesign2.png ├── mobilewebsitedesign20.png ├── mobilewebsitedesign21.png ├── mobilewebsitedesign22.png ├── mobilewebsitedesign3.png ├── mobilewebsitedesign4.png ├── mobilewebsitedesign5.png ├── mobilewebsitedesign6.png ├── mobilewebsitedesign7.png ├── mobilewebsitedesign8.png ├── mobilewebsitedesign9.png ├── navigationmenu1.png ├── navigationmenu2.png ├── navigationmenu3.png ├── navigationmenu4.png ├── navigationmenu5.png ├── navigationmenu6.png ├── photocarousel1.png ├── photocarousel2.png ├── photocarousel3.png ├── repeater-widget-tutorials-repeater-tutorial-1.png ├── repeater-widget-tutorials-repeater-tutorial-2.png ├── repeater-widget-tutorials-repeater-tutorial-3.png ├── repeater-widget-tutorials-repeater-tutorial-4.png ├── repeater-widget-tutorials-repeater-tutorial-5.png ├── repeater-widget-tutorials-repeater-tutorial-6.png ├── repeater-widget-tutorials-repeater-tutorial-7.png ├── repeater-widget-tutorials-repeater-tutorial-8.png ├── showhiddenwidget1.png ├── showhiddenwidget2.png ├── showhiddenwidget3.png ├── showhiddenwidget4.png ├── showhiddenwidget5.png ├── showhiddenwidget6.png ├── showhiddenwidget7.png ├── tabcontrol1.png ├── tabcontrol2.png ├── tabcontrol3.png ├── tabcontrol4.png ├── tabcontrol5.png ├── tabcontrol6.png ├── tabcontrol7.png ├── tabcontrol8.png ├── u185.png ├── web-design-tutorials-embed-video-and-maps-1.png ├── web-design-tutorials-embed-video-and-maps-2.png ├── web-design-tutorials-embed-video-and-maps-3.png ├── web-design-tutorials-embed-video-and-maps-4.png ├── web-design-tutorials-embed-video-and-maps-5.png ├── web-design-tutorials-embed-video-and-maps-6.png ├── widgetsmasters1.png ├── widgetsmasters2.png ├── widgetsmasters3.png ├── widgetsmasters4.png ├── widgetsmasters5.png ├── workingwithpages1.png ├── workingwithpages2.png ├── workingwithpages3.png ├── workingwithpages4.png └── workingwithpages5.png ├── interactive-button.md ├── lightbox.md ├── mobile-website.md ├── navigation-menu.md ├── pass-text-next-page.md ├── photo-carousel.md ├── previous-next-link.md ├── repeater-tutorial.md ├── required-fields.md ├── scrolling-content.md ├── set-panel-next-page.md ├── show-hidden-widget.md ├── sliding-menu.md ├── swiping-slideshow.png.md ├── tab-control.md ├── terms-and-conditions.md ├── text-on-droplist-selection.md ├── widgets-masters.md └── working-with-pages.md /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Axure 指南（Axure Tutorial 中文版） 2 | 3 | 4 | Axure RP 是一个专业的快速原型设计工具。 5 | 6 | 它能够让我们快速创建应用软件或 WEB 网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。 7 | 8 | ## 适宜的读者 9 | 10 | 本系列教程专为初学者量身打造，能够帮助他们从零开始逐步了解 Axure RP 操作。 11 | 12 | ## 你将学会 13 | 14 | + Axure 基本操作 15 | + 基础原型设计 16 | + 高级原型设计 17 | + WEB 原型设计操作 18 | + APP 原型设计操作 19 | + 嵌入视频、地图 20 | + 自适应视图 21 | + ... 22 | 23 | 24 | |更新日期 |更新内容 25 | |----------|-------------------- 26 | |2015-05-23|Axure RP 指南 27 | -------------------------------------------------------------------------------- /TOC.md: -------------------------------------------------------------------------------- 1 | #Axure 指南 2 | 3 | 4 | 核心训练 5 | 6 | + [**准备开始**](getting-started.md) 7 | + [**页面操作**](working-with-pages.md) 8 | + [**部件库和 Masters**](widgets-masters.md) 9 | + [**建立交互**](building-interactions.md) 10 | + [**引入动态面板**](dynamic-panels.md) 11 | + [**条件,值和变量**](conditions-values-variables.md) 12 | 13 | 从头开始 14 | 15 | + [**电子商务网站**](ecommerce-website.md) 16 | + [**手机上展示的原型**](mobile-website.md) 17 | 18 | 原型设计基础指南 19 | 20 | + [**按钮的交互**](interactive-button.md) 21 | + [**显示隐藏部件**](show-hidden-widget.md) 22 | + [**用户自定义 Tooltip**](custom-tooltip.md) 23 | + [**导航菜单**](navigation-menu.md) 24 | 25 | Masters 指南 26 | 27 | + [**上一页/下一页链接 Master**](previous-next-link.md) 28 | 29 | 动态面板指南 30 | 31 | + [**图片循环显示**](photo-carousel.md) 32 | + [**制作自定义的下拉菜单**](flyout-menu.md) 33 | + [**折叠控制**](accordion-control.md) 34 | + [**选项板部件**](tab-control.md) 35 | + [**视频与图片的 Lightbox**](lightbox.md) 36 | + [**图像的拖拽交互**](drag-and-drop-image.md) 37 | + [**拖拽地图**](draggable-map.md) 38 | + [**自动旋转标题**](auto-rotating-banner.md) 39 | 40 | 高级原型设计指南 41 | 42 | + [**账户登录**](account-login.md) 43 | + [**Auto-Tab 字段**](auto-tab-fields.md) 44 | + [**Terms 和 Conditions**](terms-and-conditions.md) 45 | + [**下拉列表选择**](droplist-selection.md) 46 | + [**必填字段**](required-fields.md) 47 | + [**设置文本下拉列表**](text-on-droplist-selection.md) 48 | + [**将文本传递给下一个页面**](pass-text-next-page.md) 49 | + [**在下一个页面上设置面板**](set-panel-next-page.md) 50 | 51 | WEB 设计指南 52 | 53 | + [**嵌入视频和地图**](embed-video-and-maps.md) 54 | 55 | IPHONE APP 指南 56 | 57 | + [**滑动菜单**](sliding-menu.md) 58 | + [**滚动内容**](scrolling-content.md) 59 | + [**屏幕过渡动画**](animated-screen-transition.md) 60 | + [**Swipping 幻灯片**](swiping-slideshow.png.md) 61 | 62 | Repeater 部件指南 63 | 64 | + [**Repeater 小部件**](repeater-tutorial.md) 65 | 66 | 自适应视图指南 67 | 68 | + [**自适应视图**](adaptive-views-tutorials.md) -------------------------------------------------------------------------------- /accordion-control.md: -------------------------------------------------------------------------------- 1 | # 折叠控制 2 | 3 | ## 将内容转换成动态面板 4 | 5 | ![image](images/accordioncontrol1.png) 6 | 7 | 首先打开[AxureAccordionControl.rp](/downloads/AxureAccordionControl.rp) 然后打开 Accordion Control 面板。 8 | 9 | 当每个章节包含了许多部件，我们就会让其可以在动态面板中可以自由的隐藏显示。选择中一个章节的内容右键单击 Convert to Dynamic Panel。 10 | 11 | ## 标记和隐藏内容面板 12 | 13 | ![image](images/accordioncontrol2.png) 14 | 15 | 标记动态面板为 Section1Content，Section2Content 和 Section3Content。 16 | 17 | 一般地，每个章节的内容都应该被隐藏，所以对每个章节的内容右键单击隐藏。 18 | 19 | ## 切换可见性和 Push/Pull Widgets 20 | 21 | ![image](images/accordioncontrol3.png) 22 | 23 | 选中每个章节的头部然后添加一个名为 Toggle Visibility for Section1Content 的动作，在添加一个 OnClick 事例。 24 | 25 | 点击 Show/Hide 动作，选中名为 Section1Content 动态面板，然后选择 Toggle 单选按钮，接着为 Push/Pull Widgets 选择复选按钮 26 | 27 | 对章节 2 和章节 3 做相同的步骤，添加切换可见性的动作到章节内容上去。 28 | 29 | ## 将动态面板放置到合适位置 30 | 31 | ![image](images/accordioncontrol4.png) 32 | 33 | 让我们移动章节，让章节 2 在章节 1 下面，章节 3 在章节 2 下面。 34 | 35 | 现在已经完成了，预览你的原型然后测试吧。你能看到当你点击章节头部时，章节内容会扩张收缩，章节会上下移动。 36 | -------------------------------------------------------------------------------- /account-login.md: -------------------------------------------------------------------------------- 1 | #条件逻辑:账户登录教程 2 | 3 | ##真实的登录体验 4 | 5 | ### 添加一个 OnClick Case 6 | 7 | ![image](images/advanced-conditional-logic-account-login-tutorial1.png) 8 | 9 | 首先，打开[AxureAccountLogin.rp](dowloads/AxureAccountLogin.rp) 并打开“帐户登录”页面。 10 | 11 | 选择登录按钮，并添加一种 Case 到 OnClick 事件。在编辑器中，单击“添加条件”按钮。 12 | 13 | ### 构建条件 14 | 15 | ![image](images/advanced-conditional-logic-account-login-tutorial2.png) 16 | 17 | 在条件构建器中，使用下拉目录和文本字段配置第一行条件为“如果文本部件电子邮件字段等于 secretagent@fbi.com” 18 | 19 | ### 添加第二个条件 20 | 21 | ![image](images/advanced-conditional-logic-account-login-tutorial3.png) 22 | 23 | 单击绿色的+图标添加第二个条件。设置第二行条件为“如果文本小部件密码字段等于咖啡”。 24 | 25 | 单击OK，关闭条件生成器。 26 | 27 | ### 添加 Case 操作 28 | 29 | ![image](images/advanced-conditional-logic-account-login-tutorial4.png) 30 | 31 | 现在的条件已经明确了，如果电子邮件和密码满足设定的条件，那么我们可以添加行动来执行它。 32 | 33 | 点击“打开链接”并选择“我的账户”页面。 34 | 35 | 单击OK，关闭编辑器。 36 | 37 | ### 添加第二个 Case “其他” 38 | 39 | ![image](images/advanced-conditional-logic-account-login-tutorial5.png) 40 | 41 | 现在我们已经添加成功登录的情况，让我们添加第二种情况：如果登录不成功。双击 OnClick 事件添加第二种情况。请注意“如果这是真的”是自动添加到 Case。默认条件下，如果条件在第一种情况下不满足就会执行第二种情况。因此在此示例中，我们不需要再添加第二种情况的条件。 42 | 43 | ### 添加 Show 操作 44 | 45 | ![image](images/advanced-conditional-logic-account-login-tutorial6.png) 46 | 47 | 当登录不成功，我们想要展示错误信息小部件。在 Case 编辑器中，单击“显示”添加操作，勾选错误信息复选框。 48 | 49 | 预览您的原型和测试吧！ 50 | 51 | ##总结 52 | 现在你可以使用逻辑条件使你的登录事件更加的真实了。 53 | 还需要其他帮助吗？查看[论坛](http://www.axure.com/c/forum.php)或联系我们 **support@axure.com** 54 | -------------------------------------------------------------------------------- /adaptive-views-tutorials.md: -------------------------------------------------------------------------------- 1 | # 自适应视图教程 2 | 3 | ## 自适应视图的基础应用 4 | 5 | ### 选择自适应图标 6 | 7 | 首先，打开 [DIYAdaptiveTutorial.rp](/downloads/DIYAxureAdaptiveTutorial.rp)。 8 | 9 | 在这个例子中，我们将创建一个简单的自适应布局，当浏览器的大小比 768px 小时自动更改。 10 | 11 | 选择自适应图标上面的 0,0 坐标打开自适应视图对话框。 12 | 13 | ![image](images/adaptivetutorial1.png) 14 | 15 | ### 添加 Portait Tablet 预置视图 16 | 17 | ![image](images/adaptivetutorial2.png) 18 | 19 | 在自适应视图对话框中，单击绿色加号创建一个视图。 20 | 21 | 在预置下拉表框中，选择 Portait Tablet。 22 | 23 | 点击 OK。 24 | 25 | ### 选择 768 视图和 unplace 蓝色矩形 26 | 27 | ![image](images/adaptivetutorial3.png) 28 | 29 | 在自适应视图选择工具栏中，选择 768 视图，然后 unplace 蓝色矩形。您可以通过按下删除或右键单击 [Unplace from view]。这将从 768 视图中删除小部件，但不是从基础视图（其父图）。 30 | 31 | ### 移动和调整的粉红色和绿色的矩形的大小 32 | 33 | ![image](images/adaptivetutorial4.png) 34 | 35 | 移动粉红色和绿色的矩形将它们堆放在图像的下方。调整矩形使它们的宽度和图像宽度相同。 36 | 37 | ### 将绿色矩形变成橙色 38 | 39 | ![image](images/adaptivetutorial5.png) 40 | 41 | 选择绿色矩形，并改变填充颜色为橙色。切换回基本视图并注意颜色的变化只是影响了 768 视图，因为基础视图的子视图的样式属性是不能影响所有视图的。 42 | 43 | ### 在粉红色矩形上添加文本 44 | 45 | ![image](images/adaptivetutorial6.png) 46 | 47 | 选择粉红色的矩形，并添加文本“Get busy!”。注意文本将被添加到基础视图和 768 视图。不同于样式属性，文本的更改应用于所有的视图。 48 | 49 | ### 预览和测试 50 | 51 | ![image](images/adaptivetutorial7.png) 52 | 53 | 通过点击工具栏上的预览图标预览原型。在自适应视图改变调整你的浏览器大小。 54 | 55 | 恭喜！你已经建立了你的第一个自适应原型。 56 | 57 | 在移动设备上正确查看你的自适应视图时，要确保包括视图标签和其他移动设备上查看设置上说明[本教程]( http://www.axure.com/learn/adaptive/tutorial)。 58 | 59 | -------------------------------------------------------------------------------- /animated-screen-transition.md: -------------------------------------------------------------------------------- 1 | # iPhone 应用程序教程&培训的文章 2 | 3 | # 屏幕过渡动画教程 4 | 5 | ## 屏幕过渡动画概述 6 | 7 | 设计 iPhone 应用程序时，从一个屏幕过渡到另一个屏幕使用动画就像滑动条那样是很普遍的。在 Axure RP 中，屏幕可以设计在一个动态面板里面和设置面板状态行动用于从一个屏幕滑动过渡到下一个。这个 iPhone 应用程序教程向您展示如何做到这一点。 8 | 9 | 从一个方面说明，构建你的 iPhone 应用程序原型在动态面板是一个不错的方式来把你的整个应用程序放在一个页面。但为了防止过载的动态面板可能会很难控制在一个页面上，考虑将它分解成多个页面是值得考虑的。 10 | 11 | ## IPHONE 应用程序导航与动态面板 12 | 13 | ### 添加热点 14 | 15 | ![image](images/iphone-app-screen-transition-tutorial1.png) 16 | 17 | 首先，打开[axureiphoneapp.zip](downloads/AxureiPhoneAppResources.zip)并打开 iPhoneApp-StateChangeNavigationTutorial.rp 文件。添加热点在后退按钮和现在播放按钮的上面。我们这样做是因为这些按钮是由多个部件组成的，和我们想要添加一个交互到整个区域。 18 | 19 | ### 将第一个转换为动态面板 20 | 21 | ![image](images/iphone-app-screen-transition-tutorial2.png) 22 | 23 | 接下来，我们将把这两个屏幕放在一个动态面板里面。选择第一个屏幕的所有部件包含灰色背景，右键单击并将其转化为一个动态面板。标签这个面板为交互面板。 24 | 25 | ### 添加"暂停"状态 26 | 27 | ![image](images/iphone-app-screen-transition-tutorial3.png) 28 | 29 | 添加一个额外的状态面板通过在动态面板管理器右键单击面板并选择添加状态。 30 | 31 | 标签状态1为"现在播放"和状态2为“暂停”。 32 | 33 | ### 粘贴小部件到"暂停"状态 34 | 35 | ![image](images/iphone-app-screen-transition-tutorial4.png) 36 | 37 | 选择站列表屏幕小部件，剪切和粘贴成站状态。将粘贴小部件移动到位置0，0。 38 | 39 | ### 添加 OnClick 到热点 40 | 41 | ![image](images/iphone-app-screen-transition-tutorial5.png) 42 | 43 | 选择"现在播放"热点，并双击 OnClick 事件打开事件编辑器。 44 | 45 | ### 设置面板状态为“现在播放” 46 | 47 | ![image](images/iphone-app-screen-transition-tutorial6.png) 48 | 49 | 为交互面板添加控制面板状态行动并勾选复选框。“现在播放”状态将被默认选中。选择并单击 OK关闭事件编辑器。 50 | 51 | 单击 OK 关闭编辑器。 52 | 53 | ### 打开播放状态，添加到 OnClick 54 | 55 | ![image](images/iphone-app-screen-transition-tutorial7.png) 56 | 57 | 导航到现在播放状态，选择后退按钮热点，并双击 OnClick 打开事件编辑器。 58 | 59 | ### 设置面板状态“暂停” 60 | 61 | ![image](images/iphone-app-screen-transition-tutorial8.png) 62 | 63 | 选择“设置面板状态”和勾选交互面板复选框。从下拉目录中选择暂停状态，并为“动画进时”和“动画出时”选择“向右滑”然后单击 OK。 64 | 65 | 现在可以在你的桌面上生成和测试它或者把它放在你的苹果手机上看看效果了。 66 | 67 | ## 总结 68 | 69 | 现在你有能力为你的苹果手机应用原型设置动态面板了，合理地使用它吧！还需要其他帮助吗？查看[论坛](http://www.axure.com/c/forum.php)或联系我们 **support@axure.com** 70 | -------------------------------------------------------------------------------- /auto-rotating-banner.md: -------------------------------------------------------------------------------- 1 | # 自动旋转标题 2 | 3 | ## 添加事例到 OnLoad 事件 4 | 5 | ![images](images/autorotatingbanner1.png) 6 | 7 | 首先从工具栏打开[AxureAutoRotatingBanner.rp](/downloads/AxureAutoRotatingBanner.rp) 文件然后打开 Auto-Rotating Banner 页面。 8 | 9 | 选中 Rotating Photos 动态面板。在交互选项板中，添加一个事例到 OnLoad 事件中，这个会打开事例编辑器对话框。 10 | 11 | ## 添加等待动作 12 | 13 | ![images](images/autorotatingbanner2.png) 14 | 15 | 在事例编辑器中，为 Wait 添加一个动作。设置其等待时间为 2000 ms。 16 | 17 | ## 为页面状态添加动作 18 | 19 | ![images](images/autorotatingbanner3.png) 20 | 21 | 在事例编辑器中，添加 Set Panel State 动作。在下拉列表中选中 This Widget 然后将状态其指定到 Next。 22 | 23 | 现在选中复选框 Wrap from Last to First 和 Repeat Every，然后输入 2000 ms。 24 | 25 | 最后，添加一些动画到页面切换，选中 slide left 动画指定到 Animate In 和 Animate Out。 26 | 27 | 预览你的原型然后测试吧。 28 | -------------------------------------------------------------------------------- /auto-tab-fields.md: -------------------------------------------------------------------------------- 1 | #条件逻辑: Auto-Tab 字段教程 2 | 3 | ##检测输入的字符数量 4 | ， 5 | ### 添加 OnKeyUp Case 6 | 7 | ![image](images/advanced-conditional-logic-autotab-fields-tutorial1.png) 8 | 9 | 首先，打开[AxureAutoTab.rp](downloads/AxureAutoTab.rp)打开 Auto-Tab 页面。 10 | 选择第一个文本字段，添加一个 Case 到 OnKeyUp 事件。在 Case 编辑器中，单击“添加条件”打开条件生成器。 11 | 12 | ### 构建条件 13 | 14 | ![image](images/advanced-conditional-logic-autotab-fields-tutorial2.png) 15 | 16 | 在条件构建器，设置行为“AreaCode 中部件的长度值等于3”。 17 | 单击 OK 并关闭条件生成器。 18 | 19 | ### 聚焦到下一个字段 20 | 21 | ![image](images/advanced-conditional-logic-autotab-fields-tutorial3.png) 22 | 23 | 在 Case 编辑器中选择 Focus，然后单击 MiddleDigits 的复选框。 24 | 25 | 单击 OK 并关闭编辑器。 26 | 27 | ### 重复步骤设置中间的文本字段 28 | 29 | ![image](images/advanced-conditional-logic-autotab-fields-tutorial4.png) 30 | 31 | 重复步骤1到3设置中间的文本字段。而且为中间的文本字段设置同样的条件，并且把操作设置为聚焦到最后的文本字段。 32 | 33 | ### 为最后文本字段添加条件 34 | 35 | ![image](images/advanced-conditional-logic-autotab-fields-tutorial5.png) 36 | 37 | 在最后的文本字段，添加一个 OnKeyUp 事件，这一次把条件设为“最后的小部件的长度值等于4”。 38 | 单击 OK，并关闭条件生成器。 39 | 40 | ### 添加 Show 操作 41 | 42 | ![image](images/advanced-conditional-logic-autotab-fields-tutorial6.png) 43 | 44 | 在 Case 编辑器中，选择“显示”行动并单击 SubmitButton 的复选框。 45 | 现在，当用户输入4位数在文本框中，隐藏的提交按钮将显示出来。 46 | 47 | 预览原型并测试它吧！ 48 | ##总结 49 | 你的电话号码和社交保密文本永远都不相同的了。 50 | 还需要其他帮助吗？查看[论坛](http://www.axure.com/c/forum.php)或联系我们 **support@axure.com** 51 | 52 | -------------------------------------------------------------------------------- /building-interactions.md: -------------------------------------------------------------------------------- 1 | # 建立交互 2 | 3 | 点击启用一个 Button Shape，使用编辑器获取文本框焦点。然后，当页面加载的时，使用页面的 OnPageLoad 事件把焦点放到文本框上。 4 | 5 | ## 添加一个 Button Shape 和两个文本框 6 | 7 | ![images](images/buildinginteractions1.png) 8 | 9 | ### 1 添加一个按钮，两个文本框 10 | 拖放一个 Button Shape 部件和两个文本框部件到设计区域上。 11 | 12 | ### 2 在按钮上编辑文本 13 | 在 Button Shape 部件上编辑输入两个单词 Swap Focus。 14 | 15 | ### 3 为按钮命名 16 | 仍然选择 Button Shape 部件，在“部件交互和注释”窗口将它命名为 Button1。 17 | 18 | ### 4 编辑提示文本 19 | 选择第一个文本框， 在“属性”选项卡中编辑提示文本读作 Text Field 1。 20 | 21 | ### 5 命名为 TextField1 22 | 将文本框命名为 TextField1。 23 | 24 | ## 禁用第二个文本框 25 | 26 | ![images](images/buildinginteractions2.png) 27 | 28 | ### 1 编辑提示文本 29 | 将第二个文本框部件编辑提示文本读作 Text Field 2。 30 | 31 | ### 2 禁用 Text Field 2 32 | 在“属性”选项卡，单击“禁用”。 33 | 34 | ### 3 命名为 TextField2 35 | 继续选择文本框并命名为 Textfield2。 36 | 37 | ## 单击按钮禁用第一个文本框 38 | 39 | ![images](images/buildinginteractions3-1.png) 40 | 41 | ![images](images/buildinginteractions3-2.png) 42 | 43 | ### 1 选择 Button1 44 | 单击选择 Swap Focus 部件。 45 | 46 | ### 2 编辑 OnClick 事件 47 | 在“交互”选项卡双击 OnClick 事件。 48 | 49 | ### 3 添加动作到禁用 50 | 在最左侧的列表上选择动作“禁用”选项。 51 | 52 | ### 4 指定 TextField1 53 | 在最右侧的列表上勾选 TextField1 复选框。 54 | 55 | ### 还不能点击（OK 按钮）。 56 | 我们在下一步将在同一案例中继续添加另一个动作。 57 | 58 | ## 启用第二个文本框 59 | 60 | ![images](images/buildinginteractions4.png) 61 | 62 | ### 1 添加启用部件动作 63 | 同一 Case 中通过点击 Focus 添加另一个动作。 64 | 65 | ### 2 指定 TextField2 66 | 勾选 TextField2 复选框。 67 | 68 | ### 3 不要点击 OK 69 | 我们还没完全完成这个 Case。下一步，我们将添加第三个动作。 70 | 71 | ## 第二个文本框设置 Focus 72 | 73 | ![images](images/buildinginteractions5.png) 74 | 75 | ### 1 添加设置聚焦动作 76 | 在同一 Case 下通过点击 Focus 添加另一个动作。 77 | 78 | ### 2 指定 TextField2 79 | 勾选 TextField2 复选框。 80 | 81 | ### 3 复查所有动作 82 | 确定的所有动作如上图所示正确的显示出来。 83 | 84 | ### 4 点击 OK 85 | 点击 OK 按钮确认所有的改变。 86 | 87 | ## 当页面下载时设置聚焦 Text Field 1 88 | 89 | ![images](images/buildinginteractions6-1.png) 90 | 91 | ![images](images/buildinginteractions6-2.png) 92 | 93 | ### 1 添加一个 Case OnPageLoad 94 | 在下方“页面交互”选项双击 OnPageLoad 事件。 95 | 96 | ### 2 添加设置聚集动作 97 | 在最左侧列表选择动作 Focus。 98 | 99 | ### 3 指定 TextField1 100 | 在最右侧列表勾选 TextField1 复选框。 101 | 102 | ### 4 点击 OK 103 | 点击 OK 按钮确认所有改变。 104 | 105 | ## 预览原型 106 | 预览你的原型。注意当页面加载时第一个文本框已经聚焦。点击 Swap Focus 按钮禁用 Text Field 1，然后启用聚焦 Text Field 2。在浏览器中刷新页面将会重置一切。 107 | -------------------------------------------------------------------------------- /conditions-values-variables.md: -------------------------------------------------------------------------------- 1 | # 条件，值和变量 2 | 3 | 创建“条件”，以检查一个文本字段中的文本是否是空白，基于输入链接到相应的页面。 使用一个变量来存储文本框输入的文本。然后，使用变量设置部件在下一个页面上的文本上。 4 | 5 | ## 添加一个文本框和一个 Button Shape 6 | 7 | ![image](images/conditionsvv1.png) 8 | 9 | ### 1 添加文本框和按钮 10 | 放置一个文本框部件和一个 Button Shape 部件到设计区域。 11 | 12 | ### 2 命名文本框 13 | 将文本框命名为 UserNameTextField。 14 | 15 | ### 3 编辑文本和命名按钮 16 | 编辑 Button Shape 文本读作 Log In。然后标注它为 LogInButton。 17 | 18 | ### 4 为 Button Shape 编辑 OnClick 19 | 选择 LogInButton，双击它的 OnClick 事件打开“编辑器” 20 | 21 | ## 添加一个条件去检查文本框是否为空 22 | 23 | ![image](images/conditionsvv2.png) 24 | 25 | ### 1 点击添加条件选项 26 | 点击“添加条件”右边的“名称”字段来打开“条件生成器”。 27 | 28 | ### 2 设置条件的值 29 | 匹配每个字段的值： 30 | 31 | “length of widget value” 32 | “UserNameTextField” 33 | “does not equal” 34 | “value” 35 | 36 | 最后字段保留空白。 37 | 38 | ### 3 点击 OK 39 | 点击 OK 按钮返回“编辑器”。 40 | 41 | 42 | ## 将文本框的值设置为 ONLOADVARIABLE 43 | 44 | ![image](images/conditionsvv3.png) 45 | 46 | ### 1 添加设置变量动作 47 | 在“编辑器”中，添加动作到“设置变量值”。 48 | 49 | ### 2 选择 OnLoad Variable 50 | 勾选 OnLoadVariable 的复选框。 51 | 52 | ### 3 设置 OnLoad Variable 53 | 匹配每个字段的值： 54 | “text on widget” 55 | “UserNameTextField” 56 | 57 | ### 4 不要点击 OK 58 | 我们还没完成这个案件。我们将在下一步添加第二个动作。 59 | 60 | ## 打开页面 1 添加动作 61 | 62 | ![image](images/conditionsvv4.png) 63 | 64 | ### 1 为 Open Link 添加动作 65 | 同一案件中通过点击“打开链接”添加另一个动作。 66 | 67 | ### 2 选择“页面 1” 68 | 选择“页面 1”，作为链接的目的地 69 | 70 | ### 3 点击 OK 71 | 点击 OK 按钮确认这个案件的所有改变。 72 | 73 | ## 当文本框为空时添加第二个案件 74 | 75 | ![image](images/conditionsvv5-1.png) 76 | 77 | ![image](images/conditionsvv5-2.png) 78 | 79 | ### 1 添加第二个案件 80 | 选择 LogInButton 再一次双击 OnClick 事件。这个将打开“编辑器”的“案例 2”。 81 | 82 | ### 2 为 Open Link 添加动作 83 | 为“打开链接”添加动作。 84 | 85 | ### 3 指定页面 2 86 | 选择“页面 2”，作为链接的目的地。 87 | 88 | ### 4 点击 OK 89 | 点击 OK 按钮确认这个案件的所有改变。 90 | 91 | 92 | ## 添加一个矩形到页面 1 93 | 94 | ![image](images/conditionsvv6.png) 95 | 96 | ### 1 打开页面 1 97 | 双击站点地图中的“页面 1”在设计区域打开它。 98 | 99 | ### 2 添加矩形部件 100 | 在页面 1 中添加一个矩形部件 101 | 102 | ### 3 标注矩形 103 | 标注矩形为 WelcomeMessage。 104 | 105 | ### 4 添加一个案件到 OnPageLoad 106 | 双击“页面交互”选项卡中的 OnPageLoad 事件。 107 | 108 | ## 当页面加载时设置矩形的文本 109 | 110 | ![image](images/conditionsvv7.png) 111 | 112 | ### 1 添加设置文本操作 113 | 选择“设置文本”操作。 114 | 115 | ### 2 选择 WelcomeMessage 116 | 选择 WelcomeMessage 部件。 117 | 118 | ### 3 点击函数按钮 119 | 点击“fx”按钮打开“编辑文本”对话框。 120 | 121 | 122 | ## 将 ONLOADVARIABLE 放进欢迎信息中 123 | 124 | ![image](images/conditionsvv8.png) 125 | 126 | ### 1 输入欢迎文本 127 | 输入文本 Welcome。包括逗号和空格。 128 | 129 | ### 2 在下拉列表框中选择 OnLoadVariable 130 | 点击“插入变量或函数...”打开下拉列表框。选择 OnLoadVariable 在文本中插入 [OnLoadVariable]. 131 | 132 | ### 3 点击所有的 OK 按钮 133 | 点击所有打开的对话框中的 OK 按钮。 134 | 135 | ## 预览原型 136 | 137 | 导航回到主页和预览你的原型。首先文本框保留空白，然后点击“登陆”按钮。因为文本框是空白的，所以你会链接页面 2。使用站点地图回到主页。这一次，在空白的文本框中输入你的名字然后点击“登陆”按钮。你将链接到页面 1 然后会看到你的名字在欢迎信息里面。 -------------------------------------------------------------------------------- /custom-tooltip.md: -------------------------------------------------------------------------------- 1 | # 用户自定义 Tooltip 2 | 3 | ## 将图片隐藏 4 | 5 | ![image](images/customtooltip1.png) 6 | 7 | 首先打开[AxureCustomTooltip.rp](/downloads/AxureCustomTooltip.rp) 然后打开 Custom Tooltip 页面。 8 | 9 | 一般地，我们想让 Tooltip 隐藏起来，所以在 Style 选项板中选中 Hidden 选项。 10 | 11 | ## 使用 OnMouseEnter 来显示面板 12 | 13 | ![image](images/customtooltip2.png) 14 | 15 | 选中 UX Man 图片然后双击 interactions 选项板中的 OnMouseEnter 选项。 16 | 17 | ## 添加显示动作 18 | 19 | ![image](images/customtooltip2.png) 20 | 21 | 在事例编辑器中，选中 Show 然后检查 Tooltip 的图片。 22 | 23 | ## 在更多选项中选中 Treat as Flyout 24 | 25 | ![image](images/customtooltip2.png) 26 | 27 | 在 More Options 的下拉列表中选中 Treat as Flyout。 28 | 29 | 预览原型然后测试。 30 | -------------------------------------------------------------------------------- /downloads/Axure Bike Pics.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/Axure Bike Pics.zip -------------------------------------------------------------------------------- /downloads/AxureAccordionControl.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureAccordionControl.rp -------------------------------------------------------------------------------- /downloads/AxureAccountLogin.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureAccountLogin.rp -------------------------------------------------------------------------------- /downloads/AxureAdaptiveTutorial.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureAdaptiveTutorial.zip -------------------------------------------------------------------------------- /downloads/AxureAutoRotatingBanner.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureAutoRotatingBanner.rp -------------------------------------------------------------------------------- /downloads/AxureAutoTab.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureAutoTab.rp -------------------------------------------------------------------------------- /downloads/AxureCustomTooltip.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureCustomTooltip.rp -------------------------------------------------------------------------------- /downloads/AxureDragAndDropImages.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureDragAndDropImages.rp -------------------------------------------------------------------------------- /downloads/AxureDraggableMap.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureDraggableMap.rp -------------------------------------------------------------------------------- /downloads/AxureDroplistSelection.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureDroplistSelection.rp -------------------------------------------------------------------------------- /downloads/AxureEcommerce.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureEcommerce.zip -------------------------------------------------------------------------------- /downloads/AxureFlyoutMenu.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureFlyoutMenu.rp -------------------------------------------------------------------------------- /downloads/AxureInteractiveButton.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureInteractiveButton.rp -------------------------------------------------------------------------------- /downloads/AxureLightboxTutorial.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureLightboxTutorial.rp -------------------------------------------------------------------------------- /downloads/AxureMobileWeb.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureMobileWeb.zip -------------------------------------------------------------------------------- /downloads/AxureNavigationMenu.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureNavigationMenu.rp -------------------------------------------------------------------------------- /downloads/AxurePassTextToNextPage.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxurePassTextToNextPage.rp -------------------------------------------------------------------------------- /downloads/AxurePhotoCarousel.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxurePhotoCarousel.rp -------------------------------------------------------------------------------- /downloads/AxurePreviousNextButtons.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxurePreviousNextButtons.rp -------------------------------------------------------------------------------- /downloads/AxureRepeaterTutorial.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureRepeaterTutorial.rp -------------------------------------------------------------------------------- /downloads/AxureRequiredFields.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureRequiredFields.rp -------------------------------------------------------------------------------- /downloads/AxureSetPanelOnNextPage.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureSetPanelOnNextPage.rp -------------------------------------------------------------------------------- /downloads/AxureSettingTextOnDroplistSelection.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureSettingTextOnDroplistSelection.rp -------------------------------------------------------------------------------- /downloads/AxureShowHiddenWidget.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureShowHiddenWidget.rp -------------------------------------------------------------------------------- /downloads/AxureTabControl.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureTabControl.rp -------------------------------------------------------------------------------- /downloads/AxureTermsAndConditions.rp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureTermsAndConditions.rp -------------------------------------------------------------------------------- /downloads/AxureWebsite.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureWebsite.zip -------------------------------------------------------------------------------- /downloads/AxureiPhoneAppResources.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightlz/axure/ede480554dddd65f43c3255f10d0be532ca30e95/downloads/AxureiPhoneAppResources.zip -------------------------------------------------------------------------------- /drag-and-drop-image.md: -------------------------------------------------------------------------------- 1 | # 图像的拖拽交互 2 | 3 | ## 将图片部件装换成动态面板 4 | 5 | ![image](images/draganddropimage1.png) 6 | 7 | 首先打开[AxureDragAndDropImages.rp](downloads/AxureDragAndDropImages.rp) 然后打开 Drag and Drop Images 页面。 8 | 9 | 在设计区域选中第一张图片的缩略图。先右键单击图片在弹出的菜单中选中 Convert to Dynamic Panel，这样就可以让其可拖拽。 10 | 11 | 将这个面板标记为 Batch1。 12 | 13 | ## 添加 OnDrag 事例到 Move with drag 14 | 15 | ![image](images/draganddropimage2.png) 16 | 17 | 为了拖动图片，通过一个动作添加一个事例到 OnDrag 事件然后指定到 Batch1 面板。一般地，这个移动动作被设置到 Move Batch1 with drag，点击 OK 关闭事例编辑器。 18 | 19 | ## 添加 OnDragStart 事例 20 | 21 | ![image](images/draganddropimage3.png) 22 | 23 | 当用户拖动图片时，我们想要设置图片有一个状态可以显示下面的信息， Drop an image here to remove it from the batch. 24 | 25 | 在拖动开始时我们想设置这个面板，所以通过设置 Set Panel State 添加一个事例到 Batch1 的 OnDragStart 事件。指定图像带面板和删除的状态。单击 OK 关闭编辑器。 OnDragStart 案例添加应该类似于上面的截图。 26 | 27 | ## 添加条件到 OnDragDrop 和 事例 1 28 | 29 | ![image](images/draganddropimage4.png) 30 | 31 | 当你拖动图片进入页面时，你展现的交互效果取决于你的拖动方式。 32 | 33 | 在第一个条件中，我们想检查是否是拖动图像的顶部带区域，我们添加一个事例到 OnDragDrop 事件，点击 34 | Add Condition 然后添加条件 “If area of widget Batch1 is over area of widget Image Strip”。 35 | 点击 OK 关闭 Condition Builder 。 36 | 37 | ## 隐藏某批次的图片 38 | 39 | ![image](images/draganddropimage5.png) 40 | 41 | 当图片拖进 Image Strip 区域时，我们想将其从批次中移除，所以在事例编辑器中，选中 Batch1 面板的 Hide 选项，然后添加一个平淡的动画。 42 | 43 | ## 设置 Image Strip 返回默认状态 44 | 45 | ![image](images/draganddropimage6.png) 46 | 47 | 设置 Image Strip 的默认状态，打开事例编辑器，选中 Image Strip 面板的 Set Panel State 设置默认状态。 48 | 49 | 测试原型，当你拖动第一个图片进入 Image Strip 时，图片将会渐渐淡出，而 Image Strip 将会恢复默认状态。 50 | 51 | ## 添加第二条件到 OnDragDrop 事件 52 | 53 | ![image](images/draganddropimage7.png) 54 | 55 | 现在我们另一个条件是如果图片从 Image Strip 被拖动到其他区域。 56 | 57 | 在 Batch1 面板中，通过添加动作 Move Batch1 to x,y before drag 第二事例到 OnDragDrop 事件中。 58 | 59 | ## 设置 Image Strip 返回默认状态 60 | 61 | ![image](images/draganddropimage8.png) 62 | 63 | 除了移动图像回到原来的位置，我们也要设置 Image Strip 返回默认状态。所以我们要添加第二个动作 Set Image Strip state to Default State 到这个事例中去 64 | 65 | 当这个事例符合第一个条件时，这个事例被自动这是为 Else If True。 66 | 67 | 预览这个原型然后测试他。当你拖动图片缩略图到其他区域而不是 Image Strip 时，他将回到之前的位置，然后 Image Strip 会返回到默认的状态。 68 | -------------------------------------------------------------------------------- /draggable-map.md: -------------------------------------------------------------------------------- 1 | # 拖拽地图使用嵌套的动态面板和 OnDrag 2 | 3 | ## 创建动态面板的 window 4 | 5 | ![image](images/draggablemap1.png) 6 | 7 | 首先打开[AxureDraggableMap.rp](/downloads/AxureDraggableMap.rp) 然后打开 Draggable Map。 8 | 9 | 因为我们不想让整个地图显示在显示屏上,我们将创建一个类似 window 的部件，这个部件给了我们一个可以查看部分地图的视图。要做到这一点,在设计区域选择谷歌地图,右键单击并选择转换为动态面板。 10 | 11 | 将其标记为 MapWindow。 12 | 13 | ## 调整 MapWindow 面板 14 | 15 | ![image](images/draggablemap2.png) 16 | 17 | 接下来,重新定位 MapWindow 面板到灰色的长方形顶部。调整矩形内的面板,看起来像上边的图像。 18 | 19 | ## 重新定位地图面板内的状态 20 | 21 | ![image](images/draggablemap3.png) 22 | 23 | 我们想要红色的地图图像中标记在地图的中间,让我们重新定位 MapWindow 面板内的地图状态。 24 | 25 | 打开 MapWindow 面板的 State1。复位地图位置，让红色的地图标记大概在动态面板的中间。部分地图可能会超出边框，但这没关系。 26 | 27 | 返回 Draggable Map 页面然后检查线框是否在你想要的地方。 28 | 29 | ## 将地图装换为动态面板 30 | 31 | ![image](images/draggablemap4.png) 32 | 33 | 现在我们为地图创建一个窗口，让其可以被拖拽。为了做到这些，我们将地图装换为动态面板。再次打开 MapWindow 的 State1，右键单击图片然后选中 Convert to Dynamic Panel 选项创建另一个动态面板。 34 | 35 | 编辑这个面板为 MapContent。你现在会注意到这个面板嵌套在 MapWindow 中。 36 | 37 | ## 添加 drag 动作 38 | 39 | ![image](images/draggablemap5.png) 40 | 41 | 在 MapWindow 面板中，添加一个事例到 OnDrag 事件中去。在动作菜单中，选中 Move 然后指定到 MapContent 面板。一般地，现在可以拖动面板了。点击 OK 关闭事例编辑器。 42 | 43 | ## 添加交互来重置地图 44 | 45 | ![image](images/draggablemap6.png) 46 | 47 | 返回 Draggable Map 页面。选中 Reset Map 链接，然后通过动作 Move MapContent to (-530, -135) 添加一个 OnClick 事例，大概是原来的位置。 48 | 49 | 然后这就是原型了，测试它吧。 50 | -------------------------------------------------------------------------------- /droplist-selection.md: -------------------------------------------------------------------------------- 1 | 2 | # 条件逻辑：下拉列表选择教程 3 | 4 | ## 下拉列表交互 5 | 6 | ### 添加 OnSelectionChange Case 7 | 8 | ![image](images/advanced-droplist-selection-tutorial1.png) 9 | 10 | 首先，打开[AxureDroplistSelection.rp](downloads/AxureDroplistSelection.rp) 和打开“下拉列表选择”页面。 11 | 选择下拉列表并添加 OnSelectionChange Case。在 Case 编辑器中，单击添加条件打开条件生成器。 12 | 13 | ### 构建“没有条件” 14 | 15 | ![image](images/advanced-droplist-selection-tutorial2.png) 16 | 17 | 条件生成器的默认值恰好是我们所需要的。条件应该读为<如果所选选项的动态面板的值为"没有" >。 18 | 单击OK，并关闭条件生成器。 19 | 20 | ### 添加动作来设置面板的状态 21 | 22 | ![image](images/advanced-droplist-selection-tutorial3.png) 23 | 24 | 在 Case 编辑器中，单击“设置面板状态”并勾选动态面板复选框。 25 | “没有”状态将被默认选中。 26 | 单击OK，并关闭 Case 编辑器。 27 | 28 | ### 重复步骤为小狗和小猫设置状态 29 | 30 | ![image](images/advanced-droplist-selection-tutorial4.png) 31 | 32 | 重复步骤1到3为小狗和小猫设置下拉列表 items。 33 | 第二个和第三个 Case 应该为“小狗”和“猫”设置条件，并相应地设置面板的状态。 34 | 35 | ### 添加最后的“如果其他” Case 36 | 37 | ![image](images/advanced-droplist-selection-tutorial5.png) 38 | 39 | 双击 OnChange 添加第四个4 Case，但这一次不添加任何条件。我们已经为4个有用的下拉列表项目设置了3个条件，所以如果以上3个条件都没有满足最后一个 Case 的条件将会自动生成。添加一个动作到第四个 Case ，来为金鱼设置动态面板的状态。 40 | 41 | ### 预览的原型 42 | 43 | ![image](images/advanced-droplist-selection-tutorial6.png) 44 | 45 | 就是它了！预览原型和测试它吧。 46 | 47 | ##总结 48 | 49 | 现在你可以执行操作了，当一个图片在下拉列表中被选中的时候。 50 | 还需要其他帮助吗？查看[论坛](http://www.axure.com/c/forum.php)或联系我们 **support@axure.com** 51 | -------------------------------------------------------------------------------- /dynamic-panels.md: -------------------------------------------------------------------------------- 1 | # 引入动态面板 2 | 3 | 使用“动态面板”创建一个简单的图像旋转。首先将图像小部件放置在每个面板的状态。然后，添加一个交互 Button Shape 使状态能够生动起来。 4 | 5 | ## 添加一张图片和一个 Button Shape 6 | 7 | [下载“AxureBikePics.zip”](downloads/AxureBikePics.zip)并解压缩文件夹的图片在你的计算机上。如果你喜欢你可以用自己的图像。 8 | 9 | ![images](images/introducingdynamicpanels1.png) 10 | 11 | ### 1 下载和解压 12 | 下载 AxureBikePics.zip 并解压文件夹到你的计算机上。 13 | 14 | ### 2 添加部件 15 | 拖放一个图像部件和一个 Button Shape 部件到设计区域如图所示。s 16 | 17 | ### 3 选择图片 18 | 双击图像部件选择第一张图片 BlueBike1。 19 | 20 | ### 4 点击打开 21 | 点击“打开”使用图片。 22 | 23 | 当询问是否自动调整大小时，点击“是”。 24 | 25 | ### 5 在按钮上编辑文本 26 | 在 Button Shape 上编辑文本读作 Next。 27 | 28 | ## 转换到动态面板和添加状态 29 | 30 | ![images](images/introducingdynamicpanels2.png) 31 | 32 | ### 1 转换为动态面板 33 | 右键单击图像部件并选择“转换为动态面板”。 34 | 35 | ### 2 命名动态面板 36 | 命名新的动态面板为 DynamicPanel。 37 | 38 | ### 3 复制第一个状态 39 | 在“部件管理器”窗口，选择 State1 并点击“复制状态”图标两次。 40 | 41 | ### 4 标注每个状态 42 | 轻轻双击标注三个状态 BikeLeft，BikeMiddle 和 BikeRight。 43 | 44 | ## 为每一种状态添加一张图片 45 | 46 | ![images](images/introducingdynamicpanels3.png) 47 | 48 | ### 1 打开状态 BikeMiddle 49 | 在“部件管理器”窗口双击“BikeMiddle”状态让它显示在设计区域。 50 | 51 | ### 2 输入图像 52 | 双击图像部件导入第二张图像。 53 | 54 | ### 3 点击打开 55 | 点击“打开”使用图片。 56 | 57 | 当询问是否自动调整大小时，点击“是”。 58 | 59 | ### 4 对 BikeRight 重复上述步骤 60 | 重复步骤1-3将第三张图片放到 BikeRight 状态。 61 | 62 | ## 通过点击 Next 在面板显示下一个状态 63 | 64 | ![images](images/introducingdynamicpanels4.png) 65 | 66 | ### 1 选择 Next 按钮 67 | 在主页上选择“Next” Button Shape 部件。 68 | 69 | ### 2 添加一个 Case 到 OnClick 70 | 双击 OnClick 事件为 Button Shape 添加一个案件。 71 | 72 | ### 3 添加动作 73 | 在最左边列表选择动作“设置面板状态”。 74 | 75 | ### 4 指定面板和选项 76 | 选择 DynamicPanel 和如图所示为动作匹配选项。 77 | 78 | ### 5 点击 OK 79 | 点击 OK 按钮添加动作 80 | 81 | ## 预览原型 82 | 83 | 预览你的原型。单击 Next 按钮推动图像。当你到达第三张图片时它将绕回第一张图片。 84 | -------------------------------------------------------------------------------- /ecommerce-website.md: -------------------------------------------------------------------------------- 1 | #从头构建一个电子商务网站 2 | 3 | ## 介绍 4 | 5 | 本教程引导您一步一步来构建一个电子商务网站的原型，将会使用的许多 Axure RP 原型的核心特性，包括 Masters 和动态面板。我们将从头开始创建整个样本。 6 | 7 | ## 让我们开始吧 8 | 9 | 首先，下载[AxureEcommerce.zip](/downloads/AxureEcommerce.zip)并解压缩到你的电脑。然后，启动 Axure RP 和保存一个新文件作为电子商务原型。rp 使用文件 > 另存为。 10 | 11 | 12 | ## 创建一个 Header Master 13 | 14 | ### 创建一个 Master 15 | 16 | ![image](images/ecommerce1.png) 17 | 18 | 第一步是构建一个 header，用来放置 logo 和导航。因为我们需要在多个页面中使用这个 header，所以我们将它新建成 master。 19 | 20 | 在 Masters 面板中，单击添加按钮。然后缓慢双击新 masters 改名为 Header。 21 | 22 | ![image](images/ecommerce2.png) 23 | 24 | 双击 Header Master 开始编辑。你可以通过查看设计区域顶部的选项卡来看看哪个 master 或者页面正在被编辑。 25 | 26 | 如果它指示的是 Header，说明你在正确的位置。 27 | 28 | 29 | ### 添加一个 logo image 30 | 31 | ![image](images/ecommerce3.png) 32 | 33 | 拖出一个 image 部件到设计区域。双击导入你的 logo。从压缩包文件的 images 文件夹中选择 logo.png 图片。 34 | 35 | 当被问及是否要按照图片大小加载，选择 Yes。这将使用实际尺寸的图片，而不是当前图像部件的大小。 36 | 37 | 38 | ### 添加按钮作为导航 39 | 40 | ![image](images/ecommerce4.png) 41 | 42 | 接下来，我们将在图标下添加3个 Button Shape 小部件。 43 | 44 | 在小部件窗格中，向下滚动找到 Button Shape 部件(不是按钮部件)。将3个按钮形状部件拖到设计区域。双击每一个更改文本。分别改为“男性”，“女性”，“出售”。 45 | 46 | 要使边界颜色变成白色，可以选择所有的按钮形状(单击并拖动创建一个选择按钮区域)，并通过上方的工具栏设置 Line Color 为白色。 47 | 48 | 49 | ### 添加一条水平线 50 | 51 | ![image](images/ecommerce5.png) 52 | 53 | 让我们添加一条水平线，来分离的标题下面的内容。 54 | 55 | 将一个 Horizontal Line 小部件拖到设计区域。可以通过拖动水平线的左边或者右边的小白点来调整长度。然后通过编辑模式和颜色工具栏的按钮，使水平线变成一条蓝色的虚线。 56 | 57 | 58 | ### 添加 Header 到主页 59 | 60 | ![image](images/ecommerce6.png) 61 | 62 | 将 Header master 从 Masters 面板拖动到设计区域，即可将它添加到 主页面中。将它放到坐标为（200，50）的位置。 63 | 64 | 默认情况下， masters 有一个粉红色的底色。你可以关掉，使用 View > Mask Masters。 65 | 66 | ## 创建产品缩略图和 QUICK VIEW 按钮 67 | 68 | ### 添加产品缩略图 69 | 70 | ![image](images/ecommerce7.png) 71 | 72 | 在主页上，将一个图像小部件拖到设计区域，并将它放在 header 下方。 73 | 74 | 双击它，导入 Jeans1-1.png。添加第二个图片，导入 jeans2-1.png。 75 | 76 | 按住 shift 键并拖动图像的角部，拉伸图片到是 150px 宽，225px 高。 77 | 78 | ### 添加 Quick View 按钮 79 | 80 | ![image](images/ecommerce8.png) 81 | 82 | 拖动一个 button shape 到第一款产品图片上。双击并改变文字为 Quick View。 83 | 84 | ### 标注并隐藏 Quick View button 85 | 86 | ![image](images/ecommerce9.png) 87 | 88 | 我们希望当鼠标在图像上时，Quick View 按钮才显示，所以将其设置为默认隐藏。 89 | 90 | 通过在样式选项卡中勾选 Hidden，然后小部件将会变黄。 91 | 92 | ### 动态显示按钮 93 | 94 | ![image](images/ecommerce10.png) 95 | 96 | 为了当鼠标在产品的图片上，Quick View 按钮才出现，我们将使用 OnMouseEnter 事件。 97 | 98 | 点击产品图片。在小部件属性的交互选项卡窗格中添加一个案件 OnMouseEnter 通过双击 OnMouseEnter(见上图)。这将会打开编辑器。 99 | 100 | ### 添加 ShowQuickViewButton 101 | 102 | ![image](images/ecommerce11.png) 103 | 104 | 在左侧面板中，单击 Show。然后在右侧面板中，单击 QuickViewButton 复选框。最后，从下拉框的 More Options 选择 Treat as Flyout。单击OK。 105 | 106 | 让我们使用工具栏上的预览图标预览原型。移动鼠标到产品上方，Quick View 按钮就要显示，但是只要它显示过就不能被隐藏。 107 | 108 | ## 产品详细信息弹出窗口和幻灯片 109 | 110 | ### 创建产品详细信息弹出窗口 111 | 112 | ![image](images/ecommerce12.png) 113 | 114 | 在所有内容的下面，添加一个 rectangle 部件到设计区域。然后，调整为大小为 600 x 450 的矩形。 115 | 116 | 右键单击矩形并选择 Convert to Dynamic panel。这种动态面板标注 ProductPopup。 117 | 118 | ### 添加产品大图 119 | 120 | ![image](images/ecommerce13.png) 121 | 122 | 在这一步中，我们将会添加一个产品图片的幻灯片，当你点击缩略图后它会通过动画展示出来。 123 | 124 | 首先，双击打开 ProductPopup 的 State1 。拖动图像小部件和双击导入 jeans1-1.png。将这张照片放在在左上角的地方。 125 | 126 | ### 将图像转换为动态面板 127 | 128 | ![image](images/ecommerce14.png) 129 | 130 | 在图像上单击右键并选择 Convert to Dynamic Panel。标注这个面板为 ProductSlideshow。 131 | 我们一共有3个 states，在小部件管理器中选择 state1 ，然后单击 Duolicate State 两次来创建3个 states。 132 | 133 | ### 插入 Jeans-2 和 Jeans-3 states 134 | 135 | ![image](images/ecommerce15.png) 136 | 137 | 打开 state2，通过双击图像将 Jeans-1 图像换为 Jeans-2 图像。为 state3 做同样的事情，每个状态都有不同的 Jeans 图片。 138 | 139 | ### 添加产品图片缩略图 140 | 141 | ![image](images/ecommerce16.png) 142 | 143 | 拖入3张图像小部件作为缩略图，导入 Jeans1-1、Jeans1-2，Jeans1-3。拖动调整图像大小，按住 Shift 键来保持图像的宽高比。 144 | 145 | ### 添加 OnClick 事件到缩略图 146 | 147 | ![image](images/ecommerce17.png) 148 | 149 | 选择最左边的缩略图，双击 OnClick 事件。在编辑器中，选择 Set Panel State 操作和选择 ProductSlideshow 面板。 150 | 在 Select the State 下拉框中，选择 state1，然后选择消失的动画为渐入和渐出。单击OK。 151 | 152 | ### 复制/粘贴 case 到缩略图2 & 3 153 | 154 | ![image](images/ecommerce18.png) 155 | 156 | 从第一缩略图到第二和第三依次复制和粘贴新的 case。双击粘贴 case，让第二个缩略图的面板 state 为 State2，然后为 State3 做同样的事情。 157 | 158 | 预览您的原型。点击缩略图应该得到面板状态相关的牛仔图片。 159 | 160 | ## 加入购物车 161 | 162 | ### 创建添加到购物车按钮 163 | 164 | ![image](images/ecommerce19.png) 165 | 166 | 拖动一个 button shape 部件到弹出窗口的右下角。使用工具栏给它填充蓝色和白色字体。改变文本为 Add to cart。 167 | 168 | ### 创建购物车消息弹出面板 169 | 170 | ![image](images/ecommerce20.png) 171 | 172 | 现在我们将创建 Processing 和 Added 信息，它们将会点击 Add to Cart 的时候显示。 173 | 174 | 拖动一个 rectangle 到弹出框的中间。让它变成浅灰色和黑色的字体。输入文本为“处理中…”。 175 | 176 | 右键单击并选择[Convert to Dynamic Panel]。使用复选框的样式选项卡设置面板隐藏。 177 | 178 | ### 导入 Added to Cart 状态 179 | 180 | ![image](images/ecommerce21.png) 181 | 182 | 标注动态面板为 MessagesPopup 和第一个 state 为 Processing。 183 | 184 | 当 Processing state 被选中时，点击 Duplicate State 图标添加第二个 state。并标注它为 AddedToCart。 185 | 186 | ### 创建 Added to cart 消息 187 | 188 | ![image](images/ecommerce22.png) 189 | 190 | 打开 AddedtoCart 状态，当我们确定 item 已经被添加后，将 item 的颜色改为蓝色。双击并更改文本 Successfully added to Cart。 191 | 192 | ### 添加 Add to Cart 的交互 193 | 194 | ![image](images/ecommerce23.png) 195 | 196 | 单击 Add to Cart 按钮后，想要展示的 Processing 的信息和 added to cart 消息，然后隐藏。 197 | 198 | 回到 ProductPopup，并选择 added to cart 按钮。双击鼠标单击添加 case 并打开 case 编辑器。我们准备給这个 case 添加5个动作。 199 | 200 | 201 | ### 添加显示/隐藏的信息的操作 202 | 203 | ![image](images/ecommerce24.png) 204 | 205 | 1:设置面板 MessagesPopup 状态为 Processing。从动画的下拉框中选择 fade。注意，设置面板状态为自动显示面板，所以我们不需要添加一个显示面板操作。 206 | 207 | 2:等待 1000ms。这设置第一个面板和第二个面板之间间隔时间。1000毫秒 = 1秒。 208 | 209 | ### 改变MessagePopup面板状态 210 | 211 | ![image](images/ecommerce25.png) 212 | 213 | 3:设置面板 AddedtoCart 状态。在这个动作我们设置 MessagesPopup 面板从 Processing 状态到 AddedtoCart 状态。单击MessagesPopup 复选框，并选择下拉 AddedtoCart 状态下的复选框。 214 | 215 | 4:等待1000 ms(再一次)。 216 | 217 | ### 添加隐藏面板交互 218 | 219 | ![image](images/ecommerce26.png) 220 | 221 | 5:隐藏面板。单击 MessagesPopup 复选框并选择 fade 动画。 222 | 223 | 单击OK。预览您的原型和测试。这将是我们电子商务的新手介绍的最后一部分。 224 | 225 | 226 | ## 隐藏/显示产品信息 227 | 228 | ### 添加关闭 ProductPopup 按钮 229 | 230 | ![image](images/ecommerce27.png) 231 | 232 | 接下来，我们将給 ProductPopup 添加一个关闭按钮。 233 | 234 | 添加一个 placeholder 到动态面板的右上角。调整其大小 40×40。(提示:您可以在工具栏中编辑大小)。 235 | 236 | 給 placeholder 添加一个 Hide 操作的 Onclick 事件，让 ProductPopup 隐藏。 237 | 238 | 239 | ### 设置 ProductPopup 隐藏 240 | 241 | ![image](images/ecommerce28.png) 242 | 243 | 当点击 Quick View 的时候，这个面板将会被隐藏。右键单击面板，选择设置“隐藏”。 244 | 245 | ### 浏览器定位 246 | 247 | ![image](images/ecommerce29.png) 248 | 249 | 选中隐藏的动态面板，在 Properties 选项卡里面选择 Pin to Browser。选择 Center 和 Middle，然后单击 OK。 250 | 251 | ### 添加 Quick View 显示面板 252 | 253 | ![image](images/ecommerce30.png) 254 | 255 | 现在，我们准备添加 Quick View 按钮的交互事件，当点击的时候用来显示ProductPopup。 256 | 257 | 选择 Quick View 按钮，添加一个 Show Panel 的点击事件来显示 ProductPopup。然后从更多选项中选择 Treat as Lightbox。 258 | 259 | 预览您的原型和测试。这是我们給新手带来的电子商务介绍的最后部分，恭喜! 260 | 261 | -------------------------------------------------------------------------------- /embed-video-and-maps.md: -------------------------------------------------------------------------------- 1 | # WEB 设计教学与训练文档之嵌入式视频和地图教程 2 | 3 | ## 关于内联框架（浮动框架、页内框架，内嵌框架） 4 | 5 | 内联框架（inline frames）可以用来为你的原型添加任意外部 HTML 内容，但他们用于嵌入外站视频（例如 YouTube、Vimeo 等）或者在线地图（例如谷歌地图）时显得特别有用。其中最难的地方也不过是如何从这些外站获取目标 URL 而已。一个嵌入式视频和地图的示例工程可以在 [AxureWebsite.zip](downloads/AxureWebsite.zip) 内找到，双击内联框架就能看见其目标 URL。 6 | 7 | ## 常用的内联框架嵌入式媒体 8 | 9 | ### 嵌入式视频 10 | 11 | ![](images/web-design-tutorials-embed-video-and-maps-1.png) 12 | 13 | 大多数像 Vimeo、YouTube 这类的视频托管服务都会允许你通过他们提供的嵌入码（embed code）来将视频放在您的网页上。您可以将那些嵌入码内的 URL 放进内联框架小部件中，将其嵌入原型内。 14 | 15 | ### 嵌入式地图 16 | 17 | ![](images/web-design-tutorials-embed-video-and-maps-2.png) 18 | 19 | 你可以通过内联框架小部件将谷歌地图直接被嵌入到您的网页原型中。在谷歌地图界面中，点击页面底部的齿轮图标，选择“分享并嵌入地图”选项，切换到“嵌入地图”选项，然后将嵌入码复制下来，提取里面的 URL 并将其载入到内联框架小部件中。 20 | 21 | ## 详细逐步示例 22 | 23 | ### 去目标视频或者地图的地址 24 | 25 | ![](images/web-design-tutorials-embed-video-and-maps-3.png) 26 | 27 | 首先，打开 [AxureWebsite.zip](downloads/AxureWebsite.zip) 里面的 Website-InlineFrame.rp，然后打开 Build Your Own 页面。 28 | 29 | 访问你想要嵌入到原型中的目标视频或者地图站点。 30 | 31 | ### 点击“分享”或者“超链接” 32 | 33 | ![](images/web-design-tutorials-embed-video-and-maps-4.png) 34 | 35 | 为了得到 iframe 嵌入码，你需要先找到并点击相应的分享/嵌入码/超链接按钮。例如在谷歌地图中，那个按钮是一个超链接图标。 36 | 37 | ### 复制 iframe 嵌入码 38 | 39 | ![](images/web-design-tutorials-embed-video-and-maps-5.png) 40 | 41 | 您也许还需要点击多一些按钮（例如在上图中的 “Embed”）来获得代码。你所需要的代码应以 `