设计趋势赏析单页网站设计

1、DESIGN TREND 单页网站实例 1、Terra-digitalis（http:/terra-digitalis.dfg.de/） 这是一个非标准的单页设计，网页中使用热气球元素来引导用户进行浏览。 DESIGN TREND 为什么选择单页网站 所有内容在一个页面内1 1 趋势2 2 故事3 3 轻松导航4 4 适应移动设备5 5 DESIGN TREND 原因一“所有内容在同一个页面” 一个单页网站的页面空间是有限的，所以其中的内容需要足够有条理，将最 希望用户看到的内容呈现在他们面前 在有限的页面空间中呈现内容是需要讲究技巧的，字体、图像、排版、列表、 信息图等元素的合理使用，都值得

2、仔细推敲 当你打算将一个传统网站重新设计成为一个单页网站的时候，需要进行精简 整合，把乱七八糟一塌糊涂的信息收拾得井井有条。这个过程就像是从郊区2 层小楼搬到市区两居室一样，不断去芜存菁 用户喜欢简约整洁的页面 DESIGN TREND 案例 Agencysurvivalkits（http:/ 这个单页网站使用了视差滚动式的设计，网页向下滚动的过程中使用了很多 典型的视差滚动网页的图片设计技巧。 DESIGN TREND 案例 Burkecomfortdental（http:/ 这个牙医网站使用了绿色的色调，手绘的效果也拿捏的不错，垂直滚动的过 程中伴随着动画效果。和许多同类网站一样，滚动到底

3、部就是分享按钮了。 DESIGN TREND 原因二“趋势” 不论如何单页设计是大势所趋。潮流和趋势来来去去是没错，但是谁原因蹲 在阴影里坐视潮流和趋势从眼前溜走呢？ 不仅仅是一个时尚的单页网站，简单愉悦的用户体验也是你的用户的诉求， 只需要滚动就可以完整浏览的单页不会令人失望的。 DESIGN TREND 案例 Lip Lover Website Design（http:/www.liplover.ca/） 时尚的视觉效果，鲜活的色彩 DESIGN TREND 原因三“故事” 与用户进行沟通，最有效的方法之一就是讲故事 讲故事最常见的误解：它必须以一段文字、一组图片或者一个视频的形式而 存在

4、，与设计无关 单页式的网页设计本身就是一个承载一系列内容的绝佳载体，流动性的页面 与连贯性的内容在逻辑上完全相合 DESIGN TREND 网页设计所涉及的一些网页元素 图片：图片是最重要的元素之一，它能强化网页视觉的吸引力，推动故事 的发展，调剂视觉让用户远离沉闷。 视频：视频是主动输出信息的载体，可以以更清晰更主动的方式传递信息 给用户。视频可以承载的信息量非常可观，同时占据版面也不会太大，越来 越多的网站开始选择使用视频来直面用户。 音频：音频确实没有视频出现的比例高，但是它无疑也是一个极具潜质的 载体。用来作为背景音乐的时候，它可以渲染氛围，作为单独音频文件播放 的时候，也可以讲述故事

5、。 DESIGN TREND 网页设计所涉及的一些网页元素 排版：排版很重要，它决定了信息要如何在网页上展现。很多网站并不重 视排版，至少不太重视网页布局、文字、色彩之间的排版关系。 滚动：可能你之前未曾仔细注意过页面滚动，但是它的确是影响讲故事的 关键因素。多页式网站在信息呈现上相对支离破碎，而在单页设计之下，流 畅的滚动将信息源源不断地传递给用户，勾起他们的好奇心一直阅读下去。 DESIGN TREND 案例 The Art of Texture Movie Website（http:/ 这个网站充满了视频、图片和滚动效果，来呈现故事 DESIGN TREND 案例 http:/ 这个网站

6、以一开始加载完成之后会跳转到页面的最底部，火箭为载体，以遨 游太空为故事背景。随着火箭的升空页面逐渐向上滚动，随之以场景化的手 段，形象的讲述了intacto 从2001年到2012 年10年的历程 DESIGN TREND 原因四“轻松导航” 导航是网页浏览的基石 单页网站让信息呈现更加扁平，最大化地降低了获取信息的难度。鼠标滚动， 信息就全部展现在用户面前 单页式的网页设计本身就是一个承载一系列内容的绝佳载体，流动性的页面 与连贯性的内容在逻辑上完全相合 DESIGN TREND 案例 PC Baruk Website（http:/.br/site/content/index.php） 这

