|
|
| (28 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| __NOTOC__
| | This page has been migrated into the KDE HIG: |
|
| |
|
| ==Purpose==
| | https://techbase.kde.org/Projects/Usability/HIG/Layout |
| | |
| 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.
| |
| | |
| ==Guidance==
| |
| | |
| The top level layout for your application may be constructed by selecting an appropriate Command Pattern and Navigation Pattern as well as taking advantage of recommended Content Patterns.
| |
| * [[User:Andrew/LayoutPatterns/CommandPatterns|Command Patterns]] are determined by the command structure chosen for the application (simple, complex or very complex).
| |
| * [[User:Andrew/LayoutPatterns/NavigationPatterns|Navigation Patterns]] depend on the structure of the application content (flat, 2-deep, 3-deep, n-deep).
| |
| * Content 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 for showing content that is primarily viewed and occasionally edited.
| |
| ** [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
| |
