How Dynamic Design Language Shapes Modern UI: Lessons from ColorOS

Introduction

The U‑Share session invited motion‑design expert Sun Guoen (formerly OPPO motion‑team leader, now ByteDance project design lead and author of the "Dynamic Design Language" methodology) to share his talk titled "Transgenic Motion Designer".

01 What Is Dynamic Design Language?

The core of dynamic design language is the concept of phenomenon : using observable phenomena to convey feeling, which in turn shapes the temperament of a work. This approach forms a design philosophy rather than random effects; once designers adopt this mindset, they actively foster the development of an animation language.

Concept design is not arbitrary. Designers must first define the intended message and desired feeling (the motivation), then seek corresponding natural, cultural, or psychological phenomena as the starting point for design.

02 ColorOS Case Study

Background Insight : Users expressed dissatisfaction with OPPO UI, citing a lack of aesthetic appeal and animation transitions. By 2018, ColorOS 3.2 had been stagnant, and version 5.0 received poor feedback due to missing motion design. In contrast, the Find X special edition earned praise for its charging animation, navigation‑gesture animation, and icon design, highlighting the need for breakthroughs in animation experience and design language for version 6.0.

From Flat to 3D : After years of flat‑style fatigue, a global trend toward 3D design emerged. This new 3D is more abstract and concise than previous skeuomorphic styles.

Code Art Rise : Since 2014, creative‑coding art has flourished, with artists using code to generate patterned, animated visuals that blend abstraction with concrete forms, often carrying philosophical and aesthetic significance. Apple’s flagship store even hosted a "Creative Coding" workshop to promote the blend of technology and humanities.

Design Keywords : Aligning with ColorOS’s overall strategy of lightness, simplicity, and reliability, the keyword "borderless" was extracted to guide the creation of a dynamic design language.

Dynamic Design Language in ColorOS : ColorOS adopts two directions—flow and solid geometry—to satisfy its strategic goals. By identifying patterns in flow and geometry, the team implements a dynamic language that delivers a light, simple, and reliable user experience.

03 Knowledge Graph & Team Configuration

Dynamic design is an interdisciplinary field with a steep learning curve, making talent acquisition costly and time‑consuming. Recruiting composite talent is challenging; therefore, effective team configuration is essential. A specialized “task force” comprising experts from different domains collaborates closely to explore cutting‑edge interactive effects and maintain overall stylistic consistency.

Industry Trends

As the internet industry matures, product differentiation shifts from pure technical superiority to operational excellence. Emerging head‑mounted displays are poised to become the next technological pivot, ushering in an era where 3D design dominates. In head‑set environments, everything is inherently 3D and never static, pushing UI/UX development toward 3D‑game and 3D‑engine paradigms. Immersive mixed‑reality experiences will further promote a "de‑UI" approach.

Further Resources

For more on Sun Guoen’s dynamic design methodology, follow his content on:

Bilibili: @Guoen_0

Zhihu: @Guoen Sun

We thank Sun Guoen for his insightful presentation and invite readers to share questions or suggestions.