iOS-人机界面指南

Embracesimplicity

Provideasinglefocuspoint

Designarecognizableicon

Keepthebackgroundsimpleandavoidtransparency

Usewordsonlywhenthey’reessentialorpartofalogo

Don’tincludephotos,screenshots,orinterfaceelements

AppIcon

Don’tusereplicasofApplehardwareproducts

Don’tplaceyourappiconthroughouttheinterface

Testyouriconagainstdiferentwallpapers

Keepiconcornerssquare

Providediferentsizedsmalliconsfordiferentdevices

Mimicyoursmallappiconwithyourlargeappicon

Don’taddanoverlayorbordertoyourSettingsicon

Createsimple,recognizabledesigns

Graphics

Designasolidcoloriconwithtransparency,antialiasing,andnodropshadow

Distinguishyourcustomiconfromthesystemicons

ClarityDeference

Depth

AestheticIntegrity

DesignPrinciplesConsistency

DirectManipulation

Keepyouriconsconsistent

CustomIcons

Providetwoversionsofcustomtabbaricons

Don’tusetextinacustomtabbaricon

Don’tusereplicasofApplehardwareproducts

Providealternativetextlabelsforicons

Youmustsupplyhigh-resolutionimagesforallartworkinyourappImageSizeandResolution

Feedback

Designalaunchscreenthat’snearlyidenticaltothefirstscreenofyourapp

Metaphors

overview

UserControl

Avoidincludingtextonyourlaunchscreen

LaunchScreen

WidgetsontheSearchscreenandHomescreen

IntegrationwithMessages

Downplaylaunch

Don’tadvertise

What'sNewiniOS10

IntegrationwithSiri

ExpandedNotifications

Bars

Providealternativetextlabelsforicons

NavigationBarandToolbarIcons

SystemIcons

TabBarIcons

QuickActionIcons

InterfaceEssentialsViews

Controls

Usepeekingtoprovidelive,content-richpreviews

Designbig-enoughpeekviews

AdoptPeekandPopconsistently

Alloweverypeektobepopped

Considershowingthetitleofthecurrentviewinthenavigationbar

Considerputtingasegmentedcontrolinanavigationbaratthetoplevelofanapp

Avoidcrowdinganavigationbarwithtoomanycontrols

NavigationBars

Don’tincludemultisegmentbreadcrumbpaths

Givetext-titledbuttonsenoughroom

3DTouch

Avoiddisplayingbutton-likeelementsinapeekview

Don’tenablepeekingandaneditmenuforthesameitem

Provideactionbuttonswhenappropriate

Avoidprovidinganactionbuttonthatopensapeekeditem

Don’tmakepeektheonlywaytoperformitemactions

Providealternativetextlabelsforimages,icons,andinterfaceelements

Considertemporarilyhidingthenavigationbarwhendisplayingfull-screencontent

Usethestandardbackbutton

Useasearchbarratherthanatextfieldtoimplementsearch

EnabletheClearandCancelbuttons

Pickasearchbarstylethatreflectstheimportanceofsearchinyourapp

Respondtoaccessibilitypreferences

Ifnecessary,providehintsandcontextinasearchbarSearchBars

Considerprovidinghelpfulshortcutsandothercontentbelowasearchbar

Accessibility

TestyourappwithaccessibilityfeaturesIncludeclosedcaptionsandaudiodescriptions

AddtheBookmarkorResultsListbuttonifitmakessenseinyourapp

Adjustlevelsautomaticallywhennecessary,butnottheoverallvolumePermitreroutingofaudiowhenappropriate

Usethesystem-providedvolumeviewtoallowaudioadjustmentsUsethesystem’ssoundservicesforshortsoundsandvibrations

Favorimprovingsearchresultsoverincludingascopebar

Usethesystem-providedstatusbar

UIBars

Coordinatethestatusbarstylewithyourappdesign

Obscurecontentunderthestatusbar

StatusBars

Soloambient

Considertemporarilyhidingthestatusbarwhendisplayingfull-screenmedia

Avoidpermanentlyhidingthestatusbar

Communicatelengthynetworkactivityinthestatusbar

Ambient

