Appearance

Differences between revisions 39 and 41 (spanning 2 versions)
Revision 39 as of 2016-09-16 12:34:57
Size: 10294
Editor: mpt
Comment: “Image” > “Picture”; + windowed mode wireframe
Revision 41 as of 2016-10-18 15:49:56
Size: 10544
Editor: mpt
Comment: Background: more bifurcation rationale; - Color and Gradient options; + Tiled/Stretched/Cropped details
Deletions are marked like this. Additions are marked like this.
Line 15: Line 15:
When choosing a background, by far '''the best representation of your choice is seeing the full-size background on the screen itself'''. This avoids frustration from choosing an image that has too low resolution, or from cropping an image poorly, and not being able to see the problem until you have exited. It’s also more fun. When choosing a background, by far '''the best representation is seeing the full-size background on the screen itself'''. This avoids frustration from choosing an image that has too low resolution, or from cropping an image poorly, and not being able to see the problem until you have exited. It’s also more fun.
Line 17: Line 17:
Achieving this representation requires bespoke behavior in two ways.

|| ||'''Staged mode''' ||'''Windowed mode''' ||
||'''Primary display'''||<^>{{attachment:background.tablet.mini.png}} ||<^>{{attachment:background.pc.mini.png}} ||
||'''Other display''' ||<^>{{attachment:background-secondary.tablet.mini.png}}||<^>{{attachment:background-secondary.pc.mini.png}}||
Achieving this representation requires custom behavior in two ways.
Line 29: Line 25:
=== Staged mode === You can’t pinch or drag the real background to resize or crop it, so the windowed mode needs its own control for that. Therefore, the Background UI must be different in staged mode than in windowed mode.

|| ||'''Staged mode''' ||'''Windowed mode''' ||
||'''Primary display'''||<^>{{attachment:background.tablet.mini.png}} ||<^>{{attachment:background.pc.mini.png}} ||
||'''Other display''' ||<^>{{attachment:background-secondary.tablet.mini.png}}||<^>{{attachment:background-secondary.pc.mini.png}}||

=== Staged mode layout ===
Line 37: Line 39:
Tapping “New” should open a popover with items “Picture…”, “Color…”, and “Gradient…”. Tapping “New” should open [[https://docs.google.com/document/d/1trse15NokU8IJ5lm3BnUi7oMNTCkUnYNHeAHZdtzFoQ/edit#heading=h.woe7j0vyqk0u|a picker for selecting a new image]], including an “Ubuntu Backgrounds” collection (bug Bug:1288364) that does not appear when the picker is called from other apps. (Alternatively, this collection should be placed by default in the Gallery app.)
Line 39: Line 41:
Choosing “Picture…” should open [[https://docs.google.com/document/d/1trse15NokU8IJ5lm3BnUi7oMNTCkUnYNHeAHZdtzFoQ/edit#heading=h.woe7j0vyqk0u|a picker for selecting a new image]], including an “Ubuntu Backgrounds” collection (bug Bug:1288364) that does not appear when the picker is called from other apps. (Alternatively, this collection should be placed by default in the Gallery app.)

The “Recent” list should consist of the ten most recently chosen distinct background settings, that is, image plus crop. This means there may be multiple recent background settings that use the same picture but with different crops. A crop should be saved whenever you leave the “Background” screen. After a fresh install, the this list should be pre-populated with the default wallpaper images (ubuntu wallpaper + images from the wallpaper competition)
The “Recent” list should consist of the ten most recently chosen distinct background settings, that is, image plus crop. This means there may be multiple recent background settings that use the same picture but with different crops. A crop should be saved whenever you leave the “Background” screen. After a fresh install, this list should be pre-populated with the default images from the most recent Ubuntu contest.
Line 44: Line 44:

When you select a new image in staged mode, and it is not the size of the screen, by default it should be cropped to fill the display.
Line 53: Line 51:

[[https://design.ubuntu.com/apps/patterns/gestures#application-gestures|The standard gestures]] should zoom and pan the picture to choose the area (bug Bug:1368286). In case you do not realize this, if you have been on the “Background” screen for five seconds after making a selection, without doing anything else, the “Pinch to crop” hint should fade in and out over two seconds, followed by the “Drag to move” hint. The hints should not appear if the current image is exactly the size of the phone screen (suggesting that it was supplied specifically to be used, uncropped, on that handset).
Line 72: Line 68:
=== Windowed mode === === Windowed mode layout ===
Line 76: Line 72:
=== With external display === === Background image rendering: Tiled, Stretched, Cropped ===
Line 78: Line 74:
==== Minimal implementation ==== Whenever you select a new image, its default rendering on each display should be whichever is most likely to suit that image on that display, but you should be able to change the rendering using a radio menu.
Line 80: Line 76:
There should be no extra UI for setting the external display background. Instead, the image chosen for the device display should be reused on the external display: ||'''Option'''||'''Enabled'''||'''Use as default'''||
||“'''Tiled'''”, with one tile exactly centered on the center of the display||If image pixel size is less than the display’s in either dimension||1. If image pixel size is less than 1/4 the display pixel size in either dimension||
||“'''Fit'''” exactly on the display||If image is at least as large as the display, with exactly the same aspect ratio (for example, exactly the same pixel size)||2. If image is at least as large as the display, with exactly the same aspect ratio||
||“'''Stretched'''”, scaled differently in each dimension to exactly fill the display in both||Always||3. If image’s aspect ratio is within 10% of the display’s||
||“'''Cropped'''”, scaled proportionally at least enough to fill the display in both dimensions||If image does ''not'' have exactly the same aspect ratio as the display||4. In any other case||
Line 82: Line 82:
{{attachment:Convergent_wallpaper.jpg}} Whenever the menu is set to “Cropped”, and you have a touchscreen or multi-touch touchpad, [[https://design.ubuntu.com/apps/patterns/gestures#application-gestures|the standard gestures]] should resize and pan the picture to choose the cropped area (bug Bug:1368286).
Line 84: Line 84:
==== Eventual implementation ==== In case you do not realize this:
Line 86: Line 86:
{{attachment:background.pocket.png}} {{attachment:background-phone.pocket.jpg}} {{attachment:background-external.pocket.jpg}}  * Whenever you have been on the “Background” screen for five seconds without changing anything, the “Drag to crop” hint should fade in and out over two seconds.
Line 88: Line 88:
When an external display is connected, the top-level “Background” screen should instead show two previews: one labelled with the name of the device model, the other “External Display”.  * Unless you have moved a pointing device in the meantime, this should be followed by the “Pinch to resize” animation fading in and out.
Line 90: Line 90:
Choosing either display should navigate down the page stack to a “{model name}” or “External Display” screen. Both screens should have the same layout and behavior as the “Background” screen for a standalone phone, except that the “External Display” screen should:
 * show its preview in a frame that matches the external display’s aspect ratio and orientation;
 * contain a radio menu with “Stretch to fill”, “Crop to fill”, and “Tile” options;
 * show the “New” and “Recent” text in the normal UI color without a shadow (since here they aren’t over a background image); and
 * have “New” and “Recent” buttons that also match the external display’s aspect ratio and orientation.
 * Whenever you move a pointing device (indicating that you aren’t ''using'' a multi-touch input device, even if you have one), a “Size:” slider should appear instead.
Line 96: Line 92:
When you select an image for an external display background, the default fill option should be:
 * “Tile” if the selected image is less than 2/3 the width and/or less than 2/3 the height of the display; or else
 * “Stretch to fill” if the image is within 20% of the aspect ratio of the display; or else
 * “Crop to fill”.
 * Over any non-control part of the screen (in staged mode) or the preview (in windowed mode), the cursor should be a grabbing hand, indicating that you can drag to change the crop.
Line 102: Line 95:
== Launcher & Menus == == Launcher ==
Line 104: Line 97:
{{attachment:launcher-and-menus.png}} {{attachment:launcher.phone.png}} ||<^ style="border:none">{{attachment:launcher-settings.narrow.png}}||<^ style="border:none">{{attachment:launcher-settings.wide.png}}||
Line 106: Line 99:
The “Launcher & Menus” panel should be present only when any of the settings apply. If you change the environment such that they no longer apply (for example, disconnect an external display and remove any mouse), System Settings should automatically navigate back to the main screen. It is practical to persist or resize the Launcher only on large displays.

Therefore, The “Launcher” '''category should be present''' only when one or more display at least 90 GU wide is currently detected (for example, the built-in display). If you are on the panel at the moment that this stops being true (for example, on a phone when you disconnect the only external display), System Settings should automatically navigate back to the main screen.

The introductory label “'''On large displays:'''” should be present if the current display does not fall into this category (to explain why the settings aren’t applying to the display that you’re looking at).

''Other details TBD''

Background settings

“Background” refers to the area behind all open windows in windowed mode, and to the welcome (lock) screen in staged mode.

Access

background-access.png

On the System Settings main screen, the “Background” icon should include a thumbnail of the currently selected background. Therefore, all the backgrounds in the icon should reflect the aspect ratio of the current display.

Structure

When choosing a background, by far the best representation is seeing the full-size background on the screen itself. This avoids frustration from choosing an image that has too low resolution, or from cropping an image poorly, and not being able to see the problem until you have exited. It’s also more fun.

Achieving this representation requires custom behavior in two ways.

First, each display should have its own Background UI. (This is unlike Display settings, where all displays must be configurable on the primary display because a misconfigured display might not be working at all.)

Second, the UI for each display should let you see the background on that display:

  • In staged mode, System Settings should be full-screen whenever you are on the “Background” panel, and the header should be semi-transparent, so that you can see the background behind it.

  • In windowed mode, all non-System-Settings windows should be transparent whenever you are in the “Background” panel, so that you can see the background around the System Settings window, with only outlines remaining to reassure you that they are still open. As soon as you switch to another panel, or close, minimize, or unfocus System Settings, all other windows should resume visibility.

You can’t pinch or drag the real background to resize or crop it, so the windowed mode needs its own control for that. Therefore, the Background UI must be different in staged mode than in windowed mode.

Staged mode

Windowed mode

Primary display

background.pc.mini.png

Other display

Staged mode layout

background.phone.jpgbackground-pinch.phone.jpgbackground-drag.phone.jpg

background.tablet.png

“New”, “Recent”, “Pinch to crop”, and “Drag to move” should all be white text with a centered shadow, so that you can read them against any background.

Tapping “New” should open a picker for selecting a new image, including an “Ubuntu Backgrounds” collection (bug 1288364) that does not appear when the picker is called from other apps. (Alternatively, this collection should be placed by default in the Gallery app.)

The “Recent” list should consist of the ten most recently chosen distinct background settings, that is, image plus crop. This means there may be multiple recent background settings that use the same picture but with different crops. A crop should be saved whenever you leave the “Background” screen. After a fresh install, this list should be pre-populated with the default images from the most recent Ubuntu contest.

If you choose a new image, that image should zoom up from the “New” button to be shown as the current background. And if if you tap any of the “Recent” items, that image should similarly zoom up to become the current background. At the same time, any “Recent” items to its left should slide along one spot, making way for the previous selection to zoom down to become the most “Recent” item. If you chose a new image, the least recent setting should disappear from the list.

Long-pressing a “Recent” item should reveal a context menu with a single item, “Delete”. (Deleting recent background settings will be a rarely-needed function, usually wanted only after relationship breakups.)

In the usual case where there is not enough room to show the “New” button plus all the “Recent” items in a single row:

  • The entire row should be scrollable horizontally.
  • To indicate that there is more off-screen, the spacing between the “Recent” items should be expanded if necessary depending on the screen size, just enough that one of them is between 1/3 and 2/3 half off-screen.
  • The scroll position should reset whenever you return to the screen (so that you don’t lose sight of the “New” button) or choose a different background (so that you can see the previous selection become the new most recent, and undo it if necessary).

Windowed mode layout

background.pc.png

Background image rendering: Tiled, Stretched, Cropped

Whenever you select a new image, its default rendering on each display should be whichever is most likely to suit that image on that display, but you should be able to change the rendering using a radio menu.

Option

Enabled

Use as default

Tiled”, with one tile exactly centered on the center of the display

If image pixel size is less than the display’s in either dimension

1. If image pixel size is less than 1/4 the display pixel size in either dimension

Fit” exactly on the display

If image is at least as large as the display, with exactly the same aspect ratio (for example, exactly the same pixel size)

2. If image is at least as large as the display, with exactly the same aspect ratio

Stretched”, scaled differently in each dimension to exactly fill the display in both

Always

3. If image’s aspect ratio is within 10% of the display’s

Cropped”, scaled proportionally at least enough to fill the display in both dimensions

If image does not have exactly the same aspect ratio as the display

4. In any other case

Whenever the menu is set to “Cropped”, and you have a touchscreen or multi-touch touchpad, the standard gestures should resize and pan the picture to choose the cropped area (bug 1368286).

In case you do not realize this:

  • Whenever you have been on the “Background” screen for five seconds without changing anything, the “Drag to crop” hint should fade in and out over two seconds.
  • Unless you have moved a pointing device in the meantime, this should be followed by the “Pinch to resize” animation fading in and out.
  • Whenever you move a pointing device (indicating that you aren’t using a multi-touch input device, even if you have one), a “Size:” slider should appear instead.

  • Over any non-control part of the screen (in staged mode) or the preview (in windowed mode), the cursor should be a grabbing hand, indicating that you can drag to change the crop.

“Launcher”

launcher-settings.narrow.png

launcher-settings.wide.png

It is practical to persist or resize the Launcher only on large displays.

Therefore, The “Launcher” category should be present only when one or more display at least 90 GU wide is currently detected (for example, the built-in display). If you are on the panel at the moment that this stops being true (for example, on a phone when you disconnect the only external display), System Settings should automatically navigate back to the main screen.

The introductory label “On large displays:” should be present if the current display does not fall into this category (to explain why the settings aren’t applying to the display that you’re looking at).

Other details TBD

Appearance (last edited 2020-01-14 12:20:47 by mpt)