开发者社区> 秋天风景> 正文

谈谈构建单页布局网站的创意技术——附优秀案例

简介:   在过去的几年中,不断涌现出新的自定义网站设计技术。一个非常流行的想法是把所有的主要内容放在一个页面,使用动态滚动动画来定位内容,这种单页布局在只需要显示相关信息的一小部分的目标网页和移动应用程序制作网站经常使用。
+关注继续查看

  在过去的几年中,不断涌现出新的自定义网站设计技术。一个非常流行的想法是把所有的主要内容放在一个页面,使用动态滚动动画来定位内容,这种单页布局在只需要显示相关信息的一小部分的目标网页和移动应用程序制作网站经常使用。

您可能感兴趣的相关文章

 

  在这篇文章中,我想向大家介绍单页网站中一些有趣的技术。希望这些想法能够给正在寻找这方面内容的年轻设计师提供灵感。

视差滑动效果

  可能是因为实现这种效果比较复杂,视差滚动的概念对于很多设计师来说仍然是相当陌生。我看到过众多优秀的例子,例如像 Pixel Stadium 这样的杰出代表,这个网站易于浏览,纹理也是让人眼花缭乱。

 

像素体育场网站的布局设计界面

 

  当你向下滚动页面的时候,顶部导航栏会出现并锁定到窗口,这使得用户可以快速跳过或转换页面到不同的部分。布局是完全响应式设计的,会自适应浏览器窗口的宽度!这一切都说明,单页的布局可能会非常好看,也很灵活。

移动应用程序着陆页面

  Android 和 iOS 应用程序开发人员知道,推出品牌对于自己的营销努力是至关重要的。这就是为什么更小的移动应用程序的网站包含的信息通常设在一个页面上。它花费更少的精力而且效果看起来也好多了。

 

Infomatic应用程序iphone网站布局singlepage的

 

  这个网站采用了相当简约的布局,没有很多细节。大部分的设计是围绕应用程序的屏幕截图,环绕着 App Store 的徽章按钮。您想促进销售的话,使用单页布局是实现这个目标最好的布局风格。

隐藏的导航栏

  为了在在屏幕上节省空间,网站的导航条只有在滚动条滚动一定的距离,头部的内容看不到了之后才出现。网站 Radiologie 为这种技术提供了一个很好的示范。

 

Radiologie网站单页面滚动工具栏资产净值

 

  让当前的导航栏和网站的主题匹配是很好的做法,但是,因为它会在页面上保持固定,理论上你可以使用任意数量的设计风格。我想一个更好的例子是 Rule of Three

 

网站英国singlepage布局规则

 

  他们的网站是专注于一个撰稿人行业协会的专业人士,使用暗色风格纹理,配色方案也符合版面设计。当你向下滚动页面,你会发现导航链接固定在顶栏,这是一个很好的解决方案。

动态转换效果

  创建自己的动态页面动画的过程很复杂的。我不建议刚开始使用 JavaScript 的开发者走这条道路,但它可以是一个很好的学习经验。看一个例子:FK-Agency website

 

FK局网站单页面布局风格动画

 

  这个网站是可以同时在垂直和水平方向扩展。请注意,你不能在布局上/下翻页,必须滑动导航链接。在某些类似的服务和作品集网站中也会这种设计,你必须水平方向上滚动页面。对于一些访客,这种技术会让他们困惑,所以要小心使用。

水平滑动板

  这种技术和动态过渡风格是非常相似的,但水平滑动效果只要通过谷歌搜索就能找到很多的开源插件可以实现因此这种效果相比上面几种更简单。下面是我很喜欢的一个网站例子。

 

努米底亚网页响应的网页布局

 

优秀作品案例

  这里收集的单页网站非常值得关注,都是单页面布局的优秀作品。可以验证上面这些观点,为设计师提供更多的帮助。这些网站使用不同的布局,你会发现各种各样的不同的用户界面技术。另外,请记得给个评论,让我们知道您的想法。

Teamgeek

team geek website interface webdesign single pages

Funny Faces Camera

iphone app website funny faces design

Dash Creative

creative designs gallery icons dash agency portfolio

 

Kinderfotografie

german photography website single page layout

 

Lost Phone Experiment

parallax website sliding scrolling content webdesign

 

Marketing Facts

html5 info webpage single layout design

State of the Economy

state survey united states economy facts

Touch Gesture Icons

mobile touch icons website scrolling

Pipeline

pipeline website single page static top toolbar

 

 

Laymon

laymon cooking website parallax scrolling design interface

AxiaCore

django development projects freelance business axiacore

Ideakites

iphone android ios app development studio website agency

Jmore Design

jmore design website layout interface inspiration single-page

ngage

fixed ngage scrolling website layout design

M.dot App

mdot studio website design single page website

Creative9

space design website infinite scrolling singlepage

Mirrool Creek Lamb

mirrool creek website design interface layout

Startup Giraffe

vectors circles website design singlepage studio startups

Rate Us

rateus website layout scrolling inspiration single-page

Mitchell ME

 

您可能感兴趣的相关文章

 

本文链接:构建单页面布局网站的创意技术——附优秀案例展示

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19686 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24783 0
Spring Cloud构建微服务架构:服务消费(Feign)【Dalston版】
通过前两篇《Spring Cloud构建微服务架构:服务消费(基础)》和《Spring Cloud构建微服务架构:服务消费(Ribbon)》,我们已经学会了在Spring Cloud中基本的服务调用方式。
1226 0
一元建站-基于函数计算 + wordpress 构建 serverless 网站
本文旨在通过快速部署一个 wordpress 网站到阿里云函数计算平台这个示例来展示 serverless web 新的开发模式, 包括 FUN 工具一键初始化 NAS, 同步网站到 NAS, 一键部署等能力, 展现函数计算的开发敏捷特性、自动弹性伸缩能力、免运维和完善的监控设施。
1892 0
Spring Cloud构建微服务架构:服务容错保护(Hystrix依赖隔离)【Dalston版】
前言 在上一篇《Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)》中,我们已经体验了如何使用@HystrixCommand来为一个依赖资源定义服务降级逻辑。
1291 0
通过阿里云ECS从零开始构建网站
为帮助大家基于ECS构建自己的网站,本文将逐步介绍如何在ECS上架设自己的网站。现在网站主流的技术一般都采用Nginx+Mongodb+NodeJS,本教程将就此技术进行介绍,具体所涉及到的技术栈如下表所示:
2925 0
Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)【Dalston版】
前言 在微服务架构中,我们将系统拆分成了一个个的服务单元,各单元应用间通过服务注册与订阅的方式互相依赖。由于每个单元都在不同的进程中运行,依赖通过远程调用的方式执行,这样就有可能因为网络原因或是依赖服务自身问题出现调用故障或延迟,而这些问题会直接导致调用方的对外服务也出现延迟,若此时调用方的请求不断增加,最后就会出现因等待出现故障的依赖方响应而形成任务积压,线程资源无法释放,最终导致自身服务的瘫痪,进一步甚至出现故障的蔓延最终导致整个系统的瘫痪。
1175 0
Spring Cloud构建微服务架构:服务消费(基础)【Dalston版】
通过上一篇《Spring Cloud构建微服务架构:服务注册与发现》,我们已经成功地将服务提供者:eureka-client或consul-client注册到了Eureka服务注册中心或Consul服务端上了,同时我们也通过DiscoveryClient接口的getServi...
1157 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2393
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载