归咎于 960.gs 和 Bootstrap 等网格框架。他们使构建这种精确布局变得非常容易：

http://getbootstrap.com/examples/carousel/

这些框架解决了 CSS 布局的许多问题，并使 Web 开发人员/设计人员可以轻松创建基于网格的结构化网站，这些网站舒适、熟悉且易于使用。

然后，主题网站开始销售这种布局的预制版本的变体，即使是普通的 Joe 或 Jane 也能轻松使用。这种通用设计模式最近成为大多数人与“网站”相关联的事实观点。

Twitter 用户@jongold的推文非常简洁地总结了这一点：

我认为 NNG 的这篇文章在这种特殊情况下很有用，特别是对于“一页”布局：

https://www.nngroup.com/articles/page-fold-manifesto/

简而言之，您需要通过使用“吸引他们”的文本/内容来给您的读者/用户一个滚动页面的理由。通过定位引起兴趣的元素，例如出现在首屏上方的新部分的图像，您可以在用户的​​脑海中创造出一种需求。销售没有什么不同，您需要让人们有理由将时间投入到您的网站上，而不是假设他们会仅凭直觉滚动或阅读它。

您在提供的答案中看到的示例背后没有真正的理论，只是模板，作为设计师，您应该始终以原创为目标。

您的内容应该决定页面的流程。阅读并理解您的内容，然后您应该找到理想的位置。对我来说，设计网页没有“一刀切”的解决方案。您可以合并一些元素或布局，但只能通过扩展研究和了解您当前拥有的内容来识别这些元素或布局。

这是一个很好的问题，但没有抓住重点。这不是关于“好”主页的设计理论，而是关于设计方法时期 - 一种逻辑创意解决方案，无论是网站、宣传册、触摸屏应用程序等，都能最好地服务于客户目标/受众。你应该从您项目的核心元素在同一个地方（我已经开发了多年的流程）。这将包括客户基础/品牌/颜色/字体/图像，最重要的是他们试图在短期/中期/长期内实现的目标。

这是关键 - 示例：我必须建立一个国际会议展台，以前从未做过，赢得了展会的展台。为什么？因为我没有像其他人一样从木头、玻璃、地毯、大幅面图形、等离子屏幕开始（即您的主页引导模板）。客户想用一种新产品打破市场。他们有很棒的销售人员，所以简报是在整个活动期间让人们站在展台上，这样我们就可以和他们交谈——就是这样。我围绕一个网吧设计了这个展台，里面有软座椅、昂贵的咖啡和茶（免费）、网络和电子邮件接入点（免费）以及用于演示的大尺寸显示屏（带声音和灯光）。我还在中间放了一座塔，距离天花板 6 英寸，标牌面向 NSEW，你可以从大厅的任何地方看到这个。展台被夯实了 3 天。

返回您的网站。我从客户试图通过网站应用实现的目标开始，以及它如何适应他们更广泛的线上/线下营销计划。很明显，不同的客户会有不同的目标，即使有像服务/联系人这样的共同元素。问题是，它们本身并不卖，所以你不应该从它们开始。表达优势和好处将与用户互动，因此了解您的客户以及他们正在尝试与业务做什么。例如，总体驱动可能是支持社交媒体和内容开发，或者是服务和表格电子化的全面数字化转型，或者可能主要是地方当局的信息/数据。

另一个问题：移动是重点吗？当 80% 的流量流向这种方式时，这似乎没有实际意义，尽管桌面/宽屏在商业上运行良好并且可能是您的客户的主要受众——例如在 HNW Finance 中，由于安全问题尚未采用移动设备。在所有情况下，在决定用户体验、站点计划、渠道/管道、导航和主页优先级之前，您都需要先了解这一点。

几个简短的例子 - 金融（商业离岸）和地方当局（水服务）。

财务公司关键要求： (1) 提升员工/经验 (2) 离岸福利 (3) 明确他们的工作和市场领域 (4) 治理（基础、规范、积极/前瞻​​性思维、水平/能力） (5) 驱动新的移动存在（即将推出的应用程序） 以上指向我的主页，如下所示。菜单非常简单，可引导团队和联系人（网站其余部分的汉堡包），清晰的徽标和英雄限定他们是谁和离岸（无轮播），简短的介绍段落总结了（最多 2 段）基础/关于文本的报价跟随在右边。四个 CTA（号召性用语）面板为支持治理的关键信息提供直接渠道。为身体 85% 黑色打开 Sans - 移动友好。完毕。

