建立屡获殊荣的单页网站的5个核心要素

灰太狼 2022-12-03 09:21 150阅读 0赞

*This sponsored article was created by our content partner, [BAW Media][]. Thank you for supporting the partners who make SitePoint possible.*

*这篇赞助文章是由我们的内容合作伙伴[BAW Media][]创建的。* *感谢您支持使SitePoint成为可能的合作伙伴。*

Is your next project a one-page website? You might think designing it would be an easy task compared to the multi-page website designs. You're in for a surprise.

您的下一个项目是一页的网站吗？ 您可能会认为，与多页网站设计相比，进行设计是一件容易的事。 您感到惊讶。

Making a one-pager both visually appealing and user-friendly is harder than you think. The design effort alone could be a factor of 10 times greater than you normally put into a multi-page site. This is of the challenges involved in designing a one-pager. For example, you need to stuff a lot of valuable information into a much smaller space in a way that won't turn users off

制作一个既美观又易于使用的一页打印机比您想象的要难。 仅设计工作一项就可能比您通常在多页站点中投入的工作大10倍。 这是设计单页机所涉及的挑战。 例如，您需要以一种不会关闭用户的方式将大量有价值的信息填充到一个较小的空间中

## 引领您进入屡获殊荣的设计的5个关键要素 **(**5 Critical Elements that Lead You to an Award-Winning Design**)** ##

This guide is centered about 5 critical elements you need to take into account. It will help your one-pager become a success. They're somewhat akin to fire, earth, water, air, and spirit, the 5 fundamental elements of nature. But they're much more important for your purposes.

本指南集中于您需要考虑的5个关键要素。 这将帮助您的单页机成功。 它们有点类似于火，土，水，空气和精神，这是自然界的五个基本要素。 但是对于您的目的，它们更为重要。

### ＃1目标：首要-确定网站的目标并努力实现目标 **(**\#1 The Goal: First and Foremost – Identify the Website's Goal & Work Toward It**)** ###

There's no sense in starting a design phase if you haven't settled upon an understanding of what you aim to achieve. That's step one.

如果您还没有对要实现的目标有所了解，那么在开始设计阶段就没有任何意义。 这是第一步。

Step 2 is to take your understanding and plan the entire website structure around it.

第2步是使您理解并计划围绕它的整个网站结构。

It's also worth noting that for a one-page website you'll want to be driving the user journey toward a single goal.

还值得注意的是，对于一页纸的网站，您将希望带动用户迈向一个单一目标。

What would this goal be? It could be:

这个目标是什么？ 它可能是：

*  to recommend or sell something
    
    推荐或出售东西
 *  to announce an event
    
    宣布一个事件
 *  to introduce and present your portfolio
    
    介绍和介绍您的投资组合
 *  or, for any other single reason.
    
    或者，出于其他任何单一原因。

Now, you're ready to start. Once you do, you'll want to keep asking yourself what might chase visitors away and how to keep that from happening.

现在，您就可以开始了。 完成操作后，您将继续问自己，什么可能将访客赶走，以及如何阻止这种情况发生。

Any design approach that drags page load speed down can turn users off. Using parallax effects for example:

任何降低页面加载速度的设计方法都可能导致用户关闭。 例如，使用视差效果：

[**Bistro Agency**][Bistro Agency]

[**小酒馆代理**][Bistro Agency]

This website's interactive effects are above the fold and they don't drag down the page's load speed.

该网站的互动效果不容忽视，并且不会拖累页面的加载速度。

[**Be Moving 3**][Be Moving 3]

[**正在移动3**][Be Moving 3]

The static image in this BeTheme pre-built one-pager appears to be dynamic. As such, it doesn't affect page load speed.

这个BeTheme预建的单页机中的静态图像似乎是动态的。 因此，它不会影响页面加载速度。

[**Think Pixel Lab**][Think Pixel Lab]

[**认为像素实验室**][Think Pixel Lab]

In this example, tiny animated items liven up this page without slowing anything down.

在此示例中，微小的动画项目使该页面生动起来，而没有降低任何速度。

