"Material Design visual Design language" applied styling

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

List of "Material design language" chapters

"Material Design Vision language" begins
Material Design Overview for "Material Design Language"
"Material Design Visual Design language" application layout
"Material Design Vision Language" Application adaptive layout
"Material Design visual Design language" applied styling
"Material Design visual Design language" applied animation
"Material Design Visual Design Language" UI Component Designer (i): button
"Material Design Visual Design Language" UI Component Designer (ii): Card
"Material Design Visual Design Language" UI component Designing (iii): Slips
"Material Design Visual Design Language" UI Component Designer (iv): Table
"Material Design Visual Design Language" UI Component Designer (V): Prompt box
"Material Design Visual Design Language" UI Component Designer (vi): Divider line
"Material Design Visual Design Language" UI component Designing (vii): grid
"Material Design Visual Design Language" UI Component Designer (eight): List
"Material Design Visual Design Language" UI component Designing (ix): Menu
"Material Design Visual Design Language" UI Component Designer (10): Selector
"Material Design Visual Design Language" UI Component Designer (11): Progress bar
"Material Design Visual Design Language" UI Component Designer (12): Slider
"Material Design Visual Design Language" UI Component Designer (13): Toast
"Material Design Visual Design Language" UI Component Designer (14): Tabs
"Material Design Visual Design Language" UI Component Designer (15): Text box

One Color design

The application of color design is a key link. Bold color expression activates color and contrasts with the monotony of the surrounding environment. Emphasis on bold shadows and highlights. Leads to unexpected and vibrant colors.

Android Application Development drawings download

1.1 UI Palette

The palette is based on some base colors. Fill the spectrum to provide a complete set of colors available for Android, Web, and IOS environments.

The saturation of the base color is 500.

1.2 Use of colors

Color grading is a creative activity that relies on the inspiration of the designer. This is not intended to be a step in the rules, but rather to give some aesthetic-based design guidelines.

1.2.1 Limit the number of colors in the same layout

The number of colors in the same layout is generally 14 advisable, select three shades and one accent color in many base colors. Accent color for back, optional.

1.2.2 with alpha values for gray text, icons, and dividers

In order to effectively convey the visual hierarchy of information. You should use different shades of text.

