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