[**Be Product 2**][Be Product 2]

[**成为产品2**][Be Product 2]

This page's fresh look is a selling point in itself.

此页面的新鲜外观本身就是一个卖点。

[**Sheerlink**][Sheerlink]

This Sheerlink page provides illustrates the important role large images and sliding panels can play in engaging users.

该Sheerlink页面提供了说明大图像和滑动面板在吸引用户方面可以发挥的重要作用。

[**Be App 4**][Be App 4]

[**是应用程式4**][Be App 4]

You don't have to rely on a lengthy technical discourse to promote an app when a genuinely cool presentation featuring vivid colors will do the trick.

当真正逼真的演示文稿具有生动色彩时，您就不必依靠冗长的技术讨论来推广应用程序了。

## ＃2文字：尽量减少文字并使其易于阅读 **(**\#2 Text: Keep It to the Minimum & Make It Easy to Read**)** ##

Incorporating lengthy blocks of descriptive text in a one-page website is a no-no. It is a surefire way to send visitors elsewhere. You need to strip information down to the minimum amount necessary to get the message across. You can accomplish that by using bold headlines, bullet lists, and brief paragraphs.

在一页的网站中加入冗长的描述性文字是不行的。 这是将访客带到其他地方的必经之路。 您需要将信息精简到传达消息所需的最小数量。 您可以通过使用粗体标题，项目符号列表和简短段落来实现。

A good approach is to separate the page into easy-to-follow sections. Use visuals and text together in a section – like in these examples:

好的方法是将页面分成易于理解的部分。 在一个部分中一起使用视觉效果和文本–如以下示例所示：

[**Dangerous Robot**][Dangerous Robot]

[**危险机器人**][Dangerous Robot]

This one-pager's layout is so entertaining you'll want to go through every section – at least once.

这个一页的布局非常有趣，您将需要遍历每个部分-至少一次。

[**Be Tea 3**][Be Tea 3]

[**是茶3**][Be Tea 3]

Neatly organized. Enough said.

井井有条。 说够了。

[**Hello Alfred**][Hello Alfred]

[**你好阿尔弗雷德**][Hello Alfred]

All the core information is above the fold, and bullet lists are employed to keep the message concise.

所有核心信息都在首位，并且使用项目符号列表来保持消息简洁。

[**Be Cakes**][Be Cakes]

[**是蛋糕**][Be Cakes]

A good example of how large attractive images help make sales when accompanied by concise, descriptive text.

一个很好的例子，当伴随着简洁，描述性的文字时，大尺寸的吸引人的图像如何有助于销售。

[**Mercedes-Benz**][Mercedes-Benz]

[**梅赛德斯·奔驰**][Mercedes-Benz]

When a vehicle has the stature of a Mercedes-Benz, high quality images accompanied by a minimal amount of text will usually suffice.

当车辆具有梅赛德斯·奔驰的身材时，通常只需高质量的图像和少量的文字即可。

## ＃3视觉效果：确定正确的模式并明智地使用负空间 **(**\#3 Visuals: Identify the Right Patterns & Use Negative Space Wisely**)** ##

People read text in an F pattern and scan visuals in a Z pattern. Keep this in mind when you mix text and images. It will help you maintain a flow that directs users to the critical content. This is where white space can be used to your advantage. Use it to make text easier to read, to separate sections, and to keep people engaged and curious.

人们以F模式阅读文本，并以Z模式扫描视觉效果。 混合文本和图像时，请记住这一点。 它将帮助您维持将用户引导至关键内容的流程。 这是可以利用空白的优势。 使用它可以使文本更易于阅读，分隔各个部分并保持人们的参与度和好奇心。

[**Chris Connolly**][Chris Connolly]

[**克里斯·康诺利**][Chris Connolly]

An excellent example of how white space can be used to create the impression of order.

一个很好的例子，说明如何使用空白创建订单印象。

[**WeShootBottles.com**][WeShootBottles.com]

Using white space as a canvas, this website designer produced wildly creative results.

