- Original Address: Micro Design Systems - Breaking at The Monolith
- Original author: Paul Van Oijen
- Translation from: Nuggets Translation Project
- Permalink article: github.com/xitu/gold-m...
- Translator: Charlo-O
- Proofreaders: Wangalan30
It is time to improve our design system and prepare for the future.
Designers like to talk about the single source of the truth . A unique and versatile solution that forms the basis of everything we do. A ubiquitous, all-encompassing system.
Design system.
However, this centralized, unified way to organize and record all things design is the best way to do it? I do not believe it.
Of course, the design of the system configured as a one-stop repository sounds great. It may start work, but our team will continue to grow. With the growth of our products, the number of designers are also increasing. Soon, there are more than a dozen - or dozens - designers working on the same system.
At this time, the system as a whole will begin to break, with the expanding scale of the system gradually collapse. With the addition of each use case, or documented design patterns, its charming appearance began to fade.
Providing designers with micro-services
In recent years, micro service was a great momentum. It has been Uber , Netflix and Amazon platform offers such large and complex services as the best way to scale the complexity of the system architecture solution, which is also very easy to see the source of its popularity.
For people who are not familiar with this term, Amazon will be described as micro-services:
Micro-architecture and organization service is a method of software development, software developed by small independent service which communicates through a well defined API components. These services are the responsibility of the various small independent teams.
[...] micro-service architecture makes applications easier to extend and develop faster, to accelerate innovation and reduce time to market for new features.
AWS - What micro service?
Micro service allows service engineering team will split into small self-run function modules. In the past, companies often build a single system architecture, and now they are increasingly inclined to build a self-contained service. This enables them to reduce dependence build systems faster in innovation, easier scaling function modules, and maintain a stable pace of progress.
Our fellow developers are increasingly adopting the idea of micro-services. And when they abandon their single system, our designers will still be a single "all along" type of system design as the standard.
With this in mind, I suggest we should design our system modeling, to form a group of individual, goal-driven service. We can follow the concept of micro-services, to build a system on top of each other, and gradually increase the build speed. Also, it will reduce our dependence on a single point of failure.
Break our system
When we in the modular system, each component into a separate gear on a larger machine, according to our use of these services, and the source of dependence on other services to classify them is beneficial. Through a clear definition of the particular type of service constitute done, we were able to more easily determine the timing extraction service. The extraction process after the formation of this difficult omitted.
We can define three from the outset on the type of service . With the continuous development of our design system, which may be emerging.
- **core. ** basis for each design system.
- ** Ext. ** These services extend the core services of a particular element or group of elements. They are embedded additional properties, typically for a few specific use cases.
- **frame. ** framework is purposeful service, can be reused in our products. They consist of several interrelated parts.
At this stage, it still sounds rather vague. Let's look at each one by a different type of service. In the process, I will illustrate the relationship between them may contain elements and services.
A strong core
In the center of each design has a system 核心. We all start from this core, drawn with cases, define their models and lay the foundation for our products.
This is a team of designers will each contribute, learn and iterative service. Our core contains the basic elements, such as 颜色, 图标, 间距and 排版. In addition, we can define the components across the entire product. Each component designers will use. 输入, 复选框, 按钮Or 下拉菜单other elements may be present in every part of the product.
Because each designer will draw from the core, so it is to establish and maintain certain quality standards is essential. After all, our design system, any changes made to these sections are likely to affect every area of our products.
Please note that the core is not clear naming convention. Whether 核心, , 基础, 蓝图as you and your team preferences. Just make sure that they form part of our basic product, it is important enough base layer.
Kernel extensions
扩展It borrowed or more elements from a component of our core services and expand its use. By embedding additional properties, they allow us to use these components to handle different types of use cases. These typically require complex problems in a particular context.
In the example above, we see a 表, which consists of a 表头and multiple 单元格components. This simple form we present a small amount of the same level of data points. Its purpose is to visualize the selected data classification.
But when we want to introduce more complex layer of what will happen? If we want to group different data points, or add more properties to the cell, for example 缩略图, how to do? We need to extend the original title display different levels. Similarly, the cell should be extended to expand or collapse operation comprises the data, and the line represents depth.
We may not be the product of each table would need to display such a complex level data. Therefore, if we want to insert each variant cell or header in the conventional core, we will soon make the design system expansion. In fact these components of our system, but not indispensable.
Instead, we can extend these elements extracted into a separate service. This allows us to iterate on existing elements, and build some additional properties in order to meet specific service requirements. At the same time, keep a minimum basis of functional units.
Object-oriented framework
框架It does not depend or extend existing basic elements. Instead, they contain a series of elements that have a common purpose. Their main goal is to simplify the design process and accelerate design iterations.
The above example demonstrates a 侧栏framework. Sidebar our examples contain the components used to construct it. The title product represents a page or a general-purpose area, a sub-header packet and the content of the different navigation component.
Framework of the different elements are bound together in a common purpose. It does not make much sense themselves. If you do not rely on the entire framework, they can not communicate their intentions. This is the difference between them and within our core basic elements. Our such 按钮components can be individually convey a specific function. Without relying on the help of other parts of the system to determine their use.
Extracting benefits framework is to maintain the core of the lightweight and agile. These different elements can be constructed so that any designer in our team are more likely to understand what the intended function of an element yes. This avoids naming convention complex needs.
Although existing expanded borrowed element and insert an additional layer of complexity, but the frame from the outset to establish a more complete and interrelated packages. Thus, it will move to a separate service number results in linearly moving the core member decreases.
More and more services
With the development of our products, our design system continues to expand in size and scope. Single approach will soon become unwieldy. Knowing this, we should take the initiative to extract the different elements for the purpose of service.
In a perfect world, the number of different services with the development of our products will increase. Element will periodically fluctuate between the core and foundation of our independent service. So, we either each time their scale enough to destroy the foundation when they are extracted, either deliberately done so from the beginning.
We will move to a separate element of the module, so as to leave more space experiments. The core because of its universality, has always maintained the highest standards, and those small, a number of predefined range of other services, was exploring different possible.
Broaden the scope of
Sometimes we encounter various elements of the design of the system, they are neither suitable nor appropriate extension framework. This is good. Architecture that plan, which is to have a better space for expansion. This means that if we see a special demand for them, we can add additional service type.
A service type that we may encounter 模式. We have defined built on top of existing components and add them to expand their functions. Similarly, the framework also have a common purpose. But the pattern does not display these attributes.
In the example above, there is an 卡片example of pattern. It consists of several elements, these elements do not meet any type of service we defined earlier.
Other elements are the container essentially on the card. As shown in the above three examples, they may comprise a number of different components, almost no force element. The actual bare card - 背景, 边框and 间距a combination - is likely to be an essential element.
The content itself is not bound together by a single shared purpose. Illustrations, photographs, video and buttons can appear in multiple places our products. They may appear in different settings, whether they have not used the card as a container. Thus, the mode is neither extended nor frame.
Instead, they are used as building blocks or guidelines. Their purpose is to piece together how the layout composition and a different portion of the interface provides a frame of reference. They will function as a template for a starting point, not the end to end solution.
Therefore, it is easy to see, as we continue to expand further on the design of the system, we will encounter no use cases classified according to the type of service we started with. This is the crux of the problem.
Our system is not rigid, the whole single category. Instead, they consist of different services from the product development process. Different organizations and businesses require different types and classification. When defining the type of service that exceeds our initial setup, we have to begin to question their classification and hierarchy.
Shortcoming
As with any method, this method also has its drawbacks. In the construction of these micro-system design problems that plague micro services will also appear here.
The biggest drawback micro-services architecture is that, with respect to a single application, its complexity greatly increased. For application-based services for micro, directly related to the number and complexity of services.
Phil Wittmer, Tiempo Development
The main disadvantage is the complexity of our system. More and more different services means that the responsibility for maintaining these services is decentralized, rather than centralized. In addition, it forces us to make the decision, consciously extract elements from existing core services. This means that we need dedicated resources allocated for this purpose.
This of course is a disadvantage, but it also brings some benefits. Diffusion of responsibility to maintain different services means less individual workload. While at the same time, it is able to maintain a certain degree of independence in the extraction services, prompted us to ensure a high level of operational quality core. This independence allows us to develop these extracts at a faster rate. Therefore, we can be innovative and feature development.
Fortunately, for us designers, recently developed design tools enable us to implement this approach in a fairly efficient manner. Like Abstract Such tools support model out of the box, allowing the user to plug and play different inserted gallery in each project. Therefore, we can easily assign different extensions and frameworks needed for the project.
Finally, micro-design system is not truly micro-services. Micro services can achieve full independence, and our design systems still rely on a certain degree of interconnection. Extended still borrow core services, our function is still dependent on several levels of connection. These contacts in the next period of time will exist. The nature of the design work - for the purpose of an inferior race, front-end development - are bound by nature.
Were in control, the relationship between these elements enhance the visual consistency of the same also to varying degrees. Any given interface program may consists of several elements, these elements borrowed from different services. So that these services are different in the visual, thus immediately become clear.
Since many of our design system is still in its infancy, now is the time for us to work matured up. By modeling, classification and extraction system in the different services we promote themselves facing problems related to the nature of the different components, prepare for the future as their base set quality standards, and.
Our tools have changed the way we think works for paving the way. In order to establish a shared language, based on the design of our systems better.
If you find there is a translation error or other areas for improvement, welcome to Denver translation program to be modified and translations PR, also obtained the corresponding bonus points. The beginning of the article Permalink article is the MarkDown the links in this article on GitHub.
Nuggets Translation Project is a high-quality translation of technical articles Internet community, Source for the Nuggets English Share article on. Content covering Android , iOS , front-end , back-end , block chain , product , design , artificial intelligence field, etc., you want to see more high-quality translations, please continue to focus Nuggets translation program , the official micro-blog , we know almost columns .
Reproduced in: https: //juejin.im/post/5d0335395188255ee806a5da