Prototype Design Template —— How to design the Windows7UI prototype of the software with EdrawMax?

How to design an excellent website backstage prototype? I think we can start from three aspects:

1. Unique and novel design concept

If you really have no idea, you can look at the background design of the same type of website to find design inspiration.

2. Efficient and practical prototype design tools

A good design idea also needs a prototype tool to make, test and iterate. In this respect, MOckplus is a good tool, which is simple and quick to operate, link sharing, feedback collection, real machine demonstration and so on. , which can realize rapid team design and iteration.

3. Search for creative prototype design templates

A good website background design template is also a good starting point. However, we should pay attention to the copyright issue and find out whether to pay or reuse it for free.

How to design an excellent website backstage prototype To make an excellent backstage prototype, I think it is mainly divided into three parts:

Have a clear understanding of the structure and page logic of the background function module.

2. Be able to skillfully use prototype tools.

3. Excellent design style and design specifications

1 is the foundation, 2 is the advanced, and 3 is the ornament that makes the prototype excellent.

How to ensure a clear and reasonable functional structure and page logic in the background?

Many people have a habit of drawing prototypes, that is, whether they think about it or not, they just start to open the prototype tool and pull a few boxes first, or just start to draw a gourd ladle based on a website background that they think is very good. This is extremely dangerous in my opinion. The background of a web page is different from the general web interface, which has very high requirements for the division of functional modules and the logic of the page. On the one hand, the hierarchical structure of the website background is much more complicated. On the other hand, the backstage function of web pages is more inclined to the management of foreground pages, which leads to the weak correlation and guidance between functions. In this case, if the prototype is started without a good understanding of the background structure, the final background management system is likely to be the accumulation of functions, and it is difficult to ensure the availability of functions and the flow of operations.

When drawing a background prototype, always keep in mind:

Before you draw the prototype, you should first sort out the functional modules of the background management and help yourself divide the pages and modules through the tree structure diagram.

& ampamplt； imgsrc= "

data-raw width = " 1423 " data-raw height = " 676 " class = " origin _ imagezh-light box-thumb " width = " 1423 " data-original = "

“& ampampgt；

After sorting out the modules, you can begin to design the skeleton of the background management system. Personally, I can be divided into three types: main module (which independent function modules are mainly divided into), subcategory (which sub-function categories each function module has) and function event (which main operations exist in each function page). The general layout method is as follows.

1) The top tab divides the main module, and the left column divides the sub-categories.

& ampamplt； imgsrc= "

data-raw width = " 1 1 16 " data-raw height = " 468 " class = " origin _ imagezh-light box-thumb " width = " 1 1 16 " data-original = "

“& ampampgt；

2) Hierarchical classification of burger style in the left column (lazy ~ probably the sidebar style of worktile)

3) The secondary classification list of the left sidebar appears.

& ampamplt； imgsrc= "

data-raw width = " 249 " data-raw height = " 155 " class = " content _ image " width = " 249 " & amp； ampgt；

The route of thinking should be top-down, and don't stick to the presentation form of a specific interface when dividing modules.

Clarity of structure and logic (skeleton) >; Functional page design (specifically how to design a page) > Optimize functional design (whether preview, real-time storage and other functions are needed) > User experience.

If necessary, the user's first learning cost can be sacrificed. The user's first learning cost can give way to the efficiency after the user has mastered it, and try to follow the four principles of intimacy/contrast/repetition/alignment.

For important functions that you don't know how to put them, you can consider putting them on the right side of the top bar instead of on the main module.

Frequent pop-ups are not a good choice (they should be played if necessary). If possible, expanding and floating half a page on the right side is a good solution.

How to design Windows7UI prototype 1 and AxureRP(RapidPrototyping) with EdrawMax?

Axure (pronounced as Ack-Sure) is undoubtedly the most concerned prototype development tool at present. It can help website or software designers to quickly build annotated prototypes (flowcharts and wireframes) with the help of components, and can build dynamic demonstration files of basic functions or page logic with the help of customized reusable components, dynamic panels and rich scripts.

Axure draws lessons from the interface of office, so that users can get started quickly, and provides rich component style modification, so that it can create an interface with high fidelity, low fidelity and even close to actual effect. However, the most commendable thing is that Axure's rich scripting mode can quickly complete the interaction of interface elements by clicking and selecting, such as links, state switching, dynamic changes and other effects, so that Axure can generate a prototype that is very close to the real product. On the other hand, Axure can import component libraries created by others, which enables Axure to meet the design of most types of products.

But Axure is still a headache: the support for Chinese is not very friendly. When inputting noon on a few components, it is often necessary to switch input methods repeatedly like taking a chance, which destroys the user experience of our designers.

