|
|
| (16 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 an aid to designing applications that maintain both visual and functional consistencies that are appropriate for the functionality and content of the application.
| |
| | |
| ==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 different types of content
| |
| ** [[User:Andrew/LayoutPatterns/Image|Images]] - Patterns for displaying images with captions
| |
| ** [https://techbase.kde.org/Projects/Usability/HIG/SearchPattern Search and Filter] - Patterns for exposing search and Filter functions
| |
| ** [https://techbase.kde.org/Projects/Usability/HIG/IconsAndText Icons and Text] - Pattern for consistently showing icons with text
| |
| ** [[User:Andrew/LayoutPatterns/ViewandEdit|View and Edit]] - Pattern for showing content that is primarily viewed but is occasionally edited.
| |
| ** [[User:Andrew/LayoutPatterns/Wizard|Wizard]] - Pattern for guiding the user through a series of step to accomplish a task
| |
| ** [[User:Andrew/LayoutPatterns/Tooltips|Tooltips]] - Pattern for consistent presentation of information that pops up when the mouse is over an item.
| |
| ** [[User:Andrew/LayoutPatterns/Plasmoids|Plasmoids]] - Patterns for panel popups and desktop widgets.
| |
| | |
| | |
| See the [[User:Andrew/LayoutPatterns/ExamplePhotoGallery|layout pattern example]] that shows how to contstruct the layout for photo gallery application.
| |
| | |
| | |
| ===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
| |
