如何有效利用網(wǎng)頁設(shè)計(jì)中的留白

關(guān)注互聯(lián)網(wǎng)河爹,關(guān)注硅谷堂植捎。想了解更多關(guān)于互聯(lián)網(wǎng)崗位知識的信息贩挣,關(guān)注微信公眾號:硅谷堂(ID:guigutang)或下載“硅谷堂”APP剂碴。


小編:留白一直是設(shè)計(jì)中不朽的話題把将,也是設(shè)計(jì)中最有難度的一個地方之一。如果你還僅僅把留白當(dāng)作設(shè)計(jì)中空白的區(qū)域忆矛,那你就永遠(yuǎn)無法體會到留白的妙處察蹲。作者為我們提供了一個全新的視角,將留白作為一個獨(dú)立的設(shè)計(jì)元素來看待催训,它可以幫助我們實(shí)現(xiàn)聚焦洽议,組織和強(qiáng)調(diào)的目的。一起來學(xué)習(xí)下留白的運(yùn)用吧~

你是否發(fā)現(xiàn)自己曾經(jīng)盯著一個已經(jīng)完成的設(shè)計(jì)在想漫拭,“是不是少了點(diǎn)什么亚兄?”更準(zhǔn)確地說,你是否曾經(jīng)對一個設(shè)計(jì)得出它“太空”或者“太滿”的結(jié)論采驻?對于我們設(shè)計(jì)師而言审胚,如果沒有遭遇到這種情況匈勋,就很難在技能上有所提升。

這確實(shí)也沒什么可驚訝的膳叨。畢竟洽洁,我們工作最基本的原則就是在圍繞著如何創(chuàng)造性地去除空白區(qū)域。然而菲嘴,盡管它是我們工作中最核心的部分饿自,它仍然始終是設(shè)計(jì)中最困難的部分之一。

如何有效地利用空白區(qū)域呢临谱?

留白真的是空白嗎璃俗?

你是否曾經(jīng)認(rèn)為留白是“設(shè)計(jì)中的空間”?盡管對于設(shè)計(jì)中的空白處來說這是一個普遍流行的觀點(diǎn)悉默,但這種觀點(diǎn)是完全不正確的城豁。留白不僅僅只是設(shè)計(jì)元素之間的填充物,它本身就是一個十分重要的設(shè)計(jì)元素抄课!

留白就像是磚塊之間的灰泥或是彩色馬賽克玻璃之間的粘合劑唱星。盡管我們的眼睛被訓(xùn)練來欣賞內(nèi)容——磚塊和多彩的玻璃——但是內(nèi)容之間的部分才是將整個內(nèi)容整合在一起,并幫助形成設(shè)計(jì)整體的形態(tài)跟磨。

Beatbox Academy

就像一個漂亮的馬賽克玻璃之間沒有膠水间聊,我們的設(shè)計(jì)沒有了留白就只會成為一堆混亂的色塊。一旦你在設(shè)計(jì)中認(rèn)識到了所謂的空白元素的重要性抵拘,你就能夠更好地去充分利用留白哎榴。

焦點(diǎn)

既然我們已經(jīng)建立了對于留白在設(shè)計(jì)中的重要性的認(rèn)識,那么該怎么運(yùn)用呢僵蛛?

讓我們從一個小練習(xí)開始尚蝌。在你最喜歡的瀏覽器中打開一個新的標(biāo)簽頁并進(jìn)入google.com。你第一眼看到的是什么充尉? 我打賭是那個色彩明亮的Google的logo對不對飘言?這個logo在哪里?它顯然不是在窗口的頂部邊緣——你的眼睛自然地開始看的地方驼侠。那么你的注意力是如何迅速地被吸引到頁面的中心的呢姿鸿?

你已經(jīng)猜到了,是留白倒源。谷歌運(yùn)用了大量的留白苛预,很自然地將你的視覺焦點(diǎn)調(diào)整到了頁面的中心——谷歌極簡化設(shè)計(jì)的精髓所在。留白是引導(dǎo)觀眾視線的最簡單的方法之一相速。

我們可以利用這個設(shè)計(jì)工具在我們的布局中創(chuàng)造自然的焦點(diǎn)碟渺。當(dāng)觀眾的焦點(diǎn)和注意力被吸引到這些區(qū)域時,我們可以把重要的內(nèi)容放在其中來更有效地傳達(dá)信息。

組織

除了引導(dǎo)觀眾的聚焦點(diǎn)苫拍,留白還為設(shè)計(jì)師提供了一個簡單的組織設(shè)計(jì)中不同元素的方式芜繁。就像我們運(yùn)用留白把一整塊文字分成更易管理的段落,留白可以極有效地為我們的設(shè)計(jì)中的內(nèi)容創(chuàng)造一個干凈的組織結(jié)構(gòu)绒极。

Bigigia

