Axure RP8 的網(wǎng)格、引導(dǎo)線、輔助線和捕捉的使用

0 評(píng)論 10021 瀏覽 12 收藏 18 分鐘

本文主要講解Axure RP8 的網(wǎng)格、引導(dǎo)線、輔助線和捕捉的使用,一起來(lái)看看~

詞典:

  • Configure:配置;設(shè)定;使成形;使具一定形式
  • on the canvas:被擊倒
  • widget:小器具、裝飾品、窗口小部件
  • snapping:顯著地、強(qiáng)烈地、非常地;拍照;猛地咬住( snap的現(xiàn)在分詞 );發(fā)出尖厲聲音地突然斷裂[打開(kāi),關(guān)閉];厲聲地說(shuō)
  • behaviors:行為( behavior的名詞復(fù)數(shù) );態(tài)度;運(yùn)轉(zhuǎn)狀態(tài);反應(yīng)
  • diagrams:圖解、簡(jiǎn)圖、圖表( diagram的名詞復(fù)數(shù) )
  • tidy:整潔的、整齊的;相當(dāng)大的;相當(dāng)好的;健康的;盛零碎物品的容器;椅子的背罩;使整潔;弄整齊;使有條理;整理、收拾
    editing:編輯的;編輯( edit的現(xiàn)在分詞 );剪輯;主編
  • guides:導(dǎo)游;向?qū)?;指?dǎo)者( guide的名詞復(fù)數(shù) );有指導(dǎo)意義的事物;指導(dǎo);引路( guide的第三人稱單數(shù) );操縱;影響
  • entire file:整個(gè)文件
  • appear in:出版;出庭;表演;在出現(xiàn)
  • widgets:小器具、裝飾品、窗口小部件( widget的名詞復(fù)數(shù) )
  • on the canvas:被擊倒
  • by default:缺席、不到場(chǎng)
  • render:給予;使成為;遞交;表達(dá)
  • Toggle:棒形紐扣;套索扣;轉(zhuǎn)換鍵;切換鍵;切換
  • setting in:開(kāi)始、漲潮
  • Arrange:整理;把…分類;改編;達(dá)成…的協(xié)議;達(dá)成協(xié)議、商定(with a person about 或 for a thing);改編樂(lè)曲
  • in Back:在后面
  • command:命令、指揮;司令部、指揮部;指令;控制力;命令;指揮、控制

GRID, GUIDES, AND SNAPPING:網(wǎng)格,引導(dǎo)線和(部件)捕捉

?概述

Configure grid and guide lines on the canvas and widget snapping behaviors to keep your diagrams tidy while editing. You can create page guides for individual pages and global guides for the entire file.

在畫(huà)布上配置網(wǎng)格和引導(dǎo)線,并在編輯時(shí)使用部件(組件,例如:編輯框、標(biāo)簽等)捕捉(系統(tǒng)自動(dòng)調(diào)整部件貼近網(wǎng)格線)行為以保持圖表整潔。您可以為每個(gè)頁(yè)面創(chuàng)建頁(yè)面指南和整個(gè)文件的全局指南。

THE GRID(網(wǎng)格)

Show or hide the grid via the “Arrange > Grid and Guides > Show Grid” checkbox.

通過(guò)“Arrange(安排,在菜單欄目)>Grid and Guides(網(wǎng)格和引導(dǎo)線)>Show Grid(顯示網(wǎng)格)”來(lái)顯示或隱藏網(wǎng)格。

By default, the grid is 10px by 10px and is drawn as dots. Set a custom grid interval or switch to grid lines instead of grid dots via the “Arrange > Grid and Guides > Grid Settings…” menu command. Use the “Spacing” dropdown to change the spacing of the grid. In the “Style” section, you can change the style of the grid to lines that cross the full page width and height, instead of dots at the intersection, and you can change the color of the grid using the color picker.

默認(rèn)情況下,網(wǎng)格是10×10(單位:px) ,并繪制為點(diǎn)。通過(guò)“Arrange > Grid and Guides > Grid Settings…”菜單命令,設(shè)置自定義網(wǎng)格間隔或切換到網(wǎng)格線,而不是網(wǎng)格點(diǎn)。使用“間距”下拉來(lái)改變網(wǎng)格的間距。在“樣式”部分中,可以將網(wǎng)格的樣式更改為橫過(guò)整個(gè)頁(yè)面寬度和高度的線條,而不是交叉點(diǎn)上的點(diǎn),并且可以使用顏色選擇器更改網(wǎng)格的顏色。

You can also toggle snapping to the grid, either via the “Arrange > Grid and Guides > Snap to Grid” menu command or via the Grid Settings dialog. With this setting enabled, a widget will snap to a grid line when it is dragged into close proximity while moving or resizing.

您還可以通過(guò)“Arrange > Grid and Guides > Snap to Grid”菜單命令或通過(guò)網(wǎng)格設(shè)置對(duì)話框切換到網(wǎng)格。啟用此設(shè)置后,在移動(dòng)或調(diào)整大小時(shí),部件將被捕捉到網(wǎng)格線附近。

GUIDES(引導(dǎo)線)

