[Material Design visual Design language] UI Component Design (6): separation line, visual Design ui

[Material Design visual Design language] UI Component Design (6): separation line, visual Design ui

Author: Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email: allenwells@163.com
Blog: http://blog.csdn.net/allenwells
Github: https://github.com/AllenWells

[Material Design visual Design language] Chapter list

[Material Design visual Design language]
[Material Design visual Design language] Material Design overview
[Material Design visual Design language] Application Layout Design
[Material Design visual Design language] adaptive application Layout
[Material Design visual Design language] Application Style Design
[Material Design visual Design language] Application animation Design
[Material Design visual Design language] UI Component Design (1): button
[Material Design visual Design language] UI Component Design (2): Card
[Material Design visual Design language] UI Component Design (III): Paper
[Material Design visual Design language] UI Component Design (iv): Table
[Material Design visual Design language] UI Component Design (5): prompt box
[Material Design visual Design language] UI Component Design (6): separation line
[Material Design visual Design language] UI Component Design (7): Grid
[Material Design visual Design language] UI Component Design (8): List
[Material Design visual Design language] UI Component Design (9): Menu
[Material Design visual Design language] UI Component Design (10): Selector
[Material Design visual Design language] UI Component Design (11): progress bar
[Material Design visual Design language] UI Component Design (12): Slider
[Material Design visual Design language] UI Component Design (13): Toast
[Material Design visual Design language] UI Component Design (14th): Tabs
[Material Design visual Design language] UI Component Design (15th): Text Box

Dividers is mainly used to manage and separate the content in the list and page layout, so that the content can generate better visual effects and space sense.

One separator Function

A separator is used to separate items without an anchor.

When there is no anchor element like an Avatar or icon in the list, spaces alone are not enough to distinguish each data item. In this case, the use of an equal screen width separation line will help distinguish between each data project. Make others look more independent and more appealing.

When you use separated sub-titles, you can place the separation lines above the sub-titles to enhance the correlation between the sub-titles and content.

Type of two separators: 2.1 equal screen width Separator

The same screen width separator can be used to separate each data item in the list or different types of content in the page layout.

2.2 Inner Concave Separator

In the title column with an anchor element (Avatar or icon) and a keyword, we can use an inner-concave separator.

Copyright statement: When we do one thing seriously, we can discover the endless fun. The rich technologies are like the scenery on the road and enjoy them while walking.