This file presents the underlying mapping and resonance mechanisms among aesthetics, visual psychology, screen design (design composition), and IT engineering planning (SDLC / computational thinking) through intuitive Mermaid charts.
1. The “Whole is Greater than the Sum of its Parts” Gestalt Isomorphism Relations Map
This chart illustrates how a holistic instinct transcending the sum of parts spontaneously emerges in various domains when discrete sub-elements are combined.
graph TD
%% Core Concepts
Root["The Whole is Greater than the Sum of its Parts
(Gestalt Isomorphism Mechanism)"] --> P_Psych["Visual Psychology
(Perceptual Dynamic Reorganization)"] Root --> V_Design["Screen Design
(Compositional Order of Design)"] Root --> Aesthetics["Philosophical Aesthetics
(Sensible Transcendence of Experience)"] Root --> IT_Plan["IT Engineering Planning
(Emergence of Logical Encapsulation)"] %% Visual Psychology Branch P_Psych --> Psych_1["Closure Principle (Closure)
Brain fills in gaps and blank space"] P_Psych --> Psych_2["Continuity Principle (Continuity)
Lines of sight move along smooth paths"] P_Psych --> Psych_3["Proximity & Similarity Grouping
Spontaneously group discrete visual sources"] %% Screen Design Branch V_Design --> Design_1["Points, Lines, Planes
Minimal visual units & their tensions"] V_Design --> Design_2["Grid/Skeleton (Grid/Skeleton)
Standardized coordinates & physical boundaries"] V_Design --> Design_3["Laws of Formal Beauty
Rhythms of repetition/gradation/anomaly/contrast"] %% Philosophical Aesthetics Branch Aesthetics --> Aest_1["Hegel: Sensible Manifestation of the Idea
Art is the concrete carrier of infinite reason"] Aesthetics --> Aest_2["Ye Lang: Gestalt of Imagery
Subject-object fusion transcending physical media"] Aesthetics --> Aest_3["Zhu Liyuan: Aesthetic Practice
Shaping a well-rounded personality through aesthetics"] %% IT Engineering Planning Branch IT_Plan --> IT_1["5 Pillars of Computational Thinking
Combination-Abstraction-Repetition-Construction-Recursion"] IT_Plan --> IT_2["Hierarchical Architecture Encapsulation
Function -> Object -> Component -> Service"] IT_Plan --> IT_3["High Cohesion & Low Coupling
Module independence to cope with system changes"] %% Cross-Disciplinary Connections Psych_1 -. Neurological Reorganization .- Aest_2 Design_2 -. Spatial Constraints .- IT_2 Design_3 -. Formal Rhythm .- IT_1 Aest_1 -. Rational Concreteness .- IT_3 Psych_3 -. Perceptual Grouping .- IT_3 %% Styles style Root fill:#1a1c23,stroke:#6366f1,stroke-width:3px,color:#fff style P_Psych fill:#111827,stroke:#10b981,stroke-width:2px,color:#fff style V_Design fill:#111827,stroke:#3b82f6,stroke-width:2px,color:#fff style Aesthetics fill:#111827,stroke:#ec4899,stroke-width:2px,color:#fff style IT_Plan fill:#111827,stroke:#f59e0b,stroke-width:2px,color:#fff
(Gestalt Isomorphism Mechanism)"] --> P_Psych["Visual Psychology
(Perceptual Dynamic Reorganization)"] Root --> V_Design["Screen Design
(Compositional Order of Design)"] Root --> Aesthetics["Philosophical Aesthetics
(Sensible Transcendence of Experience)"] Root --> IT_Plan["IT Engineering Planning
(Emergence of Logical Encapsulation)"] %% Visual Psychology Branch P_Psych --> Psych_1["Closure Principle (Closure)
Brain fills in gaps and blank space"] P_Psych --> Psych_2["Continuity Principle (Continuity)
Lines of sight move along smooth paths"] P_Psych --> Psych_3["Proximity & Similarity Grouping
Spontaneously group discrete visual sources"] %% Screen Design Branch V_Design --> Design_1["Points, Lines, Planes
Minimal visual units & their tensions"] V_Design --> Design_2["Grid/Skeleton (Grid/Skeleton)
Standardized coordinates & physical boundaries"] V_Design --> Design_3["Laws of Formal Beauty
Rhythms of repetition/gradation/anomaly/contrast"] %% Philosophical Aesthetics Branch Aesthetics --> Aest_1["Hegel: Sensible Manifestation of the Idea
Art is the concrete carrier of infinite reason"] Aesthetics --> Aest_2["Ye Lang: Gestalt of Imagery
Subject-object fusion transcending physical media"] Aesthetics --> Aest_3["Zhu Liyuan: Aesthetic Practice
Shaping a well-rounded personality through aesthetics"] %% IT Engineering Planning Branch IT_Plan --> IT_1["5 Pillars of Computational Thinking
Combination-Abstraction-Repetition-Construction-Recursion"] IT_Plan --> IT_2["Hierarchical Architecture Encapsulation
Function -> Object -> Component -> Service"] IT_Plan --> IT_3["High Cohesion & Low Coupling
Module independence to cope with system changes"] %% Cross-Disciplinary Connections Psych_1 -. Neurological Reorganization .- Aest_2 Design_2 -. Spatial Constraints .- IT_2 Design_3 -. Formal Rhythm .- IT_1 Aest_1 -. Rational Concreteness .- IT_3 Psych_3 -. Perceptual Grouping .- IT_3 %% Styles style Root fill:#1a1c23,stroke:#6366f1,stroke-width:3px,color:#fff style P_Psych fill:#111827,stroke:#10b981,stroke-width:2px,color:#fff style V_Design fill:#111827,stroke:#3b82f6,stroke-width:2px,color:#fff style Aesthetics fill:#111827,stroke:#ec4899,stroke-width:2px,color:#fff style IT_Plan fill:#111827,stroke:#f59e0b,stroke-width:2px,color:#fff
2. The “Form Follows Function, Technology Blends with Art” Information Cybernetics Relations Map
This flowchart demonstrates how systems and interfaces combine physical design with logical architecture to achieve frictionless user experiences during “information control and cognitive load reduction.”
flowchart LR
subgraph Input ["Real-World Disorder & High Complexity (Physical/Logical)"]
Raw_Info["Massive Discrete Information / Trivial Business Logic"]
end
subgraph Design_Control ["Visual Level: Design Composition & Perceptual Mitigation (Formal Beauty)"]
direction TB
Grid_Layout["Grid Layout Alignment
(Planar Composition)"] Color_Psy["Color Harmony & Visual Psychology
(Color Composition)"] Gestalt_Filter["Gestalt Perceptual Classification
(Proximity/Similarity/Symmetry Principles)"] Grid_Layout --> Gestalt_Filter Color_Psy --> Gestalt_Filter end subgraph IT_Control ["System Level: Engineering Architecture & Logical Control (Scientific Beauty)"] direction TB SDLC_Plan["SDLC Lifecycle Model
(Feasibility/Use Case Analysis)"] Module_Enc["High Cohesion & Low Coupling Encapsulation
(Modular/Service Interfaces)"] Topo_Flow["Data Flow & State Control
(Topological Order/Class Diagrams/DFD)"] SDLC_Plan --> Module_Enc Topo_Flow --> Module_Enc end subgraph Synthesis ["Synthesis: Engineering Practice of Aestheticizing Everyday Life"] UI_UX["UI/UX Frictionless Interaction
(Color Space/Physical Motion Mapping)"] Cognitive_Ease["Cognitive Load Reduction
(Smooth Operation on Eye-Brain First Impression)"] Aesthetic_Heart["Aesthetic Cultivation & Flow
(Man-Machine Harmony & Elevation of Life Realm)"] end Raw_Info --> Design_Control Raw_Info --> IT_Control Design_Control --> UI_UX IT_Control --> UI_UX UI_UX --> Cognitive_Ease UI_UX --> Aesthetic_Heart %% Styles style Raw_Info fill:#374151,stroke:#9ca3af,stroke-width:2px,color:#fff style Design_Control fill:#064e3b,stroke:#059669,stroke-width:1px,color:#fff style IT_Control fill:#78350f,stroke:#d97706,stroke-width:1px,color:#fff style UI_UX fill:#5b21b6,stroke:#8b5cf6,stroke-width:2px,color:#fff style Cognitive_Ease fill:#1e3a8a,stroke:#3b82f6,stroke-width:1px,color:#fff style Aesthetic_Heart fill:#831843,stroke:#ec4899,stroke-width:1px,color:#fff
(Planar Composition)"] Color_Psy["Color Harmony & Visual Psychology
(Color Composition)"] Gestalt_Filter["Gestalt Perceptual Classification
(Proximity/Similarity/Symmetry Principles)"] Grid_Layout --> Gestalt_Filter Color_Psy --> Gestalt_Filter end subgraph IT_Control ["System Level: Engineering Architecture & Logical Control (Scientific Beauty)"] direction TB SDLC_Plan["SDLC Lifecycle Model
(Feasibility/Use Case Analysis)"] Module_Enc["High Cohesion & Low Coupling Encapsulation
(Modular/Service Interfaces)"] Topo_Flow["Data Flow & State Control
(Topological Order/Class Diagrams/DFD)"] SDLC_Plan --> Module_Enc Topo_Flow --> Module_Enc end subgraph Synthesis ["Synthesis: Engineering Practice of Aestheticizing Everyday Life"] UI_UX["UI/UX Frictionless Interaction
(Color Space/Physical Motion Mapping)"] Cognitive_Ease["Cognitive Load Reduction
(Smooth Operation on Eye-Brain First Impression)"] Aesthetic_Heart["Aesthetic Cultivation & Flow
(Man-Machine Harmony & Elevation of Life Realm)"] end Raw_Info --> Design_Control Raw_Info --> IT_Control Design_Control --> UI_UX IT_Control --> UI_UX UI_UX --> Cognitive_Ease UI_UX --> Aesthetic_Heart %% Styles style Raw_Info fill:#374151,stroke:#9ca3af,stroke-width:2px,color:#fff style Design_Control fill:#064e3b,stroke:#059669,stroke-width:1px,color:#fff style IT_Control fill:#78350f,stroke:#d97706,stroke-width:1px,color:#fff style UI_UX fill:#5b21b6,stroke:#8b5cf6,stroke-width:2px,color:#fff style Cognitive_Ease fill:#1e3a8a,stroke:#3b82f6,stroke-width:1px,color:#fff style Aesthetic_Heart fill:#831843,stroke:#ec4899,stroke-width:1px,color:#fff
3. Cross-Boundary Concept Comparison Table
For quick reference, the following table provides a scientific semantic mapping of isomorphic concepts across the four domains:
| Mapping Concept | Aesthetics (Aesthetics) | Visual Psychology (Gestalt) | Screen Design (Design) | IT Engineering Planning (IT Planning) |
|---|---|---|---|---|
| Elementary Unit | Aesthetic Qualia / Brushstroke | Visual Stimulus Point / Pixel | Point | Single Instruction / Metadata |
| Local Combination | Artistic Symbol / Formal Vocabulary | Perceptual Organization (Grouping) | Line & Plane | Function / Object / Database Table |
| Constrained Architecture | Imagery Structure / Artistic Boundary | Field Figure-Ground | Skeleton/Grid | System Hierarchy / Module Partition / Class Diagram |
| Dynamic Control | Evolution of Aesthetic Experience / Drama | Common Fate | Composition Laws (Gradation/Anomaly) | Control Flow / State Machine / Message Queue |
| Ultimate Emergence | Aesthetic Realm | Gestalt | Visual Rhythm | Highly Cohesive System-level Capability |
| Practical Pursuit | Elevating Life Realm / Shaping Personality | Perceptual Ease / Intuitive Identification | Cognitive Load Reduction / Visual Rhythm | System High Reliability / Agile Iteration / Maintainability |