由于屏幕是有限的,因此
網(wǎng)頁設(shè)計(jì)也是有限的??梢赃@么說,在屏幕這個(gè)小小的盒子中,每個(gè)像素都是一塊不動產(chǎn)。
就算是菜鳥,也懂得一個(gè)頁面不能加載過多的內(nèi)容,但涉及到究竟應(yīng)該規(guī)劃多少留白,包括經(jīng)驗(yàn)老道的設(shè)計(jì)師或許也很茫然。
留白,另一說為“負(fù)空間”,這兩個(gè)詞常?;Q使用。它們共同所指的都是屏幕中出現(xiàn)的元素之間的一種關(guān)系。所謂留白不一定是要白色,或黑色。就算是圖案、色彩或紋理背景都可以被稱為留白。負(fù)空間是在內(nèi)容外創(chuàng)造一個(gè)空白的環(huán)境,好讓觀者將注意力更加集中于內(nèi)容。
這篇文章中,創(chuàng)新互聯(lián)
成都網(wǎng)頁設(shè)計(jì)我們將討論,怎樣運(yùn)用設(shè)計(jì)師的錦囊妙招中的超強(qiáng)致勝工具:留白。
留白的原因
就像已經(jīng)被大家所討論過的,負(fù)空間一開始是作為審美而不可或缺的一部分。
在網(wǎng)頁設(shè)計(jì)中,在哪里留白顯得更加重要??梢赃@么說,它決不僅僅處于視覺審美的需要,它得肩負(fù)更重要的角色,即在視覺審美與引導(dǎo)用戶之間達(dá)成好平衡。而且,如果現(xiàn)在有一段文字,留白還需在此基礎(chǔ)上讓文字清晰,創(chuàng)造具有可讀性的環(huán)境。
總的來說,留白直接的影響如下。
1、眼球掃描
在網(wǎng)頁中,兩塊較大內(nèi)容元素之間的空間(在此稱大空間),這類留白能吸引并引導(dǎo)用戶的眼球掃描頁面的方式。當(dāng)運(yùn)用得當(dāng),就能引導(dǎo)用戶的視線去注意那些你想突顯的元素。這在品牌標(biāo)識展示或增加用戶交互行為的時(shí)候最為有效。
2、清晰度
在兩個(gè)較小的內(nèi)容元素之間的空間(在此稱小空間)諸如一個(gè)文字,或一行文字,列表,圖標(biāo)等,恰當(dāng)?shù)牧舭滓材茏屵@些元素更加易于辨認(rèn)。
3、視覺審美
當(dāng)你看到一張大圖片,留白在視覺審美中發(fā)揮了很大的作用。舉例來說,如果內(nèi)容亂七八糟絕不會是一張好看的圖片。
4、高品位
豐富的留白將為你的頁面灌注一種精致優(yōu)雅的氛圍。
為了更好的理解和運(yùn)用它,我們將要梳理不同類型的留白(大空間和小空間),以及運(yùn)用它們的不同的方法(被動和主動)。
大空間和小空間
網(wǎng)頁設(shè)計(jì)中,在哪里運(yùn)用以及怎樣運(yùn)用負(fù)空間將取決于它們的角色。簡言之,我們把這些角色大致分為大元素和小元素。
1、大元素的留白
大元素的留白是涉及到兩個(gè)大型元素之間的留白。主要運(yùn)用于:
總體內(nèi)容
獨(dú)立的不同元素
文本分列
Margin
Padding
圖片之間的距離
這類型的留白空間很大程度影響用戶的視覺流,不管是潛在引導(dǎo)或者強(qiáng)勢推動都可以讓注意力引導(dǎo)到你想要他們停留的地方。但在此要強(qiáng)調(diào)的一個(gè)法則即是### 距離越大動力越強(qiáng)。想要打破平衡,然而,由于太多的留白違反了格式塔原則,其結(jié)果就是消弱了對象間的關(guān)系。
讓我們看看下面這個(gè)網(wǎng)站,以此作為例子來說明留白是如何誘發(fā)用戶交互行為。
大多數(shù)用戶首先都會注意到頁面標(biāo)題,也就是“Digital art&Experiments”這句話,而在它外圍的則是大面積的留白,這樣就使得用戶的注意力完全集中于此。
盡管頁面的頂部和底部只有一側(cè)留白,但它們也同樣可以引起注意??偠灾诖?,留白的區(qū)域很好發(fā)揮了吸引注意力的作用,而設(shè)計(jì)也就似乎看上去不可思議的簡潔起來。
設(shè)計(jì)師實(shí)際上是采用留白區(qū)域作為一個(gè)空白幕布,以便給觀眾留下驚喜,好讓我們可以看到他的作品的豐富細(xì)節(jié)。一旦鼠標(biāo)移動到底部導(dǎo)航的任一欄目時(shí),幕布上就會出現(xiàn)作品的圖片作為背景全屏展示。這種效果創(chuàng)造出類似年幼時(shí)的一種探索和發(fā)現(xiàn)的樂趣:無意間闖入一片空白的場所,發(fā)現(xiàn)了每個(gè)抽屜都藏匿著豐富多彩的視覺盛宴。
你可以試試鼠標(biāo)滑過時(shí)屏幕上發(fā)生的戲劇性效果。
通過留白區(qū)域作為工具來誘導(dǎo)用戶注意到他的作品,設(shè)計(jì)師創(chuàng)造出了一種新鮮奇特的體驗(yàn)。在第一個(gè)作品出現(xiàn)后,我們就很想看看他還有哪些佳作。這感覺蠻吸引的,因?yàn)槟銓种撇蛔〉叵胍业阶顬橹匾膬?nèi)容。但這都要建立在一個(gè)好的點(diǎn)燃你好奇的切入點(diǎn)基礎(chǔ)上。
2、小元素的留白
另一方面來說,當(dāng)設(shè)計(jì)師們談到小元素留白,他們通常是指的較小的元素或是較大元素中的次級元素的留白。他們包括:
字體
行距
段落
列表
按鈕
圖標(biāo)
小元素的留白最多被用在強(qiáng)調(diào)網(wǎng)站整體的清晰度上面,尤其是在排版的清晰度上。當(dāng)你試圖利用文字間的留白打破平衡,保持清晰易讀的同時(shí)又能不至于太過而讓它偏離了重要的內(nèi)容。我在這里,僅僅是一個(gè)提議,建議將英文行距設(shè)置為1.5px最為好。(譯者按:這里的作者沒有考慮中文字體的行距)
就像格式塔規(guī)律中談到的,讓距離較近的元素視覺上更為接近,這將暗示它們具有相同的功能。小元素的留白將會讓用戶知道按鈕與鏈接之間的關(guān)系,而同樣的留白將強(qiáng)化這種機(jī)制,這在用戶使用過程中進(jìn)一步增強(qiáng)認(rèn)知度。
盡管留白被分為了大元素和小元素兩種類型,每一種類型也有主動與被動兩種用法。
被動留白與主動留白
留白的應(yīng)用其實(shí)都是取決于內(nèi)容。
就像此前談到的,留白越多,內(nèi)容的吸引力就越強(qiáng)。但是,你不會想要頁面的每個(gè)元素都具有大吸引力,更別提有限的屏幕空間了。
那就讓我們看看被動和主動的留白是如何幫助負(fù)空間達(dá)到視覺平衡的。
1、被動空間
我們把被動的留白視為空的最小化。
沒有足夠的留白,一個(gè)網(wǎng)站將會變得無法閱讀而失去方向,所有的精力都被用于對抗視覺的混亂。被動的留白就是用空白區(qū)域去試著讓網(wǎng)站易于理解。
請看上面的例子,導(dǎo)航里的每個(gè)鏈接間的距離,再看看下面這行文字,行距,字間距等。你能看出什么不同尋常的嗎?……答案是你一定找不出。沒錯(cuò)!這些空間和距離都是如此微不足道,根本不會引起你的注意。這就是所謂的被動留白。
對于大元素的留白,被動空間意味著足夠多的border和margin的空間去強(qiáng)調(diào)元素之間的不同,避免混淆。舉例來說,就像導(dǎo)航和注冊都在網(wǎng)頁頂部,但彼此間間隔了一定的距離。
對于小元素的留白,被動空間就包括了字符,文字,段落的大可讀性,以及當(dāng)出現(xiàn)列表或下拉框菜單時(shí),每行文字或每個(gè)選項(xiàng)間的獨(dú)立性。
被動空間的應(yīng)用應(yīng)該是自然而然的。實(shí)際上,### 被動留白的主要目的甚至可以說就是不被注意。當(dāng)你試著營造一塊被動空間,那么你要讓它看起來不那么引人注意,就簡簡單單的視之正常為。
當(dāng)安置好所有的被動空間,接下來才涉及到主動的部分。
2、主動空間
在上面的這個(gè)網(wǎng)頁中頁面里有好幾個(gè)元素:菜單欄按鈕、下拉箭頭、下拉提示等,然而,屏幕中占據(jù)主導(dǎo)地位的是中間的黑色文字,這讓其他的元素都放在了周圍,設(shè)計(jì)師放大了中間的留白區(qū)域,然后把最重要的信息放在這里,讓用戶的注意力完全集中于此。
同時(shí),減少兩行元素間的距離,這一過程也許可稱得上是一種“隱藏”的方式。就像你常常在網(wǎng)站上見到的法律申明和版權(quán)信息一樣。請看如下的例子,“FiberSensing is an HBM Brand”的展示效果很容易讓人忽略。
大元素的留白通常是用于創(chuàng)造首要的注意力,或是將一堆重要信息分散開來。
然而,有時(shí)候小元素的留白也可以采用主動的方式,有的設(shè)計(jì)師就使用主動的空間將重要的引言或者段落等形成一段文字獨(dú)立出來而吸引注意。這的確是一個(gè)強(qiáng)調(diào)重點(diǎn)內(nèi)容的好辦法。
極簡主義
留白越多,也可以說你的頁面就越趨向極簡風(fēng)格,你通過刪減很多元素來避免凌亂。
極簡風(fēng)格是一種設(shè)計(jì)的哲學(xué),可以說它不好但也不壞。它祛除了所有能帶給用戶視覺干擾的雜碎,而讓用戶關(guān)注到你所展示的重要內(nèi)容。沒有了噪音,剩下的精華內(nèi)容就呈現(xiàn)在一片優(yōu)雅的留白中。
極簡風(fēng)格在兩個(gè)方面影響你的網(wǎng)站:現(xiàn)存的元素?cái)?shù)量,高品位的氛圍。
1、元素?cái)?shù)量
你的頁面存在的元素越少,那么頁面剩下的元素就顯得越重要。
如果頁面只有一個(gè)元素,即使它蜷縮在角落里,仍然是你的用戶關(guān)注的焦點(diǎn)。如果你的頁面有成千上萬的小元素,你的用戶也許會隨機(jī)地尋找他們的興趣點(diǎn),或者由于選擇太多而放棄。
這樣一種相關(guān)性,讓我們深知,在你的設(shè)計(jì)中要增加留白,最簡單的方式就是減少頁面元素?cái)?shù)量。但我們知道說起來容易做起來難。極簡主義可以說適用于任何網(wǎng)站,你絕不會想要把用戶不需要的也填充到網(wǎng)頁上。然而,作為視覺審美來說,極簡風(fēng)未必適合所有的網(wǎng)站,尤其是對于內(nèi)容豐富的網(wǎng)站來說,就不會愿意這樣光禿禿的一覽無余的畫面。
當(dāng)提到極簡主義,請大家記得,我們不是僅僅在談?wù)搶徝婪矫?,它也不是我們的目?biāo)。恰如其分達(dá)到極簡風(fēng)格的水平是去精簡頁面元素,直到不能使用。這需要在用戶中進(jìn)行大量測試,然后在你減少的最多時(shí)停止。
就像上面的例子中,整個(gè)頁面只有兩個(gè)可點(diǎn)擊元素:菜單欄圖標(biāo)和下拉箭頭。信息已經(jīng)被極簡化處理放在了屏幕右側(cè)。元素少之又少,因而用戶注意力就放在了中間的那張極富感染力的圖片上,同時(shí)視線也會引導(dǎo)至下拉箭頭。
你怎樣去平衡元素的重要性完全由自己決定。有些頁面就只設(shè)置一個(gè)可點(diǎn)擊的鏈接,這樣確保了用戶去到設(shè)計(jì)師想要他們?nèi)サ牡胤?。而有的頁面給了多個(gè)下拉選項(xiàng)供用戶選擇。你可以考慮去掉標(biāo)語,突出內(nèi)容,簡化導(dǎo)航,當(dāng)然這全取決于你的品牌和產(chǎn)品。
2、高品位的氛圍
極簡風(fēng)現(xiàn)在變成了高品位的同義詞,它能魔法般地營造出一種精細(xì)、時(shí)尚和優(yōu)雅的氛圍。時(shí)尚行業(yè)的網(wǎng)站在數(shù)字設(shè)計(jì)方面都是傾向極簡的,但是對于一些零售行業(yè)的企業(yè)來說,還很少看到有類似的設(shè)計(jì)。
高品位的氛圍是與留白有著直接的聯(lián)系的:
重度留白:可以見到一些奢華、高端的品牌中使用。
中度留白:比較平衡但仍是有品質(zhì)的。
低度留白:可見于一些廉價(jià)的、質(zhì)低的、凌亂的展示效果中
你可以用亞馬遜的網(wǎng)站和剛剛上面那個(gè)網(wǎng)站進(jìn)行對比,亞馬遜的網(wǎng)站內(nèi)容凌亂而且導(dǎo)航的選項(xiàng)繁多。兩個(gè)網(wǎng)站都出售了高端的時(shí)尚產(chǎn)品,但典型時(shí)尚客戶會更喜歡哪一個(gè)呢?而那些理性的喜歡追逐價(jià)廉物美的購物者又喜歡哪一種?
這些是應(yīng)用在大元素和小元素的留白空間,但同樣重要的是網(wǎng)站使用的圖片。瀏覽那些時(shí)尚網(wǎng)站所用的圖片,你會發(fā)現(xiàn)比其他普通網(wǎng)站使用的圖片更具有藝術(shù)感。
總之,你還是需要從了解自己的客戶需求開始。研究你的用戶,他們的特點(diǎn),然后再考慮用多少留白來展示自己的信息,讓用戶體驗(yàn)最優(yōu)化。
后記
作為一種視覺藝術(shù),設(shè)計(jì)不能忽略最重要的視覺藝術(shù)基本原則。它需要滿足審美的同時(shí)也要?jiǎng)?chuàng)造出更為長遠(yuǎn)的實(shí)際價(jià)值,比如更多的互動,更人性化的交互。
對于入門的設(shè)計(jì)師來說,做網(wǎng)頁設(shè)計(jì)只是增加一個(gè)頁面的可操作元素。但是對于高級設(shè)計(jì)師,做網(wǎng)頁設(shè)計(jì)是如何巧妙的使用留白去引導(dǎo)用戶進(jìn)行交互。
本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:網(wǎng)頁設(shè)計(jì), 重慶網(wǎng)站建設(shè), 成都網(wǎng)頁設(shè)計(jì), 成都網(wǎng)站設(shè)計(jì), 網(wǎng)站開發(fā)
分享標(biāo)題:網(wǎng)頁設(shè)計(jì)中的負(fù)空間
鏈接URL:http://m.rwnh.cn/news22/171072.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、商城網(wǎng)站、Google、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計(jì)、移動網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)