最美H5 酷站欣赏 UI素材 专题 设计导航

创意性单页网站开发技术及欣赏

在过去的几年里面涌现出了很多网页设计的趋势,其中有一个设计思想是把要表现的所有主要内容都通过技术手段在一个页面展示出来,这就是所说的单页网站。在一些需要展示内容较少的网站领域里(比如着陆页(landing page)和移动手机网站等)单页设计变得非常流行。

这篇文章中我们将和大家分享一些单页网站设计开发的一些技术。希望这些对渴望从事单页网站设计开发的同行们有所帮助。通常的,前端开发人员需要拥有一些效果脚本或者开发类库,比如jquery等。有了这些资源我们可以更简洁快速的开发单页网站。

 

视觉错位幻灯效果(Parallax Sliding Effects)

 

视觉错位滚动(parallax scrolling )的设计理念对国内的一些设计师来讲还是比较陌生的。大概是因为这种效果可实现起来比较复杂,大部分的前端人员尚不敢轻易尝试,不过在国内也能偶尔看到这类效果的网站,但大多还是用flash实现的。这类效果的网站在国外非常的多,今天我们着重看Pixel Stadium,这个网站导航设计的很合理非常方便浏览,并且纹理比较简洁。

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

 

设计开发一个这样的网站,我们不去称赞他们的设计怎么样。当我们向下滚动页面的时候,导航会固定在头部,这样我们就可以随时到页面的任何地方。页面时完全符合相应式设计的,随着屏幕大小的变化,页面的尺寸也会随之变化,内容重新进行调整和排列。在各种移动终端上也有非常好的显示和交互效果。

 

移动应用程序登陆页面(Mobile App Landing Pages)

 

obile智能手机在网页的合适位置来营销手机应用。Android和iOS应用程序开发人员知道,品牌营销是至关重要的。这就是为什么更小的移动应用程序的网站包含的信息通常设在一个页面上。它需要让浏览者经过较少的努力,了解更多的信息。

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

Infomatic App采用了相当简约的网站没太多的细节。但是你可以发现这个网站并不是为展示数据而建设的。大部分的设计是围绕应用程序的屏幕截图,和App Store的图标按钮。

 

隐藏的导航栏

 

为了节省空间,在屏幕上,你会发现它连接到你的窗口的滚动条的布局后,才平移的距离。其余的内容为“隐藏”的这些额外的navbars的,你可能会认为,他们只出现在顶部导航是不可见的了。网站Radiologie这种技术提供了一个很好的示范。

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

它总是很高兴与您目 ​​前的导航栏进入您的网站的主题。但是,因为它会在页面上保持固定,理论上你可以使用任意数量的设计风格。请确保您的导航是吸引人的,但不讨厌,或根本无法使用。我想一个更好的混合设计例子,可以看http://rule-of-three.co.uk/

网站英国singlepage布局规则

他们的网站是专注于一个撰稿人行业协会的专业人士使用的专业调暗纹理。配色方案也符合版面设计,你可以看到它的顶部导航链接。当你向下滚动页面,你会发现他们的固定顶栏添加到背景的彩色纹理。这可以是一个很好的解决方案,让您的导航跳下页。

 

动态转换Dynamic Transitions

 

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

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

他们的网站是同时在垂直和水平方向扩展。请注意,你不能在布局上/下翻页,必须滑动的导航链接。类似的服务和产品组合上市,你必须在屏幕上出现水平滚动条,在某些页面也是如此。对于一些游客,这种技术可以非常混乱,所以要小心,并建立自己的UX转换时使用常识。

 

水平滑动板

 

这种技术是非常相似的动态过渡的风格,但横板已经有几十个的开源插件。只要通过谷歌搜索就能找到理想的插件。但执行是没有问题,尽可能多的把重点放在设计和用户交互上。

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

Numidia 是一个我非常喜欢的例子。右上角的导航作为水平滚动面板的导航。采用了jquery技术,可以非常好的兼容大多数浏览器,甚至是非常老旧的浏览器。所以,要想把你的网站也按照这种效果开发出来并不是一件难事,你不妨试试哦。

 

单页网站相关案例欣赏

 

上面说了挺多,我们还是整理了一些非常优秀的单页网站和大家分享。他们很多采用了不通的设计和技术手段,相信有一定能力的设计者可以从中学到更多的设计理念和开发手段。

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

Code to Live By

coding website single page scrolling layout

 

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

mitchell portfolio mechanical electrical contractors website

Accueil

basic website layout beige tan traveling