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