地方当局要求：（提供供水服务/排水服务和信息）。尽管该组织在环境和营销方面非常强大，包括每天的社交帖子，但其中的真正优先事项是 (1) 向数字服务和 ePay 转型 (2) 紧急求助热线 (3) 将移动作为主要信息输出渠道 (4) 24/7当前工作和问题的实时通知，包括来自现场工程师的通知。从分析和客户研究中确定的 3 个关键渠道是 (a) 供水服务 (b) 排水 (c) 建议/支持（帮助客户自助，包括情况说明书、常见问题解答、媒体中心以减少电话呼叫）

下面的解决方案遵循这个线索。没有英雄，没有轮播——空间用于电子服务介绍和链接。3 个核心频道 + 带有移动友好图标的站点搜索位于主导航栏（白色）下的二级菜单上，以保持这个主要非常清晰，只有紧急链接和站点汉堡包。粉红色作为目标受众介绍了 75% 的女性（账单支付者），并且在对抗蓝调和水色（水）时效果很好。图标定制，简单明了。关键通知（由 Twitter 驱动）在主屏幕上跟随此。强烈的颜色对比/可访问性法规的易读性（政府部门规定严格）。CMS 驱动，包括移动响应。

最后，不要被模板网站和引导程序的趋势所引导。目前（2016 年秋季）的趋势是在浅色背景上使用白色文本、细标题字体（如 Helvetica Ultra Light）和 < 60% 黑色的正文文本，即灰色。这些来自印刷设计，尽管它们会产生多个可访问性问题（例如，对于视力受损和在移动屏幕上的表示）。记住你的设计训练、形式和功能，这是一种在屏幕上商业上特别重要的平衡。你是设计师，不是旅鼠。以逻辑引导，不要盲目跟风。

我花时间写这篇文章是因为我从根本上相信这种方法，我想帮助你和其他人。不要沉迷于我的设计风格或创意，你会有自己的——想想解决方案的方法。它在全方位服务设计方面为我工作了近 20 年，自 1997 年以来，我一直在 MacII 上成功构建网站，当时我们只有 40K 个页面和 256 种颜色可供使用:)。

祝您旅途愉快

登陆页面是关于电梯间距的。如今，大多数网站作为一个整体只不过是登陆页面。每个页面都经过精心设计，旨在吸引人们购买。

对于很多人来说，这意味着——标题、电梯间距、购买按钮。从理论上讲，对于很多公司来说，这是可行的。简单地说，这被称为折线之上。但这并不完全正确。

“Above the fold”来自报纸术语，在报纸上确实有折叠。折痕上方的广告优于下方的广告。在网页设计中并非如此——一次又一次的研究将证明这是因为他们没有做正确的研究。请参阅有关 Kissmetrics 的这篇文章——为什么折叠是一个更好的研究的神话。

正确地看待它，你会发现它更少关于“当我的页面加载时人们会看到什么”，而不是以下内容：

• 我是否展示了我的产品的优势？
• 号召性用语 (CTA) 是否易于查找且措辞恰当？

随着营销人员更好地理解这一点，他们希望设计符合这些标准。THEN 出现了诸如 Grid 和 Bootstrap 之类的模板。别搞错了——无论模板多么漂亮，如果它没有转化为销售，就没有人会使用它。

输入这些模板和其他模板。对于设计师甚至非设计师来说，它是一种快速简便的方式来获得一个体面的页面并运行。一个好的营销人员会以它为基础，但要么破解它以满足他们的确切需求，要么聘请某人破解它以满足他们的确切需求（我的生活故事！）。

然后，一个真正优秀的营销人员会在设计或副本上稍作改动进行A/B 测试。精心提炼，提高转化率。大多数企业没有资源来做到这一点。但是你猜怎么着，通过研究更大的网站和创建模板，你已经在路上了。

概括

背后有设计理论吗？一点，但设计理论，尤其是登陆页面上的设计理论来自市场研究和理论，而不是设计理论。最终，登陆页面是转换工具。无论您使用的是您现在习惯看到的成熟技术还是完全不同的东西 - 它最终都会因转换的好坏而生死攸关。

相关问题

界面真的需要“好看”吗？