Before you start reading
This guide is designed to help designers design UI quickly and uniformly. It has fixed rules for design and is particularly helpful for UI design of mobile applications, although I find it also useful for responsive web design. Like many design guidelines, these examples may be more helpful to bring into the design than to read alone.
Ready to start
Code > prototype
When designing apps and prototype tools, it allows you to create some strange UI visual styles. However, in Internet product design, the only purpose of the model or prototype is to clearly convey the proposed solution to the public and developers. Finally, only the content that developers can implement (combined with assets) in the code can be displayed on the product.
Now, almost any design you can do with design software can be implemented in code. However, there will be some problems. Judging from the availability, project time and performance, some designs are not landing well.
The most important thing is the way your design is presented on the client side. Therefore, you can't just perfect the layout in sketch or Photoshop, and reduce the time between conception and code as much as possible.
Box model
Box model is a method to describe the size and spacing of elements. It is composed of four components: border, margin, spacing and the size of the element itself.
Border: the thickness of the stroke around the edge of an element. Most design tools do not allow this to affect overall spacing and dimensions.
Padding: the space between the boundaries of an element and its child elements.
Margin: the space between an element and the boundary of adjacent elements.
What is point (PT)?
Point (PT) is a spatial measurement unit that depends on the screen resolution. The simplest explanation is that 1pt = 1px at 1x resolution (or @ 1x).
At 2x resolution (@ 2x), 1pt = 4PX, because the resolutions of x-axis and y-axis are doubled, making it 2px wide and 2px high.
At 3x resolution (@ 3x), 1pt = 9px (3px x 3px), and so on.
@1x
Please note that everything here is @1x designed@ 2X, @ 3x and all other variables can be obtained more easily from @ 1x than from the design of its multiples.
For example, to get the clear effect of @ 3x design (assuming the line thickness is even) from @ 2x design, you need to scale the design work to 50% of the original size (to 1x), and then scale the final design work to 300%.
On the other hand, @ 1x design can be easily and clearly reduced to any integer multiple - @ 2x, @ 3x, @ 4x, etc.
You can also add more details to icons and designs at each resolution, but there are relatively few opportunities to do so. In most cases, for speed and convenience, the ideal way to work is @1x.
Use pixel grid
Each UI element you create should be aligned with the pixel grid. This is a concept called pixel integration, which ensures that all your design elements can be clearly displayed and defined on the user device.
Text element
Elements such as text are almost the most important part of the interface, but when the text size and line height need to maintain vertical alignment and readability, they can not fully comply with the same UI grid as other design elements.
Setting a text baseline for your text elements is a good way to make your design vertically consistent. By positioning each line of text on a evenly spaced baseline, you can easily align UI elements in a harmonious vertical alignment.
Most platforms have some basic design principles, but breaking the default font may bring unpredictable results, so be careful when laying out text, and then use it as the basis for laying out other elements.
8pt grid
basic principle
Use multiples of 8 to define the dimensions, spacing, and margins of component elements and child elements.
When the only content of a component element is text (for example, a button), set the text to a size consistent with the rest of the UI and / or platform rules, and then use padding to determine the size of the block element. In the case of full width elements, padding is used to determine the consistent margin of height and width.
Two methods
There are actually two good versions of this system.
One is to place elements in the grid defined in increments of 8pt displayed by the system (we call itHard grid method）The other is to simply measure the 8pt increment between individual elements (we call itSoft mesh method)。
The main argument of the hard grid approach is that by using additional transparent background elements and then grouping them into group foreground elements, you can track the margins and fills of each element and bind these containers to the grid like bricks. Design material - everything has been designed into a 4-point grid - naturally conforms to this method.
The argument of the soft grid approach is that when writing interfaces, it doesn't matter to use the actual grid, because programming languages don't use this grid structure -- it's discarded. When the loading speed is the priority of high-quality and programmable model set, bypassing the extra workload brought by the hard grid method, the soft grid method will have the advantages of smoother and smaller structure. This is also more suitable for IOS because many system UI elements are not defined by a uniform grid.
Why is it important
Unity of UI
When all your metrics follow the same rules, you will automatically get a more consistent UI.
Less decision = less time
By removing seven of every eight space options, you reduce the number of operations available and subsequently slow down your code.
Multi platform design
Regardless of shape, the most popular screen sizes are divided by 8 on at least one axis - usually both axes. In addition, some platform style guides (such as material design) specifically require a grid of 4 or 8 points, which is very suitable for using this system.
Some screen sizes are difficult to adjust (375 x 667 points for iPhone 6), but the solution is actually very simple. Keep the size of padding and margin consistent, and reduce / increase the size of component elements to fill the remaining space. If it keeps the grid consistent, you can design elements specifically. Remember that your users may never see the actual units of measurement you use.
Recommended implementation
Mesh to its
Almost all design applications have a grid option. If you are using the hard grid method, it will certainly make your work easier. In any case, if you have the align pixel grid option, you need to make sure it is enabled.
Grids and variables
If you set your text size to 16, you can use it easily. 5rem increments build your layout on an 8-point grid.
Define your grid
Most applications are designed to allow you to adjust tuning values. I use one in sketch called nudg It application, adjust my number from 10 to 8. This is a very simple application that makes your entire workflow faster and easier.
Shortcut key
Many applications have shortcuts that allow you to quickly fine tune, resize, and position Venus. I strongly recommend learning them - especially minor position and size adjustments.
Specification Icon
Icons usually need different sizes to maintain the same visual weight. A frame is placed around them, just like the hard grid method, which defines the element size. This is a simple method to keep the measurement consistent and allow the defined parameters to change.
Zoom in and out
If you slow down to 1600%, you may misjudge the vertical alignment rhythm. On the contrary, if you zoom out to 50% to view the UI, you may miss important details, such as pixel matching. Always adjust your zoom to make sure you see the whole picture.
Powered by Froala Editor
