|
|
| (186 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | =Slicer Human Interface Design and Style Guidelines=
| + | <big>'''Note:''' We are migrating this content to the slicer.org domain - <font color="orange">The newer page is [https://www.slicer.org/wiki/Slicer3:Human_Interface_and_Style_Guide_for_Developers#Providing_Help here]</font></big>a |
| − | | |
| − | ==Introduction==
| |
| − | | |
| − | 3D Slicer (or Slicer) is a large and continuously developing application. Its base is designed to offer substantial core functionality, and its modules extend that functionality to include specialized and cutting-edge research tools and interoperability with other open source softwares. The development effort seeks to simultaneously ensure that Slicer meets the needs of a broad user community, that developers can easily contribute to and extend the application, and that the software remains easy to test and maintain.
| |
| − | | |
| − | These human interface design and style guidelines are a resource for Slicer developers who want to create module interfaces that are easy to learn, understandable and usable, and that conform to Slicer’s general appearance and behavior conventions. The recommendations in this document are designed to be easy for developers to apply and their adoption is strongly encouraged. However, a developer’s interface design can depart from convention when these guidelines appear inappropriate for a particular application.
| |
| − | | |
| − | ==Organization==
| |
| − | | |
| − | This document is organized into the following two sections:
| |
| − | | |
| − | 1. Slicer Module Design Principles
| |
| − | | |
| − | 2. Slicer Widget and Interface Style Specifics
| |
| − | | |
| − | Within these sections, developers will find recommendations that promote usable and consistent Slicer module interfaces, and link to technical resources where appropriate.
| |
| − | | |
| − | | |
| − | | |
| − | | |
| − | == Look and Feel ==
| |
| − | | |
| − | '''GUI Style:''' Try not to add style elements (like foreground and background color, font, relief, etc.) to the interface you create; let the options database (as set up by the vtkSlicerTheme class) specify the style for the widgets in your module so that all modules appear consistent within the Slicer3 application. | |
| − | | |
| − | == Module style ==
| |
| − | | |
| − | == Pop-up windows ==
| |
| − | | |
| − | == Confirm on Delete ==
| |
| − | | |
| − | Check vtkSlicerApplication::ConfirmDelete setting; if a user has requested to be presented with a confirm on delete, then give them that option.
| |
| − | | |
| − | == [[Event Bindings]] ==
| |
| − | | |
| − | With respect to the specification of keyboard accelerators, please follow these three recommendations;
| |
| − | | |
| − | * Before assigning "hot-keys" to functionality, either in the main Slicer application or in a new module, please consult the table (and design plan) linked below to make sure the key is not already assigned.
| |
| − | * Across Slicer modules, try to use similar "hot-key" assignments for similar functionality; this consistency makes Slicer easier to learn.
| |
| − | * Once you assign "hot-keys" in your module, please add those mappings to the table for others to reference.
| |
| − | | |
| − | == Application Font ==
| |
| − | Verdana is the font chosen for the 3DSlicer brand.
| |
| − | | |
| − | Maintaining consistency of type is an important component of maintaining a coherent look and feel for 3DSlicer and any related or derived visual communications. Verdana was designed specifically to be read on a digital display; it is recommended that we use Verdana (or Geneva) wherever possible in 3DSlicer's web presence and online tutorial materials, and wherever reasonable and appropriate in formal printed materials.
| |
| − | | |
| − | Within the software, since it can't be guaranteed that these fonts will be widely available on all platforms, Helvetica or Arial should be used as a substitute. Slicer's theme sets the application font to be Helvetica 8 normal. Please avoid typefaces with serifs.
| |
| − | | |
| − | == Icons ==
| |
| − | | |
| − | Icons can be a powerful way to represent complicated information within a small footprint on the GUI panel. They associate a visual image with data, state, or a particular operation.
| |
| − | | |
| − | * They should be easy to parse, convey a strong metaphor, and not require significant time for a user to interpret.
| |
| − | * They should be memorable so that a user can recognize them quickly in future sessions with your module.
| |
| − | * If an icon already exists within 3DSlicer to represent the data, state or operation you want to indicate, then re-use that icon (indicate visibility with the open/shutting eye, for example.)
| |
| − | * Note: if the concept is too difficult to represent with a picture, then a text label can always be used instead!
| |
| − | | |
| − | When designing icons, do bear in mind that it's possible to offend users with images that have cultural or polictal connotations. Even colors can have connotations for users in different parts of the world that may be surprising and unintended for the designer and developer. Generally speaking, it's useful to avoid images that contain:
| |
| − | | |
| − | * icons that depict only hands or feet
| |
| − | * images of animals
| |
| − | * maps containing disputed boundaries or region names.
| |
| − | * lists of countries that are not in alphabetical order.
| |
| − | * pictures of flags
| |
| − | * pictures of money
| |
| − | | |
| − | ===Slicer icon conventions===
| |
| − | 3DSlicer icons should all be of dimension 21x21 pixels.
| |
| − | | |
| − | '''Enabled''' or '''Enabled + Selected''' icons should have:
| |
| − | | |
| − | * a white background (r=255, g=255, b=255, or #FF FF FF)
| |
| − | * a black hairline along the perimeter (r=0,g=0,b=0, or #00 00 00).
| |
| − | | |
| − | '''Disabled''' or '''Enabled + Deselected''' icons should have:
| |
| − | * a grey background, value (r=230, g=230, b=230, or hex value #E6 E6 E6)
| |
| − | * a grey hairline perimeter of value (r=178, g=178, b=178, hex value #B2 B2 B2).
| |
| − | | |
| − | ===Downloadable blank icons:===
| |
| − | These icon blanks are provided for download and use:
| |
| − | | |
| − | * Enabled or Enabled+Selected: [[image:IconBlank.png | conventional Slicer icon ]]
| |
| − | * Disabled or Enabled+Deselected: [[image:IconBlankLow.png | "deselected" Slicer icon]]
| |
| − | * Enabled Menubutton: [[image:MenuButtonIconBlank.png | conventional Slicer menubutton icon]]
| |
| − | * Disabled Menubutton: [[image:MenuButtonIconBlankDisabled.png | "disabled" Slicer menubutton icon]]
| |
| − | | |
| − | ===Icons currently used in Slicer's Base===
| |
| − | Below is a figure of icons currently in use in 3DSlicer. If the icon you need is already used in Slicer, we encourage its re-use in your own module (the visibility icon is a good example). However, if an icon is re-used, make sure you are using it to convey the same meaning/function -- icons shouldn't have different meanings in different places. Finally, make sure any new icons designed for a module don't duplicate ones already in use elsewhere in Slicer.
| |
| − | | |
| − | [[Image:SlicerToolbarIcons2.png | Slicer icons ]]
| |
| − | | |
| − | == Widget-specific patterns to follow ==
| |
| − | | |
| − | == Providing help ==
| |
| − | | |
| − | == Popup messages (dialog, warning, error, confirm, etc.) ==
| |
| − | | |
| − | == Language ==
| |
| − | | |
| − | == Credit and Logos ==
| |
| − | | |
| − | | |
| − | | |
| − | == Controls and Layout ==
| |
| − | | |
| − | == Progress Feedback ==
| |
| − | | |
| − | == Colors: application palettes ==
| |
| − | | |
| − | '''Currently being modified...''' The Slicer3 color palettes are shown below. Developers of code, web content and training materials are encouraged to make color choices for GUI components according to this palette, bearing in mind that some of the colors are linked with special meaning, such as error (errorRed), warning (warningYellow), and system (systemBlue) messages.
| |
| − | | |
| − | [[Image:Slicer3Palette.png|[[Image:Slicer3Palette.png| Slicer GUI color palettes (not applicable to visualization)]]]]
| |
| − | | |
| − | <br /> | |
| − | | |
| − | main palette
| |
| − | | |
| − | {| border="1"
| |
| − | |- bgcolor="#ffffff"
| |
| − | ! name
| |
| − | ! show me
| |
| − | ! R
| |
| − | ! G
| |
| − | ! B
| |
| − | ! hex
| |
| − | ! use in slicer
| |
| − | |-
| |
| − | | black
| |
| − | | bgcolor="#000000" |
| |
| − | | align="center" | 0
| |
| − | | align="center" | 0
| |
| − | | align="center" | 0
| |
| − | | #000000
| |
| − | | text on enabled widgets
| |
| − | |-
| |
| − | | white
| |
| − | | bgcolor="#ffffff" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 255
| |
| − | | align="center" | 255
| |
| − | | #ffffff
| |
| − | | GUI background
| |
| − | |-
| |
| − | | lightestGrey
| |
| − | | bgcolor="#e5e5ff" |
| |
| − | | align="center" | 229
| |
| − | | align="center" | 229
| |
| − | | align="center" | 255
| |
| − | | #e5e5ff
| |
| − | |
| |
| − | |-
| |
| − | | lighterGrey
| |
| − | | bgcolor="#dfdde2" |
| |
| − | | align="center" | 223
| |
| − | | align="center" | 221
| |
| − | | align="center" | 226
| |
| − | | #dfdde2
| |
| − | |
| |
| − | |-
| |
| − | | lightGrey
| |
| − | | bgcolor="#aeaeae" |
| |
| − | | align="center" | 174
| |
| − | | align="center" | 174
| |
| − | | align="center" | 174
| |
| − | | #aeaeae
| |
| − | |
| |
| − | |-
| |
| − | | mediumGrey
| |
| − | | bgcolor="#999999" |
| |
| − | | align="center" | 153
| |
| − | | align="center" | 153
| |
| − | | align="center" | 153
| |
| − | | #999999
| |
| − | | unsaved data ?
| |
| − | |-
| |
| − | | darkGrey
| |
| − | | bgcolor="#525252" |
| |
| − | | align="center" | 82
| |
| − | | align="center" | 82
| |
| − | | align="center" | 82
| |
| − | | #525252
| |
| − | |
| |
| − | |-
| |
| − | | darkOchre
| |
| − | | bgcolor="#b56415" |
| |
| − | | align="center" | 181
| |
| − | | align="center" | 100
| |
| − | | align="center" | 21
| |
| − | | #b56415
| |
| − | |
| |
| − | |-
| |
| − | | mediumOchre
| |
| − | | bgcolor="#e4a620" |
| |
| − | | align="center" | 228
| |
| − | | align="center" | 166
| |
| − | | align="center" | 32
| |
| − | | #e4a620
| |
| − | |
| |
| − | |-
| |
| − | | brightOchre
| |
| − | | bgcolor="#f3ac22" |
| |
| − | | align="center" | 243
| |
| − | | align="center" | 172
| |
| − | | align="center" | 34
| |
| − | | #f3ac22
| |
| − | |
| |
| − | |-
| |
| − | | lightOchre
| |
| − | | bgcolor="#f3b846" |
| |
| − | | align="center" | 243
| |
| − | | align="center" | 184
| |
| − | | align="center" | 70
| |
| − | | #f3b846"
| |
| − | |
| |
| − | |-
| |
| − | | lightestOchre
| |
| − | | bgcolor="#f4e97f" |
| |
| − | | align="center" | 244
| |
| − | | align="center" | 233
| |
| − | | align="center" | 127
| |
| − | | #f4e97f
| |
| − | |
| |
| − | |-
| |
| − | | stone
| |
| − | | bgcolor="#e0c39e" |
| |
| − | | align="center" | 224
| |
| − | | align="center" | 195
| |
| − | | align="center" | 158
| |
| − | | #e0c39e
| |
| − | |
| |
| − | |-
| |
| − | | stoneTint
| |
| − | | bgcolor="#efe0cd" |
| |
| − | | align="center" | 239
| |
| − | | align="center" | 224
| |
| − | | align="center" | 205
| |
| − | | #efe0cd
| |
| − | |
| |
| − | |-
| |
| − | | red
| |
| − | | bgcolor="#c32e10" |
| |
| − | | align="center" | 195
| |
| − | | align="center" | 46
| |
| − | | align="center" | 15
| |
| − | | #c32e10
| |
| − | | error message code
| |
| − | |-
| |
| − | | brick
| |
| − | | bgcolor="#ba462b" |
| |
| − | | align="center" | 186
| |
| − | | align="center" | 70
| |
| − | | align="center" | 43
| |
| − | | #ba462b
| |
| − | |
| |
| − | |-
| |
| − | | lightBrick
| |
| − | | bgcolor="#c17350" |
| |
| − | | align="center" | 193
| |
| − | | align="center" | 115
| |
| − | | align="center" | 80
| |
| − | | #c17350
| |
| − | | axi slice
| |
| − | |-
| |
| − | | redTint
| |
| − | | bgcolor="#e0b6af" |
| |
| − | | align="center" | 224
| |
| − | | align="center" | 182
| |
| − | | align="center" | 175
| |
| − | | #e0b6af
| |
| − | |
| |
| − | |-
| |
| − | | darkGreen
| |
| − | | bgcolor="#445632" |
| |
| − | | align="center" | 68
| |
| − | | align="center" | 86
| |
| − | | align="center" | 50
| |
| − | | #445632
| |
| − | |
| |
| − | |-
| |
| − | | brightGreen
| |
| − | | bgcolor="#688f42" |
| |
| − | | align="center" | 104
| |
| − | | align="center" | 143
| |
| − | | align="center" | 66
| |
| − | | #688f42
| |
| − | |
| |
| − | |-
| |
| − | | dustyGreen
| |
| − | | bgcolor="#8aa56f" |
| |
| − | | align="center" | 138
| |
| − | | align="center" | 165
| |
| − | | align="center" | 111
| |
| − | | #8aa56f
| |
| − | | cor slice
| |
| − | |-
| |
| − | | greenTint
| |
| − | | bgcolor="#ccf4a6" |
| |
| − | | 204
| |
| − | | 244
| |
| − | | 166
| |
| − | | #ccf4a6
| |
| − | |
| |
| − | |-
| |
| − | | darkBlue
| |
| − | | bgcolor="#494066" |
| |
| − | | align="center" | 73
| |
| − | | align="center" | 64
| |
| − | | align="center" | 102
| |
| − | | #494066
| |
| − | |
| |
| − | |-
| |
| − | | mediumBlue
| |
| − | | bgcolor="#625b81" |
| |
| − | | align="center" | 98
| |
| − | | align="center" | 91
| |
| − | | align="center" | 129
| |
| − | | #625b81
| |
| − | | system message code
| |
| − | |-
| |
| − | | lightBlue
| |
| − | | bgcolor="#887fa3" |
| |
| − | | align="center" | 136
| |
| − | | align="center" | 127
| |
| − | | align="center" | 163
| |
| − | | #887fa3
| |
| − | | unsaved data?
| |
| − | |-
| |
| − | | slicerBlue
| |
| − | | bgcolor="#b3b3e6" |
| |
| − | | align="center" | 179
| |
| − | | align="center" | 179
| |
| − | | align="center" | 230
| |
| − | | #b3b3e6
| |
| − | |
| |
| − | |}
| |
| − | | |
| − | <br /> | |
| − | | |
| − | message palette:
| |
| − | | |
| − | {| border="1"
| |
| − | |- bgcolor="#ffffff"
| |
| − | ! name
| |
| − | ! show me
| |
| − | ! R
| |
| − | ! G
| |
| − | ! B
| |
| − | ! hex
| |
| − | ! use in slicer
| |
| − | |-
| |
| − | | errorRed
| |
| − | | bgcolor="#ff0000" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 0
| |
| − | | align="center" | 0
| |
| − | | #ff0000
| |
| − | | error message/dialog accent
| |
| − | |-
| |
| − | | systemBlue
| |
| − | | bgcolor="#0f66c0" |
| |
| − | | align="center" | 15
| |
| − | | align="center" | 102
| |
| − | | align="center" | 192
| |
| − | | #0f66c0
| |
| − | | message/dialog accent
| |
| − | |-
| |
| − | | warningYellow
| |
| − | | bgcolor="#ffe21e" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 226
| |
| − | | align="center" | 30
| |
| − | | #ffe21e
| |
| − | | warning message/dialog accent
| |
| − | |}
| |
| − | | |
| − | | |
| − | accent palette:
| |
| − | | |
| − | {| border="1"
| |
| − | |- bgcolor="#ffffff"
| |
| − | ! name
| |
| − | ! show me
| |
| − | ! R
| |
| − | ! G
| |
| − | ! B
| |
| − | ! hex
| |
| − | ! use in slicer
| |
| − | |-
| |
| − | | magenta
| |
| − | | bgcolor="#ff00ff" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 0
| |
| − | | align="center" | 255
| |
| − | | #ff00ff
| |
| − | | 3D viewer cube & icon accent
| |
| − | |-
| |
| − | | purple
| |
| − | | bgcolor="#bf49be" |
| |
| − | | align="center" | 191
| |
| − | | align="center" | 73
| |
| − | | align="center" | 190
| |
| − | | #bf49be
| |
| − | | icon accent
| |
| − | |-
| |
| − | | darkPurple
| |
| − | | bgcolor="#8b2785" |
| |
| − | | align="center" | 139
| |
| − | | align="center" | 39
| |
| − | | align="center" | 133
| |
| − | | #8b2785
| |
| − | | icon accent
| |
| − | |-
| |
| − | | logoGreyBlue
| |
| − | | bgcolor="#717f98" |
| |
| − | | align="center" | 113
| |
| − | | align="center" | 127
| |
| − | | align="center" | 152
| |
| − | | #717f98
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | IGTGrey
| |
| − | | bgcolor="#44455b" |
| |
| − | | align="center" | 68
| |
| − | | align="center" | 69
| |
| − | | align="center" | 91
| |
| − | | #44455b
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | logoDarkGrey
| |
| − | | bgcolor="#30383c" |
| |
| − | | align="center" | 48
| |
| − | | align="center" | 56
| |
| − | | align="center" | 60
| |
| − | | #30383c
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | logoLightYellow
| |
| − | | bgcolor="#f0d98a" |
| |
| − | | align="center" | 240
| |
| − | | align="center" | 217
| |
| − | | align="center" | 138
| |
| − | | #f0d98a
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | logoMediumYellow
| |
| − | | bgcolor="#f8bf25" |
| |
| − | | align="center" | 248
| |
| − | | align="center" | 191
| |
| − | | align="center" | 37
| |
| − | | #f8bf25
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | logoOrange
| |
| − | | bgcolor="#f06c2e" |
| |
| − | | align="center" | 240
| |
| − | | align="center" | 108
| |
| − | | align="center" | 46
| |
| − | | #f06c2e
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | logoRed
| |
| − | | bgcolor="#f72d1e" |
| |
| − | | align="center" | 247
| |
| − | | align="center" | 45
| |
| − | | align="center" | 30
| |
| − | | #f72d1e
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | NAMICBlue
| |
| − | | bgcolor="#0063b5" |
| |
| − | | align="center" | 0
| |
| − | | align="center" | 99
| |
| − | | align="center" | 181
| |
| − | | #0063b5
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | SPLGreen
| |
| − | | bgcolor="#009966" |
| |
| − | | align="center" | 0
| |
| − | | align="center" | 153
| |
| − | | align="center" | 102
| |
| − | | #009966
| |
| − | | logo color & icon accent
| |
| − | |}
| |
