SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
Naming Conventions followed in
     iOS device controls
             Part-I
iOS UI Element Usage Guidelines
• User expect the standard views and controls
  to behave as they do in the built-in
  applications.
• Automatically receive updates if iOS
  introduces a redesigned appearance .
• using the appearance customization
  programming interfaces available in iOS 5 and
  later. use these APIs to receive automatic
  appearance updates.
Device orientation
• On iPhone and iPod touch, the Home screen is
  displayed in one orientation only, which is
  portrait, with the Home button at the bottom.
  This leads users to expect iPhone apps to
  launch in this orientation by default.
• On iPad, the Home screen is displayed in all
  orientations, so users tend to expect iPad apps
  to launch in the device orientation.
Gestures
• Tap - To press or select a control or item (analogous to
  a single mouse click).
• Drag- To scroll or pan (that is, move side to side).
• Flick- To scroll or pan quickly.
• Swipe-
       - With one finger, to reveal the Delete button in a
  table-view row or to reveal
       - Notification Center (from the top edge of the
  screen).
       - With four fingers, to switch between apps on
  iPad.
• Double tap
      - To zoom in and center a block of content or
  an image.
      - To zoom out (if already zoomed in).
• Pinch
      - Zoom in
      - Zoom out
• Touch and hold
      - In editable or selectable text, to display a
  magnified view for cursor positioning.
• Shake - To initiate an undo or redo action.
Multitasking
• Only one application is visible in the
  foreground at a time.
• In iOS 4 and later
• multitasking, allows apps to remain in the
  background until they are launched again or
  until they are terminated.
BARS
-   Status bar
-   Navigation bar
-   Tab bar
-   Toolbar
•   Bars are not required to be present in every
    application. but, if they are present-use them
    correctly.
The Status Bar

• The status bar displays important information
  about the device and the current
  environment.
• Present on upper edge of the device screen.
• On iPhone, the status bar can have different
  colors; on iPad, the status bar is always black.
• network activity indicator
Navigation bar
• The navigation bar should contain current
  title, back button and one control that manages
  the view’s contents.
• A navigation bar can be translucent or opaque.
• On iPhone, changing the device orientation from
  portrait to landscape can change the height of
  the navigation bar automatically.
• On iPad, pane of a split view, that does not
  extend across the screen.
Navigation Bar …
• Segmented control can be used in a navigation
  bar
• When the user navigates to a new level, two
  things should happen:
    - The bar title should change to the new
  level’s title.
    - A back button should appear to the left of
  the title, and it should be labeled with the
  previous level’s title.
Toolbar

• A toolbar contains controls that perform
  actions related to objects in the screen or
  view.
Appearance and Behavior
• On iPhone, a toolbar always appears at the
  bottom edge of a screen or view, but on iPad it
  can instead appear at the top edge.
• Toolbar items are displayed equally spaced
  across the width of the toolbar.
• On iPhone, changing the device orientation
  from portrait to landscape can change the
  height of the toolbar automatically.
  Whereas, On iPad, the it does not.
Tab Bar

A tab bar gives people the ability to switch
between different subtasks, views, or modes.
Appearance and Behavior
• A tab bar appears at the bottom edge of the
  screen and should be accessible from every
  location in the application.
• Black background by default.
• The tab displays a lighter background when
  selected its icon receives a blue glow, which is
  known as the selection indicator image.
Popover (iPad Only)
• A popover is a transient view that can be
  revealed when people tap a control or an
  onscreen area.
Table View

• A table view presents data in a single-column
  list of multiple rows.
• Two styles of table views, which are
  distinguished mainly by appearance.
Types
Plain table           Grouped table
Table view elements
   Checkmark- Indicates that the row is selected

   Disclosure indicator - another table associated
with the row

   Detail disclosure button - additional details
about the row in a new view

    Row reorder- Indicates that the row can be
dragged to another location in the table
Table view elements
 Row insert- Adds a new row to the table

  Delete button control- In an editing context,
reveals and hides the Delete button for a row

       Delete button- Deletes the row
Forms of Tables
iOS 3 and later defines four table-cell styles that
  implement the most common layouts for table
  rows in both plain and grouped tables. Each
  cell style is best suited to display a different
  type of information.
- Default Cell Style
- Subtitle Cell Style
- Value 1 Cell Style
- Value 2 Cell Style
Default cell style
Subtitle cell style
Value 1 cell style
Value 2 cell Style
THANK YOU



            To be Contd..

Weitere ähnliche Inhalte

Ähnlich wie iOS Guidelines and Naming Conventions Part 1

User Interface Standards
User Interface StandardsUser Interface Standards
User Interface StandardsKiran Kumar
 
Ipad quick-reference
Ipad quick-referenceIpad quick-reference
Ipad quick-referenceMike Wolf
 
Ipad quick-reference-2
Ipad quick-reference-2Ipad quick-reference-2
Ipad quick-reference-2Daniel Downs
 
