在 Axure 中拖拉元件時，經常不明所以出現的藍色線條是什麼?

在 Axure 中拖拉元件時，你是不是也會不時的拉出一條不明所以的藍色線條？

頁面的參考線

蛙一直以來都是反射性的以 Ctrl+Z 處理掉它的，某天心血來潮研究了一下，原來這個東西是 Guides (參考線) 的功能。

仔細看了一下，這個功能對於重度的對齊強迫症而言，真是一大福音，有了這個功能，畫面上的所有元素就可以快速的對齊，再也不會再歪七扭八了~

參考線與格線功能

Grid and Guides 的功能只要在繪圖區點選右鍵就可以召喚出來，顧名思義，主要有格線和參考線兩大功能，以下就分開介紹吧~

Grid 格線

Grid（Line 格線）

Grid（Intersection 交叉點） 

在編輯區域點選右鍵，選擇 Grid Setting 可以打開 Grid 的設定。

Grid 顯示的方式有兩種，預設的是格線、也可以選擇成只顯示交叉點，或甚至不顯示，那…如果不顯示的話，開啟格線的功能在哪兒呢？ 其實還是有低，只要有選擇 Snap to Grid功能，就算你看不見，實際上在拖曳元件時，他還是會儘量去貼齊格線喔~

（Spacing功能設定的是格線的寬度，你可以自由調整，蛙這邊的設定是20 px）

Guides 參考線

參考線與格線比較不同的地方是格線是平均的分布在頁面中，參考線則是依照你現在的需求來特別繪製。

參考線的功能最標準的用法應該是像視覺設計那樣，先設定頁面中要分為幾欄、每欄寬度多少、間距多少、邊框留白多少等等，先設定好之後，再依據每個不同頁面實際需要的欄位數來切割版面。

譬如說，以上方的範例，若今天網站內頁需要切成2欄，左側比較小，顯示篩選條件，右側較寬，顯示內文，那麼就可以把左邊4欄合併作為篩選條件，右側11個欄位合併做為內文區。同理，若部分頁面有需要再切出一塊放廣告或做其他用途，則可考慮切成4/7/4三欄。

不過不過，一般來說這個用法是視覺設計這邊會安排的，如果你是企劃的角色的話，不需要做到這個地步喔。

那麼，蛙推薦怎麼設定呢？

蛙個人最推薦的作法，是直接用 Global Guides 先設定固定的頁面寬度、上左右三邊的留白寬度，接著若各頁面有需要，再用 Page Guides 來輔助，這樣子就可以漂漂亮亮的對齊每個頁面，切換頁面時也就不會產生違和感囉。

拖曳產生參考線

最方便設定參考線的方式，應該是用滑鼠直接拖曳，直接在繪圖區左側與上方的尺規區往繪圖區中心拖曳，就可以拉出參考線了。直接拖曳可以產生 Page Guides ，同時按住 Ctrl 並且拖曳，則可產生 Golbal Guides。

參考線如果不鎖定的話，在繪圖中很容易不小心移動到，建議在設定完參考線後，直接將參考線鎖定。鎖定參考線的方式有兩種，一種是直接在繪圖區右鍵點選 Lock Guides（快速鍵 Ctrl+Shift+.），一鍵鎖定本檔案中的所有參考線，另外也可以在單一的參考線上點選右鍵，只鎖定單一的參考線。

同理，想要解鎖的話，在繪圖區右鍵再次點選 Lock Guides（快速鍵同為 Ctrl+Shift+.）即可解鎖參考線，若當初是只鎖定單一參考線，則在原參考線點選右鍵，即可解鎖。

參考線設定功能

若是覺得參考線影響視覺，可以調整參考線的顏色，比如說調整為淺灰色之類。另外，參考線也和格線一樣可設定為不顯示，同樣在右鍵選單中可設定，顯示/隱藏 Golbal Guides 的快速鍵為 Ctrl+. ，顯示/隱藏 Page Guides 的快速鍵則為 Ctrl+,。

那麼，今天的教學就到這裡囉，大家一起來做整整齊齊的 Prototype 吧~~