Audio(Silence,Volume,Headphones)CategorizeyouraudioifsoundisessentialtoyourappPlayback

Record

PlayandrecordResumeaudioplaybackwhenappropriateafteraninterruptionoccurs

TabBars

Ingeneral,useatabbartoorganizeinformationattheapplevel

Don’tremoveordisableatabwhenitsfunctionisunavailable

Useatabbarstrictlyfornavigation

LetotherappsknowwhenyourappfinishesplayingtemporaryaudioRespondtoaudiocontrolsonlywhenitmakessense

Avoidhavingtoomanytabs

Usebadgingtocommunicateunobtrusively

Alwaysswitchcontextsintheattachedview

Don’trepurposeaudiocontrolsDelaysign-inaslongaspossible

Toolbars

ExplainthebenefitsofauthenticationandhowtosignupforyourserviceMinimizedataentrybyshowingappropriatekeyboards

Whenpossible,presentchoices

Getinformationfromthesystemwheneverpossible

Providereasonabledefaultvalues

Providerelevanttoolbarbuttons

Considerwhethericonsortext-titledbuttonsarerightforyourapp

Avoidusingasegmentedcontrolinatoolbar

Authentication

Givetext-titledbuttonsenoughroom

ActionSheets

ProvideaCancelbuttonifitaddsclarity

Makedestructivechoicesprominent

Avoidenablingscrollinginanactionsheet

Enableadvancementonlyaftercollectingrequiredvalues

DataEntry

Dynamicallyvalidatefieldvalues

ActivityViews

Designsimpletemplateimagestorepresentyourcustomactivities

Craftactivitytitlesthatsuccinctlydescribeyourtasks

Requirefieldvaluesonlywhennecessary

Easenavigationthroughvaluelists

Showahintinatextfieldtohelpcommunicatepurpose

UnobtrusivelyintegratestatusandothertypesoffeedbackintoyourinterfaceAvoidunnecessaryalerts

Notification

Makesureactivitiesareappropriateforthecurrentcontext

UsetheActionbuttontodisplayanactivityview

Minimizealerts

Testtheappearanceofalertsinbothorientations

Writeshort,descriptive,multiwordalerttitles

Ifyoumustprovideamessage,writeshort,completesentences

Avoidsoundingaccusatory,judgmental,orinsultingAvoidexplainingthealertbuttons

AlertTitlesandMessages

HapticFeedbackImpact

Alerts

Selection

Usehapticjudiciously

Ingeneral,providehapticfeedbackinresponsetouser-initiatedactionsDon’tredefinefeedbacktypes

Finetuneyourvisualexperienceforhaptic

Don’trelyonasinglemodeofcommunication

Usehapticwhenvisualfeedbackmaybeoccluded

Preparethesystembeforeinitiatingfeedback

Synchronizehapticwithaccompanyingsound

Instillconfidencethatworkisalwayspreservedunlesscanceledordeleted

Generally,usetwo-buttonalerts

Givealertbuttonssuccinct,logicaltitles

Feedback

AlertButtons

Placebuttonswherepeopleexpectthem

Labelcancellationbuttonsappropriately

Identifydestructivebuttons

AllowtheHomebuttontocancelalerts

Collections

Avoidcreatingradicalnewdesignswhenastandardroworgridlayoutissufficient

Considerusingatableinsteadofacollectionfortext

Usecautionwhenmakingdynamiclayoutchanges

ImageViews

Maps

Don'tprovideanoptiontocreatelocal-onlyfiles

ImplementanintuitiveandgraphicalfilebrowsinginterfaceLetuserspreviewfileswithoutleavingyourapp

Whenappropriate,sharefileswithotherapps

Providealaunchscreen

LaunchintheappropriateorientationGettotheactionquicklyAnticipatetheneedforhelp

Sticktotheessentialsintutorials

Ifpossible,ensurethatallimageswithinanimageviewareconsistentlysized

Ingeneral,keepyourmapinteractive

FileHandling

Useexpectedpincolors

Ifappropriate,implementawaytonavigatenonlinearlyPages

UseaClosebuttonforconfirmationandguidanceonly

UIViews

