網站網頁設計中留白的細節

  人氣:772   發布時間:2017-11-09 18:04:41 【

留白是指版面中沒有編排任何元素的空白區域。本期我們所講的留白并非指的是某種特定風格的設計形式,而是在任何設計中都存在的,大到版心小到字間距的那些留白細節。恰恰是這些不起眼的細節部分,決定的一個設計的品質高低。只要認真掌握好這些基本原則,也就可以做出與之前完全不同的優秀版面。




網站設計中留白有哪些作用:

1.區分與鏈接,均等的留白能夠將元素鏈接在一起,會傳遞出統一感和平穩感,通過控制留白的面積大小關系,則可以將不相關的元素區分開來。接下來我們以生活中常見的手機圖標為例,來解釋留白中區分與鏈接的應用。

2.突出強調,通過改變花瓶的位置,讓放置在大面積留白中的花瓶得到了強調,即使不需要放大也會顯得格外醒目。四周的大面積留白讓焦點更加突出,從而提高了元素的識別度。


留白在版面中無處不在,小到文字之間的距離,大到整個版面與版心的大小,把控好每個部分的留白,是版式設計中非常重要的部分,這里我們將依次講解留白在不同情況下的應用與注意事項。


文字間距的留白:

無論元素如何放大與縮小,人眼能夠識別到的最小比例是不會跟著改變的。上圖中方塊間的距離在大比例的情況下不會顯得有什么問題,當等比縮小后方塊間幾乎黏在了一起,這種情況下我們需要重新調整方塊之間的距離。


漢字是在虛擬的方框中設計出來的,字庫中字體的間距是針對常規正文字號下設置的,當我們把文字縮小后,出現了與上面方塊同樣的情況,文字產生了黏連,這時我們需要加大文字間的留白,而將文字放大后也是同樣的道理,需要減小文字間的留白距離。


拉丁字母與漢字不同,字體的字面是不等寬的,所以我們需要單獨設置每個文字之間的留白距離,分別比對字體默認的字偶間距與軟件自帶的視覺間距(這里為了不被字意干擾,我們將字體鏡像顯示),兩種設置均不是特別理想。


默認的字偶間距需要顧及到與不同字母的搭配情況,而針對特定文字組合的單詞來說,我們可以更精確的調整文字間的留白距離。訣竅在于視覺上的均衡,千萬不要死記數據。


留白在版式設計的各個環節中都扮演著重要角色,我們本期學習了留白的作用與注意事項,了解了從字距的設置到整個版面的布局中的留白細節,相信大家已經掌握了比例與留白之間的關系,并能夠在今后的設計當中加以運用。
理論知識并非刻板絕對的,優秀的版面是建立在成熟的審美基礎之上,靈活運用才是關鍵所在。

[返回]

免費咨詢

  • 張小姐: QQ
  • 姚經理: QQ
  • 周先生: QQ
  • 13580784249
试机号后分析汇总牛材网