iOS人机交互规范

本文格式为Word版，下载可任意编辑——iOS人机交互规范

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

iOSHumanInterfaceGuidelines

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

EmbraceiOSUIParadigms22

EnsurethatUniversalAppsRunWellonBothiPhoneandiPad23

ReconsiderWeb-BasedDesigns23

TailorCustomizationtotheTask24

PrototypeandIterate27

CaseStudies:TransitioningtoiOS28

FromMailontheDesktoptoMailoniPhone29

FromKeynoteontheDesktoptoKeynoteoniPad31

FromMailoniPhonetoMailoniPad34

FromaDesktopBrowsertoSafarioniOS37

UserExperienceGuidelines43

FocusonthePrimaryTask43

ElevatetheContentthatPeopleCareAbout44

ThinkTopDown45

GivePeopleaLogicalPathtoFollow45

MakeUsageEasyandObvious45

UseUser-CentricTerminology46

MinimizetheEffortRequiredforUserInput47

DownplayFile-HandlingOperations47

EnableCollaborationandConnectedness48

De-emphasizeSettings49

BrandAppropriately50

MakeSearchQuickandRewarding51

EnticeandInformwithaWell-WrittenDescription52

BeSuccinct52

UseUIElementsConsistently52

ConsiderAddingPhysicalityandRealism54

DelightPeoplewithStunningGraphics55

HandleOrientationChanges57

MakeTargetsFingertip-Size59

UseSubtleAnimationtoCommunicate60

SupportGesturesAppropriately60

AskPeopletoSaveOnlyWhenNecessary61

MakeModalTasksOccasionalandSimple62

StartInstantly63

AlwaysBePreparedtoStop64

Don’tQuitProgrammatically64

IfNecessary,DisplayaLicenseAgreementorDisclaimer65

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

ForiPad:EnhanceInteractivity(Don’tJustAddFeatures)65

ForiPad:ReduceFull-ScreenTransitions66

ForiPad:RestrainYourInformationHierarchy66

ForiPad:ConsiderUsingPopoversforSomeModalTasks69

ForiPad:MigrateToolbarContenttotheTop70

iOSTechnologyUsageGuidelines72

iCloudStorage72

Multitasking74

NotificationCenter76

Printing81

iAdRichMediaAds82

QuickLookDocumentPreview88

Sound89

UnderstandUserExpectations89

DefinetheAudioBehaviorofYourApp91

ManageAudioInterruptions95

HandleMediaRemoteControlEvents,ifAppropriate97

VoiceOverandAccessibility98

EditMenu99

UndoandRedo101

KeyboardsandInputViews102

LocationServices103

iOSUIElementUsageGuidelines105

Bars105

TheStatusBar105

NavigationBar107

Toolbar110

TabBar111

ContentViews113

Popover(iPadOnly)114

SplitView(iPadOnly)117

TableView119

TextView128

WebView129

ContainerViewController130

Alerts,ActionSheets,andModalViews131

Alert131

ActionSheet135

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

ModalView138

Controls141

ActivityIndicator141

DateandTimePicker142

DetailDisclosureButton143

InfoButton143

Label144

NetworkActivityIndicator144

PageIndicator145

Picker146

ProgressView147

RoundedRectangleButton147

ScopeBar148

SearchBar149

SegmentedControl150

Slider151

Stepper152

Switch153

TextField153

System-ProvidedButtonsandIcons154

StandardButtonsforUseinToolbarsandNavigationBars155

StandardIconsforUseinTabBars157

StandardButtonsforUseinTableRowsandOtherUIElements159

CustomIconandImageCreationGuidelines160

TipsforDesigningGreatIconsandImages162

TipsforCreatingGreatArtworkfortheRetinaDisplay163

TipsforCreatingResizableImages165

ApplicationIcons165

LaunchImages168

SmallIcons170

DocumentIcons171

DocumentIconSpecificationsforiPhone171

DocumentIconSpecificationsforiPad172

WebClipIcons174

IconsforNavigationBars,Toolbars,andTabBars175

NewsstandIcons177

DocumentRevisionHistory181

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

Introduction

iOSHumanInterfaceGuidelinesdescribestheguidelinesandprinciplesthathelpyoudesignasuperlativeuserinterfaceanduserexperienceforyouriOS

app.

iOSHumanInterfaceGuidelinesdoesnotdescribehowtoimplementyourdesignsincode.Whenyou’rereadytocode,startbyreadingiOSAppProgrammingGuide.

AtaGlance

Byworkingwiththeplatformconventions,you’llbemuchbetterpositionedtocreateoutstandingiOSapps.

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

Introduction

AtaGlance

RelevantChapters“UserExperienceGuidelines〞(page43)and“iOSUIElementUsage

Guidelines〞(page105)

PeopleExpecttoFindiOSTechnologiesintheAppsTheyUse

iOSprovidesmanygreattechnologiesthataddvaluetoapps,suchasmultitasking,printing,andVoiceOver.AlthoughusersmightviewthesetechnologiesasautomaticallyavailablewhenevertheyusetheiriOS-baseddevices,itcanrequireworkonyourparttoincorporatetheminyourapp.IfaniOStechnologyisappropriateinyourapp,besuretofollowtheguidelinesthatgovernitsusage.