Tapworthy ch3
Tapworthy ch3Tapworthy ch3
Tapworthy ch3Yu Liang
 
Leading with the iPhone
Leading with the iPhoneLeading with the iPhone
Leading with the iPhonebriteasyello
 
Trabajo en ingles[1]
Trabajo en ingles[1]Trabajo en ingles[1]
Trabajo en ingles[1]karenyarley
 
Intro to ipad - Activities tutorial
Intro to ipad - Activities tutorialIntro to ipad - Activities tutorial
Intro to ipad - Activities tutorialMandyB009
 
How to use User Interface (UI) appearance of text and controls in iPhone appl...
How to use User Interface (UI) appearance of text and controls in iPhone appl...How to use User Interface (UI) appearance of text and controls in iPhone appl...
How to use User Interface (UI) appearance of text and controls in iPhone appl...TOPS Technologies
 
Living in the IT Era L3.pptx
Living in the IT Era L3.pptxLiving in the IT Era L3.pptx
Living in the IT Era L3.pptxelmervirtudazo1
 
App design guide
App design guideApp design guide
App design guideJintin Lin
 
Mobi kwik,learner workspace guide
Mobi kwik,learner workspace guideMobi kwik,learner workspace guide
Mobi kwik,learner workspace guideWilliam McIntosh
 
Meet the New Microsoft Windows 8 - User Guide
Meet the New Microsoft Windows 8 - User GuideMeet the New Microsoft Windows 8 - User Guide
Meet the New Microsoft Windows 8 - User GuideDavid J Rosenthal
 
Windows 8 brochure
Windows 8 brochureWindows 8 brochure
Windows 8 brochuremart99
 
W8 brochure download
W8 brochure downloadW8 brochure download
W8 brochure downloadHeo Gòm
 

Ähnlich wie iOS Guidelines and Naming Conventions Part 1 (20)

Setup iPad
Setup iPadSetup iPad
Setup iPad
 
User Interface Standards
User Interface StandardsUser Interface Standards
User Interface Standards
 
Ipad quick-reference
Ipad quick-referenceIpad quick-reference
Ipad quick-reference
 
Ipad quick-reference-2
Ipad quick-reference-2Ipad quick-reference-2
Ipad quick-reference-2
 
Iphone ios7-quick-reference
Iphone ios7-quick-referenceIphone ios7-quick-reference
Iphone ios7-quick-reference
 
Ipad ios7-cheat-sheet
Ipad ios7-cheat-sheet  Ipad ios7-cheat-sheet
Ipad ios7-cheat-sheet
 
Ipad ios7-cheat-sheet
Ipad ios7-cheat-sheetIpad ios7-cheat-sheet
Ipad ios7-cheat-sheet
 
Ipad ios7-cheat-sheet
Ipad ios7-cheat-sheetIpad ios7-cheat-sheet
Ipad ios7-cheat-sheet
 
Tapworthy ch3
Tapworthy ch3Tapworthy ch3
Tapworthy ch3
 
Leading with the iPhone
Leading with the iPhoneLeading with the iPhone
Leading with the iPhone
 
Ipad presentation
Ipad presentationIpad presentation
Ipad presentation
 
Trabajo en ingles[1]
Trabajo en ingles[1]Trabajo en ingles[1]
Trabajo en ingles[1]
 
Intro to ipad - Activities tutorial
Intro to ipad - Activities tutorialIntro to ipad - Activities tutorial
Intro to ipad - Activities tutorial
 
How to use User Interface (UI) appearance of text and controls in iPhone appl...
How to use User Interface (UI) appearance of text and controls in iPhone appl...How to use User Interface (UI) appearance of text and controls in iPhone appl...
How to use User Interface (UI) appearance of text and controls in iPhone appl...
 
Living in the IT Era L3.pptx
Living in the IT Era L3.pptxLiving in the IT Era L3.pptx
Living in the IT Era L3.pptx
 
App design guide
App design guideApp design guide
App design guide
 
Mobi kwik,learner workspace guide
Mobi kwik,learner workspace guideMobi kwik,learner workspace guide
Mobi kwik,learner workspace guide
 
Meet the New Microsoft Windows 8 - User Guide
Meet the New Microsoft Windows 8 - User GuideMeet the New Microsoft Windows 8 - User Guide
Meet the New Microsoft Windows 8 - User Guide
 
Windows 8 brochure
Windows 8 brochureWindows 8 brochure
Windows 8 brochure
 
W8 brochure download
W8 brochure downloadW8 brochure download
W8 brochure download
 

Mehr von karthi-anubavam

Mehr von karthi-anubavam (7)

Galaxy Nexus
Galaxy NexusGalaxy Nexus
Galaxy Nexus
 
Appcelerator Titanium Alloy
Appcelerator Titanium Alloy Appcelerator Titanium Alloy
Appcelerator Titanium Alloy
 
