1989-2014 网页设计的演变

转载:hejidaren 2015.03.13 www.shejidaren.com⤴

估计很多做网页的同学还不了解网页的历史,它是什么时候出现的?而那时的网页又是怎样子的呢?

如果想了解下网页设计的简史,请往看吧,我建议每位网页设计师都应该看看哦!

074311E2B

文章目录:

1989年:黑暗时代的网页设计

webdesign01

当时的网页设计让你不“极简风”也很难,屏幕背景是黑色的,没有图像,只有单色像素风格的纯文字,而那里的设计是通过符号+制表(Tab键)来制作。

1995年:开始表格式网页设计

webdesign02

浏览器的出现使网页设计迈向一大步,它可以让网页显示图像。当构建信息时,通过HTML表格来排版布局,尽管我们知道表格主要目的是构建数字,但它仍然被流行使用了很长一段时间。当设计师制作花哨的布局时,为解决这问题,最佳方法就是切片 + 表格来完成。

当时表格也有它的好处,比如垂直对齐、可设置像素单位及百分比的功能来制作网格布局。

1995年:JavaScript 扩展表现范围

webdesign03

JavaScript 可以解决HTML一些局限性,比如,需要一个弹提示,这时就需要JS来实现了。那时背景图像、GIF动画、闪字、计数器等工具迅速成为网页必须的噱头。

1996年:自由的黄金时代 – Flash

webdesign04

FLASH,一个突破性的技术出现,打破现有网页设计上的局限,设计师在设计形状、布局、互动以及一些很棒很弦的动画都可以在这一个工具上执行,完成后只是一个单独的文件输出,并能显示在浏览器中。用户浏览它时需要安装插件并等待FLASH加载完成后方可浏览。

FLASH的功能确实很棒,可惜,它对搜索引擎不太好了,并且消耗了大量的处理器功能。2007年苹果在第一个iPhone时就决定放弃使用他们,而接着Flash开始没落(至少在网页设计方面)。

1998年:CSS 层叠样式表

webdesign05

大约和Flash同一时间,一种更好的设计结构技术诞生:  层叠样式表 CSS (Cascading Style Sheets)。这里的基本概念是将网站内容和表现分开,所以它的外表和格式都在CSS中定义。

CSS的第一个版本很不灵活,但最大的问题是浏览器的兼容性,不同浏览器对CSS的支持不一样,这个花了好几年的时候才得到改进。需要明确的是CSS不是一个程序言语(coding language),这相当一个声明性的语言。

2007年:混乱的移动 – 网格和框架

webdesign06

手机网页本身就是一个挑战,除了各种不同设备对应不同尺寸的布局,它的内容应该和小屏幕上的相同或是单独剥离出来?是否添加广告到小屏幕上?访问速度也是问题,因为内容太大,访客浏览网页慢、流量增加,从而成本也增加。

第一步改进是使用栅格的概念,各种栅格系统的诞生,最终960栅格系统胜出,而这12列栅格被设计师经常使用。

接下来步骤就是标准化形状、导航、按钮等常用元素,将其规范起来,以实现更简单且可重复使用。基本上,就是制作一个包含其代码的视觉库。在这里,BootstrapFoundation 胜出,它被用在许多网站和APP应用上。缺点就是使用这个框架的外观往往看起来像一样的,而设计师不知道的代码是如何工作的。

2010年:响应式网页设计(Responsive Web Design)

webdesign07

2010年 ETHAN MARCOTTE 提出响应式网页设计以实现不同的布局,这也是响应式网页设计的起源。技术上, 我们依然是用HTML和CSS来编写。这意味着响应式设计可以在大量的布局中使用,主要优点就是相同的Web站点可以工作在桌面电脑、移动手机端,而不需要再独立一个手机端出来。

2010年:扁平化的时代

webdesign08

设计一些布局需要大量的时间,幸运的是我们决定抛弃界面上那些花哨的装饰元素(如3D、阴影效果、纹理材质),并回归到根的设计,优先专注内容。精美的摄影图像、插图、排版、易于使用的布局是我们现在应该考虑的。简化可视元素仅仅是扁平化设计过程的一部分,重要的是该以内容为中心。把光泽的按钮换成图标,并使用SVG或图标字体。

