|
|
| (46 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| __NOTOC__
| | '''NOTE:''' The content of the page has been moved to [[User:Andrew/Layout]]. |
| | |
| ==Purpose==
| |
| | |
| Layout patterns provide a means by which to design applications that maintain both visual and functional consistency that is appropriate for the functionality and content of the application.
| |
| | |
| ==Guidance==
| |
| | |
| The complete layout for your application may be constructed by selecting an appropriate Command Pattern and Navigation Pattern.
| |
| * [[User:Andrew/LayoutPatterns/CommandPatterns|Command Patterns]] are determined by the command structure chosen for the application (simple, complex or very complex). Commands are defined as any function performed by the application based on user input.
| |
| *[[User:Andrew/LayoutPatterns/NavigationPatterns|Navigation Patterns]] are determined by the information structure of the application content (flat, 2-deep, 3-deep, n-deep).
| |
| | |
| ===Notes===
| |
| Plasmoids like panel popups and desktop widgets should meet the following criteria:
| |
| * Plasmoids use only a [[User:Andrew/LayoutPatterns/CommandPatterns#Patterns_for_a_simple_command_structure|simple command structure]].
| |
| * The content of plasmoids must have a flat or 2-deep information structure.
| |
| * If the above two criteria cannot be satisfied, consider designing a traditional desktop application instead of a plasmoid.
| |
| | |
| | |
| Other things to consider when designing application layouts
| |
| * When starting design on a new application, it may not be clear what the command structure should be. Start with a simple command structure. As the design develops, consider a more complex command pattern only if it’s necessary.
| |
| * The n-deep navigation patterns may also be used for the 2-deep and 3-deep patterns.
| |
| | |
| ===Methodology===
| |
| '''Applications Survey'''
| |
| | |
| A survey of a broad range of desktop applications was conducted. The survey activity included identifying the layout characteristics and category of each application. The categories of the applications surveyed are captured below.
| |
| * 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
| |
