Mobile Design Pattern: Scrollbar
m |
hamishwillee
(Talk | contribs) m (Text replace - "Category:Mobile Design" to "") |
||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Category: | + | [[Category:Mobile Design Patterns]] |
| − | [[ | + | {{ArticleMetaData <!-- v1.2 --> |
| + | |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | ||
| + | |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> | ||
| + | |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') --> | ||
| + | |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) --> | ||
| + | |platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | ||
| + | |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | ||
| + | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> | ||
| + | |signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | ||
| + | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
| + | |keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase --> | ||
| + | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
| + | |translated-by= <!-- [[User:XXXX]] --> | ||
| + | |translated-from-title= <!-- Title only --> | ||
| + | |translated-from-id= <!-- Id of translated revision --> | ||
| + | |review-by= <!-- After re-review: [[User:username]] --> | ||
| + | |review-timestamp= <!-- After re-review: YYYYMMDD --> | ||
| + | |update-by= <!-- After significant update: [[User:username]]--> | ||
| + | |update-timestamp= <!-- After significant update: YYYYMMDD --> | ||
| + | |creationdate= 20090531 | ||
| + | |author= [[User:Croozeus]] | ||
| + | }} | ||
| + | |||
| + | |||
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series. | This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series. | ||
| − | |||
| − | |||
| − | [[ | + | According to the [http://www.wikipedia.org/ Wikipedia]: "A scrollbar is a graphical object in a GUI with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or view port." |
| + | |||
| + | [[File:Scrollbars.jpg|450x250px]] | ||
Scrollbars are components/tools for scrolling or sliding content on the screen. The default or the built-in scrollbars are the conventional long rectangular scrollbars, preferably used with contrasting colors. However, today with many innovative design patters flowing out, there are varieties of scrollbar designs available. A use of good scrollbar makes the application have a more attractive user interface. | Scrollbars are components/tools for scrolling or sliding content on the screen. The default or the built-in scrollbars are the conventional long rectangular scrollbars, preferably used with contrasting colors. However, today with many innovative design patters flowing out, there are varieties of scrollbar designs available. A use of good scrollbar makes the application have a more attractive user interface. | ||
| − | * '''Long | + | * '''Long rectangular scrollbar - Conventional scrollbar''' |
| − | [[ | + | [[File:Conventional-scrollbar.jpg|240x320px]] |
* '''Showing arrows at top and bottom of the screen''' | * '''Showing arrows at top and bottom of the screen''' | ||
| − | [[ | + | [[File:Arrows-Top-Bottom.jpg|240x320px]] |
* '''Showing arrows at the bottom of the screen''' | * '''Showing arrows at the bottom of the screen''' | ||
| − | [[ | + | [[File:Arrows-Bottom.jpg|240x320px]] |
* '''Using a slider as a scrollbar''' | * '''Using a slider as a scrollbar''' | ||
| − | [[ | + | [[File:Sliderscrollbar.jpg|240x320px]] |
'''Allow other scrolling options''' | '''Allow other scrolling options''' | ||
| Line 23: | Line 46: | ||
* Allow scrolling by the navigation wheels. | * Allow scrolling by the navigation wheels. | ||
* Allow scrolling by dragging the screen - for touch enabled devices. | * Allow scrolling by dragging the screen - for touch enabled devices. | ||
| − | + | ||
| − | + | [[File:Screenshot0137.jpg|frame|none|Devoid of scrollbars]] | |
| − | + | ||
* When scrollbar is not used but scrolling is allowed with up and down arrow keys (or any other keys) - the application fails to indicate the end of content to the end-user. | * When scrollbar is not used but scrolling is allowed with up and down arrow keys (or any other keys) - the application fails to indicate the end of content to the end-user. | ||
| − | + | ||
---- | ---- | ||
Latest revision as of 06:26, 9 May 2012
Article Metadata
This design pattern is part of the Mobile Design Patterns series.
According to the Wikipedia: "A scrollbar is a graphical object in a GUI with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or view port."
Scrollbars are components/tools for scrolling or sliding content on the screen. The default or the built-in scrollbars are the conventional long rectangular scrollbars, preferably used with contrasting colors. However, today with many innovative design patters flowing out, there are varieties of scrollbar designs available. A use of good scrollbar makes the application have a more attractive user interface.
- Long rectangular scrollbar - Conventional scrollbar
- Showing arrows at top and bottom of the screen
- Showing arrows at the bottom of the screen
- Using a slider as a scrollbar
Allow other scrolling options
- Allow scrolling by arrow, volume or any other shortcut keys.
- Allow scrolling by the navigation wheels.
- Allow scrolling by dragging the screen - for touch enabled devices.
Devoid of scrollbars
- When scrollbar is not used but scrolling is allowed with up and down arrow keys (or any other keys) - the application fails to indicate the end of content to the end-user.
--Submitted by croozeus 07:39, 31 May 2009 (EEST)
