干貨！通過數(shù)值設(shè)定優(yōu)化邊框間距設(shè)計技巧

在文本四周環(huán)繞的簡單邊框，不單在網(wǎng)頁設(shè)計的時候使用，也有很多在印刷品上使用。這次，我重點討論下：可以說是在設(shè)計時一定會用到的邊框。如果能夠給設(shè)計的初學(xué)者，或者說不是設(shè)計師，但是與裝訂資料接觸機會比較多的工作人員以啟發(fā)的話，將是我的榮幸。

“邊框” 這種叫法是否正確，雖說仍未可知，其實就包著文本的盒子而已。在國外叫做“展板”，“文本框”等。

如果這時候使用強調(diào)時

  使用【現(xiàn)在降價20%！】、【限時優(yōu)惠】等引人注目的元素，網(wǎng)站上經(jīng)?？梢钥匆娺@樣的提醒信息。圖是Bootstrap前端設(shè)計的提醒要素 。

元素差別化

  頁面顯示時，要把補充說明或注意事項等與主要內(nèi)容區(qū)分開來。但是，要注意如果過多使用哪個是主要的、哪個是補充要素會使頁面顯得混亂。

分組

  由于內(nèi)容分區(qū)、需要用到很多的邊框。

  邊框越是容易使用、設(shè)計時越是容易被忽視。稍微在更容易閱讀和簡潔的設(shè)計上下些功夫吧！

留白是邊框的生命！

  如果盒子的邊緣與文章之間沒有留白，非常不利于閱讀，設(shè)計也變得不會很美。留白是可以根據(jù)文字大小而改變的，最少是文字大小的1~1.5倍。舉例來說文字的大小是16px的時候，留白應(yīng)該是20px左右才便于閱讀。設(shè)計為什么看起來亂糟糟的，在這個時候就應(yīng)該首先注意留白。

圓角

  盒子的角稍微圓一些，給人柔和優(yōu)美的印象。但是，圓角也有一些注意點。

圓角的取值范圍不能太過

  圓角的取值太大，就很難與其他要素保持和諧，顯得是庸俗土氣的設(shè)計。使用圓角的邊框時，根據(jù)設(shè)計的不同，在3~10px之間調(diào)整最好。

  我在最近設(shè)計的Frog網(wǎng)站中，所有的圓角都統(tǒng)一設(shè)置成5px。

   當(dāng)然，過圓的角未必也是壞的。Nasty Blog頁面多處使用了20px以上的圓角盒子，也是很美觀和諧的。

這是配合了整體設(shè)計和充分的留白，使得頁面很干凈。我認為由于平衡起來很難，所以圓角的數(shù)值越大，越需要有經(jīng)驗的人。

圓角中的圓角

  在圓角的盒子中也有圓角框的時候，如果里面盒子的圓角大小比外面的圓角大會給人帶來不自然的印象，那就給他們設(shè)置成一樣的值或者內(nèi)側(cè)比外側(cè)更小的值吧！

在橢圓上的注意

  為了突顯重點會用到橢圓，但往往是橫向拉得太長，這樣可讀性就變低了。因此使用橢圓的話，就縮短其中的文字或換行，使其盡量接近正圓吧！

背景色（填充）和邊框色（描邊）

  給盒子添加背景色和邊框色就能完成了。如果只有背景色或只有邊框色的話能給人一種干凈利落的印象。

當(dāng)背景和邊框都加上顏色，雖然能讓盒子很引人注目，但注意點卻是在顏色上。

  如果背景色和邊框色出現(xiàn)很大的反差，則整體的視覺都會被攪亂。其實邊框色只要在背景色的的明度或彩度上做一些變化，盒子就會變得很漂亮。

有框的標題

  經(jīng)常能在標題的盒子上發(fā)現(xiàn)有設(shè)置邊框。這種情況下，背景色和邊框顏色是同色系且搭配有統(tǒng)一感的話，整體就會很整潔美觀。

  標題部分的顏色比背景色更深，則可以不用線。標題部分所占面積小還使用淺色的話，平衡性變差了再怎么樣也不協(xié)調(diào)。

  正因為簡單，才更要注重細節(jié)！懷著這樣的想法寫了這篇文章。這樣的設(shè)計只是保證最基本設(shè)計，還是需要運用各種各樣的元素的吧！

  無論怎樣都是可以的，這篇文章寫到的“邊框”的地方，每一次改變“過去固有思維”都是很麻煩的事。

翻譯：てるてる坊主、SISENdesign、晶晶、草木皆兵、牛叔-echo、群仔、寧々ちゃん

視覺設(shè)計：書簽

校對：SISENdesign

出典：http://www.webcreatorbox.com/inspiration/box-design/