|
|
| 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
| |
