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}} − − − === Colors === − − ====Imbuing Color with Meaning==== − − Sugar treats color differently than the typical UI: colors are used in the interface represent the ''individuals'' who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors—even when they appear on the laptops of other children on the mesh—forming a visual identity that supplements her name and attributes. − − This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link. Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. − − To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. − − When the display runs in grayscale mode, this colored visual identity is less apparent. However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color. − − ====Contrast in the Munsell Colorspace==== − − The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps. − − The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either ≤N3 or ≥N7. − − <table cellspacing='50' style='margin: 1em auto 1em auto'><tr><td> − − {|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" − |+Munsell Value Steps − !style="background:#cccccc"|Fill color!!style="background:#cccccc"|Line value 5 − |- − |N10 − |style="background:#FFFFFF; color:#7A7A7A"|'''delta 5 value steps''' − |- − |N9 − |style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps''' − |- − |N8 − |style="background:#C8C8C8; color:#7A7A7A"|'''delta 3 value steps''' − |- − |N7 − |style="background:#ADADAD; color:#7A7A7A"|'''delta 2 value steps''' − |- − |N6 − |style="background:#939393; color:#7A7A7A"|'''delta 1 value steps''' − |- − |N5 − |style="background:#7A7A7A; color:#7A7A7A"|'''delta 0 value steps''' − |- − |N4 − |style="background:#616161; color:#7A7A7A"|'''delta 1 value steps''' − |- − |N3 − |style="background:#494949; color:#7A7A7A"|'''delta 2 value steps''' − |- − |N2 − |style="background:#343434; color:#7A7A7A"|'''delta 3 value steps''' − |- − |N1 − |style="background:#222222; color:#7A7A7A"|'''delta 4 value steps''' − |- − |N0 − |style="background:#000000; color:#7A7A7A"|'''delta 5 value steps''' − |} − − </td><td> − − {|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;" − |+Text Against Default Laptop Colors − !style="background:#cccccc"|Font value!!style="background:#cccccc"|Frame (N2.5)!!style="background:#cccccc"|Background (N9) − |- − |N10||style="background:#414141; color:#FFFFFF"|'''delta 7.5 value steps'''||style="background:#E4E4E4; color:#FFFFFF"|'''delta 1 value step''' − |- − |N9||style="background:#414141; color:#E4E4E4"|'''delta 6.5 value steps'''||style="background:#E4E4E4; color:#E4E4E4"|'''delta 0 value steps''' − |- − |N8||style="background:#414141; color:#C8C8C8"|'''delta 5.5 value steps'''||style="background:#E4E4E4; color:#C8C8C8"|'''delta 1 value step''' − |- − |N7||style="background:#414141; color:#ADADAD"|'''delta 4.5 value steps'''||style="background:#E4E4E4; color:#ADADAD"|'''delta 2 value steps''' − |- − |N6||style="background:#414141; color:#939393"|'''delta 3.5 value steps'''||style="background:#E4E4E4; color:#939393"|'''delta 3 value steps''' − |- − |N5||style="background:#414141; color:#7A7A7A"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps''' − |- − |N4||style="background:#414141; color:#616161"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#616161"|'''delta 5 value steps''' − |- − |N3||style="background:#414141; color:#494949"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#494949"|'''delta 6 value steps''' − |- − |N2||style="background:#414141; color:#343434"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#343434"|'''delta 7 value steps''' − |- − |N1||style="background:#414141; color:#222222"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#222222"|'''delta 8 value steps''' − |- − |N0||style="background:#414141; color:#000000"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#000000"|'''delta 9 value steps''' − |} − − </td></tr></table> − − ===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>