Ziroom Illustration Component System 2.0
About The Project
As a critical component of Ziroom's product operation vision, illustrations have become a cohesive visual element in users' perceptions. They adeptly communicate Ziroom's space and service offerings, effectively portraying the brand's unique product features through compelling visuals.
The illustration system establishes a unified visual style grounded in consistent expressive forms. This encompasses cohesive visual attributes for characters, product visuals, colors, and guidelines. By employing defined rules, methods, standards, and resources, it empowers designers to deliver systematic, high-quality, and efficient design outputs.
Ziroom Illustration Component System 2.0 serves as a powerful tool for enhancing visual construction efficiency within Ziroom's space products domain. It encompasses various aspects including space product development, character design, combination techniques, and associated tools. Through this illustration system, designers can swiftly generate visually compelling designs that align with Ziroom's brand identity and meet commercial requirements.
· Component Library: Global Preview
Component design
Example component library
The example component library accurately restores the Youjia 6.0 and Whole Rental 4.0 series of Ziroom's core space products. By shaping the core space products, it can express product characteristics while rendering a strong sense of spatial presence.
Component design
Role component library
We believe that in the process of conveying the characteristics of space products, it is crucial to shape the status of the characters in the space. The character status directly reflects the strength of its sense of being brought into the scene, so we have created character designs that match their identification characteristics for Ziroom users, Ziroom businesses, and service providers, and have created and designed various high-frequency dynamics for this purpose, so that It can be used in many interactive scenarios.
Combination settings
Perspective, color and composition
The general component library is set based on Ziroom's core space products. By splitting the combined instances and matching the presentation status under different perspective angles, it can not only carry the product, but also build a scene atmosphere for the design of the screen.
Character setting
Unrestricted extension
In order to efficiently adapt to the high-frequency dynamics of various characters, in the character design of the Ziroom Illustration component system, we split each basic character into body components and clothing components. The clothing components can fit perfectly on the body components and follow the movement of the body components. The body components are set based on the human body joints, so that they will not be restricted by some exaggerated dynamics, and at the same time provide for the following. Character rigging animation lays the foundation for graphic movement.
Expression settings
Expression settings
In the character emotion library, we take the character's "confidence" state as the standard expression, and extend "happiness" and "anger" to the two extremes. The states from "happy" to "angry" are set in order: anger, anxiety, regret, tiredness, shyness, confidence, thinking, determination, joy, and excitement.
Practical cases
Introduction of efficiency tools
The biggest difference between Ziroom Illustration Component Library 2.0 and 1.0 is that the system has been moved online. Whether designers, operators or related system users who need efficient visual output, they can create operations that match their visual ideas through online editing and combination. materials. In the early system design, we designed an online graphical interactive interface for the component system to improve the graphic combination editing experience. At present, we have combined this idea with Ziroom's self-developed graphics system and successfully used it in daily production.
