Chapter 5 Cross-Domain Practical Guide: UX-Oriented IT System UI/UX Development Life Cycle Guidelines

5.1 Cross-Domain Engineering Guidance for Various Phases of the Software Life Cycle

5.1.1 Feasibility Study and Investigation Phase: Injecting Sensory Experience and Aesthetic Education Evaluation

In the initial stage of the software life cycle, traditional engineering planning primarily describes physical elements and data flows by drawing system flowcharts, writing feasibility analysis reports, and performing cost/benefit analyses.

In cross-domain practical applications, feasibility studies must transcend single economic and technical indicators, introducing the theories of the "aesthetic turn" and the "aestheticization of everyday life" in contemporary aesthetics. Evaluating "whether users can receive the cultivation of aesthetic interest and the elevation of life realm when operating the system" is introduced as one of the feasibility evaluation criteria for the system’s non-functional requirements.

5.1.2 Requirements Gathering and Analysis Phase: Leveraging Gestalt Principles to Define System Interaction Boundaries

The core of the requirements analysis phase is to establish clear system logical boundaries through requirements gathering. We can directly introduce the visual organization laws of Gestalt psychology into requirements analysis models, utilizing use case diagrams and data flow diagrams:

  • Application of the Figure-Ground Principle: Precisely defining "Actor" and "System" to distinguish who is the "figure" of active interaction and who is the "ground" carrying the operation.
  • Abstraction of the Common Fate Principle: The common fate principle points out that objects moving together are perceived as belonging to the same group or being related. When planning microservice interfaces, front-end component interactions, or complex dynamic motion requirements, we must analyze which data entities and interface elements logically belong to combinations with "the same motion trend."

5.1.3 System Overall and Detailed Design Phase: Three Major Compositions and Gestalt Layout Control

In the detailed design of UI/UX, the encapsulation of logical components should directly map to the basic formats of points, lines, and planes and the grid skeleton in screen design:

  • Reorganization of Points, Lines, and Planes: Buttons and icons are "points" that guide sight coordinates; dividing lines and text trajectories are "lines"; content blocks are "planes" that control the distribution of physical gravity.
  • Control of the Grid Skeleton: The detailed design should use a rigorous grid skeleton to constrain the coordinates of points, lines, and planes.
  • Precise Execution of Gestalt Principles: Implementing the continuity principle (guiding the user’s line of sight through alignment design) and the closure principle (using local gaps to induce the user’s eye-brain system to automatically fill in the blanks when designing system icons).

5.1.4 Software Testing and Maintenance Phase: Dual Verification of Cognitive Load Reduction and Functional Integrity

In addition to executing conventional white-box, black-box, and object-oriented testing, professional "aesthetic and cognitive testing" should also be introduced:

  • Symmetry & Simplicity Testing: Verifying whether the interface conforms to the Gestalt symmetry & simplicity principle, ensuring that the user’s first impression can receive information efficiently.
  • Figure-Ground Contrast Testing: Detecting whether the background is scientifically masked or blurred when pop-ups appear.
  • Visual Non-Interruption Maintenance: The addition of new features must not damage the "visual continuation feeling" of the original interface, ensuring that the system still maintains the integrity of its Gestalt principles.

5.2 Comprehensive Case Analysis: Deconstructing the Underlying Logic of Successful Interaction Systems

5.2.1 Case 1: WeChat’s Discovery Page—Soft Partitioning Practice of "Proximity" without Physical Dividers

The "Discovery" page of WeChat adopts the proximity principle of Gestalt. By widening the horizontal and vertical margins between functional items, a soft partition is made without explicit dividing lines. Users automatically perceive that items closer to each other form a group, significantly reducing the cost of information acquisition.

5.2.2 Case 2: Mail Interfaces—Modularized Perception of the "Similarity" Principle

In mail interfaces, since each mail slot shares common visual elements (sender avatar, subject, brief preview, date, etc.), highly similar logical cards are formed. This strong similarity feature triggers the human eye’s similarity principle, enabling users to instantaneously classify multiple pieces of heterogeneous information during large-scale scanning.

5.2.3 Case 3: Apple’s iOS App Deletion—Gesture Animation under the "Common Fate" Principle

When long-pressing an application on an iPhone in preparation for deletion, all icons shake simultaneously. This utilizes the common fate principle of Gestalt. It directly embeds the system control information of the underlying "editable state" into the user’s subconscious mind through a visual perception magic of synchronized motion.

5.2.4 Case 4: IBM’s Classic Logo—The Magic of "Closure" and "Continuity"

Physically, this logo is merely a series of entirely discrete, horizontally equidistant, parallel blue bars. However, the human eye spontaneously executes the closure principle and continuity principle. Our visual system automatically attempts to perform "visual continuation" and "blank filling" on the edges of these non-closed parallel bars, perceiving them as complete three-dimensional letters rather than eight isolated, broken blue horizontal lines.