Prototype is the initial form of a product, confirming the user's needs for the usability of the product interface and operating functions. A high fidelity prototype is close to the final form of the product, but still only a prototype. In simple terms, a product prototype is a general framework before the product design takes shape. For a website, it involves extensive layout and layout of page modules and elements, delving deeper, and adding interactive elements to make it more specific, vivid, and vivid.
Before carrying out the main page prototype design, designers generally need to understand the design requirements. If they play the role of requirement analysis or product analysis, the design process will be slightly simpler because they have already understood the entire process from user requirements to transforming into implementable requirements. Otherwise, at least the product manager needs to provide a list of functions to start the design, and it is best to participate in user demand research, In this way, it is not easy to have deviations in the understanding of requirements between designers and demand personnel during the design process, reducing some communication costs.
The advantages of using AxureRP for prototype design should be seen in many aspects, such as speed, interactivity, etc. Here, we mainly explain its application in the prototype design process by combining some of AxureRP's own functions. Borrowing someone else's image, this article mainly explains the three main steps involved in interaction design: designing an initial main page prototype, defining a page flowchart, and finally improving the prototype process.
1、 Main page prototype
My personal suggestion is to draw a sketch by hand before starting the design to confirm the understanding differences between the above mentioned and the requirements personnel. This sketch should have a rough outline, list the main functions, have a very rough page layout, and so on. In addition, in the early stage, there should not be too much visual design added because this is only an initialization plan, and there should be significant changes in the future, And visual effects should not be allowed to overshadow the interactive effects originally intended for demonstration; Furthermore, I believe that there are still differences between designers and professional artists. No matter how beautiful visual design is, in the later stage of art production, it may not be designed according to this style at all, which wastes time. It is better to save time on interactive design and design scheme analysis to achieve the optimal solution state.
After starting the design, it is important to pay attention to the reuse of duplicate pages. The template management (Master) function of AxureRP can meet the requirements, which is to create templates for a certain part of the page that are expected to be used on other pages in the future. The earlier you do this, the better, and it can save a lot of design time, such as page headers, footers, tags, ICON, etc. I have previously introduced the benefits of using template management, so I will not repeat it. If it's just a simple feature of two or three small pages, you can skip this feature. However, if the interaction on the page is complex and there are a large number of pages and elements, I personally recommend using template management function. Basically, if you are designing a website or a complete product, it will be quite complex. If you can introduce templates in the early stage, the design speed in the future will be greatly accelerated, And the structure of the page will also be more optimized, which can improve the page loading speed.
2、 Page Flowchart
After determining the main page, you can define the page process. The page flowchart is beneficial for showcasing one's ideas to everyone and also for organizing ideas. Please refer to the example provided in the previous introduction of the AxureRP case to illustrate the login registration function in a flowchart. Through the page flowchart, the interaction behavior of the page can be organized, and when presented to others, it is also easy to see at a glance how many steps are required.
The flow chart between pages can be generated automatically using the AxureRP site map panel's function of generating flow charts. To use this function, it is necessary to establish a hierarchical structure of the page at the beginning of the design. For example, there is usually a homepage, and below the homepage, it may be divided into several pages according to the main function module, and then establish their own functional sub pages under these pages, which is a three-layer structure, The structure of the automatically generated page flowchart will also be very clear, but the premise is to design the structure well, such as dividing it into levels based on pages and functions.
The flowchart of the page is more complex, involving business norms and requirements for certain operations. This requires designers to be familiar with user needs and also familiar with common operational processes, which are generally progressive design, that is, what the first step is like and what the second step is like. Each step can be designed as a page from top to bottom or from left to right in order, It can also be designed as multiple tags within a page. Before designing, there should be a conceptual and general layout idea, so that there will be no errors during design. You can draw the flowchart separately within the page or define a flowchart page, which can be used as a reference during the design process.
3、 Improve prototype
Once the main pages and page flow of the page are determined, the prototype can be improved. At this point, the main focus is on some details, including the improvement of the preliminary design page and the definition of some interactive functions. It is also possible to add some visual elements as appropriate, but it is still not advisable to add too much.
As for how to improve the prototype, you can refer to some previous articles that introduced AxureRP. You can refer to the methods used in sample applications and improve the prompts, annotations, interactive operations, etc. on the page. AxureRP may also use many functions and advanced techniques. We will not introduce too much here, but can refer to examples. It should be noted that the main idea of AxureRP is rapid prototyping, so there is no need to overly pursue technical effects during the design process. For complex interaction effects, if there are ready-made examples that can be used, borrow them. If they are not useful, it is recommended to draw a simple one and provide a detailed explanation, as doing complex designs can consume a considerable amount of time.
AxureRP is just a prototype design tool, and the most important aspect of interaction design is the idea. The tool is only used to help implement the idea. There is no need to overly pursue technology or visual expression. While grasping the overall product direction, we should focus on innovation and optimization of interaction processes, page interactions, and layout structures.
