设计，是让事物变得更好的思考方式。从观察身边的一切开始，发现隐藏在日常中的美与智慧。
一个交互式单页网站，整理自 NHK 教育频道《啊！设计 / Design Ah!》的设计知识，带你从观察、拆解、排列、排版到动手实践，系统学习设计思维。
🌐 在线访问： hisunfei.github.io/Ah-design
| # | 板块 | 说明 |
|---|---|---|
| 01 | 🔍 设计的观察 | 6 个日常物品的设计智慧（鸡蛋、茶杯、钥匙、回形针、拉链、橘子）+ 观察方法论 |
| 02 | 🔧 拆解 | 互动拆解动画：铅笔 / 便当盒 / 书本，点击拆成零件再复原 |
| 03 | 🧩 集合！ | 互动排序：24 个元素可按颜色 / 大小 / 类型排列，发现规律之美 |
| 04 | 🔤 文字图形 | 字重滑块交互 + 字间距对比 + 排版之歌知识 |
| 05 | 📐 排版设计 | 好/差排版对比 + 对齐、对比、重复、亲密四大法则 |
| 06 | 🔶 纹样 | 48 格互动纹样画板（点击旋转）+ 中日希伊四大文化纹样 |
| 07 | 🏗️ 空间设计 | 6 个建筑设计概念：对称、自然、光线、动线、尺度、灰空间 |
| 08 | 📖 设计十大法则 | 从节目中提炼的核心设计原则 |
| 09 | 👨🎨 设计大师的话 | 12 位中外设计大师的设计哲学（隈研吾、原研哉、迪特·拉姆斯、乔纳森·艾维、王澍……） |
| 10 | ✏️ 动手练习 | 自由画板（可绘画）+ 4 个日常设计挑战 |
- 纯单文件：HTML + CSS + JS 一体化，无任何外部依赖
- 丰富交互：拆解动画、拖拽排列、画板绘画、纹样创作、字重滑块
- 响应式设计：手机 / 平板 / 桌面均可正常浏览
- 滚动动画：内容随滚动渐入，阅读体验流畅
- 彩蛋：点击首页的「嗨」会变色旋转 🎨
# 克隆仓库
git clone https://github.com/hisunfei/Ah-design.git
cd Ah-design
# 启动本地服务器（任选一种）
python3 -m http.server 8080
# 或 npx serve .然后访问 http://localhost:8080
| 国籍 | 大师 |
|---|---|
| 🇯🇵 日本 | 隈研吾、原研哉、深泽直人、仲条正义、伊东丰雄、佐藤卓 |
| 🇩🇪 德国 | 迪特·拉姆斯 |
| 🇺🇸 美国 | 乔纳森·艾维、保罗·兰德 |
| 🇬🇧 英国 | 诺曼·福斯特 |
| 🇮🇹 意大利 | 菲利普·斯塔克 |
| 🇨🇳 中国 | 王澍 |
NHK 教育频道《嗨设计 / Design Ah!》
整理：孙飞 @hisunfei
MIT