Adaptivitate și aspect
oamenii doresc, în general, să poată utiliza aplicațiile preferate pe toate dispozitivele lor și în orice context. Într-o aplicație iOS, puteți configura elemente de interfață și machete pentru a schimba automat forma și dimensiunea pe diferite dispozitive, în timpul multitasking pe iPad, în split view, când ecranul se rotește și multe altele. Este important să proiectați o interfață adaptabilă care să ofere o experiență excelentă în orice mediu.,dispozitivele iOS au o varietate de dimensiuni de ecran și pot fi utilizate fie în orientarea portret, fie în peisaj. În dispozitivele edge-to-edge, cum ar fi iPhone X și iPad Pro, ecranul are colțuri rotunjite care se potrivesc îndeaproape cu dimensiunile generale ale dispozitivului. Alte dispozitive — cum ar fi iPhone SE și iPad Air — au un ecran dreptunghiular.dacă aplicația dvs. rulează pe un anumit dispozitiv, asigurați-vă că rulează pe fiecare dimensiune a ecranului pentru dispozitivul respectiv. Cu alte cuvinte, o aplicație numai pentru iPhone trebuie să ruleze pe fiecare dimensiune a ecranului iPhone și o aplicație numai pentru iPad trebuie să ruleze pe fiecare dimensiune a ecranului iPad.,
notă toți factorii de scară din tabelul de mai sus sunt factori de scară UIKit, care pot diferi de factorii de scară nativi. Pentru îndrumări pentru dezvoltatori, consultați scale și nativeScale.pentru a afla cum rezoluția ecranului influențează opera de artă a aplicației, consultați dimensiunea și rezoluția imaginii.Auto Layout este un instrument de dezvoltare pentru construirea interfețelor adaptive. Folosind aspectul automat, poți defini reguli (cunoscute sub numele de constrângeri) care guvernează conținutul din aplicație., De exemplu, puteți constrânge un buton astfel încât să fie întotdeauna centrat orizontal și poziționat la opt puncte sub o imagine, indiferent de spațiul disponibil pe ecran.
Layout Auto reglează automat machete potrivit specificată de constrângeri atunci când anumite variațiile de mediu (cunoscut sub numele de trăsături) sunt detectate.,în mod tradițional se adapteze la o gamă largă de caracteristici, inclusiv:
- Diferite dimensiuni de ecran dispozitiv, rezoluții, și de culoare gamuts (sRGB/P3)
- Diferite orientările de dispozitiv (portret/peisaj)
- Split view
- Multitasking moduri de pe iPad-ul
- Dinamica de Tip text-modificări de dimensiune,
- Internaționalizare caracteristici care sunt activate în funcție de localizare (de la stânga la dreapta/de la dreapta la stânga layout direction, data/timp/numărul de formatare, font variație, lungimea textului)
- Sistemul funcție de disponibilitate (3D Touch)
Pentru producător de orientare, a se vedea Auto Layout Ghid și UITraitCollection.,
ghiduri de aspect și zonă sigură
ghidurile de aspect definesc regiuni dreptunghiulare care nu apar de fapt vizibil pe ecran, dar ajută la poziționarea, alinierea și spațierea conținutului. Sistemul include ghiduri de aspect predefinite care facilitează aplicarea marjelor standard în jurul conținutului și restricționează lățimea textului pentru o lizibilitate optimă. De asemenea, puteți defini ghiduri de aspect personalizate.,
să Adere la zona de siguranță și aspect margini definite de UIKit. Aceste ghiduri de aspect asigură o introducere adecvată în funcție de dispozitiv și context. Zona de siguranță împiedică, de asemenea, conținutul să subestimeze bara de stare, bara de navigare, bara de instrumente și bara de file., Vizualizările standard furnizate de sistem adoptă automat un ghid de aspect al zonei sigure.
Pentru producător de orientare, a se vedea UILayoutGuide, layoutMarginsGuide, readableContentGuide, și safeAreaLayoutGuide.
clasele de mărime
clasele de mărime sunt trăsături care sunt atribuite automat zonelor de conținut în funcție de dimensiunea lor. Sistemul definește două clase de dimensiuni, regulate (denotă spațiu expansiv) și compacte (denotă spațiu constrâns), care descriu înălțimea și lățimea unei vederi.,
Un punct de vedere poate poseda orice combinație de clasele de mărime:
- Regulate lățime, înălțime regulat
- Compact lățime, compact înălțime
- Regulate lățime, compact înălțime
- Compact lățime, înălțime regulat
cu alte variațiile de mediu, iOS dinamic face ajustări aspect bazat pe clase de mărime, de o zona de conținut. De exemplu, atunci când clasa de dimensiuni verticale se schimbă de la înălțimea compactă la înălțimea obișnuită — poate pentru că utilizatorul a rotit dispozitivul de la orientarea peisaj la portret — barele de file pot deveni mai înalte.,
clase de dimensiuni dispozitiv
diferite combinații de clase de dimensiuni se aplică experienței pe ecran complet pe diferite dispozitive, în funcție de dimensiunea ecranului.
| Dispozitiv | orientarea Portret | orientarea Peisaj |
|---|---|---|
| 12.,9″ iPad Pro | Regulate lățime, înălțime regulat | Regulate lățime, înălțime regulat |
| 11″ iPad Pro | Regulate lățime, înălțime regulat | Regulate lățime, înălțime regulat |
| 10.5″ iPad Pro | Regulate lățime, înălțime regulat | Regulate lățime, înălțime regulat |
| 9.7″ iPad | Regulate lățime, înălțime regulat | Regulate lățime, înălțime regulat |
| 7., lățime, înălțime regulat | Regulate lățime, compact înălțime | |
| iPhone 6s | Compact lățime, înălțime regulat | Compact lățime, compact înălțime |
| iPhone SE | Compact lățime, înălțime regulat | Compact lățime, compact înălțime |
| iPod touch 5-a generație și mai târziu | Compact lățime, înălțime regulat | Compact lățime, compact înălțime |
Multitasking Clase de Mărime,
Pe iPad, clase de mărime, de asemenea, se aplică atunci când aplicația se execută într-un multitasking de configurare.,
2/3 split view
1/2 split view
1/3 split view
| Device | Mode | Portrait orientation | Landscape orientation |
|---|---|---|---|
| 12.,ht | |||
| 1/2 split view | N/A | Regular width, regular height | |
| 1/3 split view | Compact width, regular height | Compact width, regular height | |
| 11″ iPad Pro | 2/3 split view | Compact width, regular height | Regular width, regular height |
| 1/2 split view | N/A | Compact width, regular height | |
| 1/3 split view | Compact width, regular height | Compact width, regular height | |
| 10.,5″ iPad Pro | 2/3 split view | Compact width, regular height | Regular width, regular height |
| 1/2 split view | N/A | Compact width, regular height | |
| 1/3 split view | Compact width, regular height | Compact width, regular height | |
| 9.,7″ iPad | 2/3 split view | Compact width, regular height | Regular width, regular height |
| 1/2 split view | N/A | Compact width, regular height | |
| 1/3 split view | Compact width, regular height | Compact width, regular height | |
| 7.,9″ iPad mini 4 | 2/3 split view | Compact lățime, înălțime regulat | Regulate lățime, înălțime regulat |
| 1/2 split view | N/a | Compact lățime, înălțime regulat | |
| 1/3 split view | Compact lățime, înălțime regulat | Compact lățime, înălțime regulat |
General Considerente de Aspect
a se Asigura că conținutul principal este clar la dimensiunea implicită., Oamenii nu ar trebui să deruleze orizontal pentru a citi text important sau să facă zoom pentru a vedea imaginile primare, cu excepția cazului în care aleg să modifice dimensiunea.mențineți un aspect general consecvent în întreaga aplicație. În general, elementele cu funcții similare ar trebui să arate similar.utilizați greutatea vizuală și echilibrul pentru a transmite importanța. Obiectele mari atrag atenția și par mai importante decât cele mai mici. Articolele mai mari sunt, de asemenea, mai ușor de atins, ceea ce este deosebit de important atunci când o aplicație este utilizată în împrejurimi care distrag atenția, cum ar fi în bucătărie sau într-o sală de gimnastică., În general, așezați elementele principale în jumătatea superioară a ecranului și — într-un context de citire de la stânga la dreapta-lângă partea stângă a ecranului.
utilizați aliniere pentru a ușura scanarea și pentru a comunica organizarea și ierarhia. Alinierea face ca o aplicație să arate îngrijită și organizată, îi ajută pe oameni să se concentreze în timp ce derulează și facilitează găsirea informațiilor. Indentarea și alinierea pot indica, de asemenea, modul în care sunt legate grupurile de conținut.dacă este posibil, sprijiniți atât orientarea portret, cât și cea peisaj., Oamenii preferă să utilizeze aplicații în orientări diferite, așa că este mai bine atunci când puteți îndeplini această așteptare.
fiți pregătiți pentru modificările dimensiunii textului. Oamenii se așteaptă ca majoritatea aplicațiilor să răspundă atunci când aleg o dimensiune diferită a textului în Setări. Pentru a adapta unele modificări ale dimensiunii textului, poate fi necesar să ajustați aspectul. Pentru mai multe informații despre utilizarea textului în aplicație, consultați Tipografia.
sunt suficiente pentru a atinge obiectivele de elemente interactive., Încercați să mențineți o suprafață minimă de 44pt x 44pt pentru toate comenzile.
de 4,7″ iPhone
5.8″ iPhone
Previzualiza aplicația pe mai multe dispozitive. Deși în general este mai bine să previzualizați funcții precum imagini color largi pe dispozitive reale, puteți utiliza Simulator (inclus cu Xcode) pentru a verifica dacă există probleme de tăiere și alte aspecte., De exemplu, dacă aplicația dvs. acceptă modul peisaj, puteți utiliza Simulator pentru a vă asigura că machetele dvs. arată excelent, indiferent dacă dispozitivul se rotește la stânga sau la dreapta.notă în mod implicit, controlerele de vizualizare acceptă toate orientările pe iPad și toate orientările, cu excepția portretului invers pe iPhone (pentru îndrumări pentru dezvoltatori, consultați supportedInterfaceOrientations). Unele dispozitive, cum ar fi iPhone X, nu acceptă modul portret cu susul în jos, indiferent dacă aplicația îl acceptă.
aplicați marjele de lizibilitate atunci când afișați text pe dispozitive mai mari., Aceste margini păstrează liniile de text suficient de scurte pentru a asigura o experiență de lectură confortabilă.
adaptarea la schimbările din Context
menține accentul pe conținutul curent în timpul schimbărilor de context. Conținutul este cea mai mare prioritate. Schimbarea focalizării atunci când mediul se schimbă poate fi dezorientantă și frustrantă și îi poate face pe oameni să simtă că au pierdut controlul aplicației.
evitați modificările gratuite ale aspectului. Când cineva rotește un dispozitiv, întregul aspect nu trebuie să se schimbe., De exemplu, dacă aplicația afișează o grilă de imagini în modul portret, nu trebuie să prezinte aceleași imagini ca o listă în modul peisaj. În schimb, s-ar putea ajusta pur și simplu dimensiunile grilei. Încercați să mențineți o experiență comparabilă în toate contextele.dacă este esențial ca aplicația să ruleze doar în peisaj, acceptă ambele variante. Aplicația dvs. numai pentru peisaj ar trebui să funcționeze la fel de bine dacă oamenii își rotesc dispozitivul spre stânga sau spre dreapta. Nu le spune oamenilor să-și rotească dispozitivul atunci când folosesc aplicația., Dacă aplicația nu se rotește automat atunci când cineva ține dispozitivul într-o orientare neacceptată, va ști instinctiv să îl rotească.Personalizați răspunsul aplicației la rotație în funcție de context. Un joc care permite oamenilor să mute un personaj prin rotirea dispozitivului, de exemplu, probabil nu ar trebui să schimbe orientările în timpul jocului. Cu toate acestea, ar putea afișa meniuri și secvențe de intro bazate pe orientarea curentă.
scopul de a sprijini atât iPad și iPhone. Oamenii apreciază că au flexibilitatea de a rula aplicația pe orice tip de dispozitiv iOS., Dacă anumite caracteristici ale aplicației dvs. necesită hardware specific iPhone — cum ar fi telefonia — luați în considerare Ascunderea sau dezactivarea acestor funcții pe iPad și lăsarea utilizatorilor să utilizeze celelalte funcții ale aplicației.
Full-ecran 4.7″ dispozitiv de imagine
Decupare pe 5.8″ dispozitiv
Letterboxing pe 5.8″ dispozitiv
ecran Complet 5.,8″ dispozitiv de imagine
Decupare pe un 4.7″ dispozitiv
Pillarboxing pe un 4.7″ dispozitiv
Fie conștient de raportul de aspect diferențe atunci când reutilizarea existente opera de arta. Diferite dimensiuni de ecran pot avea diferite rapoarte de aspect, provocând opera de arta a apar trunchiate, letterbox, sau pillarboxed. Asigurați-vă că conținutul vizual important rămâne vizibil pe toate dimensiunile afișajului.
proiectarea unei experiențe pe ecran complet
extindeți elementele vizuale pentru a umple ecranul., Asigurați-vă că fundalurile se extind până la marginile afișajului și că machetele derulabile vertical, cum ar fi tabelele și colecțiile, continuă până în partea de jos.evitați plasarea explicită a comenzilor interactive chiar în partea de jos a ecranului și în colțuri. Utilizatorii folosesc gesturi de glisare în marginea de jos a afișajului pentru a accesa funcții precum ecranul de pornire și comutatorul de aplicații, iar aceste gesturi pot anula gesturi personalizate pe care le implementați în această zonă. Colțurile îndepărtate ale ecranului pot fi zone dificile pentru ca oamenii să ajungă confortabil.,
introduceți conținutul esențial pentru a preveni tăierea. În general, conținutul trebuie să fie centrat și introdus simetric, astfel încât să arate excelent în orice orientare, să nu fie tăiat de colțuri rotunjite, să nu fie ascuns de o carcasă a senzorului și să nu fie ascuns de indicatorul pentru accesarea ecranului de pornire. Pentru cele mai bune rezultate, utilizați elemente de interfață standard, furnizate de sistem și aspect automat pentru a vă construi interfața și a adera la Ghidurile de aspect și zona sigură definită de UIKit., Atunci când dispozitivul se află în orientare peisaj, poate fi potrivit pentru unele aplicații — cum ar fi Jocurile — să plaseze controale tappable în partea inferioară a ecranului (care se extinde sub zona sigură) pentru a permite mai mult spațiu pentru conținut. Utilizați inserții potrivite atunci când plasați comenzi în partea de sus și de jos a ecranului și lăsați un spațiu amplu în jurul indicatorului de acasă, astfel încât oamenii să nu-l vizeze accidental atunci când încearcă să interacționeze cu un control. Deoarece indicatorul de pornire rămâne centrat pe ecran, locația sa în raport cu interfața aplicației se poate schimba.,
Insertie full-lățime butoane. Este posibil ca un buton care se extinde până la marginile ecranului să nu semene cu un buton. Respectați marginile standard UIKit de pe părțile laterale ale butoanelor cu lățime completă. Un buton cu lățime completă care apare în partea de jos a ecranului arată cel mai bine atunci când are colțuri rotunjite și este aliniat cu partea de jos a zonei sigure — ceea ce asigură, de asemenea, că nu intră în conflict cu indicatorul acasă.,
nu mascați și nu acordați o atenție specială funcțiilor de afișare cheie. Nu încercați să ascundeți colțurile rotunjite, carcasa senzorului sau indicatorul unui dispozitiv pentru a accesa ecranul de pornire, plasând bare negre în partea de sus și de jos a ecranului. Nu folosiți podoabe vizuale precum paranteze, rame, forme sau text instructiv pentru a atrage atenția specială asupra acestor zone.
fii atent la înălțimea barei de stare. Bara de stare este mai înaltă pe modelele iPhone cu ecran complet decât pe alte modele., Dacă aplicația dvs. presupune o înălțime fixă a barei de stare pentru poziționarea conținutului sub bara de stare, trebuie să actualizați aplicația pentru a poziționa dinamic conținutul în funcție de dispozitivul curent. Reține că bara de stare de pe un iPhone cu ecran complet nu își schimbă înălțimea atunci când sunt active activități de fundal precum înregistrarea vocală și urmărirea locației.dacă în prezent ascunzi bara de stare, reconsideră această decizie atunci când aplicația rulează pe un iPhone cu ecran complet., Modelele iPhone cu ecran complet au mai mult spațiu vertical pentru conținut decât alte modele, iar bara de stare ocupă o zonă a ecranului pe care aplicația dvs. probabil că nu o va utiliza pe deplin. Bara de stare afișează, de asemenea, informații pe care oamenii le consideră utile. Ar trebui să fie ascuns doar în schimbul valorii adăugate.
permiteți ascunderea automată a indicatorului pentru accesarea ecranului de pornire cu ușurință. Când este activată ascunderea automată, indicatorul se estompează dacă utilizatorul nu a atins ecranul timp de câteva secunde. Reapare când oamenii ating din nou ecranul., Acest comportament ar trebui să fie activat numai pentru experiențe de vizualizare pasivă, cum ar fi redarea videoclipurilor sau a prezentărilor de diapozitive foto.
considerații suplimentare de aspect
asigurați-vă că site-ul dvs. arată excelent pe un ecran edge-to-edge. Consultați proiectarea site-urilor web pentru iPhone X pe webkit.org.