[gnome-devel-docs] HIG: add a pattern for OSD controls
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] HIG: add a pattern for OSD controls
- Date: Tue, 21 Jul 2015 14:35:06 +0000 (UTC)
commit 50cf3fbfb1fb114ed637b3e406f6340086fca9cb
Author: Allan Day <allanpday gmail com>
Date: Tue Jul 21 15:34:51 2015 +0100
HIG: add a pattern for OSD controls
hig/C/figures/patterns/overlaid-controls.svg | 296 ++++++++++++++++++++++++++
hig/C/overlaid-controls.page | 41 ++++
hig/C/patterns.page | 2 +-
3 files changed, 338 insertions(+), 1 deletions(-)
---
diff --git a/hig/C/figures/patterns/overlaid-controls.svg b/hig/C/figures/patterns/overlaid-controls.svg
new file mode 100644
index 0000000..a41260f
--- /dev/null
+++ b/hig/C/figures/patterns/overlaid-controls.svg
@@ -0,0 +1,296 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="940"
+ height="540"
+ id="svg6276"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="overlaid-controls.svg">
+ <defs
+ id="defs6278" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="452.40882"
+ inkscape:cy="157.62494"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:showpageshadow="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="1136"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:snap-nodes="false"
+ inkscape:snap-bbox="true"
+ inkscape:bbox-paths="true"
+ inkscape:bbox-nodes="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid6749"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata6281">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-512.36218)">
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ ry="9"
+ rx="9"
+ y="568.86218"
+ x="127.5"
+ height="106"
+ width="685"
+ id="rect8907"
+ style="fill:#f3f3f3;fill-opacity:1;stroke:#a7aba7;stroke-width:0.99999994;stroke-opacity:1" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ mask="none"
+
style="fill:#dbdbdb;fill-opacity:1;stroke:#a7a7a7;stroke-width:0.99999994;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="rect8909"
+ width="685"
+ height="386"
+ x="127.5"
+ y="609.86218" />
+ <g
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ id="g8911"
+ transform="translate(784.0016,581.36218)"
+ style="display:inline;fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g8913"
+ transform="translate(-60,-518)" />
+ <g
+ id="g8915"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8917"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8919"
+ transform="translate(-60,-518)"
+ style="fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g8921"
+ transform="translate(19,-242)">
+ <path
+
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale
Mono';-inkscape-font-specification:'Andale
Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#888a85;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new"
+ id="path8923"
+ d="m 45,764 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858
0.6875,0.3125 L 49,766.59375 51.3125,764.3125 C 51.578125,764.082 51.759172,764.007 52,764 l 1,0 0,1 c
0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 52.906938,770.46942 52.999992,770.7347
53,771 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 49,769.4375 46.71875,771.71875 C
46.530586,771.90694 46.26529,772 46,772 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 l
2.28125,-2.25 L 45.28125,765.75 C 45.070508,765.55537 44.97809,765.28075 45,765 l 0,-1 z"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ <g
+ id="g8925"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8927"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8929"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ </g>
+ <path
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ inkscape:connector-curvature="0"
+ id="path8931"
+ d="m 771.5,580.85688 0,17.0103"
+
style="display:inline;fill:none;stroke:#a7a7a7;stroke-width:0.99999988px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
/>
+ <text
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ sodipodi:linespacing="125%"
+ id="text8933"
+ y="594.1991"
+ x="469.86316"
+
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:'Cantarell
Bold';text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#2e3436;fill-opacity:1;stroke:none"
+ xml:space="preserve"><tspan
+ y="594.1991"
+ x="469.86316"
+ id="tspan8935"
+ sodipodi:role="line">Heading</tspan></text>
+ <rect
+ y="930.86206"
+ x="266.5"
+ height="49.000004"
+ width="406"
+ id="rect8959"
+
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ mask="none"
+ rx="6"
+ ry="6" />
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="rect8961"
+ width="31"
+ height="31"
+ x="275.5"
+ y="939.86206"
+ rx="3.0000002"
+ ry="3"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ ry="3"
+ rx="3.0000002"
+ y="939.86206"
+ x="313.5"
+ height="31"
+ width="31"
+ id="rect5454"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="rect5456"
+ width="31"
+ height="31"
+ x="351.5"
+ y="939.86206"
+ rx="3.0000002"
+ ry="3"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.63999999;marker:none;enable-background:accumulate"
+ id="rect5460"
+ width="31"
+ height="31"
+ x="593.5"
+ y="939.86206"
+ rx="3.0000002"
+ ry="3"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ ry="3"
+ rx="3.0000002"
+ y="939.86206"
+ x="631.5"
+ height="31"
+ width="31"
+ id="rect5462"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.63999999;marker:none;enable-background:accumulate"
/>
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ ry="3"
+ rx="3.0000002"
+ y="787.86218"
+ x="156.5"
+ height="31"
+ width="31"
+ id="rect5478"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="rect5480"
+ width="31"
+ height="31"
+ x="752.5"
+ y="787.86218"
+ rx="3.0000002"
+ ry="3"
+ inkscape:export-filename="/home/lapo.fedora/SparkleShare/gnome-mockups/content
selection/content-selection.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <g
+ transform="translate(63.999802,48.362183)"
+ style="display:inline"
+ inkscape:label="go-previous"
+ id="g21068">
+ <g
+ id="g5504">
+ <path
+ style="display:inline;fill:#ffffff;fill-opacity:1;stroke:none"
+ d="m 104.5627,755 5.71875,5.71875 C 110.47732,760.91462 110.74458,761 111.0002,761 l 1,0 0,-1 c
0,-0.25562 -0.0854,-0.52288 -0.28125,-0.71875 L 107.4377,755 l 4.28125,-4.28125 c 0.19587,-0.19587
0.28125,-0.46313 0.28125,-0.71875 l 0,-1 -1,0 c -0.25562,0 -0.52288,0.0854 -0.71875,0.28125 z"
+ id="path21070"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccscsccsscscc" />
+ <rect
+ width="16"
+ height="16"
+ x="-116.0002"
+ y="747"
+ id="rect21072"
+
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:1;marker:none;enable-background:new"
+ transform="scale(-1,1)" />
+ </g>
+ <g
+ id="g5508"
+ transform="matrix(-1,0,0,-1,812.0004,1510)">
+ <path
+ sodipodi:nodetypes="ccscsccsscscc"
+ inkscape:connector-curvature="0"
+ id="path5510"
+ d="m 104.5627,755 5.71875,5.71875 C 110.47732,760.91462 110.74458,761 111.0002,761 l 1,0 0,-1 c
0,-0.25562 -0.0854,-0.52288 -0.28125,-0.71875 L 107.4377,755 l 4.28125,-4.28125 c 0.19587,-0.19587
0.28125,-0.46313 0.28125,-0.71875 l 0,-1 -1,0 c -0.25562,0 -0.52288,0.0854 -0.71875,0.28125 z"
+ style="display:inline;fill:#ffffff;fill-opacity:1;stroke:none" />
+ <rect
+ transform="scale(-1,1)"
+
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:1;marker:none;enable-background:new"
+ id="rect5512"
+ y="747"
+ x="-116.0002"
+ height="16"
+ width="16" />
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/hig/C/overlaid-controls.page b/hig/C/overlaid-controls.page
new file mode 100644
index 0000000..d6312e2
--- /dev/null
+++ b/hig/C/overlaid-controls.page
@@ -0,0 +1,41 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ type="topic"
+ id="overlaid-controls">
+
+ <info>
+ <link type="guide" xref="patterns" group="overlaid-controls"/>
+ <credit type="author">
+ <name>Allan Day</name>
+ <email>aday gnome org</email>
+ </credit>
+ <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+ </info>
+
+<title>Overlaid controls</title>
+
+<media type="image" mime="image/svg" src="figures/patterns/overlaid-controls.svg"/>
+
+<p>Transient controls that float over content are a common pattern for applications that show images or
video.</p>
+
+<section id="when-to-use">
+<title>When to use</title>
+
+<p>Since overlaid controls hide when they are not in use, they help to provide an uncluttered viewing
experience. They are appropriate when it is desirable to present a clean and distraction-free view on a
content item - this is particularly (although not exclusively) appropriate for images and video.</p>
+
+<p>Overlaid controls may be inappropriate if they obscure relevant parts of the content below. Image editing
controls may interfere with the abitily to see their effects, for example. In these cases, controls should
not be overlaid.</p>
+
+</section>
+
+<section id="guidelines">
+<title>Guidelines</title>
+
+<list>
+<item><p>Follow established conventions for this type of control, such as left/right browse buttons in image
viewers, and player controls at the bottom for video.</p></item>
+<item><p>Controls should be displayed when the pointer is moved over the content, or when it is tapped (on
touch devices).</p></item>
+<item><p>Overlaid controls can be attached to the edge of the content/window, or can be free-floating. <link
xref="action-bars">Action bars</link> can be treated as overlaid controls.</p></item>
+<item><p>Use the standard "OSD" theme style for overlaid controls.</p></item>
+</list>
+
+</section>
+
+</page>
diff --git a/hig/C/patterns.page b/hig/C/patterns.page
index 15371e1..f74d8d5 100644
--- a/hig/C/patterns.page
+++ b/hig/C/patterns.page
@@ -16,7 +16,7 @@
<p>Once you have decided which patterns to use, the <link xref="ui-elements">user interface elements
pages</link> provide details of individual elements that you can use to fill out your design.</p>
-<links type="topic" style="2column" groups="application-menus primary-windows header-bars header-bar-menus
grids lists selection-mode search view-switchers sidebar-lists dialogs notifications action-bars"/>
+<links type="topic" style="2column" groups="application-menus primary-windows header-bars header-bar-menus
grids lists selection-mode search view-switchers sidebar-lists dialogs notifications action-bars
overlaid-controls"/>
<media type="image" mime="image/svg" src="figures/patterns/patterns.svg"/>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