Alwayssaveworkwhenautomaticallyclosingapopover

Positionpopoversappropriatelyonscreen

Showonepopoveratatime

Popovers

Interaction

Makelearningfunanddiscoverable

Avoidaskingforsetupinformationupfront

Avoidshowingin-applicensingagreementsanddisclaimersRestorethepreviousstatewhenyourapprestarts

Don’taskpeopletorateyourapptooquicklyortoooften

FirstLaunchExperience

Don’tshowanotherviewoverapopover

Whenpossible,letuserscloseonepopoverandopenanotherwithasingletap

Avoidmakingapopovertoobig

Makesurecustompopoverslooklikepopovers

Provideasmoothtransitionwhenchangingthesizeofapopover

Supportzoombehaviorappropriately

Don’tencouragerebooting

Tap,Drag,Flick,Swipe,Doubletap,Pinch,Touchandhold,Shake

ScrollViews

Considershowingapagecontrolelementwhenascrollviewisinpagingmode

Asageneralrule,usestandardgestures

Don’tblocksystemwidegestures

Don’tplaceascrollviewinsideofanotherscrollview

Ingeneral,displayonescrollviewatatime

Gestures

Avoidusingstandardgesturestoperformnonstandardactions

Ofershortcutgesturestosupplement,notreplace,interface-basednavigationandactionsUsemultifingergesturestoenhancetheexperienceofsomeapps

Makeitclearwhenloadingisoccurring

Educateorentertainpeopletomaskloadingtime

SplitViews

Chooseasplit-viewlayoutthatworkswellwithyourcontent

Persistentlyhighlighttheactiveselectionintheprimarypane

Ingeneral,restrictnavigationtoonesideofasplitview

Providemultiplewaystoaccessahiddenprimarypane

Thinkabouttablewidth

Loading

Customizeloadingscreens

Showcontentassoonaspossible

Minimizetheuseofmodality

Provideanobviousandsafewaytoexitamodaltask

Keepmodaltaskssimple,short,andnarrowlyfocused

Displayatitlethatidentifiesatask,ifappropriate Reservealertsfordeliveringessential—andideallyactionable—information Respectnotificationpreferences

Beginshowingtablecontentquickly

Communicateprogressascontentloads

Keepcontentfresh

Tables(Plain,Grouped)

Avoidcombininganindexwithtablerowscontainingright-alignedelements

Keeptextsuccincttoavoidclipping

ConsiderusingacustomtitleforaDeletebutton

Providefeedbackwhenaselectionismade

Designacustomtablecellstylefornonstandardtablerows

TextViews

ModalityDon’tdisplayamodalviewaboveapopover

Coordinatemodalviewappearancewithyourapp

Keeptextlegible

Showtheappropriatekeyboardtype

WebViews

Enableforwardandbacknavigationwhenappropriate

Avoidusingawebviewtobuildawebbrowser

Fullscreen

Pagesheet

Useverbsintitles

Chooseanappropriatemodalviewstyle

FormsheetCurrentcontext

Chooseanappropriatetransitionstyleforrevealingamodalview

Hierarchicalnavigation

Flatnavigation

Content-drivenorexperience-drivennavigation

Alwaysprovideaclearpath

Designaninformationstructurethatmakesitfastandeasytogettocontent

Usetitle-casefortitles

SystemButtons

Buttons

Keeptitlesshort

Consideraddingaborderorabackgroundonlywhennecessary

iOSHumanInterfaceGuidelines

UseDetailDisclosurebuttonsappropriatelyintablesDetailDisclosureButtons

AnInfobuttonrevealsconfigurationdetailsaboutanapp,sometimesonthebackofthecurrentviewInfoButtons

AllowkeyboardentryinadditiontotheAddContactbuttonAddContactButtons

Navigation

Usetouchgesturestocreatefluidity

Usestandardnavigationcomponents

Useanavigationbartotraverseahierarchyofdata

Useatabbartopresentpeercategoriesofcontentorfunctionality

Useapagecontrolwhenyouhavemultiplepagesofthesametypeofcontent Requestpersonaldataonlywhenyourappclearlyneedsit