7、个网站设计得赏心悦目，用户可以直接滚动，也可以使用点击来控制浏览 的节奏。内容被安置在一个页面上，但是分组呈现的方式，降低了持续浏览 带来的疲惫。 DESIGN TREND 原因五“适应移动设备” 要想在多屏幕多设备上保持体验的一致，单页式设计的很多思路反而比 传统的网站更有优势，那些简单直观的导航更容易迁移到移动端页面上， 令体验一致 DESIGN TREND 如何实现单页网站 单页网站适用场合1 1 可采用的招式2 2 注意事项3 3 DESIGN TREND 单页网站适用场合 上线前的APP预告 作品集展示工具 引导用户跳转的网站 简单展示产品和信息的公司网站 DESIGN TREND

8、可采用的招式 视觉差滚动 滚动特效是单页设计中最盛行”花招”中的一个。轻弹鼠标，用户无需点击或从 欢迎页跳转就能来到一个新页面。这种效果可以激励用户继续滚动、阅读、与网 站互动，看看接下来会出现什么 DESIGN TREND 案例 http:/.au/gamesites/mariokartwii/ 1是背景层，是一条赛道，在整个网站中贯穿整站起到线索的作用 2、3是贴图层，在画面中起到渲染氛围的作用， 4是内容层，网站有趣的同时不忘内容的呈现。 5是所在位置的导航 DESIGN TREND 可采用的招式 移动App欢迎页 创建一个特别的欢迎页面，在用户通过移动设备和平板电脑访问你网站的 时候，

9、鼓励他们下载App。这个”广告页面”可以帮助你将网站用户转化 为正式的App用户。 DESIGN TREND 案例 http:/simplesimple.co/currency/ DESIGN TREND 可采用的招式 隐藏式导航 鼠标接近时会出现和隐藏的菜单可以在整个设计中节省空间，并且始终 在熟悉的位置提供导航（通常是页面顶部）。你也可以试试其他导航特 效，比如Jamie Olivers Fifteen页面中那样，导航刚开始在屏幕中央， 随着鼠标向下滚动移至顶端（并且固定位置）。 DESIGN TREND 案例 http:/www.toybox.co.nz/ 这个侧边导航非常方便使用，鼠标

10、悬停在浏览器左侧即可出现，主体部分即时出现旋 转效果，可以很好的引导用户的注意力 DESIGN TREND 可采用的招式 动画特效： 移动物体会诱使用户逗留，看看接下来发生什么。 DESIGN TREND 案例 DESIGN TREND 案例 DESIGN TREND 注意事项 创造第一印象 你只有唯一的机会来增加新用户。你的网站得通过视觉吸引来迅 速告诉用户他们为何来这 保持专注 记住你的目标，去除所有碍事的小花样、设计元素和文案 使用鲜明的视觉风格 无论纯色、图片或漂亮的照片，选择一种很棒的视觉表现，并且 大张旗鼓地使用它 DESIGN TREND 注意事项 开发一个清晰的导航 即便是拥有

11、少量内容的网站，也需要包含一个清晰易懂 的指引来发挥作用； DESIGN TREND 注意事项 精心组织 你绝对没法在单页设计的版面（或空间）中说清楚你的全部所想。信守什 么是重要的，并将所有东西根据重要性层级排个序。撰写简单清晰的文案， 不断编辑直到措辞简洁明了、切中要害； 谢谢 DESIGN TREND 原因一“所有内容在同一个页面” 一个单页网站的页面空间是有限的，所以其中的内容需要足够有条理，将最 希望用户看到的内容呈现在他们面前 在有限的页面空间中呈现内容是需要讲究技巧的，字体、图像、排版、列表、 信息图等元素的合理使用，都值得仔细推敲 当你打算将一个传统网站重新设计成为一个单页网站

12、的时候，需要进行精简 整合，把乱七八糟一塌糊涂的信息收拾得井井有条。这个过程就像是从郊区2 层小楼搬到市区两居室一样，不断去芜存菁 用户喜欢简约整洁的页面 DESIGN TREND 原因一“所有内容在同一个页面” 一个单页网站的页面空间是有限的，所以其中的内容需要足够有条理，将最 希望用户看到的内容呈现在他们面前 在有限的页面空间中呈现内容是需要讲究技巧的，字体、图像、排版、列表、 信息图等元素的合理使用，都值得仔细推敲 当你打算将一个传统网站重新设计成为一个单页网站的时候，需要进行精简 整合，把乱七八糟一塌糊涂的信息收拾得井井有条。这个过程就像是从郊区2 层小楼搬到市区两居室一样，不断去芜存菁 用户喜欢简约整洁的页面 DESIGN TREND 案例 http:/simplesimple.co/currency/ DESIGN TREND 案例 http:/www.toybox.co.nz/ 这个侧边导航非常方便使用，鼠标悬停在浏览器左侧即可出现，主体部分即时出现旋 转效果，可以很好的引导用户的注意力 DESIGN