8,288
edits
Changes
Jump to navigation
Jump to search
mLine 1:
Line 1: + + + + − + + + − {{:OLPC Human Interface Guidelines/The Sugar Interface/Input Systems}} − − − {{:OLPC Human Interface Guidelines/The Sugar Interface/Layout Guidelines}} − − − {{:OLPC Human Interface Guidelines/The Sugar Interface/Icons}} − − − {{:OLPC Human Interface Guidelines/The Sugar Interface/Colors}} − − − {{:OLPC Human Interface Guidelines/The Sugar Interface/Fonts}} − − − {{:OLPC Human Interface Guidelines/The Sugar Interface/Rollovers}} − − − {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls}} − − − ===Fonts=== − − [[Image:Sugar-font.png|thumb|218px|right|The font used in Sugar menus]] − + − <br clear="all"/> <!--prevents image pushing title out--> − ===Rollovers===+ − {|border=1 cellpadding=3 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" − |+Rollover Animation Phases By Time − !style="background:#cccccc;"|Animation Phase!!style="background:#cccccc;"|Time Offset<br>(seconds)!!style="background:#cccccc;"|Duration <br>(seconds) − |- − |Immediate Background Change − |0.0 − |0.1 − |- − |Primary Rollover Begins Expanding − |0.1 − |0.2 − |- − |Primary Rollover Displayed − |0.3 − |0.4 − |- − |Secondary Rollover Begins Expanding − |0.7 − |0.3 − |- − |Secondary Rollover Displayed − |1.0 − |style="background: #e9e9e9;"| ---- − |} − ====Primary Rollover====+ − ====Secondary Rollover==== − ====Rollovers as Contextual Menus==== − ====Rollovers as Popups==== − ====Rollovers as Pallettes==== − ====Rollovers as Contextual Controls==== − ===Cursor=== − ===Controls===+ − ====Buttons==== − ====Selection controls====+ − =====Checkboxes===== − =====Segmented Controls===== − =====Lists===== − =====Combination Lists===== − =====Color Swatches===== − =====Drop Targets===== − ====Adjustment Controls==== − =====Steppers===== − =====Sliders===== − ====Indicator Controls====+ − =====Determinate Progress Indicator===== − =====Indeterminate Progress Indicator===== − =====Level Indicators===== − ====Text Controls==== − =====Static Text Fields===== − =====Input Field===== − =====Search Fields===== − ====Separator Controls====+ − =====Horizontal Rule===== − =====Vertical Rule===== − =====Logical Grouping===== − ====Custom Controls==== − =====When to Use Custom Controls===== − =====Custom Control Guidelines===== − +
Human Interface Guidelines/The Sugar Interface (view source)
Revision as of 04:32, 6 July 2010
, 04:32, 6 July 2010Reverted edits by Vsimon213 (talk) to last revision by FGrose
<noinclude><div style="background-color: #F5F5F5;">
{{Translations}}{{GoogleTrans-en}}
</noinclude>
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; border-left:1px solid #888; border-right:1px solid #888; width: 95%;">
<div style="background-color: #FFF; margin-left:auto; margin-right: auto; border-left:1px solid #888; border-right:1px solid #888; width: 95%;">
{{hig-nav|prev=Security|next=The Sugar Interface}}
{{hig-nav|prev=Security|curr=The Sugar Interface|next=Introduction}}
<div style="margin: 8px;">
<div style="margin: 8px;">
==The Sugar Interface==
==The Sugar Interface==
{{TOCright}}
{{:Human Interface Guidelines/The Sugar Interface/Input Systems}}
The OLPC display is 200DPI; therefore one point—1/72 inch—is just less than 3 pixels (2.78 pixels). Hence a 12pt font would be roughly 33 pixels. We are settling on a default size for Sugar menus (using [http://en.wikipedia.org/wiki/Bitstream_Vera Bitstream Vera Sans]) of an 11 pixel x height; 13 pixel ascender height; and 5 pixel descender height. In terms of that that is in point size on the actual display, about a 9 point font (it was a 19 point font in Illustrator on the Mac). It is quite legible. We will be looking at other faces, e.g., Arabic and Thai, and also looking into a large-type version of the interface for the younger children.
{{:Human Interface Guidelines/The Sugar Interface/Layout Guidelines}}
{{:Human Interface Guidelines/The Sugar Interface/Icons}}
{{:Human Interface Guidelines/The Sugar Interface/Colors}}
{{:Human Interface Guidelines/The Sugar Interface/Text and Fonts}}
{{:Human Interface Guidelines/The Sugar Interface/Rollovers}}
{{:Human Interface Guidelines/The Sugar Interface/Controls}}
{{:Human Interface Guidelines/The Sugar Interface/Cursor}}
</div>
</div>
{{hig-nav|prev=Security|next=The Sugar Interface}}
{{hig-nav|prev=Security|curr=The Sugar Interface|next=Introduction}}
</div>
</div>