網(wǎng)頁設(shè)計的發(fā)展歷史【設(shè)計史太濃】

時間：2023-10-03 15:36:01 | 來源：網(wǎng)站運營

時間：2023-10-03 15:36:01 來源：網(wǎng)站運營

網(wǎng)頁設(shè)計的發(fā)展歷史【設(shè)計史太濃】：




上回我們簡略介紹了數(shù)碼時代的到來如何加速后現(xiàn)代風(fēng)格的百花齊放，因為幾乎同一個時間段出現(xiàn)多種成型風(fēng)格的探索。







而緊接數(shù)碼時代，互聯(lián)網(wǎng)時代也拉開序幕。




20世紀(jì)末到21世紀(jì)開始，宣傳品牌與產(chǎn)品的陣地不再局限于印刷品，電視、電臺及現(xiàn)場活動，而是出現(xiàn)了網(wǎng)站，網(wǎng)站可以鏈接更多陌生人，而且沒有時空限制。







美國最火的設(shè)計風(fēng)格只要有人將資料放到網(wǎng)上，遠(yuǎn)在日本的一名中學(xué)生都可以去學(xué)習(xí)了解，所以也打破了過去信息差的優(yōu)勢。




本回我們要跟大家聊聊網(wǎng)頁設(shè)計的發(fā)展，但在展開內(nèi)容前，要搞清楚一個問題，就是網(wǎng)頁設(shè)計屬于平面設(shè)計嗎？




國內(nèi)早在差不多20年前，建站公司就開始獨立存在，所以這個問題蠻有爭議，尤其是UI設(shè)計也很成熟之后，大家更愿意認(rèn)為此學(xué)科是獨立的。







此時請大家可以回到本系列第一回，其實答案就在其中。




平面設(shè)計的定義不管怎么粉飾，簡單而言就是：以某種目的，將文字、圖像、圖形安排在一起。




網(wǎng)頁設(shè)計也是如此，唯一區(qū)別是網(wǎng)頁具有動態(tài)，但這種動態(tài)屬于若干個靜態(tài)設(shè)定的切換關(guān)系，其關(guān)鍵幀也是平面設(shè)計。







我在國內(nèi)蠻早就從事網(wǎng)頁設(shè)計工作，早年甚至可以自己獨立完成網(wǎng)站，除了頁面設(shè)計，還包括套ASP程序（Active Server Pages動態(tài)服務(wù)器頁面），用table布局前端等，當(dāng)然這些技術(shù)如今早已過時。







因此這段歷史我就是參與者之一，所以本回不僅是對搜集資料的剪裁分析，還會結(jié)合不少自身經(jīng)歷體驗跟大家分享。首先我們來簡單回顧下互聯(lián)網(wǎng)的發(fā)展與網(wǎng)頁設(shè)計的演變。

國際互聯(lián)網(wǎng)絡(luò)與超級媒體

互聯(lián)網(wǎng)發(fā)展到如今已經(jīng)像空氣一樣存在，斷網(wǎng)已經(jīng)如同缺氧那么嚴(yán)重，而互聯(lián)網(wǎng)的誕生最初跟兩件事情相關(guān)。




第一件大家也許比較熟悉，就是在20世紀(jì)50年代末美國國防部高級研究項目總署（the United States Department of Defense，Advanced ResearchProjects Agency，簡稱ARPA）成立了。







其成立的根本原因是冷戰(zhàn)背景下，蘇聯(lián)不但先于美國在1957年將衛(wèi)星送上太空，而且世界第一枚多級遠(yuǎn)程彈道火箭發(fā)射也試驗成功，因此蘇聯(lián)宣稱可以將核彈送往地球任何地區(qū)。




這對美國而言實在太嚇人，所以ARPA是一個專門研究國防技術(shù)的“事業(yè)部”，聚合美國當(dāng)時最牛的幾百位科學(xué)家，研究如何將最先進(jìn)技術(shù)應(yīng)用到美國國防。







由于這些科學(xué)家當(dāng)時分散于全國各地，因為如此厲害的科學(xué)家肯定本身有重要事務(wù)，而不是放著隨傳隨到，因此大伙無法專門聚在一起專門干這事，而是遠(yuǎn)程協(xié)作，所以就需要一個有效的遠(yuǎn)程溝通工具。




這個工具不能只局限于語言聲音，還要做到資源共享，更關(guān)鍵的是要高效安全，信息不可被盜取，當(dāng)時負(fù)責(zé)研究此事的人是麻省理工科學(xué)家約翰·利克利德(John Licklider)。







此處省略一堆過程與專業(yè)技術(shù)術(shù)語，反正如此這般，利克利德因為ARPA組織這個溝通交接需求無意中發(fā)明出“國際互聯(lián)網(wǎng)網(wǎng)絡(luò)”（the World Wide Web）。







事后證明，國不國防是一回事，這才是他們最偉大的發(fā)明。




