Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls - Revision history

FGrose at 20:43, 22 October 2009

2009-10-22T20:43:55Z

← Older revision		Revision as of 16:43, 22 October 2009
Line 31:		Line 31:
	=====Control Sizing=====		=====Control Sizing=====

	In accordance with [[~~Design Team/~~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.		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>

FGrose: moved Design Team/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls to Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls: restructure

2009-07-07T13:15:59Z

moved Design Team/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls to Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls: restructure

← Older revision		Revision as of 09:15, 7 July 2009
(No difference)

FGrose at 18:58, 5 July 2009

2009-07-05T18:58:06Z

← Older revision		Revision as of 14:58, 5 July 2009
Line 1:		Line 1:
	<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>

Dfarning: fix camelcase links

2009-04-08T03:09:06Z

fix camelcase links

← Older revision		Revision as of 23:09, 7 April 2009
Line 31:		Line 31:
	=====Control Sizing=====		=====Control Sizing=====

	In accordance with [[~~DesignTeam~~/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.		In accordance with [[Design Team/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>

Dfarning: DesignTeam/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls moved to Design Team/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls

2009-04-08T02:56:54Z

DesignTeam/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls moved to Design Team/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls

← Older revision		Revision as of 22:56, 7 April 2009
(No difference)

Dfarning-bot: OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls moved to DesignTeam/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls: Robot: moved page

2009-02-05T02:23:39Z

OLPC Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls moved to DesignTeam/Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls: Robot: moved page

← Older revision		Revision as of 22:23, 4 February 2009
(No difference)

Dfarning-bot: Robot: Automated text replacement (-OLPC_Human_Interface_Guidelines +DesignTeam/Human_Interface_Guidelines)

2009-02-05T01:32:16Z

Robot: Automated text replacement (-OLPC_Human_Interface_Guidelines +DesignTeam/Human_Interface_Guidelines)

← Older revision		Revision as of 21:32, 4 February 2009
Line 31:		Line 31:
	=====Control Sizing=====		=====Control Sizing=====

	In accordance with [[~~OLPC_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.		In accordance with [[DesignTeam/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>

Dfarning: 8 revisions

2009-02-04T19:13:09Z

8 revisions

← Older revision		Revision as of 15:13, 4 February 2009
(No difference)

18.85.18.142: /* Control Sizing */

2008-01-10T15:56:04Z

Control Sizing

New page

<noinclude>{{Translations}}</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=====

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.

=====Control Color Palette=====
The Sugar interface defines a strict palette for the control widgets, along with guidelines for using these colors for various states and control types. Custom controls should adhere to the same set of colors and associated rules in order to ensure that their behavior mimics those of the core Sugar controls, and can be easily inferred by those who are familiar with them. Though their name and primary uses define these colors, any color within the palette provided below may be used for various parts of your control where it doesn't interfere with the basic rules associated with them.

{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#cccccc;"|Name!!style="background:#cccccc;"|Primary Uses!!style="background:#cccccc;"|Hex!!style="background:#cccccc;"|% Gray
|-
|Black||Palettes, Popups||#000000||100%
|-
|Toolbar Grey||Toolbars, Trays, Palette Groupings||#404040||75%
|-
|Button Grey||Default Button States||#808080||50%
|-
|Selection Grey||Selections, Panel Groupings||#A6A6A6||35%
|-
|Panel Grey||Panels, Desktop||#C0C0C0||25%
|-
|Text Field Grey||Text entry background||#E5E5E5||10%
|-
|White||Pressed states, multiline text areas||#FFFFFF||0%
|}

=====Control Sizing=====

In accordance with [[OLPC_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>

203.166.160.74 at 13:07, 13 July 2007

2007-07-13T13:07:24Z

← Older revision		Revision as of 09:07, 13 July 2007
Line 12:		Line 12:

	{\|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"		{\|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
	!style="background:#cccccc;"\|Name!!style="background:#cccccc;"\|Primary Uses!!style="background:#cccccc;"\|Hex!!style="background:#cccccc;"\|%~~ Gray~~		!style="background:#cccccc;"\|Name!!style="background:#cccccc;"\|Primary Uses!!style="background:#cccccc;"\|Hex!!style="background:#cccccc;"\|%
	\|-
	~~\|Black\|\|Palettes, Popups\|\|#000000\|\|100%~~
	\|-
	~~\|Toolbar Grey\|\|Toolbars, Trays, Palette Groupings\|\|#404040\|\|75%~~
	\|-
	~~\|Button Grey\|\|Default Button States\|\|#808080\|\|50%~~
	\|-
	~~\|Selection Grey\|\|Selections, Panel Groupings\|\|#A6A6A6\|\|35%~~
	\|-
	~~\|Panel Grey\|\|Panels, Desktop\|\|#C0C0C0\|\|25%~~
	\|-
	~~\|Text Field Grey\|\|Text entry background\|\|#E5E5E5\|\|10%~~
	\|-
	~~\|White\|\|Pressed states, multiline text areas\|\|#FFFFFF\|\|0%~~
	\|}

	~~=====Control Sizing=====~~


	<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>