|
|
| (19 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| = Kirigami Human Interface Guidelines =
| | {{Note|KDE Human Interface Guidelines got moved to [[https://hig.kde.org/ https://hig.kde.org/]]}} |
| | |
| Welcome to the Kirigami Human Interface Guidelines (HIG)!
| |
| The goal of this document is to help anybody who designs user interfaces for mobile or convergent mobile/desktop applications which will be implemented using the Kirigami Components.
| |
| | |
| They help you to make optimal use of the Kirigami Components, as they reflect the design ideas behind the components. If you have any questions, please contact the KDE VDG (vdesign [at] kde [dot] org)
| |
| | |
| These guidelines are for Kirigami-specific aspects of user interface design. For general recommendations on design concepts, see the [https://community.kde.org/KDE_Visual_Design_Group/HIG/Concept concept] page in the general KDE HIG.
| |
| The Kirigami HIG are separated in three parts: Design Principles, UI Patterns and a Styleguide for KDE Applications.
| |
| | |
| ==Overview==
| |
| These are the basic principles guiding Kirigami design:
| |
| | |
| Direct: NEED INFO
| |
| * [[/Principles/OptimizedConverence | When creating convergent UIs, optimize the UI separately for each device class]]
| |
| | |
| Convergent: NEED INFO
| |
| | |
| Ease of Use, Navigation: NEED INFO
| |
| * [[/Principles/OneHandedUse | Optimize your application for use with one hand]]\
| |
| * [[/Principles/Navigation | Allow for a clear and predictable navigation]]
| |
| | |
| Content Oriented: NEED INFO
| |
| * [[/Principles/ContentIsKing | Make as much space available for the content as possible]]
| |
| | |
| == UI Patterns ==
| |
| Here you find patterns for solving specific design problems with Kirigami Components:
| |
| * [[/NavigationPatterns | Navigation Patterns]] - Patterns for navigating through content or between different "Screens" of an application
| |
| * [[/CommandPatterns | Command Patterns]] - Patterns for executing commands
| |
| | |
| ==Architecture==
| |
| | |
| ===Accessibility===
| |
| ===Loading===
| |
| ===Modality===
| |
| ===Navigation===
| |
| ===Onboarding===
| |
| ===Requesting Permission===
| |
| ===Settings===
| |
| | |
| ==User Interaction==
| |
| | |
| ===Audio===
| |
| ===Authentication===
| |
| ===Data Entry===
| |
| ===Drag and Drop===
| |
| ===Feedback===
| |
| ===File Handling===
| |
| ===Gestures===
| |
| ===Undo and Redo===
| |
| | |
| ==System Capabilities==
| |
| | |
| ===Multitasking===
| |
| ===Notifications===
| |
| ===Printing===
| |
| ===Quick Look===
| |
| ===Ratings and Reviews===
| |
| ===Screenshots===
| |
| | |
| ==Visual Design==
| |
| | |
| ===Adaptivity and Layout===
| |
| ===Animation===
| |
| ===Branding===
| |
| ===Color===
| |
| ===Terminology===
| |
| ===Typography===
| |
| | |
| == Styleguide ==
| |
| This guide helps to create applications in line with the KDE user interface style
| |
| * [[KDE_Visual_Design_Group/HIG/Color|Colors]] - Guidelines for use of color, including the Breeze color palette
| |
| * [[KDE_Visual_Design_Group/HIG/Style/Typography|Typography]] - Guidelines for font usage and typography
| |
| * [[KDE_Visual_Design_Group/HIG/Animations|Animations]] - Guidelines for design and use of animations
| |
| * [[KDE_Visual_Design_Group/HIG/Text | Text]] Guidelines for the written, language-based elements of the interface. Includes guidelines on wording, capitalization and localization.
| |
| | |
| ==Icons and Images==
| |
| * [[KDE_Visual_Design_Group/HIG/IconDesign|Icons]] - Guidelines for icon usage and design
| |
| | |
| ===Image Size and Resolution===
| |
| ===App Icon===
| |
| ===Custom Icons===
| |
| ===Launch Screen===
| |
| ===System Icons===
| |
| | |
| ==Bars==
| |
| | |
| ===Navigation Bars===
| |
| ===Search Bars===
| |
| ===Status Bars===
| |
| ===Tab Bars===
| |
| ===Toolbars===
| |
| | |
| ==Views==
| |
| | |
| ===Action Sheets===
| |
| ===Activity Views===
| |
| ===Alerts===
| |
| ===Collections===
| |
| ===Image Views===
| |
| ===Maps===
| |
| ===Pages===
| |
| ===Popovers===
| |
| ===Scroll Views===
| |
| ===Split Views===
| |
| ===Tables===
| |
| ===Text Views===
| |
| ===Web Views===
| |
| | |
| ==Controls==
| |
| | |
| ==Extensions==
| |
| | |
| ==Technologies==
| |
| | |
| ==Resources==
| |
| | |
| == Implementation ==
| |
| For technical documentation, see the [https://api.kde.org/kirigami/html/index.html API documentation]
| |
| | |
| == Drafts ==
| |
| * [[/ContextDrawer/DetailsWidget | Details in the context drawer]]
| |
