COURSE · 6.4500
6.4500 Web 设计：语言和用户接口
课程把人机交互原则与 Web 实现放在同一条学习路径中，同时衡量可学习性、效率、安全性与视觉表达。 技术主线从 HTML、CSS、JavaScript 和 DOM 延伸到异步编程、Web API、数据可视化、动效与响应式界面。 设计主线通过需求发现、原型、用户测试、启发式评估和设计批评，把用户证据转…
24 篇编号讲义 · 25 篇内容 · 95 个已标注 tags
- DOMAIN
- 编程与软件工程
- STATUS
- complete
- COURSE ID
- 6.4500
- RELATIONS
- 暂无结构化数据
LECTURE NOTES · 25
来自目录与 frontmatter#TITLESTATUSTAGSUPDATED
01介绍与总览lec1完成402Web 网页结构：HTMLlec2完成503可学习性（TD）lec3完成504图形设计（TD）lec4草稿505效率lec5完成506CSS 的基本概念 Ilec6草稿507安全性lec7占位208CSS 基本概念 IIlec8完成509启发式评估lec9占位210布局lec10完成511原型和用户测试lec11完成512现代 JavaScript 和 DOMlec12完成513统一 Web 设计lec13占位214事件lec14占位215设计模式与函数式 JavaScriptlec15草稿316函数、类和 thislec16完成517字体lec17草稿418异步编程lec18完成519色彩lec19完成420Web APIlec20草稿521信息可视化lec21完成422动画与反馈lec22草稿423Web 标准lec23完成424面向 AI 系统的设计lec24完成5—Vue 响应式模板vue完成4课程资料与说明
来自课程 index.md6.4500 Web 设计：语言和用户接口
TL;DR
- 课程把人机交互原则与 Web 实现放在同一条学习路径中，同时衡量可学习性、效率、安全性与视觉表达。
- 技术主线从 HTML、CSS、JavaScript 和 DOM 延伸到异步编程、Web API、数据可视化、动效与响应式界面。
- 设计主线通过需求发现、原型、用户测试、启发式评估和设计批评，把用户证据转化为可迭代的界面决策。
- 实验与课程项目要求学习者同时验证代码行为和用户体验，而不是把设计与工程拆成两个孤立阶段。
课程介绍
先修课程
6.1010 fundamentals of programming
课程范围与教学方式
你将学习用户界面设计核心原则：
- 可学习性（learnability）
- 效率（efficiency）
- 安全性（safety）
- 原型设计（prototyping）
- 用户测试（user testing）
你会学习 Web 核心技术：
- HTML
- CSS
- JavaScript
以及：
- 它们各自的作用
- 为什么设计差异很大
还会学习：
- 前端框架：Vue.js（响应式编程）
- 图形设计基础（设计与可用性密切相关）
参考资料
-
推荐参考书： The Design of Everyday Things: Revised and Expanded Edition, Don Norman
- 设计师的圣经
作业
- Exercise 1: Noticing the design of everyday things (25%)
- Exercise 2: Learning to write good HTML (25%)
- Exercise 3: Couple Expenses App Part 1 (25%)
- Exercise 4: 6.S063 Grading Calculator (25%)
- Exercise 1: Evaluating Graphic Design (15%)
- Exercise 2: Evaluating Learnability of a Graphics Editor (25%)
- Exercise 3: Practicing graphic design principles (35%)
- Exercise 4: Couple Expenses App Implementation (25%)
- Exercise 1: Fix the Web with CSS! (30%)
- Exercise 2: Couple Expenses App Implementation (60%)
- Exercise 3: Poor Safety Example for Studio (10%)
- Exercise 1: Adding CSS to your HW1 homepage (30%)
- Exercise 2: Critique another student’s Expenses App (20%)
- Exercise 3: Fix up your Expenses App (20%)
- Exercise 4: Evaluating instant messaging UIs (30%)
- Exercise 1: Build a scraper (30%)
- Exercise 2: Needfinding for chat/IM apps (40%)
- Exercise 3: Idea generation for chat/IM apps (30%)
- Exercise 1: Make your homepage more universal (30%)
- Exercise 1: Paper prototype concepts for chat/IM apps (40%)
- Exercise 2: Drag & Drop to reorder your to-do list (30%)
- Exercise 1: User testing of your paper prototypes (50%)
- Exercise 2: Bookmarklet to hide undesirable content (50%)
- Exercise 1: Iterate and implement a Figma mockup of your Chat/Messaging App
- Exercise 2: Improve Typography on your website
- Exercise 3: Making a personal tracking application
- Exercise 1: User testing of Figma mockup of your Chat App (30%)
- Exercise 2: Improve Color on your website (10%)
- Exercise 3: Starting your Chat App (60%)
- Exercise 1: Set up Github page (10%)
- Exercise 2: Add client-side routing to your chat app (30%)
- Exercise 2: Add a component to your chat app (30%)
- Exercise 3: Adding a new feature (30%)
教程
- Studio 1
- Studio 2
- Studio 3
- Studio 4
- Studio 5
- Studio 6
- Studio 7
- Studio 8
- Studio 9
- Studio 10
- Studio 11
- Studio 12
- Studio 13
相关资源
环境搭建
启动一个本地服务器
如果你双击一个本地的 .html 文件，默认浏览器会打开它并显示内容。但如果你查看地址栏。会看到 URL 以 file:// 开头，也就是使用的是 file URI scheme（文件协议）。这种 URI 协议本质上是不安全的，因为它没有明确的来源隔离，因此很多 Web 平台技术在file:// 是被禁用的。 在开发过程中你需要使用本地 Web 服务器。
有很多方法，这里说两个
-
NPM 的 http-server， 默认同样使用 8000 端口，也可以用
-p修改端口npm install -g http-server -
Vscode 安装 Live Server 扩展，点击右下角的 “Go Live”，服务器会启动，并显示使用的端口。
实验
课程内容
Lec 1 介绍 & 总览
主题：
- 介绍
- 可用性设计
- Web 技术
Lec 2 Web 网页结构：HTML
主题：
- HTML 语义
- 常见的 HTML 元素
- DOM 树
- HTML 的交互与用户输入
- 响应式模板
Lec 3 易学性
Lec 4 图形设计
Lec 5 高效性
Lec 6 CSS 的基本概念 I
Lec 7 安全性
Lec 8 CSS 的基本概念 II
Lec 9 启发式评估
Lec 10 布局
Lec 11 原型和用户测试
Lec 12 现代 JS 和 DOM 的介绍
JavaScript for Python Programmers
Lec 13 统一 Web 设计
Lec 14 事件
Lec 15 设计范式 & 函数式 JS
Lec 16 函数、类和 this
Lec 17 字体
Lec 18 异步编程
Lec 19 色彩
Lec 20 Web API
浏览器有 UI 让用于与文档交互，也有 DOM API 让你的代码与文档交互。
Lec 21 路由 & 数据可视化
在引言部分，回答三个问题？
- 为什么要将信息可视化？
- 什么是可视化？
- 为什么可视化有用？
后面正文部分，我们讲解可视化的形式，包括图表（charts）
Lec 22 动画 & 反馈
本节主题关于
- 何时以及为什么使用动画
- 实现方式：如何实现？
- 可访问性
Lec 23 Web 标准
本节关于几个问题的回答？
- 今天的 Web 生态如何形成的？
- Web 技术是如何被制定出来的？
- 你又能够如何参与并做出贡献？