2015-1-23 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
來源：http://www.shejidaren.com/1989-2014-web-design-history.html
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
估計(jì)很多做網(wǎng)頁的同學(xué)還不了解網(wǎng)頁的歷史，它是什么時(shí)候出現(xiàn)的？而那時(shí)的網(wǎng)頁又是怎樣子的呢？
如果想了解下網(wǎng)頁設(shè)計(jì)的簡史，請往看吧，我建議每位網(wǎng)頁設(shè)計(jì)師都應(yīng)該看看哦！
當(dāng)時(shí)的網(wǎng)頁設(shè)計(jì)讓你不“極簡風(fēng)”也很難，屏幕背景是黑色的，沒有圖像，只有單色像素風(fēng)格的純文字，而那里的設(shè)計(jì)是通過符號+制表（Tab鍵）來制作。
瀏覽器的出現(xiàn)使網(wǎng)頁設(shè)計(jì)邁向一大步，它可以讓網(wǎng)頁顯示圖像。當(dāng)構(gòu)建信息時(shí)，通過HTML表格來排版布局，盡管我們知道表格主要目的是構(gòu)建數(shù)字，但它仍然被流行使用了很長一段時(shí)間。當(dāng)設(shè)計(jì)師制作花哨的布局時(shí)，為解決這問題，最佳方法就是切片 + 表格來完成。
當(dāng)時(shí)表格也有它的好處，比如垂直對齊、可設(shè)置像素單位及百分比的功能來制作網(wǎng)格布局。
JavaScript 可以解決HTML一些局限性，比如，需要一個彈提示，這時(shí)就需要JS來實(shí)現(xiàn)了。那時(shí)背景圖像、GIF動畫、閃字、計(jì)數(shù)器等工具迅速成為網(wǎng)頁必須的噱頭。
FLASH，一個突破性的技術(shù)出現(xiàn)，打破現(xiàn)有網(wǎng)頁設(shè)計(jì)上的局限，設(shè)計(jì)師在設(shè)計(jì)形狀、布局、互動以及一些很棒很弦的動畫都可以在這一個工具上執(zhí)行，完成后只是一個單獨(dú)的文件輸出，并能顯示在瀏覽器中。用戶瀏覽它時(shí)需要安裝插件并等待FLASH加載完成后方可瀏覽。
FLASH的功能確實(shí)很棒，可惜，它對搜索引擎不太好了，并且消耗了大量的處理器功能。2007年蘋果在第一個iPhone時(shí)就決定放棄使用他們，而接著Flash開始沒落（至少在網(wǎng)頁設(shè)計(jì)方面）。
大約和Flash同一時(shí)間，一種更好的設(shè)計(jì)結(jié)構(gòu)技術(shù)誕生： 層疊樣式表 CSS (Cascading Style Sheets)。這里的基本概念是將網(wǎng)站內(nèi)容和表現(xiàn)分開，所以它的外表和格式都在CSS中定義。
CSS的第一個版本很不靈活，但最大的問題是瀏覽器的兼容性，不同瀏覽器對CSS的支持不一樣，這個花了好幾年的時(shí)候才得到改進(jìn)。需要明確的是CSS不是一個程序言語(coding language)，這相當(dāng)一個聲明性的語言。
手機(jī)網(wǎng)頁本身就是一個挑戰(zhàn)，除了各種不同設(shè)備對應(yīng)不同尺寸的布局，它的內(nèi)容應(yīng)該和小屏幕上的相同或是單獨(dú)剝離出來？是否添加廣告到小屏幕上？訪問速度也是問題，因?yàn)閮?nèi)容太大，訪客瀏覽網(wǎng)頁慢、流量增加，從而成本也增加。
第一步改進(jìn)是使用柵格的概念，各種柵格系統(tǒng)的誕生，最終960柵格系統(tǒng)勝出，而這12列柵格被設(shè)計(jì)師經(jīng)常使用。
接下來步驟就是標(biāo)準(zhǔn)化形狀、導(dǎo)航、按鈕等常用元素，將其規(guī)范起來，以實(shí)現(xiàn)更簡單且可重復(fù)使用?；旧?，就是制作一個包含其代碼的視覺庫。在這里，Bootstrap 和 Foundation 勝出，它被用在許多網(wǎng)站和APP應(yīng)用上。缺點(diǎn)就是使用這個框架的外觀往往看起來像一樣的，而設(shè)計(jì)師不知道的代碼是如何工作的。
2010年 ETHAN MARCOTTE 提出響應(yīng)式網(wǎng)頁設(shè)計(jì)以實(shí)現(xiàn)不同的布局，這也是響應(yīng)式網(wǎng)頁設(shè)計(jì)的起源。技術(shù)上， 我們依然是用HTML和CSS來編寫。這意味著響應(yīng)式設(shè)計(jì)可以在大量的布局中使用，主要優(yōu)點(diǎn)就是相同的Web站點(diǎn)可以工作在桌面電腦、移動手機(jī)端，而不需要再獨(dú)立一個手機(jī)端出來。
設(shè)計(jì)一些布局需要大量的時(shí)間，幸運(yùn)的是我們決定拋棄界面上那些花哨的裝飾元素（如3D、陰影效果、紋理材質(zhì)），并回歸到根的設(shè)計(jì)，優(yōu)先專注內(nèi)容。精美的攝影圖像、插圖、排版、易于使用的布局是我們現(xiàn)在應(yīng)該考慮的。簡化可視元素僅僅是扁平化設(shè)計(jì)過程的一部分，重要的是該以內(nèi)容為中心。把光澤的按鈕換成圖標(biāo)，并使用SVG或圖標(biāo)字體。
到現(xiàn)在為止，網(wǎng)頁設(shè)計(jì)的目的是呈現(xiàn)視覺信息，這是在瀏覽器中展示。設(shè)計(jì)師搬東西在屏幕上時(shí)，請?jiān)囍胂褚幌?，它能否用簡約代碼編寫，我意思不是改變事物的秩序，但要有充分的靈活性和控制性！請盡量想象，這樣開發(fā)者不必?fù)?dān)心瀏覽器的兼容性，可以專注解決實(shí)際問題。
目前還有些新的技術(shù)，如CSS3出現(xiàn)新的VH, VW單位（視窗高度和寬度）可以更靈活的定位元素。它還解決了一直困擾許多設(shè)計(jì)師問題：為什么CSS垂直居中這么難。Flexbox是另一個新概念技術(shù)，也許未來你會使用它來布局頁面。
掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺）
藍(lán)藍(lán)設(shè)計(jì)的小編 http://yvirxh.cn