Explainwhyyourappneedstheinformationifit’snotobvious

Showappropriatecommandsforthecurrentcontext

Letpeopleusethestandardgesturestoaccesseditoptions

Adjustplacementofeditoptions,ifnecessary

Don’timplementothercontrolswiththesamefunctionalityastheeditmenu

EditMenus

Allowpotentiallyusefulnoneditabletexttobeselectedandcopied

Don’taddeditoptionstoabutton

Makeeditoperationsundoable

RequestingPermission

Requestpermissionatlaunchonlywhennecessaryforyourapptofunction

Expandeditoptionswithusefulcustomcommands

Showcustomcommandsafterthesystem-providedones

Minimizethenumberofcustomcommands

Don’trequestlocationinformationunnecessarily Inferwhatyoucanfromthesystem

Keepcustomcommandnamesshort

KeeplabelslegibleLabels

Thoughtfullyprioritizeconfigurationoptionswithinyourapp

Don’tuseapagecontrolwithhierarchicalpages

PageControls

Settings

ProvideshortcutstoSettingswhenappropriate

ExposeinfrequentlychangedconfigurationoptionsinSettings

Don’tdisplaytoomanypages

Centerpagecontrolsatthebottomofthescreen

Usefamiliar,understandablewordsandphrasesKeepinterfacetextclearandconcise

Avoidlanguagethatmightsoundpatronizing

Usepredictableandlogicallyorderedvalues

Pickers

Avoidswitchingscreenstoshowapicker

Useatableinsteadofapickerforlargevaluelists

Date

Striveforaninformal,friendlytone

Pickers

Terminology

Time

Becarefulwhenusinghumor

Userelevantandconsistentlanguageandimagery

UIControls

Refertodatesaccurately

Identifyinteractiveelementsappropriately

Brieflyandpreciselydescribetheoperationtobeundoneorredone

DateandtimeDatePickers

Countdowntimer

Considerprovidinglessgranularitywhenspecifyingminutes

ActivityIndicators

Ifyouusetheshakegestureforundoandredo,don’tuseitforotheractions

Favorprogressbarsoveractivityindicators

Keepactivityindicatorsmoving

UndoandRedo

Provideundoandredobuttonssparingly

Performundoandredooperationsinthecurrentcontextonly

Ifit’shelpful,provideusefulinformationwhilewaitingforatasktocomplete

Alwaysreportprogressaccurately

ProgressIndicators

Bepreparedforinterruptions,andbereadytoresumeMakesureyourinterfaceworkswithadouble-highstatusbar

ProgressBars

Pauseactivitythatrequiresattentionoractiveparticipation

Useprogressbarsfortaskswithawell-definedduration

Hidetheunfilledportionoftrackinnavigationbarsandtoolbars

Considercustomizingaprogressbar’sappearancetomatchyourapp

Multitasking

Respondappropriatelytoexternalaudio

Considercustomizingaprogressbar’sappearancetomatchyourappNetworkActivityIndicators

Finishuser-initiatedtasksinthebackground

RefreshContentControls

SegmentedControls

Performautomaticcontentupdates

Usenotificationssparingly

Provideuseful,informativenotifications

Supplyashorttitleonlyifitaddsvalue

Limitthenumberofsegmentstoimproveusability

Don’tsendmultiplenotificationsforthesamething,eveniftheuserhasn'tresponded

Trytokeepsegmentcontentsizeconsistent

Don’tincludeyourappnameoricon

Usebadgingtosupplementnotifications,nottodenotecriticalinformation

Avoidmixingtextandimagesinasegmentedcontrol

Positioncontentappropriatelyinacustomasegmentedcontrol

Notifications(Banner,Alert)Keepbadgesuptodate

Sliders

Provideasoundtosupplementyournotifications

Customizeaslider’sappearanceifitaddsvalue

Don’tuseaslidertoadjustaudiovolume

Considerprovidingadetailview

Provideintuitive,beneficialactions

AvoidprovidingdestructiveactionsMakeprintingdiscoverable

Makethevalueafectedbythestepperobvious

Steppers

Don’tuseastepperwhenlargevaluechangesarelikely

