Crm4 Ux Design Guide
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Crm4 Ux Design Guide as PDF for free.
More details
- Words: 1,342
- Pages: 39
MICROSOFT DYNAMICS CRM 4.0 UI STYLE GUIDE November 21, 2007 Revision 1.0
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Contents Main Window Main Window Regions................................................................................................................................................................................................................................ 1 Main Window Dimensions....................................................................................................................................................................................................................... 2 Standard Tool Bar......................................................................................................................................................................................................................................... 3 Pulldown Menu............................................................................................................................................................................................................................................. 4 Navigation Pane............................................................................................................................................................................................................................................ 5 Application Title Bar.................................................................................................................................................................................................................................... 7 Actions Tool Bar............................................................................................................................................................................................................................................. 9
Form Window Form Window Navigation Pane............................................................................................................................................................................................................10 Form Tool Bar...............................................................................................................................................................................................................................................12 Form Window Dimensions......................................................................................................................................................................................................................14 Form Window Icon.....................................................................................................................................................................................................................................16 Form Window Input Fields......................................................................................................................................................................................................................17 Input Controls..............................................................................................................................................................................................................................................18 Form Window Tabs.....................................................................................................................................................................................................................................19
Dialog Window Dialog Window............................................................................................................................................................................................................................................20 Dialog Window Dimensions...................................................................................................................................................................................................................21 Dialog Window Color and Type............................................................................................................................................................................................................22
Settings Window Settings Window Dimensions................................................................................................................................................................................................................23 Settings Window Color and Type . ......................................................................................................................................................................................................24
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Contents (con’t) Errors and Alerts Error Dialog Window.................................................................................................................................................................................................................................25 Error Dialog Icons.......................................................................................................................................................................................................................................26 Alert Banner..................................................................................................................................................................................................................................................27 Alert Banner Dimensions.........................................................................................................................................................................................................................28
Wizard Report Wizard..............................................................................................................................................................................................................................................29
Other UI Elements Calendar Specifications.............................................................................................................................................................................................................................30 Buttons............................................................................................................................................................................................................................................................32 Articles Window Pane...............................................................................................................................................................................................................................33 Knowledge Base Window Pane.............................................................................................................................................................................................................34 Queues Window Pane...............................................................................................................................................................................................................................35 Quick Find.....................................................................................................................................................................................................................................................36
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Main Window Regions
1 3
1
Standard Tool Bar
2
Navigation Pane
3
Application Title Bar
4
Actions Tool Bar
5
View Filter
6
List
5 4
2
6
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Main Window Dimensions 58
27 27 39
App Navigation Pane Default 173, resizable
App Content Pane Resizeable 5
5
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Standard Tool Bar
Mouse Over States
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Pulldown Menu 1 px border #7E7E7E Icon 16x16px
7
14 22 14 #FFE6A0
#FFB74C
16 X 16 Icon 8
46
Line 1 px #C5C5C5 Margin width 25 px background #E9E9E9 Gap 1 px white
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Navigation Pane 6
4
List Item, 11px Tahoma, #000000
11 16 155 17
Section Title 11px Tahoma, Bold #15428B Highlight 16 X 16 Icon
3
Mouse Over 14
14 22
23 188
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Navigation Pane
Mouse Over States
1 px #C6CEDC
23
Tahoma 11px #15428B
Mouse Over displays hyperlink underneath text
32
Tahoma 11px #15428B
Selected Button
32
Tahoma 11px #15428B Mouse Over Button
5 24 6
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Application Title Bar
On Hover highlight
On Click/ On mouse down Default 144, resizable
8
Tahoma 14px, Bold, #15428B
2
2
5
34
2
8 28
22 2
8 Left border 1 px, White
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Application Title Bar
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Actions Tool Bar 1px #6699CC
Row Highlight #6699CC
Row Height 20px
Row Border 1px #C4DDFF
1px #6699CC
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Navigation Pane 16 x 16 Icon
Section Title, 11 px Tahoma, bold #15428B
1 px border #6699CC
Background 2 19
2
4 18 px,Line height
2
List item, 11 px Tahoma, #000000 7
7
4
#D9EAFF
1 px shadow #B0C2D0
Highlight, 11 px, Tahoma bold, #000000
18
Nav page with scrollbar
#FFDBB7
Disable H scrolling 7 1 px shadow #B0C2D0
10
#FFBD69
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Navigation Pane
Collapsed section
19
Hover Highlight background 16 px height
11
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Tool Bar
12
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Tool Bar
13
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Dimensions
Default 833, resizable Content Pane Fixed 170 Navigation Pane
Default 565, Resizable
24 px
14
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Dimensions 48 x 66 Graphic
Tahoma 11px, Bold, #000000
9
25
38
57 27
8
160
10
43
10
782
7
Tahoma 18px, Bold, #6699CC
15
7
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Icon Icons for the Form Window are 66 X 48 pixel icons. They are three-dimensional and shown in perspective as solid objects. Three-dimensional objects are represented in perspective as solid objects, seen from a birds-eye view with two vanishing points as shown below. Use a shadow as shown to lift objects visually from the background. The light source for objects within the perspective grid is above, slightly in front of, and slightly to the right of the object. The light source casts shadows that are slightly to the rear and right of the object’s base. All light rays are parallel, and strike the object along the same angle (like the sun). The goal is to have a uniform lighting appearance across all icons and spotlight effects. Parallel light rays produce shadows that all have the same length and density, providing further unity across multiple icons.
Drop Shadow Gradient from Color #AFBDD0 to Background Color: #D6E8FF
66 X 48 Icon Background Color: #D6E8FF
Perspective Grid
Drop Shadow Faded Reflection
16
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Input Fields
15
8 15 10
17
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Input Controls
18
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Tabs
#EAF3FF
1 px Shadow #B0C2D0
20
Tahoma 11px, Black 1 px Shadow #B0C2D0
1 px left border #FFFFFF 1 px border #898C95
14
10
10
10 10
19
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Dialog Window Tahoma 11pt Regular, #FFFFFF
Tahoma 14pt Bold, #FFFFFF
Height: 50 #6693CF 5 Height: 60 30
302
See FormSpec Highlight #EAF3FF
Tahoma 11pt Regular #000000
#6699CC
44
Background #E3EFFF
3
#A7CDF0 43
22 10 Minimum: 12 84
20
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Dialog Window Dimensions
50 10 36
14 10 74
8 10
21
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Dialog Window Color and Type
Tahoma 14px Bold #000000 Tahoma 11px Bold #FFFFFF Tahoma 11px #000000 Tahoma 14px Bold #FFFFFF Tahoma 11px #FFFFFF
#EAF3FF
1px #6699CC 1px #898C95 1px #A7CDF0 1px #FFFFFF
22
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Settings Window
18 24
48
24
48
14
24
23
48
14
24
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Settings Window Color and Type
Font: Tahoma 14px Bold, Color: #000000 Font: Tahoma 14px Bold, Color: #466094 Font: Tahoma 14px Bold, Color: #000000
Font: Tahoma 14px Bold, Color: #FFFFFF
24
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Error Dialog Window Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution so users can fix the problem. Users should either perform an action or change their behavior as the result of an error message. Well-written, helpful error messages are crucial to a quality user experience. Poorly written error messages result in low product satisfaction, and are a leading cause of avoidable technical support costs. Unnecessary error messages break users’ flow.
Icon 32x32
Opening text Tahoma 14pt Bold #000000
24
12
Body text Tahoma 11pt Regular #000000
12 Width 55 characters
8
8
22 8 Background #E3EFFF
84
25
84
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Error Dialog Icons
26
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Alert Banner Warning
Information
27
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Alert Banner Dimensions
Popup for Lookup auto resolve Multiple Matches Icon 16x16
No Match - on hover message
Height 26 #FFFFAE
1 px border #C5C5C5
1 px border #E9E9E9 Height 22 #E9E9E9 Link Tahoma 11pt Regular #0000FF
1 px border #A0A0A0
Inline Critical Height 26 #FFFFAE Icon 16 x 16 Padding 5
Tahoma 11pt Regular #000000 28
1 px border #C5C5C5
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Report Wizard
29
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Calendar Specifications
Tahoma 11px Bold, #15428B
Background color #C4DDFF
Border 1 px #6699CC
Line 1 px #6699CC
Border 1 px #6699CC
Background #D6E8FF
30
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Calendar Specifications
Tahoma, 11px, Bold #15428B
Line 1 px #6699CC
Border 1 px #6699CC
Background #D6E8FF
31
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Buttons Normal Pressed Disabled
32
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Articles Window Pane
4
4 See Calendar Spec formnav_header_back.gif
Border 1 px #6699CC Background #D6E8FF Border 1 px #BBD4F6 9
33
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Knowledge Base Window Pane
8
4 11 6
9 6
Border 1 px #6699CC Background #D6E8FF Border 1 px #BBD4F6 Nav Background #FFFFFF
34
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Queues Window Pane
7
8
6 Border 1 px #6699CC
4
Background #D6E8FF Border 1 px #BBD4F6 Nav Background #FFFFFF
35
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Quick Find
36
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Contents Main Window Main Window Regions................................................................................................................................................................................................................................ 1 Main Window Dimensions....................................................................................................................................................................................................................... 2 Standard Tool Bar......................................................................................................................................................................................................................................... 3 Pulldown Menu............................................................................................................................................................................................................................................. 4 Navigation Pane............................................................................................................................................................................................................................................ 5 Application Title Bar.................................................................................................................................................................................................................................... 7 Actions Tool Bar............................................................................................................................................................................................................................................. 9
Form Window Form Window Navigation Pane............................................................................................................................................................................................................10 Form Tool Bar...............................................................................................................................................................................................................................................12 Form Window Dimensions......................................................................................................................................................................................................................14 Form Window Icon.....................................................................................................................................................................................................................................16 Form Window Input Fields......................................................................................................................................................................................................................17 Input Controls..............................................................................................................................................................................................................................................18 Form Window Tabs.....................................................................................................................................................................................................................................19
Dialog Window Dialog Window............................................................................................................................................................................................................................................20 Dialog Window Dimensions...................................................................................................................................................................................................................21 Dialog Window Color and Type............................................................................................................................................................................................................22
Settings Window Settings Window Dimensions................................................................................................................................................................................................................23 Settings Window Color and Type . ......................................................................................................................................................................................................24
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Contents (con’t) Errors and Alerts Error Dialog Window.................................................................................................................................................................................................................................25 Error Dialog Icons.......................................................................................................................................................................................................................................26 Alert Banner..................................................................................................................................................................................................................................................27 Alert Banner Dimensions.........................................................................................................................................................................................................................28
Wizard Report Wizard..............................................................................................................................................................................................................................................29
Other UI Elements Calendar Specifications.............................................................................................................................................................................................................................30 Buttons............................................................................................................................................................................................................................................................32 Articles Window Pane...............................................................................................................................................................................................................................33 Knowledge Base Window Pane.............................................................................................................................................................................................................34 Queues Window Pane...............................................................................................................................................................................................................................35 Quick Find.....................................................................................................................................................................................................................................................36
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Main Window Regions
1 3
1
Standard Tool Bar
2
Navigation Pane
3
Application Title Bar
4
Actions Tool Bar
5
View Filter
6
List
5 4
2
6
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Main Window Dimensions 58
27 27 39
App Navigation Pane Default 173, resizable
App Content Pane Resizeable 5
5
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Standard Tool Bar
Mouse Over States
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Pulldown Menu 1 px border #7E7E7E Icon 16x16px
7
14 22 14 #FFE6A0
#FFB74C
16 X 16 Icon 8
46
Line 1 px #C5C5C5 Margin width 25 px background #E9E9E9 Gap 1 px white
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Navigation Pane 6
4
List Item, 11px Tahoma, #000000
11 16 155 17
Section Title 11px Tahoma, Bold #15428B Highlight 16 X 16 Icon
3
Mouse Over 14
14 22
23 188
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Navigation Pane
Mouse Over States
1 px #C6CEDC
23
Tahoma 11px #15428B
Mouse Over displays hyperlink underneath text
32
Tahoma 11px #15428B
Selected Button
32
Tahoma 11px #15428B Mouse Over Button
5 24 6
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Application Title Bar
On Hover highlight
On Click/ On mouse down Default 144, resizable
8
Tahoma 14px, Bold, #15428B
2
2
5
34
2
8 28
22 2
8 Left border 1 px, White
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Application Title Bar
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Actions Tool Bar 1px #6699CC
Row Highlight #6699CC
Row Height 20px
Row Border 1px #C4DDFF
1px #6699CC
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Navigation Pane 16 x 16 Icon
Section Title, 11 px Tahoma, bold #15428B
1 px border #6699CC
Background 2 19
2
4 18 px,Line height
2
List item, 11 px Tahoma, #000000 7
7
4
#D9EAFF
1 px shadow #B0C2D0
Highlight, 11 px, Tahoma bold, #000000
18
Nav page with scrollbar
#FFDBB7
Disable H scrolling 7 1 px shadow #B0C2D0
10
#FFBD69
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Navigation Pane
Collapsed section
19
Hover Highlight background 16 px height
11
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Tool Bar
12
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Tool Bar
13
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Dimensions
Default 833, resizable Content Pane Fixed 170 Navigation Pane
Default 565, Resizable
24 px
14
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Dimensions 48 x 66 Graphic
Tahoma 11px, Bold, #000000
9
25
38
57 27
8
160
10
43
10
782
7
Tahoma 18px, Bold, #6699CC
15
7
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Icon Icons for the Form Window are 66 X 48 pixel icons. They are three-dimensional and shown in perspective as solid objects. Three-dimensional objects are represented in perspective as solid objects, seen from a birds-eye view with two vanishing points as shown below. Use a shadow as shown to lift objects visually from the background. The light source for objects within the perspective grid is above, slightly in front of, and slightly to the right of the object. The light source casts shadows that are slightly to the rear and right of the object’s base. All light rays are parallel, and strike the object along the same angle (like the sun). The goal is to have a uniform lighting appearance across all icons and spotlight effects. Parallel light rays produce shadows that all have the same length and density, providing further unity across multiple icons.
Drop Shadow Gradient from Color #AFBDD0 to Background Color: #D6E8FF
66 X 48 Icon Background Color: #D6E8FF
Perspective Grid
Drop Shadow Faded Reflection
16
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Input Fields
15
8 15 10
17
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Input Controls
18
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Form Window Tabs
#EAF3FF
1 px Shadow #B0C2D0
20
Tahoma 11px, Black 1 px Shadow #B0C2D0
1 px left border #FFFFFF 1 px border #898C95
14
10
10
10 10
19
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Dialog Window Tahoma 11pt Regular, #FFFFFF
Tahoma 14pt Bold, #FFFFFF
Height: 50 #6693CF 5 Height: 60 30
302
See FormSpec Highlight #EAF3FF
Tahoma 11pt Regular #000000
#6699CC
44
Background #E3EFFF
3
#A7CDF0 43
22 10 Minimum: 12 84
20
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Dialog Window Dimensions
50 10 36
14 10 74
8 10
21
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Dialog Window Color and Type
Tahoma 14px Bold #000000 Tahoma 11px Bold #FFFFFF Tahoma 11px #000000 Tahoma 14px Bold #FFFFFF Tahoma 11px #FFFFFF
#EAF3FF
1px #6699CC 1px #898C95 1px #A7CDF0 1px #FFFFFF
22
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Settings Window
18 24
48
24
48
14
24
23
48
14
24
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Settings Window Color and Type
Font: Tahoma 14px Bold, Color: #000000 Font: Tahoma 14px Bold, Color: #466094 Font: Tahoma 14px Bold, Color: #000000
Font: Tahoma 14px Bold, Color: #FFFFFF
24
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Error Dialog Window Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution so users can fix the problem. Users should either perform an action or change their behavior as the result of an error message. Well-written, helpful error messages are crucial to a quality user experience. Poorly written error messages result in low product satisfaction, and are a leading cause of avoidable technical support costs. Unnecessary error messages break users’ flow.
Icon 32x32
Opening text Tahoma 14pt Bold #000000
24
12
Body text Tahoma 11pt Regular #000000
12 Width 55 characters
8
8
22 8 Background #E3EFFF
84
25
84
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Error Dialog Icons
26
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Alert Banner Warning
Information
27
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Alert Banner Dimensions
Popup for Lookup auto resolve Multiple Matches Icon 16x16
No Match - on hover message
Height 26 #FFFFAE
1 px border #C5C5C5
1 px border #E9E9E9 Height 22 #E9E9E9 Link Tahoma 11pt Regular #0000FF
1 px border #A0A0A0
Inline Critical Height 26 #FFFFAE Icon 16 x 16 Padding 5
Tahoma 11pt Regular #000000 28
1 px border #C5C5C5
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Report Wizard
29
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Calendar Specifications
Tahoma 11px Bold, #15428B
Background color #C4DDFF
Border 1 px #6699CC
Line 1 px #6699CC
Border 1 px #6699CC
Background #D6E8FF
30
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Calendar Specifications
Tahoma, 11px, Bold #15428B
Line 1 px #6699CC
Border 1 px #6699CC
Background #D6E8FF
31
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Buttons Normal Pressed Disabled
32
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Articles Window Pane
4
4 See Calendar Spec formnav_header_back.gif
Border 1 px #6699CC Background #D6E8FF Border 1 px #BBD4F6 9
33
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Knowledge Base Window Pane
8
4 11 6
9 6
Border 1 px #6699CC Background #D6E8FF Border 1 px #BBD4F6 Nav Background #FFFFFF
34
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Queues Window Pane
7
8
6 Border 1 px #6699CC
4
Background #D6E8FF Border 1 px #BBD4F6 Nav Background #FFFFFF
35
MICROSOFT DYNAMICS CRM UI STYLE GUIDE Quick Find
36
Related Documents
Crm4 Ux Design Guide
May 2020 2
Microsoft.com Chat Ux Design
May 2020 3
Guide Ux Ora Upgrade 211
May 2020 0
Ux-108,178
October 2019 5
Design Guide
July 2020 18