For text on a white background, the standard alpha value is 87% (#000000). Minor text with low visual level. The alpha value of 54% (#000000) should be used. Text that is used to prompt the user, like text and tags, has a lower level of vision. The alpha value of the 26% (#000000) should be used.

Other elements, markers, and dividers should also have a black alpha value. Instead of a solid color. To make sure they can adapt to whatever color the background is.

For white or black text on a colored background, you can find the appropriate color control and alpha values from the palette in the table.

1.2.3 Use eye-catching colors in large chunks of the UI

Different elements in the UI fit different colors in the theme. The toolbar and large color blocks are suitable for using the base color of saturation 500. This is also the main color of our application.

The status bar is suitable for using a deeper saturation of 700 of the base color.

1.2.4 Basic operation and components with bright accent color

Bright accent colors are used for your main operating button as well as components such as switches or sliders. The left-aligned part of the icon or chapter title can also use accent colors.

Assume that the hue is too deep or too shallow for the background color. The default practice is to choose a lighter or darker alternate color. Assuming that your accent color doesn't display properly, the base color of saturation 500 is used on a white background. Suppose the background color is the base color of saturation 500. Then 100% White or 54% black will be used.

1.3 Application Theme Design

The topic is the corresponding method of providing consistent tones.

The style specifies the brightness of the surface, the level of the shadow, and the appropriate opacity of the font element.

This shows the two themes of dark and light.

Theme design ai source file download

Two-font typesetting

The default font set for the Android platform is Roboto. For example, as seen in:

Roboto font source file download

2.1 Font Scaling

In the design of applying fonts, do not use too many font styles and sizes. This destroys the application layout, with the most basic font scaling in the following ways:

• Number 12th
• Number 14th
• Number 16th
• Number 20th
• Number 34th

This size balances content density and reading comfort in classic applications.

In addition, the large font can make the user and the application's interaction more easy, make the user easier to understand the content of the application, we have to feel the same layout in the following. The experience of different sizes of fonts.

Suppose we can't estimate the size of the font, we can also use dynamic fonts. Dynamic font size allows large characters to remain inside the container in case the length of the text is unknown. Dynamic dimensions are based on the available space and the estimated character space. Selected from the Font layout zoom.

2.2 Color of the font

To get a good degree of recognition, the text should meet a minimum control, i.e. 4.5:1 (based on lightness), and 7:1 of the control is best for reading.

2.3 Line height of the font

Row heights are determined by the size and thickness of each style to achieve good readability and proper spacing.

Only the subject, minor title, outline, and other similar styles agree to use their own active line. All other styles should appear in single-line form.

Example

Experience comparison with different line heights

2.4 Word spacing for fonts

Three-icon design four-image design

In the image design, the image should be formed and not artificially planned. It doesn't seem like the natural sky is too much to make.

This style emphasizes the substance of the scene. Texture, depth and unexpected color use, as well as the environmental background of attention. Designed to create a strong purpose. A nice and deep user interface.

4.1 Image Design Guidelines 1 when using painting and photography to enhance the user experience. Choose an image that expresses personal relevance, information, and joy.

Use images that evoke retrospectives to create emotional connections between users and applications.

2 convey specific information.

Create an intelligent sensory experience in an accessible and understandable way.

3 Add logic to ensure that the image is dynamic and shows the intelligence and relevance of the scene. The visual effect with pre-measurement can reveal the level of intelligence. This can greatly improve the user experience.

4 should be brave to use the method of cover, or the color and content of the superposition to form the image of the protagonist. Or make a thumbnail image.

4.2 Image Practice Methods 4.2.1 use multiple media

Illustrations and photography can be used in the same product. Photography implies a certain degree of uniqueness, which should be used to display specific objects and stories. Painting can effectively show the concept and metaphor, which is not available in photography.

For a particular kind of object, first consider using photography to express.

When the content expressed is not detailed in-kind (or can not be summed up in detail), painting conveys information about your application and agrees to the user's understanding of the content at a glance.

4.2.2 Away from Photo gallery

For a specific entity or brand content. To use a detailed image.

For more abstract content, make it explanatory.

However, stock photography (photographic stock) and clip art (clipart) are neither detailed nor explanatory.

4.2.3 Image has focus

Your image should have an iconic focus. Small to a single object, large to the overall layout, can become the focus.

Make sure you have an impressive way to pass on a clear concept to the user.

Example 1

Clear Focus

Focus Blur

Example 2

Clear Focus

Focus Blur

4.2.4 Construction of narrative scene

Create a story and context scene that feels immersive.

Example 1

Vivid scene

No scene.

Example 2

Vivid scene

No scene.

4.2.5 image do not over-process

Preserves the original integrity of the image.

Do not overuse the height filter or Gaussian blur, especially when trying to hide the deterioration (degradation).

Example 1

Image complete

Excessive processing

Example 2

Image complete

Excessive processing

4.2.6 choosing the right image resolution

Ensure that the image size adapts to its border and supports cross-platform. The structure emphasizes large images.

The ideal case. The footage should not appear pixelated. To test the appropriate resolution size for a specific ratio and device.

Example

Image with good resolution

Image with resolution

4.2.6 Select the image size to the advantage

Use different sizes of images to create visual importance.

Example

In the background of a brochure, a thumbnail of various sizes is introduced to convey the hierarchical structure of the content.

Five language expressions

Clear, refined, concise language expression makes the interactive interface more usable. And more easy for people to trust.

Strive to write texts that are understandable to all people, regardless of their cultural background or language.

5.1 Language 5.1.1 Use "you" to speak to users

Use "You" directly to speak to the user, do not use "I".

Don't use phrases like "me" or "my".

Example

Correct expression

你的账户

Error expression

我的账户

5.1.2 Do not use "us"

Write to focus on what users and users can do with your app, not what you or your app is doing for users.

Example 1

Correct expression

通过这些 Google+ 上受欢迎的贴子高速開始

Error expression

为了让你高速開始，我们将为你展示一些 Google+ 上受欢迎的贴子。

Example 2

Correct expression

你能够使用这个页面删除你的Google+档案

Error expression

这个贴子同意你删除Google+的档案

Also, let's say that when a person (not software) is really taking action for a user, such as reviewing a proposal or giving feedback a suggestion. Here, the use of "we" is appropriate, and more humane than the forced passive choice.

Example

Correct expression

我们将审查你的请求并在几天之内回复。

Error expression

你的请求将被查看。你将会在几天之内收到回复。

5.1.3 expression is simple and easy to understand

UI text is useful for navigation and discovery.

The best UI text is small segments so that you don't read too much while browsing.

Example

Correct expression

发送钱给在美国的不论什么人。仅仅要这个人有邮箱地址。快捷、方便、免费。

Error expression

发送（以及接收）钱给美国的朋友和家庭成员。
通过一个邮箱地址。
仅仅有两步过程。非常少或者没有延时，而且对钱的接收人没有不论什么费用。

5.1.4 use active verbs instead of passive verbs

Example

Correct expression

我打了他

Error expression

他被打

5.1.5 expression using today's time

Most of the UI is happening today, so you can write it today.

Example

Correct expression

消息发出

Error expression

消息已经被发出

5.1.6 Express Simple and direct

Example

Correct expression

保存变动？

Error expression

你须要保存你的变动吗？

5.1.7 use simple words that every one understands

Do not use terminology that is only understood by internal professionals, and do not use the name we invented for UI functionality.

Example

Correct expression

打开位置历史

Error expression

使能位置历史

5.1.8 Omit unnecessary phrases

Skip a lot of generic introductory phrases. Just say the point.

Example

Correct expression

删除照片？

Error expression

你确定要删除这个照片吗？

5.1.9 using a consistent verb in a chain of operations

The concept of an operational framework is a typical verb. Pick one that is used consistently in one operation.

Example

For example, we have chosen to delete this word uniformly. You should not swap other words in the same type of operation.

Correct expression

删除照片

Error expression

删掉图片

5.1.10 target guidance rather than method guidance

Motivate users to learn how to complete a task.

Example

Correct expression

从当前相冊中删除一张照片。将他拖动到垃圾篓

Error expression

拖动一张照片到垃圾篓来从当前相冊中删除它

5.1.11

Don't use all the details to add to the user's burden.

Just step through the details of the feature as the user explores and needs information.

Example

Correct expression

删除下载的书籍？

Error expression

你确定要删除这本已下载的书籍？除非你在线。你将不能再阅读它。

Here are some examples of frequently used expressions

Button	How to use
Operation	View rules for using a consistent verb in an action chain
Back off	For multi-Step use
Cancel	Cancel an action
Shut down	Let a message or dialog box disappear without any impact
Complete	Confirmation after the completion of the multi-step process
Know	Another option for "good" or "off"
Learn a lot about other	Think of it as a flat button.
Next	Used as a multi-step process
No, thanks	Omit period
Not now.	Don't abuse the phrase, except it's very necessary. For legal reasons or for other urgent reasons. Never use the "no" instead of "no, thank you".
Good	Use an action related to the task at hand, such as "delete" or "save." "Good" is being abused.
Skip Over	Give the user a choice to skip the current steps

5.2 Tone 5.2.1 Friendly, respectful, user-focused

The text in your UI should complement your visual UI: intuitive, effective, and easy-going. and trustworthy. Show charm, but don't rob users of the limelight.

Example

Correct expression

我的应用没有反应。你希望关闭它吗？

Error expression

对不起。MyAppActive 中的动作（在 MyApp 应用中）没有反应

5.2.2 Humility

Don't exaggerate or over-commit. Show a function what to do, don't say how good it is.

Example

Correct expression

很多其它的餐馆风景

Error expression

全部的餐馆风景

5.2.3 Friendly

Focus on the benefits of each feature. In the function (button. Menu section, link. and hints) in the entry stage, omit the complete details. Precautions. and restrictions.

Example

Correct expression

为了节省电源，将定位模式切换到省电模式。

Error expression

手动控制 GPS 来防止其它应用使用它。

5.2.4 Positive

Presenting the message in a positive tone: reassuring.

Example

Correct expression

为文件名使用24个或者下面的字符。

Error expression

你的文件名必须少于25个字符。

5.2.5 Necessary

For each message, ask yourself: Does the user really need to know this? The mistake of putting aside makes the user focus on their tasks. Sometimes the most effective UI is that there is no text at all.

Example

Correct expression

登录中...你的手机正在联系谷歌。这将花费最多五分钟的时间。

Error expression

登录中...你的手机须要与谷歌的服务器沟通来登录你的账户。
5 分钟的时间。

5.3 Uppercase and lowercase and punctuation 5.3.1 using statement-style capitalization

For all headings, headers, labels, and menu items, and wherever you want to use them. Use the sentence style capitalization. Avoid full capitalization. In addition to the material specifications, for example, button style.

Example

Correct wording

搜索设置（Search settings）

Wrong wording

搜索设置（Search Settings）

Wrong wording

搜索设置（SEARCH SETTINGS）

5.3.2 is only capitalized when it comes to a product.

Don't capitalize the things you create when you use them.

Example

Correct wording

our Google+ page.）

Wrong wording

our Google+ Page.）

5.3.3 over periods and other unnecessary punctuation

Avoid using periods for labels, hover text, set tags, lots of links, ads, and so on. This gives you the flexibility to splice sentences and sentence fragments.

Like what. In a list. This also avoids visual confusion. Help users understand your text at a glance. Skip the colon after the UI label ("Share with" instead of "Share with:").

Use a period, or divide a paragraph into sentences:

• You need to use more than one sentence-even if they are very short sentences.
• There is a series of labels, one of which must be a sentence. Let them all become complete sentences, plus a period (or question mark). And so on).
• A sentence is a part of a larger, more formal UI element, such as a topic text in a dialog box.

