OS X Yosemite 新UI风格.pdf
© 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple. #WWDC14 Adapting to the New UI of OS X Yosemite Session 209 Mike Stern User Experience Evangelist Frameworks ? Rachel Goldeen Cocoa Software Engineer ? Patrick Heynen Cocoa Engineering Manager Introduction Introduction Yosemite brings a fresh look to the Mac Introduction Yosemite brings a fresh look to the Mac Understand what has changed and why Introduction Yosemite brings a fresh look to the Mac Understand what has changed and why Getting the most out of the New UI in Cocoa Design Principles Developers Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility Design Principles Developers Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility Design Principles Developers Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility Design Principles Developers Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility Design Principles Developers Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility Design Themes Mike Stern User Experience Evangelist Not an engineer 20142014 20142014Yosemite 2001 2014 Yosemite Cheetah 2001 2014 Cheetah Yosemite 2001 2014 Cheetah Puma Jaguar Panther Tiger Leopard Snow Leopard Lion Mountain Lion Mavericks Yosemite Replace Screen Simplicity MavericksYosemite Lucida Grande Helvetica Neue Lucida Grande Helvetica Neue s Lucida GrandeHelvetica Neue s s Lucida GrandeHelvetica Neue s Lucida GrandeHelvetica Neue Lucida GrandeHelvetica Neue 1:1.731:1.39 Lucida GrandeHelvetica Neue Lucida GrandeHelvetica Neue BD Lucida GrandeHelvetica Neue BD 1:1.371:1.05 Consistency Movie showing perspective Movie showing perspective Movie showing perspective Movie showing perspective Lucida Grande Helvetica Neue Lucida Grande Helvetica Neue Depth Content-Focused MavericksYosemite MavericksYosemite MavericksYosemite Developers Tour of Yosemite Rachel Goldeen Cocoa Software Engineer Translucent Toolbars Translucent Toolbars Translucent Toolbars Translucent Toolbars Translucent Toolbars Translucent Toolbars NSScrollView Translucent Toolbars Without scroll views Translucent Toolbars Without scroll views Use window style mask NSFullSizeContentViewWindowMask Translucent Toolbars Without scroll views Use window style mask NSFullSizeContentViewWindowMask window.styleMask |= NSFullSizeContentViewWindowMask; Translucent Toolbars Without scroll views Use window style mask NSFullSizeContentViewWindowMask window.styleMask |= NSFullSizeContentViewWindowMask; Example: translucent toolbars and titlebars that show and hide Related Session Adopting Advanced Features of the New UI of OS X Yosemite MarinaWednesday 2:00PM Tinted Sliders Tinted Sliders Tinted Sliders Tinted Sliders Non-directional sliders only Tinted Sliders Non-directional sliders only slider.numberOfTickMarks = 0; Fullscreen Button Fullscreen Button Press Option to zoom Separated Segmented Control Navigation, incremental steps Separated Segmented Control Navigation, incremental steps segmentedControl.segmentStyle = NSSegmentStyleSeparated; Separated Segmented Control Translucent Sidebars Translucent Sidebars For free, if Translucent Sidebars For free, if NSOutlineView or NSTableView Translucent Sidebars For free, if NSOutlineView or NSTableView Highlight style set to Source List Translucent Sidebars For free, if NSOutlineView or NSTableView Highlight style set to Source List Example: SidebarDemo From http:/developer.apple.com Hidden Window Titles Hidden Window Titles New NSWindow property: titleVisibility Hidden Window Titles New NSWindow property: titleVisibility window.titleVisibility = NSWindowTitleHidden; Animated Controls Animated Controls Search field Animated Controls Search field Animated Controls Radio buttons Animated Controls Radio buttons Animated Controls Checkboxes Animated Controls Checkboxes Animated Controls Popup buttons Animated Controls Popup buttons Visual Effect View NSVisualEffectView Visual Effect View Vibrant Dark appearance NSVisualEffectView Visual Effect View Vibrant Dark appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSVisualEffectView Visual Effect View Vibrant Dark appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSAppearance *darkAppearance = NSAppearance appearanceNamed:NSAppearanceNameVibrantDark; NSVisualEffectView Visual Effect View Vibrant Dark appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSAppearance *darkAppearance = NSAppearance appearanceNamed:NSAppearanceNameVibrantDark; effectView.appearance = darkAppearance; NSVisualEffectView Visual Effect View NSVisualEffectView Visual Effect View Vibrant Light appearance NSVisualEffectView Visual Effect View Vibrant Light appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSVisualEffectView Visual Effect View Vibrant Light appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSAppearance *lightAppearance = NSAppearance appearanceNamed:NSAppearanceNameVibrantLight; NSVisualEffectView Visual Effect View Vibrant Light appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSAppearance *lightAppearance = NSAppearance appearanceNamed:NSAppearanceNameVibrantLight; effectView.appearance = lightAppearance; NSVisualEffectView Related Session Adopting Advanced Features of the New UI of OS X Yosemite MarinaWednesday 2:00PM Vibrancy Patrick Heynen Cocoa Engineering Manager Vibrancy A visual building block for OSX Vibrancy A visual building block for OSX Vibrancy What is it? Advanced Blending on Dynamic Backgrounds 2 + 2 = 4 2 + 2 = 5 The whole is greater than the sum of the parts Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background Combining Foreground and Background The whole is greater than the sum of the parts Vibrant Materials Vibrant Materials Menus/popovers Vibrant Materials Menus/popovers Light (sidebar) Vibrant Materials Menus/popovers Light (sidebar) Titlebars Vibrant Materials Menus/popovers Light (sidebar) Titlebars Dark New Vibrant System Behaviors New Vibrant System Behaviors Source lists New Vibrant System Behaviors Source lists Translucent titlebar New Vibrant System Behaviors Source lists Translucent titlebar Menus and popovers New Vibrant System Behaviors Source lists Translucent titlebar Menus and popovers Menu bar and status items Using Vibrancy in Your Apps NSVisualEffectView + NSAppearance NSVisualEffectView NSVisualEffectView Background view containing blurred version of window or desktop contents NSVisualEffectView Background view containing blurred version of window or desktop contents Offered in light and dark material flavors NSVisualEffectView Background view containing blurred version of window or desktop contents Offered in light and dark material flavors Automatically updates as content underneath changes NSAppearance NSAppearance NSAppearanceNameVibrantLight and NSAppearanceNameVibrantDark NSAppearance NSAppearanceNameVibrantLight and NSAppearanceNameVibrantDark Provide colors, controls, and template image treatments suitable for vibrant rendering NSAppearance NSAppearanceNameVibrantLight and NSAppearanceNameVibrantDark Provide colors, controls, and template image treatments suitable for vibrant rendering Foreground content source for NSVisualEffectView materials NSAppearance NSAppearanceNameVibrantLight and NSAppearanceNameVibrantDark Provide colors, controls, and template image treatments suitable for vibrant rendering Foreground content source for NSVisualEffectView materials AppKit controls automatically pick up vibrant rendering where appropriate Demo Using vibrancy in your apps Vibrancy More in-depth details on using NSVisualEffectView Adopting Advanced Features of the New UI in OS X Yosemite MarinaWednesday 2:00PM Fonts, Colors, and Artwork Whats New in Fonts? System Font New System Font New System Font Helvetica Neue, optimized for OSX New System Font Helvetica Neue, optimized for OSX Font metrics tuned to balance layout compatibility with aesthetics Finder Font Metrics Lucida Grande Finder Font Metrics Lucida Grande 3.83.64.24.13.21.5 Finder Font Metrics Helvetica Neue 4.22.73.32.82.11.1 Finder Finder Layout Compatibility Layout Compatibility Compression applied if in danger of clip Layout Compatibility Compression applied if in danger of clip Active for apps built against 10.9 or earlier only Layout Compatibility Compression applied if in danger of clip Active for apps built against 10.9 or earlier only No silver bullet! Layout compression can aff ect legibility Layout compression can affect legibility New System Font New System Font Use System Font Selectors New System Font Use System Font Selectors +NSFont systemFontOfSize: +NSFont boldSystemFontOfSize: +NSFont labelFontOfSize: Do not explicitly set your font to “Helvetica Neue” Colors System Colors System Colors Use colors as a system not a set of numbers! System Colors Use colors as a system not a set of numbers! Many standard system colors have been adapted to the new UI System Colors Use colors as a system not a set of numbers! Many standard system colors have been adapted to the new UI Information hierarchy +NSColor labelColor +NSColor secondaryLabelColor System Colors Control text adapts to control state System Colors Control text adapts to control state System Colors Control text adapts to control state ActiveInactive Normal Pressed On On + Pressed On + Disabled System Colors Adapt to vibrant NSAppearances Artwork Template Images Maximum flexibility Template Images Maximum flexibility Image provides shape Template Images Maximum flexibility Image provides shape Template Images Maximum flexibility Image provides shape Transformed by AppKit with context specific appearance Template Images Maximum flexibility Image provides shape Transformed by AppKit with context specific appearance Template styling will automatically follow control state App Compatibility App Compatibility New OS X UI brings big changes to your apps look and feel App Compatibility New OS X UI brings big changes to your apps look and feel App Compatibility New OS X UI brings big changes to your apps look and feel App Compatibility App Compatibility Make it awesome on Yosemite App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard App Compatibility Suggested techniques Stick with the System! App Compatibility Suggested techniques Use Runtime checks to tailor your code and resources for each design App Compatibility Symbol check App Compatibility Symbol check / Check to see if we can go vibrant if ( NSVisualEffectView *fxView = NSVisualEffectView alloc initWithFrame:self.inspector.frame; App Compatibility Symbol check / Check to see if we can go vibrant if ( NSVisualEffectView *fxView = NSVisualEffectView alloc initWithFrame:self.inspector.frame; App Compatibility Version check App Compatibility Version check if (rint(NSAppKitVersionNumber) NSAppKitVersionNumber10_9) self.infoView.image = NSImage imageNamed:“InfoImageNew“; else self.infoView.image = NSImage imageNamed:“InfoImageOld“; App Compatibility Version check if (rint(NSAppKitVersionNumber) NSAppKitVersionNumber10_9) self.infoView.image = NSImage imageNamed:“InfoImageNew“; else self.infoView.image = NSImage imageNamed:“InfoImageOld“; App Compatibility Look for opportunities to freshen your design everywhere When in doubt, favor the new visual style! Conclusion Conclusion New User Interface design for OS X Conclusion New User Interface design for OS X Understanding vibrancy Conclusion New User Interface design for OS X Understanding vibrancy Adapting your applications Conclusion New User Interface design for OS X Understanding vibrancy Adapting your applications See advanced session for more in-depth exploration Summary Exciting changes to design of OS X Cocoa frameworks can guide you through More Information Jake Behrens Developer Evangelist behrensapple.com Documentation http:/developer.apple.com Apple Developer Forums http:/devforums.apple.com Related Sessions What's New in Cocoa PresidioTuesday 11:30AM Adopting Advanced Features of the New UI of OS X Yosemite MarinaWednesday 2:00PM Creating Extensions for iOS and OS X, Part 1 MissionTuesday 2:00PM What's New in Interface Builder MissionWednesday 3:15PM Designing Intuitive User Experiences PresidioTuesday 4:30PM Labs User Interface Design Lab User Interface Design Lab Everyday 9:00AM New UI and Cocoa Lab Frameworks Lab B Wednesday 3:15PM Cocoa Lab Frameworks Lab B Thursday 4:30PM Interface Builder and Live Views Lab Tools Lab CWednesday 9:00AM Xcode and Interface Builder Lab Tools Lab CThursday 9:00PM
