看似简单的一页式网站,该如何设计

随着移动端和社交媒体的兴起,简单直观、响应迅速的一页式网站受到不少设计师和用户的青睐。不过,一页式网站虽然看上去很简单,但创建起来却远没有想象中那么容易。今天和叶网络建站通就带来了一些设计技巧和范例,希望能给大家帮助。

什么是一页式网站?

一页式网站,顾名思义,是指只使用一个HTML页面的网站。也就是说,所有的信息内容都放在这一个页面上,点击导航菜单项(比如”关于’、”联系我们”)即到达这个页面的不同区块,而非单独分页。

一页式网站的优点:

信息流完整。一页式网站将内容完全整合在一页当中,这使得用户可以直观而清晰地感知到整个信息流,从而获得更加流畅的浏览体验。

交互简单。研究表明,一页式网站的转化率要比多页式网站的高37.5%。这是因为,在单页面网站上,用户能够更快地浏览、获取信息,不会因为其他的页面而分心。

利于移动端。相比多页式网站,一页式网站在移动端上的优势也更加明显。在小屏幕上,精简直观的内容、简单自然的滚动交互更符合访客的浏览习惯。

除了上面几点外,一页式网站还有不少好处:不用增加来回跳转的链接和页面,工作量没那么大;页面功能更容易实现;网站也更便于迭代和维护。

一页式网站的缺点:

承载内容有限。一页式设计不是成长型品牌创建网站的首选,因为它的承载内容有限。如果你想要创建大量内容、信息结构复杂的网站,或是一个不大的网站(但有计划进行拓展的话),尽量选择多页式网站设计。

不利于SEO。一页式网站是响应式的,能够带给用户更好的移动体验,但是它对SEO并不友好。因为你无法使用多个不同的关键词和描述词来定义不同的网页(你只有一个页面),所以这会在一定程度上影响网站的流量和在线影响力。

适用场景:

正如我们前面所提到的,一页式设计的承载内容有限,能够最大程度降低信息噪音的影响,让用户专注于最重要的内容。所以它经常被用来创建:

个人网站;

作品集;

简历页面;

活动页面;

着陆页;

宣传册网站;

单产品网站。

如何设计一页式网站?

将文本分为几个区块

如果你决定进行一页式网站设计,你可能没有太多信息内容要展示。否则的话,你就会选择多页式设计了。虽然你网站的内容不多,但这并不意味着你可以自动避免网站信息超载的问题。你仍需要对网站信息内容进行筛选和管控,将文本分为几个不同的区块,提出简单清晰、易于浏览的视觉结构,以确保用户能有兴趣一直滚动下去。

构建清晰的视觉层级

在网站中构建视觉层级的方法有很多,诸如对齐、颜色、字体大小、元素尺寸、间距、留白等都是不错的技巧。而视觉层级的架构同时还需要考虑用户浏览模式,这一点我们在《如何提升网页设计的视觉层次感?这9个技巧帮您轻松搞定》就提到过。一般来说,在网站内容不多时,用户常会使用古腾堡式。而在内容元素较多的页面上,用户更加倾向于F图模式。关于用户浏览模式可以点击《如何改善网站留给用户的第一印象?(上)》了解。

由于一页式网站通常包含多个部分,所以我们可以同时将这两种类型用在不同的区块上,以让网站的结构看上去更加多样化。当然,类型也不能太多。

尝试视差滚动设计

视差滚动是近年来比较流行的一种设计效果。在这种类型的网页上,如今设计师也有了更加广泛的探索,比如将视差滚动效果与一页式网站结合起来。不过,如果你想在自己的一页式网站中尝试视差滚动效果,最好先考虑考虑下面这三个因素:

加载时间。视差滚动涉及到图片叠加和动画效果,这会在一定程度上减缓页面的加载速度。你的访客会有足够的耐心等待页面加载出来吗?

响应式。视差滚动效果并不推荐用在移动网站上。当然,你可以进行一些设置,或是单独在移动设备上进行调整。做出这些努力是值得的吗?

用户友好度。一些用户天生就是不喜欢带有视差滚动效果的网站,所以建议尽量避免在销售页面使用视差滚动,这对你来说是OK的吗?

添加辅助导航菜单

很多时候,一页式网站的交互方式就是滚动,甚至是无止境的滚动。而当用户滚动到页面的中间时,他们可能会觉得无所适从,特别是当你的网站结构比较复杂,包含区块较多时。这时,我们不妨添加一些辅助的导航菜单,比如固定导航菜单(顶部/侧边栏等)、锚链接或”回到首页”按钮,以给用户提供更加愉悦、直观的浏览体验。

使用CTA按钮

一页式网站中十分适合放置CTA按钮。与多页式网站相比,一页式网站的结构能让用户更加集中于CTA按钮。如果你的网站是为了一个特殊目的(比如联系表单提交、APP下载或是邮件注册等)而创建的,你就可以重点突出这一CTA按钮,使用醒目的颜色和形式,引导用户完成既定的操作。

总的来说,在网站上究竟是使用一页式网站还是多页式网站,主要取决于您的产品/服务特征、网站内容多少,以及您目标用户的喜好。如果您想要创建一页式网站,不妨来起和叶网络建站通看看。和叶网络建站通是一家响应式自助建站平台,提供了众多设计出众、精致美观的一页式网站模板!

你可能感兴趣的:(看似简单的一页式网站,该如何设计)