Merge remote-tracking branch 'origin/master'
This commit is contained in:
commit
8ed86261ef
47 changed files with 1606 additions and 858 deletions
BIN
app/src/main/res/drawable-nodpi/channel_banner.png
Normal file
BIN
app/src/main/res/drawable-nodpi/channel_banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
12
app/src/main/res/drawable-v21/splash_screen.xml
Normal file
12
app/src/main/res/drawable-v21/splash_screen.xml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<item
|
||||
android:drawable="?android:windowBackground"/>
|
||||
|
||||
<item>
|
||||
<bitmap
|
||||
android:gravity="center"
|
||||
android:src="@mipmap/ic_launcher"/>
|
||||
</item>
|
||||
</layer-list>
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<item
|
||||
android:drawable="?android:attr/windowBackground"/>
|
||||
|
||||
<item>
|
||||
<bitmap
|
||||
android:gravity="center"
|
||||
|
|
|
|||
79
app/src/main/res/layout-land/channel_header.xml
Normal file
79
app/src/main/res/layout-land/channel_header.xml
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<RelativeLayout
|
||||
android:id="@+id/channel_header_layout"
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="vertical">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/channel_banner_image"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:fitsSystemWindows="true"
|
||||
android:scaleType="center"
|
||||
android:src="@drawable/channel_banner"
|
||||
android:background="@android:color/black"
|
||||
android:adjustViewBounds="true"/>
|
||||
|
||||
<RelativeLayout
|
||||
android:id="@+id/channel_avatar_layout"
|
||||
android:layout_alignTop="@id/channel_banner_image"
|
||||
android:layout_width="@dimen/channel_avatar_halo_size"
|
||||
android:layout_height="@dimen/channel_avatar_halo_size"
|
||||
android:layout_marginLeft="20dp"
|
||||
android:layout_marginStart="20dp"
|
||||
android:layout_marginTop="60dp">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/channel_avatar_halo"
|
||||
android:layout_width="@dimen/channel_avatar_halo_size"
|
||||
android:layout_height="@dimen/channel_avatar_halo_size"
|
||||
android:layout_alignParentLeft="true"
|
||||
android:layout_alignParentStart="true"
|
||||
android:src="@drawable/white_circle" />
|
||||
|
||||
<de.hdodenhof.circleimageview.CircleImageView
|
||||
android:id="@+id/channel_avatar_view"
|
||||
android:layout_width="@dimen/channel_avatar_size"
|
||||
android:layout_height="@dimen/channel_avatar_size"
|
||||
android:src="@drawable/buddy"
|
||||
android:layout_centerInParent="true"/>
|
||||
</RelativeLayout>
|
||||
|
||||
<TextView
|
||||
android:id="@+id/channel_title_view"
|
||||
android:layout_below="@id/channel_banner_image"
|
||||
android:layout_toEndOf="@id/channel_avatar_layout"
|
||||
android:layout_toRightOf="@id/channel_avatar_layout"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginLeft="4dp"
|
||||
android:layout_marginStart="4dp"
|
||||
android:textSize="@dimen/video_item_detail_title_text_size"
|
||||
android:textAppearance="?android:attr/textAppearanceLarge"/>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/channel_subscriber_layout"
|
||||
android:layout_below="@id/channel_banner_image"
|
||||
android:layout_toEndOf="@id/channel_title_view"
|
||||
android:layout_toRightOf="@id/channel_title_view"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="horizontal">
|
||||
<Button
|
||||
android:id="@+id/channel_subscribe_button"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/subscribe"
|
||||
android:layout_marginLeft="4dp"
|
||||
android:layout_marginStart="4dp"/>
|
||||
|
||||
<TextView
|
||||
android:id="@+id/channel_subscriber_view"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:gravity="center"/>
|
||||
</LinearLayout>
|
||||
|
||||
</RelativeLayout>
|
||||
|
|
@ -1,81 +1,17 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
<RelativeLayout
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:fitsSystemWindows="true"
|
||||
android:id="@+id/rootView"
|
||||
tools:context="org.schabi.newpipe.ChannelActivity">
|
||||
android:orientation="vertical"
|
||||
android:title="Channel">
|
||||
|
||||
<android.support.design.widget.AppBarLayout
|
||||
android:id="@+id/channel_app_bar"
|
||||
<android.support.v7.widget.RecyclerView
|
||||
android:id="@+id/channel_streams_view"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="@dimen/app_bar_height"
|
||||
android:fitsSystemWindows="true"
|
||||
android:theme="@style/AppTheme.AppBarOverlay">
|
||||
|
||||
<android.support.design.widget.CollapsingToolbarLayout
|
||||
android:id="@+id/channel_toolbar_layout"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:fitsSystemWindows="true"
|
||||
app:contentScrim="@color/light_youtube_primary_color"
|
||||
app:statusBarScrim="@color/light_youtube_dark_color"
|
||||
app:layout_scrollFlags="scroll|exitUntilCollapsed">
|
||||
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/channel_banner_image"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:fitsSystemWindows="true"
|
||||
android:scaleType="centerCrop"
|
||||
android:background="@color/light_youtube_dark_color"
|
||||
app:layout_collapseMode="parallax" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/channel_avatar_halo"
|
||||
android:visibility="gone"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginLeft="28dp"
|
||||
android:layout_marginStart="28dp"
|
||||
android:layout_marginTop="38dp"
|
||||
android:layout_alignParentLeft="true"
|
||||
android:layout_alignParentStart="true"
|
||||
android:src="@drawable/white_circle"/>
|
||||
|
||||
<de.hdodenhof.circleimageview.CircleImageView
|
||||
android:id="@+id/channel_avatar_view"
|
||||
android:visibility="gone"
|
||||
android:layout_width="@dimen/channel_avatar_size"
|
||||
android:layout_height="@dimen/channel_avatar_size"
|
||||
android:src="@drawable/buddy"
|
||||
android:layout_marginLeft="30dp"
|
||||
android:layout_marginStart="30dp"
|
||||
android:layout_marginTop="40dp"
|
||||
android:layout_alignParentLeft="true"
|
||||
android:layout_alignParentStart="true"/>
|
||||
|
||||
<android.support.v7.widget.Toolbar
|
||||
android:id="@+id/cannel_toolbar"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="?attr/actionBarSize"
|
||||
app:layout_collapseMode="pin"
|
||||
app:popupTheme="@style/AppTheme.PopupOverlay" />
|
||||
|
||||
</android.support.design.widget.CollapsingToolbarLayout>
|
||||
</android.support.design.widget.AppBarLayout>
|
||||
|
||||
<android.support.design.widget.FloatingActionButton
|
||||
android:id="@+id/channel_rss_fab"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_margin="@dimen/fab_margin"
|
||||
android:src="?attr/rss"
|
||||
app:layout_anchor="@id/channel_app_bar"
|
||||
app:layout_anchorGravity="bottom|end" />
|
||||
android:layout_height="match_parent"
|
||||
android:background="?android:windowBackground"
|
||||
android:scrollbars="vertical"/>
|
||||
|
||||
<RelativeLayout
|
||||
android:layout_width="match_parent"
|
||||
|
|
@ -87,11 +23,4 @@
|
|||
android:layout_centerInParent="true"
|
||||
android:indeterminate="true"/>
|
||||
</RelativeLayout>
|
||||
<android.support.v7.widget.RecyclerView
|
||||
android:id="@+id/channel_streams_view"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:background="?android:windowBackground"
|
||||
app:layout_behavior="@string/appbar_scrolling_view_behavior"
|
||||
android:scrollbars="vertical"/>
|
||||
</android.support.design.widget.CoordinatorLayout>
|
||||
</RelativeLayout>
|
||||
|
|
|
|||
78
app/src/main/res/layout/channel_header.xml
Normal file
78
app/src/main/res/layout/channel_header.xml
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<RelativeLayout
|
||||
android:id="@+id/channel_header_layout"
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="vertical">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/channel_banner_image"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:fitsSystemWindows="true"
|
||||
android:scaleType="center"
|
||||
android:src="@drawable/channel_banner"
|
||||
android:background="@android:color/black"
|
||||
android:adjustViewBounds="true"/>
|
||||
|
||||
<RelativeLayout
|
||||
android:id="@+id/channel_avatar_layout"
|
||||
android:layout_alignTop="@id/channel_banner_image"
|
||||
android:layout_width="@dimen/channel_avatar_halo_size"
|
||||
android:layout_height="@dimen/channel_avatar_halo_size"
|
||||
android:layout_marginLeft="20dp"
|
||||
android:layout_marginStart="20dp"
|
||||
android:layout_marginTop="30dp">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/channel_avatar_halo"
|
||||
android:layout_width="@dimen/channel_avatar_halo_size"
|
||||
android:layout_height="@dimen/channel_avatar_halo_size"
|
||||
android:layout_alignParentLeft="true"
|
||||
android:layout_alignParentStart="true"
|
||||
android:src="@drawable/white_circle" />
|
||||
|
||||
<de.hdodenhof.circleimageview.CircleImageView
|
||||
android:id="@+id/channel_avatar_view"
|
||||
android:layout_width="@dimen/channel_avatar_size"
|
||||
android:layout_height="@dimen/channel_avatar_size"
|
||||
android:src="@drawable/buddy"
|
||||
android:layout_centerInParent="true"/>
|
||||
</RelativeLayout>
|
||||
|
||||
<TextView
|
||||
android:id="@+id/channel_title_view"
|
||||
android:layout_below="@id/channel_banner_image"
|
||||
android:layout_toEndOf="@id/channel_avatar_layout"
|
||||
android:layout_toRightOf="@id/channel_avatar_layout"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginLeft="4dp"
|
||||
android:layout_marginStart="4dp"
|
||||
android:textSize="@dimen/video_item_detail_title_text_size"
|
||||
android:textAppearance="?android:attr/textAppearanceLarge"/>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/channel_subscriber_layout"
|
||||
android:visibility="gone"
|
||||
android:layout_below="@id/channel_avatar_layout"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="horizontal">
|
||||
<Button
|
||||
android:id="@+id/channel_subscribe_button"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/subscribe"
|
||||
android:layout_marginLeft="4dp"
|
||||
android:layout_marginStart="4dp"/>
|
||||
|
||||
<TextView
|
||||
android:id="@+id/channel_subscriber_view"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:gravity="center"/>
|
||||
</LinearLayout>
|
||||
|
||||
</RelativeLayout>
|
||||
15
app/src/main/res/layout/pignate_footer.xml
Normal file
15
app/src/main/res/layout/pignate_footer.xml
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:gravity="center_horizontal"
|
||||
android:orientation="vertical">
|
||||
|
||||
<ProgressBar
|
||||
android:id="@+id/paginate_progress_bar"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:gravity="center"
|
||||
android:paddingBottom="10dp"/>
|
||||
|
||||
</LinearLayout>
|
||||
|
|
@ -2,6 +2,16 @@
|
|||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
tools:context="org.schabi.newpipe.ChannelActivity">
|
||||
|
||||
<item android:id="@+id/menu_item_openInBrowser"
|
||||
app:showAsAction="never"
|
||||
android:title="@string/open_in_browser" />
|
||||
|
||||
<item android:id="@+id/menu_item_share"
|
||||
android:title="@string/share"
|
||||
app:showAsAction="ifRoom"
|
||||
android:icon="?attr/share"/>
|
||||
|
||||
<item
|
||||
android:id="@+id/action_settings"
|
||||
android:orderInCategory="100"
|
||||
|
|
|
|||
|
|
@ -175,16 +175,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -193,13 +193,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -208,13 +208,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -223,12 +223,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -237,12 +237,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -251,8 +251,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -261,10 +261,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -273,16 +273,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -291,17 +291,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -165,16 +165,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -183,13 +183,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -198,13 +198,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -213,12 +213,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -227,12 +227,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -241,8 +241,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -251,10 +251,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -263,16 +263,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -281,17 +281,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -157,16 +157,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -175,13 +175,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -190,13 +190,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -205,12 +205,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -219,12 +219,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -233,8 +233,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -243,10 +243,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -255,16 +255,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -273,17 +273,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -170,16 +170,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -188,13 +188,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -203,13 +203,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -218,12 +218,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -232,12 +232,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -246,8 +246,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -256,10 +256,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -268,16 +268,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -286,17 +286,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -168,16 +168,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -186,13 +186,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -201,13 +201,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -216,12 +216,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -230,12 +230,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -244,8 +244,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -254,10 +254,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -266,16 +266,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -284,17 +284,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -163,16 +163,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -181,13 +181,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -196,13 +196,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -211,12 +211,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -225,12 +225,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -239,8 +239,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -249,10 +249,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -261,16 +261,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -279,17 +279,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -164,16 +164,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -182,13 +182,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -197,13 +197,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -212,12 +212,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -226,12 +226,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -240,8 +240,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -250,10 +250,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -262,16 +262,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -280,17 +280,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -161,16 +161,16 @@
|
|||
|
||||
|
||||
Materiál metafora je zjednocujúci teórie racionálne priestoru a systém pohybu.
|
||||
Materiál je zakotvená v taktilné skutočnosti, inšpirované štúdiom papiera a atramentu, ale napriek tomu
|
||||
Materiál je zakotvená v taktilné skutočnosti, inšpirované štúdiom papiera a atramentu, ale napriek tomu
|
||||
technologicky pokročilé a otvorené fantáziu a mágiu.
|
||||
|
||||
Povrchy a hrany materiálu poskytujú vizuálnu pokyny, ktoré sú zakotvené v realite.
|
||||
Použitie známych hmatových vlastností, pomáha používateľom rýchlo pochopiť affordances. napriek tomu
|
||||
Pružnosť materiálu vytvára nové affordances že nadradené tie fyzické
|
||||
Povrchy a hrany materiálu poskytujú vizuálnu pokyny, ktoré sú zakotvené v realite.
|
||||
Použitie známych hmatových vlastností, pomáha používateľom rýchlo pochopiť affordances. napriek tomu
|
||||
Pružnosť materiálu vytvára nové affordances že nadradené tie fyzické
|
||||
svet bez toho, aby porušenie pravidiel fyziky.
|
||||
|
||||
Základy svetla, povrchu a pohyb sú kľúčom k dopravovanie, ako sa objekty pohybovať,
|
||||
komunikovať, a existujú v priestore a vo vzťahu k sebe navzájom. Realistické svetelné šou
|
||||
Základy svetla, povrchu a pohyb sú kľúčom k dopravovanie, ako sa objekty pohybovať,
|
||||
komunikovať, a existujú v priestore a vo vzťahu k sebe navzájom. Realistické svetelné šou
|
||||
švy, rozdeľuje priestor, a indikuje pohyblivých častí.
|
||||
|
||||
|
||||
|
|
@ -179,13 +179,13 @@
|
|||
|
||||
|
||||
|
||||
Foundational prvky tlače na dizajn typografie, rošty, priestor, mierka, farby,
|
||||
a používanie metafor riadiť vizuálne procedúry. Tieto prvky robiť oveľa viac, než potešiť
|
||||
oko. Vytvárajú hierarchie, zmysel a zameranie. výber farieb úmyselné, od okraja k okraju
|
||||
snímok, rozsiahle typografie a úmyselné biely priestor vytvoriť tučný a grafický
|
||||
Foundational prvky tlače na dizajn typografie, rošty, priestor, mierka, farby,
|
||||
a používanie metafor riadiť vizuálne procedúry. Tieto prvky robiť oveľa viac, než potešiť
|
||||
oko. Vytvárajú hierarchie, zmysel a zameranie. výber farieb úmyselné, od okraja k okraju
|
||||
snímok, rozsiahle typografie a úmyselné biely priestor vytvoriť tučný a grafický
|
||||
rozhranie, ktoré ponorí užívateľov v zážitku.
|
||||
|
||||
Dôraz na užívateľských akcií činí základné funkcie okamžite zrejmé a poskytuje
|
||||
Dôraz na užívateľských akcií činí základné funkcie okamžite zrejmé a poskytuje
|
||||
waypointy pre užívateľov.
|
||||
|
||||
|
||||
|
|
@ -194,13 +194,13 @@
|
|||
|
||||
|
||||
|
||||
Návrh rešpektuje a posilňuje užívateľa ako hnacia sila. Primárne akcie užívateľa sú
|
||||
Návrh rešpektuje a posilňuje užívateľa ako hnacia sila. Primárne akcie užívateľa sú
|
||||
inflexné body, ktoré iniciujú pohyb, transformáciu celej konštrukcie.
|
||||
|
||||
Celá akcia prebieha v jedinom prostredí. Objekty sú prezentované užívateľovi bez toho,
|
||||
Celá akcia prebieha v jedinom prostredí. Objekty sú prezentované užívateľovi bez toho,
|
||||
prelomenie kontinuity skúseností, aj keď ich transformáciu a reorganizáciu.
|
||||
|
||||
Pohyb je zmysluplné a vhodné, slúžiace sústrediť pozornosť a zachovanie kontinuity.
|
||||
Pohyb je zmysluplné a vhodné, slúžiace sústrediť pozornosť a zachovanie kontinuity.
|
||||
Spätná väzba je jemné, ale napriek tomu jasné. Prechody sú ef fi točné ešte koherentné.
|
||||
|
||||
|
||||
|
|
@ -209,12 +209,12 @@
|
|||
|
||||
|
||||
|
||||
Materiál prostredie je 3D priestore, čo znamená, že všetky objekty majú X, Y, a Z
|
||||
rozmery. Os je kolmo zarovnaný k rovine zobrazenie, s
|
||||
kladná os rozširuje smerom k divákovi. Každý list materiálu, umiestnené v jednom
|
||||
Materiál prostredie je 3D priestore, čo znamená, že všetky objekty majú X, Y, a Z
|
||||
rozmery. Os je kolmo zarovnaný k rovine zobrazenie, s
|
||||
kladná os rozširuje smerom k divákovi. Každý list materiálu, umiestnené v jednom
|
||||
poloha pozdĺž osi a má štandardnú hrúbku 1DP.
|
||||
|
||||
Na webe, os sa používa pre vrstvenie a nie pre perspektívy. 3D svet
|
||||
Na webe, os sa používa pre vrstvenie a nie pre perspektívy. 3D svet
|
||||
emuloval tým, že manipuluje os y.
|
||||
|
||||
|
||||
|
|
@ -223,12 +223,12 @@
|
|||
|
||||
|
||||
|
||||
V hmotnom prostredí, virtuálne svetlá osvetľujú scénu. Kľúčové svetla vytvárajú
|
||||
V hmotnom prostredí, virtuálne svetlá osvetľujú scénu. Kľúčové svetla vytvárajú
|
||||
smerové tiene, zatiaľ čo okolité svetlo vytvára mäkké tiene zo všetkých strán.
|
||||
|
||||
Tiene v hmotnom prostredí sú obsadené týmito dvoma svetelnými zdrojmi. v Android
|
||||
vývoj, dochádza tiene, keď sú svetelné zdroje blokované plechového materiálu, na
|
||||
Rôzne pozície pozdĺž osi. Na webe tiene sú znázornené manipuláciou
|
||||
Tiene v hmotnom prostredí sú obsadené týmito dvoma svetelnými zdrojmi. v Android
|
||||
vývoj, dochádza tiene, keď sú svetelné zdroje blokované plechového materiálu, na
|
||||
Rôzne pozície pozdĺž osi. Na webe tiene sú znázornené manipuláciou
|
||||
Iba os y. Nasledujúci príklad ukazuje kartu s výškou 6dp.
|
||||
|
||||
|
||||
|
|
@ -237,8 +237,8 @@
|
|||
|
||||
|
||||
|
||||
Všetky významné objekty, bez ohľadu na ich veľkosť, majú výšku odpočíva, alebo predvolené výšku
|
||||
to nič nemení. V prípade, že objekt sa mení výšku, mal by sa vrátiť do svojej pokojovej
|
||||
Všetky významné objekty, bez ohľadu na ich veľkosť, majú výšku odpočíva, alebo predvolené výšku
|
||||
to nič nemení. V prípade, že objekt sa mení výšku, mal by sa vrátiť do svojej pokojovej
|
||||
nadmorskej výšky čo najskôr.
|
||||
|
||||
|
||||
|
|
@ -247,10 +247,10 @@
|
|||
|
||||
|
||||
|
||||
Pokojová nadmorská výška pre typ komponentu je konzistentné naprieč aplikáciami (napr FAB elevácie
|
||||
Pokojová nadmorská výška pre typ komponentu je konzistentné naprieč aplikáciami (napr FAB elevácie
|
||||
nelíši od 6dp v jednej aplikácii na 16dp v inej aplikácii).
|
||||
|
||||
Zložky môžu mať rôzne pokojovej výšky medzi platformami, v závislosti od hĺbky
|
||||
Zložky môžu mať rôzne pokojovej výšky medzi platformami, v závislosti od hĺbky
|
||||
životného prostredia (napr televízor má väčšiu hĺbku, ako mobilný telefón alebo plochy).
|
||||
|
||||
|
||||
|
|
@ -259,16 +259,16 @@
|
|||
|
||||
|
||||
|
||||
Niektoré typy komponentov majú citlivejší výšku, čo znamená, že meniť výšku v odozve
|
||||
na vstup používateľa (napríklad normálny priebeh, sa zameral, a lisované), alebo systémové udalosti. tieto elevácie
|
||||
Niektoré typy komponentov majú citlivejší výšku, čo znamená, že meniť výšku v odozve
|
||||
na vstup používateľa (napríklad normálny priebeh, sa zameral, a lisované), alebo systémové udalosti. tieto elevácie
|
||||
Zmeny sa vykonávali dôsledne používať dynamické výškové posuny.
|
||||
|
||||
Dynamické výškové posuny sú cieľom nadmorská výška, ktorá zložka sa pohybuje smerom, relatívna
|
||||
do pokojového stavu súčasti. Zaisťujú, že zmeny elevácie sú v súlade
|
||||
naprieč akcií a typov komponentov. Napríklad všetky súčasti, ktoré vlek na lise majú
|
||||
Dynamické výškové posuny sú cieľom nadmorská výška, ktorá zložka sa pohybuje smerom, relatívna
|
||||
do pokojového stavu súčasti. Zaisťujú, že zmeny elevácie sú v súlade
|
||||
naprieč akcií a typov komponentov. Napríklad všetky súčasti, ktoré vlek na lise majú
|
||||
rovnaká zmena prevýšenie vo vzťahu k ich prevýšenie odpočinku.
|
||||
|
||||
Akonáhle je vstupná udalosť dokončenie alebo zrušená, bude zložka vráti do svojej pokojovej
|
||||
Akonáhle je vstupná udalosť dokončenie alebo zrušená, bude zložka vráti do svojej pokojovej
|
||||
nadmorská výška.
|
||||
|
||||
|
||||
|
|
@ -277,17 +277,17 @@
|
|||
|
||||
|
||||
|
||||
Zložky s citlivými nadmorských výškach môže stretnúť s ďalšími komponentmi, ako sa pohybovať medzi
|
||||
ich odpočinku vyvýšeniny a dynamické výškové odsadenie. Vzhľadom k tomu, materiál nemôže prejsť
|
||||
prostredníctvom iného materiálu, komponenty nenarušovať spolu navzájom nejakom množstvo ciest,
|
||||
Zložky s citlivými nadmorských výškach môže stretnúť s ďalšími komponentmi, ako sa pohybovať medzi
|
||||
ich odpočinku vyvýšeniny a dynamické výškové odsadenie. Vzhľadom k tomu, materiál nemôže prejsť
|
||||
prostredníctvom iného materiálu, komponenty nenarušovať spolu navzájom nejakom množstvo ciest,
|
||||
či už na úrovni jednotlivých komponentov alebo s použitím kompletné rozloženie aplikácie.
|
||||
|
||||
Na úrovni komponentov môžu zložky presunúť alebo odstrániť skôr, než spôsobia rušenie.
|
||||
Napríklad tlačidlo plávajúce akcie (FAB) môžu zmiznúť alebo presunúť mimo obrazovku pred
|
||||
Na úrovni komponentov môžu zložky presunúť alebo odstrániť skôr, než spôsobia rušenie.
|
||||
Napríklad tlačidlo plávajúce akcie (FAB) môžu zmiznúť alebo presunúť mimo obrazovku pred
|
||||
Užívateľ zdvihne kartu, alebo sa môže pohybovať, ak sa objaví snackbar.
|
||||
|
||||
Na úrovni Usporiadanie, riešenie rozvrhnutie aplikácie, aby sa minimalizovalo príležitostí k rušeniu.
|
||||
Napríklad, umiestnenie FAB na jednej strane prúdu niekoľkých kariet, takže FAB nebude zasahovať
|
||||
Na úrovni Usporiadanie, riešenie rozvrhnutie aplikácie, aby sa minimalizovalo príležitostí k rušeniu.
|
||||
Napríklad, umiestnenie FAB na jednej strane prúdu niekoľkých kariet, takže FAB nebude zasahovať
|
||||
ak sa užívateľ pokúsi vyzdvihnúť jednu z kariet.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -170,16 +170,16 @@
|
|||
|
||||
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion.
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
The material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
Surfaces and edges of the material provide visual cues that are grounded in reality. The
|
||||
use of familiar tactile attributes helps users quickly understand affordances. Yet the
|
||||
flexibility of the material creates new affordances that supercede those in the physical
|
||||
world, without breaking the rules of physics.
|
||||
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
The fundamentals of light, surface, and movement are key to conveying how objects move,
|
||||
interact, and exist in space and in relation to each other. Realistic lighting shows
|
||||
seams, divides space, and indicates moving parts.
|
||||
|
||||
|
||||
|
|
@ -188,13 +188,13 @@
|
|||
|
||||
|
||||
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
The foundational elements of print based design typography, grids, space, scale, color,
|
||||
and use of imagery guide visual treatments. These elements do far more than please the
|
||||
eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge to edge
|
||||
imagery, large scale typography, and intentional white space create a bold and graphic
|
||||
interface that immerse the user in the experience.
|
||||
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
An emphasis on user actions makes core functionality immediately apparent and provides
|
||||
waypoints for the user.
|
||||
|
||||
|
||||
|
|
@ -203,13 +203,13 @@
|
|||
|
||||
|
||||
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
Motion respects and reinforces the user as the prime mover. Primary user actions are
|
||||
inflection points that initiate motion, transforming the whole design.
|
||||
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
All action takes place in a single environment. Objects are presented to the user without
|
||||
breaking the continuity of experience even as they transform and reorganize.
|
||||
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
|
||||
Feedback is subtle yet clear. Transitions are efficient yet coherent.
|
||||
|
||||
|
||||
|
|
@ -218,12 +218,12 @@
|
|||
|
||||
|
||||
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
The material environment is a 3D space, which means all objects have x, y, and z
|
||||
dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the
|
||||
positive z-axis extending towards the viewer. Every sheet of material occupies a single
|
||||
position along the z-axis and has a standard 1dp thickness.
|
||||
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
On the web, the z-axis is used for layering and not for perspective. The 3D world is
|
||||
emulated by manipulating the y-axis.
|
||||
|
||||
|
||||
|
|
@ -232,12 +232,12 @@
|
|||
|
||||
|
||||
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
Within the material environment, virtual lights illuminate the scene. Key lights create
|
||||
directional shadows, while ambient light creates soft shadows from all angles.
|
||||
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
Shadows in the material environment are cast by these two light sources. In Android
|
||||
development, shadows occur when light sources are blocked by sheets of material at
|
||||
various positions along the z-axis. On the web, shadows are depicted by manipulating the
|
||||
y-axis only. The following example shows the card with a height of 6dp.
|
||||
|
||||
|
||||
|
|
@ -246,8 +246,8 @@
|
|||
|
||||
|
||||
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
All material objects, regardless of size, have a resting elevation, or default elevation
|
||||
that does not change. If an object changes elevation, it should return to its resting
|
||||
elevation as soon as possible.
|
||||
|
||||
|
||||
|
|
@ -256,10 +256,10 @@
|
|||
|
||||
|
||||
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
The resting elevation for a component type is consistent across apps (e.g., FAB elevation
|
||||
does not vary from 6dp in one app to 16dp in another app).
|
||||
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
Components may have different resting elevations across platforms, depending on the depth
|
||||
of the environment (e.g., TV has a greater depth than mobile or desktop).
|
||||
|
||||
|
||||
|
|
@ -268,16 +268,16 @@
|
|||
|
||||
|
||||
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
Some component types have responsive elevation, meaning they change elevation in response
|
||||
to user input (e.g., normal, focused, and pressed) or system events. These elevation
|
||||
changes are consistently implemented using dynamic elevation offsets.
|
||||
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
Dynamic elevation offsets are the goal elevation that a component moves towards, relative
|
||||
to the component’s resting state. They ensure that elevation changes are consistent
|
||||
across actions and component types. For example, all components that lift on press have
|
||||
the same elevation change relative to their resting elevation.
|
||||
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
Once the input event is completed or cancelled, the component will return to its resting
|
||||
elevation.
|
||||
|
||||
|
||||
|
|
@ -286,17 +286,17 @@
|
|||
|
||||
|
||||
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
Components with responsive elevations may encounter other components as they move between
|
||||
their resting elevations and dynamic elevation offsets. Because material cannot pass
|
||||
through other material, components avoid interfering with one another any number of ways,
|
||||
whether on a per component basis or using the entire app layout.
|
||||
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
On a component level, components can move or be removed before they cause interference.
|
||||
For example, a floating action button (FAB) can disappear or move off screen before a
|
||||
user picks up a card, or it can move if a snackbar appears.
|
||||
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
On the layout level, design your app layout to minimize opportunities for interference.
|
||||
For example, position the FAB to one side of stream of a cards so the FAB won’t interfere
|
||||
when a user tries to pick up one of cards.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,10 +29,12 @@
|
|||
<string-array name="theme_description_list">
|
||||
<item>@string/light_theme_title</item>
|
||||
<item>@string/dark_theme_title</item>
|
||||
<item>@string/black_theme_title</item>
|
||||
</string-array>
|
||||
<string-array name="theme_list">
|
||||
<item>@string/light_theme_title</item>
|
||||
<item>@string/dark_theme_title</item>
|
||||
<item>@string/black_theme_title</item>
|
||||
</string-array>
|
||||
|
||||
<string name="default_audio_format_key" translatable="false">default_audio_format</string>
|
||||
|
|
|
|||
|
|
@ -86,6 +86,8 @@
|
|||
<string name="error_report_title">Error report</string>
|
||||
<string name="all">All</string>
|
||||
<string name="channel">Channel</string>
|
||||
<string name="yes">Yes</string>
|
||||
<string name="later">Later</string>
|
||||
|
||||
<!-- error strings -->
|
||||
<string name="general_error">Error</string>
|
||||
|
|
@ -151,10 +153,12 @@
|
|||
<string name="use_exoplayer_summary">Experimental</string>
|
||||
<string name="videos">videos</string>
|
||||
<string name="subscriber">subscriber</string>
|
||||
<string name="subscribe">Subscribe</string>
|
||||
<string name="views">views</string>
|
||||
<string name="short_thousand">T</string>
|
||||
<string name="short_thousand">K</string>
|
||||
<string name="short_million">M</string>
|
||||
<string name="short_billion">B</string>
|
||||
<string name="restart_title">Restart</string>
|
||||
|
||||
<!-- Missions -->
|
||||
<string name="start">Start</string>
|
||||
|
|
@ -183,6 +187,7 @@
|
|||
<string name="msg_wait">Please wait…</string>
|
||||
<string name="msg_copied">Copied to clipboard.</string>
|
||||
<string name="no_available_dir">Please select an available download directory.</string>
|
||||
<string name="msg_restart">You have to restart the application to apply the theme.\n\nDo you want to restart now?</string>
|
||||
|
||||
<!-- Checksum types -->
|
||||
<string name="md5" translatable="false">MD5</string>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,10 @@
|
|||
<item name="rss">@drawable/ic_rss_feed_black_24dp</item>
|
||||
</style>
|
||||
|
||||
<style name="BlackTheme" parent="DarkTheme">
|
||||
<item name="android:windowBackground">@color/black</item>
|
||||
</style>
|
||||
|
||||
<style name="NewPipeActionbarTheme" parent="Widget.AppCompat.Light.ActionBar.Solid">
|
||||
<item name="android:displayOptions">showHome</item>
|
||||
<item name="displayOptions">showHome</item>
|
||||
|
|
@ -107,6 +111,11 @@
|
|||
<item name="windowNoTitle">true</item>
|
||||
</style>
|
||||
|
||||
<style name="BlackTheme.NoActionBar">
|
||||
<item name="windowActionBar">false</item>
|
||||
<item name="windowNoTitle">true</item>
|
||||
</style>
|
||||
|
||||
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
|
||||
|
||||
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue