Appearance

Differences between revisions 26 and 54 (spanning 28 versions)
Revision 26 as of 2015-10-31 21:28:58
Size: 7533
Editor: staticline-31-183-169-31
Comment:
Revision 54 as of 2020-01-14 12:20:47
Size: 13079
Editor: mpt
Comment: show only Yaru variations, to avoid visually disparaging non-Yaru themes
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
<<Anchor(eventual)>>
Line 5: Line 3:
== Phone and tablet == == Ubuntu desktop ==
Line 7: Line 5:
On the phone and tablet, the only appearance configuration should be setting the background picture for the welcome screen (bug Bug:1297418). Therefore the screen should be called simply “Background”. A single “Appearance” panel should provide a setting for choosing a Yaru variant (Light, Standard, or Dark), and settings for the Launcher.
Line 9: Line 7:
||<tablestyle="clear:both;float:left;margin:0 1em 1em 0" style="border:none">{{attachment:background.phone.png}}|| {{attachment:appearance-settings-2020.png}}
Line 11: Line 9:
The “Background” screen should contain:
 * An “Ubuntu Art” expandable section, containing the default background and several others that are installed by default (bug Bug:1288364).
 * One named expandable section for each extra set of backgrounds installed, if any (bug Bug:1294203). Each of these sections should have a small delete button opposite its name. Choosing it should open an alert asking ‘Delete all {number} images in “{name of set}” from your phone?’, with “Cancel” and “Delete All” buttons, where “Delete All” uninstalls the set.
 * A “Recent Images” expandable section, containing up to ten images that you have used recently that are not in any of the other sections, and having the same kind of delete button opposite its name. In this case, choosing it should simply change the button to read “Clear”. If you tap it again, the recent images should be cleared (except for the one you are using right now, if it is in this section). If you tap anywhere else, the delete button should revert to its original state.
 * A panel, fixed to the bottom of the screen, with a “Choose Another Image…” button.
Choosing any of the theme options should set the toolkit and cursor theme simultaneously. Whenever the current themes for toolkit and cursors are not the same, or the current theme is not Yaru (for example, selected using gnome-tweak-tool), the list should show nothing selected.
Line 17: Line 11:
The section containing the currently selected image should ''always'' be expanded (bug Bug:1362125), to avoid you losing track of it. (All other sections should be collapsed by default.) One consequence is that if you delete the currently-used image, so that a previously-used image becomes selected, the section containing that previously-used image should expand by itself if it wasn’t expanded already. The always-expanded state should be denoted by a greyed-out bullet • symbol taking the place of the usual ▶ collapsed or ▼ expanded symbol. Whenever the “Appearance” panel opens, the list of themes should be scrolled, if necessary, to show the current selection.
Line 19: Line 13:
## ||<^ tablestyle="clear:both;float:left;margin:0 1em 1em 0" style="border:none">{{attachment:phone-background.png}}||<^ style="border:none;width:310px">{{attachment:phone-background.mockup.png}}<<BR>>''Erratum: “Dashboard” should be “Home screen”.''|| == Theme snap installation ==
Line 21: Line 15:
## In the “Background” panel, “Welcome screen” and “Home screen” should be thumbnails of the actual screens — complete with tint and infographic for the welcome screen, and Dash contents for the home screen. (This conveys whether, and if so how much, the current background makes each screen less readable.) Whenever a theme change is detected, if
 * there are any installed snaps that don’t contain or link to that theme, and
 * the Snap Store contains a snap providing that theme,
then a “Change Theme” prompt should appear. (It doesn’t matter if the prompt takes ten or twenty seconds to appear.)
Line 23: Line 20:
## If “Different background for each” is set and you choose “Same background for both”, the most recently chosen background should immediately be copied to the other screen. Conversely, if “Same background for both” is set and you choose “Different background for each”, the ''least'' recently changed screen should return to its previously set background, if that background picture still exists on the device, even if it was last used as a background months ago. (This allows easy undo of syncing the backgrounds.) If that background picture no longer exists on the device, the screen should change to its default picture. {{attachment:theme-snap-prompt.png}}

