"Reprint" OmniGraffle Beginner's Guide

With the Mac has been 2 years, feel more powerful than windows, but also a lot of convenience, of course, the problem is the habit of their own needs to solve, including drawing, OmniGraffle is a powerful graphical tool, this is an online article, as a very good entry, turn.

OmniGraffle is a fairly comprehensive tool for a wide range of applications, but today we focus mainly on understanding how to use it to make wireframes. I (the original author) personally in this area has tried a lot of software, frankly, no one is really perfect, including omnigraffle, but it is in the overall ability and efficiency performance is really the most satisfying to me. But first of all, I'd like to mention OmniGraffle's two-point shortfall. One is that it is not good at generating perfect, interactive prototypes, and of course you can create clickable interface prototypes, such as showing or hiding certain layers in some cases, switching interfaces, and so on, and the other is that the software can only run on Macs.

official:http://www.omnigroup.com/products/omnigraffle/

Or that sentence, no tool is really perfect, ignoring the two defects (strictly speaking 2nd can not be regarded as a defect), OmniGraffle really is a great wireframe tool. Next, I'll take a look at the powerful features of OmniGraffle and learn how to make first-class wireframes.

Knowledge points

We will look at the following interface elements in this article:

• Canvas and Layer Sidebar (Canvas and Layers sidebar)
• Template Windows (stencils window)
• Checker (The Inspector)
  • Styles Editor (style Editors)
    • Padding (fill)
    • Line (Outline)
    • Shadow (Shadow)
    • Image (Image)
    • Literal (text)
  • Alignment/Properties (alignment/properties)
  • Interaction (interactivity)

Canvas and Layer (canvases and Layers)

The canvas and layer sidebar are used to present the organization structure of the document and its contents. We can look at the content thumbnails in each canvas here, as well as the hierarchy between them, which makes it easier to manage and organize documents.

We can create wireframes in the canvas that can carry whatever type of content we need. I usually start by creating a cover page, some flowchart, some information about the user, or the problem I need to solve. This was followed by the actual wireframe production phase.

Layers are used to organize content in the canvas. If you are familiar with Photoshop or illustrator, then the concept of layers should be well understood. In the layer, you can move and organize the various elements, and the order of the different layers helps you organize the page structure in the way you want, as we did in Photoshop.

Most of the interfaces we create will include elements such as navigation bars, footers, and backgrounds that do not change with the interface. In this case we need to use shared layer, which helps us easily create elements that can be reused on multiple canvases, and any future modifications to shared layers will have a direct effect on the canvas on which the layer is used.

It is important to note that elements in a shared layer remain in a fixed position on any canvas, such as where the navigation bar will always be in the navigation bar. If you need more flexible reusable elements, then the "shared object" that will be described later in this article is the more appropriate choice.

shapes and text shapes (shapes and text)

In the process of creating wireframes, various shapes are the tools we use most. What I usually use are the most basic shapes, such as rectangles, circles, and triangles. Compared to the tedious and complex visual representations, the layout of the pages created using these basic shapes can often be more visually and effectively demonstrating the focus of the interaction design phase.

We can adjust the various properties of the shape according to the actual needs.

Fill Color

Shape and contour lines (including line color, size, and so on)

Shadow

Geometry properties

You can also add a variety of custom-made properties that are commonly used in a shape to your preferences for reuse. To add a new preference shape, you need to select a shape in the page and then choose Add Current option to Favorite style (add Selection to favorite styles) from the Shape menu.

Text

You can add text inside a shape and keep it aligned in some way with the shape itself. Once added, the text becomes part of the shape itself and is linked with the shape.

For text inside a shape, OmniGraffle provides a number of tools for adjusting the properties such as line spacing, word spacing, alignment mode, padding, and so on.

You can also add independent text, regardless of whether it is within or outside the shape in the visual form.

Templates and Themes (stencils and Templates)

Templates and themes are great tools for creating and using reusable elements. Topics can help you build a set of documents that already contain a variety of relevant presets, such as brainstorming, organizing charts, space planning, and more. I have my own set of themes in my daily work, and you can create your own theme.

A template is a series of interface elements with preset styles, such as buttons, text, icons, and so on.

You can also modify existing templates and themes. Select a set of templates in the template panel on the right, then click the Gear button on the template panel and choose "Edit Template" in the menu to bring up the template editing interface, you can edit the elements in the template like other omnigraffle documents. The same is true for themes.

There are many templates available on the Web for you to download, and some of the things I use are from graffletopia.com, such as mobile device interface element templates. It is recommended that you look at these templates:

• Konigi
• Twitter Bootstrap
• Foundation

With these templates, you can quickly create beautiful wireframe prototypes.

Shared Objects (GKFX Objects)

As mentioned earlier, in most cases, a shared layer is sufficient, but sometimes you do need some interface elements that have the same properties but differ in layout locations. Once upon a time, I thought that OmniGraffle did not provide features like shared elements, but that's not the case, but the way to create shared elements is somewhat hidden.

In the document, select the interface element you want to create as a shared object, and in the Edit menu at the top, find the "copy as" item and choose the PDF. Then delete the previously selected interface elements, and then perform the paste operation, then pasted back in the form of the PDF element is what we call "Shared object".

To edit a shared object, simply double-click on the object and a separate OmniGraffle document will appear, where you can edit the shared object. Once saved, you will find that all the elements used in this copy have changed accordingly.

Alignment and Document properties (Alignment/properties)

Other features of the layout, such as alignment, spatial adjustment, canvas properties and so on, are also something we must understand. This type of functionality is concentrated in the Inspector panel on the right.

It is important to align the functionality of the interface elements. After selecting the element you want to align, select the Datum point (side, corner, or center) you want to align in the Alignment panel, and then click the desired alignment type, including landscape and portrait.

The relative spatial adjustment between interface elements is also a common function. You can distribute several elements equally in a certain direction, and you can further set the distance between them.

In these panel-related panels, you can see that the default length units are "inch" based, and it is recommended that you switch to pixels that are more compliant with the digital product rules in your actual work. The most efficient way to switch length units is in the topic.

Interaction (interactivity)

If you need to add some basic interaction to the Wireframe prototype, OmniGraffle can also provide support. All you need to do is select the interaction element in the interface and open the action panel in the inspector to set it up. OmniGraffle can add the following kinds of interactive actions to the Click action:

• Open a URL
• Open File
• Run the script
• Jump to somewhere else
• Show or hide layers

My personal most commonly used is "open a url" and "Jump elsewhere (jumps elsewhere)", especially the latter, can be used to implement the switch between the canvas, usually in the online box prototype to show the interface between the jump.

Summarize

The beginner's Guide to OmniGraffle is here. For Uxer, this is a basic tool for everyday work, and when you get started and delve into it, you'll find it can help you quickly create a variety of graphic documents, especially wireframe prototypes. In addition, there are a lot of great resources on omnigraffle waiting for you to discover and use. Good luck, BA!

Original address:http://beforweb.com/node/202

"Reprint" OmniGraffle Beginner's Guide