知乎网页设计时为什么留下大面积的空白？
时间：2024-02-12 20:40:01 | 来源：网站运营
时间：2024-02-12 20:40:01 来源：网站运营
知乎网页设计时为什么留下大面积的空白？：先回答题主的问题：题主屏幕分辨率过高，显然本站在网页设计的时候没照顾好像题主一样高分辨率的用户。题主可以降低一点分辨率再看看效果。（比如在我电脑上看就没有一点问题）
======================================================
上午没仔细看题，写了一堆，有点歪，╮(╯▽╰)╭算了还是放着吧。
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的再设计省去了这个网站的关键功能，但是你不能说这不是一个好的学习方法。
在行与行之间增加空白
在元素之间增加空白
在组与组之间增加空白
在线咨询
