#資流1 手機出現前／後／AI 時代的頁面設計核心表格

Barcelona 三月MWC mibile world congress。

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

 

時期

主要裝置

設計核心

技術特徵

使用者行為

頁面設計重點

手機出現前：桌機網頁時代

桌上型電腦、筆電

固定版面、資訊展示

HTML、CSS、表格排版、Flash、早期 JavaScript

坐在電腦前瀏覽，時間較長

清楚分類、選單導覽、固定寬度、大量文字與圖片

早期多媒體網頁時代

桌機為主

視覺效果、動畫、互動展示

Flash、GIF、Java Applet、早期影音播放器

點擊、觀看、等待載入

動畫首頁、視覺衝擊、品牌形象、互動展示

手機出現後：行動網頁時代

智慧手機、平板

跨裝置、自動適應

Responsive Design、HTML5、CSS3、JavaScript

短時間、高頻率、觸控操作

單欄版面、大按鈕、快速載入、行動優先

App 化時代

智慧手機

服務流程與個人化

Native App、Web App、PWA、API

登入帳號、接收通知、即時互動

推播、定位、相機、付款、會員系統、沉浸式體驗

平台與社群時代

手機為主，多裝置並存

內容流、演算法推薦

React、Vue、前後端分離、雲端服務

滑動、推薦、分享、即時回應

Feed 流、卡片式設計、無限滾動、短影音、社群互動

AI 時代

手機、電腦、語音裝置、穿戴裝置

從「頁面」轉向「對話與任務完成」

生成式 AI、自然語言介面、AI Agent、多模態互動

直接提出需求，不一定手動找資料

對話介面、個人化內容、自動生成頁面、任務導向設計

 

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

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

那個時代的網頁比較像：

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

所以設計重點通常是：

設計重點

說明

固定寬度版面

常見 800px、960px、1024px 寬度

左側或上方選單

讓使用者按照分類瀏覽

大量文字資訊

頁面可以很長，使用者願意慢慢看

表格排版

早期常用 <table> 控制版面

首頁入口思維

首頁像大廳，進入不同欄目

滑鼠操作

hover、點擊、右鍵等桌機操作較重要

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

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

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

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

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

很多品牌網站會有：

Flash 常見用途

說明

動畫開場

進網站前先看一段 intro

互動選單

滑鼠移動後出現動畫

網頁遊戲

小遊戲、互動活動頁

影音播放

YouTube 早期也曾使用 Flash 播放器

廣告 Banner

動態廣告大量使用 Flash

品牌形象網站

汽車、時尚、電影宣傳網站很常見

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

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

但 Flash 有幾個問題：

  1. 需要外掛，載入慢。
  2. 不利於搜尋引擎讀取。
  3. 對手機不友善。
  4. 不適合觸控操作。

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

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

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

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

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

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

而是：

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

這帶來幾個重大變化。

1. Responsive Web Design 成為基本能力

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

例如：

桌機

手機

三欄式版面

單欄式版面

橫向選單

漢堡選單

大型橫幅圖片

縮小或裁切圖片

滑鼠 hover

觸控點擊

小字可以接受

字體要更大

按鈕可以小

按鈕要適合手指點擊

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

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

2. Mobile First：先為手機設計

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

這就是 Mobile First。

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

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

問題

說明

最重要的資訊是什麼？

手機畫面不能塞太多

使用者第一眼要看到什麼？

首屏內容很重要

按鈕夠不夠大？

手指操作不能太精細

載入速度夠不夠快？

行動網路可能不穩

表單能不能簡化？

手機輸入比鍵盤麻煩

是否需要定位、相機、付款？

手機有更多感測與功能

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

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

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

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

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

例如：

傳統網站

現代 Web App

點一次連結，整頁重整

局部更新內容

網頁像文件

網頁像應用程式

後端產生大部分頁面

前端也負責大量互動

使用者只是瀏覽

使用者會操作、輸入、管理、互動

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

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

Website 網站設計

轉向：

Web Application 網頁應用設計

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

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

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

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

App 可以使用手機功能：

手機功能

App 設計應用

推播通知

訊息、訂單、提醒

GPS 定位

地圖、外送、叫車

相機

掃碼、拍照、上傳

聯絡人

社交、通訊

生物辨識

指紋、Face ID 登入

離線資料

沒網路時仍可部分使用

感測器

運動、健康、遊戲

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

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

例如：

  1. 註冊
  2. 登入
  3. 搜尋
  4. 選擇
  5. 付款
  6. 通知
  7. 評價
  8. 再次使用

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

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

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

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

於是頁面設計大量出現：

設計形式

說明

Feed 流

內容一則一則往下滑

卡片式設計

每個內容單元像一張卡

無限滾動

不斷載入新內容

短影音版面

垂直全螢幕影片

演算法推薦

不是使用者自己找，而是系統推給他

即時互動

按讚、留言、分享、收藏

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

使用者主動找資訊

變成：

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

這是非常大的轉變。

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

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

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

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

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

  1. 搜尋機票
  2. 比價
  3. 查飯店
  4. 看地圖
  5. 看評論
  6. 填資料
  7. 付款
  8. 加入行事曆

AI 時代可能變成一句話：

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

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

這代表頁面設計會從：

資訊展示介面

轉向：

任務完成介面

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

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

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

AI 時代會出現更多：

傳統介面

AI 介面

搜尋框

對話框

分類選單

自然語言指令

篩選條件

直接說需求

FAQ 頁面

AI 客服

表單

AI 代填或逐步詢問

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

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

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

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

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

例如同一個購物網站：

使用者

AI 可能呈現的頁面

價格敏感者

優先顯示折扣、比較表

新手使用者

優先顯示教學、推薦組合

專業使用者

顯示規格、技術細節

老客戶

顯示補貨、回購、售後服務

趕時間的人

顯示最短流程、快速結帳

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

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

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

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

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

AI 時代會更像：

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

例如：

傳統頁面

AI 時代

搜尋「適合新手的相機」

AI 直接比較三款並說明原因

搜尋「退貨流程」

AI 直接判斷你的訂單能不能退

搜尋「課程資料」

AI 直接整理成學習計畫

搜尋「客服問題」

AI 直接處理或建立工單

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

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

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

使用者可能：

輸入方式

AI 回應

上傳照片

辨識商品、診斷問題、提供建議

語音提問

語音回答或執行任務

上傳 PDF

摘要、比較、整理

拍攝畫面

說明畫面內容

圈選圖片區域

修改、搜尋、分析

給一段影片

產生剪輯建議或摘要

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

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

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

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

例如：

傳統操作

AI Agent 操作

使用者自己填表單

AI 先草擬，使用者確認

使用者自己比價

AI 自動比較條件

使用者自己排程

AI 檢查行事曆後建議時間

使用者自己整理資料

AI 產生摘要與表格

使用者自己客服溝通

AI 先處理標準問題

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

  1. AI 可以做什麼？
  2. AI 不能做什麼？
  3. 什麼時候需要使用者確認？
  4. 如何顯示 AI 的依據？
  5. 如何讓使用者修改 AI 的結果？
  6. 如何避免錯誤自動執行？

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

人與 AI 協作的控制權。

九、整體演變可以這樣記

階段

頁面角色

桌機時代

頁面是文件

Flash 時代

頁面是多媒體展示

手機時代

頁面是跨裝置介面

App 時代

頁面是服務流程

平台時代

頁面是演算法內容流

AI 時代

頁面是任務入口與智慧助理

 

十、教學版總結

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

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

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

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

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

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

一句話總結：

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