矩形框：深度理解和應用元件樣式

此文可能是所有文章里最為基礎的一篇，但是相信它會給你帶來紮實的原型設計基礎知識。

矩形框，在Axure自帶的元件庫里，是一個普通的不能再普通的元件。系統提供三種類型，有邊框白色背景、無邊框淺灰色背景和無邊框深灰色背景。

然而，我們有時候可能小看了這個元件。畢竟，只是一個矩形框而已，能有多大的用處呢？

下面，我們從矩形框的基本樣式設置、交互樣式設置和屬性設置三個方面，來看看矩形框到底有多麼的有用。

一、基本樣式設置

矩形的基本樣式設置主要包括背景顏色、背景陰影，邊框顏色、邊框線寬、邊框線段類型、邊框可見性，圓角半徑和對齊方式，其它的樣式不常用，暫不贅述。

1、背景顏色

• 樣式說明：作為背景顏色，比較簡單些，可以設置為單色或者漸變色。
• 應用場景：顯示區域背景、交互按鈕。
• 應用案例：在帶有標題欄的區域中間，放置兩個按鈕，一個扁平化按鈕，一個漸變色按鈕。

（1）從元件庫里拖動一個無邊框【深灰色】背景矩形框，大小設置為600*40，作為標題欄，雙擊設置文字內容為「背景顏色的應用」。

（2）再從元件庫里拖動一個無邊框【淺灰色】背景矩形框，大小設置為600*300，作為內容區域，放在上面標題欄下方。

（3）添加兩個無邊框矩形，大小150*50，第一個直接設置背景顏色為灰色，第二個設置背景顏色深灰色到淺灰色的漸變過渡。

小結：通過設置矩形的大小、填充顏色，我們就以將矩形作為區域背景以及按鈕來使用。當然，我們沒有對按鈕的樣式進一步說明，後面我們將對矩形框按鈕的樣式繼續深入介紹。

2、背景陰影

• 樣式說明：對背景陰影，它的效果是出現在矩形框的四周，因此常用的場景是顯示區域的邊框陰影或發光效果。
• 應用場景：內容區域的背景，和同顏色的背景區分開來。
• 應用案例：一個帶有陰影效果的彈出窗口。

（1）添加一個淺灰色無邊框矩形，大小為400*200，作為彈出窗口的背景。

（2）添加一個深灰色無邊框矩形，大小為400*40，作為彈出窗口的標題，放在和上面的背景框相同位置，設置文字內容為「標題欄」。

（3）選擇窗口背景矩形框，設置邊框陰影，偏移位置中x和y都為0，也就是陰影沒有某個方向偏移，這樣達到的效果就是在矩形框的四周都有陰影，再設置模糊大小為25，顏色為默認，效果如下：

預覽一下，看看實際效果，看起來很漂亮：

小結：通過設置矩形框的邊框陰影，就能完成樣式很好看的彈出窗口，我們進一步只要將標題欄和內容區域轉換為動態面板，就可以當作彈出窗口使用了。

3、邊框顏色、線寬、線段類型、邊框可見性

• 樣式說明：有邊框的矩形，默認是黑色邊框，常常並不好看，例如黑色邊框的按鈕，總是那麼深沉。線寬是粗細的體現；線段類型其實用的也不多，可能更多在設置虛線邊框樣式的時候使用；而邊框的可見性還是比較有用。
• 應用場景：普通有邊框按鈕、帶有選中狀態樣式的導航菜單。
• 應用案例：一個導航菜單，右側有一個中英文切換按鈕。

（1）添加一個有邊框白色矩形，大小為150*50，設置背景為灰色，邊框比背景顏色稍微深一些。

（2）修改矩形框的樣式，邊框設置為最粗，同時設置邊框的可見性中只保留下邊框：

（3）這時，我想你應該已經看出它的基本樣式了，可作為導航菜單中的第一個選中菜單。複製這個矩形菜單三個，分別設置文字為產品、商城和論壇，取消邊框：

（4）再複製一下「首頁」按鈕，顯示所有邊框，並設置邊框為最細，文字內容設置為「ENGLISH」：

預覽一下整體效果：

小結：可以看到上面的導航菜單的初步效果，雖然沒有交互效果，但是樣式基本滿足要求，當前處於選中狀態的首頁菜單，以及其它導航菜單和按鈕，在下一篇的交互樣式中我們會繼續完成這個例子。

4、圓角設置

• 樣式說明：圓角是指矩形的四個直角可以調整為指定半徑大小的圓形，看起來更美觀。
• 應用場景：也是常常作為內容區域的背景。
• 應用案例：圓角標題欄彈出窗口

（1）回到前面的彈出窗口示例，選擇彈出窗口的內容區域背景和標題欄，設置圓角大小都為8：

（2）但是，我們發現這樣設置出現了問題，矩形框的四周都被設置成了圓角，顯然不太美觀。幸好，圓角也可以指定在哪個方向上是否可見，我們把下邊兩處不要設置為圓角，同時調整一下背景陰影的大小為10：

再預覽一下效果，這時就美觀多了，只有上標題欄的上半部分帶有圓角效果：

小結：圓角也像邊框的可見性一樣，指定某個角可以顯示圓角，更加的靈活。

5、對齊方式，文字邊距

• 樣式說明：矩形框中的文字對齊方式容易理解，根據實際需要設置對齊方式即可，同時可以調整文字距離邊框的距離。
• 應用場景：作為標題欄，對齊方式應用的比較多。
• 應用案例：彈出窗口的標題欄對方式

（1）繼續前面的彈出框，選擇標題欄，設置文字對齊方式為左對齊：

（2）可是我們又發現，這個文字太靠左了，看起來很擠，邊距的設置可以派上用場了，設置左邊距為10：

好了，這樣好多了。

小結：從前面矩形框的背景顏色設置、陰影、邊框、圓角、對齊方式等基本樣式的設置，我們可以完成原型設計過程中許多常見的界面樣式，可以滿足我們產品原型設計過程中80%的樣式和布局。

怎麼樣，是否開始發現小小矩形框的強大之處？

在下一篇里，我們將結合交互樣式和屬性的設置，更進一步了解矩形框元件的強大之處。

本文由 @ Axure原型設計工場 原創發佈於人人都是產品經理。未經許可，禁止轉載。