1989-2014 網頁設計的演變


今天Designrock分享一篇很酷的文章給你,估計很多做網頁的同學還不了解網頁的歷史,它是什麼時候出現的?而那時的網頁又是怎樣子的呢?

如果想了解下網頁設計的簡史,請往看吧,我建議每位網頁設計師都應該看看哦!

1989年:黑暗時代的網頁設計
黑暗时代的网页设计

當時的網頁設計讓你不“極簡風”也很難,屏幕背景是黑色的,沒有圖像,只有單色像素風格的純文字,而那裡的設計是通過符號+製表(Tab鍵)來製作。

1995年:開始表格式網頁設計
开始表格式网页设计

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

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

1995年:JavaScript 擴展表現範圍
JavaScript

JavaScript 可以解決HTML一些局限性,比如,需要一個彈提示,這時就需要JS來實現了。那時背景圖像、GIF動畫、閃字、計數器等工具迅速成為網頁必須的噱頭。

1996年:自由的黃金時代 – Flash
自由的黄金时代 – Flash

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

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

1998年:CSS 層疊樣式表
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的未來,你有什麼看法?

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s