Adapting to the New UI of OS X Yosemite

Size: px

Start display at page:

Download "Adapting to the New UI of OS X Yosemite"

Ashlynn Walker
5 years ago
Views:

1 Frameworks #WWDC14 Adapting to the New UI of OS X Yosemite Session 209 Mike Stern User Experience Evangelist! Rachel Goldeen Cocoa Software Engineer! Patrick Heynen Cocoa Engineering Manager 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Introduction

3 Introduction Yosemite brings a fresh look to the Mac

4 Introduction Yosemite brings a fresh look to the Mac Understand what has changed and why

5 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

6 Design Principles Developer s Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility

7 Design Principles Developer s Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility

8 Design Principles Developer s Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility

9 Design Principles Developer s Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility

10 Design Principles Developer s Tour of Yosemite Vibrancy Fonts, Colors, and Artwork App Compatibility

11 Design Themes Mike Stern User Experience Evangelist

12 Not an engineer

13 4 2014

14 Yosemite

15 2014 Yosemite 2001 Cheetah

16 2014 Yosemite 2001 Cheetah

17 2014 Yosemite Mavericks Mountain Lion Lion Snow Leopard Leopard Tiger Panther Jaguar Puma 2001 Cheetah

22 Replace Screen

24 Simplicity

28 Mavericks Yosemite

32 Helvetica Neue Lucida Grande

33 Helvetica Neue Lucida Grande

34 s s Lucida Grande Helvetica Neue

35 s s Lucida Grande Helvetica Neue

36 Lucida Grande Helvetica Neue

37 1:1.73 1:1.39 Lucida Grande Helvetica Neue

38 Lucida Grande Helvetica Neue

39 Lucida Grande Helvetica Neue

40 1:1.37 1:1.05 BD BD Lucida Grande Helvetica Neue

41 Consistency

43 Movie showing perspective

44 Movie showing perspective

45 Movie showing perspective

46 Movie showing perspective

53 Helvetica Neue Lucida Grande

59 Lucida Grande Helvetica Neue

63 Depth

75 Content-Focused

81 Mavericks Yosemite

85 Mavericks Yosemite

86 Mavericks Yosemite

87 Developer s Tour of Yosemite Rachel Goldeen Cocoa Software Engineer

100

101

102

103

104

105 Translucent Toolbars

106 Translucent Toolbars

107 Translucent Toolbars

108 Translucent Toolbars

109 Translucent Toolbars

110 Translucent Toolbars NSScrollView

111 Translucent Toolbars Without scroll views

112 Translucent Toolbars Without scroll views Use window style mask NSFullSizeContentViewWindowMask

113 Translucent Toolbars Without scroll views Use window style mask NSFullSizeContentViewWindowMask window.stylemask = NSFullSizeContentViewWindowMask;

114 Translucent Toolbars Without scroll views Use window style mask NSFullSizeContentViewWindowMask window.stylemask = NSFullSizeContentViewWindowMask; Example: translucent toolbars and titlebars that show and hide

115 Related Session Adopting Advanced Features of the New UI of OS X Yosemite Marina Wednesday 2:00PM

116 Tinted Sliders

117 Tinted Sliders

118 Tinted Sliders

119 Tinted Sliders Non-directional sliders only

120 Tinted Sliders Non-directional sliders only slider.numberoftickmarks = 0;

121

122

123 Fullscreen Button

124 Fullscreen Button Press Option to zoom

125

126

127 Separated Segmented Control

128 Separated Segmented Control Navigation, incremental steps

129 Separated Segmented Control Navigation, incremental steps segmentedcontrol.segmentstyle = NSSegmentStyleSeparated;

130

131

132

133

134

135

136

137

138

139

140 Translucent Sidebars

141 Translucent Sidebars For free, if

142 Translucent Sidebars For free, if NSOutlineView or NSTableView

143 Translucent Sidebars For free, if NSOutlineView or NSTableView Highlight style set to Source List

144 Translucent Sidebars For free, if NSOutlineView or NSTableView Highlight style set to Source List

145 Example: SidebarDemo From

146

147

148 Hidden Window Titles

149 Hidden Window Titles New NSWindow property: titlevisibility

150 Hidden Window Titles New NSWindow property: titlevisibility window.titlevisibility = NSWindowTitleHidden;

151 Animated Controls

152 Animated Controls Search field

153 Animated Controls Search field

154 Animated Controls Radio buttons

155 Animated Controls Radio buttons

156 Animated Controls Checkboxes

157 Animated Controls Checkboxes

158 Animated Controls Popup buttons

159 Animated Controls Popup buttons

160

161

162

163

164

165 Visual Effect View NSVisualEffectView

166 Visual Effect View NSVisualEffectView Vibrant Dark appearance

167 Visual Effect View NSVisualEffectView Vibrant Dark appearance NSVisualEffectView *effectview = [NSVisualEffectView initwithframe:frame];

