Share
Cu lansarea viitoare a celui mai nou și mai strălucitor produs Apple, Apple Watch (err, ĂWATCH), există mulți designeri care se mâncau pentru a obține o senzație pentru cea mai nouă jucărie care va ieși din Cupertino. Există câteva modalități noi de a interacționa cu dispozitivul; cum ar fi Apple forțați meniul atingeți și coroana digitală, precum și multe elemente de interfață uitată deja pot fi familiarizate cu butoane, stiluri de text și switch-uri, oh my!
Înainte de a explora elementele UI prezente pe Apple Watch, să acoperim mai întâi câteva dintre elementele de bază pe care trebuie să le țineți cont atunci când proiectați acest nou dispozitiv. În momentul în care scrieți, Apple Watch nu va mai fi lansat, deci dacă aveți sfaturi, comentarii sau corecții, vă rugăm să ne anunțați pe Twitter sau în comentarii.
Familia deja familiarizată Apple Watch homescreenÎn primul rând, Apple Watch este atașat fizic utilizatorului. Fiți atenți la această conexiune și la modul în care aceasta va face utilizatorii să se simtă atunci când interacționează cu interfața utilizator.
Ce crezi că intențiile Apple sunt față de emoțiile utilizatorilor lor cu Apple Watch? Dacă această reclamă este în concordanță cu strategia de conținut a Apple, atunci emoțiile pe care le transmite sunt fericirea, entuziasmul, uimirea și minunea, toate în timp ce transmit un sentiment de personalizare folosind diferite benzi de ceas, culori și fețe de ceas. Cum poți transmite aceleași sentimente cu designul aplicației pentru ceas? Cum arată faptul că ceasul este atașat utilizatorului modifică modul în care utilizatorul ar putea simți cu privire la designul aplicației dvs.?
Apple Watch nu este la fel de puternic ca noul smartphone. Când proiectez pentru web și mobil, uneori sunt vinovat de folosirea unei imagini destul de frumoase peste o imagine mai mică. În cazul Apple Watch, ni se reamintește să păstrăm lucrurile cât mai ușor, deoarece acele kilobyte suplimentare fac într-adevăr o diferență.
Dispozitivele crappiest de pe web (telefoane low end) au specificații similare celor mai noi tehnologii (ceasuri inteligente). Design pentru toată lumea, întotdeauna.
- Todd Parker (@toddmparker) 19 martie 2015
Utilizatorii nu doresc o experiență lentă și lentă. Utilizarea de imagini și animații mai mari nu va crea doar o experiență slabă pentru utilizatori, ci va fi, de asemenea, probabil ca aplicația dvs. să fie respinsă când va veni timpul să o trimită companiei Apple.
Orice iOS #applewatch devs care a primit aplicații aprobate folosind o grămadă de animație - mină folosesc foarte mult și vă faceți griji cu privire la respingere https://t.co/5tmnBY3Qm4
- Henry Ton (@archtrainer) 3 aprilie 2015
Întrebați-vă "animațiile mele sunt într-adevăr necesare?" Animațiile sunt rele dacă provoacă o întârziere, indiferent de calitățile lor de îmbunătățire. Amintiți-vă că construiți ceva pentru un calculator de mărimea unei ștampile poștale, care are, de asemenea, să transmită fără fir date de pe telefon. Există o strangulare acolo.
Pretindeți că construiți un site web la începutul anilor 90, care trebuie să transfere informațiile sale printr-un modem de 14,4 k unui utilizator pe un computer cu un procesor 386 și 2 MB de berbec. Nu ați utiliza fonturi personalizate, animații și biblioteci mari JavaScript în această situație? Păstrați lucrurile ușor. Construiți pentru viteză și respectați timpul utilizatorilor. Rezistați nevoii de a orbi. Păstrați interacțiuni semnificative. Nu utilizați animații inutile. Bea multa apa. Fiți amabili și respectați față de ceilalți. Ascultă mama ta.
"Dacă măsurați interacțiunile cu aplicația dvs. iOS în câteva minute, vă puteți aștepta ca interacțiunile cu aplicația WatchKit să fie măsurate în câteva secunde. Deci, păstrați interacțiunile scurteși interfețe simple. "- Ghidul Apple Watch Human Interface
Utilizarea culorii și a tipografiei este importantă în brandingul aplicației dvs., dar există câteva considerente-cheie pe care trebuie să le aveți în vedere.
"Culoarea ajută la asigurarea continuității vizuale și a branding-ului pentru aplicația dvs." - Ghidul Apple Watch Human Interface
Cu toate acestea, utilizați fonturi personalizate, dar țineți cont de faptul că fontul sistemului a fost proiectat să funcționeze bine pe acest dispozitiv nou.
"Mai presus de toate, textul trebuie să fie lizibil. Dacă utilizatorii nu pot citi cuvintele din aplicația dvs., nu contează cât de frumoasă este tipografia. "- Ghidul Apple Watch Human Interface
Beneficiile fontului sistemului (San Francisco) includ:
Stilurile de text sunt descrieri semantice ale utilizărilor intenționate pentru fonturile dvs. Exemple sunt lucruri precum Headline, Body etc. Probabil sunteți familiarizați cu echivalentele HTML din
și altele asemenea. Dacă utilizați stilurile de text încorporate, beneficiați de suport gratuit pentru tipul de tip Dynamic, care răspunde automat preferințelor de accesibilitate ale utilizatorilor. Dacă utilizați fonturi personalizate, trebuie să faceți ceva de lucru pentru a adopta caracteristica.
Apple Watch este mai mic decât un telefon inteligent, evident. Toate spațiile disponibile trebuie să fie utilizate inteligent pentru a face interacțiunile pe care le vor face utilizatorii dvs. cât mai plăcuți. Țineți butoanele mari, astfel încât să puteți interacționa ușor cu ele. Luați în considerare modalitățile de utilizare a meniului de atingere a forței pentru alte opțiuni. Rezistați tentației de a afișa emblema în aplicație, există și alte moduri de a marca aplicația dvs. prin folosirea culorilor și imaginilor care sunt semnificative și contextuale.
"Spațiul de pe Apple Watch este o premieră, iar fiecare apariție a unui logo ia spațiu departe de conținutul pe care utilizatorii doresc să-l vadă" - Ghidul Apple Watch Human Interface
iOS comparativ comparativ ecranApple Watch are un cadru în jurul marginilor care adaugă materialul de umplutură fizică la desenele dumneavoastră. Prin urmare, nu este necesar să adăugați margini la marginile ecranelor.
a) ecranul real și b) rama de sticlă Se pare un pic ciudat la inceput atunci cand se dezvolta in Xcode, deoarece nu veti vedea acest padding la margini, dar tineti-o minte pentru desenele tale:
Aplicațiile afișează aceeași interfață pentru ambele dimensiuni ale aplicației Apple Watch ((38mm și 42mm), prin utilizarea unor unități relative, puteți permite ca articolele dvs. să crească și să se micșoreze pentru a umple spațiul disponibil pe ambele dimensiuni. Ecranul este întotdeauna în modul portret: înălțimea este mai mare decât lățimea.
| Dimensiunea dispozitivului | Lățime (în pixeli) | Înălțime (în pixeli) |
|---|---|---|
| 38mm | 272 | 340 |
| 42mm | 312 | 390 |
În aplicațiile WatchKit veți întâlni două modele de navigație complet diferite:
"Ierarhic" este un model de navigație care implică o listă verticală de derulare pentru a permite utilizatorului să facă o selecție (prin atingere) pe ecran până când ajunge la destinația dorită.
"Pagina bazată pe" este un stil de navigare orizontal defilare care indică pagina curentă printr-o serie de puncte de-a lungul partea inferioară a ecranului de vizionare.
Nu puteți combina aceste două sisteme în aceeași aplicație, dar puteți afișa "foi modale" indiferent de tipul dvs. de navigație.
Vă puteți gândi la o foaie modală ca pe o carte care oferă utilizatorului o modalitate de a finaliza o sarcină. Formularele modale conțin un singur ecran sau mai multe ecrane afișate într-un aspect bazat pe pagină. Singura diferență dintre cele două este adăugarea indicatorilor punct în partea de jos a interfeței bazate pe pagină.
Rețineți punctele de navigare de pe a doua imagineNu adăugați un buton de închidere în foaia dvs. modală, deoarece există una în partea stângă sus a ecranului în mod implicit. Este întotdeauna alb, deși puteți schimba textul închide la Anulare sau altceva pentru a adăuga mai mult sens. Un utilizator poate închide, de asemenea, o foaie modală prin deplasarea din stânga ecranului.
Toate butoanele pe care le adăugați în foile dvs. modale ar trebui să efectueze acțiunea pentru care sunt proiectate și închideți fișa modală, astfel încât utilizatorul nu trebuie să efectueze acest pas suplimentar. Apple sugerează să nu adăugați oa doua interfață modală de la cea inițială - ar trebui să faceți acest lucru ar putea fi motiv pentru respingere la depunerea aplicației. Dacă Apple avertizează împotriva a ceva este de obicei cel mai bine să asculte dacă nu aveți un motiv foarte bun să nu.
Acolo poate mai multe modalități prin care un utilizator să interacționeze cu aplicația dvs. în generațiile viitoare (cum ar fi gesturi multi-touch și noi), dar pentru moment acestea sunt singurele moduri.
Interfața Glance este descrisă de Apple ca fiind "un mod suplimentar pentru ca utilizatorul să vadă informații importante din aplicația dvs.". Gândiți-vă la informațiile de care aveți nevoie rapid pe un ecran, cum ar fi timpul. Aplicația dvs. are informații pe care utilizatorul va dori să le privească frecvent? Luați în considerare construirea unei "priviri" pentru a afișa acele informații.
Fascicolele sunt construite dintr-o serie de șabloane predefinite pentru jumătatea superioară și cea inferioară a ecranului. Flip-urile nu sunt scrollabile de către utilizator și vor deschide aplicația pe ecranul corespunzător atunci când utilizatorul va deconecta unul. Privilegiile sunt opționale și nu sunt necesare.
Grupurile sunt containere pentru obiecte din aplicația dvs., vă puteți gândi la ele ca fiind un fel de divs în html. Grupurile au un padding implicit pe care îl puteți modifica sau elimina dacă doriți. Ele nu au un aspect implicit, dar au atribute pentru poziția de poziționare, raza de colț, mărime, margini și fundal. Puteți seta un grup pentru elementele de aspect orizontal sau vertical și puteți grupa grupuri în interiorul altor grupuri pentru a crea machete mai sofisticate.
Iată câteva dintre șabloanele de grup superioară și inferioară pentru ecranul cu ochi:
Modele de grup superioare
Doar câteva din numeroasele șabloane de grup inferiorNotificările sunt afișate utilizatorului în două moduri diferite: o privire scurtă și lungă.
Acestea le spun utilizatorului care aplicație le notifică și dă un titlu. Dacă utilizatorul scade rapid încheietura mâinii sau nu atinge, notificarea este respinsă. Utilizatorul nu trebuie să interacționeze manual cu notificarea pentru al elimina. Designul notificării de tip scurt este bazat pe șabloane și conține pictograma aplicației, numele aplicației și un șir de titlu. Păstrați șirurile de titlu cât mai scurte și mai semnificative cu putință.
Acestea oferă mai multe detalii despre notificare și sunt mai personalizabile în aspectul lor. Structura de bază este aceeași pentru toate aplicațiile și include o varză în partea de sus care afișează pictograma și numele aplicației, conținutul personalizat al aplicației, până la patru butoane de acțiune și, în final, un buton de concediere din partea de jos.
Cu ajutorul acestor elemente de bază, să explorăm diferitele elemente ale interfeței utilizator Apple Watch.
"Pe măsură ce proiectați elementele grafice ale aplicației dvs., amintiți-vă că fiecare element personalizat ar trebui să arate bine și să funcționeze bine de la sine, dar ar trebui să arate de asemenea că aparține celorlalte elemente din aplicație, indiferent dacă sunt personalizate sau standard." - Apple Urmăriți liniile directoare pentru interfața umană
Animațiile dinamice trebuie să fie transferate de pe iPhone, ceea ce duce la o întârziere inevitabilă. O aplicație ceas poate fi respinsă datorită faptului că se bazează foarte mult pe animații, deci folosiți-le doar pentru a comunica statutul și pentru a oferi feedback utilizatorului. Folosirea gratuită a animațiilor nu este recomandată (chiar dacă animația este de un copil hilar de viață). Stocați animații pre-redate utilizând o serie de imagini statice în pachetul de aplicații WatchKit, astfel încât acestea să poată fi prezentate rapid utilizatorului, în loc să fie transferate de pe telefon.
Utilizați pictogramele în locul textului pentru butoanele plasate una lângă alta și nu au mai mult de trei unul lângă celălalt (Apple spune într-o singură instanță să nu folosească mai mult de două butoane unul lângă celălalt și într-o altă instanță să nu folosească mai mult de Trei.)
Acest lucru poate părea evident, însă amintiți-vă că ecranele de vizionare sunt mici, astfel păstrați butoanele cât mai mari posibil - nu faceți dificilă atingerea de către utilizatori a unui buton. Butoanele pot avea o imagine sau set de culori pentru fundal, precum și o culoare diferită pentru text. Ele pot conține un obiect de etichetă sau de grup și vor avea colțuri rotunjite (raza de colț implicită fiind de 6 puncte).
Meniul de atingere a forței afișează meniul contextual opțional al ecranului curent (dacă este setat) cu până la patru acțiuni. Acesta va afișa acțiunile de sus în jos, de la stânga la dreapta, în funcție de ordinea în care sunt adăugate în meniu. Ei nu defilau.
Acțiunile din meniu (butoane) necesită o imagine și o etichetă. Imaginea ar trebui să fie o linie de artă și o singură culoare cu un fundal transparent. Utilizați greutăți de linie adecvate pentru dimensiunea dispozitivului și complexitatea pictogramei, între 4px și 9px, conform Apple.
Amintiți-vă meniul contextual de forță, deoarece aceasta este o modalitate nouă și interesantă de a interacționa cu dispozitivul. În loc să adăugați butoane suplimentare la interfața dvs., luați în considerare utilizarea meniului contextual de forțare.
Icoanele sunt cercuri png. Puteți să le creați ca culori indexate pentru a economisi spațiu, 24 de biți și fără transparență. Pictogramele nu au text pe ele pe ecranul de pornire al ceasului.
Descărcați acest șablon pentru pictograma Apple Watch pentru a fi utilizat în proiectele proprii.
Dimensiuni pictogramă pentru o aplicație WatchKit de pe Apple Watch:
| activ | 38mm ceas (în pixeli) | 42mm ceas (în pixeli) |
|---|---|---|
| Centru de notificare | 48 x 48 | 55 x 55 |
| Pictogramă de notificare lungă | 80 x 80 | 88 x 88 |
| Pictograma ecranului de pornire | 80 x 80 | 80 x 80 |
| Pictograma Short-Look | 172 x 172 | 196 x 196 |
Dimensiuni de pictograme pentru utilizarea de către Apple Watch app pe iPhone:
| activ | @ 2x | @ 3x |
|---|---|---|
| App Icon | 58 x 58 | 87 x 87 |
Utilizați o imagine pentru toate dimensiunile ecranului. Viteza și eficiența sunt extrem de importante, astfel încât să comprimați imaginile cât mai mult posibil. Încercați să salvați png-urile cu culori indexate pe un fundal negru solid, în loc de pe un fundal transparent. Creați toate imaginile ca resurse @ 2x; nu este nevoie să creați imagini non-Retina.
Comprimați png-urile cu instrumente cum ar fi tinypng, pngout și pngcrush. ImageOptim este un utilitar gratuit pentru utilizatorii Mac.
Hărțile sunt capturi de ecran statice ale unei locații și nu sunt interactive. Atingerea pe o hartă duce utilizatorul la aplicația hartă.
O etichetă este un mod fantezist de a spune "un șir de text static". Nu permite interacțiunea directă cu utilizatorul, deși poate fi actualizată programatic și poate include mai multe linii.
Separatorul este un element UI simplu, dar valoros: o linie pentru separarea conținutului.
Glisoare permite utilizatorilor să facă ajustări prin atingerea imaginilor la stânga și la dreapta. Dacă nu oferiți imagini, valorile implicite sunt un plus (+) și minus (-)
Comutatoarele oferă utilizatorului o modalitate de a specifica una dintre cele două opțiuni. Porniți sau opriți, da sau nu, etc. În mod stilist, aceștia vor fi familiarizați cu dvs. din iOS și vor include întotdeauna o etichetă.
Un tabel prezintă rânduri de date într-o singură coloană pe care utilizatorul o poate parcurge vertical. Păstrați mese mai mici de 20 de rânduri, pentru că mai mult decât este dificil să derulați. Dacă aveți mai mult de 20 de rânduri, puteți oferi utilizatorului posibilitatea de a încărca mai mult. Tabelele se redimensionează dinamic pe baza numărului de rânduri pe care le conțin. Ca urmare, tabelele ignoră orice restricții de înălțime plasate pe ele de grupuri. Apple recomandă să nu încorporați tabele în interiorul grupurilor.
Apple's Watch este o nouă platformă interesantă, care va continua să evolueze în calitate de designeri și dezvoltatori, jucând cu ea și construind noi experiențe uimitoare. Ideile implicate cu un dispozitiv atașat utilizatorului și care pot aduna rata de inimă și alte informații vor continua să evolueze. Dacă aveți idei noi despre cum să lucrați cel mai bine și să creați noi interacțiuni interesante cu aceste sisteme, anunțați-ne!
Accentsconagua