OneNote Share a Page Share Pane

Transcription

1 OneNote a Page Pane 1/22/16 Universal v2 a Page + a Link

2 OneNote a Page Pane Location & Behavior Clicking Icon opens and closes Pane Vertical Position: below sections Clicking Close (X) closes Pane Pane 1/22/16 Universal v2 a Page + a Link

3 OneNote a Page Pane Dimensions & Padding 320 px 8 px 20 px 32px 24 px dylan@bellevueschool.edu dylan@bellevueschool.edu 20 px 20 px 10 px 10 px Can edit Invitation Sent! 28 px 28 px 32 px 40 px Can edit 12 px 8 px This page shared with 36 px 36 px 28 px 12 px 8 px 36 px This notebook shared with 24 px 24 px 64 px 64 px 1/22/16 Universal v2 a Page + a Link

4 OneNote a Page Pane Typography & Icons ExtraLarge Light # Icon: SharingSet_Start_Glyph 20x20 px # After Focus: Overflow:... Can edit Overflow:... Text: This page: [page name] or This notebook: [notebook name] Icon: NavNotebook 20x20 px Can edit Success: #0f893d Error: #e81123 Invitation Sent! Sharing only works... Align: center Icon: AcceptInvitation #0f893d 12x12 px Invitation Sent! This page shared with Icon: Person 16 Metro 2.0 Font Icon: aslink 20x20 px Icon: Glyph 20x20 px Icon: NavNotebook 20x20 px This notebook: Biology 1/22/16 Universal v2 a Page + a Link

5 OneNote a Page Pane Lines & Colors Offline Error Left Side Only Solid 1 px #bebebe Top, Right, Bottom Sides no border Solid 1 px #bebebe Can edit Sharing only works when you're connected. Make sure you're online and signed in. Error SegoeUI-Light 15 px Error: Button This page shared with Pane #f3f3f3 Solid 1 px #bebebe 1/22/16 Universal v2 a Page + a Link

6 OneNote a Page Permissions: Typography Permissions: Padding Permissions: Background Colors BACKGROUND COLORS 36 px 280 px Default State no color 196 px 10 px 10 px 4 px 12 px 40 px left padding Hover State #e5e5e5 Small Semibold This page shared with Invite again Small Regular Overflow:... Invite again Change permission to: View Clicked State #d2d2d2 Hover State Small Regular Change permission to: View Stop sharing Smalll Regular 10 px Stop sharing 12 px Stop sharing Unselected #e5e5e5 Invite again Change permission to: View Clicked State #6d2768 Stop sharing 1/22/16 Universal v2 a Page + a Link

7 OneNote a Page Menu (with d Notes) OneNote OneNote 48 px Recent Recent 48 px Notebooks Pages d with Me Icon: PeopleOnly 20 Metro 2.0 Font Notebooks Pages d with Me Small Regular Overflow:... School 48 px d Notebook School d Notebook Icon: Person 20x20 px Vertically aligned with + More Notebooks... More Notebooks... Print Print Feedback and Apps Feedback and Apps Settings Settings 1/22/16 Universal v2 a Page + a Link

8 OneNote a Page Page Preview: d Page Treatment OUTBOUND SHARING BEHAVIOR Once a page is shared, the page preview of that page will change. Similar to an active note in Recent Notes view, Line 4 is replaced. The treatment will include the Person icon + d with 1 person or d with [#] of persons Icon: Person 11x11 px d with 1 person Small Regular Overflow:... This page shared with: Can edit 1/22/16 Universal v2 a Page + a Link

9 OneNote a Page d Notes View RECEIVING A SHARED PAGE BEHAVIOR In the d Notes view, similar to an active note in Recent Notes view, Line 4 is replaced. The treatment will include the Person icon + the name of the person who shared the page. Pages will be sorted by most recent at top. 18 px d Notes 18 px 48 px Icon: Person 11x11 px Dylan Hathaway Small Regular Overflow:... 1/22/16 Universal v2 a Page + a Link

10 OneNote a Page a Link: Behavior Click the back arrow to go back to the original Pane link link Copied Can edit Create an edit link Create a view-only link Click the create button to generate a link and copy it to the clipboard Checkmark + Copied will display for 3 seconds, then disappear Copy Copied Copy Click the copy button to generate a link and copy it to the clipboard Checkmark + Copied will display for 3 seconds, then disappear Click to access the Get a sharing link pane 1/22/16 Universal v2 a Page + a Link

11 OneNote a Page a Link: Dimensions & Padding 320 px 12 px 20 px 20 px 20 px 48 px link Create an edit link link Create an edit link 32 px 32 px Create a view-only link Create a view-only link 32 px 8 px 8 px 20 px 1/22/16 Universal v2 a Page + a Link

12 OneNote a Page a Link: Typography Lines & Colors ExtraLarge Light # Left Side Only Solid 1 px #bebebe Top, Right, Bottom Sides no border Small Regular link Create an edit link Button link Create an edit link Small Regular Create a view-only link Button Create a view-only link 1/22/16 Universal v2 a Page + a Link

13 OneNote a Page a Link: Copy Link Padding Copy Link Typography & Colors 48 px 32 px link Copied Copy Copied Copy 28 px 28 px 32 px 32 px Icon: AcceptInvitation #0f893d 12x12 px Solid 1 px #bebebe Overflow:... link Copied Copy Copied Copy #0f893d Button 1/22/16 Universal v2 a Page + a Link

14 OneNote a Page Icon List Office Type Ramp Icon: SharingSet_Start_Glyph 20 Metro 2.0 Font Small Medium Large LargePlus ExtraLarge Huge Icon: NavNotebook 20 Metro 2.0 Font 13/16 [+5] Segoe UI Semilight 15/20 [0] Segoe UI Semilight 18/24 [-10] Segoe UI Semilight 21/28 [-12] Segoe UI Semilight 28/36 [-15] Segoe UI Light 42/52 [-20] Segoe UI Light Icon: OLBlankGALItem 20x20x32 Icon: Glyph 20 Metro 2.0 Font SmallRegular MediumLight MediumRegular MediumSemiBold LargeLight LargeRegular LargeSemiBold LargePlusLight LargePlusRegular ExtraLargeSemilight Icon: AcceptInvitation 12x11x32 Icon: Person 20 Metro 2.0 Font Icon: Person 16 Metro 2.0 Font Icon: Person_12x 16 Metro 2.0 Font Icon: PeopleOnly 20 Metro 2.0 Font Icon: aslink 20 Metro 2.0 Font Icon: Link 40 Metro 2.0 Font 1/22/16 Universal v2 a Page + a Link