文档章节

从网页设计的发展过程捕捉设计方向

ali安东尼
 ali安东尼
发布于 2017/05/22 15:50
字数 2399
阅读 3
收藏 0

从网页设计的发展过程捕捉设计方向 输入图片说明 互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。

当人们发现设计网页有多投机取巧的方法之时,就逐渐开始对手打网页代码失去兴趣。的确,许多网页设计的问题并不止一种解决方案,但是很少有方案能解决所有的浏览器兼容性问题。最纳闷的是,为什么会有做设计和写代码的分工?随着技术的发展,许多在过去难以解决的问题现在可以轻松搞定,但为什么与此同时一些简单的事情反而越来越难以实现?这些问题的答案并不是简单的是与否,对与错,也许我们需要从网页设计的整个发展历程来寻找答案,找到真正弥合设计与代码之间隔膜的原因所在。

网页设计:黎明前的黑暗(1989) 输入图片说明 在互联网真正开始之时,黑色的显示屏仅能显示单色的像素。可以说,当互联网天地初开之时,Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了,但在此时普及率并不高。直到90年代,图形化界面才真正进入千家万户,而那时候,才是属于互联网的狂野时代。

表格(table):网页的兴起(1995) 输入图片说明 能够显示图片的浏览器的诞生,是促使网页设计这个行业诞生的重要先决条件。实际上在当时,最接近于信息结构化的概念,是HTML中已有的元素:表格(Table)。在表格中嵌套表格,将静态的表格和动态的表格以巧妙的方式结合到一起。尽管表格本身是用来承载数据的,用来承载内容和图片有点奇怪,但是在那个时代,这种方法依然显得颇为靠谱,并且大行其道。

网页设计所面临的另外一个问题,就是如何保持网页那脆弱的结构。也正是因为这种需求,切片设计(Slicing Design)逐渐流行了起来。设计师创建出漂亮的网页布局,随后开发者将整个设计稿切片,找出呈现设计的最佳方法。另一方面,表格还有一些炫酷的功能,比如垂直对齐,以像素为单位或者以百分比来控制对齐。在那个时代,表格可是近乎栅格系统一般的灵活的设计神器,也正是因此,那个时代的开发者并不喜欢前端的代码。(表格嵌套表格有多乱?)

来自JavaScript的救援(1995)

输入图片说明 JavaScript的出现补足了尚且原始的HTML。举个例子,如果你想写个弹出窗,或者想动态修改某些对象的顺序?HTML不行,但是JS可以!不过此时JS的主要问题在于,它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁,但如果使用得当,JS可以非常强大。今天,同样的功能如果CSS能实现,我们会尽量避免使用JS。不可否认的是,JS本身确实很强大,前端常用的jQuery,后端的Node.js都是不可多得的好东西。

Flash:自由的黄金时代(1996)

输入图片说明 作为一门新技术,Flash为网页开发者/设计师带来了前所未有的自由,它打破了之前网页设计所固有的限制。借助Flash,设计师可以随心所欲地在网页上展现任何形状、布局、动画和交互,可以使用任何喜欢的字体,他们借助Flash熔于一体。所有的这一切最终会被打包成为一个文件,然后被发送到浏览器端显示出来。这也就意味着,用户只需要拥有最新的Flash插件和些许等待时间,就可以享有一个魔术般的网页。这是启动页面(splash pages)、介绍动画以及各种交互特效的黄金时代。不幸的是,这种设计并不开放,也不利于搜索,还需要消耗计算机大量的运算能力。2007年,当苹果发布他们的第一台iPhone的时候,就决定彻底放弃Flash,也正是在这个时候,Flash开始走下坡路——至少在网页设计领域。

CSS的诞生 (1998) 输入图片说明 差不多是在Flash崛起的同时,一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来,所以网页的外观和格式等属性将会在CSS中被定义,但内容依然保留在HTML中。早期版本的CSS并没有现在那么灵活,和许多新事物一样,它最大的障碍在于许多浏览器还没来得及接纳这一新技术,对于开发者而言,这是一个头疼的事情。需要明确说明的是,CSS并非全新的编程语言,它仅仅只是一种声明性语言。那么网页设计师需要学习编程吗?可能需要。但是网页设计师需要懂得CSS么?当然需要。

