SlideShare a Scribd company logo
1 of 15
Apple Watch UI Elements
HappyMan
2015/5/20
Labels
• Focus first on legibility.
Images
• Size images for 38mm and
42mm displays, respectively.
• Create images at 2x
resolution.
Groups
• Use groups to arrange items
horizontally or vertically.
• Nest groups to mix
horizontal and vertical
content.
Tables
• Use row types consistently.
• Limit the number of table
rows to about 20.
• Don’t embed tables inside
groups.
Buttons
• Create buttons that span the
width of the screen.
• Use the same height for
vertical stacks of one- and
two-line text buttons.
Switches
• Choose between two
mutually exclusive choices
or states, such as yes/no.
Sliders
• Use custom images to
communicate what the
slider does.
Maps
• Size the map element to fit
the screen.
Maps
• Configure the displayed map
region to be the smallest
area that encompasses the
points of interest.
Date Labels
• Date labels display real-time
values on Apple Watch.
Timer Labels
• Timer labels display real-
time values on Apple Watch.
Menus
• Include a menu when the current screen has
relevant actions.
• Use a label and an icon to convey the purpose
of each menu action.
Reference
• UI Elements - Apple Watch Human Interface
Guidelineshttps://developer.apple.com/watch
/human-interface-guidelines/ui-elements/
Happy End
Feel free to Share if you Like :D
cg2010studio.wordpress.com

More Related Content

Similar to Apple Watch UI Elements

Apple Watch Specifications
Apple Watch SpecificationsApple Watch Specifications
Apple Watch SpecificationsShengWen Chiou
 
Gl2010 m5 wd3-presentation
Gl2010 m5 wd3-presentationGl2010 m5 wd3-presentation
Gl2010 m5 wd3-presentationTracie King
 
Basic Computer skill-P4 Excel.pptx
Basic Computer skill-P4 Excel.pptxBasic Computer skill-P4 Excel.pptx
Basic Computer skill-P4 Excel.pptxMastewal5
 
Powerpoint exercise
Powerpoint exercisePowerpoint exercise
Powerpoint exerciseLindaTobago
 
Excel Chapter 03
Excel Chapter 03Excel Chapter 03
Excel Chapter 03xtin101
 
SGIS Training Introduction
SGIS Training IntroductionSGIS Training Introduction
SGIS Training IntroductionWill Kirkwood
 
Illustrator assignment 1
Illustrator assignment 1Illustrator assignment 1
Illustrator assignment 1rgosselin
 
Illustrator assignment 1
Illustrator assignment 1Illustrator assignment 1
Illustrator assignment 1rgosselin
 
Ppt exercise
Ppt exercisePpt exercise
Ppt exercisekaz naqvi
 
Gl2010 m6 ex4_presentation
Gl2010 m6 ex4_presentationGl2010 m6 ex4_presentation
Gl2010 m6 ex4_presentationTracie King
 
ADOBE ILLUSTRATOR NOTES.docx
ADOBE ILLUSTRATOR NOTES.docxADOBE ILLUSTRATOR NOTES.docx
ADOBE ILLUSTRATOR NOTES.docxjuvisolutions
 
Advanced InDesign Techniques
Advanced InDesign TechniquesAdvanced InDesign Techniques
Advanced InDesign TechniquesRadford Bean
 

Similar to Apple Watch UI Elements (20)

Apple Watch Specifications
Apple Watch SpecificationsApple Watch Specifications
Apple Watch Specifications
 
Gl2010 m5 wd3-presentation
Gl2010 m5 wd3-presentationGl2010 m5 wd3-presentation
Gl2010 m5 wd3-presentation
 
Pagemaker
PagemakerPagemaker
Pagemaker
 
Chapter3
Chapter3Chapter3
Chapter3
 
Chapter 3
Chapter 3Chapter 3
Chapter 3
 
Basic Computer skill-P4 Excel.pptx
Basic Computer skill-P4 Excel.pptxBasic Computer skill-P4 Excel.pptx
Basic Computer skill-P4 Excel.pptx
 
Powerpoint exercise
Powerpoint exercisePowerpoint exercise
Powerpoint exercise
 
Excel Chapter 03
Excel Chapter 03Excel Chapter 03
Excel Chapter 03
 
SGIS Training Introduction
SGIS Training IntroductionSGIS Training Introduction
SGIS Training Introduction
 
Illustrator assignment 1
Illustrator assignment 1Illustrator assignment 1
Illustrator assignment 1
 
Illustrator assignment 1
Illustrator assignment 1Illustrator assignment 1
Illustrator assignment 1
 
Excel ch05
Excel ch05Excel ch05
Excel ch05
 
Chapter9
Chapter9Chapter9
Chapter9
 
Ppt exercise
Ppt exercisePpt exercise
Ppt exercise
 
