手機出現前、後與 AI 時代的頁面設計

核心重點

核心面向

教材重點

學習成果

桌機文件時代

固定寬度、選單導覽、資訊分類與大量文字。

能辨識早期網頁以「閱讀與查找」為核心。

行動與 App 時代

響應式設計、行動優先、觸控與任務流程。

能以裝置與使用情境調整介面。

平台時代

Feed、卡片、無限滾動與演算法推薦。

能說明導覽式網站轉為推薦式平台的影響。

AI 介面時代

對話、個人化、多模態與 Agent 代理操作。

能設計人與 AI 的權限、確認與修正機制。

教學導讀

頁面設計的變化，不只是技術替換，而是使用者行為、裝置能力與商業模式共同改變的結果。桌機時代重視資訊架構；手機使設計轉向跨裝置與任務流程；平台以演算法主動分發內容；AI 則進一步把介面轉為理解需求並協助完成任務的入口。

英文縮寫首次出現說明

縮寫

英文原文

中文說明

MWC

Mobile World Congress

世界行動通訊大會

AI

Artificial Intelligence

人工智慧

HTML

HyperText Markup Language

超文字標記語言

CSS

Cascading Style Sheets

階層式樣式表

PWA

Progressive Web App

漸進式網路應用程式

API

Application Programming Interface

應用程式介面

GPS

Global Positioning System

全球定位系統

FAQ

Frequently Asked Questions

常見問題

PDF

Portable Document Format

可攜式文件格式

Agent

Artificial Intelligence Agent

人工智慧代理

Barcelona 三月MWC mibile world congress。

手機出現後的頁面設計：Responsive, Flash 轉爲前台互動式應用JavaScript, CSS, HTML。React 和 Vue都是基於JavaScript 的前端互動框架

一、手機出現前：頁面像「電子文件」或「線上目錄」

在手機普及之前，網頁設計主要服務於桌上型電腦與筆電。螢幕較大、解析度相對固定，使用者通常坐在電腦前，用滑鼠點擊、用鍵盤輸入。

那個時代的網頁比較像：

把紙本型錄、公司簡介、報紙、百科全書搬到網路上。

所以設計重點通常是：

這時候的頁面設計，核心問題是：

如何把資訊分類清楚，讓使用者找到他要的東西。

例如早期公司網站、入口網站、新聞網站、學校網站，通常都有很多欄目、很多連結、很多文字。頁面比較像「資訊架構」而不是「互動服務」。

二、Flash 時代：網頁變成動畫與品牌展示空間

在手機出現前，Flash 曾經非常重要。它讓網頁不只是靜態文件，而可以有動畫、音樂、影片、互動遊戲和視覺特效。

很多品牌網站會有：

這個時代的頁面設計更像：

網頁是一個可以被觀看、被操作的多媒體舞台。

但 Flash 有幾個問題：

需要外掛，載入慢。

不利於搜尋引擎讀取。

對手機不友善。

不適合觸控操作。

手機時代來臨後，Flash 很快失去主流地位。

三、手機出現後：頁面設計從「固定」變成「流動」

智慧手機真正改變了網頁設計的基本前提。

以前設計師可以假設使用者在大螢幕前，現在不能了。使用者可能在捷運上、排隊時、走路時、躺在床上，用一隻手滑手機。

因此，手機時代的網頁設計不再是：

做一個固定大小的漂亮頁面。

而是：

讓內容在不同螢幕、不同情境、不同網路速度下，都能順利使用。

這帶來幾個重大變化。

1. Responsive Web Design 成為基本能力

Responsive Design，響應式網頁設計，就是讓同一個網站根據螢幕大小自動調整。

例如：

手機讓「版面」變成彈性的。

以前網頁像一張固定海報；手機時代後，網頁比較像水，會根據容器改變形狀。

2. Mobile First：先為手機設計

後來設計觀念又從「桌機版改成手機版」變成「先做手機版，再擴展到桌機版」。

這就是 Mobile First。

原因很簡單：手機螢幕小，限制最多。
如果一個頁面在手機上都能清楚使用，那放到桌機上通常比較容易擴展。

Mobile First 會要求設計者先思考：

手機設計迫使網頁變得更簡潔、更任務導向。

四、HTML5 與 JavaScript：網頁從「頁面」變成「應用」

手機時代後，HTML5、CSS3、JavaScript 成為現代網頁核心。

HTML5 讓瀏覽器原生支援影片、音訊、Canvas 繪圖、語意化標籤與本地儲存。
JavaScript 則讓網頁可以動態更新、即時互動、呼叫 API、處理使用者操作。

這讓網站不再只是「一頁一頁讀取」，而更像 App。

例如：

例如 Gmail、Google Maps、Notion、Canva、Figma 這類服務，本質上是網站，但使用起來很像 App。

所以手機出現後，頁面設計逐漸從：

Website 網站設計

轉向：

Web Application 網頁應用設計

五、App 時代：頁面設計進入「服務流程」

手機普及後，很多服務不再只做網站，而是做 App。

App 的出現讓設計重點又變了。
因為 App 不只是頁面，而是一整套服務流程。

例如 LINE、Instagram、Uber、Foodpanda、銀行 App，它們不是單純展示資訊，而是讓使用者完成事情。

App 可以使用手機功能：

因此 App 時代的頁面設計，不只是「一頁好不好看」，而是：

使用者能不能順利完成一個任務。

例如：

註冊

登入

搜尋

選擇

付款

通知

評價

再次使用

這時候設計從「頁面」變成「流程」。

