[Material Design visual Design language] UI Component Design (iv): Table and visual Design ui

[Material Design visual Design language] UI Component Design (iv): Table and 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

A table is a visualized grid structure used to display original datasets. It is usually used in desktop enterprise products.

1. table layout 1.1 Basic table of table Type 1.1.1

The basic table layout is as follows:

• List Header: 12 sp Roboto Medium, black 54%
• Table content: 13sp Roboto Regular, black 87%
• Text alignment: Alignment data column, left alignment text Column

As follows:

1.1.2 cards

Tables can be embedded into cards. Place navigation and data operation tools at the top and bottom.

Card table design method:

• Card Title: 20sp Roboto Regular, black 87%
• Card Operation icon: 24dp container, black 54%
• Foot Tab: 12sp Roboto Regular, black 54%

About the card table Header

Some table cards may require operations rather than headers with titles. In this case, there are two possible methods: display the continuous operation menu, or activate a Content Header when the entry is selected.

Design of the optional table header:

• OPERATION button: Use the borderless button to enable entry selection.
• Colored header: uses the second color of 50-value for the background. The number of selected entries is displayed. The available content icon is displayed on the selection of entries.

1.2 table specification 1.2.1 Vertical spacing

Vertical table Spacing:

• 1.64 dp Card Head height
• Height of the last line of 2.56 dp
• 3.48 dp data Row Height

1.2.2 top and foot padding

Horizontal inner spacing between elements in a data table card:

• The data table card has a 24 dp padding each week.
• Padding of 32 dp in the foot control menu

1.2.3 column padding

Padding between columns:

• The minimum padding between columns is 56 dp. The most wide entries (including data and column names) in a column define the column border.
• In the 24 dp icon container, the check box icon has 18 dp width and height.

Interaction between two tables: 2.1 hovering rows

A background is displayed when the user hovers to any position in a row. If some cells have a special hover status, the status of both cells and rows is displayed.

• Hover Background: Gray 200 (# EEEEEE)

If you need to define the column name, a prompt text is displayed when hovering. If sorting is possible, a bright sorting button is displayed when hovering, indicating that this column can be sorted.

• Prompt text: Follow the prompt text Guide
• Sort button: 16dp container, black 26%

2.2 select a row

When a row is selected, the background is used in the current row.

• Selected row Background: gray 100 (# F5F5F5)
• Check box: Use the second application color

2.3 arrange rows

If the column sorting function is enabled, the most important data is arranged by default, and the sorted status is displayed in the column header. If you click a sorted column, the sorting order is reversed and the sorting icon is rotated.

• Sorting column name: 12sp Roboto Medium, black 87%
• The sorting icon is 16dp container, which is 87% black.

2.4 edit row

A table may require basic text editing (for example, editing existing text content or adding comments ). You can use placeholder text to display editable fields in the table. You can use a simple edit dialog box with only one text box. Of course, you can also display a complete dialog component.

The placeholder text is as follows:

• Placeholder text: 13sp Roboto Regular, 26% black, no split line in the text box

2.4.1 small edit dialog box

The design of the small edit dialog box is as follows:

• Align the edge of the dialog box with the nearest split line, or the edge of the table.
• 24 left and right of dp
• Contains a single text box, app topic
• You can press the Enter key to confirm

2.4.2 large edit dialog box

The design of the large edit dialog box is as follows:

• Align the edge of the dialog box with the nearest separator or table edge
• Follow the dialog box guide to apply the app topic
• Click "save" to confirm the text.

2.5 Operation Lines

An inline menu is used for row operations.

Inline Menu Design:

• 13sp Roboto Regular
• Black 87%
• Guide to menu space and size

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.