如果PM對原型的視覺要求比較高，那么畫線框圖的時候一定要注意各種細節，比如元件相對于頁面的位置，和其他元件是否對齊等。

接下來通過一些原型實例，給大家講解一下如何優化線框圖的細節。以下方法對單一元件或者選中多個元件都有效。這些功能除了常用工具欄，也可以在菜單欄，和右方的檢視視圖中找到。

設置元件的位置

下圖中的“昵稱”這個文本元件，需要距離左邊框和上方banner一個合適的距離。

我們可以通過設置該元件的X值和Y值來調整效果，不過此方法比較難操作，而下面幾種方法更簡潔。

設置元件中文字的相對位置

除了設置元件的XY位置，我們也可以使用相對距離來調整元件位置。

對齊元件到網格

當我們需要把元件放置在畫布中的合理位置，請在空白區域右鍵選中“柵格和輔助線-顯示網格”和“柵格和輔助線-對齊網格”。

此時我們再去拖動元件“昵稱”的時候，你會發現慢慢拖動的時候，每次距離都是固定的10px，這就是下圖中最后一個頁面設置的網格默認間隔。

對齊元件到其他元件

當我們需要通過拖動的方式元件去對齊到其他元件，我們可以開啟“對齊元件”功能。請在空白區域右鍵選中“柵格和輔助線-對齊元件”。

開啟之后，我們再去拖動元件去對齊其他元件的時候，就會有藍色的虛線提示，告訴你對齊成功。如下圖“

21射手”成功和“昵稱”做到左對齊。

相對其他元件對齊

當我們希望多個元件能夠看起來視覺一致的時候，可能用到對齊功能。

比如下圖，選中“

21射手”、“互聯網”、“產品經理”這3個元件，然后在工具欄中點擊頂部對齊。對齊結果以先選擇的為準。

至于其他對齊的方式，方法是一樣的。

相對其他元件分布

繼續上面的案例，我們希望“21射手”、“互聯網”、“產品經理”這3個按鈕的間距一樣。那我們依次選中并設置水平分布。

同理根據實際場景選擇垂直分布進行使用。

先組合再對齊

如果我們希望這3個按鈕代表的整體也比較協調，那我們先把這3個按鈕組合，然后相對于矩形框左右居中，然后在取消組合即可。