设计内容密集型布局：提示和示例
为Web创建全面的布局需要技巧和很多奉献精神。 Web设计人员以非常复杂的方式执行大多数无法完成的工作。 随着网页的发展，我们已经看到了比以往任何时候都需要填充更多空间和容纳更多内容的需求 。 如果您已经了解如何设计网站，那么对更好地了解这些方法将是巨大的收获。 网站的核心功能很少更改。 但是，除了平均页面内容以外，其他因素也起作用，包括空白，版式，元素定位等。
我们将详细介绍构建内容密集型布局的一些主要技巧。 这些范围包括社交网络应用程序，大型企业和公司网站，或介于两者之间的任何内容。 在设计页面时，请问自己“ 我要用这种设计实现什么目标？ ”，这一点很重要，因为它将帮助您预见更广阔的前景。
自定义网页
无论您在实际的Web设计方面有多丰富的经验，我们都必须从某个地方入手。 在应用常规规范之前，设计自定义网页通常是迈向Web编程职业的第一步。
我总是建议创建一小部分页面元素列表，这些页面元素被认为已安装到模板中。 一旦将所有这些写下来，就更容易清除掉坏主意，或者捡起错过或遗忘的宝石。 这也为轻松规划减轻道路压力铺平了道路。
布局线框
对于通用的5页网站，您经常会看到相同的元素重复出现。 顶角徽标，头部导航链接，主要内容区域可能会与侧边栏和其他功能（登录，搜索框等）分开。
考虑一个良好的起点，以逐步构建详细的页面布局。 许多设计师发现，勾勒出可能的线框设计以排除不太明显的缺陷很有帮助。 这不需要花哨的纸，甚至可以在破旧的直纹笔记本中完成。 线框的目的是粗略了解站点布局的方向，并留出空间在以后填充细节。
对于内容繁重的布局，应考虑平台将包含多少内容。 构建一个封闭的2-3列布局以容纳100+页长而复杂的内容将不会留出太多的喘息空间。 通过预先进行素描和计划，您可以控制页面内容的宽敞空间。 这不仅可以封装文本或块区域，还可以处理图像和视频。
辉煌的空白
白色间距可能是内容密集型布局设计中要考虑的最重要因素 。 网站内容比其他任何常规网站都更重要。 如果读者由于没有足够的空间来消化您的文字而无法理解内容，那么访问量将会很杂乱且令人不快。
段落和页面标题是从定制开始的好地方。 使用CSS属性，您应该能够操纵外部边距并填充每个实线文本元素。 这些包括所有标题1-6，段落，块引用，列表，预格式化的文本以及一些较小的元素。
如果希望引起读者的注意，则在主要文本元素下方应用空格很重要。 段落和较小的标题在15px-25px底部边距的情况下效果最佳。 对于较大的页面元素（例如h1或h2），请考虑使用35px +（这也取决于您的字体大小）。 垂直元素之间的空间对于滚动和“概览”扫描很重要。 但是， 行高是另一个重要CSS属性，它会影响文本元素中行之间的间距。 与字体大小相比，段落的行高值要大得多，因此行之间有很多额外的填充。
考虑动态样式
除了间距之外，还应采用一些数字字体来使其脱离页面。 当今世界上有数以亿计的网站，到处都可以看到相同的字体类型。
如果您正在为内容丰富的网站设计布局，那么最终结果将看起来像另一个平淡的模板。 对于高级印刷样式，有很多属性可供选择。 文字阴影，更少/更多的字母间距，背景平台，图标……列表无穷无尽。
确实，您是设计师，而您的最终决定是法律。 设计布局无法与没有周转的单车道高速公路相提并论。 在此过程中，您可以返回并更改样式，操纵新元素或完全破坏概念。 考虑其他一些有用CSS技巧，然后试着看看最合适的CSS技巧 ！
利用下拉菜单
内容如此之多，您的所有链接不可能都放在一个页面上。 关于如何处理页面超载，有很多选项。 将额外的链接放在侧边栏块中或缝在站点页脚中的列中是两个有目的的选择。
最方便和方便的选择是创建带有头类别和子类别的下拉导航方案。 如果您有非常详细的主题，也有许多开源脚本提供了子类别。
可能最快，最不令人沮丧的策略是从JavaScript框架开始。 一些最受欢迎的工具包括jQuery，MooTools或Prototype。 所有这些库都提供文档，并且许多库都提供免费的下拉菜单脚本 。
计划内容视图
实际上，创建一个简单的正文区域来容纳普通网站所包含的所有内容要困难得多。 随着浏览器标准的不断变化和移动设备的半粗糙支持，难怪我们会看到这样的内容密集型网站遭到淘汰。 对显示的每种网页样式保持敏感。 有些将包含多个图像，另一些则可能包含主要图形或视频，或者根本不包含图形。 完成最终布局的编码后，创建多个HTML页面以容纳不同的视图。
除了主内容区域内的内容外，所有这些都具有相同的内部标记。 可以操纵每个单独的页面视图，并提供对最终产品的见解。 将其切换为包含您认为每个页面都需要的所有主要视图。 页面元素的其他示例可能包括评论框，视频或嵌入式画廊或分页链接。
彻底计划策略
实际上，创建强大的Web布局并非完全困难。 许多设计师陷入了一些小细节，例如如何种植块元素或颜色超链接。 这些详细信息非常重要，因为它们会在品牌信息中发送，即使消息来自较小的元素，也应该与整个页面结合在一起。 认真规划设计阶段，以找出解决每个障碍的最佳方法。 如果您与客户一起工作，最好事先讨论哪种类型的内容将填充页面。 这使您有机会提前计划并制定总体布局的最佳方法。
另一个特别令人讨厌的话题是移动设计。 这个新市场不仅在智能手机领域而且在功能强大的平板电脑领域都得到了巨大的扩展。 这意味着用户可能正在通过移动屏幕访问您的布局-确保内容没有溢出并且显示整齐。
7内容丰富的网站示例
以下是一些流行的内容丰富的网站的示例屏幕截图。 这些都是物理和数字市场上的知名品牌。 查看以下一些想法，以在您自己的项目中找到灵感。 也可以在评论部分随意共享其他内容繁重的Web布局。
唱首歌
Clicker是面向电视和电影爱好者的新社交网络应用程序。 您可以注册一个新帐户，并找到一些您喜欢的经典电视节目，并按季节和剧集列表进行存档。 您可以用更少的信息和更多的视频内容将站点与IMDB进行比较！
网页设计的未来
2011年Web设计的未来将在今年Spring在伦敦启动。 请查看主页，以获取更多信息以及基于文本的布局设计的绝佳示例。 所有细节都可以共享，并提供发言人，日程表，研讨会，赞助商等等。
勋爵
在这种可笑的布局中，主要角色Lord Likely已被“卡通化”并打入插图中。 该网站分为3列，每列显示新内容，广告，提要链接和档案。 设计本身非常复古，插图设计巧妙。
微软
大多数技术爱好者都熟悉Microsoft 。 实际上，大多数了解计算机是什么的人甚至可以为您提供Microsoft和Bill Gates的简短描述。 他们的主页上包含许多软件包，新闻更新，新闻发布和开发人员信息的内容。 在页面下方，您可以看到带有动态内容切换的垂直选项卡菜单。
搜索引擎土地
Search Engine Land是一本流行的网络杂志，专注于搜索引擎和互联网营销。 他们经常以惊人的高质量帖子进行更新，每天吸引成千上万的人访问他们的网站。 主页分为三列，用于容纳每个内容模块和广告。
白宫
美国白宫的设计看起来非常干净和专业。 关于总统的日程安排和其他重要的政治事件，有很多信息。 减轻页面空间的一种技巧是在页面标题上添加一个小的内容滑块。 当访问者登陆页面时，这非常适合显示3-4个重大新闻的标题。
雅虎门户
就大型内容网站而言，Yahoo！ 必须趋向高峰。 雅虎！ 为客户提供数百种服务，包括网络邮件，新闻，视频，甚至网络搜索。 签出一些Y！ 侧边栏中的门户链接，以查看它们的模板如何比较。
结论
这些只是构建具体的内容要求版面的关键点和步骤。 包含大量内容的网页通常被视为负担SEO饲料的负担，而没有任何实际价值。 设计就是一切，因为它是用户从每个网站获得的第一印象。 内容量很大，这可能会因混乱和过于笼统而成为灾难。 永不停歇地练习，仅需几个项目，您就可以预想内容密集型布局。
翻译自: https://www.hongkiat.com/blog/designing-content-intensive-layout-tips-and-examples/