Amazon Kindle
Amazon KindleAmazon Kindle
Amazon Kindle
 
Windows Phone 8
Windows Phone 8  Windows Phone 8
Windows Phone 8
 
Nexus Q
Nexus QNexus Q
Nexus Q
 
Android 4.1 (Jellybean)
Android 4.1 (Jellybean)Android 4.1 (Jellybean)
Android 4.1 (Jellybean)
 
OSX Mountain Lion - Features
OSX Mountain Lion - FeaturesOSX Mountain Lion - Features
OSX Mountain Lion - Features
 

Kürzlich hochgeladen

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Kürzlich hochgeladen (20)

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

iOS Guidelines and Naming Conventions Part 1

  • 1. Naming Conventions followed in iOS device controls Part-I
  • 2. iOS UI Element Usage Guidelines • User expect the standard views and controls to behave as they do in the built-in applications. • Automatically receive updates if iOS introduces a redesigned appearance . • using the appearance customization programming interfaces available in iOS 5 and later. use these APIs to receive automatic appearance updates.
  • 3. Device orientation • On iPhone and iPod touch, the Home screen is displayed in one orientation only, which is portrait, with the Home button at the bottom. This leads users to expect iPhone apps to launch in this orientation by default. • On iPad, the Home screen is displayed in all orientations, so users tend to expect iPad apps to launch in the device orientation.
  • 4. Gestures • Tap - To press or select a control or item (analogous to a single mouse click). • Drag- To scroll or pan (that is, move side to side). • Flick- To scroll or pan quickly. • Swipe- - With one finger, to reveal the Delete button in a table-view row or to reveal - Notification Center (from the top edge of the screen). - With four fingers, to switch between apps on iPad.
  • 5. • Double tap - To zoom in and center a block of content or an image. - To zoom out (if already zoomed in). • Pinch - Zoom in - Zoom out • Touch and hold - In editable or selectable text, to display a magnified view for cursor positioning. • Shake - To initiate an undo or redo action.
  • 6. Multitasking • Only one application is visible in the foreground at a time. • In iOS 4 and later • multitasking, allows apps to remain in the background until they are launched again or until they are terminated.
  • 7. BARS - Status bar - Navigation bar - Tab bar - Toolbar • Bars are not required to be present in every application. but, if they are present-use them correctly.
  • 8. The Status Bar • The status bar displays important information about the device and the current environment. • Present on upper edge of the device screen. • On iPhone, the status bar can have different colors; on iPad, the status bar is always black. • network activity indicator
  • 9. Navigation bar • The navigation bar should contain current title, back button and one control that manages the view’s contents. • A navigation bar can be translucent or opaque. • On iPhone, changing the device orientation from portrait to landscape can change the height of the navigation bar automatically. • On iPad, pane of a split view, that does not extend across the screen.
  • 10. Navigation Bar … • Segmented control can be used in a navigation bar • When the user navigates to a new level, two things should happen: - The bar title should change to the new level’s title. - A back button should appear to the left of the title, and it should be labeled with the previous level’s title.
  • 11. Toolbar • A toolbar contains controls that perform actions related to objects in the screen or view.
  • 12. Appearance and Behavior • On iPhone, a toolbar always appears at the bottom edge of a screen or view, but on iPad it can instead appear at the top edge. • Toolbar items are displayed equally spaced across the width of the toolbar. • On iPhone, changing the device orientation from portrait to landscape can change the height of the toolbar automatically. Whereas, On iPad, the it does not.
  • 13. Tab Bar A tab bar gives people the ability to switch between different subtasks, views, or modes.
  • 14. Appearance and Behavior • A tab bar appears at the bottom edge of the screen and should be accessible from every location in the application. • Black background by default. • The tab displays a lighter background when selected its icon receives a blue glow, which is known as the selection indicator image.
  • 15. Popover (iPad Only) • A popover is a transient view that can be revealed when people tap a control or an onscreen area.
  • 16. Table View • A table view presents data in a single-column list of multiple rows. • Two styles of table views, which are distinguished mainly by appearance.
  • 17. Types Plain table Grouped table
  • 18. Table view elements Checkmark- Indicates that the row is selected Disclosure indicator - another table associated with the row Detail disclosure button - additional details about the row in a new view Row reorder- Indicates that the row can be dragged to another location in the table
  • 19. Table view elements Row insert- Adds a new row to the table Delete button control- In an editing context, reveals and hides the Delete button for a row Delete button- Deletes the row
  • 20. Forms of Tables iOS 3 and later defines four table-cell styles that implement the most common layouts for table rows in both plain and grouped tables. Each cell style is best suited to display a different type of information. - Default Cell Style - Subtitle Cell Style - Value 1 Cell Style - Value 2 Cell Style
  • 23. Value 1 cell style
  • 24. Value 2 cell Style
  • 25. THANK YOU To be Contd..