pengxiao/2026_DesignAI

Files

T

pengxiao 49ceadeb0d fix: 修正附录目录嵌套，移除旧 officefile 附录文件

- 将 officefile/appendix/appendix/ 下的文件提升一级
- 旧 officefile 的 glossary/references/tools.md 移入 Archive

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2026-05-25 14:02:01 +08:00

9.2 KiB

Raw Blame History

附录5：网络、网站与在线可视化

本附录介绍网络基础知识、网站搭建入门，以及在线数据可视化的工具与方法。

1 网络基础知识

1.1 互联网与Web

互联网（Internet）是由全球计算机互相连接而成的网络。Web（万维网）是运行在互联网上的信息系统，通过浏览器访问网页来获取信息。

核心概念：

概念	说明
URL	统一资源定位符，即网页地址（如 `https://example.com/page`）
HTTP/HTTPS	浏览器与服务器之间传输数据的协议，HTTPS 为加密版本
HTML	网页的骨架，定义页面结构和内容
CSS	网页的样式，控制颜色、字体、布局等外观
JavaScript	网页的行为，实现交互功能和动态效果
API	应用程序接口，程序之间交换数据的标准方式

1.2 前端与后端

一个完整的Web应用由前端和后端两部分组成：

用户浏览器（前端） ←→ 服务器（后端） ←→ 数据库
    HTML/CSS/JS         Python/Node.js      MySQL/PostgreSQL

前端：用户在浏览器中看到和操作的界面，使用 HTML、CSS、JavaScript 构建。

后端：运行在服务器上的程序，处理数据逻辑、存储和检索，可以用 Python（Flask/Django/FastAPI）、Node.js、Java 等实现。

1.3 API与数据交互

API（Application Programming Interface）是程序之间通信的接口。在AI应用中，调用大语言模型、获取在线数据等操作都通过API完成。

RESTful API 基本概念：

方法	用途	示例
GET	获取数据	获取模型列表
POST	提交数据	发送文本让模型生成回复
PUT	更新数据	更新模型参数
DELETE	删除数据	删除一条记录

调用API的Python示例：

import requests

# 调用一个公开API获取数据
response = requests.get("https://api.example.com/models")
data = response.json()        # 将返回的JSON解析为Python字典
print(data)

# POST请求示例
payload = {"prompt": "设计一个现代风格的客厅", "model": "stable-diffusion"}
response = requests.post("https://api.example.com/generate", json=payload)

1.4 JSON数据格式

JSON（JavaScript Object Notation）是Web上最常用的数据交换格式，几乎所有API都使用JSON传递数据。

{
  "model": "ResNet",
  "accuracy": 0.96,
  "layers": [64, 128, 256, 512],
  "metadata": {
    "author": "He et al.",
    "year": 2015
  }
}

Python中读写JSON：

import json

# Python字典 → JSON字符串
data = {"name": "Transformer", "year": 2017}
json_str = json.dumps(data, indent=2)

# JSON字符串 → Python字典
parsed = json.loads(json_str)

2 网站搭建入门

2.1 静态网站与动态网站

类型	说明	技术栈	适用场景
静态网站	页面内容固定，无需服务器处理	HTML/CSS/JS	作品集、项目文档
动态网站	内容根据请求动态生成	前端 + 后端 + 数据库	在线工具、数据平台

2.2 静态网站快速搭建

对于设计专业的学生，最实用的方式是使用静态网站生成器搭建项目展示或文档站点。

MkDocs：用Markdown编写内容，生成美观的文档网站。

# 安装
pip install mkdocs mkdocs-material

# 创建项目
mkdocs new my-site
cd my-site

# 本地预览（浏览器访问 http://127.0.0.1:8000）
mkdocs serve

# 构建静态文件
mkdocs build

GitHub Pages：将静态网站免费部署到互联网。

在GitHub上创建仓库
将网站文件推送到仓库
在仓库设置中启用 GitHub Pages
即可通过 https://username.github.io/repo 访问

2.3 HTML/CSS/JavaScript 速览

HTML：页面结构

<!DOCTYPE html>
<html>
<head>
    <title>我的设计作品集</title>
</head>
<body>
    <h1>设计作品集</h1>
    <p>欢迎来到我的作品展示页面</p>
    <img src="design.jpg" alt="设计作品">
    <a href="https://example.com">了解更多</a>
</body>
</html>

CSS：页面样式

body {
    font-family: "Helvetica", sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #2c3e50;
    text-align: center;
}

JavaScript：页面交互

// 点击按钮时显示消息
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

2.4 前端框架简介

对于更复杂的Web应用，可以使用前端框架提升开发效率：