六、社群與平台時代：頁面變成 Feed、卡片與演算法

手機也帶來了另一個重大改變：滑動式內容消費。

Facebook、Instagram、TikTok、YouTube Shorts、Threads、小紅書等平台，讓使用者習慣用手指快速滑動。

於是頁面設計大量出現：

這時候頁面設計的邏輯從：

使用者主動找資訊

變成：

系統主動推內容給使用者。

這是非常大的轉變。

以前網站設計重視「導覽」。
平台時代更重視「停留時間、互動率、轉換率」。

七、AI 時代：頁面可能不再是唯一入口

到了 AI 時代，最大的變化是：

使用者不一定要自己點選頁面、搜尋資料、填表單，而是直接用自然語言提出需求。

例如以前你要訂一趟旅行，可能要打開很多頁面：

搜尋機票

比價

查飯店

看地圖

看評論

填資料

付款

加入行事曆

AI 時代可能變成一句話：

「幫我安排下週三到週五去東京的行程，預算兩萬台幣，不要太累，飯店靠近地鐵。」

AI 可能直接幫你整理、比較、生成方案，甚至進一步幫你完成預訂。

這代表頁面設計會從：

資訊展示介面

轉向：

任務完成介面

八、AI 時代的頁面設計可能出現哪些改變？

1. 從選單介面變成對話介面

以前使用者要看選單、找按鈕、點分類。

AI 時代會出現更多：

例如不再是使用者自己找「退貨政策」，而是直接問：

「我這個訂單可以退貨嗎？」

AI 會根據帳號、訂單、規則直接回答。

2. 從固定頁面變成個人化頁面

以前所有人看到的頁面大致相同。
後來演算法讓內容排序不同。
AI 時代則可能讓整個頁面結構都因人而異。

例如同一個購物網站：

所以未來頁面不一定是固定模板，而可能是：

AI 根據使用者意圖即時組合出來的介面。

3. 從搜尋結果變成答案與行動

傳統網站設計常依賴搜尋：

使用者搜尋 → 系統列出結果 → 使用者自己比較 → 使用者決定

AI 時代會更像：

使用者提出目標 → AI 整理答案 → AI 建議行動 → 使用者確認

例如：

這會讓很多傳統頁面變得不那麼重要，例如 FAQ、商品列表、搜尋結果頁、複雜篩選頁。

4. 從單一媒介變成多模態介面

AI 時代的介面不只處理文字，也處理圖片、語音、影片、文件。

使用者可能：

所以頁面設計會從「螢幕上的按鈕」擴展到：

文字、語音、影像、手勢、文件共同構成的互動介面。

5. 從使用者操作變成 AI Agent 代理操作

未來 AI 不只是回答問題，也可能幫使用者執行任務。

例如：

這會改變頁面設計的重點。
以前設計師要設計每一個按鈕、每一個流程。
未來可能更重要的是設計：

AI 可以做什麼？

AI 不能做什麼？

什麼時候需要使用者確認？

如何顯示 AI 的依據？

如何讓使用者修改 AI 的結果？

如何避免錯誤自動執行？

也就是說，未來設計不只設計頁面，而是設計：

人與 AI 協作的控制權。

九、整體演變可以這樣記

十、教學版總結

手機出現前，網頁設計主要圍繞桌上型電腦。頁面通常是固定寬度，使用者透過滑鼠與選單瀏覽資訊。這時候的網頁比較像電子文件、公司型錄或線上資料庫，設計重點在於資訊分類、導覽結構與視覺排版。

Flash 時代則讓網頁加入大量動畫、影音與互動效果，使網頁成為多媒體展示空間。但 Flash 依賴外掛、載入慢、安全性問題多，也不適合手機觸控環境，因此在手機普及後逐漸被 HTML5、CSS3 與 JavaScript 取代。

手機出現後，網頁設計的核心從固定版面轉向響應式與行動優先。設計者必須考慮小螢幕、觸控操作、行動網路、短時間使用情境，以及不同裝置之間的版面適應。Responsive Design、Mobile First、HTML5 與 JavaScript 讓網頁能在手機、平板與桌機之間流動，也讓網站逐漸變成可以互動的 Web App。

App 時代進一步改變頁面設計。頁面不再只是展示資訊，而是幫助使用者完成任務，例如登入、搜尋、付款、定位、通知、分享與管理資料。此時設計重點從單一頁面轉向完整服務流程。

到了平台與社群時代，頁面又變成內容流與演算法推薦的介面。使用者不一定主動搜尋，而是不斷滑動、觀看、互動、分享。卡片式設計、無限滾動、短影音與推薦系統，成為手機時代後半段的重要設計形式。

未來 AI 時代，頁面設計可能發生更深層的轉變。使用者不一定需要自己找資料、點選功能或填寫表單，而是直接用自然語言提出需求。AI 可以整理資訊、生成內容、比較選項、代填資料，甚至協助完成任務。因此頁面會從「資訊展示」轉向「任務完成」，從「固定介面」轉向「個人化、對話式、多模態、可代理操作的智慧介面」。

一句話總結：

手機讓網頁從固定頁面變成跨裝置的互動服務；AI 則可能讓網頁從互動服務變成能理解需求、協助決策並完成任務的智慧入口。

教材小結

設計的核心已由「把資訊放進頁面」逐步轉為「讓使用者完成任務」。AI 時代更需要處理透明度、可修改性、授權範圍、人工確認與錯誤復原。介面越智慧，控制權與責任界線就越必須被清楚設計。