本文来自网易云社区

作者:马宝

设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你。为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的落花生(化身),可爱又迷人的变态角色(两者之间的纽带),白洞,白色的明天~~嗯, 似乎很跑偏,客官莫急带着回忆往下看神往而又心动到不行的GIF神图 勾起了我多少的童年回忆。

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

原文.^1作者是网站Froont.com的联合创始人Sandijs Ruluks。

1.网页设计:黎明前的黑暗(1989)

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

诸多85后的同学,比方说我,那个时候正在玩泥巴吧!对于网页设计的暗黑时代,我唯一仅存的记忆应该是上学那会儿学过的QBASIC界面,

INPUT i
mabao=250*iPRINT mabao
END

2.史上第一个网页被创建(1991)

蒂姆·伯纳斯-李建立的第一个网站(也是世界上第一个网站)是http: //info. cern. ch/,它于1991年8月6日上网,它解释了万维网是什么,如何使用网页浏览器和如何建立一个网页服务器等等。蒂姆·伯纳斯-李后来在这个网站里列举了其它网站,因此它也是世界上第一个万维网目录。

3.表格(table):网页的兴起(1992)

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

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

以前做网站的做法,1. PS中的切片切一下,2. 导出web 所用格式,3. 选上所有切片“html+图片”删除多余的图片,写个title;一张静态页面HTML就完成了。(现在很多专题页 快速的实现方法也是这样的,大家都懂)

4.来自JavaScript的救援(1995)

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

nej.netease.com 前端仔赶紧膜拜飞哥吧! @caijf@corp.netease.com

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

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

http://www.thefwa.com 曾经最喜爱的FLASH 全站收集没有之一,现在也改成HTML,里面还有少量的全flash 站点,minisite

6.CSS的诞生 (1998)

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

网页设计师需要懂得CSS么?当然需要。

7.栅格与框架:移动端的崛起(2007)

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

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

8.响应式网页设计(2010)

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

9.扁平化的时代(2010)

设计网页布局总会花费大量的时间,好在这个时候我们开始抛弃复杂的光影效果,重新专注于根本的内容呈现。在此之前,网页设计讲求精美的图片和排版效果,漂亮的插画与周到的布局设计,而简化这些视觉元素之后,就是我们说所的“扁平化设计”。将复杂的效果淡化之后,视觉的扁平化,也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代,矢量图形和图标字体也开始被大范围使用,网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是,这时候的网页设计开始有返璞归真的感觉。

10.光明的未来(2014)

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

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

网页设计正在飞速发展,未来还会有越来越多的创新,就让我们拭目以待吧!

原文地址:
link Froont 优设网译者:@陈子木 http://www.uisdc.com/brief-history-of-web-design

扩展阅读: link 一像素的恩怨情仇!程序猿与设计狮之间的那些事儿

本文来自网易云社区,经作者马宝授权发布

相关文章:
【推荐】 使用QUIC
【推荐】 “网易有钱”sketch使用分享
【推荐】 使用 Apache Atlas 进行数据治理

