Создание интерфейса приложения для Nokia Series 40

  • View

  • Download

Embed Size (px)


В презентации описаны основные моменты, которые необходимо учитывать при создании интерфейса мобильного приложения для телефонов Nokia Series 40

Text of Создание интерфейса приложения для Nokia Series 40

  • Series 40 Web Apps UX GuidelinesKey information on the interaction models and visual styles of Series 40 web app Document created on 9 June 2011 Version 1.0
  • Table of contents1. Introduction 4 1.1 Audience 42. Key UX considerations 5 2.1 Displays 5 2.1.1 Screen size 5 2.1.2 Selectable object size 6 2.1.3 Screen orientation 9 2.2 Navigation 10 2.2.1 Non-touch device behaviour 10 2.2.2 Location of basic navigation controls 11 2.2.3 Scrolling 11 2.2.4 Focus on discrete tasks 13 2.2.5 Consistent interactions 14 2.3 Text and graphics 15 2.3.1 Consistent use of text 15 2.3.2 Align elements 16 2.3.3 Clear visual hierarchy 16 2.3.4 Richer visual elements 17 2.3.5 Use a common set of icons 18 2.4 Device consistency 19 2.5 Common application flow models 20 2.5.1 The models 20 2.5.2 Examples 223. Touch gestures 38 3.1 Tap gesture 39 3.2 Swipe 404. UI graphic elements 41 4.1 Lists 41 4.2 Tabs 42 4.3 Text fields 43 4.4 Buttons 445. Styles and specs 45 5.1 Top header bar and navigation icons 45 5.2 Buttons 47 5.2.1 Primary and secondary buttons 47 5.2.2 Tertiary icons- buttons 48 5.3 Form elements 49 5.3.1 General elements 49 5.3.2 Input fields 496. Specs for standard components 51 6.1 Header and sub-header components 51 6.2 List items 53 6.3 Content 56 6.4 Tabs 56Series 40 Web Apps UX Guidelines 2
  • Change history9 June 2011 1.0 Initial document releaseSeries 40 Web Apps UX Guidelines 3
  • 1. IntroductionThis guide provides developers and designers with the key information required to createSeries 40 web apps that are consistent in look and feel as well as functional behaviour. This isachieved by describing the common Series 40 device characteristics and features of Series 40web apps.1.1 AudienceThe primary audience for this guide is experienced web developers and designers who are capable of creatinggood quality applications from scratch, but are not yet doing so commercially, as shown in Figure 1. Byfollowing these guidelines, adopting the interaction patterns described in the examples, and using the assetsdefined in Chapter 4, UI graphic elements, developers and designers will be able to create commercial qualityweb apps that offer an outstanding UX on Series 40 devices.Figure 1: This guides target audience is shown.Series 40 Web Apps UX Guidelines 4
  • 2. Key UX considerationsThis chapter introduces the key factors that need to be considered when developing Series 40 web apps: Displays the resolution and physical size of screens on Series 40 devices and their effect on UX. Navigation use of clear and consistent navigation to support the user in understanding the features and functions of the web app. Also, considering whether the user has a keyboard or touch screen with which to interact with the application. Text and graphics use of sophisticated graphics to build the users trust and confidence in the web app. Also consistency in the use of text and graphics and the layout of these elements to ensure UI components are easy to identify and thereby easy to use. Device consistency ensuring web app behaviour is consistent with the device behaviour, to offer the users a familiar and consistent UX.2.1 DisplaysThis chapter discusses the characteristics of the displays on Series 40 devices and how they affect UX.2.1.1 Screen sizeSeries 40 devices that support web apps, whether they support keyboard only orTouch and Type UIs, offer screens with a resolution of 240 x 320-pixels. Typicallythe physical size of the screen, as shown in Figure 2, is 39.2 x 52.2 mm. Comparedto the size of screen offered by a typical smartphone, this is small. Web app designsneed to account for the screen size in two ways, by ensuring that the content iseasy to see and read, and that controls are sized so they are easy to select particularly on Touch and Type devices. Figure 2: Typical physical Series 40 screen size is shown.Series 40 Web Apps UX Guidelines 5
  • 2.1.2 Selectable object sizeCare has to be taken in creating selectable objects for Series 40 devices offering the Touch and Type UI. Anobjects optimal size is influenced by the nature of the object, specifically whether its a: discrete touchable area. part of a collection of touchable areas occupying all or part of the screen. button. Note: These recommendations apply to the current Touch and Type devices, which offer a 240 x 320-pixel screen of 2.4 in size. Series 40 web apps should be developed to allow for the release of devices with alternative screen resolutions and sizes. Discrete touchable areasThe recommendations for object sizes when using fingers and thumbs are listed in Table 1.Dimension 2.4 QVGA screenDiagonal 2.4Height 320 pixelsWidth 240 pixelsFinger activated object size, equivalent to 6.1 mm 40 pixelsVertical finger activated object gap, equivalent to 1mm 7 pixelsHorizontal finger activated object gap, equivalent to 1.23 mm 16 pixelsThumb activated object size, equivalent to 8 mm 52 pixelsVertical thumb activated object gap, equivalent to 1.25 mm 8 pixelsHorizontal thumb activated object gap, equivalent to 3 mm 20 pixelsTable 1: Recommended object and gap sizes are listed.Series 40 Web Apps UX Guidelines 6
  • Collection of touchable areasWhen dealing with a collection of touchable areas think of the screen as a 6 x 8 grid of touchable slots, as shownin Figure 3, with each element being 40 x 40-pixels in size.Figure 3: The dimensions of touchable elements within a 6 x 8 grid are shown.Series 40 Web Apps UX Guidelines 7
  • ButtonsThe recommended dimensions of buttons on a 2.4 QVGA screen are listed in Table 2. Dimension (pixels) Physical dimensions (mm) Height Width Height WidthStandard button 40 40 6.1 6.1Minimum size for rectangular 48 30 7.0 5.0buttonTable 2: Physical and pixel sizes for standard and rectangular buttons are listed.Series 40 Web Apps UX Guidelines 8
  • 2.1.3 Screen orientationScreens on Series 40 devices are offered in portrait (240 x 320 pixels) and landscape (320 x 240 pixels)orientations, as shown in Figure 4. The majority of Series 40 devices employ a screen in portrait orientation. Webapp designs ne