|
|
| (20 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| __NOTOC__
| | This page has been migrated into the KDE HIG: |
| ==Purpose==
| |
|
| |
|
| The application layout depends on the functionality as well as the content of the application. The layouts used throughout the design should be consistent both visually and functionally.
| | https://techbase.kde.org/Projects/Usability/HIG/Layout |
| | |
| ==Guidance==
| |
| | |
| The top level layout for your application may be constructed by selecting an appropriate Command Layout Pattern and Navigation Layout Pattern as well as taking advantage of recommended Content Layout Patterns.
| |
| * [[User:Andrew/LayoutPatterns/CommandPatterns|Command Layout Patterns]] are determined by the command structure chosen for the application (simple, complex or very complex).
| |
| * [[User:Andrew/LayoutPatterns/NavigationPatterns|Navigation Layout Patterns]] depend on the structure of the application content (flat, 2-deep, 3-deep, n-deep).
| |
| * Content Layout Patterns are a collection of consistent ways to present content
| |
| ** [[User:Andrew/LayoutPatterns/Image|Images]] - Guidelines and patterns for displaying images
| |
| ** [https://techbase.kde.org/Projects/Usability/HIG/IconsAndText Icons and Text] - Patterns for consistently showing icons with text
| |
| ** [[User:Andrew/LayoutPatterns/ViewingVsEditing|Viewing vs Editing]] - Patterns and guidelines for laying out content that is primarily viewed.
| |
| ** [https://techbase.kde.org/Projects/Usability/HIG/SearchPattern Search and Filter] - Patterns for exposing search and filter functions
| |
| ** [[User:Andrew/LayoutPatterns/Wizard|Wizard]] - Patterns for guiding the user through a series of step to accomplish a task
| |
| ** [[User:Andrew/LayoutPatterns/Tooltips|Tooltips]] - Patterns for consistent presentation of information in tooltips.
| |
| * Follow the general guidelines on [https://techbase.kde.org/Projects/Usability/HIG/Alignment alignment], [https://techbase.kde.org/Projects/Usability/HIG/Placement size, and spacing] to ensure balance, reduce clutter and create breathing room.
| |
| | |
| | |
| See the [[User:Andrew/LayoutPatterns/ExamplePhotoGallery|layout design example]] that shows how to construct the layout for a photo gallery application.
| |
| | |
| ===Plasmoid Layouts===
| |
| Plasmoids like panel popups and desktop widgets have more restrictions to account for limitations on space. These plasmoids should meet the following criteria:
| |
| * Plasmoids use only a [[User:Andrew/LayoutPatterns/CommandPatterns#Patterns_for_a_simple_command_structure|simple command structure]].
| |
| * Plasmoids should have a [[User:Andrew/LayoutPatterns/NavigationPatterns#Patterns_for_a_flat_content_structure|flat]] or, at most, a [[User:Andrew/LayoutPatterns/NavigationPatterns#Patterns_for_a_2-deep_content_structure|2-deep content structure]].
| |
| * If the above two criteria cannot be satisfied, consider designing a traditional desktop application instead of a plasmoid.
| |
| | |
| ===Methodology===
| |
| '''Applications Survey'''
| |
| | |
| An extensive survey of a broad range of desktop applications was conducted. The survey activity included identifying the type and layout characteristics of each application. The types of applications surveyed were:
| |
| | |
| ''Video player, Audio/Music player, Image browser, Image editor, Web browser, File browser, Settings, Text editor, IDE, Document editor, Document viewer, Games, Email, Address book, Chat client, Calendar, Video conference, Audio/Video editing, Terminal, Calculator, Clock, System Monitor, Archiver, Mapping/Directions, Software installer/remover, Dictionary''
| |
| | |
| | |
| '''Industry Guidelines Review'''
| |
| | |
| Several published guidelines were reviewed to identify common industry layout guidance and to help validate some of the guidance provided in these guidelines. The industry layout guidelines surveyed include:
| |
| * GNOME HIG
| |
| * Windows Design Guidelines
| |
| * Google Design Guidelines
| |
| * Android Design Guidelines
| |
| * OS X HIG
| |
| * iOS HIG
| |
