国外的一些优秀单页滚动页面设计分享

国外的一些优秀单页滚动页面设计分享We Are Top Secret

这个导航界面设计从色彩上选用黑白,给人感觉带一点潮流,带一点温和,在这个单页滚动设计中没有特意去使用一些醒目和特效抓取用户的眼球,只是底部用了一个小巧的“scroll down”的提示,这样一来,由于界面简单简洁,融合度是非常好的。

Fixed Group在这些页面很炫酷的设计中,国外一般都很喜欢将导航栏给隐藏掉,一方面可以更加简洁,更加美观,另一方面可以引导用户向下的滚动页面,在这个页面的诱导设计中是使用了一个超窄的箭头,有趣而简洁,并且有折叠的效果。
Giampiero Bodino

这个网页在用户体验上也做的非常突出,对触摸屏设备的兼容尤其不错。设计师突出了页面托拽浏览的特征,可以纵向滚动也可以横向滚动。

Think Less Love More

一个比较先锋的网页项目,其中极具特色的交互是它的重要特征。它并未使用常见的横向或者纵向滚动,而是要进到“里面”去。探索的时候,你需要点击放大或者缩小的按钮,用鼠标滚轮或者手指都可以轻松操作。

Weltrade

这种页面中散落的菱形按钮是为触屏而生的,不仅可以增加整个页面的动态性,而且面对的是人的手指,有了视感,并且也一定程度上做到了触感的效果。

The Boat

讲述故事的页面,一般都会使用最简单和视觉冲击最强的形象事物来作为最直觉的设计方式,在这种网页中不需要特意去给用户提示去引导向下滚动,因为整个页面气氛就营造到吸引用户滚动的效果。
Well Storied

Well Storied 采用了大量的圆形控件来提升导航的交互性,这类非常规的页面设计常常会给用户留下极为深刻的印象。

Urban Walks

尽管Urban Walks 采用了常见的单页设计方式,用右侧的小圆点来作为翻页指示,但是整体的配色和细节设计非常到位,堪称教科书式的网页设计。

House of Borel

这设计真的是简单到极致了,能省略视觉元素都被设计师移除了,甚至包括导航。整个着陆页就只有一个标题,几个按钮和一组动效。而最后这个部分,需要你使用鼠标或者手指与之进行交互。

Melanie F Lookbook

这个街拍风格指南网站拥有相当不错的交互动画,你可以选择自动滚动也可以手动控制滚动速度,然后点击十字标识来查看产品的图片,价格,搭配,如果你喜欢,可以立刻点击购买。

La Region des Musees

背景图片是整个网页最具有视觉冲击力的部分,有趣的是页面的菜单设计,它正好处于整个页面的顶部,棱角分明的字体还带有明显的装饰性。

Giacomorelli

Giacomorelli 的页面为你提供了十分有趣且难以忘怀的用户体验,当然,如果你在平板上浏览可以更好的感受到它的特色。

Born

这个并不是传统意义上的长滚动单页,不过页面的展示性极强,每个项目都拥有一个极具视觉冲击力的大图。点击查看每个项目的时候,你会看到一个闪动的字母O,和Born中的第二个字母对应。

Nothing but Thieves

黑暗系的设计总是这么迷人。向下滚动就可以发现设计者想要展现的东西。

Planetary Scientist

典型的单页设计,点击右侧的小圆环同样可以操作,但是远没有鼠标滚轮或者手指滑动来的畅快。这个页面的风格颇为文艺,配色微妙而值得学习。

Shaker Brand

为了不让用户迷惑,设计师还是添加了一个小小的箭头来指示方向,但是也仅止于此。简单直接,你需要做的就是向下滚动到底,看看设计团队到底为你准备了一个什么样的东西。

Relatos Salvajes

设计师非常用心的在故事中设计,引起用户心中的共鸣,吸引着访客去探索,也是具有极高的评价的。

Brice Darmon

这个页面是设计师Drice Darmon 的作品展示页,当你滚动页面的时候会发现各个元素的运动都富有物理惯性,配合着轻微的视差设计,整个页面简单而有质感。

Little Big Room

这个页面的滚动设计是十分有创意的,结合了人的生活逻辑习惯,不用文字的提示,只需一个小小的形象图融合到一个特定的环境中,就会让用户有明白滚动的方向。精致而用心。

