Appearance

Differences between revisions 1 and 20 (spanning 19 versions)
Revision 1 as of 2013-04-04 15:34:51
Size: 2609
Editor: mpt
Comment: initial draft
Revision 20 as of 2014-06-27 14:06:51
Size: 7609
Editor: mpt
Comment: reverts from long-click deletion back to a "Remove Images" mode
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
== Phone == <<Anchor(eventual)>>
== Phone/tablet ==
Line 3: Line 4:
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. 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”.
Line 5: Line 6:
{{attachment:phone-background.png}} ||<tablestyle="clear:both;float:left;margin:0 1em 1em 0" style="border:none">{{attachment:background.single.phone.png}}||
Line 7: Line 8:
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. The “Background” screen should consist of two or more expandable sections:
 * “Ubuntu Art”, containing the default background and several others that are installed by default.
 * One named 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 “Custom” section, containing any images that you have added to it and not deleted since, followed by “Add an Image…” and “Remove Images…” buttons.
Line 9: Line 13:
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. The section containing the currently selected image should always be expanded, 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 bullet • symbol taking the place of the usual ▶ collapsed or ▼ expanded symbol.
Line 11: Line 15:
{{attachment:phone-background-chooser.png}} ## ||<^ 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”.''||
Line 13: Line 17:
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. ## 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.)
Line 15: Line 19:
{{attachment:phone-background-chooser-album.png}} ## 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.
Line 17: Line 21:
Choosing any of the items should navigate to a screen of picture thumbnails, where the header is the name of the item. ## 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.
Line 19: Line 23:
{{attachment:phone-background-chooser-picture.png}} ## ||<tablestyle="clear:both" style="border:none">||
Line 21: Line 25:
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. ## ||<^ 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.''||
Line 23: Line 27:
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. ## 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.

Choosing “Add an Image…” should open [[https://docs.google.com/a/canonical.com/document/d/1FlEXK4lTXpw1jgHzqWBYYLVRGqcJ0_b3KhbQmeN2oEk/edit#|an image picker]]. Choosing an image from the image picker, ''or'' an existing image in the “Custom” collection, should open a “Choose Area” full-screen dialog.

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

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

If the image was already present in “Custom”, 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. [[http://design.ubuntu.com/apps/get-started/gestures|The standard gestures]] should zoom and pan the picture to choose the area. 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.

Choosing a picture from “Ubuntu Art” 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.

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.

If you choose “Set”, the zoomed and panned area of the image should be added as the last item in the “Custom” area, with the screen scrolling to reveal it if necessary. It should be possible to add the same image more than once with different zoom/pan settings.

Choosing “Set” should set the background(s), and then navigate back to the top-level “Background” screen, because its thumbnails display confirmation of what you’ve done. No extra notification is necessary.

If you choose “Remove Images…”, the “Add an Image…” and “Remove Images…” buttons should temporarily be replaced by “Cancel” and “No Images Selected” buttons, and the images in the “Custom” section should become selectable. “No Images Selected” should be insensitive whenever no images are selected. Whenever any images are selected, it should read “Remove {number} Images” instead, and choosing it should remove the selected images.

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

== 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/tablet

On the phone and tablet, the only appearance configuration should be setting the background picture for the welcome screen (bug 1297418). Therefore the screen should be called simply “Background”.

background.single.phone.png

The “Background” screen should consist of two or more expandable sections:

  • “Ubuntu Art”, containing the default background and several others that are installed by default.
  • One named section for each extra set of backgrounds installed, if any (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 “Custom” section, containing any images that you have added to it and not deleted since, followed by “Add an Image…” and “Remove Images…” buttons.

The section containing the currently selected image should always be expanded, 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 bullet • symbol taking the place of the usual ▶ collapsed or ▼ expanded symbol.

Choosing “Add an Image…” should open an image picker. Choosing an image from the image picker, or an existing image in the “Custom” collection, should open a “Choose Area” full-screen dialog.

phone-background-area.png

phone-background-chooser-picture.mockup.jpg
Errata: “Position and size” should be “Choose Area”. A “Best Fit” button should be present. And “Set wallpaper” should be “Set”.

If the image was already present in “Custom”, 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. The standard gestures should zoom and pan the picture to choose the area. 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.

Choosing a picture from “Ubuntu Art” 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.

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.

If you choose “Set”, the zoomed and panned area of the image should be added as the last item in the “Custom” area, with the screen scrolling to reveal it if necessary. It should be possible to add the same image more than once with different zoom/pan settings.

Choosing “Set” should set the background(s), and then navigate back to the top-level “Background” screen, because its thumbnails display confirmation of what you’ve done. No extra notification is necessary.

If you choose “Remove Images…”, the “Add an Image…” and “Remove Images…” buttons should temporarily be replaced by “Cancel” and “No Images Selected” buttons, and the images in the “Custom” section should become selectable. “No Images Selected” should be insensitive whenever no images are selected. Whenever any images are selected, it should read “Remove {number} Images” instead, and choosing it should remove the selected images.

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)