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

互联网最令人着迷的地方在于它会不断地进化。每年都会不断涌现新的工具和技术替换过时者,用新的解决方案来搞定各种问题。

单页设计在前几年就已经出现,并且愈演愈烈直到今年成为当仁不让的网页设计大趋势。它已经站在流行最前线,今天我们来聊一聊为什么它会这么火。

什么是单页式网站设计?

界定一个网站是否是单页设计很简单,顾名思义,单页设计就是一个网站仅需一个URL,进入之后只需要纵向或者横向滚动就可以浏览信息而无需点击。看看下面这个例子:

这是一个非标准的单页设计,网页中使用热气球元素来引导用户进行浏览。

选择单页设计的原因很多,但是其中有五个主要的优势值得设计师为之侧目。

1、所有内容都在一个页面之内

一个单页网站的页面空间是有限的,所以其中的内容需要足够有条理,将最希望用户看到的内容呈现在他们面前。单页式设计对于页面长度并无限制,即使需要呈现的内容很多,也不要急吼吼地将图文堆砌在一起,合理运用留白可以带来非常不错的视觉效果。

在有限的页面空间中呈现内容是需要讲究技巧的,字体、图像、排版、列表、信息图等元素的合理使用,都值得仔细推敲。

当你打算将一个传统网站重新设计成为一个单页网站的时候,情形就变得非常有意思了,因为这意味着你多年以来为这个传统网站所添加的内容,在这个时候都需要进行精简整合了,把乱七八糟一塌糊涂的信息收拾得井井有条。这个过程就像是从郊区2层小楼搬到市区两居室一样,不断去芜存菁。

重新组织整理网站的另外一个理由,是用户喜欢简约整洁的页面。通常,用户为了找到他们需要的产品、服务或者信息,需要翻阅海量的页面,浏览各种各有的文章和列表。问题在于,用户没法仔细阅读每一个字,不停的扫视文章寻找关键词,最终找到的可能就是一句话、一个链接或者一张图片。这就是为什么单页网站流行的原因:用户不用在页面、Tab和长篇大论的文章之间来回切换了,鼠标滚轮一撸到底,就可以清晰地浏览核心内容和重点信息,找到想要的信息。

即使你真的有大量的信息,大把的图片,以及无数”不得不”置于网页上的内容,你也有必要用心尝试一下设计成单页网站。为什么不呢?很多时候你至少要尝试一下那些让你感到害怕恐惧或者”看起来不可行”的方案,成功了可以收获经验,失败了也提升了技巧,不是么?看看下面两个案例:

Agencysurvivalkits

这个单页网站使用了视差滚动式的设计,网页向下滚动的过程中使用了很多典型的视差滚动网页的图片设计技巧。

Burkecomfortdental

这个牙医网站使用了绿色的色调,手绘的效果也拿捏的不错,垂直滚动的过程中伴随着动画效果。和许多同类网站一样,滚动到底部就是分享按钮了。

2、趋势

不论如何单页设计是大势所趋。潮流和趋势来来去去是没错,但是谁原因蹲在阴影里坐视潮流和趋势从眼前溜走呢?喜欢就是放肆,爱就是克制。在你深爱上某种潮流之前,先放肆地试试吧。在单页设计最流行的今年,不要错过。

有些事情并不难,不是么?你所得到的不仅仅是一个时尚的单页网站,简单愉悦的用户体验也是你的用户的诉求,只需要滚动就可以完整浏览的单页不会令人失望的。

Lip Lover Website Design

看看这个网页设计的案例吧,当时尚和鲜活的色彩与视差滚动相遇在单页网站的时候,感觉就是这么美妙。

3、故事

与用户进行沟通,最有效的方法之一就是讲故事。比起千奇百怪的页面优化,一个清晰明了恰如其分的故事来的更靠谱。如果你也喜欢用网站讲述故事,这篇《网页设计新思路!用故事来吸引用户》千万不要错过。

对于讲故事最常见的误解就是它必须以一段文字、一组图片或者一个视频的形式而存在,与设计无关。但事实并非如此。单页式的网页设计本身就是一个承载一系列内容的绝佳载体,流动性的页面与连贯性的内容在逻辑上完全相合。接下来,我们看看单页式网页设计所涉及到的一些网页元素:

图片:图片是最重要的元素之一,它能强化网页视觉的吸引力,推动故事的发展,调剂视觉让用户远离沉闷。

