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

Jump to: navigation, search
(Move notice)
 
(One intermediate revision by one other user not shown)
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]] '''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 edited on 5 February 2019, at 17:41. Content is available under Creative Commons License SA 4.0 unless otherwise noted.