九張 Gif 圖回顧 Web 設(shè)計(jì)的 25 年歷史
Froont，一家為web設(shè)計(jì)師制作工具的舊金山公司，用9個(gè)GIF格式動(dòng)畫(huà)來(lái)表現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)在過(guò)去25年的發(fā)展歷程。如果你想知道為什么CSS這么重要，為什么Flash會(huì)逐漸淘汰，這些動(dòng)畫(huà)圖或許能讓你一窺究竟。
網(wǎng)頁(yè)設(shè)計(jì)的單色時(shí)代，約1989年。想想Lynx和其他以Unix為基礎(chǔ)的web瀏覽器，這些瀏覽器只會(huì)通過(guò)網(wǎng)絡(luò)從這個(gè)終端到另一個(gè)終端一個(gè)字一個(gè)字地蹦出來(lái)。沒(méi)有圖形用戶界面，只有一串字母和一個(gè)閃爍的光標(biāo)。
現(xiàn)代化的開(kāi)始，約1995年。***個(gè)瀏覽器，例如Mosaic，允許設(shè)計(jì)人員在網(wǎng)站上顯示圖片，但是唯一的方法是將這些網(wǎng)頁(yè)元素丟進(jìn)不雅的表格布局中。由于這真的很難精確定位，所以設(shè)計(jì)師得琢磨地非常清楚如何寫(xiě)好表格嵌套表格再嵌套表格的代碼以便正確顯示內(nèi)容。
幸運(yùn)的是，JavaScript出現(xiàn)了，為設(shè)計(jì)師提供了很大的便捷。Flash讓我們創(chuàng)建動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)更為簡(jiǎn)便：例如，彈出窗口和在頁(yè)面上動(dòng)態(tài)修改內(nèi)容順序。但是相較于本地HTML，JavaScript速度很慢。
盡管Flash也曾風(fēng)靡一時(shí)，但是現(xiàn)在幾乎已經(jīng)被HTML5干掉了，但是在1996年，它代表了網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)新高度：能夠讓設(shè)計(jì)師按他們自己的方 式使得頁(yè)面生動(dòng)起來(lái)。這也是Froont飛出頁(yè)面和開(kāi)場(chǎng)動(dòng)畫(huà)等的黃金時(shí)代。但是，F(xiàn)lash會(huì)占用計(jì)算機(jī)大量的處理資源，這也使得它成為一種特別不友好的 技術(shù)，尤其是對(duì)于移動(dòng)設(shè)備例如筆記本電腦和智能手機(jī)而言。
CSS，***發(fā)布于1998年，解決了很多早期的web設(shè)計(jì)問(wèn)題。通過(guò)將網(wǎng)站美觀度從網(wǎng)頁(yè)內(nèi)容中剝離出來(lái)，設(shè)計(jì)師終于可以按照自己的想法制作或者為客戶定制網(wǎng)頁(yè)了。雖然最早的CSS版本不是非常靈活，但是現(xiàn)在的CSS已然成為了設(shè)計(jì)師需要掌握的最重要的網(wǎng)絡(luò)技術(shù)。
2007年iPhone的問(wèn)世給設(shè)計(jì)人員帶來(lái)了一個(gè)全新的難題：如何在智能手機(jī)這個(gè)更小的屏幕上設(shè)計(jì)網(wǎng)頁(yè)？一開(kāi)始設(shè)計(jì)人員想到的是使用一種網(wǎng)格系統(tǒng)，這種網(wǎng)格系統(tǒng)可以根據(jù)設(shè)備屏幕的尺寸將網(wǎng)頁(yè)分割成若干列。
2010年，對(duì)于如何在移動(dòng)設(shè)備顯示網(wǎng)頁(yè)的問(wèn)題，Ethan Marcotte想到了另一種解決方案：響應(yīng)式設(shè)計(jì)。
在響應(yīng)性設(shè)計(jì)之后，一種撇去華麗效果重視內(nèi)容的扁平化設(shè)計(jì)也出來(lái)了。這種設(shè)計(jì)簡(jiǎn)化了視覺(jué)元素，通過(guò)突出漂亮的字體來(lái)創(chuàng)建web體驗(yàn)，而且顯示在任何設(shè)備上的效果都非常棒。
至于未來(lái)會(huì)如何？Froont表示，更好的web設(shè)計(jì)還在研究開(kāi)發(fā)中。以后，設(shè)計(jì)人員將不需要再擔(dān)心瀏覽器的兼容性問(wèn)題，各種適用于任何設(shè)備的工具也都隨手可得。以后的技術(shù)將不會(huì)再成為設(shè)計(jì)的限制，設(shè)計(jì)師可以集中精力解決UI和UX問(wèn)題，而不是把時(shí)間浪費(fèi)在排除故障上。
如果你喜歡這些動(dòng)畫(huà)，歡迎為我點(diǎn)贊。
譯文鏈接：http://www.codeceo.com/article/9-gif-web-design-history.html
