modern_ui_design

现代 UI/UX 设计原理与实践

课程简介

本教程为资深工程师和AI科学家设计,从系统性和科学性角度深入探讨现代用户界面设计。我们将超越表面的视觉美学,深入研究设计背后的心理学原理、数学规律,以及与音乐、建筑等领域的跨学科联系。课程兼顾Web和移动端设计,提供从理论到实践的完整知识体系。

目标读者

章节概览

第一章:设计的数学基础与美学原理

chapter1.md

探讨设计中的数学规律:黄金分割、斐波那契数列、模块化网格系统。深入分析比例、节奏与和谐在视觉设计中的应用,建立设计的量化思维模型。

核心概念:黄金比例、模块化尺度、视觉张力场、数学美学


第二章:认知心理学与用户感知

chapter2.md

从认知科学角度理解用户行为:注意力机制、认知负荷理论、格式塔心理学。探讨米勒定律(7±2原则)、希克定律等在界面设计中的应用。

核心概念:认知负荷、视觉搜索模式、心智模型、感知组织原则


第三章:色彩理论与情感设计

chapter3.md

深入色彩的物理属性与心理影响:色彩空间(RGB、HSL、LAB)、色彩和谐理论、文化语义。探讨色彩在品牌识别和情感传达中的系统应用。

核心概念:色彩空间转换、对比度算法、色彩无障碍设计、情感色谱


第四章:排版系统与信息层级

chapter4.md

建立科学的排版体系:字体解剖学、排版节奏、垂直韵律。探讨中西文混排、响应式字体缩放、可读性优化的技术实现。

核心概念:基线网格、字体配对原则、排版尺度、视觉层次结构


第五章:布局架构与空间设计

chapter5.md

从建筑学借鉴空间概念:负空间理论、视觉重心、动态平衡。深入研究网格系统、弹性布局、自适应设计的数学模型。

核心概念:栅格系统、空间张力、视觉流动、响应式断点策略


第六章:交互模式与微交互设计

chapter6.md

系统化分析交互模式:直接操纵、渐进式披露、可供性设计。探讨微交互的时间设计、缓动函数、触觉反馈的心理学基础。

核心概念:交互状态机、动画缓动曲线、反馈循环、触发器设计


第七章:动效设计与时间美学

chapter7.md

将音乐理论应用于动效:节奏、节拍、和声在动画中的体现。探讨贝塞尔曲线、物理动画、性能优化的技术实现。

核心概念:动画编排、时间函数、运动路径、性能预算


第八章:信息架构与导航系统

chapter8.md

构建清晰的信息结构:分类学、元数据设计、寻路理论。深入研究导航模式、搜索策略、信息气味的认知原理。

核心概念:信息分类法、导航模式库、搜索界面设计、面包屑理论


第九章:响应式与自适应策略

chapter9.md

建立多设备设计体系:断点理论、内容优先策略、渐进增强。探讨容器查询、流体排版、跨平台一致性的技术方案。

核心概念:流体网格、弹性图片、媒体查询策略、设备能力检测


第十章:设计系统与组件化思维

chapter10.md

构建可扩展的设计系统:原子设计理论、设计令牌、组件生命周期。探讨版本管理、文档规范、跨团队协作的最佳实践。

核心概念:设计令牌、组件API、样式指南、设计系统治理


第十一章:无障碍设计与包容性

chapter11.md

实现真正的包容性设计:WCAG标准解析、辅助技术原理、认知无障碍。探讨自动化测试、ARIA实践、多模态交互的技术实现。

核心概念:可访问性树、语义标记、键盘导航、屏幕阅读器优化


第十二章:数据可视化与信息设计

chapter12.md

将复杂数据转化为洞察:视觉编码理论、图表语法、交互式探索。探讨认知偏差、数据密度、叙事可视化的设计策略。

核心概念:视觉变量、数据墨水比、图表选择矩阵、探索性数据分析


学习方法建议

  1. 理论与实践结合:每章都包含大量练习题,建议完成所有基础题后再挑战进阶题
  2. 跨学科思考:留意设计与其他领域的联系,培养系统性思维
  3. 工具辅助:虽然以原理为主,但建议配合Figma、Sketch等工具实践
  4. 持续迭代:设计是迭代过程,不断回顾和改进你的设计决策

推荐资源

必读书籍

在线资源

工具推荐

课程特色

开始学习

准备好了吗?让我们从第一章:设计的数学基础与美学原理开始,探索设计背后的科学原理。


本教程持续更新中,欢迎反馈和建议。