知乎網(wǎng)頁(yè)設(shè)計(jì)時(shí)為什么留下大面積的空白？

時(shí)間：2024-02-12 20:40:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-12 20:40:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

知乎網(wǎng)頁(yè)設(shè)計(jì)時(shí)為什么留下大面積的空白？：先回答題主的問(wèn)題：題主屏幕分辨率過(guò)高，顯然本站在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候沒(méi)照顧好像題主一樣高分辨率的用戶(hù)。題主可以降低一點(diǎn)分辨率再看看效果。（比如在我電腦上看就沒(méi)有一點(diǎn)問(wèn)題）

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

上午沒(méi)仔細(xì)看題，寫(xiě)了一堆，有點(diǎn)歪，╮(╯▽╰)╭算了還是放著吧。

7 Rules for Creating Gorgeous UI (Part 1)

菜鳥(niǎo)手翻，如有不足歡迎私信。

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

第三條規(guī)則（Rule 3），double your white space （將你的空白面積加倍）

在規(guī)則2里面，我說(shuō)過(guò)Black and White first Rule（界面設(shè)計(jì)優(yōu)先考慮黑+白的風(fēng)格）要求設(shè)計(jì)師們優(yōu)先考慮間距布局，而后才是顏色。現(xiàn)在，讓我們討論一下間距和布局吧。

如果你嘗試過(guò)從頭開(kāi)始編一份HTML頁(yè)面，也許對(duì)這份HTML默認(rèn)頁(yè)面的布局很熟悉。


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


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


無(wú)論從HTML上還是CSS上都要下功夫

如果你，像我一樣，習(xí)慣于用CSS進(jìn)行格式化，盡管默認(rèn)的CSS樣式是沒(méi)有留白的，但是現(xiàn)在我們就要改掉這些壞習(xí)慣。我們要開(kāi)始將留白作為默認(rèn)項(xiàng)。添加任何頁(yè)面元素的一開(kāi)始都要自己關(guān)注留白，直到你可以下意識(shí)地留白。
聽(tīng)起來(lái)不可思議？沒(méi)有理解留白的重要性是很多人還畫(huà)出上圖那樣粗糙的網(wǎng)頁(yè)設(shè)計(jì)的原因。


從一個(gè)空白頁(yè)開(kāi)始意味著你開(kāi)始的時(shí)候除了一大片空白以外什么都沒(méi)有。你要在最最開(kāi)始的時(shí)候就考慮留白的間距的問(wèn)題。之后，你將任何元素畫(huà)在網(wǎng)頁(yè)上的動(dòng)作都應(yīng)該是經(jīng)過(guò)仔細(xì)推敲過(guò)后在空白處添加元素的過(guò)程。


從一堆沒(méi)有任何樣式的HTML開(kāi)始意味著從內(nèi)容開(kāi)始。這里必須明確說(shuō)明，內(nèi)容高于樣式，而樣式中優(yōu)先級(jí)最高的是布局和留白，之后再是顏色和其他。

Piotr Kwiatkowski設(shè)計(jì)的概念音樂(lè)播放器就是一個(gè)很好的例子。

尤其注意左邊的菜單欄。

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


再看看列表的標(biāo)題。單詞“PLAYLISTS”與它自己的下劃線(xiàn)間距是15像素。甚至比字體本身的高度還大。還有，列表之間的距離是25個(gè)像素。


左側(cè)邊欄展示了行間距應(yīng)該是什么樣子的，下面是另一個(gè)例子。同樣的網(wǎng)頁(yè)，右上角的導(dǎo)航欄。


頁(yè)面頂端的導(dǎo)航欄留出了更多的空白。文本“Search all music”只占頂部導(dǎo)航欄總高度的20%。圖標(biāo)也保持了相同的比例。


Piotr有意識(shí)地留出了額外的空白，這舉措頗見(jiàn)成效。盡管這只是一個(gè)他認(rèn)為不錯(cuò)的理念，但在審美方面這足夠與世界上最棒的音樂(lè)播放器UI相媲美。


大面積的空白還能讓原本亂糟糟的界面看起來(lái)友好且簡(jiǎn)潔，像forums。

源地址Dribbble - New Topic by Matt Sisto


Matt Sisto的概念設(shè)計(jì)——Forum



還有Wikipedia


源地址Behance

你可以在這里發(fā)現(xiàn)充足的證據(jù)，看，Wikipedia的再設(shè)計(jì)省去了這個(gè)網(wǎng)站的關(guān)鍵功能，但是你不能說(shuō)這不是一個(gè)好的學(xué)習(xí)方法。

在行與行之間增加空白

在元素之間增加空白

在組與組之間增加空白