Line 1: |
Line 1: |
| + | <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}} |
| | | |
− | {{: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]]
| |
| | | |
− | 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}} |
| | | |
− | <br clear="all"/> <!--prevents image pushing title out-->
| |
| | | |
− | ===Rollovers===
| + | {{:Human Interface Guidelines/The Sugar Interface/Icons}} |
| | | |
− | {|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====
| + | {{:Human Interface Guidelines/The Sugar Interface/Colors}} |
− | ====Secondary Rollover====
| |
− | ====Rollovers as Contextual Menus====
| |
− | ====Rollovers as Popups====
| |
− | ====Rollovers as Pallettes====
| |
− | ====Rollovers as Contextual Controls====
| |
| | | |
− | ===Cursor===
| |
| | | |
− | ===Controls===
| + | {{:Human Interface Guidelines/The Sugar Interface/Text and Fonts}} |
| | | |
− | ====Buttons====
| |
| | | |
− | ====Selection controls====
| + | {{:Human Interface Guidelines/The Sugar Interface/Rollovers}} |
− | =====Checkboxes=====
| |
− | =====Segmented Controls=====
| |
− | =====Lists=====
| |
− | =====Combination Lists=====
| |
− | =====Color Swatches=====
| |
− | =====Drop Targets=====
| |
| | | |
− | ====Adjustment Controls====
| |
− | =====Steppers=====
| |
− | =====Sliders=====
| |
| | | |
− | ====Indicator Controls====
| + | {{:Human Interface Guidelines/The Sugar Interface/Controls}} |
− | =====Determinate Progress Indicator=====
| |
− | =====Indeterminate Progress Indicator=====
| |
− | =====Level Indicators=====
| |
| | | |
− | ====Text Controls====
| |
− | =====Static Text Fields=====
| |
− | =====Input Field=====
| |
− | =====Search Fields=====
| |
| | | |
− | ====Separator Controls====
| + | {{:Human Interface Guidelines/The Sugar Interface/Cursor}} |
− | =====Horizontal Rule=====
| |
− | =====Vertical Rule=====
| |
− | =====Logical Grouping=====
| |
| | | |
− | ====Custom Controls====
| |
− | =====When to Use Custom Controls=====
| |
− | =====Custom Control Guidelines=====
| |
| | | |
| </div> | | </div> |
− | {{hig-nav|prev=Security|next=The Sugar Interface}} | + | {{hig-nav|prev=Security|curr=The Sugar Interface|next=Introduction}} |
| </div> | | </div> |