這種技術(shù)能做到資源共享與防止盜取的一個重要原因是可以將信息分解成“數(shù)據(jù)包”，將他們發(fā)送到目的地后可以重新組裝，也就是“分組路由”的雛形。




大家了解到這個程度就可以了，再往深里說意義不大，況且我也說不清楚，而時間很快去到1987年，這是第二件事情，這一年蘋果電腦公司向外界報道了一款可在網(wǎng)絡(luò)上尋找資料的軟件，名為“超級文件”（Hypertext）。







比如在電腦上打“設(shè)計史太濃”就可以將當(dāng)時整個網(wǎng)絡(luò)與此相關(guān)的文字內(nèi)容集中起來（當(dāng)時網(wǎng)絡(luò)上的內(nèi)容其實非常有限），等于是谷歌百度的前身了。




后來這個軟件進(jìn)化為“超級媒體”（Hypermedia），除了可以檢索文字，還可以找到圖形、聲音、電影及電視圖像。







再然后，蘋果公司將這種技術(shù)跟日本索尼公司發(fā)明的CD-ROM（compact disc read only memory，于1982年發(fā)明）進(jìn)行結(jié)合，變成“互動光盤”，這種光盤就等于是如今網(wǎng)站的鼻祖版本了。




在大致容量600MGB的CD中，蘋果公司的工作人員往里面塞進(jìn)了文字、圖形、動畫，而且形成一個復(fù)雜的索引架構(gòu)。







這樣一來就形成一個靈活且可互動的內(nèi)容庫，大家可以根據(jù)需要選取想看的部分，有首頁、二級欄目、三級欄目、內(nèi)容詳情頁等。




在此過程中還發(fā)明設(shè)計出一些后來常見的網(wǎng)站架構(gòu)邏輯，比如“平行文本”、“多層”“矩陣”“網(wǎng)絡(luò)系統(tǒng)”等，這里作很簡單的介紹：平行文本就是可以在看一篇文字時候可一邊看到它相關(guān)的摘要跟縮寫，這等于如今的鼠標(biāo)經(jīng)過效果。







多層就是看一個內(nèi)容的時候可以看到其它相關(guān)部分，等于如今網(wǎng)站中的“相關(guān)推薦”。







矩陣就是將資料布局到一個網(wǎng)格中方便大家查詢，等于現(xiàn)在的產(chǎn)品系統(tǒng)，新聞系統(tǒng)一類。







網(wǎng)絡(luò)系統(tǒng)就是可以聯(lián)系外部信息，其實就等于友情鏈接一類了。




當(dāng)時間去到1991年，美國政府開始投入資金將“互聯(lián)網(wǎng)”引入公共學(xué)校，而經(jīng)過6年，世界上就有3000萬個網(wǎng)絡(luò)用戶，2000年左右，美國就有三分之一的家庭實現(xiàn)了聯(lián)網(wǎng)。




有流量就有商機(jī)，于是就有人將“互動光盤”這樣的呈現(xiàn)方式搬到互聯(lián)網(wǎng)上變成網(wǎng)站，變成一種宣傳展示的渠道，不亦樂乎。







所以最初的“互動光盤”設(shè)計其實就等于第一代網(wǎng)頁設(shè)計。

網(wǎng)頁設(shè)計的高速發(fā)展

1994年時候，中國有個人因為公務(wù)出差去美國見證過互聯(lián)網(wǎng)的神奇，回國之后辭職，在1998年創(chuàng)立了一個如今市值1.8萬億的公司—阿里巴巴，這人就是馬云。







20世紀(jì)90年代恰好是網(wǎng)站建設(shè)數(shù)量急劇暴增的時候，充滿了商機(jī)，大家可以理解為近幾年短視頻暴增一樣，根據(jù)回顧統(tǒng)計，在1997年時候僅僅一年美國本土就新增了80萬個新網(wǎng)頁。




所以用“網(wǎng)頁”一詞是因為最初蠻多網(wǎng)站都是靜態(tài)，網(wǎng)站后臺是后來慢慢才發(fā)展形成。







但網(wǎng)頁設(shè)計最初的暴增還沒有直接為平面設(shè)計師創(chuàng)造崗位，因為第一代網(wǎng)頁設(shè)計師其實大部分由程序員轉(zhuǎn)型而來。




后來不斷發(fā)展競爭升級才將程序、前端、網(wǎng)頁設(shè)計及推廣優(yōu)化這樣的崗位分來，以便有更專業(yè)的表現(xiàn)。




我在2010年時候開始從事網(wǎng)頁設(shè)計，恰好是一個將網(wǎng)站建設(shè)不同崗位獨立出來的時代。當(dāng)時我所在公司中企動力屬于國內(nèi)最大型建站公司，大部分老同事都曾經(jīng)是程序前端設(shè)計甚至推廣這樣一條龍為客戶提供服務(wù)。







