一些网站只是更好地工作单页设计。这些项目通常是投资组合页面，产品站点，登陆页，有时公司网页我也是。
你总是想要一个网站的内容很少，但一个强大的品牌和干净的导航。这是既定的。
但是，在一个强大的单一页面布局中还有哪些其他趋势呢？你如何设计一个能提供最好的用户体验呢？
我与这篇文章的目标是涵盖每一个伟大的趋势与单页设计。你会从现场网站上找到设计趋势，有很多有用的东西UX提示，甚至是一些现代的网页设计，以获得灵感的流动。
没有绝对的“最佳”的方式来制作一个单一的网页网站。但如果你遵循这些建议，你肯定会走上正确的轨道。
自动滚动Nav链接
济源设计公司在单页设计中，您会发现一个非常常见的特性是自动滚动导航条。
这是您单击链接的地方，它将自动滚动到页面的该部分。它的工作方式就像一个常规的导航菜单，除了自定义的动画滚动效果，它提供了一个真正花哨的用户体验。
查看网站哈希塔戈举个例子。
这是一个非常简单的设计与导航条具有4个不同的链接。
无论是单击滚动功能还是使用鼠标滚轮向下滚动，滚动功能都可以工作。这是一个非常简单的设计，但动画可能会觉得太慢了对一些人来说。
这就是当你强迫一个自定义动画进入导航时所面临的风险。
相反，你可能会做一些类似的事情保留人俱乐部其中自动加载不同的页面并滚动到同一页上的新部分。
您会注意到，加载时间要快得多，过渡要平稳得多。
如果你想要一个坚实的用户体验，那么你需要一个流畅的动画速度。这不是一件容易的事，但你设计的越多，你就越能看到“好”的动画效果。
现在Dangerousbot可能是我最喜欢的这个单页自动滚动功能的例子。
页面部分加载到视图中非常快，导航也很容易阅读。当你设计一个光滑的自动滚动导航效果时，你就应该这么做。
侧导航标签
如果不希望将导航固定在页面顶部，则始终可以设计垂直导航。
这可能看起来像这个设计在游乐场的网站上。
注意右边的链接是如何沿着页面跟着你的.他们的工作仍然像一个典型的肚脐，但他们有点越轨，更容易在那个空间。
我知道不认为这种技术适用于所有网站。如果您有大量文本或需要支持具有相同垂直菜单的较小屏幕，这并不是一个完美的选择。
相反，您可以尝试切换到更多的移动友好的无障碍菜单有反应的技术。
许多网站也使用点导航链接。这些都不是很好，因为它们没有告诉您当前正在查看的页面的哪个部分。
但他们确实节省了很大的空间，看上去相当圆滑。
例如，界面代理站点有三个小点导航按钮。点击那些快速滚动页面。
在顶部的角落也有一个小的加号图标，提供更多的页面供查看。
我见过几家公司仪式通过不同区域的自动动画。
这当然没问题，但在我看来，对于一个内容丰富的页面来说，这并不是最好的选择。
这是更好的添加浮华的图形到自定义风格的布局。
垂直导航可以很好的工作，如果你可以把他们纳入你的布局。这一切都是关于测试，看看你能做些什么，但不要强迫你的想法看起来不对。
组合布局思想
如果你在设计投资组合网站那就有很多记住。
真的你只需要展示你的作品。
但一个伟大的投资组合也有少量的你混入其中的内容。如果在一个页面上，这一切都会更容易使用。
我不认为每个投资组合应该只有一页。然而，我确实认为它可以很好地在极简设计的意义上工作。
例如拉维在这个页面上甚至没有清晰的导航。只是一堆列在一起的章节。
如果您将徽标悬停在右上角，您将捕捉到一些飞出视图的链接。这是个有趣的效果，但我不知道这对易用性.
看一下网站骰子销售为单页组合设计提供另一个想法。
此布局使用屏幕右下角的固定导航。这是完美的移动之间的页面部分，而不妨碍链接的方式。
唯一的缺点是这些链接被隐藏在手机上，所以它不是最容易找到的选择。
罗吉·金是我最喜欢的设计师之一他的投资组合是单页设计质量的证明。
这是干净和简单，但非常有趣的看。在视线中没有导航栏。
找一种适合你的投资组合的风格，你会很棒的。
为销售页面添加cta
如果您正在销售产品或数字课程，那么在您的页面中包含一个CTA是明智的。
这是尤其是真的如果你在设计一个登陆页，它是人们可能看到的唯一一页。就像在一个单一的页面设计中。
例如英雄偶像只是在折叠上面有几个CTA，没有其他导航。
简洁的文字，简单的图标，非常流畅的设计。但没什么能让其他地方的人进入这个网站。
那就好了！
因为这类页面的目标是鼓励转变。你可以把“转换”算作注册、购买、提交电子邮件或诸如此类的东西。并不是很重要。
如果你正在实现你的目标，那么你就知道你在正确的轨道上。
的主页素描纸屑插件还有一个非常干净的CTA按钮的例子。
这使用一个明亮的粉红色背景，以抓住关注直接在嵌入式演示视频。
我唯一的抱怨就是按钮的位置。当你为行动而设计时，你想要那个行动褶皱上方。特别是单页布局。
做一些研究CTA设计趋势看看你能学到什么。
有了很好的CTA，你会注意到字体的选择、大小、位置和颜色都起着巨大的作用。
例如午夜素描是另一个草图插件与一个美丽的单页布局。CTAs是明亮的，在你的脸上。
这些必然会让人们一见钟情。
滚动页动画
基于“滚动动画”的标题，您可能会认为这与导航动画相同。但这确实是它自己的分类，它肯定是一个很好的效果。
您可以轻松地添加页面元素。使自己充满活力在整个页面中滚动。注意，如果您查看一个活生生的示例，就更容易理解它，所以请查看本页.
Toggl有自己的时间跟踪应用程序，他们的登陆页面非常棒。
当您向下滚动时，您会注意到不同的页面元素被动画化到视图中。他们很容易观察，所以他们不会移动太快或太慢，但有明显的运动。
这样做是为了吸引人们的注意力当他们移动的时候向内容中添加一些动态特性。
它最适合于图形和不同的页面部分，特别是交替的页面部分，我将在本文的下一部分中更详细地介绍这些部分。
这个纱线应用程序主页也使用在他们的页面较低的滚动动画。
这种效果不会从根本上改变页面的行为或意图。这在很大程度上是一种审美趋势，它只会使一切变得更容易观察。
它对每个网站都很好吗？哪儿有的事儿。当然不是。
大多数情况下，这适用于当您在页面中移动时，有较小数量的内容被动画到视图中的页面。
一条大推特就是最好的例子。
页面的每个部分使用不同的动画，但没有任何庞大的段落块或超级详细的编写。
在左上角，您将看到一个带有我前面提到的自动滚动功能的导航。当然，这一趋势得到了很好的利用。
这可能是单一页面设计的最好例子之一，将用户体验置于其他任何东西之上。
始终为用户设计第一。以后再担心美学。这是一个伟大的单一页面布局的最大关键之一。
将页面分成几个部分
我在前面讨论单页滚动导航功能时提到了这一点。但应该更详细地讨论这件事。
设计单个页面布局时，希望对内容进行分段。使用不同的背景色、标题样式、图标、分隔符等将其分解为不同的部分。
这有助于用户。更快地消耗内容而且更容易，没有任何问题。
页中的各节。iOS 11 UI工具包很微妙但很明显。
它们都有不同的标题和交替的图像大小来创建视觉层次.
在页面的较低处，您会注意到有一些不同背景颜色和图案的部分。没有太大，但它确实吸引了眼球。
通常我更喜欢交替的背景色，比如本页.
它的特点是如何使用Photoshop的人，嗯，不知道Photoshop。
背景在黑暗和光线之间切换，其间有交替的颜色。伟大的反差显然，对于那些不知道如何划分页面部分的人来说，这是一种坚实的设计风格。
但是你可以用更明亮的颜色，不同的图案，甚至更大的图形，变得更加丰富多彩。
举个例子这个登陆页由桶造成的。
它也将页面分成几个部分，但它使用的是完全不同的技术。这包括背景，颜色，图标，和很多照片。
您几乎可以在任何页面上尝试这一点，并看到很好的结果。
一切都是为了匹配颜色选择还有页面细节。乍一看，这看起来很棘手，但是你会知道它的诀窍，你设计的定制模型越多。
视差单页趋势
我相信你知道视差滚动以及在网页设计中使用的许多视差技术。
这些都是现在网络上非常普遍的现象，很多网站经常会去。有点太远了。这就是为什么我并不总是推荐单页布局的视差技术。
然而，如果您要添加视差到您的网站，一个单一的网页设计是做它的地方。
看一看绘画艺术举一个非常简单的例子。
你向下滚动页面，当你移动的时候，你会看到背景和你一起滚动。挺酷的！
此效果可以使用任何免费视差插件你可以在网上找到。目标是创建一个运动错觉在带有一些固定元素、移动图片和页面的页面中。微相互作用鼠标移动。
最后一种选择是很难靠你自己建立起来的。但最终的结果是极好的。
你也可以尝试做一个固定的背景设计，比如本页从冬季工作周开始。
它不使用单一的网页设计，因为有其他网页在网站上。
然而，动画视差功能是与一个固定的背景，创造了一个真正奇怪的运动效果，因为你移动的内容。
这意味着你会发现很多创意，图片，内容，标题…所有连接到相同的整体页面设计。非常棒的效果，如果它可以融入你的项目。
前进
这些只是我经常看到的一些与单个页面布局相关的技术。但不要把这当作设计单一网页网站的圣杯。
保持开放的心态愿意试验有着不同的趋势。
没有两个网站是完全相同的，并且有很大的实验空间。学习其他的单页设计，有相似的东西，你喜欢和合并，以创造一个全新的伟大的设计作品。