Gl2010 m6 ex4_presentation
Gl2010 m6 ex4_presentationGl2010 m6 ex4_presentation
Gl2010 m6 ex4_presentation
 
Chapter 9
Chapter 9Chapter 9
Chapter 9
 
Pagemaker6.5 ppt
Pagemaker6.5 pptPagemaker6.5 ppt
Pagemaker6.5 ppt
 
ADOBE ILLUSTRATOR NOTES.docx
ADOBE ILLUSTRATOR NOTES.docxADOBE ILLUSTRATOR NOTES.docx
ADOBE ILLUSTRATOR NOTES.docx
 
Advanced InDesign Techniques
Advanced InDesign TechniquesAdvanced InDesign Techniques
Advanced InDesign Techniques
 
Robot flash tutorial
Robot flash tutorialRobot flash tutorial
Robot flash tutorial
 

More from ShengWen Chiou

Crashlytics 使用教學
Crashlytics 使用教學Crashlytics 使用教學
Crashlytics 使用教學ShengWen Chiou
 
Xamarin.iOS中引用第三方Objective-C的Class Library
Xamarin.iOS中引用第三方Objective-C的Class LibraryXamarin.iOS中引用第三方Objective-C的Class Library
Xamarin.iOS中引用第三方Objective-C的Class LibraryShengWen Chiou
 
Xamarin.iOS中引用自製Objective-C的Class Library
Xamarin.iOS中引用自製Objective-C的Class LibraryXamarin.iOS中引用自製Objective-C的Class Library
Xamarin.iOS中引用自製Objective-C的Class LibraryShengWen Chiou
 
What’s New In watch OS
What’s New In watch OSWhat’s New In watch OS
What’s New In watch OSShengWen Chiou
 
Symbolicate Crash 使用教學
Symbolicate Crash 使用教學Symbolicate Crash 使用教學
Symbolicate Crash 使用教學ShengWen Chiou
 
CocoaPods 使用教學
CocoaPods 使用教學CocoaPods 使用教學
CocoaPods 使用教學ShengWen Chiou
 
Parental Gate 使用教學
Parental Gate 使用教學Parental Gate 使用教學
Parental Gate 使用教學ShengWen Chiou
 

More from ShengWen Chiou (19)

iOS Extension
iOS ExtensioniOS Extension
iOS Extension
 
FMDB 研究
FMDB 研究FMDB 研究
FMDB 研究
 
Realm 研究
Realm 研究Realm 研究
Realm 研究
 
Crashlytics 使用教學
Crashlytics 使用教學Crashlytics 使用教學
Crashlytics 使用教學
 
DBAccess 研究
DBAccess 研究DBAccess 研究
DBAccess 研究
 
Xamarin.iOS中引用第三方Objective-C的Class Library
Xamarin.iOS中引用第三方Objective-C的Class LibraryXamarin.iOS中引用第三方Objective-C的Class Library
Xamarin.iOS中引用第三方Objective-C的Class Library
 
Xamarin.iOS中引用自製Objective-C的Class Library
Xamarin.iOS中引用自製Objective-C的Class LibraryXamarin.iOS中引用自製Objective-C的Class Library
Xamarin.iOS中引用自製Objective-C的Class Library
 
iBeacon 相關應用
iBeacon 相關應用iBeacon 相關應用
iBeacon 相關應用
 
Xamarin 研究
Xamarin 研究Xamarin 研究
Xamarin 研究
 
What’s New In watch OS
What’s New In watch OSWhat’s New In watch OS
What’s New In watch OS
 
Apple Watch Feature
Apple Watch FeatureApple Watch Feature
Apple Watch Feature
 
Symbolicate Crash 使用教學
Symbolicate Crash 使用教學Symbolicate Crash 使用教學
Symbolicate Crash 使用教學
 
AppleDoc 使用教學
AppleDoc 使用教學AppleDoc 使用教學
AppleDoc 使用教學
 
Quickblox Study
Quickblox StudyQuickblox Study
Quickblox Study
 
Auto layout 介紹
Auto layout 介紹Auto layout 介紹
Auto layout 介紹
 
iOS Touch ID 介紹
iOS Touch ID 介紹iOS Touch ID 介紹
iOS Touch ID 介紹
 
iOS Keychain 介紹
iOS Keychain 介紹iOS Keychain 介紹
iOS Keychain 介紹
 
CocoaPods 使用教學
CocoaPods 使用教學CocoaPods 使用教學
CocoaPods 使用教學
 
Parental Gate 使用教學
Parental Gate 使用教學Parental Gate 使用教學
Parental Gate 使用教學
 

Recently uploaded

Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...MyIntelliSource, Inc.
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxnada99848
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEOrtus Solutions, Corp
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptkotipi9215
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - InfographicHr365.us smith
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样umasea
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWave PLM
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024StefanoLambiase
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 

Recently uploaded (20)

Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptx
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
 
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - Infographic
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need It
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 

Apple Watch UI Elements