Do you ever walk into a room cluttered with discarded papers and leftover takeout and feel comfortable?

您是否曾經走進過亂七八糟的房間？

Yes, you might if you’re a sophomore at college. That’s just dorm life. Back in the late 90’s to early 2000’s websites were messy roommates, so clutter was in vogue. Sites with banner ads flashed everywhere, reminding you of the halogen glow of 80’s Hong Kong. If a site wasn’t Ad-heavy, it had text spilling off the pages.

是的，如果您是大學二年級的學生，可能會。 那只是宿舍生活。 早在90年代末至2000年代初，網站都是雜亂的室友，所以雜亂無章。 帶有橫幅廣告的網站到處閃爍，讓您想起80年代香港的鹵素燈。 如果某個網站不是廣告繁重的網站，它的文字就會從頁面上溢出。

Now, if you compare almost any current website to another website made fifteen years ago, the biggest difference you’ll notice is the amount of white space.

現在，如果您將幾乎任何當前網站與15年前創建的另一個網站進行比較，您會注意到的最大區別就是空白量。

The Nielsen eye-tracking study, conducted in 2005, confirms the importance of whitespace. It found that whitespace allowed participants to increase their reading pace and comprehend more of the text. In this age of information, it’s important that readers feel that a website is a reliable source of information. Internet users no longer have to be convinced of the importance of websites, now we’re connoisseurs.

2005年進行的尼爾森(Nielsen)眼動追蹤研究證實了空白的重要性。 研究發現，空白允許參與者提高閱讀速度并理解更多文本。 在這個信息時代，讓讀者感到網站是可靠的信息來源非常重要。 現在，我們成為行家，互聯網用戶不再必須相信網站的重要性。

Designers have had to clean up websites to keep up with the new trend of minimalism. To continue with the sophomore analogy, it’s as if website designers finally rented their first apartment and went on an IKEA binge. They then became vegetarian, eschewing the fatty distraction of graphics and links for a clean content-focused look.

設計師不得不清理網站以適應極簡主義的新趨勢。 繼續用大二的類比，似乎網站設計師終于租了他們的第一套公寓，然后進行了宜家狂歡。 然后，他們成為素食主義者，避免了圖形和鏈接的過多干擾，以使內容清晰可見。

Now that web designers have embraced whitespace, all websites that use whitespace are user friendly, right?

現在，Web設計人員已經接受了空格，所有使用空格的網站都是用戶友好的，對嗎？

Not exactly. The problem is that not all websites are created equally. A blog about RV’s doesn’t have to display much information besides the article’s title and some text. On the other hand, news websites like Yahoo! Are still trapped by the need to deliver on-going news on a bevy of subjects. The impulse to fit everything into the home page still stifles the page’s breathing room.

不完全是。 問題在于并非所有網站都是平等創建的。 關于RV的博客除了文章標題和一些文本外，無需顯示太多信息。 另一方面，新聞網站如Yahoo! 仍然被大量主題不斷發布新聞的需求所困。 將所有內容都放入首頁的沖動仍然扼殺了該頁面的呼吸空間。

Take the New York Time’s website as an example.

以《紐約時報》的網站為例。

The design is supposed to mimic the fold of a newspaper, but what you get is a lot of noise. The Opinion section defeats the marginal attempt at whitespace. According to the Nielsen study, more often than not, our eyes are not even going to go there, so why detract from the valuable content?

該設計本來可以模仿報紙的折疊，但是您得到的卻是很多雜音。 “意見”部分擊敗了對空白的邊際嘗試。 根據尼爾森(Nielsen)的研究，通常我們的眼睛甚至不去那里，所以為什么要貶低有價值的內容呢？

There are so many news websites that have done a better job of curating their content for their respective audiences. Here are a few of them:

有那么多新聞網站在為各自的受眾策劃內容方面做得更好。 這里有幾個：

BBC

英國廣播公司

The BBC website is the best news website on the web from a design perspective(Yahoo! And New York Times should take notes). A user can scan the page at a glance and catch the most important news of the hour. This organization is achieved using well-measured gutters (web design speak for space between content).

從設計角度來看，BBC網站是網站上最好的新聞網站(Yahoo!和《紐約時報》應做筆記)。 用戶可以一目了然地掃描頁面，并捕獲該小時中最重要的新聞。 這種組織是通過使用經過精心測量的裝訂線(網頁設計代表內容之間的空間)來實現的。

The layout that the web designers used is called the GEL Grid, built with flexbox. BBC outsourced its layout on Github so if you’re looking to implement their design into your own website, you should check it out.

