| Line 15: |
Line 15: |
| | [[Image:control_regions.jpg|right|500px|Basic control regions]] | | [[Image:control_regions.jpg|right|500px|Basic control regions]] |
| | | | |
| − | '''Canvas:''' The canvas is the general purpose "creation" space within any activity — the region for drawing, writing, or otherwise working within it. Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities. The canvas region is specifically for generating content and 'should not' have any controls placed upon it. As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults. | + | '''Canvas:''' The canvas is the general purpose "creation" space within any activity |
| − | | |
| − | '''Toolbars:''' Activity toolbars have a unique dark gray color which distinguishes them from the other control regions. The Frame also uses this unique shade of gray to indicate its purpose as an omnipresent toolbar that a child may activate from within any view or activity. Each activity will have a toolbar at the top of the screen, though when necessary additional toolbars may also be specified.
| |
| − | | |
| − | '''Panels:''' When appropriate, an activity may devote a portion of the screen to additional controls which make more sense outside of the toolbar and within the global activity context. Controls placed in this region should always remain relevant at all times, regardless of any other state associated with the activity or editing context.
| |
| − | | |
| − | '''Palettes:''' Palettes serve as multipurpose control regions which appear in several contexts. In an interface without traditional windows and menus, palettes step in to provide a versatile solution in many aspects of the user interface as the second layer of control. For a full description of their uses, please see the section on Palettes and Rollovers.
| |
| − | | |
| − | '''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI. The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states. More detail about these broader design decisions is discussed in the custom controls section.
| |
| − | | |
| − | <div style="position: relative">
| |
| − | <div style="position: absolute; right: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div>
| |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Buttons|Buttons]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Buttons}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls|Basic Selection Controls]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Advanced Selection Controls|Advanced Selection Controls]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Advanced Selection Controls}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Adjustment Controls|Adjustment Controls]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Adjustment Controls}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Indicators|Indicators]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Indicators}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Text Controls|Text Controls]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Text Controls}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/View Controls|View Controls]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/View Controls}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Grouping Controls|Grouping Controls]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Grouping Controls}}
| |
| − | | |
| − | ====[[OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls|Custom Controls]]====
| |
| − | {{:OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls}}
| |
| − | </div>
| |
| − | | |
| − | {{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}
| |