视频:视频是主动输出信息的载体,可以以更清晰更主动的方式传递信息给用户。视频可以承载的信息量非常可观,同时占据版面也不会太大,越来越多的网站开始选择使用视频来直面用户。

音频:音频确实没有视频出现的比例高,但是它无疑也是一个极具潜质的载体。用来作为背景音乐的时候,它可以渲染氛围,作为单独音频文件播放的时候,也可以讲述故事。

排版:排版很重要,它决定了信息要如何在网页上展现。很多网站并不重视排版,至少不太重视网页布局、文字、色彩之间的排版关系。

滚动:可能你之前未曾仔细注意过页面滚动,但是它的确是影响讲故事的关键因素。多页式网站在信息呈现上相对支离破碎,而在单页设计之下,流畅的滚动将信息源源不断地传递给用户,勾起他们的好奇心一直阅读下去。这就像阅读一本引人入胜的故事书,”接下来会怎样?”简单的向下滚动,答案就在下面,就这么简单!

The Art of Texture Movie Website

这个网站充分使用了视频、图片和滚动效果来呈现故事。

4、轻松导航

导航是网页浏览的基石。不论是商业项目网站还是作品集展示页面,导航栏都是最重要的组成部分。复杂的导航栏不仅需要耗费大量的时间来进行设计,也会让用户敬而远之。这也是为什么单页设计会逐渐流行甚至占据主流。

单页网站让信息呈现更加扁平,最大化地降低了获取信息的难度。鼠标滚动,信息就全部展现在用户面前,还有什么方式比这个更加简单?

如果你是一个极富创意的设计师,或许可以轻松驾驭横向式的单页网站设计,甚至其他的非标准式滚动浏览方式–比如页面滚动方向一会儿向左一会儿向下–总而言之,单页网站设计的创意空间无限大。

PC Baruk Website

这个网站设计得赏心悦目,用户可以直接滚动,也可以使用点击来控制浏览的节奏。内容被安置在一个页面上,但是分组呈现的方式,降低了持续浏览带来的疲惫。

5、适应移动设备

从某种程度上适应移动设备和讲故事的核心非常接近,导航才是重点。

响应式设计的优势相比你已经耳朵听出茧子了,而我想说的是,单页式网站的设计本就是响应式设计概念的一部分。诸如鼠标悬停下拉框这样的导航栏设计,在普通网站中很常见,但是要进行响应式设计中,在移动端中正常使用并不方便,如果在移动端网页中将其舍弃又不太合适。所以,要想在多屏幕多设备上保持体验的一致,单页式设计的很多思路反而比传统的网站更有优势,那些简单直观的导航更容易迁移到移动端页面上,令体验一致,取悦用户。

是否应该将多页面的网站重新设计成单页网站?

假使你已经拥有一个现成的网站,它是一个典型的多页面式的网站,你需要为之重新设计,有几个选项可供选择,一保留现有结构和框架,在网站的设计风格和细节上做文章,另外一种方案是放弃现有的结构和内容,重新设计成单页式网站。这两种选择要如何取舍,主要取决于网站本身的结构、内容和发展方向。如果网站的结构和内容并没有想象中那么重要的话,那么你是时候考虑是否跟随设计趋势,设计属于自己的单页网站了。

转载于:https://blog.51cto.com/webqianduan/1717379