Guides are lines added to the canvas that help mark where widgets should be placed. They’re only visible in Axure RP; you won’t see them when viewing the HTML output in the browser.

guides (頁(yè)面引導(dǎo)線)是添加到畫(huà)布中的線條,幫助標(biāo)記應(yīng)該放置的部件。它們只在Axure RP中可見(jiàn);在瀏覽器中查看HTML輸出時(shí),您不會(huì)看到它們。

PAGE GUIDES(頁(yè)面引導(dǎo)線)

Page guides appear on just one page. To add a guide to a page open on the canvas, drag from either the horizontal or vertical ruler next to the canvas and then drop at the desired pixel value. Page guides are teal by default.

頁(yè)面引導(dǎo)線顯示在一個(gè)頁(yè)面上,若要在畫(huà)布上打開(kāi)一個(gè)頁(yè)面的引導(dǎo)線,可以從畫(huà)布旁邊的水平或垂直標(biāo)尺拖動(dòng),然后拖動(dòng)到所需的像素值,頁(yè)面指南默認(rèn)為藍(lán)綠色?。

Toggle page guide visibility via the “Arrange > Grid and Guides > Show Page Guides” checkbox. For more guide settings, like to change guide color, open the Guide Settings dialog via “Arrange > Grid and Guides > Guide Settings…”.

通過(guò)“Arrange > Grid and Guides > Show Page Guides”復(fù)選框引導(dǎo)可視性。對(duì)于更多的引導(dǎo)設(shè)置,如改變引導(dǎo)顏色,打開(kāi)指南設(shè)置對(duì)話框通過(guò)“Arrange > Grid and Guides > Guide Settings…”。

GLOBAL GUIDES(全局引導(dǎo)線)

Global guides are guide lines that always appear on the canvas in your RP file—on every page, master, and dynamic panel state. To add a global guide, hold [CTRL] / [CMD] while dragging from a ruler onto the canvas. Global guides are magenta by default. Toggle page guide visibility via the “Arrange > Grid and Guides > Show Global Guides” checkbox.

全局引導(dǎo)線是在每個(gè)頁(yè)面、主控面板和動(dòng)態(tài)面板狀態(tài)下的RP(Axure文件后綴)文件中始終出現(xiàn)在畫(huà)布上的引導(dǎo)線。要添加全局引導(dǎo)線,在從ruler 拖動(dòng)到畫(huà)布上時(shí)保持[CTRL]/[CMD]。全局引導(dǎo)線默認(rèn)為品紅色,通過(guò)“Arrange > Grid and Guides > Show Global Guides”復(fù)選框來(lái)引導(dǎo)頁(yè)面可見(jiàn)性。

ADAPTIVE GUIDES(自適應(yīng)引導(dǎo)線)

Adaptive guides indicate the boundaries of the current adaptive view. (Learn about the adaptive views feature in our Adaptive Views training article.) Adaptive guides are purple by default. Toggle adaptive guide visibility via the “Arrange > Grid and Guides > Show Adaptive Guides” checkbox.

自適應(yīng)引導(dǎo)線指示當(dāng)前自適應(yīng)視圖的邊界(在我們的自適應(yīng)視圖訓(xùn)練文章中了解自適應(yīng)視圖特性),默認(rèn)情況下,自適應(yīng)引導(dǎo)線是紫色的。通過(guò)“Arrange > Grid and Guides > Show Adaptive Guides”復(fù)選引導(dǎo)向?qū)У目梢曅浴?/p>

PRINT GUIDES(打印引導(dǎo)線)

Print guides indicate the page boundaries of the current print generator. (Learn about print generators in our Print Settings and Configurations reference guide.) Print guides are grey by default. Toggle print guide visibility via the “Arrange > Grid and Guides > Show Print Guides” checkbox.

打印引導(dǎo)線指示當(dāng)前打印生成器的頁(yè)邊界(在我們的打印設(shè)置和配置參考指南中了解打印生成器),默認(rèn)情況下,打印引導(dǎo)線是灰色的,通過(guò)“Arrange > Grid and Guides > Show Print Guides”復(fù)選打印指南可視性復(fù)選框。

CREATE GUIDES(創(chuàng)建引導(dǎo)線)

Create a series of guides all at once using the Create Guides dialog, available via the “Arrange > Grid and Guides > Create Guides…” menu command. Use the Presets dropdown to choose from four options: “960 Grid: 12 Column”; “960 Grid: 16 Column”; “1200 Grid: 12 Column”; or “1200 Grid: 15 Column”. (You can learn more about the 960 Grid System at www.960.gs and the 1200 Grid System at www.1200px.com.)

創(chuàng)建一系列引導(dǎo)線,同時(shí)使用“創(chuàng)建向?qū)А睂?duì)話框,通過(guò)“Arrange > Grid and Guides > Create Guides…(中文版本:安排>網(wǎng)格和指南>創(chuàng)建指南…)”菜單命令。

