Foreword

01 What is flow design?

Flow design is one of the important updates of deepin 23. Flow design focuses on simplicity, friendliness, and vitality" principles **. From icon repainting to new color palettes, from shadow and blur optimization to overlaid background saturation, and from layout and controls to animation design, all of them are natural and proper.

In the Alpha version, the key for flow design - the control library dtkdeclarative" will also be released, which provides theme styles and development interfaces that are seamlessly integrated with the operating system, and is specially designed for the next-generation deepin OS. Its declarative language framework makes UI development more efficient. If you're using deepin 23 preview, you might be able to build a "Hello, DTK" yourself!

Next, we will show you the origin of flow design, its design concept, and its control library to get a preliminary understanding of this new feature!

02 Where the flow design derives from?

From the visual design to the product interactions, we hope that the design is clear and concise, and the interaction is coherent, smooth, and full of vitality.

The design of deepin has always been strongly related to "water". As the so-called "floating clouds and flowing water", the clouds and water reflect and complement each other, that's where the name "Flow Design" comes from.

03 Concepts of flow design

• Useful first, beautiful next

The principle we are always adhering to is - function first, appearance next; useful first, beautiful next.

If a product is only beautiful but ignores the real needs, it is undoubtedly short-lived and illusory.

What is more, the design is not only for good looking, the most important is for easy-to-use. From products to buildings, from 2D to 3D, a good design must first focus on ease of use and then think about the attractive appearance.

• Simple and lightweight

For most users, the more complex the operating system and applications are, the more likely it degrades user experiences. So how to improve (or at least not degrade) user experiences while functions continue increasing?

Our solution is to carefully select requirements and create the most reasonable design for them . In UI areas that show many functions, we are trying to make the design as concise and lightweight as possible to decrease the psychological burden from a visual perspective.

• Keep flexible

Deepin users have different needs and their devices are diverse. Therefore, the design must be flexible to give better compatibility for different usage scenarios and satisfies lots of users.

A flexible design not only improves compatibility but also makes interactions unified to a great extent so that users can take advantage of existing experiences across devices and applications.

• Emotional design

All functional and interaction design is not for devices such as computers, tablets, and mobile phones, but for the people who use them.

We believe that the more emotions we put into the design, the more we can improve user experiences and enhance user trust in us.

For this reason, we bring the "mental model" in real life into products, trying to make product interactions meet the habits of all deepiners in the virtual world. If you can feel the emotions poured into by the designers, our ultimate goal is achieved!

04 Learn more about flow design

• dtkdeclarative- the control library

In deepin 23 Alpha version, the development control library for flow design - dtkdeclarative will be officially released!

What is dtkdeclarative? It is a control library for building native applications with flow-design styles. It develops the original dtkwidget module based on Qt Quick and Qt Qml basic framework, the code is learned from qtdeclarative, and it supports all controls of Qt Quick Controls 2.

What can it do? First, it provides DTK (Developer Tool Kit) with more color styles, visual effects, etc., such as palette customization, hardware-accelerated UI rendering, etc.; Second, it offers theme styles and development interfaces that are seamlessly integrated with deepin OS - the key point for being more developer-friendly.

If you want to build a "Hello, DTK" yourself, visit deepin wiki for more!

• Apps with flow design

In the deepin 23 Alpha version, applications using dtkdeclarative and the flow-design styles are Music, Album, and Image Viewer.

Articles and animation videos about them will be released gradually. Let's take a look at the below pictures first.

To know more about flow design, click "Read More" to go to the deepin forum (bbs.deepin.org) to communicate with us, and see more new changes in deepin 23!