网页设计三十年简史

资料来源：网络整理时间：2023/3/22 4:22:47 共计：3584 浏览

　　从1990年代初由基本文本信息编辑的网页页面开始，到1990年代中期的在线网页页面建设，从上世纪90年代末崛起的flash，到CSS和Javasvript的崛起，再到web 2.0鼎盛时期，以及慢慢到来的web 3.0时代，页面结构网页设计三十年，经历了多次变革。

　　这样一段跨度不长的简史，融合着技术、设计规划与思想的演进，勾画出改变世界的剪影。

　　1989年页面结构网页设计前夜

　　在互联网真正兴起之前，黑色的显示屏仅能显示单色的像素，因此当时的页面结构网页设计是真正意义上的“极简风”。没有图像，只有单色像素样式风格的纯纯文本文字，Web Design的概念仅仅意味着符号与制表（Tab键）的排列组合。尽管早在80年代就已经有了图形化界面，但普及率一如那个年代电视机进入寻常百姓家的机会，低得可怜。

　　image图片来源于互联网网络

　　1995年表格在网页页面的兴起

　　查看浏览器的出现使页面结构网页设计向前迈进一大步。当时最接近于信息模版结构化的概念，是HTML中已有的元素——table（表格），而在那个时代，表格算得上是近乎栅格系统般灵活的设计规划神器。页面结构网页设计师David Siegel在他的著作《Creating Killer Sites》里面讲述了设计规划优秀网站站点的秘诀：在表格中嵌套表格，将静态的表格和动态的表格巧妙结合。

　　同时，为了应对网页页面脆弱的模版结构，切片设计规划（Slicing Design）也流行了起来。设计规划师在创建部署布局时，最常用的方式方法就是切片+表格。他们设计规划出漂亮的网页页面部署布局，随后建设开发者将整个设计规划稿切片，找出呈现设计规划的最佳方式方法。

　　image图片来源于互联网网络

　　1995年 Java助阵

　　Java 的出现弥补了尚且原始的HTML的不足，它可以解决HTML一些局限性，例如，需要一个弹提示，这时就需要JS来实现了。不过由于它处于整个网页页面部署布局的顶层并且需要单独加载，很多时候它仅仅被某些建设开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大，由它实现的背景图像、GIF动画、闪字、计数器等工具迅速成为网页页面中必须的噱头。

　　image图片来源于互联网网络

　　1996年 Flash的黄金时代

　　作为一门新技术，Flash打破了之前页面结构网页设计所固有的限制，为网页页面建设开发者/设计规划师供应提供了前所未有的创作虚拟空间。Flash具有极其灵活的呈现形式，设计规划师设计规划形状、部署布局、互动以及一些酷炫的动画，在这一个工具上执行完成后，以一个单独的文件形式输出，并显示在查看浏览器中，用户使用者只需安装插件并等待FLASH加载完成即可查看浏览。

　　可惜的是，这种设计规划不利于网站站点检索搜索，并且还需要消耗计算机大量的运算能力。2007年，苹果公司企业发表发布他们的第一台iPhone时，就决定彻底放弃Flash。自此，至少在页面结构网页设计领域，Flash开始走下坡路。

　　image图片来源于互联网网络

　　1998年 CSS的诞生

　　差不多是在Flash崛起的同时，一种更好的网页页面模版结构化设计规划工具CSS诞生了。CSS，层叠样式表（Cascading Style Sheets），它的基本概念是将网页页面信息内容的样式分离出来，网页页面的外观和格式等属性将会在CSS中被定义，但信息内容依然保留在HTML中。

　　但由于查看浏览器的兼容性问题，CSS的第一个版本很不灵活，而这个问题也是在它诞生好几年之后猜得到改进。

　　image图片来源于互联网网络

　　2007年栅格和框架

　　智能移动端手机慢慢普及之后，设计规划师也不得不开始考虑手机移动端网页页面的设计规划——这本身就是一个挑战。除了考虑各种不同设备对应不同尺寸的部署布局，访问相应速度也是问题。因为信息内容量太大，用户访客查看浏览网页页面相应速度变慢，用户访问量流量提升增加导致成本提升增加。

