Share
Met de lancering van het nieuwste en meest glanzende product van Apple, de Apple Watch (err, WATCH), zijn er veel ontwerpers die hunkeren om het gevoel te krijgen dat het nieuwste speeltje uit Cupertino komt. Er zijn enkele nieuwe manieren om met het apparaat te communiceren; zoals die van Apple force touch menu en digitale kroon, evenals vele UI-elementen die u misschien al kent, zoals knoppen, tekststijlen en schakelaars, oh mijn!
Voordat we UI-elementen op de Apple Watch bekijken, laten we eerst enkele basisprincipes bespreken die u in gedachten moet houden bij het ontwerpen van dit nieuwe apparaat. Op het moment van schrijven is de Apple Watch nog niet vrijgegeven, dus als je tips, opmerkingen of correcties hebt, laat het me dan weten op Twitter of in de reacties.
Het al bekende Apple Watch-startschermTen eerste is de Apple Watch fysiek aan de gebruiker gekoppeld. Houd rekening met deze verbinding en hoe dit uw gebruikers het gevoel geeft dat ze interactie hebben met de gebruikersinterface.
Wat denk je dat de bedoelingen van Apple zijn ten aanzien van de emoties van hun gebruikers met de Apple Watch? Als deze commercial consistent is met de contentstrategie van Apple, dan zijn de emoties die het overbrengt, geluk, opwinding, ontzag en verwondering, terwijl ze allemaal een gevoel van personalisatie overbrengen met het gebruik van verschillende horlogebandjes, kleuren en wijzerplaten. Hoe kun je diezelfde gevoelens overbrengen met het ontwerp van je horloge-app? Hoe verandert het feit dat het horloge aan de gebruiker is gekoppeld, de manier waarop de gebruiker denkt over het ontwerp van uw app??
De Apple Watch is niet zo krachtig als je nieuwe smartphone. Bij het ontwerpen voor web en mobiel maak ik me soms schuldig aan het gebruik van een mooie afbeelding over een kleinere. In het geval van de Apple Watch worden we eraan herinnerd om dingen zo licht mogelijk te houden, omdat die extra kilobytes echt een verschil maken.
De waardeloosste apparaten op het web (low-end telefoons) hebben vergelijkbare specificaties als de coolste nieuwe technologie (slimme horloges). Ontwerpen voor iedereen, altijd.
- Todd Parker (@toddmparker) 19 maart 2015
Gebruikers willen geen trage en trage ervaring. Het gebruik van grotere afbeeldingen en animaties zal niet alleen een slechte gebruikerservaring creëren, maar uw app wordt waarschijnlijk ook geweigerd als het tijd is om deze bij Apple in te dienen.
Alle ontwikkelaars van iOS #applewatch die apps hebben goedgekeurd met veel animatie - mijn gebruikt veel en maakt zich zorgen over afwijzing https://t.co/5tmnBY3Qm4
- Henry Ton (@archtrainer) 3 april 2015
Stel jezelf de vraag, "zijn mijn animaties echt nodig?" Animaties zijn slecht als ze vertraging veroorzaken, ongeacht hun versterkende kwaliteiten. Vergeet niet dat je iets aan het bouwen bent voor een computer ter grootte van een postzegel die ook draadloos gegevens van de telefoon moet streamen. Er bestaat een knelpunt.
Doe net of je aan het begin van de jaren 90 een website bouwt die zijn informatie over een 14.4k-modem moet overbrengen naar een gebruiker op een computer met een 386-processor en 2mb ram. U zou in die situatie geen aangepaste lettertypen, animaties en grote JavaScript-bibliotheken gebruiken? Houd dingen lichtgewicht. Bouw voor snelheid en respecteer de tijd van uw gebruikers. Weersta de drang om te verblinden. Houd interacties zinvol. Gebruik geen onnodige animaties. Drink veel water. Wees vriendelijk en respectvol tegenover anderen. Luister naar je moeder.
"Als u interacties met uw iOS-app in enkele minuten meet, kunt u verwachten dat de interacties met uw WatchKit-app in seconden worden gemeten. Houd daarom de interacties korten interfaces eenvoudig. "- Apple Watch Human Interface Guidelines
Het gebruik van kleur en typografie is belangrijk bij het brandmerken van uw toepassing, maar er zijn enkele belangrijke overwegingen waarmee u rekening moet houden.
"Kleur zorgt voor visuele continuïteit en branding voor uw app." - Apple Watch Human Interface Guidelines
Gebruik in elk geval aangepaste lettertypen, maar let op dat het systeemlettertype is ontworpen om goed te werken op dit nieuwe apparaat.
"Vooral moet tekst leesbaar zijn. Als gebruikers de woorden in uw app niet kunnen lezen, maakt het niet uit hoe mooi de typografie is. "- Apple Watch Human Interface Guidelines
Voordelen van het systeemlettertype (San Francisco) zijn:
Tekststijlen zijn semantische beschrijvingen van de beoogde toepassingen voor uw lettertypen. Voorbeelden zijn zaken als kop, tekst etc. U bent waarschijnlijk bekend met de HTML-equivalenten van
en dergelijke. Als u de ingebouwde tekststijlen gebruikt, krijgt u gratis ondersteuning voor dynamische typen die automatisch reageert op de toegankelijkheidsvoorkeuren van gebruikers. Als u aangepaste lettertypen gebruikt, moet u wat werk doen om de functie over te nemen.
De Apple Watch is natuurlijk kleiner dan een slimme telefoon. Alle beschikbare ruimte moet op een intelligente manier worden gebruikt om de interacties die uw gebruikers zullen maken zo aangenaam mogelijk te maken. Houd uw knoppen groot, zodat u gemakkelijk met hen kunt communiceren. Overweeg manieren om het force touch-menu te gebruiken voor extra opties. Weersta de verleiding om uw logo in de app weer te geven, er zijn andere manieren om uw app te brandmerken door het gebruik van kleuren en beelden die zinvol en contextueel zijn.
"De ruimte op Apple Watch is van onschatbare waarde, en elk voorkomen van een logo neemt ruimte weg van de inhoud die gebruikers willen zien." - Apple Watch Human Interface Guidelines
Relatieve vergelijking van iOS geeft vergelijking weerDe Apple Watch heeft een ring langs de randen die uw ontwerpen fysiek opvult. U hoeft dus geen marges aan de randen van uw schermen toe te voegen.
a) daadwerkelijk scherm en b) glazen rand Het lijkt in het begin een beetje raar bij het ontwikkelen in Xcode, omdat je deze opvulling niet aan de randen ziet, maar houd het in gedachten voor je ontwerpen:
Apps geven dezelfde interface weer in beide maten van de Apple Watch, (38mm en 42mm) dus door relatieve eenheden te gebruiken, kunt u toestaan dat uw items groeien en krimpen om de beschikbare ruimte op beide formaten te vullen. Het scherm staat altijd in portretmodus: de hoogte is groter dan de breedte.
| Apparaatgrootte | Breedte (in pixels) | Hoogte (in pixels) |
|---|---|---|
| 38mm | 272 | 340 |
| 42mm | 312 | 390 |
In WatchKit-apps kom je twee totaal verschillende navigatiepatronen tegen:
"Hiërarchisch" is een navigatiepatroon met een verticale schuiflijst zodat de gebruiker één selectie (per tik) per scherm kan maken totdat ze hun gewenste bestemming hebben bereikt.
"Op pagina gebaseerd" is een horizontaal scrollende navigatiestijl die de huidige pagina aangeeft met een reeks stippen langs de onderkant van het horlogescherm.
Je kunt deze twee systemen niet combineren in dezelfde app, maar je kunt "modale werkbladen" weergeven, ongeacht je navigatietype.
U kunt een modal sheet beschouwen als een kaart die de gebruiker een manier biedt om een taak te voltooien. Modale werkbladen bevatten één scherm of meerdere schermen die worden weergegeven in een op pagina's gebaseerde lay-out. Het enige verschil tussen de twee is de toevoeging van puntindicatoren onderaan de pagina-gebaseerde interface.
Let op de navigatiepunten op de tweede afbeeldingVoeg geen knop Sluiten toe aan uw modale werkblad, want er staat er standaard één in de linkerbovenhoek van het scherm. Het is altijd wit, hoewel je de tekst kunt wijzigen dichtbij naar annuleren of iets anders om meer betekenis toe te voegen. Een gebruiker kan ook een modaal blad sluiten door vanaf de linkerkant van het scherm te vegen.
Alle knoppen die u toevoegt op uw modale werkbladen moeten de actie uitvoeren waarvoor ze zijn ontworpen en sluit het modale blad, zodat de gebruiker die extra stap niet hoeft uit te voeren. Apple raadt aan om geen tweede modale interface toe te voegen aan de oorspronkelijke interface - mocht dit toch gebeuren, dan kan dit reden zijn voor afwijzing bij het indienen van de app. Als Apple ergens voor waarschuwt, is het meestal het beste om te luisteren, tenzij je een goede reden hebt om dat niet te doen.
Er kan zijn meer manieren waarop een gebruiker met uw app kan communiceren in toekomstige generaties (zoals multi-touch en nieuwe bewegingen), maar voor nu zijn dit de enige manieren.
De Glance-interface wordt door Apple beschreven als "een aanvullende manier voor de gebruiker om belangrijke informatie van uw app te bekijken". Denk aan informatie die u mogelijk snel nodig heeft op één scherm, zoals de tijd. Heeft uw app informatie die de gebruiker vaak wil bekijken? Overweeg een "blik" te maken om die informatie weer te geven.
Blikken zijn opgebouwd uit een reeks vooraf gedefinieerde sjablonen voor de bovenste en onderste helft van het scherm. Glances kunnen niet door de gebruiker worden gescrolld en openen de app naar het juiste scherm wanneer de gebruiker er op tikt. Blikken zijn optioneel en zijn niet verplicht.
Groepen zijn containers voor objecten in je app, je kunt ze beschouwen als een beetje als divs in html. Groepen hebben een standaardpadding die u kunt wijzigen of verwijderen als u dat wenst. Ze hebben geen standaard uiterlijk, maar hebben kenmerken voor het instellen van positie, hoekradius, grootte, marges en achtergrond. U kunt een groep instellen op opmaakitems horizontaal of verticaal en u kunt groepen in andere groepen nesten om geavanceerdere lay-outs te maken.
Hier zijn enkele van de bovenste en onderste groepssjablonen voor het zoekscherm:
Sjablonen voor hogere groepen
Slechts enkele van de vele lagere groepssjablonenMeldingen worden op twee verschillende manieren aan de gebruiker getoond: een korte-look en een lange-look.
Deze vertellen de gebruiker welke app hen op de hoogte brengt en geeft een kop. Als de gebruiker snel zijn of haar pols laat zakken of niet tikt, wordt de melding afgedaan. De gebruiker hoeft de melding niet handmatig te gebruiken om deze te verwijderen. Het ontwerp van de korte-look-melding is gebaseerd op sjablonen en bevat het app-pictogram, de app-naam en een titelstring. Houd je titelknoppen zo kort en betekenisvol mogelijk.
Deze bieden meer informatie over de melding en zijn beter aanpasbaar in hun uiterlijk. De basisstructuur is hetzelfde voor alle apps en bevat bovenaan een schuifbalk met het pictogram en de naam van de app, de aangepaste inhoud van uw app, maximaal vier actieknoppen en ten slotte een knop om te sluiten onderaan.
Met deze basisprincipes stevig in uw gedachten, laten we de verschillende elementen van de gebruikersinterface van de Apple Watch verkennen.
"Houd er bij het ontwerpen van de grafische elementen van uw app rekening mee dat elk aangepast element er goed uit moet zien en goed functioneert, maar het moet er ook uitzien alsof het bij de andere elementen in de app hoort, of ze nu op maat of standaard zijn." - Apple Bekijk Human Interface Guidelines
Dynamische animaties moeten worden overgedragen vanaf de iPhone, wat leidt tot een onvermijdelijke vertraging. Een watch-app kan worden geweigerd vanwege sterke afhankelijkheid van animaties, dus gebruik ze alleen om de status te communiceren en feedback te geven aan de gebruiker. Leuk gebruik van animaties wordt niet aanbevolen (zelfs als de animatie een hilarisch levensechte dansende baby is). Sla vooraf gemaakte animaties op met een reeks statische afbeeldingen in uw WatchKit-app-bundel, zodat deze snel aan de gebruiker kunnen worden gepresenteerd in plaats van via de telefoon worden overgedragen.
Gebruik pictogrammen in plaats van tekst voor knoppen naast elkaar en nooit meer dan drie naast elkaar (Apple zegt in één geval niet meer dan twee knoppen naast elkaar te gebruiken en in een ander geval niet meer dan twee knoppen naast elkaar te gebruiken). drie.)
Dit klinkt misschien voor de hand liggend, maar onthoud dat de horlogeschermen klein zijn, dus houd uw knoppen zo groot mogelijk - maak het gebruikers niet moeilijk om op een knop te tikken. Knoppen kunnen een afbeelding of kleur hebben voor de achtergrond, evenals een andere kleur voor de tekst. Ze kunnen een label of groepsobject bevatten en hebben afgeronde hoeken (de standaard hoekradius is 6 punten).
Het force touch-menu toont het optionele contextmenu van het huidige scherm (als er een is ingesteld) met maximaal vier acties. Het toont de acties van boven naar beneden, van links naar rechts, afhankelijk van de volgorde waarin ze aan het menu zijn toegevoegd. Ze scrollen niet.
Menubediening (knoppen) vereisen een afbeelding en een label. De afbeelding moet lijntekeningen en één enkele kleur met een transparante achtergrond zijn. Gebruik lijngewichten die geschikt zijn voor de apparaatgrootte en de complexiteit van het pictogram, tussen 4px en 9px volgens Apple.
Onthoud het contextmenu van de force touch, omdat dit een nieuwe en opwindende manier is om met het apparaat te communiceren. In plaats van extra knoppen aan uw interface toe te voegen, kunt u het contextmenu voor force-touch gebruiken.
Pictogrammen zijn png-cirkels. U kunt ze maken als geïndexeerde kleuren om ruimte te besparen, 24 bit en geen transparantie. Pictogrammen hebben geen tekst op het startscherm van het horloge.
Download deze Apple Watch-pictogramsjabloon voor gebruik in uw eigen projecten.
Pictogramgroottes voor een WatchKit-app op Apple Watch:
| aanwinst | 38 mm horloge (in pixels) | 42 mm horloge (in pixels) |
|---|---|---|
| Notification Center-pictogram | 48 x 48 | 55 x 55 |
| Long-Look notificatie pictogram | 80 x 80 | 88 x 88 |
| Startschermpictogram | 80 x 80 | 80 x 80 |
| Short-Look-pictogram | 172 x 172 | 196 x 196 |
Pictogramgrootten voor gebruik door de Apple Watch-app op de iPhone:
| aanwinst | @ 2x | @ 3x |
|---|---|---|
| App-pictogram | 58 x 58 | 87 x 87 |
Gebruik één afbeelding voor alle schermformaten. Snelheid en efficiëntie zijn uiterst belangrijk, dus comprimeer uw afbeeldingen zo veel mogelijk. Sla uw png's op met geïndexeerde kleur op een effen zwarte achtergrond in plaats van op een transparante achtergrond. Maak alle afbeeldingsitems als @ 2x resources; het is niet nodig om niet-Retina-afbeeldingen te maken.
Comprimeer uw png's met tools zoals tinypng, pngout en pngcrush. ImageOptim is een geweldig gratis hulpprogramma voor mac-gebruikers.
Kaarten zijn statische screenshots van een locatie en zijn niet interactief. Als u op een kaart tikt, gaat de gebruiker naar de kaart-app.
Een label is een mooie manier om 'een statische tekenreeks' te zeggen. Het biedt geen directe gebruikersinteractie, maar kan wel op een programmatische manier worden bijgewerkt en kan meerdere regels omvatten.
Het scheidingsteken is een eenvoudig, maar toch waardevol UI-element: een regel voor het scheiden van inhoud.
Met schuifregelaars kunnen gebruikers aanpassingen maken door op de afbeeldingen links en rechts te tikken. Als u geen afbeeldingen opgeeft, zijn de standaardinstellingen een plus (+) en min (-)
Schakelaars geven uw gebruiker een manier om een van de twee opties op te geven. Aan of uit, ja of nee, enz. Stilistisch gezien zullen ze je bekend zijn vanaf iOS, en ze bevatten altijd een label.
Een tabel presenteert rijen met gegevens in een enkele kolom waar de gebruiker verticaal doorheen kan scrollen. Houd tabellen kleiner dan 20 rijen, want meer dan dat is moeilijk om doorheen te bladeren. Als u meer dan 20 rijen hebt, kunt u de gebruiker de optie geven om meer te laden. Tabellen worden dynamisch aangepast op basis van het aantal rijen dat ze bevatten. Als gevolg hiervan negeren tabellen de hoogtebeperkingen die groepen door hen hebben opgelegd. Apple beveelt aan dat u geen tabellen in groepen invoegt.
Apple's Watch is een spannend nieuw platform dat zal blijven evolueren als ontwerpers en ontwikkelaars ermee spelen en verbazingwekkende nieuwe ervaringen opdoen. De ideeën die betrekking hebben op een apparaat dat is gekoppeld aan de gebruiker en dat de hartslag en andere informatie kan verzamelen, zullen blijven evolueren. Als u nieuwe ideeën heeft over hoe u het best kunt werken en interessante nieuwe interacties met deze systemen kunt creëren, laat het ons weten!
Accentsconagua