2022-6-14 博博
20 世紀(jì)末到 21 世紀(jì)開(kāi)始，宣傳品牌與產(chǎn)品的陣地不再局限于印刷品，電視、電臺(tái)及現(xiàn)場(chǎng)活動(dòng)，而是出現(xiàn)了網(wǎng)站，網(wǎng)站可以鏈接更多陌生人，而且沒(méi)有時(shí)空限制。
1997 年的谷歌網(wǎng)站
美國(guó)最火的設(shè)計(jì)風(fēng)格只要有人將資料放到網(wǎng)上，遠(yuǎn)在日本的一名中學(xué)生都可以去學(xué)習(xí)了解，所以也打破了過(guò)去信息差的優(yōu)勢(shì)。本回我們要跟大家聊聊網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展，但在展開(kāi)內(nèi)容前，要搞清楚一個(gè)問(wèn)題，就是網(wǎng)頁(yè)設(shè)計(jì)屬于平面設(shè)計(jì)嗎？
國(guó)內(nèi)早在差不多 20 年前，建站公司就開(kāi)始獨(dú)立存在，所以這個(gè)問(wèn)題蠻有爭(zhēng)議，尤其是 UI 設(shè)計(jì)也很成熟之后，大家更愿意認(rèn)為此學(xué)科是獨(dú)立的。
中國(guó)建于 1994 年的第一個(gè)網(wǎng)頁(yè)，主要對(duì)外溝通
平面設(shè)計(jì)的定義不管怎么粉飾，簡(jiǎn)單而言就是：以某種目的，將文字、圖像、圖形安排在一起。網(wǎng)頁(yè)設(shè)計(jì)也是如此，唯一區(qū)別是網(wǎng)頁(yè)具有動(dòng)態(tài)，但這種動(dòng)態(tài)屬于若干個(gè)靜態(tài)設(shè)定的切換關(guān)系，其關(guān)鍵幀也是平面設(shè)計(jì)。
2003 年時(shí)候的淘寶網(wǎng)
我在國(guó)內(nèi)蠻早就從事網(wǎng)頁(yè)設(shè)計(jì)工作，早年甚至可以自己獨(dú)立完成網(wǎng)站，除了頁(yè)面設(shè)計(jì)，還包括套 ASP 程序（Active Server Pages 動(dòng)態(tài)服務(wù)器頁(yè)面），用 table 布局前端等，當(dāng)然這些技術(shù)如今早已過(guò)時(shí)。
12 年前史太濃獨(dú)立完成的網(wǎng)站
因此這段歷史我就是參與者之一，所以本回不僅是對(duì)搜集資料的剪裁分析，還會(huì)結(jié)合不少自身經(jīng)歷體驗(yàn)跟大家分享。
首先我們來(lái)簡(jiǎn)單回顧下互聯(lián)網(wǎng)的發(fā)展與網(wǎng)頁(yè)設(shè)計(jì)的演變。
互聯(lián)網(wǎng)發(fā)展到如今已經(jīng)像空氣一樣存在，斷網(wǎng)已經(jīng)如同缺氧那么嚴(yán)重，而互聯(lián)網(wǎng)的誕生最初跟兩件事情相關(guān)。
第一件大家也許比較熟悉，就是在 20 世紀(jì) 50 年代末美國(guó)國(guó)防部高級(jí)研究項(xiàng)目總署（the United States Department of Defense，Advanced ResearchProjects Agency，簡(jiǎn)稱(chēng) ARPA）成立了。
美國(guó)國(guó)防部高級(jí)研究項(xiàng)目總署 logo
其成立的根本原因是冷戰(zhàn)背景下，蘇聯(lián)不但先于美國(guó)在 1957 年將衛(wèi)星送上太空，而且世界第一枚多級(jí)遠(yuǎn)程彈道火箭發(fā)射也試驗(yàn)成功，因此蘇聯(lián)宣稱(chēng)可以將核彈送往地球任何地區(qū)。這對(duì)美國(guó)而言實(shí)在太嚇人，所以 ARPA 是一個(gè)專(zhuān)門(mén)研究國(guó)防技術(shù)的“事業(yè)部”，聚合美國(guó)當(dāng)時(shí)最牛的幾百位科學(xué)家，研究如何將最先進(jìn)技術(shù)應(yīng)用到美國(guó)國(guó)防。
人類(lèi)第一個(gè)衛(wèi)星由蘇聯(lián)在 1957 年發(fā)射
由于這些科學(xué)家當(dāng)時(shí)分散于全國(guó)各地，因?yàn)槿绱藚柡Φ目茖W(xué)家肯定本身有重要事務(wù)，而不是放著隨傳隨到，因此大伙無(wú)法專(zhuān)門(mén)聚在一起專(zhuān)門(mén)干這事，而是遠(yuǎn)程協(xié)作，所以就需要一個(gè)有效的遠(yuǎn)程溝通工具。
這個(gè)工具不能只局限于語(yǔ)言聲音，還要做到資源共享，更關(guān)鍵的是要高效安全，信息不可被盜取，當(dāng)時(shí)負(fù)責(zé)研究此事的人是麻省理工科學(xué)家約翰·利克利德(John Licklider)。
麻省理工科學(xué)家約翰·利克利德
此處省略一堆過(guò)程與專(zhuān)業(yè)技術(shù)術(shù)語(yǔ)，反正如此這般，利克利德因?yàn)?ARPA 組織這個(gè)溝通交接需求無(wú)意中發(fā)明出“國(guó)際互聯(lián)網(wǎng)網(wǎng)絡(luò)”（the World Wide Web）。
互聯(lián)網(wǎng)時(shí)代開(kāi)啟
事后證明，國(guó)不國(guó)防是一回事，這才是他們最偉大的發(fā)明。這種技術(shù)能做到資源共享與防止盜取的一個(gè)重要原因是可以將信息分解成“數(shù)據(jù)包”，將他們發(fā)送到目的地后可以重新組裝，也就是“分組路由”的雛形。大家了解到這個(gè)程度就可以了，再往深里說(shuō)意義不大，況且我也說(shuō)不清楚，
而時(shí)間很快去到 1987 年，這是第二件事情，這一年蘋(píng)果電腦公司向外界報(bào)道了一款可在網(wǎng)絡(luò)上尋找資料的軟件，名為“超級(jí)文件”（Hypertext）。
蘋(píng)果 1987 年的“超級(jí)文件”軟件
比如在電腦上打“設(shè)計(jì)史太濃”就可以將當(dāng)時(shí)整個(gè)網(wǎng)絡(luò)與此相關(guān)的文字內(nèi)容集中起來(lái)（當(dāng)時(shí)網(wǎng)絡(luò)上的內(nèi)容其實(shí)非常有限），等于是谷歌百度的前身了。
后來(lái)這個(gè)軟件進(jìn)化為“超級(jí)媒體”（Hypermedia），除了可以檢索文字，還可以找到圖形、聲音、電影及電視圖像。
蘋(píng)果軟件“超級(jí)媒體”軟件
再然后，蘋(píng)果公司將這種技術(shù)跟日本索尼公司發(fā)明的 CD-ROM（compact disc read only memory，于 1982 年發(fā)明）進(jìn)行結(jié)合，變成“互動(dòng)光盤(pán)”，這種光盤(pán)就等于是如今網(wǎng)站的鼻祖版本了。在大致容量 600MGB 的 CD 中，蘋(píng)果公司的工作人員往里面塞進(jìn)了文字、圖形、動(dòng)畫(huà)，而且形成一個(gè)復(fù)雜的索引架構(gòu)。
CD-ROM 中的互動(dòng)界面
這樣一來(lái)就形成一個(gè)靈活且可互動(dòng)的內(nèi)容庫(kù)，大家可以根據(jù)需要選取想看的部分，有首頁(yè)、二級(jí)欄目、三級(jí)欄目、內(nèi)容詳情頁(yè)等。在此過(guò)程中還發(fā)明設(shè)計(jì)出一些后來(lái)常見(jiàn)的網(wǎng)站架構(gòu)邏輯，比如“平行文本”、“多層”“矩陣”“網(wǎng)絡(luò)系統(tǒng)”等，這里作很簡(jiǎn)單的介紹：
平行文本就是可以在看一篇文字時(shí)候可一邊看到它相關(guān)的摘要跟縮寫(xiě)，這等于如今的鼠標(biāo)經(jīng)過(guò)效果。
網(wǎng)頁(yè)中的“鼠標(biāo)經(jīng)過(guò)”效果
多層就是看一個(gè)內(nèi)容的時(shí)候可以看到其它相關(guān)部分，等于如今網(wǎng)站中的“相關(guān)推薦”。
網(wǎng)頁(yè)中的“相關(guān)推薦”效果
矩陣就是將資料布局到一個(gè)網(wǎng)格中方便大家查詢，等于現(xiàn)在的產(chǎn)品系統(tǒng)，新聞系統(tǒng)一類(lèi)。
網(wǎng)頁(yè)中的“產(chǎn)品系統(tǒng)”效果
網(wǎng)絡(luò)系統(tǒng)就是可以聯(lián)系外部信息，其實(shí)就等于友情鏈接一類(lèi)了。
當(dāng)時(shí)間去到 1991 年，美國(guó)政府開(kāi)始投入資金將“互聯(lián)網(wǎng)”引入公共學(xué)校，而經(jīng)過(guò) 6 年，世界上就有 3000 萬(wàn)個(gè)網(wǎng)絡(luò)用戶，2000 年左右，美國(guó)就有三分之一的家庭實(shí)現(xiàn)了聯(lián)網(wǎng)。有流量就有商機(jī)，于是就有人將“互動(dòng)光盤(pán)”這樣的呈現(xiàn)方式搬到互聯(lián)網(wǎng)上變成網(wǎng)站，變成一種宣傳展示的渠道，不亦樂(lè)乎。
90 年代可口可樂(lè)的官網(wǎng)
所以最初的“互動(dòng)光盤(pán)”設(shè)計(jì)其實(shí)就等于第一代網(wǎng)頁(yè)設(shè)計(jì)。
1994 年時(shí)候，中國(guó)有個(gè)人因?yàn)楣珓?wù)出差去美國(guó)見(jiàn)證過(guò)互聯(lián)網(wǎng)的神奇，回國(guó)之后辭職，在 1998 年創(chuàng)立了一個(gè)如今市值 1.8 萬(wàn)億的公司—阿里巴巴，這人就是馬云。
阿里巴巴早期的網(wǎng)頁(yè)設(shè)計(jì)樣式
20 世紀(jì) 90 年代恰好是網(wǎng)站建設(shè)數(shù)量急劇暴增的時(shí)候，充滿了商機(jī)，大家可以理解為近幾年短視頻暴增一樣，根據(jù)回顧統(tǒng)計(jì)，在 1997 年時(shí)候僅僅一年美國(guó)本土就新增了 80 萬(wàn)個(gè)新網(wǎng)頁(yè)。
所以用“網(wǎng)頁(yè)”一詞是因?yàn)樽畛跣U多網(wǎng)站都是靜態(tài)，網(wǎng)站后臺(tái)是后來(lái)慢慢才發(fā)展形成。
1997 年時(shí)候的麥當(dāng)勞網(wǎng)站設(shè)計(jì)
但網(wǎng)頁(yè)設(shè)計(jì)最初的暴增還沒(méi)有直接為平面設(shè)計(jì)師創(chuàng)造崗位，因?yàn)榈谝淮W(wǎng)頁(yè)設(shè)計(jì)師其實(shí)大部分由程序員轉(zhuǎn)型而來(lái)。后來(lái)不斷發(fā)展競(jìng)爭(zhēng)升級(jí)才將程序、前端、網(wǎng)頁(yè)設(shè)計(jì)及推廣優(yōu)化這樣的崗位分來(lái)，以便有更專(zhuān)業(yè)的表現(xiàn)。
我在 2010 年時(shí)候開(kāi)始從事網(wǎng)頁(yè)設(shè)計(jì)，恰好是一個(gè)將網(wǎng)站建設(shè)不同崗位獨(dú)立出來(lái)的時(shí)代。當(dāng)時(shí)我所在公司中企動(dòng)力屬于國(guó)內(nèi)最大型建站公司，大部分老同事都曾經(jīng)是程序前端設(shè)計(jì)甚至推廣這樣一條龍為客戶提供服務(wù)。
史太濃在 2010 年前后的網(wǎng)頁(yè)設(shè)計(jì)
他們本質(zhì)上就是從一名開(kāi)發(fā)人員入行，所以他們會(huì)從實(shí)現(xiàn)效果端來(lái)規(guī)劃設(shè)計(jì)，跟后來(lái)網(wǎng)頁(yè)設(shè)計(jì)崗獨(dú)立后完全不同。蠻多網(wǎng)頁(yè)設(shè)計(jì)師其實(shí)根本不管程序?qū)崿F(xiàn)問(wèn)題，也因此產(chǎn)生出更多更好的視覺(jué)效果，反推程序開(kāi)發(fā)與前端制作的進(jìn)步。當(dāng)時(shí)在公司經(jīng)常見(jiàn)到的就是網(wǎng)頁(yè)設(shè)計(jì)跟前端或者開(kāi)發(fā)同事“干架”，爭(zhēng)論要點(diǎn)就是很多效果程序根本做不出來(lái)。
史太濃在 2010 年前后的網(wǎng)頁(yè)設(shè)計(jì)
這樣的事情其實(shí)一直在全世界發(fā)生，所以網(wǎng)站制作技術(shù)也是以飛一般的速度在發(fā)展。比如我剛剛學(xué)會(huì) Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起來(lái)，而程序開(kāi)發(fā)端則是 asp 到 asp·net 到 php 到 java 等不同開(kāi)發(fā)語(yǔ)言在不斷進(jìn)化。
史太濃在 2010 年前后的網(wǎng)頁(yè)設(shè)計(jì)
這樣的變化結(jié)果就是不斷優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)的表現(xiàn)效果。
那時(shí)候我們往往在掌握一門(mén)自認(rèn)為很牛的必殺技后不到兩年就也許會(huì)過(guò)時(shí)，最典型例子莫過(guò)于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因?yàn)槿瞬畔∪?，收入可以是我們?2-3 倍，那時(shí)候最流行就是用 flash 做所謂的“體驗(yàn)館”。
全 Flash 網(wǎng)站
“體驗(yàn)館”的大致效果就是能在網(wǎng)站場(chǎng)景中做一些換部件，換顏色，或者點(diǎn)擊指引箭頭切換畫(huà)面等操作。印象中當(dāng)時(shí)有一個(gè)奢侈品平臺(tái)站就是純 flash 網(wǎng)站，開(kāi)發(fā)制作費(fèi)用高達(dá) 300 多萬(wàn)。
但好景不長(zhǎng)，因?yàn)橹悄苁謾C(jī)的崛起與 4G 通信技術(shù)的發(fā)展，互聯(lián)網(wǎng)的主陣地慢慢往移動(dòng)端遷移，而智能手機(jī)中的瀏覽器是明確不支持 flash 組件的。所以很快 flash 就跌落神壇，而我們這一代網(wǎng)頁(yè)設(shè)計(jì)從業(yè)者可以說(shuō)見(jiàn)證了全過(guò)程。
全 Flash 網(wǎng)站
當(dāng)時(shí)身邊就有同事因?yàn)榫?flash 被挖去甲方企業(yè)開(kāi)發(fā)純 flash 的眼鏡商城，據(jù)說(shuō)后來(lái)項(xiàng)目就沒(méi)發(fā)展起來(lái)。
說(shuō)到商城，網(wǎng)頁(yè)設(shè)計(jì)還有一個(gè)重要的主題變化，就是從企業(yè)網(wǎng)站到平臺(tái)網(wǎng)站到電子商城再到手機(jī)網(wǎng)站，App 應(yīng)用，公眾號(hào)，小程序這樣的不斷切換。到了移動(dòng)端其實(shí)網(wǎng)頁(yè)設(shè)計(jì)就被“UI 設(shè)計(jì)”（User Interface 用戶界面）這樣更專(zhuān)業(yè)化的稱(chēng)謂取代。
史太濃 2013 年前后的 UI 設(shè)計(jì)
因?yàn)楦锩缘钠聊挥|摸技術(shù)的誕生，很多網(wǎng)站本身就可以通過(guò)觸屏控制，所以從定義上來(lái)說(shuō)，UI 設(shè)計(jì)可以說(shuō)包含了網(wǎng)頁(yè)設(shè)計(jì)。
史太濃 2013 年前后的網(wǎng)頁(yè)設(shè)計(jì)
隨著移動(dòng)互聯(lián)網(wǎng)的不斷發(fā)展其實(shí)也拔高了 UI 設(shè)計(jì)門(mén)檻，因?yàn)橐紤]很多交互體驗(yàn)問(wèn)題與技術(shù)規(guī)格標(biāo)準(zhǔn)，有點(diǎn)像當(dāng)時(shí)烏爾姆學(xué)院做產(chǎn)品設(shè)計(jì)那一套，有很多理科屬性的知識(shí)融入進(jìn)來(lái)。
所以網(wǎng)頁(yè)設(shè)計(jì)經(jīng)過(guò)僅僅 30 年的發(fā)展，就走向細(xì)分領(lǐng)域的拆解，分裂出企業(yè)網(wǎng)站設(shè)計(jì)（偏向品牌與廣告）、電商設(shè)計(jì)（偏向營(yíng)銷(xiāo)）跟移動(dòng)端設(shè)計(jì)（偏向交互體驗(yàn)）。
史太濃 2018 年前后的電商網(wǎng)站設(shè)計(jì)
但不管如何，這個(gè)過(guò)程中平面設(shè)計(jì)的本質(zhì)屬性仍然沒(méi)變，只是要解決的問(wèn)題更多元化，更具體了。
根據(jù)歷史紀(jì)錄，美國(guó)的設(shè)計(jì)師杰西卡·哈芳德（JessicaHelfand）是較早以平面設(shè)計(jì)師身份參與到網(wǎng)頁(yè)設(shè)計(jì)中的，比如 90 年代她為美國(guó)“發(fā)現(xiàn)頻道”設(shè)計(jì)了網(wǎng)站。
美國(guó)“發(fā)現(xiàn)頻道”90 年代的網(wǎng)站
哈芳德生于 1960 年，目前還活躍于設(shè)計(jì)圈，她也許是最有資格感嘆互聯(lián)網(wǎng)設(shè)計(jì)形式劇烈變化的人之一。
杰西卡·哈芳德
本期內(nèi)容沒(méi)有談及太多具體人物及作品，因?yàn)樵谟邢奁锉酒趦?nèi)容已經(jīng)高度濃縮，更多是在給大家整理一個(gè)框架。
關(guān)于網(wǎng)頁(yè)設(shè)計(jì)發(fā)展的經(jīng)歷，也歡迎大家根據(jù)自己的體會(huì)參與到討論中，說(shuō)出你們的故事。
本期故事講到這里，感謝各位，下期再會(huì)！
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.88yangsc.com )是一家專(zhuān)注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南（附大量資源）
網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧
網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？
網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法
網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁(yè)設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來(lái)看 58 設(shè)計(jì)師的總結(jié)！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.88yangsc.com