網頁設計師使用的布局稱為GEL網格，它是用flexbox構建的。 英國廣播公司在Github上將其布局外包了，因此，如果您希望將其設計實施到自己的網站中，則應進行檢查。

Huffington Post-

赫芬頓郵報-

The Huffington Post is not a real news organization, one can argue. Whether that is true or not, the point here is that the website’s design focus on placing its freshest content right at the top-center of the home page. Top stories fall right into the F shape that most of us read in. starting from the left side of the page. The site’s origination as a blog keeps it grounded and relatable, as opposed to a news site like CNN where text flows under mismatched headlines.

有人可以說，《赫芬頓郵報》不是一個真正的新聞機構。 不管是真的，還是這里的重點是網站的設計著重于將其最新鮮的內容放在首頁的頂部中心。 從頁面左側開始，我們大多數人都讀入的F形故事成為熱門故事。 該網站最初是博客，因此使其與時俱進，而與CNN這樣的新聞網站相反，新聞的標題不匹配。

The Atlantic

大西洋組織

Similar to Huff Post, The Atlantic uses whitespace to move its content towards the center page. Though The Atlantic is a bit bloated with content, unlike the New York Times, it varies the way its content is displayed while keeping text size relatively large for readability.

類似于《霍夫郵報》，《大西洋》使用空格將其內容移向中心頁面。 盡管《大西洋》的內容有點unlike腫，但與《紐約時報》不同的是，它改變了其內容的顯示方式，同時保持相對較大的文本大小以提高可讀性。

Tech Crunch-

科技緊縮

TechCrunch, the popular tech news website, redesigned their website in 2016 with an innovative user experience. Articles return you to the main feed when you’re finished with them, allowing for a seamless experience. The designers understood that web surfers these days are content-skimmers. So aside from letting user effortlessly exit articles with an exit button and a transition, the designers organized the main content on the left side of the page.

熱門的科技新聞網站TechCrunch在2016年以創新的用戶體驗重新設計了其網站。 完成文章后，您可以將它們帶回到主供稿，從而獲得無縫的體驗。 設計師了解，如今的網絡沖浪者是內容收集者。 因此，除了讓用戶輕松地通過退出按鈕和過渡退出文章外，設計人員還在頁面左側組織了主要內容。

The sticky navigation bar makes category selection a painless process.

粘性導航欄使類別選擇過程輕松自如。

AP news

美聯社新聞

AP News’ design is highly economical. To avoid the problem of clutter, the designers filed all of the news site’s categories under the Topics tab. The only gripe about the tab design is its far right position. It’s easy to miss, especially if the feature content contains the most polarizing man on Earth.

AP News的設計非常經濟。 為了避免混亂的問題，設計人員將所有新聞站點的類??別都歸檔在“主題”選項卡下。 標簽設計的唯一缺點是其最右邊的位置。 很容易錯過，特別是如果專題內容包含地球上兩極分化最強的人。

Other than the misaligned tab, the content is a breeze to navigate through. Like TechCrunch, the latest content gets exclusive space, allowing a user to scroll down effortlessly without worrying about missing content along the way.

除了未對齊的選項卡之外，其他內容都很容易瀏覽。 像TechCrunch一樣，最新內容具有排他空間，允許用戶毫不費力地向下滾動，而不必擔心沿途缺少內容。

Wired

有線

Though Wired is considered a magazine, it beefs its featured content with reels of tech and culture news. There is an elegance to Wired’s design that is unmatched by most news sites. The card design maximizes the amount of whitespace available which in turn draws more attention to the content.

盡管《連線》被認為是一本雜志，但它通過科技和文化新聞來增強其特色內容。 Wired的設計具有優雅，這是大多數新聞網站所無法比擬的。 卡片設計可最大程度地利用空白，從而引起更多對內容的關注。

News websites make for great case studies when it comes to modern content organization. News sites are often the most category-rich and information heavy websites out there which makes designing clean user experiences a tough undertaking. When the goal of whitespace is to minimize distractions, simply adding margins to the sides of the page isn’t enough to create an elegant design. When you know that a user’s attention span is so precious, why spam them with needless content? By subtracting weak content and promoting the most valuable content using negative space, we create a richer experience for all users.

對于現代內容組織，新聞網站提供了很好的案例研究。 新聞網站通常是其中類別最豐富，信息最繁重的網站，這使得設計干凈的用戶體驗成為一項艱巨的任務。 當空白的目標是最大程度地減少干擾時，僅在頁面兩側添加頁邊空白不足以創建優雅的設計。 當您知道用戶的注意力范圍如此寶貴時，為什么還要向他們發送不必要的內容？ 通過減少薄弱的內容并使用負數空間宣傳最有價值的內容，我們為所有用戶創造了更豐富的體驗。