1 Overview
Prototyping is the first element of application development design. Good prototyping can not only serve the purpose of communication, but also have a more intuitive representation of the application to the customer. Prototype design enables users to interact with products in the early stage of development through content and structure display and interface layout arrangement. Improving the user's recognition of the project is conducive to the advancement of the project. Let me introduce a prototyping tool - Axure RP.
2 Explanation of terms
Axure RP : Axure RP is a professional rapid prototyping tool. Axure, on behalf of the United States Axure company; RP is the abbreviation of Rapid Prototyping, translated as rapid prototype.
3 Tool introduction
Axure RP is the flagship product of Axure Software Solution in the United States. It is a professional rapid prototyping tool. Experts responsible for defining requirements and specifications, designing functions and interfaces can quickly create wireframes, flowcharts, prototypes and specifications of application software or Web sites. Documentation. As a professional prototyping tool, it can create prototypes quickly and efficiently, while supporting multi-person collaborative design and version control management.
3.1 Scope of application
Axure's visual work environment lets you quickly and easily create annotated wireframes with the mouse. Simple connections and advanced interactions can be defined on wireframes without programming. On the basis of wireframes, HTML (an application under the standard Universal Markup Language) prototype and specifications in Word format can be automatically generated.
The users of Axure RP mainly include business analysts, information architects, usability experts, product managers, IT consultants, user experience designers, interaction designers, interface designers, etc. In addition, architects and program development engineers are also using Axure.
3.2 Common functions
In general, the software interface of Axure can be divided into 9 major modules
- Menu bar: Like most software interfaces, there are some regular files, editors, views, etc.
- Toolbar: It is some shortcut operations for page editing, mainly including font settings, size settings, page display size and some shortcut operations that come with Axure itself.
- Sitemap: a tree structure, you can add, delete pages, and rename the pages in the design.
- Component area : Component concentration area: rectangle component, picture component, dynamic panel component... The way to use it is to directly drag the component to the page editing area.
- Master area: shared, multiplexed.
- Page editing area: drag related components for wireframe editing and interactive implementation.
- Page interaction area: Set page properties and interaction styles.
- Component property area : component gaze, component interaction, component property editing.
- Dynamic panel area: Set the visibility and hiding of dynamic panels.
3.3 Environment Construction
Enter the https://www.axure.com.cn/ website, enter the Axure official website and click the download item, you can see the download link of Axure RP.
The installation package after downloading is as follows:
Double-click the installation package and the installation wizard will pop up
Click Next
Check "I agree" and click Next.
Select the installation path and click Next.
Click Next
Click Next
Remove the tick option of running, the English version is installed, and it needs to be Chinese, so don't run it first. Find a sinicization package on the Internet, the process of sinicization is available on the Internet, and I will not introduce it here. After the installation is complete, a shortcut will appear on the desktop, double-click to open the Axure RP software.
4 Sample explanation
4.1 Preliminary preparation
First of all, you need to prepare the materials for the prototype design, enter the website http://www.agileai.com, and download the pictures, logos, icons and texts you need to use on the official website of Shutongchanglian.
1. Open the Axure RP software, which has a similar layout to most design software and will not be introduced here. Click the project, select the page style editor, there are alignment and font options in the page style editor, debug the page to be displayed in the center, and the font selects Song.
2. 点击布置，选择网格和辅助线，根据需要进行调试。网格和辅助线对设计会起到辅助作用。
4.2 编辑图片
1. 先从数通畅联官网首页的顶部开始，在库里拖拽图片到设计区。
2. 双击图片，会让你选择文件，选择数通畅联logo。
3. 效果图如下：
按同样的方式继续搭建顶部。接下来遇到关于图片的操作都如上所述，就不再做讲解了。
4. 顶部设计好后点击预览按钮，就可在浏览器里预览效果了。
5. 预览效果如图：
6. 在页面处右键可以重命名，重命名后，在浏览器里预览时，会显示出页面名称。
4.3 导航菜单
1. 做导航，在库里选择菜单-水平，将其拖拽到设计区。
2. 默认是三个，点击右键可以新增菜单和子菜单。
3. 选中菜单，在右侧编辑区选择样式更改导航背景色和字体颜色。在编辑区上面可以给元件起名，建议采用英文命名，命名格式例如PasswordInput01或Password01，它的含义是序号01的密码输入框。格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读
4. 导航编辑完后为其添加鼠标移动效果，如图：
5. 点击预览，查看效果。
4.4 滚动字幕
1. 做导航下面的当前位置。在库里拖拽矩形到设计区，长度和导航一致。添加图标，在库里选择单行文本，输入“当前位置：”和“首页”。
2. 在“当前位置”的右侧是滚动的文字，是动态的，在库里选择动态面板，调整大小，放到右侧。
3. 双击动态面板，弹出动态面板状态管理。点击“+”新增状态。
4. 双击State1，进入编辑页面，如图：
5. 选择单行文本拖动到动态面板上，并输入内容。设置鼠标悬停时，字体颜色为红色。
6. 三个状态都编辑完成后，返回原编辑页，在编辑区里双击载入时。
7. 弹出编辑框，在编辑框里设置动态面板的动作。如图：
8. 点击预览，就能看到滚动的效果了。
4.5 轮播图片
1. 做轮播图，轮播图也是动态的，同样也需要动态面板。将动态面板拖动致设计区，调整位置和大小，并设置状态。然后在添加一个图片切换指示按钮，也是用动态面板，添加状态，在每个状态里显示不同的指示样式。如图：
2. 点击右侧编辑区里的载入时，设动画效果。设置的参数要和轮播的图片对应。设置参数如图：
3. 点击预览，查看效果。
接下来配置轮播图下面的内容，配置这些内容时用上面讲到的技术就可以了，就不做过多说明了。
4.6 返回顶部
在最下面有一个回到顶部的按钮，在库里找个矩形和一个箭头，按快捷键Ctrl+G，将其组合，然后右键，转换为动态面板。
2. 在库里在选择一个占位符，放到最顶端，透明度设置为0。
3. 选择返回顶部按钮，设置鼠标单击时的参数，如下图：
4. 点击确定，返回顶部按钮就设置完成了。
4.7 悬浮效果
做右侧的欢迎咨询，它是浮动在右侧的。按照欢迎咨询的样式编辑好后，转换为动态面板，选择固定到浏览器，设置参数如图：
2. 到这里，数通畅联官网首页的内容全部做完了，点击预览，就可以看到以假乱真的设计原型了。
4.8 生成文件
1. 预览没有问题后，点击发布按钮，生成html文件。
2. 弹出编辑框，选择生成路径，点击生成，就可以生成html文件了。
5 心得总结
原型设计是在项目的设计阶段进行的，原型设计对后期的项目开发启到了非常重要的作用，如果设计做的不到位，在开发阶段就会陷入困境。有一个好的原型设计，在和客户谈合作时也会启到非常好的效果，所以学会原型设计非常重要。
在这里只是简单的介绍了Axure RP工具的使用，它还有许多强大的功能，如果您感兴趣，可以到Axure RP官网进行学习。