网页设计简史看设计&代码“隔膜”的更多相关文章

  1. DDD 领域驱动设计-看我如何应对业务需求变化,愚蠢的应对?

    写在前面 阅读目录: 具体业务场景 业务需求变化 "愚蠢"的应对 消息列表实现 消息详情页实现 消息发送.回复.销毁等实现 回到原点的一些思考 业务需求变化,领域模型变化了吗? 对 ...

  2. DDD 领域驱动设计-看我如何应对业务需求变化,领域模型调整?

    写在前面 上一篇:DDD 领域驱动设计-看我如何应对业务需求变化,愚蠢的应对? "愚蠢的应对",这个标题是我后来补充上的,博文中除了描述需求变化.愚蠢应对和一些思考,确实没有实质性 ...

  3. SOLID 设计原则 In C# 代码实现

    [S] Single Responsibility Principle (单一职责原则) 认为一个对象应该仅只有一个单一的职责 namespace SingleResponsibilityPrinci ...

  4. 算法设计与分析 - AC 代码 - 第 6 弹(重复第 3 弹)

    PTA-算法设计与分析 - c++(g++) #include<bits/stdc++.h> using namespace std; long max3(long a,long b,lo ...

  5. 撰写一篇博客要求讲述四则运算2的设计思想,源程序代码、运行结果截图、编程总结分析,并按照PSP0级的要求记录开发过程中的时间记录日志。

    一.撰写一篇博客要求讲述四则运算2的设计思想,源程序代码.运行结果截图.编程总结分析,并按照PSP0级的要求记录开发过程中的时间记录日志. 1.设计思想: ①创建test.jsp建立第一个前端界面,提 ...

  6. (转)Android Binder设计与实现 – 设计篇

    原文地址(貌似已打不开):Android Binder设计与实现 – 设计篇 ------------------------------------------------------------- ...

  7. OO设计原则 -- OO设计的原则及设计过程的全面总结

    这部分增加一点自己的感想,OO设计原则下面讲述的很清晰;看完之后有点感想如果我们在实际开发当中能够把这些原则熟烂于心的话那我们的代码质量和个人能力会有很显著的提神.根据自己的实际经验看很多开发者在开发 ...

  8. 设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?

    明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的 ...

  9. 数字逻辑实践4->面向硬件电路的设计思维--FPGA设计总述

    本文是对实验课上讲解的"面向硬件电路的设计思维"的总结,结合数字逻辑课本,进行提炼和整理. 主要来源是课件与本人整理,部分参考了网络大佬的博客. 本文主要介绍不同于之前软件设计思维 ...

随机推荐

  1. 动态规划(DP),递推,最大子段和,POJ(2479,2593)

    题目链接:http://poj.org/problem?id=2479 解题报告: 1.再求left[i]的时候,先没有考虑a[i]的正负,先把a[i]放到left[i]中,然后left=max(le ...

  2. Codeforces Round #521 (Div. 3) D. Cutting Out 【二分+排序】

    任意门:http://codeforces.com/contest/1077/problem/D D. Cutting Out time limit per test 3 seconds memory ...

  3. listBox获取项的方法

    获取所有项 ; i < LB.Items.Count;i++ )2 {3 str_arr.Add(LB.Items[i].ToString()); 4 } 获取指定项 string str=LB ...

  4. 2018.12.30 Intellij IDEA设置main方法自动补全

    Eclipse与 Intellij IDEA设置方法自动补全 1.首先,点击File-->Settings-->Editor-->Live Templates 设置你想输出的模板 右 ...

  5. MVC学习二:Controller和View关系

    控制器(Controller)主要是定义方法和加载视图(View) 1.控制器中的Action方法返回值的类型ActionResult,string 2.控制器中Action方法接收浏览器参数方式: ...

  6. 【luogu T34117 打油门】 题解

    王强怎么这么强啊 王强太强了 二维树状数组 #include <cstdio> #include <cstring> #include <iostream> #in ...

  7. eclipse 安装/卸载插件

    1.通过Help>>Install New Soft 之后弹出对话框,可以通过“Add”按钮添加已经有的插件的(zip等)或者输入安装地址,之后按照要求即可.2.对于安装失败的插件,再次进 ...

  8. 【Linux-CentOS】CentOS安装Win双系统后Win启动项丢失及默认启动项修改

    转载自:搁浅bky,有部分更正,建议看此文. 1.Windows启动项消失的原因:   在安装Win7.8/10系统+CentOS7双系统后,默认会将mbr(Main Boot Record)改写为g ...

  9. Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition

    Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition Kaiming He, Xiangyu Zh ...

  10. spring入门(四) spring mvc返回json结果

    前提:已搭建好环境 1.建立Controller package com.ice.controller; import com.ice.model.Person; import org.springf ...