axure training 3

https://www.axure.com/support/training/core/3-static-wireframes

STATIC WIREFRAMES

AXURE RP FOR STATIC WIREFRAMES

Although Axure RP can be used to create richly interactive prototypes, it's also good for quickly putting together static, low-fidelity mockups comprising widgets with little or no interactivity. Even if projects evolve to include rich interactions later on, they'll often still begin as static wireframes. Widget styling, content reuse (masters), notes, and profiles of output options (generators) can then be added at the appropriate stage if needed.

WIDGETS IN STATIC WIREFRAMES

Early in the design process, basic shape widgets can stand in for other types of content. Later on, increase the fidelity of wireframes as needed by swapping out basic shapes for text, images, and icons. Use the widgets in the Markup section of the Default library to make notes about the design.

TEXT

You can paste text directly into Axure RP. When you paste text on the canvas, a new paragraph widget containing your text will be created.

You can also paste the text into a widget already on the canvas; just select the widget and use [CTRL] + [V] to paste the text. Use the shortcut  [SHIFT] + [CTRL] + [V] to preserve the text formatting from the widget, rather than using the formatting from the copied text.

IMAGES

There are several ways to add images. You can add an image widget from the Default library and then double-click it to choose an image file from your computer. Another option is to copy an image and paste it into Axure RP. You can also browse to an image in your computer’s file browser and then drag that item from the file browser window directly onto the canvas.

Images can be resized and rotated like shape widgets, and border and corner radius controls are also available.

MORE WIDGET LIBRARIES

Icon and design pattern libraries are also included in Axure RP. Use the dropdown in the Widgets pane to browse other libraries.

Additional libraries of icons, design patterns, and UI elements can be found on the Download Widget Libraries page of the Axure website. These resources are by-and-large created by our community of users. (Get hold of us at contactus@axure.com if you create a library that you want to share with the community!) Many of these widget libraries are free; others charge per-download.

UPDATING EXISTING USER INTERFACES

A common task in UI design work is to mock up an update to an existing web page or other user interface. The best way to get started with this type of project in RP is to take screenshots of different screens or pages of your existing UI and then paste them into your RP diagrams as image widgets. You can then use the "crop" and "slice" tools (click the "More" button in the Main Toolbar) to cut out parts of the screenshot to be moved or replaced with other widgets, or simply add new widgets on top of your original screenshots to show your proposed designs.

MASTERS

Masters are collections of widgets you can maintain in a single source location and then reuse throughout your file. Common elements that are created as masters include headers, footers, and navigation. Any edits you make to the master will be automatically applied everywhere the master is used. (This is how masters primarily differ from custom widgets, which can be used throughout a file but that don't update when the source widget is changed.) You can add masters to pages and to other masters.

There are two workflows for creating a master. If you're adding widgets to a diagram and you realize that this part of your wireframe would be better if it were reusable and single-sourced, you can select all the component widgets, right-click, and choose "Convert to Master". (The widgets you selected will still be there in your diagram, but they'll now be the first instance of your newly created master.) Alternatively, you can design content as a master right from the beginning; locate the Masters pane at the lower left-hand side of Axure RP and click on the "Add Master" icon to get started.

WIDGET AND PAGE STYLES

WIDGET STYLES IN THE DEFAULT LIBRARY

Each widget in the Default library has a widget style already applied. That widget style is imported to your file the first time you use a widget of that type. For example, the first time you add a Box 1 widget, the "Box 1" style (featuring white fill color, thin black border, etc.) will be added to your project.

Changes to the "Box 1" style will affect all widgets that have that widget style applied, including subsequent Box 1 widgets that you add from the library.

ADDING AND EDITING WIDGET STYLES

There are two ways to edit a widget style. One option is to edit the style directly on a widget. Click a widget on the canvas and style it however you'd like. Then, click the blue text reading "Update" which appears in the Style tab next to the Widget Style dropdown. The style changes you made to the widget will be applied to its widget style, which will then in turn be applied to all widgets in the file already using that style and all new widgets of that type added to the file in the future.

