Axure RP8 的網格、引導線、輔助線和捕捉的使用
本文主要講解Axure RP8 的網格、引導線、輔助線和捕捉的使用,一起來看看~
詞典:
- Configure:配置;設定;使成形;使具一定形式
- on the canvas:被擊倒
- widget:小器具、裝飾品、窗口小部件
- snapping:顯著地、強烈地、非常地;拍照;猛地咬住( snap的現在分詞 );發出尖厲聲音地突然斷裂[打開,關閉];厲聲地說
- behaviors:行為( behavior的名詞復數 );態度;運轉狀態;反應
- diagrams:圖解、簡圖、圖表( diagram的名詞復數 )
- tidy:整潔的、整齊的;相當大的;相當好的;健康的;盛零碎物品的容器;椅子的背罩;使整潔;弄整齊;使有條理;整理、收拾
editing:編輯的;編輯( edit的現在分詞 );剪輯;主編 - guides:導游;向導;指導者( guide的名詞復數 );有指導意義的事物;指導;引路( guide的第三人稱單數 );操縱;影響
- entire file:整個文件
- appear in:出版;出庭;表演;在出現
- widgets:小器具、裝飾品、窗口小部件( widget的名詞復數 )
- on the canvas:被擊倒
- by default:缺席、不到場
- render:給予;使成為;遞交;表達
- Toggle:棒形紐扣;套索扣;轉換鍵;切換鍵;切換
- setting in:開始、漲潮
- Arrange:整理;把…分類;改編;達成…的協議;達成協議、商定(with a person about 或 for a thing);改編樂曲
- in Back:在后面
- command:命令、指揮;司令部、指揮部;指令;控制力;命令;指揮、控制
GRID, GUIDES, AND SNAPPING:網格,引導線和(部件)捕捉
?概述
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.
在畫布上配置網格和引導線,并在編輯時使用部件(組件,例如:編輯框、標簽等)捕捉(系統自動調整部件貼近網格線)行為以保持圖表整潔。您可以為每個頁面創建頁面指南和整個文件的全局指南。
THE GRID(網格)
Show or hide the grid via the “Arrange > Grid and Guides > Show Grid” checkbox.
通過“Arrange(安排,在菜單欄目)>Grid and Guides(網格和引導線)>Show Grid(顯示網格)”來顯示或隱藏網格。
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.
默認情況下,網格是10×10(單位:px) ,并繪制為點。通過“Arrange > Grid and Guides > Grid Settings…”菜單命令,設置自定義網格間隔或切換到網格線,而不是網格點。使用“間距”下拉來改變網格的間距。在“樣式”部分中,可以將網格的樣式更改為橫過整個頁面寬度和高度的線條,而不是交叉點上的點,并且可以使用顏色選擇器更改網格的顏色。
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.
您還可以通過“Arrange > Grid and Guides > Snap to Grid”菜單命令或通過網格設置對話框切換到網格。啟用此設置后,在移動或調整大小時,部件將被捕捉到網格線附近。
GUIDES(引導線)
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 (頁面引導線)是添加到畫布中的線條,幫助標記應該放置的部件。它們只在Axure RP中可見;在瀏覽器中查看HTML輸出時,您不會看到它們。
PAGE GUIDES(頁面引導線)
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.
頁面引導線顯示在一個頁面上,若要在畫布上打開一個頁面的引導線,可以從畫布旁邊的水平或垂直標尺拖動,然后拖動到所需的像素值,頁面指南默認為藍綠色?。
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…”.
通過“Arrange > Grid and Guides > Show Page Guides”復選框引導可視性。對于更多的引導設置,如改變引導顏色,打開指南設置對話框通過“Arrange > Grid and Guides > Guide Settings…”。
GLOBAL GUIDES(全局引導線)
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.
全局引導線是在每個頁面、主控面板和動態面板狀態下的RP(Axure文件后綴)文件中始終出現在畫布上的引導線。要添加全局引導線,在從ruler 拖動到畫布上時保持[CTRL]/[CMD]。全局引導線默認為品紅色,通過“Arrange > Grid and Guides > Show Global Guides”復選框來引導頁面可見性。
ADAPTIVE GUIDES(自適應引導線)
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.
自適應引導線指示當前自適應視圖的邊界(在我們的自適應視圖訓練文章中了解自適應視圖特性),默認情況下,自適應引導線是紫色的。通過“Arrange > Grid and Guides > Show Adaptive Guides”復選引導向導的可視性。
PRINT GUIDES(打印引導線)
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.
打印引導線指示當前打印生成器的頁邊界(在我們的打印設置和配置參考指南中了解打印生成器),默認情況下,打印引導線是灰色的,通過“Arrange > Grid and Guides > Show Print Guides”復選打印指南可視性復選框。
CREATE GUIDES(創建引導線)
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.)
創建一系列引導線,同時使用“創建向導”對話框,通過“Arrange > Grid and Guides > Create Guides…(中文版本:安排>網格和指南>創建指南…)”菜單命令。
使用預設下拉從四個選項中選擇:“960網格:12列”;“960網格:16列”;“1200網格:12列”;或“1200網格:15列”。(您可以在www. 1200 px.com上了解更多關于960網格系統在www. 960.GS和1200網格系統)。
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(創建為全局引導線)”的復選框,如果您希望引導線顯示在所有頁面上。
SNAP TO GUIDES(捕捉引導線)
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…”.
通過啟用“捕捉引導線”,當移動或調整大小時,小部件將被拖動到接近的位置。在頂部菜單中通過“Arrange > Grid and Guides > Snap to Guides(安排>網格和引導線>捕捉引導線)”復選框,或從“Grid and Guides > Guide Settings…(設置>網格和引導線>引導線設置…)”的向導設置對話框切換此設置。
LOCK GUIDES(鎖定引導線)
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”.
鎖定引導線,使它們不能移動或刪除。此設置可在引導線設置對話框中,或通過“Arrange > Grid and Guides > Lock Guides(安排>網格和引導線>鎖定引導線)”的頂部菜單提供。
RENDER GUIDES IN BACK(在后面渲染引導線)
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.
默認情況下,引導線出現在畫布上的部件前面,但可以在背面顯示它們。在頂部菜單中使用“Arrange > Grid and Guides > Render Guides in Back”命令切換此設置。
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.
當一個部件被拖動以移動或調整大小并接近畫布上的第二個部件時,第一個部件將相對于第二個部件捕捉到某些位置。當觸摸第二個部件的邊界時,從第二個部件的邊界處有一定的邊界(默認10個像素),以對齊相應的部件邊緣(例如并排布置的兩個部件的頂部邊緣),或者在共同的中點對齊(以對齊兩個部件的中寬度或中高度)。
由于這種拖拽行為在拖動期間發生,捕捉向導將出現在畫布上,以幫助指示第一個部件的第二個部件的哪些特征被捕捉。
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(安排>網格和向導線>部件捕捉設置)”的頂部菜單中切換這個行為,或者通過組件捕捉設置對話框,在“安排>網格和向導>小部件捕捉設置”中可用。部件捕捉設置對話框,還提供了更改小部件捕捉邊界(默認為10px)和捕捉引導線顏色(默認為藍色)的選項。
英文原文:https://www.axure.com/support/reference/grid-guides-and-snapping
本文由 @ppm 翻譯發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
- 目前還沒評論,等你發揮!