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

Jump to: navigation, search
Line 6: Line 6:
  
 
* Style
 
* Style
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] Color
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Color
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] Icons
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Icons
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] Imagery
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Imagery
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] Typography
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Typography
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] Writing
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Writing
  
 
* Layout
 
* Layout
Line 22: Line 22:
 
* Navigation
 
* Navigation
 
** Patterns for desktop user interfaces
 
** Patterns for desktop user interfaces
*** [[Image:Plasma-logo-new.png|22px|For plama]] Patterns for a flat content structure
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for a flat content structure
*** [[Image:Plasma-logo-new.png|22px|For plama]] Patterns for a 2-deep content structure
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for a 2-deep content structure
*** [[Image:Plasma-logo-new.png|22px|For plama]] Patterns for a 3-deep content structure
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for a 3-deep content structure
*** [[Image:Plasma-logo-new.png|22px|For plama]] Patterns for n-deep content structures
+
*** [[Image:Computer.svg|22px|For plama]] Patterns for n-deep content structures
 
** Patterns for phone user interfaces
 
** Patterns for phone user interfaces
*** [[Image:Kirigami icon.png|22px|For kirigami]] Patterns for a flat content structure
+
*** [[Image:Smartphone.svg|22px|For kirigami]] Patterns for a flat content structure
*** [[Image:Kirigami icon.png|22px|For kirigami]] Patterns for a 2-deep structure
+
*** [[Image:Smartphone.svg|22px|For kirigami]] Patterns for a 2-deep structure
*** [[Image:Kirigami icon.png|22px|For kirigami]] Patterns for a hierarchical structure
+
*** [[Image:Smartphone.svg|22px|For kirigami]] Patterns for a hierarchical structure
  
  
  
 
* Components
 
* Components
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] Buttons
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Buttons
*** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Command_Link|Command Link]]
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Command_Link|Command Link]]
*** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Buttons|Push Button]]
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Buttons|Push Button]]
*** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Toggle_Buttons|Toggle button]]
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/Toggle_Buttons|Toggle button]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Check_Box|Check box]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Combo_Box|Combo box]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/ContextMenu|Context menu]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Date_Time_Pickers|Date and time pickers]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Dialogs|Dialogs]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/DropDown|Drop-down]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/GroupBox|Groupbox]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/LineEdit|Line edit]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/ListView|List view]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Loading|Loading and Progress]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Menu_Bar|Menu Bar]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Radio_Buttons|Radio buttons]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Slider|Slider]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Spin_Box|Spin box]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Splitter|Splitter]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/StatusBar|Status Bar]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/TabControl|Tabs]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/TableView|Table view]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/TextEdit|Text edit]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Toolbar|Toolbar]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|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/Tooltip|Tooltips]]
** [[Image:Plasma-logo-new.png|22px|For plama]] [[Image:Kirigami icon.png|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/TreeView|Tree view]]
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] [[KDE_Visual_Design_Group/HIG/TreeView|Tree view]]
  
 
* Patterns
 
* Patterns
** [[Image:Plasma-logo-new.png|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/Layout/Image|Images]] - Guidelines and patterns for displaying images
** [[Image:Plasma-logo-new.png|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/IconsAndText|Icons and text]] - Patterns for consistently showing icons with text
** [[Image:Plasma-logo-new.png|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/Layout/ViewingVsEditing|Viewing vs Editing]] - Patterns and guidelines for laying out content that is primarily viewed.
** [[Image:Plasma-logo-new.png|22px|For plama]] [[KDE_Visual_Design_Group/HIG/SearchPattern|Search and Filter]] - Patterns for exposing search and filter functions
+
** [[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/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/Layout/Wizard|Wizard]] - Patterns for guiding the user through a series of step to accomplish a task

Revision as of 14:54, 28 September 2017

  • Introduction
    • Vision
    • Architecture
  • Motion
  • Style
    • For plama For kirigami Color
    • For plama For kirigami Icons
    • For plama For kirigami Imagery
    • For plama For kirigami Typography
    • For plama For kirigami Writing
  • Layout
    • Principles
    • Units & measurements
    • Metrics & keylines
    • Structure
    • Responsive UI
    • Split screen
  • Navigation
    • Patterns for desktop user interfaces
      • For plama Patterns for a flat content structure
      • For plama Patterns for a 2-deep content structure
      • For plama Patterns for a 3-deep content structure
      • For plama Patterns for n-deep content structures
    • Patterns for phone user interfaces
      • For kirigami Patterns for a flat content structure
      • For kirigami Patterns for a 2-deep structure
      • For kirigami Patterns for a hierarchical structure


  • Patterns
    • For plama Images - Guidelines and patterns for displaying images
    • For plama Icons and text - Patterns for consistently showing icons with text
    • For plama Viewing vs Editing - Patterns and guidelines for laying out content that is primarily viewed.
    • For plama Search and Filter - Patterns for exposing search and filter functions
    • Breadcrumbs - Support navigation by a breadcrumb trail, if appropriate
    • Wizard - Patterns for guiding the user through a series of step to accomplish a task
    • Tooltips - Patterns for consistent presentation of information in tooltips.
    • Dual Lists - Apply the dual list pattern for several selections out of a large number of (multiple) items.
    • Slider and Spinbox - Apply the slider and spin box pattern for numeric input with both large changes and precise control.
    • 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
  • Usability
  • Resources

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