168 Visual Effect View NSVisualEffectView Vibrant Dark appearance NSVisualEffectView *effectview = [NSVisualEffectView initwithframe:frame]; NSAppearance *darkappearance = [NSAppearance appearancenamed:nsappearancenamevibrantdark];

169 Visual Effect View NSVisualEffectView Vibrant Dark appearance NSVisualEffectView *effectview = [NSVisualEffectView initwithframe:frame]; NSAppearance *darkappearance = [NSAppearance appearancenamed:nsappearancenamevibrantdark]; effectview.appearance = darkappearance;

170

171

172

173 Visual Effect View NSVisualEffectView

174 Visual Effect View NSVisualEffectView Vibrant Light appearance

175 Visual Effect View NSVisualEffectView Vibrant Light appearance NSVisualEffectView *effectview = [NSVisualEffectView initwithframe:frame];

176 Visual Effect View NSVisualEffectView Vibrant Light appearance NSVisualEffectView *effectview = [NSVisualEffectView initwithframe:frame]; NSAppearance *lightappearance = [NSAppearance appearancenamed:nsappearancenamevibrantlight];

177 Visual Effect View NSVisualEffectView Vibrant Light appearance NSVisualEffectView *effectview = [NSVisualEffectView initwithframe:frame]; NSAppearance *lightappearance = [NSAppearance appearancenamed:nsappearancenamevibrantlight]; effectview.appearance = lightappearance;

178 Related Session Adopting Advanced Features of the New UI of OS X Yosemite Marina Wednesday 2:00PM

179 Vibrancy Patrick Heynen Cocoa Engineering Manager

180 Vibrancy A visual building block for OSX

181 Vibrancy A visual building block for OSX

182 Vibrancy What is it?

183 Advanced Blending on Dynamic Backgrounds

184 2 + 2 = 4

185 2 + 2 = 5

186 The whole is greater than the sum of the parts

187 Combining Foreground and Background

188 Combining Foreground and Background

189 Combining Foreground and Background

190 Combining Foreground and Background

191 Combining Foreground and Background

192 Combining Foreground and Background

193 Combining Foreground and Background

194 Combining Foreground and Background

195 Combining Foreground and Background

196 Combining Foreground and Background

197 Combining Foreground and Background

198 The whole is greater than the sum of the parts

199 Vibrant Materials

200 Vibrant Materials Menus/popovers

201 Vibrant Materials Menus/popovers Light (sidebar)

202 Vibrant Materials Menus/popovers Light (sidebar) Titlebars

203 Vibrant Materials Menus/popovers Light (sidebar) Titlebars Dark

204 New Vibrant System Behaviors

205 New Vibrant System Behaviors Source lists

206 New Vibrant System Behaviors Source lists Translucent titlebar

207 New Vibrant System Behaviors Source lists Translucent titlebar Menus and popovers

208 New Vibrant System Behaviors Source lists Translucent titlebar Menus and popovers Menu bar and status items

209 Using Vibrancy in Your Apps NSVisualEffectView + NSAppearance

210 NSVisualEffectView

211 NSVisualEffectView Background view containing blurred version of window or desktop contents

212 NSVisualEffectView Background view containing blurred version of window or desktop contents Offered in light and dark material flavors

213 NSVisualEffectView Background view containing blurred version of window or desktop contents Offered in light and dark material flavors Automatically updates as content underneath changes

214 NSAppearance

215 NSAppearance NSAppearanceNameVibrantLight and NSAppearanceNameVibrantDark

216 NSAppearance NSAppearanceNameVibrantLight and NSAppearanceNameVibrantDark Provide colors, controls, and template image treatments suitable for vibrant rendering

217 NSAppearance NSAppearanceNameVibrantLight and NSAppearanceNameVibrantDark Provide colors, controls, and template image treatments suitable for vibrant rendering Foreground content source for NSVisualEffectView materials

218 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

219 Demo Using vibrancy in your apps

220 Vibrancy More in-depth details on using NSVisualEffectView Adopting Advanced Features of the New UI in OS X Yosemite Marina Wednesday 2:00PM

221 Fonts, Colors, and Artwork

222 What s New in Fonts?

223 System Font

224

225

226

227 New System Font

228 New System Font Helvetica Neue, optimized for OSX

229 New System Font Helvetica Neue, optimized for OSX Font metrics tuned to balance layout compatibility with aesthetics

230 Font Metrics Lucida Grande Finder

231 Font Metrics Lucida Grande Finder

232 Font Metrics Helvetica Neue Finder

233 Finder Finder

234 Layout Compatibility

235 Layout Compatibility Compression applied if in danger of clip

236 Layout Compatibility Compression applied if in danger of clip Active for apps built against 10.9 or earlier only

237 Layout Compatibility Compression applied if in danger of clip Active for apps built against 10.9 or earlier only No silver bullet!

