SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
HIREVIETNAMESE




iPhone Training
     Lesson 2
http://www.hirevietnamese.com                           HIREVIETNAMESE

    Contents

               1      iPhone UI Design Considerations

               2      Application Layout

               3      iPhone UI Element Overview


               4      Example 2


               5      Exercise 2

                                                                    2
http://www.hirevietnamese.com                          HIREVIETNAMESE

    iPhone UI Design Considerations

     The iPhone is not a desktop system.



     The Apple iPhone is a powerful smart phone that is
      being used to improve the productivity of user. To
      design simple, successful iPhone app user interfaces,
      keep in mind the unique attributes of the iPhone.

     Eat with it, sleep with it, drink with it, live with it.


                                                                   3
http://www.hirevietnamese.com                                    HIREVIETNAMESE

    iPhone UI Design Considerations

     Small Screen
                                 Limit the number of controls

                                 Break a single complex app into two or more
                                apps with very different functions.




                                                                                4
http://www.hirevietnamese.com         HIREVIETNAMESE

    iPhone UI Design Considerations

     One screen at a time




                                                  5
http://www.hirevietnamese.com                              HIREVIETNAMESE

    iPhone UI Design Considerations

     One app at a time(iOS < 4)
                                 Save user-entered data immediately.

                                 Show the saved data the next time users
                                open the app.




                                                                            6
http://www.hirevietnamese.com                                   HIREVIETNAMESE

    iPhone UI Design Considerations

     Hand/Finger Input
                             UI Elements must be big enough to hit with a
                            finger.

                             Finger tapping means the pointer can just
                            disappear. Rollover effects don’t work well.

                             Multi-touch events




                                                                             7
http://www.hirevietnamese.com                                   HIREVIETNAMESE

    iPhone UI Design Considerations

     No External Keyboard
                             No physical keyboard on iPhone.

                             On-screen keyboard appears when needed.

                             Multi keyboard types are available.




                                                                            8
http://www.hirevietnamese.com         HIREVIETNAMESE

    iPhone UI Design Considerations

     Device Orientation




                                                  9
http://www.hirevietnamese.com                                        HIREVIETNAMESE

    iPhone UI Design Considerations

     Device Orientation
        Applications are notified when device rotates portrait to landscape and
       back.

        Can also find absolute orientation.




                                                                                   10
http://www.hirevietnamese.com                                           HIREVIETNAMESE

    iPhone UI Design Considerations

     No training
       The strongest asset of the iPhone is its ease of use. The simple user
       interface usually allows users to get their tasks done without training or
       reading online Help.




       Analyze your users, their needs and design a very simple, intuitive user
       interface that allows users to operate your app without training or Help



                                                                                    11
http://www.hirevietnamese.com          HIREVIETNAMESE

    Application Layout

     Tab Bar Control
                                Tab control always
                                visible




                                                     12
http://www.hirevietnamese.com                                         HIREVIETNAMESE

    Application Layout

     Tab Bar Control
         Use in:

          Applications with different models.

          Applications with different subtasks related to the overall app function.

         Many standard icons are provided.




                                                                                       13
http://www.hirevietnamese.com   HIREVIETNAMESE

    Application Layout

     Navigation Bars




                                            14
http://www.hirevietnamese.com                  HIREVIETNAMESE

    Application Layout

     Navigation Bars
        Like navigating a web site.

        Start with high-level general view.

        “Back” buttons automatic.

        Changes are animated.




                                                           15
http://www.hirevietnamese.com   HIREVIETNAMESE

    Application Layout

     Table Views




                                            16
http://www.hirevietnamese.com                                    HIREVIETNAMESE

    Application Layout

     Table Views
        Single column only.

        But custom cells can offer more flexibility.

        Can use multiple custom cell types in the same table.




                                                                             17
http://www.hirevietnamese.com   HIREVIETNAMESE

    Application Layout

     Toolbars




                                            18
http://www.hirevietnamese.com                         HIREVIETNAMESE

    Application Layout

     Toolbars
        Provide quick access to common actions.

        Usually at the bottom in the iPhone Apps .

        Many standard icons are provided.




                                                                  19