他們本質(zhì)上就是從一名開發(fā)人員入行，所以他們會從實現(xiàn)效果端來規(guī)劃設(shè)計，跟后來網(wǎng)頁設(shè)計崗獨立后完全不同。




蠻多網(wǎng)頁設(shè)計師其實根本不管程序?qū)崿F(xiàn)問題，也因此產(chǎn)生出更多更好的視覺效果，反推程序開發(fā)與前端制作的進(jìn)步。




當(dāng)時在公司經(jīng)常見到的就是網(wǎng)頁設(shè)計跟前端或者開發(fā)同事“干架”，爭論要點就是很多效果程序根本做不出來。







這樣的事情其實一直在全世界發(fā)生，所以網(wǎng)站制作技術(shù)也是以飛一般的速度在發(fā)展。




比如我剛剛學(xué)會Table布局不久，css+div布局就成主流了，再然后HTML+css+js也成熟起來，而程序開發(fā)端則是asp到asp·net到php到j(luò)ava等不同開發(fā)語言在不斷進(jìn)化。







這樣的變化結(jié)果就是不斷優(yōu)化網(wǎng)頁設(shè)計的表現(xiàn)效果。那時候我們往往在掌握一門自認(rèn)為很牛的必殺技后不到兩年就也許會過時，最典型例子莫過于Flash的“死亡”。




2010年前后，懂得用fash建站的人非常吃香，因為人才稀缺，收入可以是我們的2-3倍，那時候最流行就是用flash做所謂的“體驗館”。







“體驗館”的大致效果就是能在網(wǎng)站場景中做一些換部件，換顏色，或者點擊指引箭頭切換畫面等操作。




印象中當(dāng)時有一個奢侈品平臺站就是純falsh網(wǎng)站，開發(fā)制作費用高達(dá)300多萬。




但好景不長，因為智能手機(jī)的崛起與4G通信技術(shù)的發(fā)展，互聯(lián)網(wǎng)的主陣地慢慢往移動端遷移，而智能手機(jī)中的瀏覽器是明確不支持falsh組件的。




所以很快falsh就跌落神壇，而我們這一代網(wǎng)頁設(shè)計從業(yè)者可以說見證了全過程。







當(dāng)時身邊就有同事因為精通falsh被挖去甲方企業(yè)開發(fā)純falsh的眼鏡商城，據(jù)說后來項目就沒發(fā)展起來。




說到商城，網(wǎng)頁設(shè)計還有一個重要的主題變化，就是從企業(yè)網(wǎng)站到平臺網(wǎng)站到電子商城再到手機(jī)網(wǎng)站，App應(yīng)用，公眾號，小程序這樣的不斷切換。




到了移動端其實網(wǎng)頁設(shè)計就被“UI設(shè)計”（User Interface用戶界面）這樣更專業(yè)化的稱謂取代。







因為革命性的屏幕觸摸技術(shù)的誕生，很多網(wǎng)站本身就可以通過觸屏控制，所以從定義上來說，UI設(shè)計可以說包含了網(wǎng)頁設(shè)計。







隨著移動互聯(lián)網(wǎng)的不斷發(fā)展其實也拔高了UI設(shè)計門檻，因為要考慮很多交互體驗問題與技術(shù)規(guī)格標(biāo)準(zhǔn)，有點像當(dāng)時烏爾姆學(xué)院做產(chǎn)品設(shè)計那一套，有很多理科屬性的知識融入進(jìn)來。




所以網(wǎng)頁設(shè)計經(jīng)過僅僅30年的發(fā)展，就走向細(xì)分領(lǐng)域的拆解，分裂出企業(yè)網(wǎng)站設(shè)計（偏向品牌與廣告）、電商設(shè)計（偏向營銷）跟移動端設(shè)計（偏向交互體驗）。







但不管如何，這個過程中平面設(shè)計的本質(zhì)屬性仍然沒變，只是要解決的問題更多元化，更具體了。




根據(jù)歷史紀(jì)錄，美國的設(shè)計師杰西卡·哈芳德（JessicaHelfand）是較早以平面設(shè)計師身份參與到網(wǎng)頁設(shè)計中的，比如90年代她為美國“發(fā)現(xiàn)頻道”設(shè)計了網(wǎng)站。







哈芳德生于1960年，目前還活躍于設(shè)計圈，她也許是最有資格感嘆互聯(lián)網(wǎng)設(shè)計形式劇烈變化的人之一。







本期內(nèi)容沒有談及太多具體人物及作品，因為在有限篇幅里本期內(nèi)容已經(jīng)高度濃縮，更多是在給大家整理一個框架。




關(guān)于網(wǎng)頁設(shè)計發(fā)展的經(jīng)歷，也歡迎大家根據(jù)自己的體會參與到討論中，說出你們的故事。




本期故事講到這里，感謝各位，下期再會！