|
|
| (6 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/]]}} |
| | |
| 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 [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.
| |
| | |
| 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
| |
| * [[/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==
| |
| | |
| [[UI Accessibility | UI Accessibility]]
| |
| | |
| [[Loading | Loading]]
| |
| | |
| [[Modality | Modality]]
| |
| | |
| [[Navigation | Navigation]]
| |
| | |
| [[Onboarding | Onboarding]]
| |
| | |
| [[Requesting Permission | Requesting Permission]]
| |
| | |
| [[Settings | Settings]]
| |
| | |
| ==User Interaction==
| |
| | |
| [[Audio | Audio]]<br />
| |
| | |
| [[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 ==
| |
| 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
| |
| * [[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==
| |
| | |
| [[Image Size and Resolution]]
| |
| | |
| [[KDE_Visual_Design_Group/HIG/IconDesign | App Icon]]
| |
| * [[KDE_Visual_Design_Group/HIG/IconDesign|Icons]] - Guidelines for icon usage and design
| |
| | |
| [[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==
| |
| | |
| ===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 [https://api.kde.org/kirigami/html/index.html API documentation]
| |
| | |
| == Drafts ==
| |
| * [[/ContextDrawer/DetailsWidget | Details in the context drawer]]
| |
