方格精選
如何在網站設計中有效的運用留白效果：4大秘訣分享
留白是網站設計趨勢中一種被廣泛應用的手法。我們常常認為安靜、空的、無色的東西是無聊的，卻鮮少人了解到正因為這些空白的存在，才會成為有聲、有物、有色的對比基礎。在網站設計中，很多人喜歡把網站擺得滿滿滿，認為任何留白都是在浪費空間，應該要讓大家看到越多內容越好。但事實上，留白是一種非常強大的視覺設計技巧，適當的留白甚至與好的內容同樣的重要。
在2020年8個網站設計趨勢中，我們提到留白已經成為一種廣泛的應用手法。
我們常常認為安靜、空的、無色的東西是無趣的，卻鮮少人了解到正因為這些空白的存在，才會成為有聲、有物、有色的對比基礎。唯有安靜才讓我們了解到聲音的重要性，唯有空白的空間才讓我們知道要如何填補這些所謂的空白。在網站設計中，很多人喜歡把網站擺得滿滿滿，認為任何多餘的留白都是浪費的，應該要讓大家看到越多內容越好。但事實上，留白是一種非常強大的視覺設計技巧，能大幅增加網站設計的質感，以用戶的觀感來說，有時適當的留白甚至與提供好的內容同樣重要。
什麼是留白？
留白通常在英文中也被稱為Negative Space，直翻為「負空間」。
字體裡的每一筆一畫，或是網站上的每一個形狀、每一個內容，都可被稱為「正空間」，而「負空間」則是在文字的間隙、網頁的留白處等這些不引人注意的部分。
為什麼要留白？
Interaction Design Foundation的Mads Soegaard說：
「空白的空間就很像一個畫布。空白是設計中能將所有元素攏在一起的背景，讓他們能夠凸顯出來。」
空白的作用就好比是演奏一首曲子中的頓音一樣，短的頓音，讓聽眾在旋律間有喘息的空間。而長的停頓，則是令人不禁屏住呼吸，情緒在此刻被定格、延續，而在下一個音響起之時，整個情緒湧現。留白也有一樣的效果，它是將整個設計綁在一起的重要元素，幫助形塑了整個頁面的流程。
在設計中善用留白的手法，可以做到下面這些事：
- 增加頁面的閱讀性
- 加強視覺設計的層次效果
- 讓不同元素間的連結清晰可見，不用再使用額外的「箭頭」、「框框」或「表單」等元素去表示
- 為整個頁面提供喘息的空間，使頁面不會感覺過於擁擠
- 讓用戶注意到最重要的元素，降低畫面中的干擾
- 讓整個網頁更有風格並增添了優雅的氣息
如何有效地運用留白？
1. 適當的選擇留白空間
正確使用網站設計中的留白效果可以提升文字閱讀性20%！文字間的留白應該要反映出用戶在閱讀時需要的停頓，像是給眼睛的視覺喘息空間。過於擁擠的文字會造成閱讀的障礙，而過於分散的文字則會造成段落間的不連貫性。所以適當選擇正確的留白空間是非常重要的。
2. 調整內容間的距離
除了選擇文字與文字間適當的留白空間，還要確保不同資訊間彼此的留白距離。根據接近定律的解釋，人類眼睛會將放置在一起的物件認為是互相有關聯的，而較遠的物件則會認為是不同的。
而內容之間的留白空間也會扮演著重要的視覺提示作用（Visual Cues），可以讓用戶了解內容中不同元素間的互相關係。你可以增加物件中的留白來區分不同的內容，或是刪減物件中的留白來將物件歸納一起。
而對於文字來說，可以使用段落來將同一個概念區分不同的小節。而在製作表單的時候，也不要忘記套用接近定律，把說明的文字放在相近的位置。
3. 創造焦點
一個擁擠的介面會降低用戶的閱讀意願，不知道究竟哪裡才是重點，而在眾多的干擾訊息中失焦。你可以把最重要的地方用附近留白的方式圈起來，留白的地方越多，用戶越會注意到。
所以如果你想要著重於一段文字上，或許你可以使用一個非常大而醒目的標題，將附近的空白加大，字與字之間的空格也拉大，這樣會破壞本來內容間的連續性而抓住用戶目光。
4. 留白不一定是白色！
雖然稱之為「留白」，但是不一定要是「白色」的，可以是任何顏色的空白，或甚至是有條紋、紋路的背景圖。
比如說Prada的頁面中，雖然不是白色，而是採用藍色的空白背景圖，但是也能夠創造出同樣的效果，讓大家的目光集中在最重要的品牌標誌以及倒數計時器上面。
準備好製作屬於自己的網站卻不知如何開始嗎？哈利熊為大家整理了網站設計的八個簡單步驟，設計出最強的網站！
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
今天開始全新的一個系列內容，用我的方式去整理與講解一本對我影響甚遠的書。*Mismatch: How Inclusion Shapes Design*
mismatch（錯配）是沒有考慮到不同身體能力或身份認同的使用情境下產生的問題。
這些複雜的社會化過程都是後戰地/後軍事化的金門所必需進行的歷史反省及值得深化的課題；同時對應現代化下的低碳環保意識與島民嚮往城市化的階級夢，都是現在金門在歷經城市化的重要過程與反思，期許自己未來以永續循環經濟的思維與態度，實踐我對空間、社會、人文議題的關懷。
「打造內容社群的佛系經營術」#15：你要如何打造行動呼籲？
大家好，歡迎收看「打造內容社群的佛系經營術」系列專欄。在上篇文章之中，我跟讀者朋友們介紹了你為什麼要確保社群的品質？接下來讓我們來聊聊社群經營中另一個重要的課題，也就是你應該如何打造行動呼籲？
如果你一路看著「打造內容社群的佛系經營術」系列
「人為生活而設計，設計為生活而存在。」 — — 佚名
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
今天開始全新的一個系列內容，用我的方式去整理與講解一本對我影響甚遠的書。*Mismatch: How Inclusion Shapes Design*
mismatch（錯配）是沒有考慮到不同身體能力或身份認同的使用情境下產生的問題。
這些複雜的社會化過程都是後戰地/後軍事化的金門所必需進行的歷史反省及值得深化的課題；同時對應現代化下的低碳環保意識與島民嚮往城市化的階級夢，都是現在金門在歷經城市化的重要過程與反思，期許自己未來以永續循環經濟的思維與態度，實踐我對空間、社會、人文議題的關懷。
「打造內容社群的佛系經營術」#15：你要如何打造行動呼籲？
大家好，歡迎收看「打造內容社群的佛系經營術」系列專欄。在上篇文章之中，我跟讀者朋友們介紹了你為什麼要確保社群的品質？接下來讓我們來聊聊社群經營中另一個重要的課題，也就是你應該如何打造行動呼籲？
如果你一路看著「打造內容社群的佛系經營術」系列
「人為生活而設計，設計為生活而存在。」 — — 佚名