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

Jump to: navigation, search
Line 8: Line 8:
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Color
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Color
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Icons
 
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] 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]] '''Imagery'''
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Typography
+
** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] '''Typography'''
 
** Writing
 
** Writing
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Wording
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] '''Wording'''
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Capitalization
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] '''Capitalization'''
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Labels
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] '''Labels'''
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Static text  
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] '''Static text'''
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] Localization  
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] '''Localization'''
  
 
* Layout
 
* Layout
 
** Principles
 
** Principles
** Units & measurements
+
** '''Units & measurements'''
 
** Metrics & keylines
 
** Metrics & keylines
 
** Structure
 
** Structure
 
** Responsive UI
 
** Responsive UI
** Split screen
 
  
 
* Navigation
 
* Navigation
Line 55: Line 54:
 
** [[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/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/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/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/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/Splitter|Splitter]]
Line 68: Line 67:
 
* Patterns
 
* 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/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/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/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
 
** [[Image:Computer.svg|22px|For plama]] [[KDE_Visual_Design_Group/HIG/SearchPattern|Search and Filter]] - Patterns for exposing search and filter functions

Revision as of 20:23, 19 February 2018

  • 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
    • Writing
      • For plama For kirigami Wording
      • For plama For kirigami Capitalization
      • For plama For kirigami Labels
      • For plama For kirigami Static text
      • For plama For kirigami Localization
  • Layout
    • Principles
    • Units & measurements
    • Metrics & keylines
    • Structure
    • Responsive UI
  • 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.