您的位置:網站首頁 > 新聞原創 > 安鄉網頁設計

網頁設計中如何巧妙使用留白

日期:2017-4-6 9:09:24 人氣: 標簽:
分享到:
創造用戶愛用的引人注目的布局是設計師的職責。留白有助于讓界面更美觀,更容易閱讀。

我們生活在一個持續分散人注意力的時代。從印刷品到數字媒體,戶外廣告,在線廣告,所有的這些信息都包圍在我們身邊。網站,電子商務,移動app,他們都是內容。

我們要創建用戶喜歡訪問的網站。所有的布局都需要易于理解,具備可讀和可掃描的內容。

擁擠的網站是很難閱讀的。復雜通常讓用戶感到不舒適。如果我們用很多不同信息去壓迫他們,所有的信息都爭著去吸引用戶注意力,用戶將會離開或者不做我們想要他們做的事。可能會購買電子商務網站上的一些東西或者閱讀博客上的文章。

可是,有一個概念能幫助圖形設計師去創造好的體驗,讓能容更吸引人,更容易被關注。那就是留白——一種給你布局空白空間的方法,能避免不必要的雜亂,在元素間使用留白來突出它們的優勢。

留白是什么

對留白最好的描述應該是一種簡單的東西,它本身預示著簡潔。

留白或者說負形空間,就是網站上的空白處。它是一個空間標志,不僅僅讓布局可讀性更強;也加強了內容本身。用戶可能會專注在更少,更好的被展示的元素上。COS online store是一個高端服裝品牌,使用了留白來提高它高品質的印象。

留白理念的發展

我們可以追溯到“新文字”運動,它于19世紀20年代由Jan Tschichold發起。該運動宣告了這些理念:

元素的不對稱平衡;

依靠層級來設計內容;

有意識的利用留白;

無襯線字體。

Beatrice Warde的高腳杯

另一個留白早期理念的例子就是Beatrice Warde于19世界30年代發表的一篇論文“The Crystal Goblet”。


Warde描述了兩個高腳杯:第一個是純金的,以最精致的工藝制成,第二個是水晶玻璃的,像泡泡一樣輕薄透明。選擇其中一個會展示你是否是一個真正的品酒家。

水晶的高腳杯顯示了這個人對葡萄酒的欣賞。“因為關于它的一切都是用來展示本應該被包含的美好事物,而不是隱藏”。

Warde把這比喻為為提高印刷和排版清晰度打開了一扇門。她明白合理利用空間能豐富內容。

通過負形空間能達到什么目的

Tschichold和Warde在他們工作中運用的,我們今天能用負形解釋。



留白或者說負形空間,就是你的組成元素之間的空白處。沒有必要從字母上理解就是白色或者空白。它是一種對用戶而言沒有負重的背景,這樣用戶能專注在主要的內容上。

說到圖形設計,在不同UI元素見建立起一個視覺層次是至關重要的。這有助于引導用戶到交互的決策點上。

而且,留白能減少頁面信息的雜亂感,讓內容更加透氣。

記住這些,我們一起來回顧下在網頁設計中使用留白能達到什么目的:

1.網站更易被瀏覽

留白的平衡使用能提高瀏覽網站的舒適感。用戶很容易就可以看到內容,所以他們更加容易找到他們在搜索的信息。

2.提高了內容的可讀性

在元素之間保持適當的距離讓內容更容易閱讀。有助于用戶更快速地閱讀網頁信息。

3.提升了美感

運用更多的空白,減少不必要的元素,能大幅度提高網站的視覺吸引力。

問自己一個問題:你是想瀏覽一個充滿彈層、banner和不必要的視覺效果的雜亂頁面,還是一個更簡單,容易瀏覽和閱讀的網站,哪個能達到重點?

4. 高品質印象

大量視覺元素的運用會降低品質。使用留白,從另一個方面來說,則會提高品質感。

留白使得網站看起來更輕,更優雅。缺乏元素競相吸引用戶的注意力,提高了用戶體驗。

你可以用的留白形式

既然你已經了解了留白的優點,那我們來做些實踐。有好幾種你可以使用的留白類型。

1. 大面積空白

這是不同元素之間的留白。有助于建立層次,保證網站適合的流程。



2. 微小空白

微小的留白是元素間很小的空白。我們能用它提高布局的清晰性和通透感。


3. 活動空白

包圍在物體周圍的留白會引導用戶注意它們,提高它們的可見性和用戶的關注。

4.非活動空白

這是指元素之間最小空白,對保持適當的導航,突出界面中活躍的元素,確保內容的可讀性很有必要。

留白運用案例

為了更好地在你的設計中運用留白,讓我們來看一些巧妙運用留白的例子。



Oculus的頁面登陸頁就是一個關于使用商量信息銷售產品的的好例子。所有的信息就是一張吸引人的照片、清晰的文案、預定按鈕和元素之間的留白。



衣服銷售品牌ETQ證明了簡潔銷售減少了混亂,避免促使用戶關注產品的不必要信息。

與此同時,通過設計,產品的品質得到了詮釋。



Invision 的博客也是一個很好的例子,很好地組合使用了文案、圖片和召喚按鈕,鼓勵訪問者閱讀博文。

看起來這些設計可能并沒有什么革命性的變化。但是,與此同時,你能感受到它們和那些有很多信息的網站之間的差別。

盡可能多地收集信息是有必要的,有時你的客戶想要你那樣做。無論哪種方式,設計師最需要做的是展示最重要的信息,創建信息清晰、流程合理的網站。

使用空白建立起UI元素的視覺層次,你的網站才會傳達更好的用戶體驗。
0
0
0
0
0
0
0
0
網友評論 Comments
下一篇:沒有資料