知乎網頁設計時為什麼留下大面積的空白？

12-05

知乎採用兩欄式的頁面布局，如下圖所示：

從中可以看到這兩欄旁邊留下了很多沒有利用起來的空白。我用尺子量了一下，發現空白的寬度接近佔到了頁面總寬度的1/2。當頁面往下滾動時，右邊欄會消失，這個時候空白的寬度將會超過頁面總寬度的1/2。

為什麼知乎要採用這種大面積留白的設計風格？

因為你的屏幕解析度有點高

因為要保證內容區域的寬度在合適的範圍之內。每行字數過多對閱讀不利，網頁內容區域的寬度不是越寬越好的，除非分欄。

當然這也不是說知乎這種處理方法就是完美的了。根據瀏覽器窗體寬度，對內容寬度、字型大小以及行距進行相應調整應該是更為合適的做法。可能是受其他一些因素制肘，沒能這樣處理。

很重要的一點是網頁設計中會對內容的寬度有要求，尤其是長文本。比較流行的有600像素，960像素，980像素，1000像素等等。可以去研究一下大部分的這類網站比如門戶網站新聞網站。

當然留白是因為沒啥可以放上去的東西，塞個給野豬爆菊花百分百掉絕世好刀麻痹戒子啥的多不好（用了AD blocks之後很多網站兩邊都留白了，原來滿滿的都是flash廣告～我說的不是廣電網站啊）

閱讀習慣上講，過寬的文本內容會引發閱讀的疲勞，如果不理解請將一篇長文保存為純文本在全屏記事本中欣賞～長答案看一半發現又看錯行了這種心情很糟糕吧～有一段時間沒事我會逛一下博客園，有的博主的文章寬度比較誇張，看起來相當難過。。。

我認為考慮屏幕的適配倒是其次，現在有響應式了，怎麼適配只要花點時間都行的，但是大屏幕還是基本保持著這種寬度，也說明了合適的文本寬度確實是最重要的考慮因素。

另外如果想整個網頁截圖的話不必要縮放截圖，縮放截圖後的留白肯定是越來越大的，因為內容寬度固定縮放後保證內容不變形比例縮小而窗口寬度不變，簡單減法大家都會～，fast stone等等的截圖軟體有滾動截圖哦～超方便的:-D

看到一些理論化的解釋。我個人感覺有點醉。
其實就是為了適配絕大多數人的顯示器解析度！
顯示器解析度！
示器解析度！
器解析度！
解析度！
辨率！
率！
！

你的屏幕解析度高。所以才顯示成這樣。從這個角度上說，知乎的設計在效率和周全中作了選擇，沒有服務好你這類「一小撮」用戶。我們就叫它固定寬度的居中樣式吧。

-----------------------------------------------------------------------------------------------------------------------
你看我這裡（橫向像素1366），就沒有1/2留白吧！！！！！！！！！！！！！！！！！！！

再看著名的1024*768解析度下的情況，完全沒有留白吧！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

神馬？800*600？no one cares about them...

先回答題主的問題：題主屏幕解析度過高，顯然知乎在網頁設計的時候沒照顧好像題主一樣高解析度的用戶。題主可以降低一點解析度再看看效果。（比如在我電腦上看就沒有一點問題）

======================================================

上午沒仔細看題，寫了一堆，有點歪，╮(╯▽╰)╭算了還是放著吧。

7 Rules for Creating Gorgeous UI (Part 1)

菜鳥手翻，如有不足歡迎私信。
=============================================
第三條規則（Rule 3），double your white space （將你的空白面積加倍）

在規則2裡面，我說過Black and White first Rule（界面設計優先考慮黑+白的風格）要求設計師們優先考慮間距布局，而後才是顏色。現在，讓我們討論一下間距和布局吧。

如果你嘗試過從頭開始編一份HTML頁面，也許對這份HTML默認頁面的布局很熟悉。

基本上，屏幕頂端所有東西都是凌亂的。頂端部分的字體很小，行之間沒有一點間距，段落與段落之間只有那麼一點點間距，但是還不夠。不管頁面寬度是100像素也好還是10000像素也好，段落的寬度直接從頁面最左伸展到了頁面最右。

從審美的角度看，這頁面布局設計的很爛。如果要讓 UI 看起來有設計感，你需要在很多地方加些留白，一些讓人喘息的空間。

無論從HTML上還是CSS上都要下功夫

如果你，像我一樣，習慣於用CSS進行格式化，儘管默認的CSS樣式是沒有留白的，但是現在我們就要改掉這些壞習慣。我們要開始將留白作為默認項。添加任何頁面元素的一開始都要自己關注留白，直到你可以下意識地留白。
聽起來不可思議？沒有理解留白的重要性是很多人還畫出上圖那樣粗糙的網頁設計的原因。

