核心重點

核心面向 教材重點 學習成果
桌機文件時代 固定寬度、選單導覽、資訊分類與大量文字。 能辨識早期網頁以「閱讀與查找」為核心。
行動與 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 曾經非常重要。它讓網頁不只是靜態文件,而可以有動畫、音樂、影片、互動遊戲和視覺特效。

很多品牌網站會有:

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