在文本四周環(huán)繞的簡(jiǎn)單邊框,不單在網(wǎng)頁設(shè)計(jì)的時(shí)候使用,也有很多在印刷品上使用。這次,我重點(diǎn)討論下:可以說是在設(shè)計(jì)時(shí)一定會(huì)用到的邊框。如果能夠給設(shè)計(jì)的初學(xué)者,或者說不是設(shè)計(jì)師,但是與裝訂資料接觸機(jī)會(huì)比較多的工作人員以啟發(fā)的話,將是我的榮幸。
“邊框” 這種叫法是否正確,雖說仍未可知,其實(shí)就包著文本的盒子而已。在國(guó)外叫做 “展板”,“文本框” 等。
如果這時(shí)候使用
強(qiáng)調(diào)時(shí)
使用【現(xiàn)在降價(jià)20%!】、【限時(shí)優(yōu)惠】等引人注目的元素,網(wǎng)站上經(jīng)??梢钥匆娺@樣的提醒信息。圖是Bootstrap前端設(shè)計(jì)的提醒要素 。
元素差別化
頁面顯示時(shí),要把補(bǔ)充說明或注意事項(xiàng)等與主要內(nèi)容區(qū)分開來。但是,要注意如果過多使用哪個(gè)是主要的、哪個(gè)是補(bǔ)充要素會(huì)使頁面顯得混亂。
分組
由于內(nèi)容分區(qū)、需要用到很多的邊框。
邊框越是容易使用、設(shè)計(jì)時(shí)越是容易被忽視。稍微在更容易閱讀和簡(jiǎn)潔的設(shè)計(jì)上下些功夫吧!
留白是邊框的生命!
如果盒子的邊緣與文章之間沒有留白,非常不利于閱讀,設(shè)計(jì)也變得不會(huì)很美。留白是可以根據(jù)文字大小而改變的,最少是文字大小的1~1.5倍。舉例來說文字的大小是16px的時(shí)候,留白應(yīng)該是20px左右才便于閱讀。設(shè)計(jì)為什么看起來亂糟糟的,在這個(gè)時(shí)候就應(yīng)該首先注意留白。
圓角
盒子的角稍微圓一些,給人柔和優(yōu)美的印象。但是,圓角也有一些注意點(diǎn)。
圓角的取值范圍不能太過
圓角的取值太大,就很難與其他要素保持和諧,顯得是庸俗土氣的設(shè)計(jì)。使用圓角的邊框時(shí),根據(jù)設(shè)計(jì)的不同,在3~10px之間調(diào)整最好。
我在最近設(shè)計(jì)的Frog網(wǎng)站中,所有的圓角都統(tǒng)一設(shè)置成5px。
當(dāng)然,過圓的角未必也是壞的。Nasty Blog頁面多處使用了20px以上的圓角盒子,也是很美觀和諧的。
這是配合了整體設(shè)計(jì)和充分的留白,使得頁面很干凈。我認(rèn)為由于平衡起來很難,所以圓角的數(shù)值越大,越需要有經(jīng)驗(yàn)的人。
圓角中的圓角
在圓角的盒子中也有圓角框的時(shí)候,如果里面盒子的圓角大小比外面的圓角大會(huì)給人帶來不自然的印象,那就給他們?cè)O(shè)置成一樣的值或者內(nèi)側(cè)比外側(cè)更小的值吧!
在橢圓上的注意
為了突顯重點(diǎn)會(huì)用到橢圓,但往往是橫向拉得太長(zhǎng),這樣可讀性就變低了。因此使用橢圓的話,就縮短其中的文字或換行,使其盡量接近正圓吧!
背景色(填充)和邊框色(描邊)
給盒子添加背景色和邊框色就能完成了。如果只有背景色或只有邊框色的話能給人一種干凈利落的印象。
當(dāng)背景和邊框都加上顏色,雖然能讓盒子很引人注目,但注意點(diǎn)卻是在顏色上。
如果背景色和邊框色出現(xiàn)很大的反差,則整體的視覺都會(huì)被攪亂。其實(shí)邊框色只要在背景色的的明度或彩度上做一些變化,盒子就會(huì)變得很漂亮。
有框的標(biāo)題
經(jīng)常能在標(biāo)題的盒子上發(fā)現(xiàn)有設(shè)置邊框。這種情況下,背景色和邊框顏色是同色系且搭配有統(tǒng)一感的話,整體就會(huì)很整潔美觀。
標(biāo)題部分的顏色比背景色更深,則可以不用線。標(biāo)題部分所占面積小還使用淺色的話,平衡性變差了再怎么樣也不協(xié)調(diào)。
正因?yàn)楹?jiǎn)單,才更要注重細(xì)節(jié)!懷著這樣的想法寫了這篇文章。這樣的設(shè)計(jì)只是保證最基本設(shè)計(jì),還是需要運(yùn)用各種各樣的元素的吧!
無論怎樣都是可以的,這篇文章寫到的“邊框”的地方,每一次改變“過去固有思維”都是很麻煩的事。