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

Jump to: navigation, search
(Move notice)
 
Line 1: Line 1:
* Introduction
+
{{Note|This page is now on [[https://hig.kde.org/index.html https://hig.kde.org/]]}}
** '''Design Vision and Principles'''
+
** '''Architecture'''
+
 
+
* Motion
+
 
+
* Style
+
** [[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]] '''Elevation'''
+
** [[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'''
+
** 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]] '''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]] '''Static text'''
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|22px|For kirigami]] '''Localization'''
+
 
+
* Layout
+
** Principles
+
** '''Units & measurements'''
+
** '''Metrics, placement & keylines'''
+
** '''Alignment'''
+
** 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/Command_Link|Command Link]]
+
*** [[Image:Computer.svg|22px|For plama]] [[Image:Smartphone.svg|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/Toggle_Buttons|Toggle button]]
+
** [[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
+
 
+
* Usability
+
 
+
* Resources
+

Latest revision as of 17:41, 5 February 2019

Note-box-icon.png
 
Note
This page is now on [https://hig.kde.org/]

This page was last modified on 5 February 2019, at 17:41. Content is available under Creative Commons License SA 4.0 unless otherwise noted.