这位网站设计师使用空白空间作为画布，产生了富有创意的结果。

[**Be Dietician 2**][Be Dietician 2]

[**是营养师2**][Be Dietician 2]

This pre-built website's use of white space gives an impression of order and makes the different sections stand out.

该预建网站对空白的使用给人以顺序感，并使各个部分突出。

[**Dribble's Year in Review**][Dribble_s Year in Review]

[**盘带回顾年**][Dribble_s Year in Review]

There's nothing wrong with using a variety of design principles to the max to create an amazing visual splash like the one shown in this example.

最大限度地使用各种设计原理来创建令人惊叹的视觉飞溅是没有错的，如本示例中所示。

[**Nasal Drops**][Nasal Drops]

[**滴鼻剂**][Nasal Drops]

When was the last time you found a page promoting nasal drops exciting? Thanks to an ingenious use of slides, white space, and animations, this one-pager breaks the mold.

您上次发现什么宣传鼻滴剂的页面令人兴奋的时间是什么时候？ 由于巧妙地使用了幻灯片，空白区域和动画，此单页机打破了常规。

## ＃4导航：轻松浏览和娱乐滚动 **(**\#4 Navigation: Make It Easy to Navigate & Entertaining to Scroll**)** ##

We tend to think of navigation in purely mechanical terms. This makes it rather easy to create a system that instead of helping people can drive them off the page.

我们倾向于纯粹从机械角度来考虑导航。 这样就很容易创建一个系统，而不是帮助人们将他们赶出页面。

The key to keeping visitors engaged is to use a sidebar menu. Or, you can use a horizontal sticky menu as an alternative method. The goal should be to enable people to easily jump to a section of interest with a single click

保持访客参与度的关键是使用侧边栏菜单。 或者，您可以使用水平粘滞菜单作为替代方法。 目标应该是使人们能够通过单击轻松跳转到感兴趣的部分

An auto-scrolling nav link is another alternative. It's effective and can even be entertaining.

自动滚动导航链接是另一种选择。 它是有效的，甚至可以很有趣。

Here are several examples of user-friendly navigation:

以下是一些用户友好导航的示例：

[**Sergio Pedercini**][Sergio Pedercini]

[**塞尔吉奥·佩德奇尼**][Sergio Pedercini]

This designer's website makes effective use of 3 auto-scrolling links.

该设计师的网站有效利用了3个自动滚动链接。

[**Be Game**][Be Game]

[**成为游戏**][Be Game]

Be Game offers its visitors an entertaining approach to their navigation experience.

Be Game为访客提供了一种有趣的导航体验方法。

[**Be Landing 2**][Be Landing 2]

[**登陆2**][Be Landing 2]

Three things stand out in this pre-built website; its color scheme and layout structure, and how to scan the page with 3 mouse scrolls.

这个预先建立的网站突出了三点： 它的配色方案和布局结构，以及如何使用3个鼠标滚动条扫描页面。

[**Brainflop**][Brainflop]

[**脑筋急转弯**][Brainflop]

Menus on the top and on the left help to navigate this site quickly.

顶部和左侧的菜单有助于快速浏览该站点。

## ＃5号召性用语：确定正确的号召性用语，不要害怕使用它 **(**\#5 Call to Action: Identify the Correct CTA & Don't Be Afraid to Use It**)** ##

This design element is closely tied to \#1, identifying a website's goal. Once you know what you want the website to achieve, you shouldn't have to hesitate to put CTA buttons to work. It's especially easy to do with a one-pager since you're normally directing people toward a single action. There can be exceptions of course.

此设计元素与＃1紧密相关，可确定网站的目标。 一旦知道了您希望网站实现的目标，就无需犹豫，让CTA按钮发挥作用。 使用单页寻呼机特别容易，因为通常是将人们引导到一个单一的动作上。 当然可能会有例外。

[**Be Hairdresser**][Be Hairdresser]

[**是美发师**][Be Hairdresser]

This pre-built website's CTA button is above the fold. There's also one in the menu.

这个预建网站的CTA按钮位于首位。 菜单中还有一个。

[**The Art of Texture**][The Art of Texture]

[**纹理的艺术**][The Art of Texture]

Two CTA buttons placed above the fold give users a choice as to what they want to see.

折叠上方的两个CTA按钮使用户可以选择要查看的内容。

[**Pyrismic**][Pyrismic]

[**派瑞克**][Pyrismic]

Pyrismic uses a simple opt-in form along with a bold CTA button.

Pyrismic使用简单的加入表单以及大胆的CTA按钮。

[**Reneza**][Reneza]

[**雷内萨**][Reneza]

Reneza doesn't fool around when working with CTA buttons, but they choose their colors and text sizes carefully.

Reneza在使用CTA按钮时不会四处走动，但是他们会仔细选择颜色和文字大小。

## 结语 **(**Wrapping It Up**)** ##

Now, you've been introduced to the 5 critical elements of one-page website design. You'll want to work with them until you master the art of using them.

现在，向您介绍了一页网站设计的5个关键要素。 在掌握使用它们的技巧之前，您将需要与它们合作。

They may seem simple. You'll discover that combining them effectively in a long form one-pager is hard work.

它们看起来很简单。 您会发现，以长篇幅的一页机有效地组合它们是艰巨的工作。

The good news is you can use pre-built websites. They have already incorporated these 5 elements into their designs. An excellent pre-built website resource is [**Be Theme**][Be Theme] It has an extensive library of over 60 one-pagers and 400+ pre-built websites of all kinds. You can customize any of them to fit your needs.

好消息是您可以使用预建的网站。 他们已经将这5个元素纳入其设计。 [**Be Theme**][Be Theme]是一个出色的预建网站资源，它包含60多个单页页面和400多个各种预建网站的广泛图书馆。 您可以自定义其中的任何一个以满足您的需求。

> 翻译自: [https://www.sitepoint.com/5-core-elements-for-building-award-winning-one-page-websites/][https_www.sitepoint.com_5-core-elements-for-building-award-winning-one-page-websites]

[BAW Media]: https://bawmedia.com
[Bistro Agency]: http://www.bistroagency.cz/work/skoda-4x4/web/#4x4
[Be Moving 3]: https://themes.muffingroup.com/be/moving3/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Think Pixel Lab]: http://thinkpixellab.com/
[Be Product 2]: https://themes.muffingroup.com/be/product2/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Sheerlink]: https://sheerlink.audio/
[Be App 4]: https://themes.muffingroup.com/be/app4/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Dangerous Robot]: http://dangerousrobot.com/#/home
[Be Tea 3]: https://themes.muffingroup.com/be/tea3/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Hello Alfred]: https://www.helloalfred.com/
[Be Cakes]: https://themes.muffingroup.com/be/cakes/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Mercedes-Benz]: https://www.mercedes-benz.com/en/mercedes-benz/vehicles/passenger-cars/eqc/the-eqc/
[Chris Connolly]: http://chrisconnolly.com/
[WeShootBottles.com]: http://www.weshootbottles.com/
[Be Dietician 2]: https://themes.muffingroup.com/be/dietitian2/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Dribble_s Year in Review]: https://dribbble.com/year/2018/
[Nasal Drops]: https://en.soplyam.net/
[Sergio Pedercini]: http://sergiopedercini.com/
[Be Game]: https://themes.muffingroup.com/be/game/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Be Landing 2]: https://themes.muffingroup.com/be/landing2/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[Brainflop]: https://www.brainflop.com/
[Be Hairdresser]: https://themes.muffingroup.com/be/hairdresser/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[The Art of Texture]: https://www.theartoftexture.com/
[Pyrismic]: https://www.pyrismic.com/
[Reneza]: https://reneza.com/
[Be Theme]: https://themes.muffingroup.com/be/splash/?utm_source=sitepoint.com&utm_medium=content&utm_campaign=feb19
[https_www.sitepoint.com_5-core-elements-for-building-award-winning-one-page-websites]: https://www.sitepoint.com/5-core-elements-for-building-award-winning-one-page-websites/