使用預(yù)設(shè)下拉從四個(gè)選項(xiàng)中選擇:“960網(wǎng)格:12列”;“960網(wǎng)格:16列”;“1200網(wǎng)格:12列”;或“1200網(wǎng)格:15列”。(您可以在www. 1200 px.com上了解更多關(guān)于960網(wǎng)格系統(tǒng)在www. 960.GS和1200網(wǎng)格系統(tǒng))。

You can also specify your own layout using the “Column” and “Row” fields.

還可以使用“列”和“行”字段指定自己的布局。

Click the checkbox “Create as Global Guides” if you’d like the guides to appear on all pages.

單擊“Create as Global Guides(創(chuàng)建為全局引導(dǎo)線)”的復(fù)選框,如果您希望引導(dǎo)線顯示在所有頁(yè)面上。

SNAP TO GUIDES(捕捉引導(dǎo)線)

With “snap to guides” enabled, a widget will snap to a guide when dragged into close proximity while moving or resizing. Toggle this setting in the top menu via the “Arrange > Grid and Guides > Snap to Guides” checkbox, or from the Guide Settings dialog at “Arrange > Grid and Guides > Guide Settings…”.

通過(guò)啟用“捕捉引導(dǎo)線”,當(dāng)移動(dòng)或調(diào)整大小時(shí),小部件將被拖動(dòng)到接近的位置。在頂部菜單中通過(guò)“Arrange > Grid and Guides > Snap to Guides(安排>網(wǎng)格和引導(dǎo)線>捕捉引導(dǎo)線)”復(fù)選框,或從“Grid and Guides > Guide Settings…(設(shè)置>網(wǎng)格和引導(dǎo)線>引導(dǎo)線設(shè)置…)”的向?qū)гO(shè)置對(duì)話框切換此設(shè)置。

LOCK GUIDES(鎖定引導(dǎo)線)

Lock guides so they cannot be moved or deleted. This setting is available in the Guide Settings dialog, or via the top menu at “Arrange > Grid and Guides > Lock Guides”.

鎖定引導(dǎo)線,使它們不能移動(dòng)或刪除。此設(shè)置可在引導(dǎo)線設(shè)置對(duì)話框中,或通過(guò)“Arrange > Grid and Guides > Lock Guides(安排>網(wǎng)格和引導(dǎo)線>鎖定引導(dǎo)線)”的頂部菜單提供。

RENDER GUIDES IN BACK(在后面渲染引導(dǎo)線)

Guides appear in front of widgets on the canvas by default, but you can have them render in the back instead. Toggle this setting in the top menu using the “Arrange > Grid and Guides > Render Guides in Back” command.

默認(rèn)情況下,引導(dǎo)線出現(xiàn)在畫(huà)布上的部件前面,但可以在背面顯示它們。在頂部菜單中使用“Arrange > Grid and Guides > Render Guides in Back”命令切換此設(shè)置。

WIDGET SNAP(部件捕捉)

When a widget is being dragged to move or resize and gets close to a second widget already on the canvas, the first widget will snap into certain positions relative to the second one: when touching the second widget’s border, a certain margin away from the second widget’s border (10 pixels by default), to align corresponding widget edges (e.g. the top edges of two widgets arranged side-by-side), or at common midpoints (to align the two widgets’ mid-widths or mid-heights). As this snapping behavior is happening during the drag, snap guides will appear on the canvas to help indicate which features of the second widget the first widget is snapping to.

當(dāng)一個(gè)部件被拖動(dòng)以移動(dòng)或調(diào)整大小并接近畫(huà)布上的第二個(gè)部件時(shí),第一個(gè)部件將相對(duì)于第二個(gè)部件捕捉到某些位置。當(dāng)觸摸第二個(gè)部件的邊界時(shí),從第二個(gè)部件的邊界處有一定的邊界(默認(rèn)10個(gè)像素),以對(duì)齊相應(yīng)的部件邊緣(例如并排布置的兩個(gè)部件的頂部邊緣),或者在共同的中點(diǎn)對(duì)齊(以對(duì)齊兩個(gè)部件的中寬度或中高度)。

由于這種拖拽行為在拖動(dòng)期間發(fā)生,捕捉向?qū)⒊霈F(xiàn)在畫(huà)布上,以幫助指示第一個(gè)部件的第二個(gè)部件的哪些特征被捕捉。

Toggle this behavior via the top menu at “”, or via the Widget Snap Setting dialog, available at “Arrange > Grid and Guides > Widget Snap Settings…”. The Widget Snap Settings dialog also gives you the option to change the widget snap margin (10px by default) and the snap guide color (blue by default).

在“Arrange > Grid and Guides > Snap to Widgets(安排>網(wǎng)格和向?qū)Ь€>部件捕捉設(shè)置)”的頂部菜單中切換這個(gè)行為,或者通過(guò)組件捕捉設(shè)置對(duì)話框,在“安排>網(wǎng)格和向?qū)?gt;小部件捕捉設(shè)置”中可用。部件捕捉設(shè)置對(duì)話框,還提供了更改小部件捕捉邊界(默認(rèn)為10px)和捕捉引導(dǎo)線顏色(默認(rèn)為藍(lán)色)的選項(xiàng)。

 

英文原文:https://www.axure.com/support/reference/grid-guides-and-snapping

本文由 @ppm 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!