Share
Wat je gaat creërenIn deze tutorial leer ik je hoe je een eenvoudige en gemakkelijk te gebruiken iOS-fitness-applicatie ontwerpt voor het volgen van hardlopen en fietsen in de buitenlucht. Naast de iOS-applicatie geef ik je ook een ontwerpvoorbeeld voor de Apple Watch-interface.
Aan het einde van deze tutorial kunt u een iOS-applicatie ontwerpen met verschillende schermen en weergaven in Sketch. We zullen enkele basis- en tussentijdse technieken in Sketch gebruiken, dus laten we aan de slag gaan!
U hebt deze middelen nodig om te kunnen volgen:
Voordat we beginnen, moet ik erop wijzen dat dit concept volledig theoretisch is. In het geval van een real-world project zou dit een veel diepere analyse van de markt- en gebruikersgedrag vereisen, voordat we dit in een echte, bruikbare mobiele applicatie zouden kunnen veranderen. Ik heb nu vier jaar hard gerend en gefietst, dus ik heb dit concept gemaakt om te laten zien hoe een fitnessapplicatie eruit zou kunnen zien mijn perspectief.
We gebruiken Sketch, een ontwerptoepassing die oorspronkelijk is ontworpen voor het ontwerpen van interfaces en tegenwoordig de snelste en gemakkelijkste manier om te ontwerpen voor iOS.
Nadat we Sketch hebben geopend, selecteren we de Artboard (A) optie binnen de invoegen menu.
Aan de linkerkant raad ik aan om de afmetingen van de iPhone 6 te kiezen, maar als je een andere iPhone hebt, is het beter om die te kiezen. Dit is belangrijk, want met de hulp van Sketch Mirror kunnen we ons werk meteen in realtime op ons iOS-apparaat zien zonder afbeeldingen te exporteren of over te zetten. Sketch Mirror is een cruciaal onderdeel van mijn ontwerpworkflow, omdat ik binnen enkele seconden het eindresultaat van mijn werk kan zien en voelen.
Om Sketch Mirror te activeren, moet je de Sketch Mirror-app downloaden van de App Store en vervolgens klikken op de Spiegel pictogram binnen Sketch (zorg ervoor dat uw apparaten zich op hetzelfde Wi-Fi-netwerk bevinden of verbonden zijn via een USB-kabel).
Sinds de introductie van iPhone 6 en 6 Plus is het bijna onmogelijk om de verborgen navigatieknop in de linkerbovenhoek te gebruiken, omdat de meeste gebruikers het niet met één hand kunnen bereiken. Om deze reden heb ik de primaire navigatie onderaan het scherm geplaatst; altijd zichtbaar en gemakkelijk te bereiken.
Laten we een maken 100px lange rechthoek, volledige breedte, onderaan het scherm.
Laten we nu deze rechthoek verdelen zodat we vijf gelijke rechthoeken hebben, waarin we de navigatiepictogrammen later kunnen plaatsen. Ik raad aan om elke rechthoek een iets andere kleur te geven om de randen van elke rechthoek duidelijk te zien.
Laten we een andere maken 50x50px vierkant voor de pictogrammen. Hieronder kunnen we de labels toevoegen voor de verschillende schermen: Activiteiten, Uitdagingen, GO, Vrienden en Profiel. Voor deze labels heb ik Avenir Next Regular ingesteld met 24px lettergrootte en 24px lijnhoogte.
Nu kunnen we onze pictogrammen in deze kleine vierkanten plaatsen. Zorg ervoor dat elk pictogram 50 px hoog of 50 px breed is. Laten we voor ons profielpictogram een cirkel van 50x50px maken met onze Ovaal gereedschap (O) en selecteer afbeelding vullen op de Vult paneel.
Verberg de hulplijnen door op het kleine oogpictogram naast de lagen te klikken.
Voor de achtergrond van onze tabbladbalk heb ik een volledig wit gekozen #FFFFFF kleur met 70% dekking en 8px achtergrondonscherpte. Ik heb ook een 1px toegevoegd # B4B4B4 lijn met de Lijngereedschap (L) als een visueel scheidingsteken aan de bovenkant van de tabbladbalk.
Voor de inactieve tabbladpictogrammen en labels, raad ik een grijstint aan # 666666 in plaats van een eenvoudig zwart, en voor het actieve deel, laten we een levendige rode kleur instellen zoals # FF3B30.
De meerderheid van onze gebruikers zou de applicatie openen net voordat ze klaar zijn om te worden uitgevoerd of te fietsen, dus het eerste dat ze met de app willen doen is beginnen met het volgen van hun trainingen. Dit is de reden waarom we eerst het GO-scherm gaan ontwerpen, zodat de gebruiker onmiddellijk kan beginnen met trainen.
Voor elke buitenactiviteit, controleer ik altijd het weer van tevoren, alleen om te weten wat ik moet verwachten, inclusief de windkracht en de zonsondergang. Naar mijn mening zijn deze details echt essentieel als je buiten bent, dus ik heb een ingebouwde weersinformatie ontworpen op het GO-scherm. Op deze manier hoeven gebruikers niet telkens een weerapplicatie te controleren voordat ze onze fitness-app openen.
Ten eerste hebben we een witte iOS-status en navigatiebalk nodig van de Sketch iOS UI Design-sjabloon, die je hieronder kunt vinden Bestand> Nieuw van sjabloon> iOS UI-ontwerp.
Tip: omdat de Sketch iOS UI Design-sjabloon ons 1x activa biedt die we nodig hebben om ze in 2x resolutie om te zetten. Dit kan eenvoudig worden gedaan met de Schaaltool.
Voor de achtergrondkleur van onze navigatiebalk wilde ik een levendige en vitale kleur kiezen, die gebruikers zal inspireren om onmiddellijk te bewegen en te handelen. Dus ik koos een plat, maar nog steeds levendig rood, # FF3B30, wat bedoeld is om je aandacht te trekken de eerste keer dat je het ziet.
Voor de GPS-sterkte-indicator gebruikte ik een eenvoudig verloop van # 15FF00 naar # 15FF00 in een afgeronde hoekrechthoek.
Aan de andere kant heb ik een fietspictogram geplaatst om gemakkelijk te schakelen tussen de rij- en fietsmodus.
Laten we nu onze weersvoorspelling bovenaan het scherm maken. Omdat de meeste van onze trainingen gewoonlijk niet langer dan drie uur duren, bieden we een voorspelling van drie uur met aanvullende informatie over de windkracht en de tijd van zonsondergang. Ik adviseer een lichtgrijze like #ACACAC voor dit soort informatie, omdat we de weersvoorspelling niet te sterk willen benadrukken.
Als een visueel scheidingsteken tussen verschillende soorten secties van de interface, laten we tekenen #ECECEC rechthoek, met 54px hoogte en 100% breedte.
Vóór de start van de training kan het motiverend zijn om een doel te stellen. Dit kan de vorm hebben van een afstand, een tijd of een nieuw gemiddeld snelheidsrecord. Als u deze doelen wilt weergeven, maken we twee afzonderlijke kringen met de volgende afmetingen: 270x270px en 230x230px.
Nadat je de cirkels hebt geplaatst, sleep je de eerste en laat je deze vallen in de tweede in het lagenpaneel. Om een ringvorm te creëren, selecteert u de 'Aftrekken' keuze.
Laten we voor de achtergrondkleur van deze ring een lineair verloop maken van # AAFFA9 naar # 11FFBD en zet de dekking op 20%. Dit is de inactieve status van onze ring.
Voor het actieve deel, laten we onze vorm dupliceren met de vorm in het lagenpaneel selecteren> Rechtsklik> Dupliceren (alternatief kunnen we dupliceren met ⌘-C en ⌘-V, te).
Nu hebben we de Vector gereedschap (V) om een masker te maken in onze actieve cirkel.
Tip: indrukken van de Verschuiving toets tijdens het gebruik van de Vector tool helpt ons om perfect rechte lijnen te maken.
Laten we deze laag onder de actieve cirkel verplaatsen en vervolgens instellen als maskerlaag. Vergeet niet om de randvulling van onze vectorvorm uit te schakelen.
Voor de fijne details, laten we twee extra cirkels van 20x20px toevoegen aan onze maskervorm, wat ons een mooie afgeronde rand geeft aan het einde van de actieve ring.
Pro tip: Laten we voor de tekst in het midden van de ring een kleine hoeveelheid innerlijke schaduw instellen.
Het enige ontbrekende van ons GO-scherm is de GO-knop, die een 120px-lange rechthoek zal zijn met # FF3B30 rode kleur.
Op het scherm Activiteiten kunnen we snel door trainingen bladeren van onze vrienden of onszelf. Nadat je op een van deze trainingen hebt getikt, krijgen we een gedetailleerder uiterlijk, inclusief een interactieve grafiek.
Onderaan deze gedetailleerde weergave zullen we de algemene resultaten van de geselecteerde training weergeven, terwijl je aan de bovenkant de specifieke resultaten kunt zien, afhankelijk van waar we de grafiek aanraken (aangegeven met een lichte verticale balk).
Net als voorheen beginnen we met onze navigatiebalk en voegen we een extra 'plus'-pictogram toe, zodat de gebruiker trainingen handmatig kan toevoegen.
Om te schakelen tussen de training van onze vrienden en die van ons, moeten we een secundaire navigatiebalk maken. Laten we het selecteren Rechthoekgereedschap (R) en maak een rechthoek van 90 px hoog met een donkerblauwe kleur # 1F2033 kleurvulling.
Maak nu nog een vierkant van 22x22px en draai het 45 graden.
We kunnen deze twee lagen groeperen zoals we deden met onze doelringen. Zorg ervoor dat u de Aftrekken optie in plaats van Unie.
Tip: merk de kleine verandering op in termen van dekking tussen het actieve en inactieve secundaire navigatie-item.
Voor de gedetailleerde look, zullen we een nieuwe rechthoek maken met dezelfde donkerblauwe achtergrond. Maar deze keer is de hoogte 387 px. Laten we de richtlijnen gebruiken voor de richtlijnen Lijngereedschap (L).
Om het hoogteverschil tijdens de training visueel weer te geven, moeten we een aangepaste vorm maken met de Vector gereedschap (V). Er is geen specifieke techniek om deze grafiek te maken, dus laten we de Bézier-curve aanpassen totdat we vinden dat hij goed is.
Naast het niveauverschil, kunnen we de veranderingen in snelheid tijdens de training ook weergeven met een kleurrijke curve, waarbij de rode en groene gebieden het tempo aangeven.
De methode is hetzelfde als eerder met de Vector gereedschap en Bézier-rondingen. Voor de vulkleur die ik heb gebruikt # FF3B30 voor rood en # 22EA05 voor groen (groen betekent sneller dan gemiddeld tempo, rood betekent langzamer.)
Met behulp van de Content Generator Sketch-plug-in kunnen we eenvoudig verschillende profielfoto's toevoegen aan onze avatarcirkels.
Nu zijn we ook klaar met het scherm Activiteiten!
Op het scherm Uitdagingen kunnen we de specifieke uitdagingen zien waaraan we deelnemen. Tijdens het ontwerp van dit scherm heb ik een door Apple Watch geïnspireerd rond ontwerp gecombineerd met een kaarttype, zodat de gebruiker de uitdagingen opnieuw kan indelen op basis van hun belang.
Na het ontwerpen van de vorige schermen, zal het een stuk eenvoudiger zijn om deze te maken, omdat we het meeste al hebben ontworpen. Laten we eerst een nieuw maken Artboard (A) en kopieer de navigatiebalk en de secundaire navigatiebalk vanuit het scherm Activiteiten.
Om de kaarten te maken, hebben we een 355x400px rechthoek.
Als achtergrondkleur heb ik een eenvoudig wit gebruikt, maar om de kaarten visueel van de achtergrond te scheiden, heb ik een beetje zwarte schaduw toegevoegd met 20% dekking.
Om consistent en coherent te zijn in de hele applicatie, is het belangrijk om de gebruikers dezelfde informatie op dezelfde manier te tonen. Zoals je je misschien herinnert, hebben we al een kleine ring ontworpen om doelen op het GO-scherm aan te geven, dus nu kunnen we dezelfde techniek hier gebruiken.
Tip: als je meer inspiratie wilt voor leuke UI-gradiënten, raad ik je aan om uigradients.com te controleren.
Het laatste nog steeds ontbrekende element is de tabbalk onderaan het scherm, dus laten we dat van het vorige scherm kopiëren en zorgen dat we de actieve status van het tabblad wijzigen.
In het venster Uitdagingen doorbladeren kunnen we snel door de populairste en recente uitdagingen bladeren, waar we kunnen zien hoeveel dagen er nog zijn om een bepaalde uitdaging te voltooien en hoeveel leden eraan deelnemen.
Zoals altijd kunnen we de vertrouwde ontwerpelementen uit eerdere schermen dupliceren, maar vergeet niet om de secundaire navigatiebalk aan te passen.
Laten we de basisinformatie over een uitdaging maken en een aangepaste badge toevoegen als motivatie. Dit zal de beloning zijn wanneer iemand de uitdaging voltooit.
Notitie: Voor deze zelfstudie heb ik slechts één eenvoudige badge gemaakt, maar in een echt project zou ik veel meer tijd besteden aan het ontwerpen van verschillende, hoog gepolijste badges.
Tip: Let op de kleine verschillen in grootte en kleuren van de tekst, die ons helpen een duidelijke hiërarchie te creëren.
Om de resterende tijd visueel weer te geven, maken we een tijdlijn. Deze balk zal hebben 40px afgeronde hoeken en een # f5f5f5 Achtergrond kleur.
Laten we voor het actieve deel van deze balk onze vorige rechthoek kopiëren, een beetje korter maken en een lineair verloop instellen vanaf # 44FF30 naar # FFDA30.
Na het dupliceren van deze sectie en het kopiëren van de tab-balk van het vorige scherm zijn we klaar met het gedeelte Bladeren door uitdagingen!
Als laatste, maar daarom niet minder belangrijk, heb ik een Apple Watch-interface gemaakt voor onze applicatie. Dit ontwerpconcept is gebaseerd op de Human Watch-richtlijnen van Apple Watch. Deze richtlijnen worden door Apple verstrekt aan ontwikkelaars en ontwerpers om een beter begrip te krijgen van de mogelijkheden van dit nieuwe platform.
Ik heb vier verschillende wijzerinterfaces gemaakt voor onze fitness-applicatie. In het geval van het eerste concept heb ik een zeer aanpasbaar scherm gemaakt, waar je de informatie kunt herschikken op basis van je interesses. Bovendien verandert de kleur van de belangrijkste (grootste) gegevens altijd, afhankelijk van hoe ver je bent van je oorspronkelijke doel. In dit geval betekent de groene kleur dat u uw doel op afstand bijna hebt bereikt.
We hebben het ontwerp van onze iOS-fitnessapplicatie voltooid. Ik heb deze tutorial gevolgd en ik hoop dat je meer vertrouwen hebt in het gebruik van Sketch voor mobiel applicatieontwerp.
Download het volledige schetsbestand om gedetailleerder te kijken naar de ontwerptechnieken die we hebben gebruikt. Ik ben benieuwd hoe je het proces hebt gevonden, dus aarzel niet om feedback en vragen achter te laten in de reacties.
Accentsconagua