"Material Design Visual Design Language" UI Component Designer (iv): Table

Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email:[email protected]
Blog: http://blog.csdn.net/allenwells
Github:https://github.com/allenwells

A table is a visual grid structure that shows the original data set, user-actionable, and often appears in desktop enterprise products.

Layout of a Table 1.1 table type 1.1.1 Basic table

The basic table layout is as follows:

• List Head : SP Roboto medium,54% Black
• table Contents : 13sp Roboto regular,87% Black
• text Alignment: Aligning data columns, left-aligned columns

As shown below:

1.1.2 The table in the card

The table can be embedded in the card. Place navigation and data manipulation tools at the top and bottom.

How the Card form is designed:

• Card title : 20sp Roboto regular,87% Black
• Card operation icon : 24DP container,54% Black
• Foot Part Page Tags : 12sp roboto regular,54% Black

About the head of the card table

Some table cards may require a header with an action rather than a caption. In this case, there are two possible ways to display a continuous menu of actions, or to activate a content header when the entry is selected.

Table Optional Head design method:

• Action button: Use the Borderless button to open the entry selection
• Shaded head: Use 50-value second applied color for background, display the number of selected items, display available content icon on entry selection

1.2 Table Specifications 1.2.1 Vertical Spacing

Vertical spacing of tables:

• 1.64 DP card Head height
• 2.56 DP's last line height
• Data row height of 3.48 dp

1.2.2 Head and foot inner margin

Horizontal inner spacing between elements in a data table card:

• Data Sheet cards have an internal margin of DP for one week
• The internal margin of the DP in the Foot control menu

1.2.3 Aligns margin

Inner margin between columns:

• The minimum padding between columns is a $ DP. The widest entry in the column (containing data and column names) delimits the columns ' borders.
• In the icon container of the DP, the check box icon has the width and height of the DP.

Interaction of two tables 2.1 hover row

Displays a background when the user hovers over a line. If an individual cell has a special hover state, the state of the cell and row is displayed.

• Hover background: Grey (#EEEEEE)

If you need to provide a definition of the column name, a hint text is displayed on hover. If it can be sorted, a bright Sort button is displayed on hover to indicate that the column can be sorted.

• Hint text: Follow the hint text guide
• Sort button: 16DP container,26% Black

2.2 Selected BOC

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

• Selected row background: Grey (#F5F5F5)
• check box: Use the second color of the app

2.3 Arranging rows

If the column sort function is turned on, the most important data is arranged by default, and the sorted state is displayed in the column header. If the user taps a sorted column, reverses the sort order and rotates the sort icon.

• Row sequence Name: 12SP Roboto medium,87% Black
• Sorted icons: 16DP container,87% Black

2.4 Edit Line

A table may require basic text editing (for example, editing an existing text content, or adding a comment). Include editable fields in the table, prompted by using placeholder text. You can use a simple edit dialog box with just one text box, or you can display a complete dialog component.

The placeholder text looks like this:

• Placeholder text: 13sp roboto regular,26% Black, no split line in text box

2.4.1 Small Edit dialog box

How to design a small edit dialog box:

• Aligns the edges of the dialog box with the nearest split line, or the table edge
• The left and right margins of the DP
• Contains a single text box to apply the app theme
• The user confirms by pressing the ENTER key

2.4.2 Large Edit dialog box

How to design the large Edit dialog box:

• Align the edges of a dialog box with the nearest divider or table edge
• Follow the dialog box guide, apply App themes
• The user confirms the text by clicking the Save button

2.5 Action Line

The actions of the line represent the inline menu.

How the inline menu is designed:

• 13SP Roboto Regular
• 87% Black
• Guidelines for following the space and size of menus

Copyright NOTICE: When we seriously to do one thing, we can find the endless fun, colorful technology like the scenery on the road, while walking to appreciate.

"Material Design Visual Design Language" UI Component Designer (iv): Table