http://www.hirevietnamese.com                    HIREVIETNAMESE

    iPhone UI Element Overview

     Switch control
        iPhone version of a checkbox control.

        Change states on tap or drag.




                                                             20
http://www.hirevietnamese.com                 HIREVIETNAMESE

    iPhone UI Element Overview

     Segmented control
        iPhone version of a radio buttons.




                                                          21
http://www.hirevietnamese.com               HIREVIETNAMESE

    iPhone UI Element Overview

     Pickers
        Another way to have users select
       from a list of values.

        Can have multiple columns.




                                                        22
http://www.hirevietnamese.com                 HIREVIETNAMESE

    iPhone UI Element Overview

     Activity Indicators
        If you need to show one for very
       long.

        The system provides standard
       network activity indicator in status
       bar.




                                                          23
http://www.hirevietnamese.com                                  HIREVIETNAMESE

    iPhone UI Element Overview

     Alert Views
         Use in:

          When user has more than one option for an action.

          When you need to confirm an action.




                                                                           24
http://www.hirevietnamese.com   HIREVIETNAMESE

    Example 2




                                            25
http://www.hirevietnamese.com   HIREVIETNAMESE

    Exercise 2




                                            26
HIREVIETNAMESE

Contenu connexe

Tendances

Smau milano 2012 arena social media emanuele-bolognesi
Smau milano 2012   arena social media emanuele-bolognesiSmau milano 2012   arena social media emanuele-bolognesi
Smau milano 2012 arena social media emanuele-bolognesi
SMAU
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
Luis Abreu
 

Tendances (9)

Mobile applications chapter 5
Mobile applications chapter 5Mobile applications chapter 5
Mobile applications chapter 5
 
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
 
Devoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexDevoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with Flex
 
Mobile Strategy
Mobile StrategyMobile Strategy
Mobile Strategy
 
The future of the Adobe Flash platform
The future of the Adobe Flash platformThe future of the Adobe Flash platform
The future of the Adobe Flash platform
 
打造你的第一個iPhone APP
打造你的第一個iPhone APP打造你的第一個iPhone APP
打造你的第一個iPhone APP
 
The Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers CollectionThe Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers Collection
 
Smau milano 2012 arena social media emanuele-bolognesi
Smau milano 2012   arena social media emanuele-bolognesiSmau milano 2012   arena social media emanuele-bolognesi
Smau milano 2012 arena social media emanuele-bolognesi
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 

Similaire à Lesson 2

From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small ScreensFrom Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small Screens
Joseph Labrecque
 
UX Concerns across Mobile Platforms
UX Concerns across Mobile PlatformsUX Concerns across Mobile Platforms
UX Concerns across Mobile Platforms
Joseph Labrecque
 

Similaire à Lesson 2 (20)

HireVietnamese - Lesson 1
HireVietnamese - Lesson 1HireVietnamese - Lesson 1
HireVietnamese - Lesson 1
 
HireVietnamese - Lesson 1
HireVietnamese - Lesson 1HireVietnamese - Lesson 1
HireVietnamese - Lesson 1
 
Socialcam App of the week
Socialcam App of the weekSocialcam App of the week
Socialcam App of the week
 
From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small ScreensFrom Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small Screens
 
Applico mobile company
Applico mobile companyApplico mobile company
Applico mobile company
 
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
 
Sailfish operating system
Sailfish operating system Sailfish operating system
Sailfish operating system
 
Uniface 10 Enterprise Edition
Uniface 10 Enterprise EditionUniface 10 Enterprise Edition
Uniface 10 Enterprise Edition
 
Embracing mobile platforms | nascent at carmel ventures
Embracing mobile platforms | nascent at carmel venturesEmbracing mobile platforms | nascent at carmel ventures
Embracing mobile platforms | nascent at carmel ventures
 
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
 
Siebel connected mobile applications an overview
Siebel connected mobile applications   an overviewSiebel connected mobile applications   an overview
Siebel connected mobile applications an overview
 
