| 核心面向 | 教材重點 | 學習成果 |
|---|---|---|
| 桌機文件時代 | 固定寬度、選單導覽、資訊分類與大量文字。 | 能辨識早期網頁以「閱讀與查找」為核心。 |
| 行動與 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 | 常見問題 |
| Portable Document Format | 可攜式文件格式 | |
| Agent | Artificial Intelligence Agent | 人工智慧代理 |
Barcelona 三月MWC mibile world congress。
手機出現後的頁面設計:Responsive, Flash 轉爲前台互動式應用JavaScript, CSS, HTML。React 和 Vue都是基於JavaScript 的前端互動框架
在手機普及之前,網頁設計主要服務於桌上型電腦與筆電。螢幕較大、解析度相對固定,使用者通常坐在電腦前,用滑鼠點擊、用鍵盤輸入。
那個時代的網頁比較像:
把紙本型錄、公司簡介、報紙、百科全書搬到網路上。
所以設計重點通常是:
這時候的頁面設計,核心問題是:
如何把資訊分類清楚,讓使用者找到他要的東西。
例如早期公司網站、入口網站、新聞網站、學校網站,通常都有很多欄目、很多連結、很多文字。頁面比較像「資訊架構」而不是「互動服務」。
在手機出現前,Flash 曾經非常重要。它讓網頁不只是靜態文件,而可以有動畫、音樂、影片、互動遊戲和視覺特效。
很多品牌網站會有:
這個時代的頁面設計更像: