Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls

From Sugar Labs
Jump to navigation Jump to search
english | español | 한국어 HowTo [ID# 39502]  +/-  
Grouping Controls Custom Controls Controls
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.

Name Primary Uses Hex % 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 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.


Grouping Controls Custom Controls Controls