KDE Visual Design Group/KirigamiHIG: Difference between revisions
(→Bars) |
|||
| Line 128: | Line 128: | ||
==Bars== | ==Bars== | ||
[[Navigation Bars]] | |||
[[Search Bars]] | |||
[[Status Bars]] | |||
[[Tab Bars]] | |||
[[Toolbars]] | |||
==Views== | ==Views== | ||
Revision as of 05:10, 10 February 2018
Kirigami Human Interface Guidelines
This guide will provide you with insight and examples to use for any designers using Kirigami. Kirigami is a convergent UI framework used in mobile and desktop applications. They are also convergent.
These guidelines 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 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.
KDE has a long tradition of providing user interface components beyond the basics that are offered in Qt itself. With KDE Frameworks 5, these have become more easily available for Qt developers who are not part of KDE. Now, with KDE's focus expanding beyond desktop and laptop computers into the mobile and embedded sector, our QWidgets-based components alone are not sufficient anymore. In order to allow developers to easily create Qt-based applications that run on any major mobile or desktop operating system (including our very own existing Plasma Desktop and upcoming Plasma Mobile, of course), we have created a framework that extends the touch-friendly Qt Quick Controls: Welcome Kirigami UI!
Kirigami UI isn't just a set of components, it's also a philosophy: It defines precise UI/UX patterns to allow developers to quickly develop intuitive and consistent apps that provide a great user experience. Some concepts are: Actions are available in two drawers and additionally through some shortcuts (buttons or swipes); actions and options are distinguished into global ones and contextual ones, put in two different drawers in the opposite vertical sides of the screen; app's content is organized in pages that you can browse through with horizontal swipes. The Kirigami Components for smartphones are optimized to allow easy navigation and interaction with just one hand, making it ideal for using applications casually "on the move". Kirigami UI is not only for smartphone applications, however: It will allow to create convergent applications, which are not simply the exact same user interface scaled to different sizes, but morphing between optimized interfaces based on the input method and screen size, changing as the context changes (e.g. flipping over a convertible, docking a phone). Another important concept is non-invasive pop-ups to undo an action, rather than confirmation dialogs.
As Kirigami aims to seamlessly integrate with the basic sets of controls offered by QtQuick, such as QtQuickcontrols, it does not duplicate the effort to provide essential controls such as buttons and text input fields, but provides ready to use, high level controls to implement its design philosophy and UX guidelines.
Why the name Kirigami? Kirigami is a Japanese art of papercraft. It is derived from origami, but adds cutting as an additional technique to folding. The reason we chose it as the name for our UI framework is that different layers or "sheets" in the UI are an important element in its design philosophy. Navigating through screens and the pop up of the drawers are like flicking through sheets of paper.
The first real-world application implemented using Kirigami Components, Subsurface-mobile, has recently been released for Android, a version for iOS is currently in the works, and the cool thing is: The two versions share most of their code! The Subsurface mobile team (which is lead by Intel's Chief Linux and Open Source Technologist Dirk Hohndel and has a certain Linus Torvalds as one of their core contributors) and their group of enthusiastic beta testers have worked closely with the developers and designers behind Kirigami to improve both the framework and the application based on their real-world experiences.
The Kirigami Components are planned to become part of KDE Frameworks 5, but will initially be released stand-alone around the end of April. They are aimed to be a Tier 1 framework, meaning they have no other dependencies apart from Qt, and therefore won't increase your application's size any more than necessary.
If you're planning to build a mobile or convergent mobile/desktop application using Qt and would like to give your users easy ways to navigate through pages and access functions, be sure to give Kirigami UI a try!
Overview
These are the basic principles guiding Kirigami design:
Direct: NEED INFO
Convergent: NEED INFO
Ease of Use, Navigation: NEED INFO
Content Oriented: NEED INFO
UI Patterns
Here you find patterns for solving specific design problems with Kirigami Components:
- Navigation Patterns - Patterns for navigating through content or between different "Screens" of an application
- Command Patterns - Patterns for executing commands
Architecture
User Interaction
System Capabilities
Visual Design
Styleguide
Kirigami UI isn't just a set of components, it's also a philosophy: It defines precise UI/UX patterns to allow developers to quickly develop intuitive and consistent apps that provide a great user experience. Some concepts are: Actions are available in two drawers and additionally through some shortcuts (buttons or swipes); actions and options are distinguished into global ones and contextual ones, put in two different drawers in the opposite vertical sides of the screen; app's content is organized in pages that you can browse through with horizontal swipes. The Kirigami Components for smartphones are optimized to allow easy navigation and interaction with just one hand, making it ideal for using applications casually "on the move". Kirigami UI is not only for smartphone applications, however: It will allow to create convergent applications, which are not simply the exact same user interface scaled to different sizes, but morphing between optimized interfaces based on the input method and screen size, changing as the context changes (e.g. flipping over a convertible, docking a phone). Another important concept is non-invasive pop-ups to undo an action, rather than confirmation dialogs.
This guide helps to create applications in line with the KDE user interface style
- Colors - Guidelines for use of color, including the Breeze color palette
- Typography - Guidelines for font usage and typography
- Animations - Guidelines for design and use of animations
- Text Guidelines for the written, language-based elements of the interface. Includes guidelines on wording, capitalization and localization.
Icons and Images
- Icons - Guidelines for icon usage and design
Bars
Views
Action Sheets
Activity Views
Alerts
Collections
Image Views
Maps
Pages
Popovers
Scroll Views
Split Views
Tables
Text Views
Web Views
Controls
Buttons
Edit Menus
Labels
Page Controls
Pickers
Progress Indicators
Refresh Content Controls
Segmented Controls
Sliders
Steppers
Switches
Text Fields
Extensions
Custom Keyboards
Document Providers
Home Screen Actions
Messaging
Photo Editing
Sharing and Actions
Widgets
Technologies
Resources
Implementation
For technical documentation, see the API documentation