當(dāng)用留白進(jìn)行組織的時候一個很有用的建議是要保持一致骏令。當(dāng)以這種方式運(yùn)用留白時考慮內(nèi)容分組是很有幫助的。盡最大努力想出一個用留白來組織邊距垄提、模塊榔袋、文本和圖形元素的統(tǒng)一的方式。

運(yùn)用留白進(jìn)行組織最棒的地方之一是這樣不僅很容易調(diào)整而且能對設(shè)計(jì)產(chǎn)生深遠(yuǎn)的影響铡俐。所以凰兑,放手去嘗試吧!

強(qiáng)調(diào)

由于留白出色的引導(dǎo)觀眾視線的能力(已經(jīng)被再次提到)审丘,它確實(shí)可以幫助突出你的設(shè)計(jì)中特定的元素吏够。基于前文中為了組織內(nèi)容而探討的一致性主題滩报,當(dāng)創(chuàng)造性地打破一致性時锅知,就可以快速地抓住人的注意力。

Cultured Code

當(dāng)你用留白在設(shè)計(jì)中創(chuàng)造了一個平穩(wěn)的主旋律時脓钾,它會立即在觀眾的眼中營造出一種熟悉感售睹。當(dāng)觀眾繼續(xù)探索這個設(shè)計(jì)的時候,任何對這個連續(xù)性的打斷可训,即使是很小的一點(diǎn)昌妹,都會很自然地脫穎而出。

關(guān)于這一點(diǎn)有一個很好的且很容易實(shí)施的例子握截,就是非常輕微地改變一下標(biāo)題中你想要強(qiáng)調(diào)的字母的間距捺宗。掌握了這個技巧后,試著在你的設(shè)計(jì)中通過改變元素部分之間的間距川蒙,以更微妙的方式來運(yùn)用它。

留白未必白

以上的技巧都是圍繞著引導(dǎo)觀眾的視線长已。畢竟那是留白最適合干的事畜眨。話雖這么說,但是僅僅因?yàn)槲覀兘兴舭撞⒉灰馕吨拖褡置嬉馑忌纤f的必須是白色术瓮!在設(shè)計(jì)中沒有——或者說缺少——這樣不成文的規(guī)定康聂,要求一定要用什么顏色或者兩個主要元素之間要留多少間距。

Huge Inc

事實(shí)上胞四,單頁設(shè)計(jì)趨勢是一個可以說明這一點(diǎn)的絕好的例子恬汁。當(dāng)你只能在一個頁面上瀏覽全部內(nèi)容時,有效地利用留白最大化地實(shí)現(xiàn)焦點(diǎn)辜伟,組織和強(qiáng)調(diào)是非常關(guān)鍵的氓侧。

在這種情景下脊另,內(nèi)容模塊通常被設(shè)計(jì)成可持續(xù)滾動的形式。這種情況下约巷,簡單地改變一下這些模塊中的留白的顏色不僅能幫助繼續(xù)保持我們之前所說的設(shè)計(jì)中的三個方面偎痛,同時還可以在緊迫的空間中為內(nèi)容提供一些透氣感。

希望通過這些技巧独郎,你能夠從一個新鮮踩麦,嶄新的角度看待設(shè)計(jì)中的留白!

原文地址:Speckyboy

原文作者:Tomer Lerner

譯文作者:學(xué)ui網(wǎng)翻譯社—Jillian

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末氓癌,一起剝皮案震驚了整個濱河市谓谦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贪婉,老刑警劉巖反粥,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異谓松,居然都是意外死亡星压,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門鬼譬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來娜膘,“玉大人,你說我怎么就攤上這事优质】⑻埃” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵巩螃,是天一觀的道長演怎。 經(jīng)常有香客問我,道長避乏,這世上最難降的妖魔是什么爷耀? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮拍皮,結(jié)果婚禮上歹叮,老公的妹妹穿的比我還像新娘。我一直安慰自己铆帽,他們只是感情好咆耿,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著爹橱,像睡著了一般萨螺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天慰技,我揣著相機(jī)與錄音椭盏,去河邊找鬼。 笑死惹盼,一個胖子當(dāng)著我的面吹牛庸汗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播手报,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼蚯舱,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了掩蛤?” 一聲冷哼從身側(cè)響起枉昏,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎揍鸟,沒想到半個月后兄裂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡阳藻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年晰奖,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片腥泥。...
    茶點(diǎn)故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡匾南,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蛔外,到底是詐尸還是另有隱情蛆楞,我是刑警寧澤,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布夹厌,位于F島的核電站豹爹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏矛纹。R本人自食惡果不足惜臂聋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望或南。 院中可真熱鬧逻住,春花似錦、人聲如沸迎献。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春蕴掏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工翼闽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拾徙,地道東北人。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓感局,卻偏偏與公主長得像尼啡,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子询微,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 1、變量作用域 要理解閉包撑毛,首先要理解javascript的特殊的變量作用域。 變量的作用域無非就兩種:全局變量和...
    Gaochengxin閱讀 160評論 0 0
  • 關(guān)潸閱讀 61評論 0 0