아이폰어플개발정보2010. 6. 24. 14:13
iPhone Human Interface Guidelines

** Planning **


Ch1. The iPhone OS Platform: Rich with Possibilities


** platform differences to keep in mind **

- compact screen size (480x320)

- memory is not unlimited

- one screen at a time

- one application at a time (positiveapplication-switchingexperience <- shortest possible launch time)

- minimal user help


** options **

- iPhone Applications: responsiveness, simplicity, and a beautiful,  streamlined user interface

- Web-only Content: web applications, optimized /compatible pages

- Hybrid Applications: avoid giving users the impression that your application is merely a miniweb browser


** questions **

- user's motivation

- user's experience

- focus of application

- natural organization of the information


** 3 styles of applications **

- productivity applications: ex) mail. focused on information. settings application.

- utility applications: ex) weather. quick summary of information. options on the back of the main view.

- immersive applications: ex) game. full-screen, visually rich environment. focus is one the visual content and the user experience not on the data. non-standard controls.


Ch2. Human Interface Principles: Creating a Great User Interface

** Principles **

- Metaphors in the real world

- Direct manipulation of tangible object

- See and point by presenting choices to users

- immediate feedback


Ch3. Designing an iPhone Application: From Product Definition to Branding

1. Create Product Definition Statement

 : main purpose and its audience

ex) “Aneasy-to-usephotomanagementapplicationforamateurphotographers“


2. Incorporate Characteristics of Great iPhone Applications

- Make it obvious

- Think Top Down (top is most visible)

- Minimize required input

- Express information succinctly

- Provide fingertip-sized targets (recommend hit region 44x44 pixels)

- Focus on primary task


3. Support Gestures Appropriately

- Finger: capable of many movements, but bigger than a mouse pointer

- users are most familiar with the tap and drag.

- pinch and swipe are used as shortcuts to expedite a task,  not as the only way to perform a task.

-There should always be  a simple,straightforward way to perform an action,even if it means an extra tap or two.


Tap: To press or select a controlor item (single mouse click).

Drag: To scrollor pan.

Flick: To scrollor pan quickly.

Swipe:In a table-view row,to revealthe Delete button.

Double tap: To zoom in and center a block of content or an image.To zoom out (if already zoomed in).

Pinch open: To zoom in.

Pinch close:To zoom out.

Touch and hold: In editable text,to display a magnified view for cursor positioning.  


4. Incorporate Branding Elements Cautiously

Brandingismosteffectivewhenitissubtleandunderstated except Home screen icon.

Users just want to get things done.


Ch4. Handling Common Tasks

** Starting **

- avoid About window or splash screen


** Stopping **

-Be prepared to receive an exit or terminate notification at any time.Therefore,save user data as soonas possible and as often as reasonable.

-Savethecurrentstatewhenstopping,atthefinestlevelofdetailpossible.Forexample,ifyourapplicationdisplaysscrollingdata,savethecurrentscrollposition.


iPhoneapplicationsshould never quit programmatically becausedoingsolookslikeacrashtotheuser.


Whenuserscan'taccesspartofyourapplicationbecause ofexternalcircumstances:

-Describethesituationverysuccinctly

-Supply a button that performs a corrective action

-Avoid displaying the alert too often or in too many different situations


"Configuration options" vs "Settings application"


** Handling Orientation Changes **

- Be aware of accelerometer values

- no “rotate now” button


** Using Sound **

Sometimesusersexpecttohearsoundsevenwhentheircurrentsettingsindicatethattheyprefersilence.Thisisbecauseuserswanttohearsoundstheyaskfor,butavoidhearingsoundstheydon’taskfor.


* What Users Expect - Ring/Silent switch

- Users don't want to be interrupted by ringtone/SMS, keyboard or feedback sounds

- Users want to hear media playback of media-only app., Clock alarm, sound clip in a language-learning app. or conversation in an audio chat app.


* What Users Expect - Volume Buttons

Userscanalwaysusethevolumebuttonstosilenceanysound,regardlessofthepositionoftheRing/Silentswitch.

Usingthevolumebuttonswhennoaudioiscurrentlyplayingadjuststheringervolume.


* What Users Expect - Headsets and Headphones

- Whenuserspluginaheadsetorheadphones,theyintendtocontinuelisteningtothecurrentaudio privately.

- Whenusersunplugaheadsetorheadphones,theydon’twanttoautomaticallysharewhatthey’vebeenlisteningtowithothers.


* System Sound Services

-30 seconds or less in duration

-no levelor positioning control

-Can always mix with other sounds

-Should always obey the Ring/Silent switch


* Audio Session Services

- Audio sounds are primary part of the app.

-30 seconds or more in duration

-levelor positioning control

-Should not mix with other sounds


For allapplications,only one category is active at a time.


* Audio Session categories

- UserInterfaceSoundEffects (Ring/Silent, Mix): Tap feedback, startup sounds

- AmbientSound (Ring/Silent, Mix): Incidental sounds and noises

- SoloAmbientSound (Default, Ring/Silent): A sound track in a game