选择单页设计的理由是什么?相关推荐

  1. 小程序+单页+需要服务器,小程序单页设计

    小程序单页设计 内容精选 换一换 I/O分析以存储块设备为分析对象,分析得出块设备的I/O操作次数.I/O数据大小.I/O队列深度.I/O操作时延等性能数据,并关联到造成这些I/O性能数据的具体I/O ...

  2. 40个html作品,40个效果惊人的单页设计

    单页网站是一个越来越火的设计趋势,尽管它不能成为主流,不过已经有很多设计师注意到这种设计风格,今天我们收集了40个风格迥异.效果惊人的单页网站,对这类型感兴趣的同学可以学习一下,希望给你带来灵感. V ...

  3. ps简单单页设计心得

    首先声明一点,本人也是菜鸟这只是自大发表一些个人意见,给菜鸟交流而已:路过的大虾们抬手哈... 先来看效果图: 类似于这类的单页,标题是很重要的,看到了就知道了--这个是这类页子的功能:所以要重点突出 ...

  4. UI设计灵感|信息录入表单页,告别枯燥!

    大家所说的『表单』.这种页面通常需要用户输入并提交数据,例如:注册网站时输入个人资料.录入客户信息等,都属于录入式页面. 告别千篇一律的枯燥表达格式,平日多浏览欣赏一些优秀的案例,给我们提供一些参考, ...

  5. 58 非常酷的单页网站设计灵感

    在过去2年的单页网站变得非常时髦,你可以找到数百个单页设计在网上.这都是精彩和高度创造力.大多数设计师,在一个页面上呈现一切,是一个完美的解决方案,以吸引客户和访客. 今天我想向人们展示真正的美丽的单 ...

  6. html5单屏滚动页面案例,20个精巧走心的单页滚动网页设计案例

    单页滚动也算是目前网页设计中一个独立的类别了,导航.菜单等网页元素的设计也有一套独特的手法.极简风的导航栏设计其实算不上太多,毕竟导航栏的部分应该是包罗万象并且常驻页面的.而汉堡菜单的存在让导航具备了 ...

  7. 50个有创意的单页网站设计

    相对很多数不清的网站页面来说,单页面网站需要在仅有的页面里放入足够多的内容,所以如何分配空间是很重要的.对这类网站的设计我们更多的是运用空间的合理规划.这就需要设计师有好的创意来让浏览者愉快的获得信息 ...

  8. 如何在Joomla中创建一个漂亮的单页网站

    我们都知道一个好的网站对于建立企业信誉的重要性.但是,在拥有统一的单页网站和多页网站的选项之间进行选择可能会很棘手.特别是如果您是 Joomla 和 Web 开发的新手. 随着移动和社交媒体用户的增加 ...

  9. 如何删除第一张单页_单页网站-网站建设中独有的风景线

    在这个网页技术飞速发展的时代,单页网站由于其自身的特点已经形成了一种独有的风景线.从本质上来说,单页网站就是只有一个页面,滚动长页面来显示相关的网站内容,网站所有菜单都链接到主页相应的部位. 一些前卫 ...

  10. UI设计实用素材|寻找一种新的方法来设计网站,单页网站

    寻找一种新的方法来设计网站? 如果设计得当,单页网站可以为访问者创造更令人难忘的体验. 明智的设计选择可以帮助减少疲劳和沮丧,否则人们会感到使用网络. web设计者有很多方法可以减少分心.信息过载和分 ...

最新文章

  1. 心灵小栈: 镌刻在地下500米的母爱
  2. 数据结构1:单链表反转java代码解释
  3. 剑指offer python版 找出数组中重复的数字
  4. 2021年临颖一高高考成绩查询,河南漯河名列前茅的4所高中,临颖一高强势登榜,你还知道几所?...
  5. koa --- [MVC实现之二]Controller层的实现
  6. mysql 数据修改时间_怎样修改mysql数据中的具体时间
  7. 安阳师范学院计算机与信息工程学院吴琴霞,基于甲骨文字形动态描述库的甲骨文输入方法...
  8. 【java】java wait 原理 synchronized ReentrantLock 唤醒顺序
  9. mysql 时间类型转化_Mysql 字段类型转化 和 时间类型相关处理
  10. LeetCode 229 : Majority Element II
  11. c语言c程序由函数构成 每个函数完成相对独立的功能,17秋学期(1709)《C语言程序设计》在线作业  满分...
  12. PHP运算符 - 对象的方法或者属性, =数组的元素值
  13. jQuery Validate focusCleanup: true
  14. python风险评分卡系统_《智能风控:Python金融风险管理与评分卡建模》(梅子行,毛鑫宇)【摘要 书评 试读】- 京东图书...
  15. [Bzoj1597][Usaco2008 Mar]土地购买(斜率优化)
  16. 常用中文字体的Unicode编码
  17. 汇编语言 程序设计 分支结构
  18. 头文件防卫式声明/引用/static/extern/
  19. 【边学边记_12】——VGA原理与FPGA实现
  20. [数字图像处理]图像复原--逆滤波

热门文章

  1. Unity 3D环绕Demo
  2. 为什么总是封板又打开涨停_一旦持有个股出现涨停板,却封不住反复打开,意味着什么?...
  3. huskar与hsf
  4. 【游戏感想】古剑奇谭2
  5. w7无法訪问计算机上硬盘分区,Win7/win10双系统无法打开磁盘分区提示拒绝访问怎么解决...
  6. docker中的localhost
  7. HTML5--2 HTML标签
  8. Medium之1468.计算税后工资
  9. window的dos命令学习笔记 二
  10. 原始人到春秋战国历史常识整理