1989-2014 網頁設計的演變

1989-2014 網頁設計的演變

shejidaren                    2015.03.13                                        www.shejidaren.com⤴

估計不少作網頁的同窗還不瞭解網頁的歷史，它是何時出現的？而那時的網頁又是怎樣子的呢？

若是想了解下網頁設計的簡史，請往看吧，我建議每位網頁設計師都應該看看哦！

1989年：黑暗時代的網頁設計

當時的網頁設計讓你不「極簡風」也很難，屏幕背景是黑色的，沒有圖像，只有單色像素風格的純文字，而那裏的設計是經過符號+製表（Tab鍵）來製做。

1995年：開始表格式網頁設計

瀏覽器的出現使網頁設計邁向一大步，它可讓網頁顯示圖像。當構建信息時，經過HTML表格來排版佈局，儘管咱們知道表格主要目的是構建數字，但它仍然被流行使用了很長一段時間。當設計師製做花哨的佈局時，爲解決這問題，最佳方法就是切片 + 表格來完成。

當時表格也有它的好處，好比垂直對齊、可設置像素單位及百分比的功能來製做網格佈局。

1995年：JavaScript 擴展表現範圍

JavaScript 能夠解決HTML一些侷限性，好比，須要一個彈提示，這時就須要JS來實現了。那時背景圖像、GIF動畫、閃字、計數器等工具迅速成爲網頁必須的噱頭。

1996年：自由的黃金時代 – Flash

FLASH，一個突破性的技術出現，打破現有網頁設計上的侷限，設計師在設計形狀、佈局、互動以及一些很棒很弦的動畫均可以在這一個工具上執行，完成後只是一個單獨的文件輸出，並能顯示在瀏覽器中。用戶瀏覽它時須要安裝插件並等待FLASH加載完成後方可瀏覽。

FLASH的功能確實很棒，惋惜，它對搜索引擎不太好了，而且消耗了大量的處理器功能。2007年蘋果在第一個iPhone時就決定放棄使用他們，而接着Flash開始沒落（至少在網頁設計方面）。

1998年：CSS 層疊樣式表

大約和Flash同一時間，一種更好的設計結構技術誕生：  層疊樣式表 CSS (Cascading Style Sheets)。這裏的基本概念是將網站內容和表現分開，因此它的外表和格式都在CSS中定義。

CSS的第一個版本很不靈活，但最大的問題是瀏覽器的兼容性，不一樣瀏覽器對CSS的支持不同，這個花了好幾年的時候才獲得改進。須要明確的是CSS不是一個程序言語(coding language)，這至關一個聲明性的語言。

2007年：混亂的移動 – 網格和框架

手機網頁自己就是一個挑戰，除了各類不一樣設備對應不一樣尺寸的佈局，它的內容應該和小屏幕上的相同或是單獨剝離出來？是否添加廣告到小屏幕上？訪問速度也是問題，由於內容太大，訪客瀏覽網頁慢、流量增長，從而成本也增長。

第一步改進是使用柵格的概念，各類柵格系統的誕生，最終960柵格系統勝出，而這12列柵格被設計師常用。

接下來步驟就是標準化形狀、導航、按鈕等經常使用元素，將其規範起來，以實現更簡單且可重複使用。基本上，就是製做一個包含其代碼的視覺庫。在這裏，Bootstrap 和 Foundation 勝出，它被用在許多網站和APP應用上。缺點就是使用這個框架的外觀每每看起來像同樣的，而設計師不知道的代碼是如何工做的。

2010年：響應式網頁設計（Responsive Web Design）

2010年 ETHAN MARCOTTE 提出響應式網頁設計以實現不一樣的佈局，這也是響應式網頁設計的起源。技術上， 咱們依然是用HTML和CSS來編寫。這意味着響應式設計能夠在大量的佈局中使用，主要優勢就是相同的Web站點能夠工做在桌面電腦、移動手機端，而不須要再獨立一個手機端出來。

2010年：扁平化的時代

設計一些佈局須要大量的時間，幸運的是咱們決定拋棄界面上那些花哨的裝飾元素（如3D、陰影效果、紋理材質），並回歸到根的設計，優先專一內容。精美的攝影圖像、插圖、排版、易於使用的佈局是咱們如今應該考慮的。簡化可視元素僅僅是扁平化設計過程的一部分，重要的是該之內容爲中心。把光澤的按鈕換成圖標，並使用SVG或圖標字體。

2014年：網頁設計的將來是光明的

到如今爲止，網頁設計的目的是呈現視覺信息，這是在瀏覽器中展現。設計師搬東西在屏幕上時，請試着想像一下，它可否用簡約代碼編寫，我意思不是改變事物的秩序，但要有充分的靈活性和控制性！請儘可能想象，這樣開發者沒必要擔憂瀏覽器的兼容性，能夠專一解決實際問題。

目前還有些新的技術，如CSS3出現新的VH, VW單位（視窗高度和寬度）能夠更靈活的定位元素。它還解決了一直困擾許多設計師問題：爲何CSS垂直居中這麼難。Flexbox是另外一個新概念技術，也許將來你會使用它來佈局頁面。

關於Web的將來，你有什麼見解？