2014年:网页设计的未来是光明的

webdesign09

到现在为止,网页设计的目的是呈现视觉信息,这是在浏览器中展示。设计师搬东西在屏幕上时,请试着想像一下,它能否用简约代码编写,我意思不是改变事物的秩序,但要有充分的灵活性和控制性!请尽量想象,这样开发者不必担心浏览器的兼容性,可以专注解决实际问题。

目前还有些新的技术,如CSS3出现新的VH, VW单位(视窗高度和宽度)可以更灵活的定位元素。它还解决了一直困扰许多设计师问题:为什么CSS垂直居中这么难。Flexbox是另一个新概念技术,也许未来你会使用它来布局页面。

关于Web的未来,你有什么看法?

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/4229/

(0)
Smiler李想Smiler李想
上一篇 2015-03-16
下一篇 2015-03-17

相关推荐

  • 知乎今日最热:如何评价 Instagram 新的品牌形象和界面设计?

    原文链接:如何评价 Instagram 新的品牌形象和界面设计? 补充一个信息: 《 INSTAGRAM BRAND GUIDELINES V1.1》http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram%20G…

    2016-05-12
  • Sketch 3.6的更新

    Sketch 3.6 带来了许多新的更新,终于盼来了文本渲染和SVG的改进,以及性能增强和bug修复。 固定基准 之前不一致的基线导致在设计的时候出现了很多问题,新的版本中当改变一个文本图层的字体和字体大小时,该图层出…

    2016-03-08
  • UI设计之4个字体设计小技巧

    内容在设计中起着至关重要的作用。不管你是从事网站设计、移动应用程序设计、还是可穿戴ui设计,你的设计必须能够清楚地传递出设计的意图和目的。由于文本是基于沟通的目的,所以需要对字体设计有着深刻的理解。当然,…

    2015-05-14
  • 设计规范如何写,这20个精选案例让你大开眼界

    一篇干货贴,开篇必须来点镇楼的。 如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。 1. Brand Style Guide Examples http://saijogeorge.com/brand-style-guide-examples/ 从中大致可以总结出规范的分类: …

    2015-11-09
  • 锤子视觉设计师:如何成为一名优秀的设计师【TEDx视频】

    跟大家分享一段锤子科技视觉设计师的罗子雄的TEDx演讲。 TEDx是由本地人士自发组织的,旨在为本地的创见者带来TED一般体验的活动。在每一个TEDx活动现场,都会有来自TED官方的演讲视频以及本地的演讲者,他们一起为…

    图形用户界面 2015-12-23
  • 从零开始学Sketch——进阶篇

    从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了。这篇…

    2016-01-06
  • 形式与功能 – 卡片式设计思考

    在互联网产品中,除了内容型外,一些功能型的产品信息内容也是相当巨大的,特别是管理控制系统,业务管理、功能操作、数据展示等。在信息量这么大的页面中除了重视内容质量外,形式功能的组织与呈现也是同等重要,…

    2016-07-28
  • 静电的SKETCH教室,全套教学视频免费分享下载。

    “静电的sketch设计教室”教学视频,对于新手自学来讲非常的合适,感谢静电,讲解的非常的清晰明了,视频就在这儿,剩下的就需要你付出时间去学习咯,祝大家学有所成!链接: https://pan.baidu.com/s/1iIbE-DI_yHLayj7wue49yQ 密码: mw25·—END—·

    2018-04-18
  • 【技巧分享1期】好的用户界面设计

    1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文…

    2015-10-12
  • 玩转中性灰 轻松调颜色

    数码图像是由红绿蓝(RGB)3种基本颜色构成的;当其中某个颜色数值偏高就会造成偏色现象,这是每个摄影师都会遇到的坏运气。大多数人只凭肉眼来判断、调整图像的偏色问题,其实这是不准确的。对此,小编本期为你着…

    2016-06-21