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