從一個空白頁開始意味著你開始的時候除了一大片空白以外什麼都沒有。你要在最最開始的時候就考慮留白的間距的問題。之後，你將任何元素畫在網頁上的動作都應該是經過仔細推敲過後在空白處添加元素的過程。

從一堆沒有任何樣式的HTML開始意味著從內容開始。這裡必須明確說明，內容高於樣式，而樣式中優先順序最高的是布局和留白，之後再是顏色和其他。

Piotr Kwiatkowski設計的概念音樂播放器就是一個很好的例子。

尤其注意左邊的菜單欄。

菜單欄中的每個條目之間的垂直間距是文本間距的兩倍。你可以看到字體大小是12像素而上下間距也是這麼多。

再看看列表的標題。單詞「PLAYLISTS」與它自己的下劃線間距是15像素。甚至比字體本身的高度還大。還有，列表之間的距離是25個像素。

左側邊欄展示了行間距應該是什麼樣子的，下面是另一個例子。同樣的網頁，右上角的導航欄。

頁面頂端的導航欄留出了更多的空白。文本「Search all music」只佔頂部導航欄總高度的20%。圖標也保持了相同的比例。

Piotr有意識地留出了額外的空白，這舉措頗見成效。儘管這只是一個他認為不錯的理念，但在審美方面這足夠與世界上最棒的音樂播放器UI相媲美。

大面積的空白還能讓原本亂糟糟的界面看起來友好且簡潔，像forums。

源地址Dribbble - New Topic by Matt Sisto

Matt Sisto的概念設計——Forum

還有Wikipedia

源地址Behance

你可以在這裡發現充足的證據，看，Wikipedia的再設計省去了這個網站的關鍵功能，但是你不能說這不是一個好的學習方法。

在行與行之間增加空白

在元素之間增加空白

在組與組之間增加空白

你的屏幕顯示有問題吧，留白不會這麼大的，知乎的留白讓人舒服~簡約

因為需要適應眾多的顯示器解析度。

留白讓人放鬆，打開三大門戶，滑鼠都沒地放，很悶的

因為市面上主流的顯示器解析度寬度存在很多種，比如我還在用的顯示設備寬度從1024到兩千多。於是很多網站為了在多種設備上都能很好地顯示而採用了較低的寬度作為標準設計。這樣大家都能完整的顯示。

這種向下兼容設計的缺點就是不能發揮出高解析度設備的優勢。

你可以試著把顯示器豎起來用，這樣就能顯示更多的內容了。

模仿的不僅僅是Quora的概念，還有網頁設計。

能夠想到的是你的屏幕比較大，已經屬於長尾範圍，大多數的人的屏幕是不會顯示這麼多留白的。
至於為什麼不根據屏幕大小調整頁面寬度，同意上面的說法，是為了提供最好的閱讀體驗，一行字太長會難以閱讀。

因為知乎的風格是藍＋白

按住ctrl，向上推滾輪

網頁版知乎很爛！
navbar 看不出一點藝術感，感覺就像偷完 bootstrap 改個顏色而已。
字體偏小，沒有默認的中文字體（所以就用了瀏覽器默認的宋體，小號宋體有多醜知乎的前端你知道嗎？！你以為人人都用 OS X ？！）
……

網頁設計中留大量的空白會使整個網站顯得簡潔、大氣一些，我知道一個叫驚喜設計的網站，他們的網站就運用了大量的空白，整體來說這個網站看起來還不錯。

因為知乎網頁版本身就是非常非常差勁。體驗最差的網站之一

因為專門留給我們用surface的在edge瀏覽器下方便做web筆記用的---當然這是霧

作為一個網頁設計師，來回答這個問題。其實這個問題再給客戶jpg稿的時候很多客戶也在問這個問題。網頁設計有一個有效尺寸，就是所有內容集中在這裡顯示。這個有效尺寸目前是980px到1200px，之前小於980px，原因就是電腦屏幕越來越大了。所以知乎這樣，你所看到的所有內容顯示的區域也就是我說的有效尺寸，是為了兼顧市場上大部分的電腦，有的屏幕比較小，有的屏幕比較大，只能做的尺寸小一點，才能讓小解析度的人看到完整內容。你可以換一個14寸筆記本看下，會發現，空白很少。

如果題主從藝術的角度來考慮這個問題，作為資深屌絲的我覺得你考慮多了。因為從技術的角度來說，爭取之前答友回答的，這個是由於網頁設計需要考慮到不同的用戶用到的不同設備和顯示設備，因此這樣的排版能最大限度的讓所有人看的清網頁。而留白是你的電腦瀏覽器自動加上的。如果樓主希望得到最佳視覺，建議調整顯示模式：旋轉90度。這樣的視角會讓你愛上這個網站的！

對於密集恐懼症患者，我喜歡這樣的留白