Share
Dit ontwerp is gebruikt in combinatie met onze partnersite Mobiletuts +. Bart Jacobs, zeer bekwame ontwikkelaar, heeft deze gebruikersinterface genomen en er een werkende app van gemaakt en het beste van alles wat je kunt volgen en leren hoe je je eigen app kunt maken! Je kunt zijn serie hier vinden: Deel 1, Deel 2, Deel 3.
In deze tutorial wil ik je laten zien hoe je een net-klaar gebruikersinterface kunt maken voor een weerapplicatie. We gebruiken meerdere kunstborden en typografie om een zeer minimale interface te maken.
Download de fonts hier:
Wanneer u lettertypen gebruikt voor toepassingen of om welke reden dan ook, controleer dan de licentieovereenkomst. Omdat dit slechts een zelfstudie is en de app zelf niet beschikbaar is voor de verkoop, kunnen we de bovengenoemde lettertypen gebruiken. Als u echter van plan bent om uw eigen licentie te maken en een commerciële licentie wilt verkrijgen, volg dan de instructies van de typeontwerpers over hoe u dit moet doen.
We gebruiken meerdere kunstborden voor de verschillende weergaven van de app, dus zodra we dit hebben besloten kunnen we met hulp van onze ontwikkelaar ons document laten maken.
Om te beginnen moeten we een document maken ter grootte van ons mobiele apparaat. Omdat we aan het iOS-platform werken, ontwerpen we voor de iPhone 5, die een grotere schermgrootte heeft dan de vorige versies van de iPhone. Ik vind het werken op de grotere maat eenvoudig voor later op andere apparaten terug te schalen. Aangezien het over het geheel genomen ontwerp zo minimaal is, zal het gemakkelijker zijn om de ruimte later te verwijderen in plaats van te proberen het op te schalen. Daartoe zal ons document zijn 640 x 1136 punten (geen pixels).
Tijdens het brainstormen met de ontwikkelaar is besloten dat er een hoofdscherm is dat naar links of rechts verschuift om meer informatie te onthullen. Met dit in gedachten zullen we op dit moment ook meerdere kunstborden opzetten. Eén voor elk venster dat zal verschijnen. Zorg ervoor dat je de screenshot grondig doorneemt voor de details.
Nadat het document is gemaakt, moeten we het kleurprofiel aanpassen. Dus ga naar Bewerken> Profiel toewijzen en zorg ervoor dat u alle kleurprofielen uitschakelt. Wanneer XCode uw activa voorbereidt om te worden gebundeld met de app, worden alle kleurprofielen die aan activa zijn gekoppeld, volledig verwijderd. Daarom is het het beste om eenvoudig kleurprofielen uit uw document te verwijderen en uw ontwerp regelmatig te testen op een mobiel scherm om te zorgen voor de juiste kleurenuitvoer.
Onze achtergrond is vrij eenvoudig. Omdat we met een min of meer 'plat' ontwerp werken, werken we met effen kleuren en mengen we om onze effecten te bereiken.
We zullen het middelste kunstbord gebruiken om onze hoofdpagina van de app te vertegenwoordigen. De linkse is wat er gebeurt als u de locatie selecteert. En die rechts verschijnt wanneer u de datum selecteert. Begin met het tekenen van een rechthoek op dezelfde hoogte en breedte van het kunstbord in het midden en vul het met onze basiskleur
Maak vervolgens een cirkel die precies is 30 x 30pt en vul het met de hieronder geschetste kleur.
Kopieer deze nieuw gemaakte cirkel en plak deze achter de andere. Pas nu het formaat aan 2300 x 2300pt en laat de ondoorzichtigheid naar beneden 0%.
Ga nu naar Object> Blend> Mengopties ... en selecteer Specifieke stappen stel het dan in op 30. Maak dan (Object> Blend> Maken) de blend.
Terwijl de overvloeiing nog geselecteerd is, centreert u het horizontaal op het tekenbord en centreert u de cirkel helemaal boven aan het bord, zoals hieronder te zien is.
Dupliceer de platte achtergrondrechthoek en plak deze boven de blend die we zojuist hebben gemaakt. Selecteer nu zowel de rechthoek als de overvloeiing uit het lagenpalet en selecteer Object> Knipmasker> Maken. Op deze manier hoeven we ons geen zorgen te maken over onze vrij grote mengeling die overloopt in onze andere kunstborden.
Een leuke functie waarvan we dachten dat het een app zou zijn voor de app, is om de achtergrond van kleur te laten veranderen afhankelijk van de temperatuur. Dus terwijl de achtergrond die we zojuist hebben gemaakt is voor wanneer het 'heet' is, zullen we nu deze elementen dupliceren en de kleur en positie aanpassen om een 'meer koud' gevoel te vertegenwoordigen.
Omdat ons blended circle-effect zoveel stappen bevat, kunt u wat achterstand opmerken terwijl u uw app-ontwerp blijft maken. Omdat dit alleen voor esthetische doeleinden is, kunnen we doorgaan en de menglagen uitschakelen en de platte achtergrondkleur voorlopig laten. Zorg ervoor dat u de overvloeilaag opnieuw inschakelt tijdens het testen op uw mobiele apparaat, zodat u kunt zien hoe de tekst werkt met uw achtergrond.
We vertrouwen zwaar op het type om de weersinformatie over te brengen. Om deze reden heb ik enkele mooie, schone, gemakkelijk leesbare lettertypen gekozen die de app echt een persoonlijkheid geven. Ik blijf bij twee lettertypefamilies en gebruik variërende breedtes om de elementen zichtbaar te maken.
Om te beginnen moeten we een of andere datum laten zien. Selecteer de Type Tool (T) en voer een dag van de week in. Ik gebruik "dinsdag" en ons lettertype "Mission Gothic" met het gewicht ingesteld op "Thin". De tekst zelf is wit en we voegen er een toe Slagschaduw om het van de achtergrond af te houden. Daarna plaatsen we het zodat het gecentreerd is op het kunstbord en 20px vanaf het begin. Om dit te doen, plaatst u het eenvoudig helemaal bovenaan waar het begrenzingsvak de rand van het kunstboard raakt en vervolgens vasthoudt Verschuiving en druk op de naar beneden pijl op het toetsenbord tweemaal.
Selecteer de Type Tool (T) nogmaals en laten we onze temperatuurmeter maken. Ik vind het een goed idee dat de cijfers zelf gecentreerd zijn terwijl het symbool "graden" naar rechts is. Dus in plaats van het type in het paragraaf paneel Ik heb het links uitgelijnd gehouden en heb alleen het nummer getypt dat we zullen gebruiken voor de placeholder. Ik gebruik "86" en het lettertype "Maven Pro" met de volgende informatie in de onderstaande schermafbeelding.
Eenmaal gemaakt, lijnt u het uit met het midden van het tekengebied en vervolgens met de bovenkant. Eenmaal uitgelijnd aan de bovenkant, klik met de rechtermuisknop de tekst en Transformeer> Verplaats ... het naar beneden 210pt. Selecteer nu het type en voeg het graden-symbool toe.
Nu we de temperatuur hebben, voegen we een locatie toe. Type je locatie in, voor mij is het "Nassau, BAH" voel je vrij om je eigen te gebruiken. Om de stad en het platteland wat contrast te geven, gebruiken we twee verschillende gewichten. De stad wordt "Mission Gothic" ingesteld op "Regular" en het land wordt "Mission Gothic" ingesteld op "Thin".
Wat de plaatsing betreft, zei ik eerder dat ik het idee leuk vind dat het temperatuurcijfer gecentreerd is, maar voor alle andere tekst wil ik dat het op de linkerkant wordt uitgelijnd op basis van de breedte van het temperatuurcijfer. Dus voor nu zal ik dit adres handmatig links van de temperatuur uitlijnen en plaatsen 20pt van de bodem. Je kunt deze afstand naar eigen inzicht aanpassen. Zorg ervoor dat u altijd de elementen op uw mobiele apparaat controleert.
We kunnen hier stoppen als we willen, maar de ontwikkelaar wil graag wat extra informatie toevoegen. Dus we zullen drie afzonderlijke regels tekst maken. Een voor de huidige tijd, een voor de windsnelheid en een voor de luchtvochtigheid. Zorg ervoor dat u ze afzonderlijk maakt, omdat we verschillende lettergrootten en -gewichten gebruiken en dit kan de lijnhoogte voor deze elementen afwerpen.
Ik vind de nummerformulieren van ons lettertype "Maven Pro" leuk, dus ik zal dit lettertype blijven gebruiken voor de cijfers in deze elementen, alleen gebruiken we het "Medium" -gewicht en contrasteren ze met het lettertype "Mission Gothic" ingesteld op " Dun "en voor dit dunnere lettertype zetten we het ook in" Small Caps ". U kunt kleine waarden instellen door het juiste lettertype te markeren en op het menupictogram in de rechterbovenhoek van de knop te klikken Karakter paneel dan kiezen Kleine doppen.
Onze typografie brengt onze boodschap goed over, maar we moeten nog steeds pictogrammen maken om te laten zien wat de verschillende cijfers zijn en om menu's in de app te specificeren. Ik werd verliefd op de vorm van het graden-symbool van ons lettertype "Maven Pro", dus ik dacht dat ik de pictogramelementen zou verbinden met het type door deze vorm opnieuw te gebruiken om de pictogrammen te maken.
Met de Type Tool (T) ingeschakeld type het graden-symbool. De exacte grootte doet er op dit punt niet toe, omdat we het aanpassen aan onze pictogramgroottes. Klik vervolgens met de rechtermuisknop en kies "Schetsen maken"om het type naar een bewerkbare vorm om te zetten Direct selectie gereedschap (A) en selecteer het kleinere binnenpad en verwijder het. We zullen later een streek gebruiken om de juiste widget voor onze pictogrammen te krijgen. Als je eenmaal je gebogen vierkante vorm hebt, zorg er dan voor dat je de hoogte breedte zodat ze precies hetzelfde zijn. Ze zullen iets afwijken en we moeten ervoor zorgen dat ze precies zijn wanneer elementen later worden toegevoegd.
We zullen deze vorm meerdere keren gebruiken en hergebruiken, dus zorg ervoor dat je er een kopie van hebt, voor het geval je het origineel verliest tijdens het werken. Voor nu maken we een pictogram om het locatiemenu te vertegenwoordigen.
Laat ons, met onze gekromde vierkante vorm gekopieerd, verkleinen tot 32 x 32pt, en voeg een innerlijke toe Beroerte van 3px
Schakel de Afgeronde rechthoek-tool en maak een rechthoek die dat is 3 x 12pt en vergroot de afgeronde hoeken zodat de uiteinden volledig rond zijn. Dupliceer deze vorm nu nog drie keer en roteer het zodat het een soort kruisvormige haarvorm vormt en groepeer alle objecten samen. Eindelijk met de geselecteerde groep, voeg een toe Slagschaduw en plaats het 30pt van zowel de bovenkant als de linkerkant van het kunstbord. Controleer de afstand op uw mobiele apparaat en pas het dienovereenkomstig aan.
Laten we onze afgeronde, vierkante vorm kopiëren vanaf ons pictogram Locatie, omdat de andere pictogrammen gebaseerd zijn op dezelfde vorm en grootte. Pas de locatie van de afgeronde rechthoek aan naast het tijdelement. Net zoals het werkelijke graadsymbool van het temperatuurelement wil ik dat de pictogrammen voor deze extra details ook buiten de temperatuur zijn, maar deze keer is het uiteraard links van de elementen.
Zoals je je kunt voorstellen, zullen we voor het Tijd-element een Klok-pictogram maken. Onze afgeronde, vierkante vorm zal de wijzerplaat zijn en nu moeten we de wijzers van de klok maken. Selecteer de Afgeronde rechthoek-tool en maak een rechthoek die dat is 10 x 4pt en lijn het uit met het midden van de wijzerplaat. Dupliceer dit proces alleen deze keer maak het 4 x 12pt. Zodra u de klok in een comfortabele spot plaatst, deelt u de elementen samen en voegt u een toe Slagschaduw.
Dupliceer nogmaals het afgeronde vierkant van ons vorige pictogram en lijn het uit naast ons windelement. Voor dit pictogram gaan we proberen een mooi effect te bereiken waarbij het pictogram zelf de windinformatie verder helpt door een pijl te geven die aangeeft direct waar de wind op waait. Dus zoals je kunt raden, maken we een pijl in het midden voor dit specifieke pictogram. Begin met het maken van een Afgeronde rechthoek dat is 4 x 9pt en centreren in het afgeronde vierkant. Maak vervolgens een perfect vierkant met de Afgeronde rechthoek-tool dat is 12 x 12pt en verwijder een van de hoeken. Sluit nu dat open pad en draai het zodat het het punt naar onze pijl vormt en centreer het dan over het stengelgedeelte van de pijl, en zorg ervoor dat de bovenste afgeronde hoeken volledig verborgen blijven.
Met onze pijl voltooid, groep de stengel en wijs naar elkaar toe en maak nog zeven kopieën. Roteer elk van deze kopieën in stappen van een kwart, dus je hebt er één naar boven gericht, één naar rechtsboven, een ander naar rechts, enzovoort. Omdat onze hoofdvorm geen volledige cirkel is, hoeft alleen de vorm met de pijl te roteren, dus we hebben een pijlpictogram nodig voor elke richting waarin de wind zou kunnen waaien. Nadat deze zijn gemaakt, kunt u de overbodige pijlen verbergen en vervolgens de pijlen en het afgeronde vierkant samen groeperen en toepassen Slagschaduw.
Plak nog één keer een kopie van onze afgeronde, vierkante vorm en lijn deze uit met ons vochtigheidselement. Maak nu een cirkel die dat is 8 x 8pt en centreer het in de hoofdvorm en plaats het meer naar de bodem. Schakel de Direct selectie gereedschap (A) en selecteer het bovenste ankerpunt van de cirkel en sleep het naar boven om een druppelachtige vorm te creëren, breng ook de handvatten een beetje naar voren om de druppel een fijner punt te geven. Dupliceer deze druppelvorm nog twee keer en verklein de grootte en plaats deze in de buurt van de bovenkant en aan weerszijden van de grotere druppel. Tenslotte Groep (Control + G) de elementen samen en voeg een toe Slagschaduw.
Voor het laatste pictogram van deze hoofdsectie hebben we iets nodig dat de datum vertegenwoordigt. We bedachten een kalenderpictogram met de datum van de maand.
Om te beginnen met het maken van een Afgeronde rechthoek dat is 40 x 36pt en geef het een innerlijke slag van 3pt. Ga nu naar Object> Uiterlijk uitbreiden om de lijn om te zetten in een werkelijke vorm. Met de Direct selectie gereedschap (A) ingeschakeld, selecteert u de bovenste binnenste ankerpunten en duwt u ze naar beneden 9px met behulp van de pijltjestoetsen op je toetsenbord. Met de Afgeronde rechthoek-tool maak twee afgeronde pilvormen die dat wel zijn 9pt breed en elke hoogte die u wilt, plaats ze dan over het grotere afgeronde vierkant, zodat de onderkant halverwege tussen het grote witte gebied samenkomt. Vervolgens minus deze nieuwe vormen van de vierkante vorm met behulp van de verkenner paneel. Maak nog twee pilvormen, deze keer zullen ze dat zijn 3 x 8pt en plaats ze in de uitgesneden delen. Als laatste voegen we een datum voor de plaatsingshouder toe met de volgende instellingen, waarna we deze elementen groeperen en een toevoegen Slagschaduw.
Toen de ontwikkelaar pitched had, wilde hij een reeks schuifbare widgets onderaan de hoofdpagina van de app die het weer per uur weergeeft voor die specifieke dag. Dus om onze hoofdpagina van de app af te maken, laten we die nu maken.
Schakel de Afgeronde rechthoek-tool en maak een witte rechthoek die dat is 165 x 250pt, centreer het met het kunstbord en plaats het 40px vanaf de onderkant van het kunstbord.
Dupliceer deze rechthoek en vul deze met zwart. Dupliceer het nogmaals en duw het omhoog 4PX dan Minus voorkant in de verkenner paneel. Je kunt dan de dekking naar laten vallen 15%.
Dupliceer opnieuw onze witte rechthoek en vul met zwart dat is verkleind tot 15% ondoorzichtigheid. Teken een andere rechthoekvorm over deze die is 79pt hoog en elke breedte en lijn het uit naar de top van de onderliggende rechthoekige vorm. Selecteer zijn nieuwe rechthoek en de grotere zwarte gevuld hieronder en kies vervolgens Snijden van de verkenner paneel.
Schakel de Type Tool (T) en voer een temperatuur in naar keuze. Ik wilde zeker weten dat ik voldoende ruimte had om uit te breiden, dus ik koos het nummer "100". Hiervoor gebruik ik het lettertype "Ontbrekend Gotisch" in het gewicht van "Zwart". De tekst zelf zal ook een vlak zwart zijn met de ondoorzichtigheid gedaald tot 15%. We richten hem vervolgens op de bovenkant van het witte gedeelte van onze container.
Aangezien dit wordt verondersteld weer te zijn, zal het niet zo nauwkeurig zijn, dus we zullen ook het mogelijke "laag" en "hoog" opnemen. Met de Type Tool (T) maak opnieuw een type van je schattingen en in plaats van het "Zwarte" gewicht te gebruiken, gebruiken we in plaats daarvan "Dun". Lijn dit naar de bodem uit en zorg ervoor dat er voldoende ademruimte is.
De donkere balk bovenin is onze tijdindicator. Kopieer het klokpictogram dat we eerder in deze zelfstudie hebben gemaakt en plaats het gecentreerd en links van dit donkerdere balkgebied. U kunt ook de Tijd-tekst van voordien kopiëren. Zorg ervoor dat u de Slagschaduw van deze elementen omdat het niet nodig is.
Voeg ten slotte een toe Slagschaduw naar de witte hoofdrechthoek en groepeer deze elementen samen. U kunt deze groep nu kopiëren en plaatsen 20px uit elkaar aan weerszijden van de gecentreerde elementen en zorg ervoor dat de tijd voor elke nieuwe kopie wordt aangepast. Als een toegevoegde bonus heb ik de tijd genomen widgets die van de pagina af gaan en hun grootte verkleinen 235pt hoog. Als je de beperking hebt vergrendeld bij het wijzigen van de hoogte van de hoogte, volgt de widget. Dit heeft een kommagetal erachter, dus het is niet exact. Omdat deze van de pagina af zijn, maakt u gebruik van het masker dat we eerder hebben gemaakt om de elementen te verbergen die van het scherm verdwijnen.
Daarmee is onze hoofdpagina compleet. Zorg ervoor dat u het achtergrondmengsel inschakelt en test om te zien hoe het eruit ziet op uw mobiele apparaat.
Laten we nu aan onze menu's beginnen. Ik vond het het gemakkelijkst om de laag met alle elementen van de hoofdpagina te kopiëren en vervolgens het kunstbord links van de hoofdpagina te selecteren en in de dubbele laag te plakken. Plaats het zo dat alleen het locatiepictogram zichtbaar is aan de rechterkant van het kunstbord. Maak nu een masker met dezelfde afmetingen als ons kunstbord en verberg de elementen die niet op de pagina staan.
Omdat ons algehele ontwerp 'plat' is in plaats van een gegradueerde schaduw om aan te geven dat de hoofdpagina boven het menu-element staat, gebruiken we een platte rechthoek met zwart gevulde rechthoek die is ingesteld op 10% dekking dat is 4pt breed en dezelfde hoogte als ons kunstbord.
In dit menu hebben we een gebied nodig om een nieuwe locatie toe te voegen, evenals een lijst met onze ingestelde locaties en schakelaars om automatische locatiedetectie in te schakelen en uit te schakelen in de eenheden waarin de temperatuur wordt weergegeven. Laten we beginnen met het maken van de nieuwe locatiegedeelte.
Selecteer de Rechthoekgereedschap (M) en maak een rechthoek die dat is 640 x 100pt en lijn het uit met de top van de art-board en voeg vervolgens een toe Slagschaduw.
Schakel nu het Afgeronde rechthoek-tool en maak een rechthoek die dat is 8 x 32pt en vul het met zwart. Dupliceer deze rechthoek en draai deze zodat hij de vorige vorm snijdt en een "+" symbool vormt. Selecteer beide rechthoeken en Verenigen zij van de verkenner paneel. Verminder de ondoorzichtigheid naar 25% en centreer het verticaal met het rechthoekelement dat we hebben gemaakt met de Slagschaduw van tevoren. Eenmaal verticaal gecentreerd, duwt u deze naar boven zodat deze ongeveer dezelfde afstand vanaf links is als van de boven- en ondergrenzen.
Selecteer tot slot de Type Tool (T) en voer de zin "Nieuwe locatie toevoegen ..." in met het "Mission Gothic" -lettertype verzonden naar "Thin" en laat de ondoorzichtigheid naar 15%.
Dupliceer de vorige rechthoek en lijn deze uit met de onderkant van de vorige en pas de Slagschaduw.
Kopieer over onze afgeronde vierkante vorm die we eerder voor onze pictogrammen gebruikten en in plaats van een lijn vul deze met plat zwart en verminder dan de ondoorzichtigheid naar 15%. Kopieer het "+" symbool dat we in de vorige stap hebben gemaakt en roteer het zodat het een "X" vormt en centreer het in onze afgeronde vierkante vorm en kies vervolgens Minus voorkant optie van de verkenner paneel.
Kopieer nu de tekst van het locatie-element van onze hoofdpagina en verwijder de Slagschaduw en stel de lettertypekleur in op zwart en verklein de ondoorzichtigheid naar 25%. U kunt meerdere instanties toevoegen zodat we kunnen zien hoe de lijst wordt gevuld wanneer nieuwe items worden toegevoegd.
Laten we werken aan het schakelelement voor dit menu. Dit element blijft aan de onderkant van dit menu staan, ongeacht hoe lang de lijst met locaties wordt. Begin met het maken van een rechthoek die dat is 640 x 200pt en voeg een toe Slagschaduw.
Met de Type Tool (T), typ de labels voor de schakelaars die we gaan maken. De ene is voor automatische locatiedetectie en de andere stelt in of de temperatuur in Fahrenheit of Celsius wordt weergegeven. Omdat het hoofdelement waar deze schakelaars in zitten, is 200pt hoge ruimte.
Laten we een scheidingsteken tussen deze twee labels toevoegen. Met de Lijnsegmenthulpmiddel (\), maak een regel die dat is 476pt breed en geef het een slag van 2pt. Deze streek zal zwart zijn met de ondoorzichtigheid gereduceerd tot 10pt.
Om de schakelaars zelf te maken, zullen we de ronde, vierkante vorm van vóór opnieuw gebruiken. Kopieer deze vorm en verklein hem naar 50pt en vul het met zwart. Klik met de rechtermuisknop deze vorm en kies Transformeer> Verplaats ... verplaats het dan horizontaal 80pt en klik op "Copy", niet op "OK". Je zou nu twee afgeronde vierkanten naast elkaar moeten hebben.
Selecteer de Rechthoekgereedschap (M) en teken een rechthoek die dezelfde hoogte heeft als onze afgeronde vierkanten en komt elk direct in het midden tegen. Selecteer alle drie van deze elementen en Verenigen hen in de verkenner paneel. Verminder de ondoorzichtigheid van deze vorm aan 15% en lijn het correct uit naast ons label.
Plak nogmaals in ons afgeronde vierkant en vul het met wit en pas de grootte aan 40 x 40pt. Lijn het uit aan de linker- of rechterkant zodat er een afstand rond de randstukken is. U kunt deze vormen nu dupliceren en ze horizontaal omdraaien om de tegengestelde schakeltoestand aan te geven. Voeg vervolgens uw tekst toe om de schakelstatus weer te geven. Doe dit voor zowel aan als uit.
Eindelijk kunt u dit element ook dupliceren voor de eenheidkiezer. En daarmee is ons locatiemenu compleet. Laten we naar ons Date-menu gaan.
Dit datummenu toont het weer voor de komende dagen. Laten we de eerste paar stappen van het menu Locatie herhalen en de gehele hoofdpaginalaag kopiëren en de elementen die van de pagina afvloeien maskeren en een rechthoek toevoegen om de menure schaduw weer te geven.
Maak nu een rechthoek die dat is 640 x 160pt en lijn het uit op de top van dat tekenbord en geef het een Slagschaduw.
We hebben iets nodig om de dag en de datum weer te geven, dus net zoals eerder laten we een kalenderpictogram maken. Maak een afgeronde rechthoek die dat is 120 x 120pt en voeg een innerlijke streek toe die dat is 8px. Ga nu naar Object> Uiterlijk uitbreiden om de lijn om te zetten in een werkelijke vorm. Met de Direct selectie gereedschap (A) ingeschakeld, selecteert u de bovenste binnenste ankerpunten en duwt u ze naar beneden 30px met behulp van de pijltjestoetsen op je toetsenbord. Verminder dan de ondoorzichtigheid naar 15%.
Voeg nu uw tekst toe aan het pictogram. We willen dat de topactie de dag van de week is. Dit wordt een witte tekst. De datum zelf zal zwart zijn met de ondoorzichtigheid gedaald tot 15%. Beide met "Maven Pro" in het "Medium" -gewicht.
Voeg ten slotte de verwachte temperatuur toe. Het lettertype is "Mission Gothic" voor de cijfers en "Maven Pro" voor het diplomasymbool. We zullen ook een "high / low" -selectie rechtsonder in het element toevoegen.
Als u wilt, kunt u dit element dupliceren en de dag / datum voor de rest van de week aanpassen.
Let op de afstand tussen elementen en exacte locatiecijfers die u kunt bedenken om de ontwikkelaars het werk gemakkelijker te maken. Hoe meer informatie u verstrekt, hoe eenvoudiger het voor de ontwikkelaar is om het product te coderen zodat het overeenkomt met het ontwerp. Ik kan ook niet genoeg benadrukken hoe belangrijk het is om altijd te testen terwijl je ontwerpt, zodat je weet dat je ontwerp zal vertalen naar het mobiele scherm. Veel succes met je app-ontwerp!
Accentsconagua