RelevantChapter“iOSTechnologyUsageGuidelines〞(page72)

AllAppsNeedatLeastSomeCustomArtwork

Evenifyourappenablesaserious,productivetaskandusesonlystandarduserinterfaceelements,youstillneedtoprovideabeautiful,customappiconthatpeoplewillenjoyseeingintheAppStoreandontheirHomescreens.Whetheryourappincludessignificantamountsofcustomartwork,oronlyalittle,youneedtoknowwhichiconsandimagesarerequiredandhowtocreatethemappropriately.Inaddition,ifyou’redesigningartworkfortheRetinadisplay,youcanlearnsometechniquesthatcanmakethisprocesseasier.

RelevantChapter“CustomIconandImageCreationGuidelines〞(page160)

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

PlatformCharacteristics

iOS-baseddevicesshareseveraluniquecharacteristicsthatinfluencetheuserexperienceofallapplicationsthatrunonthem.Themostsuccessfulappsembracethesecharacteristicsandprovideauserexperiencethatintegrateswiththedevicethey’rerunningon.

TheDisplayIsParamount,RegardlessofItsSize

ThedisplayofaniOS-baseddeviceisattheheartoftheuser’sexperience.Notonlydopeopleviewbeautifultext,graphics,andmediaonthedisplay,theyalsophysicallyinteractwiththeMulti-Touchscreentodrivetheirexperience(evenwhentheycan’tseethescreen).

Althoughdisplaysofdifferentdimensionsandresolutionscanhavedifferenteffectsonuserexperiencewithanapp,someeffectsapplytoalliOS-baseddevices:

●ThecomfortableminimumsizeoftappableUIelementsis44x44points.

Thequalityofappartworkisveryapparent.

Theuser’sfocusisonthecontent.●●

iOS-baseddeviceshavethefollowingscreensizes:

Table1-1

DeviceScreensizesofiOS-baseddevicesPortraitLandscape

iPhone4

iPad

OtheriPhoneandiPodtouchdevices640x960pixels768x1024pixels320x480pixels960x640pixels1024x768pixels480x320pixels

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

PlatformCharacteristics

DeviceOrientationCanChange

NotePixelistheappropriateunitofmeasurementtousewhendiscussingthesizeofadevice

screenorthesizeofaniconyoucreateinanimage-editingapplication.Pointistheappropriateunit

ofmeasurementtousewhendiscussingthesizeofanareathatisdrawnonscreen.

Onastandard-resolutiondevicescreen,onepointequalsonepixel,butotherresolutionsmight

dictateadifferentrelationship.OnaRetinadisplay,forexample,onepointequalstwopixels.

See“PointsVersusPixels〞inViewProgrammingGuideforiOSforacompletediscussionofthisconcept.

DeviceOrientationCanChange

PeoplecanrotateiOS-baseddevicesatanytimeandforavarietyofreasons.Forexample,sometimesthetaskpeopleareperformingfeelsmorenaturalinportrait,andsometimespeoplefeelthattheycanseemoreinlandscape.Whatevertheirreasonforrotatingthedevice,peopleexpecttheapptomaintainitsfocusontheprimaryfunctionality.

PeopleoftenlaunchappsfromtheHomescreen,sotheytendtoexpectallappstostartinthesameorientation.BecauseofthedifferentwaysiPhoneandiPaddisplaytheHomescreen,thisexpectationaffectsappsindifferentways:

●OniPhoneandiPodtouch,theHomescreenisdisplayedinoneorientationonly,whichisportrait,with

theHomebuttonatthebottom.ThisleadsuserstoexpectiPhoneappstolaunchinthisorientationbydefault.

OniPad,theHomescreenisdisplayedinallorientations,souserstendtoexpectiPadappstolaunchinthedeviceorientationthey’recurrentlyusing.●

AppsRespondtoGestures,NotClicks

Peoplemakespecificfingermovements,calledgestures,tooperatetheuniqueMulti-TouchinterfaceofiOS-baseddevices.Forexample,peopletapabuttontoactivateit,flickordragtoscrollalonglist,orpinchopentozoominonanimage.

TheMulti-Touchinterfacegivespeopleasenseofimmediateconnectionwiththeirdevicesandenhancestheirsenseofdirectmanipulationofonscreenobjects.

Peoplearecomfortablewiththestandardgesturesbecausethebuilt-inapplicationsusethemconsistently.Theirexperienceusingthebuilt-inappsgivespeopleasetofgesturesthattheyexpecttobeabletousesuccessfullyinmostotherapps.

iOS人机交互规范,为iPhone,iPad开发人员提供设计规范

PlatformCharacteristics

PeopleInteractwithOneAppataTime

Table1-2

GestureGesturesusersmaketointeractwithiOS-baseddevicesAction

Tap

DragTopressorselectacontroloritem(analogoustoasinglemouseclick).Toscrollorpan(thatis,movesidetoside).

Todraganelement.

Flick

SwipeToscrollorpanquickly.Withonefinger,torevealtheDeletebuttoninatable-viewrowortoreveal

Not