《OS X Yosemite 新UI风格.pdf》由会员分享，可在线阅读，更多相关《OS X Yosemite 新UI风格.pdf（288页珍藏版）》请在三一文库上搜索。
1、 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 Eng
2、ineering 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 C
3、ocoa 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 Compatibi
4、lity 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 2
5、001 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 G
6、randeHelvetica 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 pe
7、rspective 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 Trans
8、lucent 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
9、 |= 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 N
10、ew 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 Naviga
11、tion, 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 Sid
12、ebars 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:/ Hidden Window Titles Hidden Window Titles New NSWindow property: titleVisibility Hidde
13、n 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 Checkbox
14、es 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; NSVisualEffectVie
15、w 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
16、= NSVisualEffectView initWithFrame:frame; NSAppearance *darkAppearance = NSAppearance appearanceNamed:NSAppearanceNameVibrantDark; effectView.appearance = darkAppearance; NSVisualEffectView Visual Effect View NSVisualEffectView Visual Effect View Vibrant Light appearance NSVisualEffectView Visual Ef
17、fect View Vibrant Light appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSVisualEffectView Visual Effect View Vibrant Light appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSAppearance *lightAppearance = NSAppearance appearanceN
18、amed:NSAppearanceNameVibrantLight; NSVisualEffectView Visual Effect View Vibrant Light appearance NSVisualEffectView *effectView = NSVisualEffectView initWithFrame:frame; NSAppearance *lightAppearance = NSAppearance appearanceNamed:NSAppearanceNameVibrantLight; effectView.appearance = lightAppearanc
19、e; 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
20、 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 Comb
21、ining 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/po
22、povers 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 B
23、ehaviors 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 blu
24、rred 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 mate
25、rial 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 vibra
26、nt 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 NSAppearanceNameVibra
27、ntDark 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
28、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 bal
29、ance 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
30、 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 legi
31、bility 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 no
32、t 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
33、+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 Templ
34、ate 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 p
35、rovides 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
36、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? Ha
37、ving 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 Yosemit
38、e 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
39、 / 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 Co
40、mpatibility 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)
41、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 Inter
42、face 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 sessi
43、on 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 Documentation http:/ Apple Developer Forums http:/ Related Sessions Whats New in Cocoa PresidioTuesday 11:30AM Adopting Advanced Feat
44、ures of the New UI of OS X Yosemite MarinaWednesday 2:00PM Creating Extensions for iOS and OS X, Part 1 MissionTuesday 2:00PM Whats 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