令人惊叹的单屏网站设计作品
5个要害元素能够决定你的设计胜败
乍一看,设计一个只有一页的网站设计似乎在直觉上很简略,特别是与构建多页的网站设计相比。设计一个页面的工作量是设计三个页面的三分之一,对吧
实际上,设计单页网站通常要困难得多。你面对的应战是有必要在一个页面上获得一切必要的信息。同时,您需求保证页面具有视觉吸引力和用户友好性。
这个设计单页网站的指南围绕着5个要害元素,这取决于您怎么考虑它们,它们能够成果或损坏您的规划。
在概述这些要害元素时,同时会供给示例的网站设计。它们将举例说明它们的重要性。
1、方针:确认并理解你的网站的方针,并为之尽力
你或许无法完全理解你的网站想要达到的作用,那么,继续进行它的设计就没有什么含义了。它需求有一个单一的方针,您的设计需求带领用户踏上完成该方针的旅程,并做出相应的呼应。
方针是推广还是出售
是邀请访问者来查看您的作品集吗
你打算宣告一项活动还是一系列活动
一旦你确认了方针,你就几乎完成了一半。但你依然需求考虑你需求做什么,在访问者点击CTA按钮之前,您需求防止让他们离开页面。
一些用户对页面加载速度十分敏感(有很多用户是过度敏感的!)因而,您或许会挑选防止会降低页面加载速度的特效(比如视差)。
BistroAgency
本网站的互动作用是以上折叠,他们不妨碍其加载速度。
BeMoving3
动态图画会影响加载速度,这个BeTheme预构建的单页导航具有静态图画的特性,该图画具有动态的外观。
ThinkPixelLab
让这个页面的插图生动起来的小动画项目不会减慢任何东西的速度。
BeProduct2
有时候,是页面的新鲜感才会带来销量。
Sheerlink
这儿有一个比如,大图画和滑动面板将吸引用户。
BeApp4
你不需求一篇详细的技术论文来推广一个应用程序,而一个很帅的视觉展现就能够达到意图。
2、将其保持在最低限度并使其易于阅览
单屏网页以粗笨的文本块或读起来像一本书为特点,能够吸引访问者一秒钟。有时,在他们去其他当地之前乃至更少。文本要简短,而且要有很好的行距,剥去信息的精华。
依托醒意图标题、简短的阶段和项目符号列表来表达你的观念。
以下是几个值得收藏的比如,供日后参阅:
DangerousRobot
这个比如展现了一个单页网站是多么的有趣。
BeTea3
这是一个精心组织的好比如。
HelloAlfred
基本信息是最重要的,运用项目符号列表有助于使消息尽或许地简略明了。
BeCakes
这个预先建立的网站说明了当大的有吸引力的图片和合理放置的文字阶段在一同时,是怎么协助出售的。
Mercedes-Benz
当一辆车有奔驰车那么高时,高质量的图片和少数的文字就足够了。
3、视觉作用:确认正确的形式,明智地运用消极的空间
知道大多数人是怎么阅览页面是有协助的,人们倾向于以F形式阅览文本,以Z形式扫描图画。当您混合元素时,请记住这一点。你希望信息的自然流动朝着你的方针,明智地运用空白是有协助的。
ChrisConnolly
在这个比如中,空白的运用是平静的,并供给了一种秩序感。
WeShootBottles、com
在这儿,一个极具构思的规划被泼洒在白色的画布上。
BeDietician2
这个预先构建的单页寻呼机中的空白会让不同的部分出现在您面前,需求您的留意。
Dribble’sYearinReview
最大限度地有效地运用几种不同的规划原则是一个应战,但这是能够做到的。
NasalDrops
对一个寻呼机来说,这不是一个特别令人兴奋的话题,不是吗这种奇妙地运用幻灯片、空白和动画的方法实际上成功地使单页滴鼻剂令人兴奋。
4、导航:让它很简略导航和娱乐翻滚
当你有一个长形式的单页网站时,你有必要亲近关注你怎么管理导航。根据您的方法,您能够将访问者锁定在页面中,也能够将他们赶出页面。
替代导航是这儿的要害,水平粘贴菜单或侧边栏菜单都是比如。你的方针应该是让用户只需点击一下就能跳到他们想去的当地,而不是翻滚鼠标。主动翻滚链接使访问者能够看到页面进行翻滚,这是另一种方法。
SergioPedercini
这个设计师的网站有3个不同的主动翻滚链接。
BeGame
Be游戏的导航体会有些异乎寻常,乃至有点娱乐性。
BeLanding2
在这个示例中,颜色计划、布局结构以及怎么运用3个鼠标卷轴扫描页面都十分杰出。
Brainflop
这些人真的想协助你快速阅览他们的网站经过供给一个菜单在顶部和一个在左边。
5、举动的呼唤:确认正确的CTA,毫不犹豫地运用它
单页寻呼机的优点在于它的方针是让人们采取单一举动,这通常需求运用一个CTA按钮。可是,您也或许会出售一些产品或服务。然后,您或许希望在每个主要部分的结尾放置一个CTA按钮。
BeHairdresser
在Be理发师预建的网站上,一个CTA按钮在折叠上方,一个在菜单中。
TheArtofTexture
放在折叠上方的两个CTA按钮能够让用户挑选他们想看到的内容。
Pyrismic
Pyrismic站点运用一个简略的带有粗体CTA按钮的可选表单。
Reneza
这个站点不会在CTA按钮的运用上浪费时间,可是,它们的运用是明智的;并有适宜的颜色和文字大小的挑选。
WrappingItUp
现在你知道了5个要害的单页网站元素,只是和他们一同操练,直到他们习气为止。
乍一看或许很简略,一旦你开端将它们混合在一个寻呼机中,并试图做到一致性,你会发现这是一个相当大的应战。