　　一个关键转机是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计规划师们广泛的接纳，并成为许多设计规划师最常用的设计规划工具。接下来，各种常见的设计规划元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，并纳入了常见的代码。其中最典型的代表就是 Bootstrap 和 Foundation ，它们也使得网站站点和APP之间的界限逐渐模糊。

　　栅格和框架

　　2010年自适应响应式页面结构网页设计

　　惊才绝艳的设计规划师Ethan Marcotte在2010年5月提出一个了不起的构想：用一个网站站点兼容多个终端。在网页页面信息内容不变的前提下，部署布局随着窗口和屏幕的变化而变化，他将这种设计规划命名为自适应响应式页面结构网页设计（Responsive Web Design）。对于设计规划师而言，自适应响应式设计规划意味着为设计规划许多不同的部署布局。对于用户使用者而言，自适应响应式设计规划就意味着这个网页页面可以在移动端手机上完美查看浏览。对于建设开发者而言，自适应响应式设计规划意味着如何控制好网站站点image图片应付手机移动端和PC电脑端，在不同情形和语义下，拥有良好的下载相应速度和呈现结果效果。简而言之，就是一个网站站点能在任何情况下良好展现。

　　image图片来源于互联网网络

　　2010年扁平化结构设计

　　设计规划师决定抛弃界面上那些花哨的装饰元素（如3D、阴影结果效果、纹理材质），重新专注于重要信息内容呈现。在此之前，页面结构网页设计讲究精美的image图片和排版结果效果、漂亮的插画与周到的部署布局设计规划，而简化这些视觉元素之后，就构成了我们说所的“扁平化结构设计”。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页页面字体和版式设计规划的结合令网页页面视觉更加漂亮。将复杂的结果效果淡化之后，不仅视觉扁平化，也促使信息内容和信息层级的扁平化，页面结构网页设计开始转向返璞归真。

　　image图片来源于互联网网络

　　2019年微交互设计规划

　　微交互存在的目的，是以吸引人的方式来给予用户使用者以反馈、惊喜。这是一种非常有效的引导方式，它是有信息进来的时候的通知弹出框，是刷新网站页面完成时的提醒，是访问点击之后的加载小动效。

　　微交互设计规划从2018开始，在 2019 年明显的增长，更加多样的微交互开始出现在页面结构网页设计作品当中，吸引着用户使用者的注意力，供应提供有效的信息反馈，供应提供引导。

　　image图片来源于互联网网络

　　技术革新与人们的审美变化，不断将页面结构网页设计页面结构网页设计推动到一个全新的境界。作为万博思图三大主营业务之一，官方网站建设与运维高效、完美运作十余年，为泰康、福田、宝沃、蓝色光标等众多公司品牌集团供应提供具有万博思图特色优势的“创意设计规划+技术+推广营销”一体化公司品牌官方网站解决方案。

　　万博思图深度参与页面结构网页设计变迁历程，了解页面结构网页设计变迁史，洞察其未来流行趋势。以丰富的业内行业经验、深刻的市场感知和先进的创意理念，设计规划贴近时代审美、符合业内行业气质、凸显公司企业特点的网站站点部署布局及样式风格，通过强大的技术执行，最大程度满足用户使用者个性化网站站点需求。根据公司企业的文化、理念、商品产品、服务特点，对目标用户使用者精准主题定位，以用户使用者为中心，把每一个感受体验点合理部署布局到整个网站站点，让用户使用者在每个细节点中都能得到优质感受体验，以感受体验式引领帮助用户使用者了解公司企业商品产品和服务，知晓公司品牌价值，并在查看浏览中快速产生购买或深入了解的欲望，从而转化为实际用户使用者或者有忠诚度的潜在用户使用者，让网站站点与公司企业相互成就，树立公司企业在同业内行业的绝对优势。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：如何设计出简单易用的网页？ | ·下一条：emm...为什么日本网页设计如此的“与众不同”？