incubator-ooo-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From build...@apache.org
Subject 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...
Date Tue, 20 Dec 2011 15:10:05 GMT
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)&nbsp;|&nbsp;The Free and
Open Productivity Suite</div>
+  </div>
+  <div id="clear"></div>
+  <div id="topbara">
+    <div id="breadcrumbsa"><a href="/">home</a>&nbsp;&raquo&nbsp;<a
href="/ui/">ui</a>&nbsp;&raquo&nbsp;<a href="/ui/proposals/">proposals</a>&nbsp;&raquo&nbsp;<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>&nbsp;</td>
+    <td>&nbsp;</td>
+  </tr>
+</table>
+<p>&nbsp;</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">&nbsp;</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>&nbsp; </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">&nbsp;</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 &#150; SHIFT &#150; D. The VCL Debug dialogue

+  will appear and several settings can be set. To enable the highlighting of the 
+  text expansion space check the &#147;Dialogue&#148; entry in the &#147;Test

+  options&#148; 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>&nbsp;</p>
+<p>&nbsp; </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 &amp; 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>



Mime
View raw message