栅格与框架:移动端的崛起(2007) 输入图片说明 此刻,在手机上浏览网页本就是一种全新的挑战。设计师除了要为不同设备设计不同的布局,还面临着内容控制的问题:小屏幕上展示的内容要和桌面端一样多,还是需要剥离开来?桌面端网页上闪亮精致的小广告要如何在手机上呈现?加载速度也是一个大问题,移动端设备的网络加载速度不够快,而且桌面端网页会消耗大量的流量。网页设计亟待改进。

第一个重大的改进是栅格系统的出现。经过摸索,960栅格系统最终胜出,经典的12栏栅格被设计师们广泛的接纳,甚至成为许多设计师最常用的设计工具。接下来,各种常见的设计元素诸如表格、导航、按钮被标准化,打包成为可复用的套件,这基本上就构成了视觉元素库,其中还纳入了常见的代码。其中最典型的代表就是Bootstrap和Foundation,它们也使得网站和APP之间的界限逐渐模糊。当然,它们也不是没有缺点,借助这些库设计出来的网页往往大同小异,而且网页设计师要想使用它们还得深入了解相关的代码知识。

响应式网页设计(2010)

输入图片说明 惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计,它让网页在内容不变的前提下,布局随着窗口和屏幕的变化而变化,并且将这种设计命名为响应式网页设计。网页设计师依然只需要HTML和CSS就可以实现这种功能,不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言,响应式设计意味着为设计许多不同的布局。对于用户而言,响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言,响应式设计意味着如何控制好网站图片应付移动端和桌面端,在不同情形和语义下,拥有良好的下载速度和呈现效果,等等。简而言之,就是一个网站能在任何情况下良好展现。至少在这一点上,所有人能达成共识。

扁平化的时代(2010) 输入图片说明 技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上,设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来,并且这些代码非常灵活,可控度极高!试想一下,开发者无需担心浏览器兼容性,可以专注于更加实际的问题!

新诞生的概念正在推动网页设计。CSS中新诞生的属性,诸如vh和vw(viewport height 与 width),就使得网页元素的位置控制更加灵活自由,一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物,它可以快速创建布局,轻松修改属性而无需编写过多代码。

网页设计正在飞速发展,未来还会有越来越多的创新,就让我们拭目以待吧! 由睿江云质控人员提供,想了解更多,请登陆www.eflycloud.com

© 著作权归作者所有

ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
私信 提问
Web应用开发趋势 你应该关注的3个要素

  【IT168 评论】在过去几年中,开发Web应用程序的传统方法发生了很大变化。瀑布模式的老式系统,不仅使用Java或C++,聘用一组开发人员和构建应用程序,已经发生了变化,而且交付平台也变的...

it168网站
2017/04/14
0
0
在网页设计中寻找热情

年轻一代正推动着数字时代向前发展,并将会掌控网络的未来。从一开始,自由网站设计者这一职位就显得很有钱途,并且很诱人。自己规划时间、做任何自己想做的事、在家工作就能赚钱,并且走到哪...

jobBole
2010/12/22
940
1
web前端开发程序员的收入未来会更高吗

Web前端我们通过其字面意思大概可以了解到,web前端的设计师的工作内容就是直面用户的,当然,在这一过程中还会应用到一些包括用户交互,页面布局设计等,也许有人会问,ps和美工能够做web前...

web前端程序员
2017/12/07
0
0
评论:为什么中国的网页设计这么烂?

本文来自译言网,出自外国友人之手,相信是一篇挨板砖的文章,大家手下留情。 我希望由一个声明开始。我写在标题里的观点,仅仅是个观点。以下是我居住在中国中部的河南省两年的时间理,由对...

指点江山
2011/01/28
3.6K
57
推荐给设计师的UI/UX书籍和资源

如果你想成为一名优秀的设计师,想要博览这个领域的书籍而又无从下手,或不知从哪里快速寻找正确有效的资源。那么,我这里整理了一份书单,根据各大专业博客的推荐书目或者业内关注度比较高的...

jongde
2016/08/23
20
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部