• 臨沂網站建設服務熱線:0539-8120245 13969991299
當前位置: 臨沂網絡公司 > 建站問答 > 網站建設知識 >

網頁設計中留白的意義,如何在網站設計中利用

來源:臨沂網站建設-科海網絡  發布時間:2015-08-23   瀏覽次數:

留白的意義是為了實現產品的目標,而大空間和小空間的區別也讓留白更加細致,細致的結果也變成高品質的極簡主義。由于屏幕是有限的,因此網頁設計也是有限的??梢赃@么說,在屏幕這個小小的盒子中,每個像素都是一塊不動產。就算是菜鳥,也懂得一個頁面不能加載過多的內容,但涉及到究竟應該規劃多少留白,包括經驗老道的設計師或許也很茫然。今天臨沂網站建設-科海網絡就分享下關于網頁留白的內容。

留白的意義

留白,另一說為“負空間”,這兩個詞常?;Q使用。它們共同所指的都是屏幕中出現的元素之間的一種關系。所謂留白不一定是要白色,或黑色。就算是圖案、色彩或紋理背景都可以被稱為留白。負空間是在內容外創造一個空白的環境,好讓觀者將注意力更加集中于內容。

 

在此,我們將討論,設計師怎樣運用錦囊妙招中的超強致勝工具:留白。  

留白的原因
 

就像已經被大家所討論過的,負空間一開始是作為審美而不可或缺的一部分。
 

在網頁設計中,在哪里留白顯得更加重要??梢赃@么說,它決不僅僅處于視覺審美的需要,它得肩負更重要的角色,即在視覺審美與引導用戶之間達成完美平衡。而且,如果現在有一段文字,留白還需在此基礎上讓文字清晰,創造具有可讀性的環境。

 

總的來說,留白直接的影響如下。

1、眼球掃描

在網頁中,兩塊較大內容元素之間的空間(在此稱大空間),這類留白能吸引并引導用戶的眼球掃描頁面的方式。當運用得當,就能引導用戶的視線去注意那些你想突顯的元素。這在品牌標識展示或增加用戶交互行為的時候最為有效。

2、清晰度

在兩個較小的內容元素之間的空間(在此稱小空間)諸如一個文字,或一行文字,列表,圖標等,恰當的留白也能讓這些元素更加易于辨認。

3、視覺審美

當你看到一張大圖片,留白在視覺審美中發揮了很大的作用。舉例來說,如果內容亂七八糟絕不會是一張好看的圖片。

4、高品位

豐富的留白將為你的頁面灌注一種精致優雅高大上的氛圍。

為了更好的理解和運用它,我們將要梳理不同類型的留白(大空間和小空間),以及運用它們的不同的方法(被動和主動)。

大空間和小空間

網頁設計中,在哪里運用以及怎樣運用負空間將取決于它們的角色。簡言之,我們把這些角色大致分為大元素和小元素。

1、大元素的留白

大元素的留白是涉及到兩個大型元素之間的留白。主要運用于:

總體內容

獨立的不同元素

文本分列

Margin

Padding

圖片之間的距離

譯者注:這里的Margin和Padding指的是網頁設計中元素標簽外部范圍的區域。參考下圖可以幫助理解。

這類型的留白空間很大程度影響用戶的視覺流,不管是潛在引導或者強勢推動都可以讓注意力引導到你想要他們停留的地方。但在此要強調的一個法則即是距離越大動力越強。想要打破平衡,然而,由于太多的留白違反了格式塔原則,其結果就是消弱了對象間的關系。

讓我們看看下面這個網站,以此作為例子來說明留白是如何誘發用戶交互行為。

 

大多數用戶首先都會注意到頁面標題,也就是“Digital art&Experiments”這句話,而在它外圍的則是大面積的留白,這樣就使得用戶的注意力完全集中于此。

盡管頁面的頂部和底部只有一側留白,但它們也同樣可以引起注意??偠灾?,在此,留白的區域很好發揮了吸引注意力的作用,而設計也就似乎看上去不可思議的簡潔起來。

設計師實際上是采用留白區域作為一個空白幕布,以便給觀眾留下驚喜,好讓我們可以看到他的作品的豐富細節。一旦鼠標移動到底部導航的任一欄目時,幕布上就會出現作品的圖片作為背景全屏展示。這種效果創造出類似年幼時的一種探索和發現的樂趣:無意間闖入一片空白的場所,發現了每個抽屜都藏匿著豐富多彩的視覺盛宴。

你可以試試鼠標滑過時屏幕上發生的戲劇性效果。

 

通過留白區域作為工具來誘導用戶注意到他的作品,設計師創造出了一種新鮮奇特的體驗。在第一個作品出現后,我們就很想看看他還有哪些佳作。這感覺蠻吸引的,因為你將會抑制不住地想要找到最為重要的內容。但這都要建立在一個完美的點燃你好奇的切入點基礎上。

標簽:
贵州十一选五任五最大遗漏