Despite its flaws, Axure is still the prototype tool of choice for interaction designers.

2. Microsoft OfficeVisio

Visio was acquired by Microsoft in 2000 and became a component of office2003 suite in 2002. The latest edition is 2007. Visio is recommended for its wide applicability. From website interface, database model, floor plan to flow chart, Visio provides corresponding component libraries and templates, which can be created quickly.

Compared with Axure, Visio is more suitable for production or process design in traditional industries, or information, data and process description in software and Internet industries, and less suitable for web interface. Because its web-based component library is still less, and its form and structure are more similar to the graphic tools in word, there are some shortcomings in prototype development efficiency.

3、BalsamiqMockups

This tool based on AdobeAIRRuntime is really eye-catching, and the style of hand-painted components is rough and dripping, which can create a prototype file close to hand-painted on paper. It provides rich common web elements with hand-drawn style, including common html controls and some combined controls, such as multimedia controllers, tabs, lists, Iphone interface elements and so on.

The most admirable thing about Mockups is that most of the components it provides can be customized in appearance, and the support for Chinese is also good (choose View & gt to use system fonts).

4, simulation process

The biggest difference between Mockflow and the above tools is that Mockflow is an online service based on AdobeFlex technology, which provides basically similar functions and even richer components to BalsamiqMockups. Although its component customization is not strong enough, the default style of component library it provides is very suitable for building commercial product prototypes. One function I can't put down is templates. You can design a new page based on any page setup template.

Compared with other template tools, mockflow has a very different function. Web-based storage can be opened online on any computer, and others can share it quickly and collect online feedback, which is very suitable for the prototype design communication of virtual teams.

Although the basic account of online service can only create one file, there is no page limit for a single file, so it is basically enough.

5, pencil sketch

Pencil is an extension component based on Firefox. After the installation is completed, you can open the drawing panel of Pencil in the Tools menu of Firefox. The function is relatively simple and can only be used as an auxiliary explanation for simple daily work. The default components provided are all based on software engineering, so they are more suitable for simple interface construction or basic page function description of windows desktop programs, and are not suitable for serious prototype development, but fortunately, they are small in size and light in weight, and it is convenient to drag and drop elements from web pages directly or copy them into the current canvas, which is one of the conveniences brought by installing Pencil in Firefox.

More tools ...

The prototype development tools listed above are commonly used and discussed by domestic interaction designers, but there are many softwares with similar functions to Axure. Here are some simple explanations:

6、GUIDesignStudio

This is a very powerful prototype tool. I didn't recommend it because I haven't actually experienced it, but I have no impulse to try this engineering-level interface design. However, from the screenshot and video demonstration of official website, the operation mode of this software is very different from the previous prototyping tools. Axure and others are mostly based on the prototype design of the page. Although it is very practical for the website, it is slightly cumbersome for the process design of the software interface. However, GUIDesignStudio takes a different approach, and automatically creates an action flow by establishing associations between elements. From the video demonstration, this greatly improves the efficiency of software interface prototyping.

7. Prototype composer

The prototype development tools provided by Serena Company are really powerful, based on the main process of project management, providing output document templates, prototype tools and development process control. The development concept of this software is very good. Use this tool to meet the communication and decision-making of all links in the project development process. However, the cost of learning and using the software is relatively high, and it seems that it takes a lot of time to understand all the functions. In addition, the efficiency and stability of the software need to be improved, and there are many errors and stop responding during the trial.

8、LucidSpec

LucidSpec, introduced by Elegance Technology, is a prototype tool very similar to Pencil, but it provides more controls. However, LucidSpec emphasizes the function of generating clean documents, which may be aimed at the redundancy of automatically generating specifications for most prototype tools, but to be honest, the prototype interface provided by LucidSpec is too simple and the generated documents have not been optimized and improved. Video introduction

9, iris professional grade

Compared with other prototype tools, Irise provides the function of sample data, which is a sample database similar to excel tables. The data in the sample database can be obtained directly through the interface elements, so that the generated prototype can even update the dynamic data.

10、AdobeReader

Adobereader？ That's right. In fact, in theory, any tool that can create graphics and text can be used for prototype development, because the prototype itself is the simulation or simulation of business logic and functional interface. Why not use PDF format? BoxandArrow's article PDFPrototype reminds us that all prototype tools are just tools, not the design itself.

In addition, you can also refer to what is here.

But personally recommend:

prototype

_Axure7.0

_UIDesigner

think

_Mindmanager

_Xmind

procedure

_Visio20 13

_EDrawMax

knowledge