8,288
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − + − + − + Line 30:
Line 30: + +
Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls (view source)
Revision as of 16:43, 22 October 2009
, 16:43, 22 October 2009no edit summary
<noinclude>{{Translations}}</noinclude>
<noinclude>{{Translations}}{{GoogleTrans-en}}</noinclude>
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Grouping Controls|p_label=Grouping Controls|c_link=The Sugar Interface/Controls/Custom Controls|c_label=Custom Controls|n_link=The Sugar Interface/Controls|n_label=Controls}}</noinclude>
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Grouping Controls|p_label=Grouping Controls|c_link=The Sugar Interface/Controls/Custom Controls|c_label=Custom Controls|n_link=The Sugar Interface/Controls|n_label=Controls}}</noinclude>
=====When to Use Custom Controls=====
=====When to Use Custom Controls=====
We have created a set of control widgets to suit most basic needs for application development. Using these controls wherever possible ensures that the interfaces across activities remain consistent and clear, and also maintains the visual style of the interface. Nonetheless, their basic functionality may prove limiting in some cases, and we certainly hope to inspire new and exciting uses of the various capabilities of the laptops, including their collaborative nature, and don't want to stifle additional ideation and design. For this reason, we are providing a general set of guidelines for the creation of custom controls that match the visual style of Sugar and maintain some basic standards for compatibility and usability within the Sugar interface.
We have created a set of controls to suit most basic needs for Activity development. Using these controls wherever possible ensures that interfaces across Activities remain consistent and clear, and also maintains the visual style of the Sugar interface. Nonetheless, their basic functionality may prove limiting in some cases, and we certainly hope to inspire new and exciting uses of the various capabilities of the laptops, including their collaborative nature, and don't want to stifle additional ideation and design. For this reason, we are providing a general set of guidelines for the creation of custom controls that match the visual style of Sugar and maintain some basic standards for compatibility and usability within the Sugar interface.
Before implementing a custom control, be sure that the need truly exists. In some cases, you may find that a combination of simpler controls may suffice. In other cases, more complex functionality can be accommodated though use of a palette. Additionally, be sure that the need is a functional one; Custom controls should have additional or different behavior that the current controls don't provide, and not simply define a different aesthetic for existing ones. Again, think carefully about the requirements for the control, and be sure that the functional need itself merits the work associated with creating the new control.
Before implementing a custom control, be sure that the need truly exists. In some cases, you may find that a combination of simpler controls may suffice. In other cases, more complex functionality can be accommodated though use of a Palette. Additionally, be sure that the need is a functional one; Custom controls should have additional or different behavior that the current controls don't provide, and not simply define a different aesthetic for existing ones. Again, think carefully about the requirements for the control, and be sure that the functional need itself merits the work associated with creating the new control.
=====Control Color Palette=====
=====Control Color Palette=====
=====Control Sizing=====
=====Control Sizing=====
In accordance with [[Human_Interface_Guidelines/The_Sugar_Interface/Layout_Guidelines| the grid system]], we have defined two standard sizes for controls: 75px and 45px. These sizes determine the bounding box for a given control, with 45px being the smallest recommended active (clickable) area for any control component. Note that the control itself may actually be smaller than this canvas, depending on the desired context. For instance, the icons for buttons fill up to 60% of the canvas area, with the actual icons having sizes of 55px and 27px.
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Grouping Controls|p_label=Grouping Controls|c_link=The Sugar Interface/Controls/Custom Controls|c_label=Custom Controls|n_link=The Sugar Interface/Controls|n_label=Controls}}</noinclude>
<noinclude>{{hig-subnav|p_link=The Sugar Interface/Controls/Grouping Controls|p_label=Grouping Controls|c_link=The Sugar Interface/Controls/Custom Controls|c_label=Custom Controls|n_link=The Sugar Interface/Controls|n_label=Controls}}</noinclude>