![]() ![]() All the numbers are multiples of 8 and have a dynamic sense of rhythm. From a large amount of practices, we have extracted a set of arrays that can be used as dimensions for UI layout decision. In order to help designers of various levels to have consistency and similar rhythm in designing page layout, to unify designing language and reduce the restoration losses, Ant Design proposed the concept of UI common scales. Always use beginning column and ending column to define blocks.ĪntFin's projects cover a large number of products of different types and even different orders of magnitude.Delivery of critical numbers (Gutter, Column).Clear definition of dynamic layout area.Differences of the perspectives are likely to cause deviations that ultimately affect the degree of visual restoration, which in turn increases communication costs.Īnt Design's designers keep the following 4 things in mind in the communication with engineers: We set the value of the Gutter of the grid in the page, such that when the browser expands or shrinks in a certain range, the column width of the grid will expand or shrink accordingly, but the width of Gutter is always fixed.įor developers, the grid is a way to achieve dynamic layout, however the designer's understanding of the grid is derived from the grid in the graphic design. Taking the structure of the 1440 top-bottom layout as an example, the content area with a width of 1168 is divided into 24 grids, as shown in the following picture. RasterĪnt Design uses a 24-grid architecture. Grid system thinking can help designers quickly achieve design decisions in the layout space while simplifying communication between designers developers. ![]() The base unit of the grid is 8, which not only matches the even number of ideas but also matches most mainstream display devices. Grid UnitĪnt Design uses the grid system to achieve the order of the visual system. The above are just two simple adaptation ideas, the actual design of a perfect adaptation program requires the designer to have front end perspective, plane composition perspective and interactive perspective. After the blanking area reaches the limit value, the intermediate main content area is dynamically scaled. The practice is to define the minimum value for the marginal areas on both sides. Left-Right LayoutĬommonly used in design schemes for left and right layouts, the common practice is to fix the left navigation bar and dynamically scale the right work area.Ĭommon used in design schemes for top and bottom layouts. Some devices still have resolution of 1280.Īnt Design's two typical adaptation type: 1. According to statistics, mainstream screen resolution includes 1920, 1440, and 1366. Decision needs to made for things like whether a system needs to be adapted depends on the specific situation, and/or what are the blocks that needs dynamic layout. In the design process, the designer also needs to establish the concept of adaptation. E.g., the unified design board width of the ant design team is 1440. In order to minimize communication cost, it is necessary to unify the size of the design board within the organization. While defining the layout system in a visual system, we propose to start from the following 5 aspects:: We were inspired by the architectural ethic of the architect Le Corbusier and explored the dynamic spatial order in UI design and formed the interface layout of Ant Design based on the principle of 'beauty of order', making it possible for designers to create spatial layout that comes with rational beauty. The difference from traditional graphic design is that the layout space of UI interface should be based on the dynamic and systematic perspective. Spatial layout is the starting point of systematic visual design.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |