關於網站設計的三十年發展簡史

這樣一段跨度不長的簡史✘₪◕··，融合著技術↟·◕◕、設計與思想的演進✘₪◕··，勾畫出改變世界的剪影₪✘。

1989年 網頁設計前夜
在網際網路真正興起之前✘₪◕··，黑色的顯示屏僅能顯示單色的畫素✘₪◕··，因此當時的網頁設計是真正意義上的“極簡風”₪✘。沒有影象✘₪◕··，只有單色畫素風格的純文字✘₪◕··，Web Design的概念僅僅意味著符號與製表（Tab鍵）的排列組合₪✘。儘管早在80年代就已經有了圖形化介面✘₪◕··，但普及率一如那個年代電視機進入尋常百姓家的機會✘₪◕··，低得可憐₪✘。
網頁設計三十年簡史

1995年 表格在網頁的興起
瀏覽器的出現使網頁設計向前邁進一大步₪✘。當時接近於資訊結構化的概念✘₪◕··，是HTML中已有的元素——table（表格）✘₪◕··，而在那個時代✘₪◕··，表格算得上是近乎柵格系統般靈活的設計神器₪✘。網頁設計師David Siegel在他的著作《Creating Killer Sites》裡面講述了設計優秀網站的秘訣✘╃：在表格中巢狀表格✘₪◕··，將靜態的表格和動態的表格巧妙結合₪✘。
同時✘₪◕··，為了應對網頁脆弱的結構✘₪◕··，切片設計（Slicing Design）也流行了起來₪✘。設計師在建立佈局時✘₪◕··，常用的方法就是切片+表格₪✘。 他們設計出漂亮的網頁佈局✘₪◕··，隨後開發者將整個設計稿切片✘₪◕··，找出呈現設計的佳方法₪✘。
網頁設計三十年簡史

1995年 JavaScript助陣
JavaScript 的出現彌補了尚且原始的HTML的不足✘₪◕··，它可以解決HTML一些侷限性✘₪◕··，比如✘₪◕··，需要一個彈提示✘₪◕··，這時就需要JS來實現了₪✘。不過由於它處於整個網頁佈局的層並且需要單獨載入✘₪◕··，很多時候它僅僅被某些開發者用作一個簡單的補丁✘₪◕··，但如果使用得當✘₪◕··，JS可以非常強大✘₪◕··，由它實現的背景影象↟·◕◕、GIF動畫↟·◕◕、閃字↟·◕◕、計數器等工具迅速成為網頁中必須的噱頭₪✘。
網頁設計三十年簡史

1996年 Flash的黃金時代
作為一門新技術✘₪◕··，Flash打破了之前網頁設計所固有的限制✘₪◕··，為網頁開發者/設計師提供了前所未有的創作空間₪✘。Flash具有極其靈活的呈現形式✘₪◕··，設計師設計形狀↟·◕◕、佈局↟·◕◕、互動以及一些酷炫的動畫✘₪◕··，在這一個工具上執行完成後✘₪◕··，以一個單獨的檔案形式輸出✘₪◕··，並顯示在瀏覽器中✘₪◕··，使用者只需安裝外掛並等待FLASH載入完成即可瀏覽₪✘。
可惜的是✘₪◕··，這種設計不利於網站搜尋✘₪◕··，並且還需要消耗計算機大量的運算能力₪✘。2007年✘₪◕··，蘋果公司釋出他們的第一臺iPhone時✘₪◕··，就決定徹底放棄Flash₪✘。自此✘₪◕··，至少在網頁設計領域✘₪◕··，Flash開始走下坡路₪✘。
網頁設計三十年簡史

1998年 CSS的誕生
差不多是在Flash崛起的同時✘₪◕··，一種更好的網頁結構化設計工具CSS誕生了₪✘。CSS✘₪◕··，層疊樣式表（Cascading Style Sheets）✘₪◕··，它的基本概念是將網頁內容的樣式分離出來✘₪◕··，網頁的外觀和格式等屬性將會在CSS中被定義✘₪◕··，但內容依然保留在HTML中₪✘。
但由於瀏覽器的相容性問題✘₪◕··，CSS的第一個版本很不靈活✘₪◕··，而這個問題也是在它誕生好幾年之後猜得到改進₪✘。
網頁設計三十年簡史

