You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openoffice.apache.org by bu...@apache.org on 2011/12/20 16:10:05 UTC
svn commit: r800639 [33/33] - in /websites/staging/ooo-site/trunk/content:
./ de/doc/einfuerungen/calc/ de/doc/einfuerungen/calc/report/
de/doc/einfuerungen/impress/ de/doc/einfuerungen/impress/report/
de/doc/einfuerungen/writer/ de/doc/einfuerungen/wr...
Added: websites/staging/ooo-site/trunk/content/ui/proposals/Spacing_and_Positioning/metrics.html
==============================================================================
--- websites/staging/ooo-site/trunk/content/ui/proposals/Spacing_and_Positioning/metrics.html (added)
+++ websites/staging/ooo-site/trunk/content/ui/proposals/Spacing_and_Positioning/metrics.html Tue Dec 20 15:09:56 2011
@@ -0,0 +1,286 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<link href="/css/ooo.css" rel="stylesheet" type="text/css">
+
+
+<title>Untitled Document</title>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+
+
+</head>
+
+<body>
+ <div id="bannera">
+ <div id="bannerleft">
+ <img id="ooo-logo" alt="Apache OpenOffice.org (Incubating)" src="/images/ooo-logo.png"/></div>
+ <div id="bannerright"><a alt="Apache Incubator" href="http://incubator.apache.org">
+ <img id="asf-logo" alt="Apache Incubator" src="/images/apache-incubator-logo.png"/></a></div>
+ <div id="bannercenter"><br/>(incubating) | The Free and Open Productivity Suite</div>
+ </div>
+ <div id="clear"></div>
+ <div id="topbara">
+ <div id="breadcrumbsa"><a href="/">home</a> » <a href="/ui/">ui</a> » <a href="/ui/proposals/">proposals</a> » <a href="/ui/proposals/Spacing_and_Positioning/">Spacing_and_Positioning</a></div>
+ <div id="topnava">
+ <ul>
+<li><a href="/download/index.html" title="Download OpenOffice.org">Download</a></li>
+<li><a href="/support/index.html" title="Find Support for OpenOffice.org">Support</a></li>
+<li><a href="/extensions/index.html" title="Find Extensions and Templates">Extend</a></li>
+<li><a href="http://incubator.apache.org/openofficeorg/get-involved.html" title="Get involved in Apache OpenOffice (incubating)">Develop</a></li>
+<li><a href="/projects/native-lang.html" title="OpenOffice.org in your Native Language">Native Language</a></li>
+</ul>
+ </div>
+ </div>
+ <div id="clear"></div>
+
+ <div id="content">
+
+
+
+<table width="100%" border="0" cellspacing="1" cellpadding="1">
+ <tr>
+ <td><font size=4><b><font size="2">Dialogue Specification and Guidelines -
+ Visual Design</font></b></font></td>
+ <td><font size=4><b><font size="2">Christian Jansen</font></b></font></td>
+ </tr>
+ <tr>
+ <td> </td>
+ <td> </td>
+ </tr>
+</table>
+<p> </p>
+<p lang="en-US" class="western"> </p>
+<div id="Inhaltsverzeichnis1">
+ <div id="Inhaltsverzeichnis1_Head">
+ <p style="margin-left: 0cm; margin-top: 0.42cm; margin-bottom: 0.21cm; page-break-after: auto">
+ <font size=4><b>Content</b></font></p>
+ </div>
+ <p style="page-break-before: auto"><font size=3><a href="#Intro">Introduction</a></font></p>
+ <p style="page-break-before: auto"><font size=3><a href="#Layout">Layout</a></font></p>
+ <p style="page-break-before: auto"><font size=3><a href="#Size">Size</a></font></p>
+ <p style="page-break-before: auto"><font size=3><a href="#Spacing">Spacing and
+ Positioning</a></font></p>
+ <p style="page-break-before: auto"><font size=3><a href="#Translation">Translation</a></font></p>
+ <p style="page-break-before: auto"> </p>
+ <h2><font size=3><b><a name="Intro"></a>Introduction</b></font></h2>
+ <p>Due to the new (Figure 1) definition of the standard tabbed dialogue there
+ is a need to define some visual guidelines for successfully complete layout.</p>
+ <p><span lang="en-US">The units which are used in this guideline </span>are
+ Map AppFont (ma) and Pixel (px). Map AppFont units are device and resolution
+ independent. One Map AppFont unit is equal to one-eighth of the average character
+ (System font) height and a quart in width.</p>
+ <p>In the first draft, the dimension are only in pixels the will be replaced
+ in the next version. The screen samples </p>
+ <p>were made on a system with a resolution of 1280 x 1024 at 96 dpi.</p>
+ <p><img src="StyleGuide_html_m2604b959.gif" width="369" height="238"></p>
+ <p><font size=2 style="font-size: 9pt"><b>Figure 1 Shows the new size for a
+ tabbed dialogue.</b></font></p>
+ <h2><a name="Layout"></a>Layout</h2>
+ <p>One of the most critical area in visual design is to create a visually consistence
+ in spacing, size, alignment etc. From the structural side (for western countries)
+ the information should be provided as follows:<br>
+ <br>
+ The most important information should be located in the upper left area. </p>
+ <p>After this content follows from left to right and top to the bottom.</p>
+ <h2><a name="Size"></a>Size</h2>
+ <p>The following table lists the typical dimensions of common control which
+ are used in StarOffice.</p>
+ <table width="656" border="1" cellspacing="0" cellpadding="2" bordercolor="#333333">
+ <tr bgcolor="#99CCFF">
+ <td width="312"><b><font color="#000000">Control</font></b></td>
+ <td width="80"><b><font color="#000000">Height</font></b></td>
+ <td width="254"><b><font color="#000000">Width</font></b></td>
+ </tr>
+ <tr>
+ <td width="312">Command Buttons</td>
+ <td width="80">14</td>
+ <td width="254">50</td>
+ </tr>
+ <tr>
+ <td width="312">Check Boxes</td>
+ <td width="80">10</td>
+ <td width="254">As wide as needed</td>
+ </tr>
+ <tr>
+ <td width="312">Radio Buttons</td>
+ <td width="80">10</td>
+ <td width="254">As wide as needed</td>
+ </tr>
+ <tr>
+ <td width="312">Drop down, combo and drop down list boxes</td>
+ <td width="80">12</td>
+ <td width="254">Size match other drop downs etc.</td>
+ </tr>
+ <tr>
+ <td width="312">Text boxes</td>
+ <td width="80">12</td>
+ <td width="254">As wide as needed</td>
+ </tr>
+ <tr>
+ <td width="312">Text labels</td>
+ <td width="80">8</td>
+ <td width="254">As wide as needed</td>
+ </tr>
+ <tr>
+ <td width="312">Other text</td>
+ <td width="80">8</td>
+ <td width="254">As wide as needed</td>
+ </tr>
+ </table>
+ <h2><a name="Spacing"></a>Spacing and Positioning</h2>
+ <p>Alignment is very important for a good dialogue design. Try to create a consistent
+ and clear layout. Use the dialogue spaces shown in figure 2 and 3.</p>
+ <p><img src="StyleGuide_html_18fec29a.gif" width="500" height="397"></p>
+ <p><font size=2 style="font-size: 9pt"><b>Figure 2 Map Appfont spaces between
+ dialogue items.</b></font></p>
+ <p><img src="StyleGuide_html_57c0a46.gif" width="476" height="725"></p>
+ <p><font size=2 style="font-size: 9pt"><b>Figure 3 Map Appfont spaces between
+ dialogue items.</b></font></p>
+ <p>The following table list the recommended spacing between common dialogue
+ items.</p>
+ <p> </p>
+ <table width="600" border="1" cellspacing="0" cellpadding="2" bordercolor="#000000">
+ <tr bgcolor="#99CCFF">
+ <td><b>Dialogue item</b></td>
+ <td><b>Space between (MA)</b></td>
+ </tr>
+ <tr>
+ <td>Dialogue Box Margins (Vertical)</td>
+ <td>6</td>
+ </tr>
+ <tr>
+ <td>Dialogue Box Margins (Horizontal)</td>
+ <td>3</td>
+ </tr>
+ <tr>
+ <td>Fixed line Margins Vertical</td>
+ <td>6</td>
+ </tr>
+ <tr>
+ <td>Between text paragraphs</td>
+ <td>7</td>
+ </tr>
+ <tr>
+ <td>Between text label and their control for (example text beneath a list
+ box)</td>
+ <td>3</td>
+ </tr>
+ <tr>
+ <td>Between related controls</td>
+ <td>4</td>
+ </tr>
+ <tr>
+ <td>Between unrelated controls</td>
+ <td>7</td>
+ </tr>
+ <tr>
+ <td>First control in a group box or under a fixed line</td>
+ <td>3</td>
+ </tr>
+ <tr>
+ <td>Between controls in a group box</td>
+ <td>4<br>
+ If a group box is used align vertical to the group box title</td>
+ </tr>
+ <tr>
+ <td>From the left edge to a group box / fixed line</td>
+ <td>6</td>
+ </tr>
+ <tr>
+ <td>From the left edge to a preview</td>
+ <td>6</td>
+ </tr>
+ <tr>
+ <td>Content: From the right edge of a group box / fixed line</td>
+ <td>6</td>
+ </tr>
+ <tr>
+ <td>Content: From the top edge of a group box / fixed line</td>
+ <td>3/6</td>
+ </tr>
+ <tr>
+ <td>Content: Above the bottom edge of a group box</td>
+ <td>6</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>8</td>
+ </tr>
+ </table>
+ <h2 class="western"><a name="Translation"></a>Translation</h2>
+ <p lang="en-US" class="western">Translations from English to other languages
+ can affect the size of the dialogue for example:</p>
+</div>
+<ul>
+ <li>
+ <div id="Inhaltsverzeichnis1">
+ <p lang="en-US" class="western">Increase the length of the text in the user
+ interface.</p>
+ </div>
+ </li>
+ <li>It can affect the layout of the controls.</li>
+</ul>
+<p><img src="StyleGuide_html_m849f04f.gif" width="285" height="179"></p>
+<p><span id="Rahmen10"><font size=2 style="font-size: 9pt"><b>Figure 4 A dialogue
+ with enough space for translation.</b></font></span></p>
+<div id="Rahmen3"> </div>
+<p>To handle the text expansion it makes sense to allow approximately 30 percent
+ or more space than for the English version (figure 5)</p>
+<p><img src="StyleGuide_html_36b24431.gif" width="380" height="197"> </p>
+<div id="Rahmen4">
+ <p lang="en-US" style="margin-left: 0cm; margin-top: 0.21cm; margin-bottom: 0.21cm; font-style: normal; page-break-before: auto"><font size=2 style="font-size: 9pt"><b>Figure
+ 5 The first two examples allow not enough space for translation.</b></font></p>
+ <p lang="en-US" style="margin-left: 0cm; margin-top: 0.21cm; margin-bottom: 0.21cm; font-style: normal; page-break-before: auto"> </p>
+ <div id="Rahmen4">
+ <p lang="en-US" style="margin-left: 0cm; margin-top: 0.21cm; margin-bottom: 0.21cm; font-style: normal; page-break-before: auto">If
+ text is or must placed in front of controls like list boxes or text boxes
+ leave enough space between the text and control item. In my opinion it looks
+ better if the the text beneath the control is placed over the related control,
+ because it cold not effect to large spaces in between (figure6).</p>
+ </div>
+ <p lang="en-US" class="western">If a longer explanation above controls is needed,
+ the text should be split into an information part and a header for the related
+ control.</p>
+ <div id="Rahmen11">
+ <p lang="en-US" style="margin-left: 0cm; margin-top: 0.21cm; margin-bottom: 0.21cm; font-style: normal; page-break-before: auto"></p>
+ </div>
+</div>
+<p><img src="StyleGuide_html_7ddf4580.gif" width="380" height="127"></p>
+<p><font size=2 style="font-size: 9pt"><b>Figure 6 For longer explanations split
+ into two parts.</b></font></p>
+<p><b>Tip:</b><br>
+ To control the current text expansion space it is possible to enable in a NON
+ Product Version, by pressing CTRL – SHIFT – D. The VCL Debug dialogue
+ will appear and several settings can be set. To enable the highlighting of the
+ text expansion space check the “Dialogue” entry in the “Test
+ options” Group box. After enabling this feature Dialogues will be shown
+ like in the screen shot below.</p>
+<p><img src="footnote.gif" width="296" height="226"></p>
+<p> </p>
+<p> </p>
+
+
+ </div>
+
+ <div id="footera">
+ <div id="poweredbya">
+ <p><img src="/images/feather-small.gif"/></p>
+ </div>
+ <div id="copyrighta">
+ <p>
+ Apache "OpenOffice.org" is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.
+ Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and
+ decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is
+ not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has
+ yet to be fully endorsed by the ASF.</p>
+ <p>
+ <a href="/license.html">Copyright & License</a>
+ <br />Apache and the Apache feather logos are trademarks of The Apache Software Foundation.
+ OpenOffice.org and the seagull logo are registered trademarks of The Apache Software Foundation.
+ Other names appearing on the site may be trademarks of their respective owners.
+ </p>
+ </div>
+ </div>
+
+</body>
+</html>