Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Building Native Experiences with Electron

19 267 vues

Publié le

Listen to this talk! https://www.youtube.com/watch?v=JIRXVGVPzn8

Tips and tricks for creating Electron apps that look beautiful and work the way users expect.

Publié dans : Logiciels
  • Login to see the comments

Building Native Experiences with Electron

  1. 1. Building “Native” Experiences with Electron Ben Gotow (@bengotow)
  2. 2. Building “Native” Experiences with Electron Beautiful apps that behave the way users expect Ben Gotow (@bengotow)
  3. 3. Kitematic
  4. 4. Window Frame Remove the standard frame by passing BrowserWindow the
 {frame: false} option.
 Add custom window controls to the document body. 
<div name="ToolbarWindowControls" class="toolbar-window-controls"> <button class="close" onClick="require('remote').getCurrentWindow().close()"></button> <button class="minimize" onClick="require('remote').getCurrentWindow().minimize()"></button> <button class="maximize" onClick="require('remote').getCurrentWindow().maximize()"></button> </div>
  5. 5. Draggable Toolbars -webkit-app-region allows you to specify that all or part of the DOM is the window drag handle. Caveats: • The visibility and z-index of drag regions does not matter. • Your app does not receive any click events inside drag regions. .toolbar { -webkit-app-region: drag; .toolbar-window-controls { -webkit-app-region: no-drag; } }
  6. 6. Kitematic, Mac OS X Kitematic, Windows
  7. 7. Add a platform class to the document body, and use it to change the appearance of toolbars and buttons.
 
 Really intense: Read Mac OS X defaults to detect appropriate gumdrop colors and styles. Platform-specific Style document.body.classList.add(“platform" + process.platform) defaults read -g AppleAquaColorVariant defaults read -g AppleInterfaceStyle
  8. 8. Focus
  9. 9. Focus Attach an additional blurred CSS class to <body> when the window is blurred, adjust styling of: • Window frame • Selected items • Buttons Caveats: • Listen to BrowserWindow blur/ focus, not window blur/focus, which triggers when you focus iFrames.
  10. 10. Focus Main Process Renderer Process @browserWindow.on ’focus’, =>
 @browserWindow.webContents.send(‘browser-window-focus’) @browserWindow.on ’blur’, =>
 @browserWindow.webContents.send(‘browser-window-blur’) ipc.on ’browser-window-focus’, =>
 document.body.classList.remove(‘blurred’)
 ipc.on ’browser-window-blur’, =>
 document.body.classList.add(‘blurred’)
  11. 11. First Mouse • Use accept-first-mouse: true • On Windows, you can click window contents from the background. • On Mac OS X, you can click toolbar items and window controls from the background. (Use pointer-events:none to disable background interaction with everything else.)
  12. 12. Cursor Considerations for Mac OS X • Stick to standard cursors. Use the hand cursor sparingly. On the Mac, it is typically only seen in web views. • Hover states are only used to reveal additional hidden options (like an X on a tab). Buttons, tabs, links, etc. have no hover states.
  13. 13. Images • Apply -webkit-user-drag: none to all images and 
 -webkit-user-drag: text to everything else. • Support Retina displays! Choose images based on window.devicePixelRatio
 • Scale images by manually declaring their width and height, or specifying CSS zoom:0.5 when on a retina display. 

  14. 14. Sound • Use with care! Unlike mobile apps, desktop software rarely makes noise. There are no audible clicks, pops, bounces. • Sound should accompany actions when impact may not be obvious. playSound: (filename) ->
 a = new Audio() a.src = path.join(resourcePath, ‘static’, ‘sounds’, filename) a.autoplay = true a.play()
  15. 15. Retina Borders • Chrome CSS borders must be 1pt - on Retina displays, they render as two pixels. But you /can/ make half-point box shadows. box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  16. 16. ben@nylas.com
  17. 17. Meet user expectations, or communicate new expectations?
  18. 18. Meet user expectations, or communicate new expectations?
  19. 19. Change Expectations • Avoids the uncanny valley by using interface elements that communicate platform standards do not apply. • Users don’t expect Spotify to behave like Windows or Mac OS X

×