- MediaPlayback: Songs, videos, streaming audio

- LiveAudio: Music or other real-time, user-created sounds

- RecordAudio: User-recorded audio

- PlayAndRecord: Simultaneous audio input and output, such as in a voice-changing app.


* Providing a License Agreement

The end-user license agreement for an iPhone application is displayed in the App Store.

You should not provideany user interface elements that display the license agreement while your application is running.


** Designing **


- Views: content regions

- Controls: graphic action objects

- Screens: different visual states


Ch5. A Brief Tour of the Application User Interface

Alerts,actionsheets,andmodalviewsdonotexistinanapplicationscreen.


* 4 special views

- Status bar

- Navigation bar

- Tab bar / Toolbar


Ch6. Navigation Bars, Tab Bars, Toolbars, and the Status Bar

* Status Bar

- gray

- opaque black

- translucent black (alpha = 0.5)


* Navigation Bar

- Navigational control

 : multi-segment (breadcrumb )back button is not recommended

- Manage the content

 : switch among different modes

 :Allcontrols in a navigation bar should use the bordered style.


* Toolbars

 : actions related to objects in the current view

 : five or fewer items are reasonable


* Tab Bars

 : Different perspectives on the same set of data

 : Different subtasks related to the overall function of the app.

 : If your application's tab bar contains five or fewer tabs,iPhone OS displays all of them,equally spaced withinthe tab bar. If there are more than five tabs,iPhone OS displays four of them in the tab bar andadds a More tab.

 : TheMorescreencanalsoincludeanEditbuttonthatuserscantaptoconfigurethetabbar.

 : You can display a badge (white text inside a red oval) on a tab.


Ch7. Alerts, action Sheets, and Modal Views

Alerts,action sheets,and modalviews are allmodal,which means that users must explicitly dismiss them.

it’s important to avoid overusing these views. (interrupting, annoying)


- Alerts: unexpected important information (unattached appearance)

 : If users press theHome button while such an alert is visible,the result should be identicalto tapping the Cancelbutton.

 : If the action is benign, OK is bright-coloured and on the right side.

 : If the action is destructive, Cancel is bright-coloured and on the right side.

- Action sheets: collection of additional choices related to the action, anchored to the sides of the screen

 : background - blue (default), black translucent

 : Allactionsheetsinyourapplicationshouldhavethesamebackgroundcolor,andthatcolorshouldcoordinatewiththecolorofthenavigationbarsandtoolbars.

 : destructive button should be at the top (away from Home button) and in red color

 : Cancel button is at the bottom and dark

- Modal views: extensive functionality

 ex) Compose view in Mail. When users tap the Compose button, a modal view appears that contains text areas for the addresses and message, a keyboard for input, a Cancel, and a Send button.


Ch8. Table Views, Text Views, and Web Views

Atableviewpresentsdatainasingle-columnlistofmultiplerows.

+ regular style (optional index)

 : Avoid using table elements that display on the right edge of a table.

 - simple list 

 - sectioned list

+ grouped style (no index)

 :  each group always contains at least one item.

You should never make highlight permanent in an effort to indicate the current selection in a list; instead, use the checkmark.


* Table-View Elements

- Disclosure indicator: selecting the row results in the display of another list. selection only

- Detail disclosure button: reveals detailed information for the item

- Delete button: appears when users swipe in the row or when they tap the delete control button while in an editing context

- Delete control button: (horizontal minus symbol) reveal and (vertical) hide the Delete button for each list item

 - grouped table view: outside the table view, on the left

 - regular table view: in the table view, on the left

- Row insert button: add a row to the list

- Check mark: shows that it is currently selected, on the right


Ch9. Application Controls

- Activity indicator: progress of a task of unknown duration

- Progress View: for known duration

- Date and Time Picker: size is fixed the same as that of keyboard

- Info Button: reveal configuration details about an app. (light/dark background)

- Label: gives information or limited help

- Page Indicator: shows how many views are open which are peers of each other. at most 20 dots in portrait orientation. You should include a logic to prevent clipping.

- Progress View: default / bar style

- Rounded Rectangle Button

- Search Bar: default / opaque black / translucent black

- Segmented Control: display a different view. ~5 seg.s recommended. text or image but not both.

- Slider: users make fine-grained adjustment to a value

- Text Field: single line of input


Ch10. System-Provided Buttons and Icons

** Avoid choosing a button based on its appearance but its documented meaning **


* Standard buttons for Toolbars and Navigation Bars (UIBarButtonSystemItem)

 - Bordered style: for navigation bar and toolbar

 - Plain style: for toolbar


* Standard Icons for Tab Bars (UITabBarSystemItem)


Ch11. Creating Custom Icons and Images

- PNG format

- white with appropriate alpha and no shadow

- anti-aliasing

- 20x20 for toolbar / navigation bar

- 30x30 for tab bar

- icon is used as a mask (no need for colorful icon)

- pressed / selected appearance are automatically provided




출처 : http://blog.naver.com/PostView.nhn?blogId=gonagi&logNo=150048150981
Posted by 오늘마감

댓글을 달아 주세요