当前位置: 首页>资讯中心>网页设计>文章正文

单页网站设计的5个关键点及经典实例

发布时间:2020-02-10 21:13访问人数:来源:浪知潮网络

单页网站设计的5个关键点及经典实例

乍一看,设计一个单页的网站似乎很容易做到,特别是与构建多页网站相比。设计一页只需要设计三页的三分之一的工作,对吗?

实际上,设计单页机通常要困难得多。您面临的挑战是必须在一个页面上获得所有必要的信息。同时,您需要确保页面在视觉上既吸引人又易于使用。

设计单页网站需要围绕5个关键要素展开。根据您对它们的考虑程度,它们可以完成或破坏您的设计。当我们概述这些关键元素时,我们将提供实例,它们将说明其重要性。

1、确定并了解您网站的目标并努力实现目标

您可能无法完全理解您希望网站实现的目标。然后,进行其设计几乎没有意义。它需要有一个目标。您的设计需要使用户踏上实现该目标并做出相应响应的旅程。

目标是销售某物吗?

是否邀请访客查看您的投资组合?

您打算宣布一个事件还是一系列事件?

确定目标后,您仍然需要考虑需要做的事情。您需要避免在点击CTA按钮之前访问者离开页面。

一些用户对页面加载速度很敏感。因此,您可以选择避免某些特殊效果(例如视差),这些效果往往会降低页面加载速度。

Bistro Agency

Bistro Agency

该网站的互动效果不容忽视,并且不会影响其加载速度。

Be Moving 3

Be Moving 3

动态图像会影响加载速度。该单页网站的静态图像呈现出动态的外观。

Think Pixel Lab

Think Pixel Lab

活跃在此页面插图中的微小动画项目不会减慢任何速度。

Be Product 2

Be Product 2

有时候,是页面的新鲜外观促成销售。

Sheerlink

Sheerlink

这是一个大图像和滑动面板将吸引用户的实例。

Be App 4

Be App 4

当很酷的视觉演示可以解决问题时,您不需要详尽的技术论文即可推广应用。

2、尽量减少阅读并使其易于阅读

一页长的页面具有笨拙的文本将很难吸引访问者。保持文本简短,并在各部分之间留有适当间距。将信息剥离到其本质上。

依靠大胆的标题,简短的段落和项目符号列表来表达您的观点。以下是一些值得添加书签以供将来参考的实例:

Dangerous Robot

Dangerous Robot

此实例说明了如何创建娱乐化的单页网站。

Be Tea 3

>Be Tea 3

精心组织的一个很好的例子。

Hello Alfred

Hello Alfred

基本信息在首位,在其中使用项目符号列表有助于使消息尽可能简单明了。

Be Cakes

Be Cakes

这个网站说明了在附有适当位置的文字段落的情况下,大尺寸的精美图片如何有助于销售。

Mercedes-Benz

Mercedes-Benz

当车辆具有梅赛德斯(Mercedes)的身材时,通常只需高质量的图像和少量的文字即可。

3、视觉:确定正确的模式并明智地使用负空间

了解大多数人将如何浏览页面是有帮助的。人们倾向于以F模式阅读文本并以Z模式扫描图像。混合元素时请记住这一点。您希望信息自然流向您的目标。明智地使用空白可能会有所帮助。

Chris Connolly

Chris Connolly

在此实例中,白色空间的使用使人平静,并提供了秩序感。

WeShootBottles.com

WeShootBottles.com

在这里,一个充满创意的设计被溅到了白色画布上。

Be Dietician 2

Be Dietician 2

这款单页网站中的空白区域使您看到不同的区域,并引起您的注意。

Dribble’s Year in Review

Dribble’s Year in Review

有效地使用几种不同的设计原则是一个挑战,但可以做到。

Nasal Drops

Nasal Drops

这种对幻灯片,空白区域和动画的巧妙使用实际上成功地使单页网站令人兴奋。

4、导航:轻松浏览和娱乐滚动

如果您使用的是长篇单页的网站,则必须密切注意导航的管理方式。根据您的方法,可以使访问者锁定或将其逐出页面。

替代导航是这里的关键。水平粘滞菜单或侧边栏菜单就是实例。您的目标应该是使用户只需单击一下即可跳转到他们想去的地方,而不是滚动。自动滚动链接使访问者可以观看页面进行滚动。这是另一种方法。

Sergio Pedercini

Sergio Pedercini

该设计师的网站设有3个不同的自动滚动链接。

Be Game

Be Game

该网站的导航体验有些与众不同,甚至有些娱乐性。

Be Landing 2

Be Landing 2

在此实例中,配色方案,布局结构以及如何使用3次鼠标滚动可以扫描页面。

Brainflop

Brainflop

这些人确实希望通过在顶部提供菜单,在左侧提供菜单,帮助您快速浏览其站点。

5、采取行动:找出正确的CTA,不要犹豫使用它

单页网站的好处是它的目的是让人们采取单一行动。通常,这将涉及使用单个CTA按钮。但是,您也可能会销售几种产品或服务。然后,您可能需要在每个主要部分的末尾放置一个CTA按钮。

Be Hairdresser

Be Hairdresser

在该网站中,折叠上方有一个CTA按钮,而位于菜单中。

The Art of Texture

The Art of Texture

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

Pyrismic

Pyrismic

Pyrismic网站使用带有粗体CTA按钮的简单选择加入表格。

Reneza

Reneza

这个网站不会因使用CTA按钮而无所适从。但是,明智地使用了它们。并适当选择颜色和文字大小。

总结

现在,您知道了单页网站的5个关键元素。这只是与他们练习直到他们习惯使用的问题。一开始它们似乎很简单。一旦开始将它们混合在一页纸中并尝试保持一致性,就会发现这是一个很大的挑战。

南京网站建设专家浪知潮网络为大家提供了庞大的网站资源,它包含60多个单页页面,以及400多个各种模板网站。只需选择一个模板并对其进行自定义即可满足您的需求。

分享:
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:service@langzhichao.com,我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1115814032】

SEO按天计费
浪知潮网络提交您的需求提交您的需求
  • 公司名称
  • 联系人
  • 电话
  • 邮箱
  • 验证码
    看不清?点击更换

南京浪知潮网络科技有限公司 Copyright © 2012-2019 All Rights Reserved.未经许可,不可拷贝或镜像   网站地图