Each time a user navigates to a planet, we display a Planet Details view that guides the user to a short list of supported detail types. The purpose of this is two-fold; while you can design experiences to be more open-ended, we purposefully defined Overview, Size, Distance, Atmosphere, and Moons so we could show what a framed experience looks like and to inform the user what they can ask readily. Each page consists of a vertical list of TouchWrappers with ordinals, Images and some conditional Text callouts. Text components make use of the text styles found in the alexa-styles package to properly size, color and weight the text for optimal visibility across devices.
Staggered animations were added that use the document's onMount field to trigger when the page loads.
Within the footer, a textToHint transform is used to create a Hint, which adds the user-defined wake word to a provided string.
- /packages/layouts.json
- alexa-styles
- alexa-layouts
- Container
- Sequence
- TouchWrapper
- Text
- Image
- Frame
- alexa-layouts:AlexaHeader
- alexa-layouts:AlexaFooter
Focus states on the vertical list items allow users to visually identify targets. Because of the larger screen size, 'when' clauses are used to show additional text callouts.
Layout is identical to FireTV, minus the text callouts which do not fit within the smaller screen sizes.
The left-aligned list and right-aligned image are centered, while a full-screen scrim increases legibility against the bright background imagery.
To save on vertical real estate, the footer was removed and the list allowed to scroll.