Web 创建与设计指南
Web 开发（Web Development）与 Web 设计（Web Design）共同构成了现代网站的核心。简单来说，前者负责功能实现（HTML/CSS/JS + 后端 + 数据库），后者关注视觉与体验（UI/UX）。两者结合，才能打造出既美观又实用的产品。
1. 完整工作流程
一个标准的 Web 项目通常经历以下阶段，每个环节都至关重要：
1.1 需求分析
明确网站定位、目标用户群体及内容结构。是用于展示信息、电商销售还是系统管理？这决定了后续的技术选型。
1.2 信息架构 (IA)
规划网站导航结构、分类方式及内容组织逻辑，确保用户能轻松找到所需信息。
1.3 原型设计 (UX)
在动手写代码前，先通过线框图（Wireframe）和流程图（User Flow）梳理功能布局。常用工具包括 Figma、Sketch、Axure 或 Adobe XD。
1.4 视觉设计 (UI)
确定风格（如极简、扁平、商务），规范字体、颜色、图标及间距。输出高保真设计稿是前端开发的依据。
1.5 前端开发
将设计稿转化为浏览器可识别的代码。核心三件套 HTML、CSS、JavaScript 必不可少，配合 React、Vue 等框架提升效率。
1.6 后端开发
处理服务器逻辑、数据接口（API）、安全验证及业务逻辑。常见技术栈包括 Node.js、Python (Django/FastAPI)、PHP (Laravel) 或 Java (Spring Boot)。
1.7 数据库
存储和管理数据。关系型数据库如 MySQL、PostgreSQL 适合结构化数据，MongoDB 适合文档存储，Redis 则常用于缓存加速。
1.8 测试与部署
进行功能、界面、性能及安全测试。上线时需配置 Linux 服务器、Nginx/Apache 反向代理，绑定域名并启用 HTTPS。
1.9 维护
定期备份数据、修复 Bug、更新安全补丁及优化 SEO，确保网站长期稳定运行。
2. UI/UX 设计核心
2.1 UI 设计要素
- 配色方案：品牌色、辅助色与背景色的搭配。
- 字体系统：统一字号层级与字重。
- 布局：利用 Grid 或 Flexbox 构建响应式结构。
- 视觉风格：推荐 Minimal、Flat、Material Design 等成熟体系。
2.2 UX 设计原则
- 简洁性：减少不必要的干扰元素。
- 一致性：保持交互逻辑与视觉风格统一。
- 可用性：按钮是否可点？表单是否易填？
- 反馈明确：加载状态、操作提示需清晰可见。
3. 前端基础速览
3.1 HTML 结构
语义化标签能让代码更易读，也有助于 SEO。
<header>头部导航</header>
<main>主要内容区域</main>
<footer>页脚版权信息
