Difference between revisions of "KDE Visual Design Group/HIG/Layout"

Jump to: navigation, search
(Guidelines)
(Undo revision 78593 by Fabian (talk))
Line 4: Line 4:
 
The application layout depends on the functionality as well as the content of the application. The layouts used throughout the design should be consistent both visually and functionally.
 
The application layout depends on the functionality as well as the content of the application. The layouts used throughout the design should be consistent both visually and functionally.
  
* Introduction
+
==Guidelines==
** [[/Presentation/DesignVisionPrinciples|Vision]]
+
** [[/Concept|Concept]]
+
** [[/Architecture|Architecture]]
+
  
* Motion
+
The top level layout for your application may be constructed by selecting an appropriate Command Pattern and Navigation Pattern as well as taking advantage of recommended Content Patterns.
** [[KDE_Visual_Design_Group/HIG/Animations|Animations]]
+
* [[KDE_Visual_Design_Group/HIG/Patterns/CommandPatterns|Command Patterns]]  - Layout patterns for the command structure of your application.
 +
* [[KDE_Visual_Design_Group/HIG/Patterns/NavigationPatterns|Navigation Patterns]] - Layout patterns to navigate your application content.
 +
* Content Patterns  - A collection of consistent ways to present certain kinds of content
 +
** [[KDE_Visual_Design_Group/HIG/Layout/Image|Images]] - Guidelines and patterns for displaying images
 +
** [[KDE_Visual_Design_Group/HIG/IconsAndText|Icons and text]] - Patterns for consistently showing icons with text
 +
** [[KDE_Visual_Design_Group/HIG/Layout/ViewingVsEditing|Viewing vs Editing]] - Patterns and guidelines for laying out content that is primarily viewed.
 +
** [[KDE_Visual_Design_Group/HIG/SearchPattern|Search and Filter]]- Patterns for exposing search and filter functions
 +
** [[KDE_Visual_Design_Group/HIG/Layout/Wizard|Wizard]] - Patterns for guiding the user through a series of step to accomplish a task
 +
** [[KDE_Visual_Design_Group/HIG/Tooltip|Tooltips]] - Patterns for consistent presentation of information in tooltips.
 +
* [[KDE_Visual_Design_Group/HIG/Alignment|Alignment]] - Follow alignment guidelines to make it easy understand how elements are associated.
 +
* [[KDE_Visual_Design_Group/HIG/Placement|Size and spacing]] - Use consistent size and spacing to ensure balance, reduce clutter and create breathing room.
  
* Style
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Color|Colors]]
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/IconDesign|Icons]]
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Imagery
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Theme|Theme]]
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Style/Typography|Typography]]
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Writing
 
  
* Layout
+
See the [[KDE_Visual_Design_Group/HIG/Layout/ExamplePhotoGallery|layout design example]] that shows how to construct the layout for a photo gallery application.
** [[/Organization|Organization]] Organization
+
** [[KDE_Visual_Design_Group/HIG/Layout/Image|Units]]
+
** [[KDE_Visual_Design_Group/HIG/Alignment|Alignment]]
+
** Structure
+
** Responsive UI
+
 
+
* Navigation
+
** Patterns for desktop user interfaces
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for a flat content structure
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for a 2-deep content structure
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for a 3-deep content structure
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for n-deep content structures
+
** Patterns for phone user interfaces
+
*** [[Image:Smartphone.svg|22px|For kirigami]] Patterns for a flat content structure
+
*** [[Image:Smartphone.svg|22px|For kirigami]] Patterns for a 2-deep structure
+
*** [[Image:Smartphone.svg|22px|For kirigami]] Patterns for a hierarchical structure
+
 
+
 
+
 
+
* Components
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Buttons
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Check_Box|Check box]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Combo_Box|Combo box]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/ContextMenu|Context menu]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Date_Time_Pickers|Date and time pickers]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Dialogs|Dialogs]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/DropDown|Drop-down]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/GroupBox|Groupbox]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/LineEdit|Line edit]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/ListView|List view]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Loading|Loading and Progress]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Menu_Bar|Menu Bar]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Radio_Buttons|Radio buttons]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Slider|Slider]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Spin_Box|Spin box]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Splitter|Splitter]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/StatusBar|Status Bar]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/TabControl|Tabs]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/TableView|Table view]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/TextEdit|Text edit]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Toolbar|Toolbar]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Tooltip|Tooltips]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/TreeView|Tree view]]
+
 