更多UI设计培训相关的文章--学员真正想要的UI设计培训公开课

免费UI设计公开课

时间: 2024-12-23 17:17:21

国外的一些优秀单页滚动页面设计分享的相关文章

jquery手写实现单页滚动导航

效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=$('.switch-tab>li').index(this); $('body

常用的几个单页应用程序网站分享

http://www.jb51.net/web/37228.html

单页网站不是梦,几款国外的单页网站创建工具

单页网站已经流行很久了,受到很多人的喜爱.从立体动感的视差滚动效果和流畅的动画到固定和干净的菜单,你会发现单页网站的效果真的很酷! 在这篇文章中,我们寻找了一些真正好用的单页网站创建工具分享给大家.这些工具对于那些想要一个方便的方法来创建单页网站的在线作品集网站或引导页面的人来说很有用.这些服务的最酷??的部分是,他们开箱即用的精美主题可以让制作出来的网页有华丽的外观. 您可能感兴趣的相关文章 经典网页设计:超炫动画效果单页网站 30个独具匠心的精美单页网站设计案例 25个以全屏照片为背景的精美

单页应用SEO浅谈

单页应用SEO浅谈 前言 单页应用(Single Page Application)越来越受web开发者欢迎,单页应用的体验可以模拟原生应用,一次开发,多端兼容.单页应用并不是一个全新发明的技术,而是随着互联网的发展,满足用户体验的一种综合技术. SEO 一直以来,搜索引擎优化(SEO)是开发者容易忽略的部分.SEO是针对搜索(Google.百度.雅虎搜索等)在技术细节上的优化,例如语义.搜索关键词与内容相关性.收录量.搜索排名等.SEO也是同行.市场竞争常用的的营销手段.Google.百度的搜

单页Web应用:

概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序又有自己独特的地方,就是它是基于Web的,而不是采用传统方法运行的.换句话说,它是典型的浏览器/服务器架构的产物. 理解了什么是浏览器/服务器架构,就了解了什么是Web应用程序.常见的计数器.留言版.聊天室和论坛BBS等,都是Web应用程序,不过这些应用相对比较简单,而Web应用程序的真正核心主要是

bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

转自:http://www.cnblogs.com/jesse2013/p/a-sample-of-single-page-applicaton.html 也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序一样.特别是在当今的移动时代,单页程序如果放在移动设备上去浏览就能够拥有像native app一样的体验,也许我们web开发者们应该期待这种技术

选择单页设计的理由是什么?

互联网最令人着迷的地方在于它会不断地进化.每年都会不断涌现新的工具和技术替换过时者,用新的解决方案来搞定各种问题. 单页设计在前几年就已经出现,并且愈演愈烈直到今年成为当仁不让的网页设计大趋势.它已经站在流行最前线,今天我们来聊一聊为什么它会这么火. 什么是单页式网站设计? 界定一个网站是否是单页设计很简单,顾名思义,单页设计就是一个网站仅需一个URL,进入之后只需要纵向或者横向滚动就可以浏览信息而无需点击.看看下面这个例子: 这是一个非标准的单页设计,网页中使用热气球元素来引导用户进行浏览.

单页营销网站关键词keyword和描述description写法

随着网络的发展,单页营销竞价模式是越来越多人的首选了,单纯的靠竞价付费点击还是很贵的,对于初入此行的新手小菜鸟来说,相当的不划算,极有可能因为大量的投入见不到汇报而选择妥协放弃,做单页营销需要设计好精美的页面,更需要一定的技术沉淀,网站的关键词和描述,都是用meta标签,写到页面代码里面的.虽然百度现在已经不把meta标签内容作为网站优化排名依据,但是,还是要写上,因为访客在百度搜索出你的网站会在缩略图里看到这些描述简介. 1.关键词的写法 关键词是告诉搜索引擎通过哪些词能找到网站,在代码里面,

iOS设计—滚动页面的设计 (控件UIScrollView)

在ios开发中 ,都会涉及页面的滚动设计,在此我就以手机的滚动页面设计为例简单说一下: 专为初学者而准备的,高手就不用看了  ,因为内容太过于简单 下面为设计的过程, 首先在.h文件中声明属性 ViewController.h #import <UIKit/UIKit.h> //宏定义  手机屏幕的宽Width和高Height:注:宏定义的结束不能加符号“;”. #define Width self.view.frame.size.width  #define Height self.view