Consideradjustingaswitch’sappearancetomatchthestyleofyourapp

Useswitchesintablerowsonly

Switches

PrintingEnableprintingonlywhenit'spossibletoprintProvideprintingoptionsthataddvalue

Avoidaddinglabelstodescribethevaluesofaswitch

Considerusingswitchestomanagetheavailabilityofrelatedinterfaceelements

FeaturesQuickLookPresentpreviewsappropriatelyforthecurrentcontextAudioandvideocallingapps

Showahintinatextfieldtohelpcommunicatepurpose

Usesecuretextfieldswhenappropriate

TextFields

Showtheappropriatekeyboardtype

Messagingapps

Appsthatoferpaymentservices

TasksAppsthatmanagephotos

Useimagesandbuttonstoprovideclarityandfunctionalityintextfields

DisplayaClearbuttonintherightendofatextfieldwhenappropriate

Appsthatofertransportationservices

Appsthatoferfitnessactivities

AutomotivevendorsthatintegratewithCarPlay

Striveforavoice-drivenexperiencethatdoesn’trequiretouchingorlookingatthescreen

Makesureyoureallyneedacustomkeyboard

CustomKeyboards

Provideanobviousandeasywaytoswitchbetweenkeyboards

Considerprovidingakeyboardtutorialinyourapp

Makefunctionalityobvious

Respondquicklyandminimizeinteraction

Playthestandardkeyboardclicksoundduringtyping

Siri

Takepeopledirectlytocontent

Berelevant,accurate,andappropriate

Defaulttothesafestandleastexpensiveoption

Increaseaccuracywithcustomvocabulary

Provideexamplerequests

MakesureyourcustominterfaceintegrateswellwithSiriDon’tincludeyourappnameoriconinyourcustominterfaceDon’tadvertise

Don’tattempttomimicormanipulateSiri Useanimationandmotionefectsjudiciously

Striveforrealismandcredibility

Provideaninputaccessoryviewifnecessary

DocumentProviders

Whenusersopenorimportfiles,showonlycontext-specificdocumentsandinformation

Letpeopleselectadestinationwhenexportingandmovingdocuments

Don’tprovideacustomnavigationbar

Createquickactionsforcompelling,high-valuetasks

Avoidusingquickactionstoeasenavigation

HomeScreenActions

Avoidmakingunpredictablechangestoquickactions

Provideasuccincttitleforeachquickaction

Don’tusequickactionsfornotification

Providearecognizableiconforeachquickaction

Animation

Useconsistentanimation

Makeanimationsoptional

Incorporaterefined,unobtrusivebranding

Don’tletbrandinggetinthewayofgreatappdesign

Don'tuseanemojiinplaceofanicon

Designanintuitiveinterface

Providefocusedcontent

iMessageApps

Provideafun,collaborativeexperience

HighlightinterestingiOSappcontent

BrandingDefertocontentoverbranding

ResistthetemptationtodisplayyourlogothroughoutyourappAdheretoApple'strademarkguidelines

Usecomplementarycolorsthroughoutyourapp

Considerchoosingakeycolortoindicateinteractivitythroughoutyourapp Ingeneral,choosealimitedcolorpalettethatcoordinateswithyourapplogo Applycolorprofilestoyourimages

Usewidecolortoenhancethevisualexperienceoncompatibledevices

Insetcontenttoavoidcropping

Diferentiatecompactandexpandedviews

Allowtexteditingintheexpandedviewonly

Designforexpressiveness

Thinkglobally

Messaging

Usedescriptiveimagenamesorprovidealternativetextlabels

Addvitalitythroughanimation

StickersExtensions

Testplacementpossibilities

Color

AvoidusingthesamecolorforinteractiveandnoninteractiveelementsTestyourapp’scolorschemeunderavarietyoflightingconditionsConsiderhowtheTrueTonedisplayafectscolor

Beawareofcolorblindnessandhowdiferentculturesperceivecolor

Considerusingvibrantcolorsandtransparency

Scalestickersappropriately

Bemindfuloffilesizerestrictions

Keepthebackgroundsimpleandprovideasinglefocuspoint

VisualDesignUsesufficient