+
* Patterns
+
** [[Image:Computer.svg|22px|For plama]]  [[KDE_Visual_Design_Group/HIG/Layout/Image|Images]] - Guidelines and patterns for displaying images
+
** [[Image:Computer.svg|22px|For plama]] [[KDE_Visual_Design_Group/HIG/IconsAndText|Icons and text]] - Patterns for consistently showing icons with text
+
** [[Image:Computer.svg|22px|For plama]] [[KDE_Visual_Design_Group/HIG/Layout/ViewingVsEditing|Viewing vs Editing]] - Patterns and guidelines for laying out content that is primarily viewed.
+
** [[Image:Computer.svg|22px|For plama]] [[KDE_Visual_Design_Group/HIG/SearchPattern|Search and Filter]] - Patterns for exposing search and filter functions
+
** [[KDE_Visual_Design_Group/HIG/Breadcrumbs|Breadcrumbs]] - Support navigation by a breadcrumb trail, if appropriate
+
** [[KDE_Visual_Design_Group/HIG/Layout/Wizard|Wizard]] - Patterns for guiding the user through a series of step to accomplish a task
+
** [[KDE_Visual_Design_Group/HIG/Tooltip|Tooltips]] - Patterns for consistent presentation of information in tooltips.
+
** [[KDE_Visual_Design_Group/HIG/DualList|Dual Lists]] - Apply the dual list pattern for several selections out of a large number of (multiple) items.
+
** [[KDE_Visual_Design_Group/HIG/Slider_and_Spin_Box|Slider and Spinbox]] - Apply the slider and spin box pattern for numeric input with both large changes and precise control.
+
** [[KDE_Visual_Design_Group/HIG/Settings|Simple vs, Advanced Settings]] - Provide setting in both simple as well as advanced configurations for Plasma control modules (KCM) as well as any other KDE software
+
  
* Growth & communications
+
===Plasmoid Layouts===
 +
Plasmoids like panel popups and desktop widgets have more restrictions to account for limitations on space. These plasmoids should meet the following criteria:
 +
* Plasmoids use only a [[KDE_Visual_Design_Group/HIG/Organization#Command_Structure|simple command structure]].
 +
* Plasmoids should have a [[KDE_Visual_Design_Group/HIG/Organization#Content_Structure|flat]] or, at most, a [[KDE_Visual_Design_Group/HIG/Organization#Content_Structure|2-deep content structure]].
 +
* If the above two criteria cannot be satisfied, consider designing a traditional desktop application instead of a plasmoid.
 +
* Adjust the content and layout to the size of the container to ensure the information shown is understandable, readable and useful. So if the plasmoid is in the panel then avoid simply shrinking the content that would normally be shown if the plasmoid is on the desktop.
 +
** For example, the battery monitor in the panel does this well by showing the charge state of the main battery in the panel, but shows much more information about all batteries and brightness on the desktop or in the panel popup.
  
* Usability
 
  
* Resources
+
{{Prevnext2|nextpage=KDE_Visual_Design_Group/HIG/Style|nexttext=Style|index=KDE_Visual_Design_Group/HIG#Presentation|indextext=Back to Presentation}}

Revision as of 10:06, 18 October 2017

Layout

The application layout depends on the functionality as well as the content of the application. The layouts used throughout the design should be consistent both visually and functionally.

Guidelines

The top level layout for your application may be constructed by selecting an appropriate Command Pattern and Navigation Pattern as well as taking advantage of recommended Content Patterns.

  • Command Patterns - Layout patterns for the command structure of your application.
  • Navigation Patterns - Layout patterns to navigate your application content.
  • Content Patterns - A collection of consistent ways to present certain kinds of content
    • Images - Guidelines and patterns for displaying images
    • Icons and text - Patterns for consistently showing icons with text
    • Viewing vs Editing - Patterns and guidelines for laying out content that is primarily viewed.
    • Search and Filter- Patterns for exposing search and filter functions
    • Wizard - Patterns for guiding the user through a series of step to accomplish a task
    • Tooltips - Patterns for consistent presentation of information in tooltips.
  • Alignment - Follow alignment guidelines to make it easy understand how elements are associated.
  • Size and spacing - Use consistent size and spacing to ensure balance, reduce clutter and create breathing room.


See the layout design example that shows how to construct the layout for a photo gallery application.

Plasmoid Layouts

Plasmoids like panel popups and desktop widgets have more restrictions to account for limitations on space. These plasmoids should meet the following criteria:

  • Plasmoids use only a simple command structure.
  • Plasmoids should have a flat or, at most, a 2-deep content structure.
  • If the above two criteria cannot be satisfied, consider designing a traditional desktop application instead of a plasmoid.
  • Adjust the content and layout to the size of the container to ensure the information shown is understandable, readable and useful. So if the plasmoid is in the panel then avoid simply shrinking the content that would normally be shown if the plasmoid is on the desktop.
    • For example, the battery monitor in the panel does this well by showing the charge state of the main battery in the panel, but shows much more information about all batteries and brightness on the desktop or in the panel popup.



Content is available under Creative Commons License SA 4.0 unless otherwise noted.