The snap icon, title, publisher, and rating should be presented the same way as on [[https://snapcraft.io/store|the Snap Store]].

If you choose “Download Now”, the dialog should morph so that the question is replaced by a progress indicator, while the caption and commit buttons are removed.

{{attachment:theme-snap-downloading.png}}

The first half of the progress bar should be allocated to “Downloading extra theme package…”, and the second half to “Installing extra theme package…”. (This is the same allocation used for [[SoftwareUpdates#Installing|software updates]], and could be updated based on download- and install-speed metrics.)

If any error occurs during the download or installation progress, the dialog should morph to become an error alert.

{{attachment:theme-snap-error.png}}

If installation succeeds, and no applicable snaps are currently running, the primary text should change to “Installation complete” for two seconds, then the dialog should close automatically.

If any applicable snaps ''are'' currently running, the dialog should morph to display each of them with its own Relaunch button, plus “Skip” and “Relaunch All” buttons.

{{attachment:theme-snap-success.png}}

Clicking any of the relaunch buttons should send a signal to the relevant app(s) to close, and once they do, should launch them again.

If any listed app closes, whether because it was relaunched here or for any other reason, it should disappear from the list. If the list becomes empty, the dialog should close automatically.

== Ubuntu Touch ==

=== “Background” ===

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

==== Access ====

{{attachment: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 [[BrightnessAndDisplays|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 controls for that. Therefore, the Background UI must be different in staged mode than in windowed mode.

|| ||'''Staged mode'''||'''Windowed mode'''||
||'''The display that System Settings has been on'''||<^>{{attachment:background.wide.mini.png}}||<^>{{attachment:background.windowed-primary.mini.png}}||
||'''Any other display''', when “Different background on each display” is chosen||<^>{{attachment:background.staged-secondary.mini.png}}||<^>{{attachment:background.windowed-secondary.mini.png}}||

==== Staged mode layout ====

{{attachment:background.wide.gif}}

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

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.)

After a fresh install, the “'''Recent'''” list should should be pre-populated with the default images from the most recent Ubuntu contest. Otherwise, it should consist of the ten most recently chosen distinct '''background settings''' — that is, an image [[#rendering|rendered]] in a particular way. This means there may be multiple recent background settings that use the same picture but with different renderings. A background setting should be saved whenever you leave the “Background” screen.

If you '''choose''' a new image, that image should zoom up from the “New” button to be shown as the current background, following its [[#rendering|appropriate default rendering]]. If you choose any of the “Recent” items, that image should similarly zoom up from its thumbnail 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 popover 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. That is, it should be a horizontally-scrolling list spanning the screen, with transparent background and no border.
 * 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 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).

{{attachment:background.staged-secondary.png}}

Whenever “Different background on each display” is chosen, on each other display a full-screen dialog should appear for configuring the background for that display.

## If “Different background for each display” is set and you choose “Same background for all displays”, the most recently chosen background should immediately be copied to the other screen. Conversely, if “Same background for both” is set and you choose “Different background for each”, the ''least'' recently changed screen should return to its previously set background, if that background picture still exists on the device, even if it was last used as a background months ago. (This allows easy undo of syncing the backgrounds.) If that background picture no longer exists on the device, the screen should change to its default picture.
Line 27: Line 101:
## ||<tablestyle="clear:both" style="border:none">|| ==== Windowed mode layout ====
Line 29: Line 103:
## ||<^ tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:phone-background-welcome.png}}||<^ style="border:none;width:310px">{{attachment:phone-background-welcome.mockup.png}}<<BR>>''Errata: “Import” should be “Photo/Image”, and “Camera” should not be present.''|| The windowed mode layout is different, so that it can contain a correctly-proportioned thumbnail for dragging.
Line 31: Line 105:
## All of those screens should show one or two sections: “Ubuntu Art” showing all pre-installed artwork (with the default image listed first), and “Custom” if you have added any images to the collection. The current background should have a frame around it. The toolbar should always be visible, with “Photo/Image” and “Remove” buttons. {{attachment:background.windowed-primary.png}}
Line 33: Line 107:
||<tablestyle="clear:both" style="border:none">|| Similar to the staged mode layout, whenever “Different background on each display” is chosen, on each other display a parentless dialog should appear for configuring the background for that display.
Line 35: Line 109:
||<^ tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:phone-background-area.png}}||<^ style="border:none;width:310px">{{attachment:phone-background-chooser-picture.mockup.jpg}}<<BR>>''Errata: “Position and size” should be “Choose Area”. A “Best Fit” button should be present. And “Set wallpaper” should be “Set”.''|| {{attachment:background.windowed-secondary.png}}
Line 37: Line 111:
Choosing “Choose Another Image…” should open [[https://docs.google.com/document/d/1trse15NokU8IJ5lm3BnUi7oMNTCkUnYNHeAHZdtzFoQ/edit#heading=h.woe7j0vyqk0u|an image picker]]. Choosing an image from the image picker should open a “Choose Area” full-screen dialog. <<Anchor(rendering)>>
==== Background image rendering: Tiled, Fit/Stretched, Cropped ====
Line 39: Line 114:
If the image was already present in “Recent Images”, by default the “Choose Area” dialog should show it at its previously chosen size and position. Otherwise, by default it should be centered and scaled to the smallest size that fills the screen. The “Best Fit” button should return to this scale and position, and be insensitive whenever the picture is already at that scale and position. [[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). If you do nothing for five seconds, gesture arrows should pulse into view in the center of the screen, hinting at how to zoom the picture. 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 41: Line 116:
Choosing a picture from “Ubuntu Art” or any of the other sections should open a similar “Preview” full-screen dialog, but with no zooming and panning, and just “Cancel” and “Set” buttons, because that art is already optimized for the screen size. ||'''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||If “Fit” is not present||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 43: Line 122:
The “Preview” and “Choose Area” dialogs should be unique in that '''the top bar, header, and toolbar should all be semi-transparent''', so that you can see what part of the background picture will be visible when those elements are not present. <<Anchor(cropping)>>
==== Cropping ====
Line 45: Line 125:
If you choose “Set”, the background should be set, and the zoomed and panned area of the image should animatedly shrink down to become the first (and selected) item in the “Recent Images” section, with the screen scrolling to reveal it if necessary (bug Bug:1368809). It should be possible to add the same image more than once with different zoom/pan settings. Whenever the rendering for the current image 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). In case you do not realize this:
Line 47: Line 127:
||<tablestyle="clear:both" style="border:none">||  * Whenever you have been on the “Background” screen for five seconds without changing anything, the “Drag to move” hint should fade in and out over two seconds.
Line 49: Line 129:
== PC ==  * Unless you have moved a pointing device in the meantime, this should be followed by the “Pinch to crop” animation fading in and out.
Line 51: Line 131:
=== Ubuntu 14.04 ===  * 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, so that you can resize the image without pinching.
Line 53: Line 133:
The “Appearance” panel’s “Behavior” [sic] tab should include “Show the menus for a window:” radio buttons, “In the menu bar” and “In the window’s title bar”.  * 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 move the image.
Line 55: Line 135:
{{attachment:launcher-and-menus-menus.png}} <<Anchor(launcher)>>
=== “Launcher” ===
Line 57: Line 138:
=== Ubuntu 14.10 === ||<^ style="border:none">||<^ style="border:none">{{attachment:launcher-settings.wide.mockup.png}}||
Line 59: Line 140:
The Launcher settings should be moved from their three previous locations (“Look”, “Behavior”, and “Displays”) into a single “Launcher & Menus” panel, including the previous menu settings. This will make the Launcher settings easier to find, and also make the contents of the “Background & Theme” panel closer to the “Background” panel on phone and tablet. ''Errata:
 * “System settings” should be “System Settings”
 * The intro label “Launcher appearance:” should be present
 * “Video and games” should be “Full screen videos and games”''
Line 61: Line 145:
{{attachment:launcher-and-menus.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.

In addition, the introductory label should be “'''Launcher appearance on large displays:'''” 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), and just “Launcher appearance:” otherwise.

Clicking/tapping a diagram should function exactly the same as clicking/tapping the radio button below it.

Ubuntu desktop

A single “Appearance” panel should provide a setting for choosing a Yaru variant (Light, Standard, or Dark), and settings for the Launcher.

appearance-settings-2020.png

Choosing any of the theme options should set the toolkit and cursor theme simultaneously. Whenever the current themes for toolkit and cursors are not the same, or the current theme is not Yaru (for example, selected using gnome-tweak-tool), the list should show nothing selected.

Whenever the “Appearance” panel opens, the list of themes should be scrolled, if necessary, to show the current selection.

Theme snap installation

Whenever a theme change is detected, if

  • there are any installed snaps that don’t contain or link to that theme, and
  • the Snap Store contains a snap providing that theme,

then a “Change Theme” prompt should appear. (It doesn’t matter if the prompt takes ten or twenty seconds to appear.)

theme-snap-prompt.png

The snap icon, title, publisher, and rating should be presented the same way as on the Snap Store.

If you choose “Download Now”, the dialog should morph so that the question is replaced by a progress indicator, while the caption and commit buttons are removed.

theme-snap-downloading.png

The first half of the progress bar should be allocated to “Downloading extra theme package…”, and the second half to “Installing extra theme package…”. (This is the same allocation used for software updates, and could be updated based on download- and install-speed metrics.)

If any error occurs during the download or installation progress, the dialog should morph to become an error alert.

theme-snap-error.png

If installation succeeds, and no applicable snaps are currently running, the primary text should change to “Installation complete” for two seconds, then the dialog should close automatically.

If any applicable snaps are currently running, the dialog should morph to display each of them with its own Relaunch button, plus “Skip” and “Relaunch All” buttons.

theme-snap-success.png

Clicking any of the relaunch buttons should send a signal to the relevant app(s) to close, and once they do, should launch them again.

If any listed app closes, whether because it was relaunched here or for any other reason, it should disappear from the list. If the list becomes empty, the dialog should close automatically.

Ubuntu Touch

“Background”

“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 controls for that. Therefore, the Background UI must be different in staged mode than in windowed mode.

Staged mode

Windowed mode

The display that System Settings has been on

background.wide.mini.png

background.windowed-primary.mini.png

Any other display, when “Different background on each display” is chosen

background.staged-secondary.mini.png

background.windowed-secondary.mini.png

Staged mode layout

background.wide.gif

“New”, “Recent”, “Pinch to crop”, and “Drag to move” should all be white text with a black outline, 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.)

After a fresh install, the “Recent” list should should be pre-populated with the default images from the most recent Ubuntu contest. Otherwise, it should consist of the ten most recently chosen distinct background settings — that is, an image rendered in a particular way. This means there may be multiple recent background settings that use the same picture but with different renderings. A background setting should be saved whenever you leave the “Background” screen.

If you choose a new image, that image should zoom up from the “New” button to be shown as the current background, following its appropriate default rendering. If you choose any of the “Recent” items, that image should similarly zoom up from its thumbnail 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 popover 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. That is, it should be a horizontally-scrolling list spanning the screen, with transparent background and no border.
  • 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 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).

background.staged-secondary.png

Whenever “Different background on each display” is chosen, on each other display a full-screen dialog should appear for configuring the background for that display.

Windowed mode layout

The windowed mode layout is different, so that it can contain a correctly-proportioned thumbnail for dragging.

background.windowed-primary.png

Similar to the staged mode layout, whenever “Different background on each display” is chosen, on each other display a parentless dialog should appear for configuring the background for that display.

background.windowed-secondary.png

Background image rendering: Tiled, Fit/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

If “Fit” is not present

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

Cropping

Whenever the rendering for the current image 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 move” 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 crop” 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, so that you can resize the image without pinching.

  • 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 move the image.

“Launcher”

launcher-settings.wide.mockup.png

Errata:

  • “System settings” should be “System Settings”
  • The intro label “Launcher appearance:” should be present
  • “Video and games” should be “Full screen videos and games”

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.

In addition, the introductory label should be “Launcher appearance on large displays:” 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), and just “Launcher appearance:” otherwise.

Clicking/tapping a diagram should function exactly the same as clicking/tapping the radio button below it.

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