Difference between revisions of "Human Interface Guidelines/The Sugar Interface"

From Sugar Labs
Jump to navigation Jump to search
Line 27: Line 27:
  
  
−
===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.
 
−
 
−
<br clear="all"/> <!--prevents image pushing title out-->
 
  
 
===Rollovers===
 
===Rollovers===

Revision as of 13:45, 29 November 2006

← Security [[Human Interface Guidelines/{{{curr}}}|{{{curr}}}]] The Sugar Interface →

The Sugar Interface

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


Rollovers

Rollover Animation Phases By Time
Animation Phase Time Offset
(seconds)		 Duration
(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 ----

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
← Security [[Human Interface Guidelines/{{{curr}}}|{{{curr}}}]] The Sugar Interface →
Retrieved from "https://wiki.sugarlabs.org/index.php?title=Human_Interface_Guidelines/The_Sugar_Interface&oldid=17285"