Appearance

Differences between revisions 27 and 32 (spanning 5 versions)
Revision 27 as of 2015-11-01 21:40:42
Size: 6799
Editor: mpt
Comment: big simplification, removing sets, and adding background for external displays; - bug 1297418 (fixed)
Revision 32 as of 2016-02-04 12:00:20
Size: 8692
Editor: mpt
Comment: minimal dual-display screen for ease of implementation; "Phone" -> model name
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
<<Anchor(eventual)>>
Line 5: Line 3:
== Phone and tablet == == Background settings ==
Line 9: Line 7:
On the phone and tablet, the only appearance configuration should be setting the background picture for the welcome screen. Therefore the screen should be called simply “Background”. On the home screen, the “Background” icon should include a thumbnail of the currently selected background. On the System Settings main screen, the “Background” icon should include a thumbnail of the currently selected background.
Line 15: Line 13:
To minimize interaction needed, in the normal case where there is no external display, the “Background”screen should act as its own preview. Therefore, it should customize the header bar to 50% opacity, so that you can see the current background in exactly the current crop.

The row of “New” plus “Recent” items should be scrollable horizontally if necessary. 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).
To minimize interaction needed, in staged mode case where there is no external display, the “Background” screen should act as its own preview. Therefore:
 * Its header background should have custom 50% opacity, so that you can see the current background cropped as it would be on the welcome screen.
 * “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.
Line 25: Line 23:
Long-pressing a “Recent” item should reveal a context menu with a single item, “Delete”. (Deleting recent background settings will be a rarely-needed feature, usually wanted only after breakups.) When you select a new image for a phone background, and it is not the size of the screen, by default it should be cropped to fill the display.
Line 27: Line 25:
[[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, iIf 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). 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).

[[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 47: Line 52:
{{attachment:background.pocket.png}} {{attachment:background-phone.pocket.jpg}} ==== Top-level screen: Minimal implementation ====
Line 49: Line 54:
When an external display is connected, the top-level “Background” screen should instead show two previews: “Phone” and “External”. ||<tablestyle="float:right;margin:0 0 1em 1em" style="border:none">{{background-dual.preliminary.phone.png}}||
Line 51: Line 56:
Tapping either of them should navigate down the page stack to a “Phone” or “External Display” screen, that behaves the same way as the “Background” screen does for a standalone phone. For speed of implementation, whenever an external display is connected, the top-level “Background” screen should consist solely of two list items: one the name of the device model, the other “External Display”.
Line 53: Line 58:
Background settings for the phone display and the external display should be completely independent. ||<tablestyle="clear:both" style="border:none">||
==== Top-level screen: Eventual implementation ====
Line 55: Line 61:
== PC == ||<tablestyle="float:right;margin:0 0 1em 1em" style="border:none">{{attachment:background.pocket.png}}||
Line 57: Line 63:
=== Ubuntu 14.04 === 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”.
Line 59: Line 65:
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”. ||<tablestyle="clear:both" style="border:none">||
==== Secondary screens ====
Line 61: Line 68:
{{attachment:launcher-and-menus-menus.png}} ||<tablestyle="float:left;margin:0 0 1em 1em" style="border:none">{{attachment:background-phone.pocket.jpg}} {{attachment:background-external.pocket.jpg}}||
Line 63: Line 70:
=== Ubuntu 14.10 === 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.
Line 65: Line 76:
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. 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”.
Line 67: Line 81:
{{attachment:launcher-and-menus.png}} For a minimal implementation, background settings for the internal and external displays should be completely independent.

== Launcher & Menus ==

{{attachment:launcher-and-menus.png}} {{attachment:launcher.phone.png}}

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.

Background settings

background-access.png

On the System Settings main screen, the “Background” icon should include a thumbnail of the currently selected background.

Without external display

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

To minimize interaction needed, in staged mode case where there is no external display, the “Background” screen should act as its own preview. Therefore:

  • Its header background should have custom 50% opacity, so that you can see the current background cropped as it would be on the welcome screen.
  • “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 the “New” button 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.

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.

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.

When you select a new image for a phone background, and it is not the size of the screen, by default it should be cropped to fill the display.

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

The standard gestures should zoom and pan the picture to choose the area (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).

With external display

Top-level screen: Minimal implementation

background-dual.preliminary.phone.png

For speed of implementation, whenever an external display is connected, the top-level “Background” screen should consist solely of two list items: one the name of the device model, the other “External Display”.

Top-level screen: Eventual implementation

background.pocket.png

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

Secondary screens

background-phone.pocket.jpg background-external.pocket.jpg

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.

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

For a minimal implementation, background settings for the internal and external displays should be completely independent.

Launcher & Menus

launcher-and-menus.png launcher.phone.png

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.

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