2007年 柵格和框架
智慧手機慢慢普及之後✘₪◕··，設計師也不得不開始考慮移動端網頁的設計——這本身就是一個挑戰₪✘。除了考慮各種不同裝置對應不同尺寸的佈局✘₪◕··，訪問速度也是問題₪✘。因為內容量太大✘₪◕··，訪客瀏覽網頁速度變慢✘₪◕··，流量增加導致成本增加₪✘。
一個關鍵轉機是柵格系統的出現₪✘。經過摸索✘₪◕··，960柵格系統終勝出✘₪◕··，經典的12欄柵格被設計師們廣泛的接納✘₪◕··，併成為許多設計師常用的設計工具₪✘。接下來✘₪◕··，各種常見的設計元素諸如表格↟·◕◕、導航↟·◕◕、按鈕被標準化✘₪◕··，打包成為可複用的套件✘₪◕··，這基本上就構成了視覺元素庫✘₪◕··，並納入了常見的程式碼₪✘。其中典型的代表就是 Bootstrap 和 Foundation ✘₪◕··，它們也使得網站和APP之間的界限逐漸模糊₪✘。
網頁設計三十年簡史

2010年 響應式網頁設計
驚才絕豔的設計師Ethan Marcotte在2010年5月提出一個了不起的構想✘╃：用一個網站相容多個終端₪✘。在網頁內容不變的前提下✘₪◕··，佈局隨著視窗和螢幕的變化而變化✘₪◕··，他將這種設計命名為響應式網頁設計（Responsive Web Design）₪✘。對於設計師而言✘₪◕··，響應式設計意味著為設計許多不同的佈局₪✘。對於使用者而言✘₪◕··，響應式設計就意味著這個網頁可以在手機上完美瀏覽₪✘。對於開發者而言✘₪◕··，響應式設計意味著如何控制好網站圖片應付移動端和PC端✘₪◕··，在不同情形和語義下✘₪◕··，擁有良好的下載速度和呈現效果₪✘。簡而言之✘₪◕··，就是一個網站能在任何情況下良好展現₪✘。
網頁設計三十年簡史

2010年 扁平化設計
設計師決定拋棄介面上那些花哨的裝飾元素（如3D↟·◕◕、陰影效果↟·◕◕、紋理材質）✘₪◕··，重新專注於重要內容呈現₪✘。在此之前✘₪◕··，網頁設計講究精美的圖片和排版效果↟·◕◕、漂亮的插畫與周到的佈局設計✘₪◕··，而簡化這些視覺元素之後✘₪◕··，就構成了我們說所的“扁平化設計”₪✘。充滿光影特效的按鈕被扁平化的圖示所替代✘₪◕··，向量圖形和圖示字型也開始被大範圍使用✘₪◕··，網頁字型和版式設計的結合令網頁視覺更加漂亮₪✘。將複雜的效果淡化之後✘₪◕··，不僅視覺扁平化✘₪◕··，也促使內容和資訊層級的扁平化✘₪◕··，網頁設計開始轉向返璞歸真₪✘。
網頁設計三十年簡史

2019年 微互動設計
微互動存在的目的✘₪◕··，是以吸引人的方式來給予使用者以反饋↟·◕◕、驚喜₪✘。這是一種非常有效的引導方式✘₪◕··，它是有資訊進來的時候的通知彈出框✘₪◕··，是重新整理頁面完成時的提醒✘₪◕··，是點選之後的載入小動效₪✘。
微互動設計從2018開始✘₪◕··，在 2019 年明顯的增長✘₪◕··，更加多樣的微互動開始出現在網頁設計作品當中✘₪◕··，吸引著使用者的注意力✘₪◕··，提供有效的資訊反饋✘₪◕··，提供引導₪✘。
網頁設計三十年簡史
技術革新與人們的審美變化✘₪◕··，不斷將網頁設計網頁設計推動到一個全新的境界₪✘。

網站建設公司瞭解網頁設計變遷史✘₪◕··，洞察其未來流行趨勢₪✘。以豐富的行業經驗↟·◕◕、深刻的市場感知和先進的創意理念✘₪◕··，設計貼近時代審美↟·◕◕、符合行業氣質↟·◕◕、凸顯企業特點的網站佈局及風格✘₪◕··，透過強大的技術執行✘₪◕··，大程度滿足使用者個性化網站需求₪✘。根據企業的文化↟·◕◕、理念↟·◕◕、產品↟·◕◕、服務特點✘₪◕··，對目標使用者精準定位✘₪◕··，以使用者為中心✘₪◕··，把每一個體驗點合理佈局到整個網站✘₪◕··，讓使用者在每個細節中都能得到優質體驗✘₪◕··，以體驗式引領幫助使用者瞭解企業產品和服務✘₪◕··，知曉品牌價值✘₪◕··，並在瀏覽中快速產生購買或深入瞭解的慾望✘₪◕··，從而轉化為實際使用者或者有忠誠度的潛在使用者✘₪◕··，讓網站與企業相互成就✘₪◕··，樹立企業在同行業的絕對優勢₪✘。