Appearance

Differences between revisions 1 and 27 (spanning 26 versions)
Revision 1 as of 2013-04-04 15:34:51
Size: 2609
Editor: mpt
Comment: initial draft
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)
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
== Phone == <<Anchor(eventual)>>
Line 3: Line 3:
On the phone, apart from [[Accessibility/Specs/Settings|accessibility settings described elsewhere]], the only visual configuration should be setting the background pictures for the welcome screen and home screen. <<TableOfContents>>
Line 5: Line 5:
{{attachment:phone-background.png}} == Phone and tablet ==
Line 7: Line 7:
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 is to convey whether, and if so how much, the current background makes each screen less readable. {{attachment:background-access.png}}
Line 9: Line 9:
Whenever “Same background for both” is set, the welcome screen and home screen previews should function as a single tappable button, navigating to a “Choose Background” screen. Whenever “Different backgrounds for each” is set, the previews should function as two separate buttons, navigating to a “Welcome Screen” or “Home Screen” screen respectively. 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.
Line 11: Line 11:
{{attachment:phone-background-chooser.png}} === Without external display ===
Line 13: Line 13:
All three of those chooser screens should consist solely of a list, with items for “Ubuntu Art”, “Camera Photos” (insensitive if there are none), and an item for each album in the gallery, each sensitive if it contains photos (or one insensitive “Gallery is empty” item if there are no albums). '''Test case:''' In the Gallery, create an album with no photos. Switch to this screen in System Settings: the album should be represented by an insensitive item. Switch back to the Gallery and put a photo in the album. Switch back to this screen in System Settings: the album’s item should now be sensitive. {{attachment:background.phone.jpg}}{{attachment:background-pinch.phone.jpg}}{{attachment:background-drag.phone.jpg}}
Line 15: Line 15:
{{attachment:phone-background-chooser-album.png}} 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.
Line 17: Line 17:
Choosing any of the items should navigate to a screen of picture thumbnails, where the header is the name of the item. 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).
Line 19: Line 19:
{{attachment:phone-background-chooser-picture.png}} Tapping the “New” button 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.
Line 21: Line 21:
Choosing a picture from “Ubuntu Art” should navigate to a “Preview” screen, because that art is already optimized for the screen size. Choosing a picture from any other source should navigate to a “Choose Area” screen, with a “Best Fit” button that crops the picture just enough for the remainder to scale to fill the screen. Either way, this screen 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 they are not present. 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.
Line 23: Line 23:
Choosing “Set” should set the background(s) and navigate back to the top-level “Background” screen, because its thumbnails display confirmation of what you’ve done. 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 feature, usually wanted only after breakups.)

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

## ||<^ 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”.''||

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

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

## Whenever “Same background for both” is set, the welcome screen and home screen thumbnails combined should function as a single tappable button, navigating to a “Choose Background” screen. Whenever “Different backgrounds for each” is set, the thumbnails should function as two separate buttons, navigating to a “Welcome Screen” or “Home Screen” screen respectively.

## ||<tablestyle="clear:both" style="border:none">||

## ||<^ 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.''||

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

||<tablestyle="clear:both" style="border:none">||

=== With external display ===

{{attachment:background.pocket.png}} {{attachment:background-phone.pocket.jpg}}

When an external display is connected, the top-level “Background” screen should instead show two previews: “Phone” and “External”.

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.

Background settings for the phone display and the external display should be completely independent.

== PC ==

=== Ubuntu 14.04 ===

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

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

=== Ubuntu 14.10 ===

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.

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

Phone and tablet

background-access.png

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.

Without external display

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

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

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.

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

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

With external display

background.pocket.png background-phone.pocket.jpg

When an external display is connected, the top-level “Background” screen should instead show two previews: “Phone” and “External”.

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.

Background settings for the phone display and the external display should be completely independent.

PC

Ubuntu 14.04

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

launcher-and-menus-menus.png

Ubuntu 14.10

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.

launcher-and-menus.png

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