Prototyping
PrototypingPrototyping
Prototyping
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Mobile Prototyping
Mobile PrototypingMobile Prototyping
Mobile Prototyping
 
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
 
I phone apps developments interview
I phone apps developments interviewI phone apps developments interview
I phone apps developments interview
 
Designing Software With the User in Mind - Symbio
Designing Software With the User in Mind - SymbioDesigning Software With the User in Mind - Symbio
Designing Software With the User in Mind - Symbio
 
UX Concerns across Mobile Platforms
UX Concerns across Mobile PlatformsUX Concerns across Mobile Platforms
UX Concerns across Mobile Platforms
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
ABC2011 Summer: Android UI and UX for the Tablets
ABC2011 Summer: Android UI and UX for the TabletsABC2011 Summer: Android UI and UX for the Tablets
ABC2011 Summer: Android UI and UX for the Tablets
 

Dernier

Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Dernier (20)

This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 

Lesson 2

  • 2. http://www.hirevietnamese.com HIREVIETNAMESE Contents 1 iPhone UI Design Considerations 2 Application Layout 3 iPhone UI Element Overview 4 Example 2 5 Exercise 2 2
  • 3. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  The iPhone is not a desktop system.  The Apple iPhone is a powerful smart phone that is being used to improve the productivity of user. To design simple, successful iPhone app user interfaces, keep in mind the unique attributes of the iPhone.  Eat with it, sleep with it, drink with it, live with it. 3
  • 4. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  Small Screen  Limit the number of controls  Break a single complex app into two or more apps with very different functions. 4
  • 5. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  One screen at a time 5
  • 6. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  One app at a time(iOS < 4)  Save user-entered data immediately.  Show the saved data the next time users open the app. 6
  • 7. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  Hand/Finger Input  UI Elements must be big enough to hit with a finger.  Finger tapping means the pointer can just disappear. Rollover effects don’t work well.  Multi-touch events 7
  • 8. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  No External Keyboard  No physical keyboard on iPhone.  On-screen keyboard appears when needed.  Multi keyboard types are available. 8
  • 9. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  Device Orientation 9
  • 10. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  Device Orientation  Applications are notified when device rotates portrait to landscape and back.  Can also find absolute orientation. 10
  • 11. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Design Considerations  No training The strongest asset of the iPhone is its ease of use. The simple user interface usually allows users to get their tasks done without training or reading online Help. Analyze your users, their needs and design a very simple, intuitive user interface that allows users to operate your app without training or Help 11
  • 12. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Tab Bar Control Tab control always visible 12
  • 13. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Tab Bar Control Use in:  Applications with different models.  Applications with different subtasks related to the overall app function. Many standard icons are provided. 13
  • 14. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Navigation Bars 14
  • 15. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Navigation Bars  Like navigating a web site.  Start with high-level general view.  “Back” buttons automatic.  Changes are animated. 15
  • 16. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Table Views 16
  • 17. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Table Views  Single column only.  But custom cells can offer more flexibility.  Can use multiple custom cell types in the same table. 17
  • 18. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Toolbars 18
  • 19. http://www.hirevietnamese.com HIREVIETNAMESE Application Layout  Toolbars  Provide quick access to common actions.  Usually at the bottom in the iPhone Apps .  Many standard icons are provided. 19
  • 20. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Element Overview  Switch control  iPhone version of a checkbox control.  Change states on tap or drag. 20
  • 21. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Element Overview  Segmented control  iPhone version of a radio buttons. 21
  • 22. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Element Overview  Pickers  Another way to have users select from a list of values.  Can have multiple columns. 22
  • 23. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Element Overview  Activity Indicators  If you need to show one for very long.  The system provides standard network activity indicator in status bar. 23
  • 24. http://www.hirevietnamese.com HIREVIETNAMESE iPhone UI Element Overview  Alert Views Use in:  When user has more than one option for an action.  When you need to confirm an action. 24
  • 25. http://www.hirevietnamese.com HIREVIETNAMESE Example 2 25
  • 26. http://www.hirevietnamese.com HIREVIETNAMESE Exercise 2 26