框架	特点	适用场景
Vue.js	渐进式框架，学习曲线平缓	交互式数据展示
React	组件化开发，生态最丰富	复杂单页应用
Streamlit	Python编写Web应用	AI模型展示、数据分析仪表板

Streamlit 示例（用Python快速构建AI展示页面）：

import streamlit as st

st.title("图像分类演示")
st.write("上传一张图片，AI将识别其中的内容")

uploaded_file = st.file_uploader("选择图片", type=["jpg", "png"])
if uploaded_file:
    st.image(uploaded_file, caption="上传的图片")
    st.write("分类结果：建筑（置信度 95%）")

# 安装并运行
pip install streamlit
streamlit run app.py

2.5 网站部署方式

方式	特点	费用
GitHub Pages	适合静态网站，免费	免费
Vercel / Netlify	支持前端框架自动部署	免费额度
云服务器（阿里云/腾讯云）	完全控制，适合动态网站	按需付费
Hugging Face Spaces	适合AI模型演示	免费额度

3 在线数据可视化

3.1 为什么需要数据可视化

设计领域的AI研究和实践经常涉及数据展示：训练损失曲线、模型性能对比、空间数据分析结果等。数据可视化将抽象的数字转化为直观的图形，帮助理解和决策。

3.2 Python可视化库

Matplotlib：基础绑图

import matplotlib.pyplot as plt

# 折线图
epochs = range(1, 11)
train_loss = [0.9, 0.6, 0.4, 0.25, 0.15, 0.1, 0.07, 0.05, 0.04, 0.03]
val_loss = [0.85, 0.65, 0.45, 0.35, 0.28, 0.25, 0.24, 0.23, 0.23, 0.24]

plt.figure(figsize=(8, 5))
plt.plot(epochs, train_loss, 'b-o', label='Train Loss')
plt.plot(epochs, val_loss, 'r-s', label='Val Loss')
plt.xlabel('Epoch')
plt.ylabel('Loss')
plt.title('Training vs Validation Loss')
plt.legend()
plt.grid(True, alpha=0.3)
plt.savefig('loss_comparison.png', dpi=150, bbox_inches='tight')
plt.show()

Seaborn：统计可视化

基于Matplotlib，提供更美观的统计图表。

import seaborn as sns

# 热力图：相关性矩阵
import numpy as np
data = np.random.randn(10, 10)
corr = np.corrcoef(data)

sns.heatmap(corr, annot=True, cmap='coolwarm')
plt.title('Feature Correlation Heatmap')
plt.savefig('heatmap.png', dpi=150)

Plotly：交互式可视化

支持鼠标悬停、缩放、导出等交互操作，适合Web展示。

import plotly.express as px

# 交互式散点图
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length",
                 color="species", size="petal_length",
                 title="Iris Dataset Scatter Plot")
fig.write_html("scatter.html")    # 导出为网页
fig.show()

3.3 在线可视化工具

无需编程，通过网页界面即可创建可视化：

工具	特点	网址
Observable	JavaScript驱动的交互式笔记本	observablehq.com
Flourish	拖拽式数据可视化，模板丰富	flourish.studio
Datawrapper	适合制作新闻级图表	datawrapper.de
Tableau Public	强大的商业智能可视化	public.tableau.com
ECharts	百度开源的交互式图表库	echarts.apache.org

3.4 地理空间可视化

设计领域经常涉及地理和空间数据的可视化：

工具	特点	适用场景
Folium	Python地图可视化库	在地图上标注数据点
Kepler.gl	Uber开源的大规模地理数据可视化	城市数据分析
Mapbox	自定义地图样式	设计精美的交互地图
QGIS	开源GIS桌面软件	空间分析与制图

Folium 示例（在地图上标记位置）：

import folium

# 创建地图（以某坐标为中心）
m = folium.Map(location=[39.9, 116.4], zoom_start=12)

# 添加标记
folium.Marker(
    [39.9, 116.4],
    popup="设计学院",
    icon=folium.Icon(color="blue", icon="info-sign")
).add_to(m)

# 保存为网页
m.save("map.html")

3.5 可视化设计原则

原则	说明
选择合适的图表类型	比较→柱状图，趋势→折线图，占比→饼图，关系→散点图
保持简洁	每张图只传达一个核心信息，避免过度装饰
使用合理的色彩	同类数据用同色系，对比数据用对比色，注意色盲友好
标注清晰	标题、轴标签、图例、数据来源缺一不可
交互增强	在线可视化支持筛选、缩放、悬停查看详情

9.2 KiB Raw Blame History Unescape Escape