Your other option is to click "Create", which is just below "Update". (Note: if you're not seeing these options, make a unique styling change to your selected widget and then they should appear.) The "Create" option will open the Widget Style Editor and add a new style with the properties of your selected widget. Give the style a name and click "OK" to save the changes and close the Widget Style Editor.

APPLYING WIDGET STYLES

Apply widget styles in either of two places: from the Style dropdown in the Style toolbar (top of the UI, left-most item in the toolbar), or via the Widget Style dropdown in the Style tab of the Inspector.

THE DEFAULT STYLE

All widgets share a single default style in addition to whatever other styles may be applied. If you edit a style property in the Default widget style, that change will apply to all widget styles not overriding the property.

(There are a few other styles that you'll see in all new RP files: "Heading 1"-"Heading 6" and "Paragraph". These styles are useful when pasting text onto the canvas.)

SKETCH EFFECTS (PAGES)

Use the sketch effects feature to make your pages look hand-drawn. Straight lines become wavy and uneven and can be made thicker. A single font (e.g. a handwriting-style font) can be applied to all text, temporarily overriding per-widget styling. You can also change from full-color graphics to black-and-white.

Configure sketchiness in the Style tab of the page Inspector.

WIDGET AND PAGE NOTES

When building static wireframes, use widget and page notes instead of cases and actions (more on those in the next article) to describe intended interactive behaviors. Notes can also maintain version history, keep track of status, and document sources of widget text and data.

NOTE FIELDS

Notes can have various fields to organize different types of information. Add fields by clicking the Customize Fields control in the Notes tab of the Inspector.

WIDGET NOTES

For widget notes, you can use the "Add" dropdown to choose different types of fields. You can choose between text, select list, number, and date. Page notes are always of the text type.

Widget note fields can be added to different sets that are used for different purposes. You can choose whether to view all notes or just specific sets by using the Fields dropdown at the top of the Notes tab.

NOTES IN THE BROWSER

You can also select which notes are included in the generated prototype viewed in the browser. Navigate to the "Publish > Generate HTML Files..." menu command to open the Generate HTML dialog, and then choose the "Widget Notes" tab from the left-hand list. Check the checkboxes to select the note fields you'd like to include in the output, and use the right-hand arrows to reorder them.

Widget notes aren't the only way to add note-type information to your diagram; you can also use the Markup section of the Default library or other custom widgets to add callouts and notes directly onto the diagram. Notes created using markup widgets will be always-visible in the browser instead of being accessible through clicking an icon.

GENERATORS

Your stakeholders will usually not be viewing your work directly in Axure RP. To get your diagrams out of RP and into a format viewable in a web browser, you'll need to generate an output from your .rp file. Outputs from RP are built according to option sets called "generators".

Each new .rp file already contains one generator of each type: HTML, text documentation, print, etc. Access the options for your HTML generator via the "Publish > Generate HTML Files…" menu command. Here you can control what location the output files are saved to, which pages and notes are included in the output, and lots of other options. (If your output ever seems to be missing things as compared to the version of your project you see inside RP, make sure to check the Generate HTML options!)

Learn more about generators in the Generators section of our online training.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 9,243评论 0 23
  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的阅读 13,413评论 5 6
  • 子类拥有父类非private属性和方法 package com.lanou.obj; public class t...
    沫晴er阅读 185评论 0 0
  • 斜风未至 雨歇天净 榴花娇艳 碧池浅草如烟漫 雾将散 人未见 小楼渐闻箫声远 速将春来探 凝神盼 蓓蕾初开 胭脂早...
    蛙声一片阅读 134评论 0 0
  • 我和你不一定会相见 但若相见 那会在哪里 山涧河川 还是塞北江南 你说你是长风 向往自由 喜欢长歌大漠 我愿是涧边...
    黔肇张生阅读 442评论 0 3