5.3.4 using abbreviations

Don't make it difficult for users to understand a sentence in order to obey the rules.

For example, "do not" can bring a lot of other emphasis than "Don t".

Example

Correct wording

it’s, can’t, wouldn’t, you’re, you’ve, haven’t, don’t

Wrong wording

itisnotit’ll, should’ve

5.3.5 Avoid exclamation marks

Example

Correct wording

学习很多其它关于日历的新功能

Wrong wording

学习很多其它关于日历的新功能！

5.3.6 using numbers rather than English

Example

Correct wording

你有 3 条消息（You have 3 messages）

Wrong wording

three messages）

Here are some examples of how to use common punctuation.

name	delegate/Symbol	Descriptive narrative
Period	.	Omit the paragraphs and short sentences for toasts,snackbars,butterbars, as well as hints in the labels. But you need to add punctuation to the whole sentence in the subject matter, for example. In the Body of the dialog box. Include in the quotes (unless you are telling the user what to enter, otherwise it is very vague.)
Comma	,	Added in the argument, use a serialized comma.
Exclamation number	!	Avoid adding exclamation marks to content that you don't really shout out.
Colon	:	: or \u003a is omitted for the label. Like the labels in the form
Cited	“	"or \u201c" or "\u201d" or "\u2018" or \u2019 use a real argument, not an inch or a foot symbol. The right single-quoted number is also used to make ellipses. Do not use a generic argument. This is not true for the quotes, ellipses, and apostrophes.
Apostrophe	′	or \u2032 and ″ or \u2033 only use apostrophes in inches, arcs, and minutes. For example: 3°15′. Use double apostrophes only in inches, arcs, and minutes. For example: 3°15′35″. Do not use generic quotes instead of apostrophes
Ellipsis	...	option-; ... Used to indicate during an operation ("Download ...") or an incomplete or truncated text. There is no space before the ellipsis. To open a dialog box or start another Process menu column or button omitted. The midline ellipsis (three dots) is also used to replace the truncation of sensitive data. Like credit cards.
Double-pointed angle brackets	>	To open a link to another page or to omit a button
Long Dash	—	-or \u2014 shift+option-Avoid: Usually the surface of your sentence structure is very complex. Do not replace long dashes with contiguous hyphens.
Short Dash	–	–or \u2013 option+-replaces hyphens to denote a range. Omit the space between the short dash and the concatenated character. (Our date and time library sets short dashes with enclosed spaces, which is also appropriate for other languages.) For example: 8:00am am–12:30 PM – approx.
Hyphens	-	Use ligatures to avoid ambiguity in hyphenated words. For example: "Anti-inflammatory" "5-mile walk"

5.4 Global Writing

People of all ages, cultures, backgrounds and educational levels depend on the product of the English version number.

Many writing rules support non-native English writing and localization (translation and conversion for global use). Simple, clear English makes it easier for everyone to understand your product.

5.4.1 do not use special cultural members, metaphors, or examples

Languages with special cultural backgrounds can be very difficult to translate. And not suitable for some localization.

Example

Correct expression

发现（Discover）非常好的选择

Error expression

发现（Snag）非常好的选择

5.4.2 Note "left" and "right"

When a product is localized. Interfaces that use the right-to-left scripting language may need to be mirrored.

5.4.3 Avoid gender ambiguity

English is a very small number of languages that agree to gender ambiguity (such as. "Can see their"). Many other languages have to be gender-specific ("You can see him or her picture").

5.4.4 writing a clear description of a character

As a comment in the code, provide a clear description of your string.

Linguists rely on descriptive text to translate a meaningful string into other cultures, rather than verbatim conversions of the original text.

"Material Design visual Design language" applied styling