238 Layout compression can affect legibility

239 Layout compression can affect legibility

240 New System Font

241 New System Font Use System Font Selectors

242 New System Font Use System Font Selectors +[NSFont systemfontofsize:] +[NSFont boldsystemfontofsize:] +[NSFont labelfontofsize:]

243 Do not explicitly set your font to Helvetica Neue

244 Colors

245 System Colors

246 System Colors Use colors as a system not a set of numbers!

247 System Colors Use colors as a system not a set of numbers! Many standard system colors have been adapted to the new UI

248 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]

249 System Colors Control text adapts to control state

250 System Colors Control text adapts to control state

251 System Colors Control text adapts to control state Active Inactive Normal Pressed On On + Pressed On + Disabled

252 System Colors Adapt to vibrant NSAppearances

253 Artwork

254 Template Images Maximum flexibility

255 Template Images Maximum flexibility Image provides shape

256 Template Images Maximum flexibility Image provides shape

257 Template Images Maximum flexibility Image provides shape Transformed by AppKit with context specific appearance

258 Template Images Maximum flexibility Image provides shape Transformed by AppKit with context specific appearance Template styling will automatically follow control state

259 App Compatibility

260 App Compatibility New OS X UI brings big changes to your app s look and feel

261 App Compatibility New OS X UI brings big changes to your app s look and feel

262 App Compatibility New OS X UI brings big changes to your app s look and feel

263 App Compatibility

264 App Compatibility Make it awesome on Yosemite

265 App Compatibility Make it awesome on Yosemite What about deploying on Mavericks?

266 App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard

267 App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard

268 App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard

269 App Compatibility Make it awesome on Yosemite What about deploying on Mavericks? Having it both ways can be hard

270 App Compatibility Suggested techniques Stick with the System!

271 App Compatibility Suggested techniques Use Runtime checks to tailor your code and resources for each design

272 App Compatibility Symbol check

273 App Compatibility Symbol check // Check to see if we can go vibrant if (&NSAppearanceNameVibrantDark!=0) { NSAppearance *vibrantdarkappearance = [NSAppearance appearancenamed:nsappearancenamevibrantdark]; NSVisualEffectView *fxview = [[NSVisualEffectView alloc] initwithframe:self.inspector.frame]; }

274 App Compatibility Symbol check // Check to see if we can go vibrant if (&NSAppearanceNameVibrantDark!=0) { NSAppearance *vibrantdarkappearance = [NSAppearance appearancenamed:nsappearancenamevibrantdark]; NSVisualEffectView *fxview = [[NSVisualEffectView alloc] initwithframe:self.inspector.frame]; }

275 App Compatibility Version check

276 App Compatibility Version check if (rint(nsappkitversionnumber) > NSAppKitVersionNumber10_9) { self.infoview.image = [NSImage imagenamed:@"infoimagenew"]; } else { self.infoview.image = [NSImage imagenamed:@"infoimageold"]; }

277 App Compatibility Version check if (rint(nsappkitversionnumber) > NSAppKitVersionNumber10_9) { self.infoview.image = [NSImage imagenamed:@"infoimagenew"]; } else { self.infoview.image = [NSImage imagenamed:@"infoimageold"]; }

278 App Compatibility Look for opportunities to freshen your design everywhere When in doubt, favor the new visual style!

279 Conclusion

280 Conclusion New User Interface design for OS X

281 Conclusion New User Interface design for OS X Understanding vibrancy

282 Conclusion New User Interface design for OS X Understanding vibrancy Adapting your applications

283 Conclusion New User Interface design for OS X Understanding vibrancy Adapting your applications See advanced session for more in-depth exploration

284 Summary Exciting changes to design of OS X Cocoa frameworks can guide you through

285 More Information Jake Behrens Developer Evangelist Documentation Apple Developer Forums

286 Related Sessions What's New in Cocoa Presidio Tuesday 11:30AM Adopting Advanced Features of the New UI of OS X Yosemite Marina Wednesday 2:00PM Creating Extensions for ios and OS X, Part 1 Mission Tuesday 2:00PM What's New in Interface Builder Mission Wednesday 3:15PM Designing Intuitive User Experiences Presidio Tuesday 4:30PM

287 Labs User Interface Design Lab User Interface Design Lab Everyday 9:00AM New UI and Cocoa Lab Frameworks Cocoa Lab Frameworks Lab B Wednesday 3:15PM Lab B Thursday 4:30PM Interface Builder and Live Views Lab Tools Lab C Wednesday 9:00AM Xcode and Interface Builder Lab Tools Lab C Thursday 9:00PM

288

Adopting Advanced Features of the New UI

Frameworks #WWDC14 Adopting Advanced Features of the New UI Session 220 Chris Dreessen AppKit Software Engineer! Corbin Dunn AppKit Software Engineer 2014 Apple Inc. All rights reserved. Redistribution