此文可能是所有文章里最為基礎(chǔ)的一篇，但是相信它會給你帶來扎實(shí)的原型設(shè)計(jì)基礎(chǔ)知識。

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

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

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

一、基本樣式設(shè)置

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

1、背景顏色

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

（1）從元件庫里拖動一個(gè)無邊框【深灰色】背景矩形框，大小設(shè)置為600*40，作為標(biāo)題欄，雙擊設(shè)置文字內(nèi)容為“背景顏色的應(yīng)用”。

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

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

小結(jié)：通過設(shè)置矩形的大小、填充顏色，我們就以將矩形作為區(qū)域背景以及按鈕來使用。當(dāng)然，我們沒有對按鈕的樣式進(jìn)一步說明，后面我們將對矩形框按鈕的樣式繼續(xù)深入介紹。

2、背景陰影

• 樣式說明：對背景陰影，它的效果是出現(xiàn)在矩形框的四周，因此常用的場景是顯示區(qū)域的邊框陰影或發(fā)光效果。
• 應(yīng)用場景：內(nèi)容區(qū)域的背景，和同顏色的背景區(qū)分開來。
• 應(yīng)用案例：一個(gè)帶有陰影效果的彈出窗口。

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

（2）添加一個(gè)深灰色無邊框矩形，大小為400*40，作為彈出窗口的標(biāo)題，放在和上面的背景框相同位置，設(shè)置文字內(nèi)容為“標(biāo)題欄”。

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

預(yù)覽一下，看看實(shí)際效果，看起來很漂亮：

小結(jié)：通過設(shè)置矩形框的邊框陰影，就能完成樣式很好看的彈出窗口，我們進(jìn)一步只要將標(biāo)題欄和內(nèi)容區(qū)域轉(zhuǎn)換為動態(tài)面板，就可以當(dāng)作彈出窗口使用了。

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

• 樣式說明：有邊框的矩形，默認(rèn)是黑色邊框，常常并不好看，例如黑色邊框的按鈕，總是那么深沉。線寬是粗細(xì)的體現(xiàn)；線段類型其實(shí)用的也不多，可能更多在設(shè)置虛線邊框樣式的時(shí)候使用；而邊框的可見性還是比較有用。
• 應(yīng)用場景：普通有邊框按鈕、帶有選中狀態(tài)樣式的導(dǎo)航菜單。
• 應(yīng)用案例：一個(gè)導(dǎo)航菜單，右側(cè)有一個(gè)中英文切換按鈕。

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

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

（3）這時(shí)，我想你應(yīng)該已經(jīng)看出它的基本樣式了，可作為導(dǎo)航菜單中的第一個(gè)選中菜單。復(fù)制這個(gè)矩形菜單三個(gè)，分別設(shè)置文字為產(chǎn)品、商城和論壇，取消邊框：

（4）再復(fù)制一下“首頁”按鈕，顯示所有邊框，并設(shè)置邊框?yàn)樽罴?xì)，文字內(nèi)容設(shè)置為“ENGLISH”：

預(yù)覽一下整體效果：

小結(jié)：可以看到上面的導(dǎo)航菜單的初步效果，雖然沒有交互效果，但是樣式基本滿足要求，當(dāng)前處于選中狀態(tài)的首頁菜單，以及其它導(dǎo)航菜單和按鈕，在下一篇的交互樣式中我們會繼續(xù)完成這個(gè)例子。

4、圓角設(shè)置

• 樣式說明：圓角是指矩形的四個(gè)直角可以調(diào)整為指定半徑大小的圓形，看起來更美觀。
• 應(yīng)用場景：也是常常作為內(nèi)容區(qū)域的背景。
• 應(yīng)用案例：圓角標(biāo)題欄彈出窗口

（1）回到前面的彈出窗口示例，選擇彈出窗口的內(nèi)容區(qū)域背景和標(biāo)題欄，設(shè)置圓角大小都為8：

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

再預(yù)覽一下效果，這時(shí)就美觀多了，只有上標(biāo)題欄的上半部分帶有圓角效果：

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

5、對齊方式，文字邊距

• 樣式說明：矩形框中的文字對齊方式容易理解，根據(jù)實(shí)際需要設(shè)置對齊方式即可，同時(shí)可以調(diào)整文字距離邊框的距離。
• 應(yīng)用場景：作為標(biāo)題欄，對齊方式應(yīng)用的比較多。
• 應(yīng)用案例：彈出窗口的標(biāo)題欄對方式

（1）繼續(xù)前面的彈出框，選擇標(biāo)題欄，設(shè)置文字對齊方式為左對齊：

（2）可是我們又發(fā)現(xiàn)，這個(gè)文字太靠左了，看起來很擠，邊距的設(shè)置可以派上用場了，設(shè)置左邊距為10：

好了，這樣好多了。

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

怎么樣，是否開始發(fā)現(xiàn)小小矩形框的強(qiáng)大之處？

在下一篇里，我們將結(jié)合交互樣式和屬性的設(shè)置，更進(jìn)一步了解矩形框元件的強(qiáng)大之處。

本文由 @ Axure原型設(shè)計(jì)工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。