1e41f4b71Sopenharmony_ci# Annotated Drawings 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciAn annotated drawing transfers detailed attributes of each element on the UI to developers so that they can implement UX design via coding. The attributes of UI elements include the color, size, font, rounded corner, spacing, shadow, blur, scaling, components used, adaptive layout, and responsive layout. Generally, annotated drawings are in JPG or PNG format. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciIn excellent deliverables, annotations for different types of attributes have the same font size and different colors. They do not overlap each other and are visually separated from the effect drawings. Generally, the number of annotated drawings is the same as that of effect drawings for key UIs. In the case of a complex UI, multiple annotated drawings can be provided for one effect drawing to clearly describe the specifications. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ciWith the evolution of design and development tools, some tools in the industry can automatically identify UI element attributes, create annotations, and export effect drawings (generally in HTML format) that can dynamically display annotations. You can use these tools to output annotated drawings during the design of OpenHarmony applications. However, you must confirm mandatory layered parameters and create annotations for them. 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci 13e41f4b71Sopenharmony_ciIn addition to parameters that strongly depend on service design, such as size and spacing, you are advised to use layered parameters to implement other attributes such as color, font, rounded corner, shadow, and blur. 14e41f4b71Sopenharmony_ci 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ciAnnotated drawing example 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci 20
