針對網頁和紙張,所使用的間距設計技巧

發表於2016-07-09

922f5770df400000018c1b657e5a.jpg

在文字四周環繞的簡單邊框,不單在網頁設計的時候使用,也有很多在印刷品上使用。這次,我重點討論下:可以說是在設計時一定會用到的邊框。如果能夠給設計的初學者,或者說不是設計師,但是與裝訂資料接觸機會比較多的工作人員以啟發的話,將是我的榮幸。

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

如果這時候使用

強調時

7fa55770dd430000012e7edf62e5.jpg

使用【現在降價20%!】、【限時優惠】等引人注目的元素,網站上經常可以看見這樣的提醒資訊。圖是Bootstrap前端設計的提醒要素 。

元素差別化

67b85770dd520000018c1be93107.jpg

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

分組

81275770dd690000018c1be49ea3.jpg

由於內容分割槽、需要用到很多的邊框。

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

留白是邊框的生命!

3c265770dd8b0000012e7eea5b97.jpg

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

圓角

盒子的角稍微圓一些,給人柔和優美的印象。但是,圓角也有一些注意點。

圓角的取值範圍不能太過

0e585770dda90000018c1b617d60.jpg

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

31625770ddd90000012e7e3bb901.jpg

我在最近設計的Frog網站中,所有的圓角都統一設定成5px。

b01f5770de060000012e7ec2a8c4.jpg   當然,過圓的角未必也是壞的。Nasty Blog頁面多處使用了20px以上的圓角盒子,也是很美觀和諧的。

這是配合了整體設計和充分的留白,使得頁面很乾淨。我認為由於平衡起來很難,所以圓角的數值越大,越需要有經驗的人。

圓角中的圓角

93b35770de2b0000018c1b589cd4.jpg

在圓角的盒子中也有圓角框的時候,如果裡面盒子的圓角大小比外面的圓角大會給人帶來不自然的印象,那就給他們設定成一樣的值或者內側比外側更小的值吧!

在橢圓上的注意

50d25770de3e0000012e7ebd92f1.jpg

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

背景色(填充)和邊框色(描邊)

b1375770de510000018c1beadd5d.jpg

給盒子新增背景色和邊框色就能完成了。如果只有背景色或只有邊框色的話能給人一種乾淨利落的印象。

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

b1995770de7d0000012e7eaedda6.jpg

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

有框的標題

03045770de950000018c1b69153b.jpg

經常能在標題的盒子上發現有設定邊框。這種情況下,背景色和邊框顏色是同色系且搭配有統一感的話,整體就會很整潔美觀。

25255770dec40000018c1b4ade7e.jpg

標題部分的顏色比背景色更深,則可以不用線。標題部分所佔面積小還使用淺色的話,平衡性變差了再怎麼樣也不協調。

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

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

【DATS翻譯小組】:てるてる坊主、SISENdesign、晶晶、草木皆兵、牛叔-echo、群仔、寧々ちゃん

視覺設計:書籤

校對:SISENdesign

相關文章