Share
Denne utformingen ble brukt i forbindelse med vår partnerside Mobiletuts +. Bart Jacobs, dyktig utvikler, har tatt dette brukergrensesnittet og opprettet en fungerende app ut av det og best av alt du kan følge med og lære å lage din egen! Du finner sin serie her: Del 1, Del 2, Del 3.
I denne opplæringen vil jeg gjerne vise deg hvordan du oppretter et retina klar brukergrensesnitt for et værprogram. Vi bruker flere kunstbrett og typografi for å lage et veldig minimalt grensesnitt.
Last ned skriftverdiene her:
Når du bruker skrifttyper for applikasjoner eller av en eller annen grunn, vennligst vær sikker på å sjekke lisensavtalen. Fordi dette bare er en opplæringsprogram og selve appen ikke vil bli tilgjengelig for salg, er det greit å bruke de ovennevnte skrifttyper. Men hvis du planlegger å lage din egen og ønsker å få en kommersiell lisens, vennligst følg instruksjonene for type designere om hvordan du gjør det.
Vi bruker flere kunstbrett for de ulike visningene som appen har, når vi har bestemt oss for dette med hjelp fra vår utvikler, vi kan fortsette og få dokumentet opprettet.
For å begynne med må vi lage et dokument på størrelse med vår mobile enhet. Siden vi jobber på iOS-plattformen, vil vi designe for iPhone 5 som har en høyere skjermstørrelse enn de tidligere inkarnasjonene til iPhone. Jeg finner arbeid på større størrelse, det er lett å skalere ned senere for andre enheter. Siden over hele designen er så minimal blir det lettere å fjerne plass senere enn å prøve og oppskalere det. Til dette formål blir dokumentet vårt 640 x 1136 pts (ikke piksler).
Mens brainstorming med utvikleren ble det besluttet at det vil være en hovedskjerm som vil glide til venstre eller høyre for å avsløre mer informasjon. Med dette i tankene vil vi også sette opp flere kunstbrett på dette tidspunktet også. En for hvert vindu som vil vises. Pass på å se over skjermbildet grundig for detaljer.
Når dokumentet er opprettet, må vi justere fargeprofilen. Så gå til Rediger> Tilordne profil og vær sikker på å deaktivere alle fargeprofilene. Når XCode forbereder dine eiendeler som skal bundtes med appen, stripes det helt fargeprofiler knyttet til eiendeler. På grunn av dette er det best å bare fjerne fargeprofiler fra dokumentet ditt og regelmessig teste designet ditt på en mobil skjerm for å sikre riktig fargeutgang.
Vår bakgrunn er ganske enkel. Fordi vi jobber med en mer eller mindre "flat" design, jobber vi med solide farger og blander for å oppnå effektene våre.
Vi bruker mellomstartsposten til å representere vår hovedside i appen. Den til venstre blir hva som skjer når du velger plasseringen. Og den til høyre vises når du velger datoen. Begynn med å tegne et rektangel i samme høyde og bredde av kunstbrettet i midten og fyll det med vår grunnfarge
Deretter oppretter du en sirkel som er nøyaktig 30 x 30pt og fyll det med fargen som er skissert nedenfor.
Kopier denne nyopprettede sirkelen og lim den bak den andre. Nå juster størrelsen til 2300 x 2300pt og slipp opacity ned til 0%.
Gå nå til Objekt> Blend> Blandingsalternativer ... og velg Spesifikke trinn så sett den til 30. Deretter lage (Objekt> Blend> Lag) blandingen.
Med den valgte blandingen senterer du den horisontalt på kunstbrettet og senterer sirkelen øverst på kunstbrettet som vist under.
Dupliser det flate bakgrunnsrektangelet og lim det over blandingen vi nettopp har opprettet. Velg nå både rektangelet og blandingen fra lagpaletten og velg Objekt> Clipping Mask> Make. På denne måten trenger vi ikke å bekymre oss for at vår ganske store blanding bløder over i våre andre kunstbrett.
En fin funksjon som vi trodde ville legge til litt flair til appen ville være å ha bakgrunnsendringsfarge avhengig av temperaturen. Så mens bakgrunnen vi laget akkurat nå, er for når den er "varm", vil vi nå duplisere disse elementene og justere farge og posisjon for å representere en mer "kald" følelse.
Fordi vår blandede sirkel-effekt har så mange trinn, kan det hende du oppdager en viss forsinkelse mens du fortsetter å lage appdesign. Siden dette kun er for estetiske formål, kan vi fortsette og deaktivere blandingslagene og forlate den flate bakgrunnsfargen for nå. Pass på å aktivere blandingslaget når du tester på mobilenheten, slik at du kan se hvordan teksten fungerer med bakgrunnen.
Vi vil stole tungt på typen for å få værinformasjonen på tvers. Av denne grunn har jeg valgt noen fine, rene, enkle å lese skrifter som virkelig gir appen litt personlighet. Jeg stikker med to skriftfamilier og bruker varierende bredder for å lage elementene sett.
For å begynne, må vi vise en dato av noe slag. Velg Typeverktøy (T) og skriv inn en dag i uken. Jeg bruker "tirsdag", og vår "Mission Gothic" skrift med vekten satt til "Tynn". Teksten i seg selv vil være hvit, og vi legger til en Drop Shadow for å hjelpe det stå utenfor bakgrunnen. Da plasserer vi den slik at den er sentrert på kunstbrettet og 20px fra toppen. For å gjøre dette, juster du det helt til toppen der grenseboksen berører kanten av kunstbrettet, og hold deretter Skifte og trykk på Ned pil på tastaturet to ganger.
Velg Typeverktøy (T) igjen og la oss lage vår temperaturmåler. Jeg liker ideen om at tallene selv er sentrert mens symbolet "grad" er av til høyre. Så, snarere enn å sentrere typen i Avsnitt panelet jeg har holdt det venstrejustert og bare tastet nummeret vi skal bruke til stedholderen. Jeg skal bruke "86" og skrifttypen "Maven Pro" med følgende informasjon sett på skjermbildet nedenfor.
Når du er opprettet, juster den til midten av kunstbrettet da toppen. En gang justert til toppen, Høyreklikk teksten og Transform> Flytt ... det ned 210pt. Velg nå typen og legg til gradersymbolet.
Nå som vi har temperaturen, la oss legge til et sted. Skriv ut din plassering, for meg er det "Nassau, BAH" gjerne bruke din egen. For å gi byen og landet litt kontrast bruker vi to forskjellige vekter. Byen vil være "Mission Gothic" satt til "Regular", og landet vil bli "Mission Gothic" satt til "Tynn".
Når det gjelder plassering, sa jeg tidligere at jeg liker ideen om at temperaturfiguret er sentrert, men for all den andre teksten vil jeg at den skal justeres til venstre basert på temperaturfrekvensens bredde. Så for nå vil jeg manuelt linje denne adressen til venstre for temperaturen og plassere den 20 pkt fra bunnen. Du er velkommen til å finjustere denne avstanden som du finner passende. Pass på at du alltid sjekker elementene på mobilenheten.
Vi kan stoppe her hvis vi vil, men utvikleren vil gjerne inkludere noen tilleggsinformasjon. Så vi lager tre separate linjer med tekst. En for den nåværende tiden, en for vindhastigheten, og en annen for fuktigheten. Pass på at du oppretter dem separat, da vi bruker forskjellige skriftstørrelser og -vekter, og dette kan kaste av linjens høyde for disse elementene.
Jeg liker tallformene fra vår "Maven Pro" -fontype, så jeg fortsetter å bruke denne fonten for tallene i disse elementene, bare vi bruker "Medium" vekten og kontrast dem med "Mission Gothic" -fonttegnet til " Tynn "og for denne tynnere skrifttypen vil vi også sette den til" Små caps ". Du kan angi små kapsler ved å markere riktig skrift og klikke på menyikonet øverst til høyre på Karakter panelet og deretter velge Små caps.
Vår typografi får vår melding ganske bra, men vi må fortsatt lage ikoner for å representere hva de forskjellige tallene er, og å angi menyer i appen. Jeg ble forelsket i formen på grader-symbolet for "Maven Pro" -typen, så jeg trodde jeg ville knytte ikonelementene sammen med typen ved å bruke denne formen igjen for å lage ikonene.
Med Typeverktøy (T) aktivert skriv inn gradersymbolet. Den eksakte størrelsen spiller ingen rolle på dette punktet, siden vi vil justere det slik at det passer til våre ikonstørrelser. Deretter høyreklikk og velg "Lag oversikter"for å konvertere typen til en redigerbar form. Aktiver nå Direkte utvalgsverktøy (A) og velg den mindre indre banen og fjern den. Vi bruker et slag senere for å få den riktige widgeten for våre ikoner. Når du har din buede firkantede form, sørg for å justere høyde bredde slik at de er akkurat det samme. De vil være litt av, og vi må sørge for at de er presise når du legger til elementer senere.
Vi bruker og bruker denne formen flere ganger, så sørg for at du har en kopi av den hvis du mister originalen mens du arbeider. For nå skal vi opprette et ikon for å representere lokaliseringsmenyen.
Med vår avrundede firkantede form kopiert, la oss krympe den ned til 32 x 32pt, og legg til et indre Stroke av 3px
Aktiver Avrundet rektangelverktøy og lag et rektangel som er 3 x 12pt og øk de avrundede hjørner slik at endene er helt runde. Nå dupliser denne formen tre ganger og roter den slik at den danner en slags krysshårform og deretter gruppere alle gjenstandene sammen. Til slutt med gruppen valgt, legg til en Drop Shadow og plasser den 30pt fra både toppen og venstre på kunstbrettet. Pass på å sjekke avstanden på mobilenheten og juster deretter.
La oss kopiere vår avrundede firkantede form fra vårt stedikon siden de andre ikonene vil være basert på samme form og størrelse. Juster plasseringen av avrundet rektangel til det ved siden av Time-elementet. I likhet med det faktiske gradersymbolet fra temperaturelementet vil jeg at ikonene for disse ekstra detaljene også skal ligge utenfor temperaturen bare denne gangen vil det åpenbart være til venstre for elementene.
Som du kan forestille deg, for Time-elementet vil vi bli opprettet et klokkeikon. Vår avrundede firkantede form vil være klokkeansiktet, og nå må vi gjøre klokka hendene. Velg Avrundet rektangelverktøy og lag et rektangel som er 10 x 4pt og juster den til midten av klokkeflaten. Dupliser denne prosessen bare denne gangen 4 x 12pt. Når du har klokkehendene i et behagelig sted, grupperer du elementene sammen og legger til en Drop Shadow.
Dupliser det runde torget igjen fra vårt forrige ikon og juster det ved siden av vårt vindelement. For dette ikonet skal vi prøve å oppnå en fin effekt der selve ikonet bidrar til å fremme vindinformasjonen ved å gi en pil som indikerer direkte vinden blåser for tiden. Så som du kan gjette, skaper vi en pil i midten for dette bestemte ikonet. Begynn med å opprette en Avrundet rektangel det er 4 x 9pt og sentrere den i det runde torget. Deretter lager du et perfekt firkant med Avrundet rektangelverktøy det er 12 x 12pt og fjern et av hjørnene. Lukk nå den åpne banen og roter den slik at den skaper opppunktet til pilen vår, og senter den over stemgeldelen av pilen, og sørg for å gjemme de øverste avrundede hjørner helt.
Når pilen er fullført, grupperer du stammen og peker sammen og lager deretter syv flere kopier. Roter hver av disse kopiene i kvartalet, slik at du har en peke opp, en som peker mot øverst til høyre, en annen til høyre og så videre. Fordi vår hovedform ikke er en fullstendig sirkel, vil det bare være å rotere formen med pilen, så vi må ha et pilikon for hver retning vinden kan blåse. Når disse er opprettet, kan du gjemme unødvendige piler og deretter gruppere pilene og avrundet torg sammen og bruk a Drop Shadow.
Lim inn en kopi av vår avrundede firkantede form en gang til, og sett den opp med vårt Fuktighetselement. Opprett nå en sirkel som er 8 x 8pt og senteret justerer den i hovedformen og legger den til bunnen. Aktiver Direkte utvalgsverktøy (A) og velg det øverste ankerpunktet fra sirkelen og dra det opp for å skape en dråpeform, ta også håndtakene litt inn for å få et finere punkt på dråpet. Dupliser denne dråpeformen to ganger og reduser størrelsen og plasser dem i nærheten av toppen og på hver side av den større dråpen. Endelig Gruppe (Kontroll + G) elementene sammen og legg til en Drop Shadow.
For det siste ikonet i denne hoveddelen trenger vi noe som representerer datoen. Vi kom opp med et kalenderikon som også viser datoen for måneden.
For å begynne å lage en Avrundet rektangel det er 40 x 36pt og gi den et indre slag av 3pt. Gå nå til Objekt> Utvid Utseende å konvertere streken til en faktisk form. Med Direkte utvalgsverktøy (A) aktivert, velg de øverste indre ankerpunktene og kutt dem ned 9px ved hjelp av piltastene på tastaturet. Med Avrundet rektangelverktøy opprett to runde pilleformer som er 9pt Bred og hvilken som helst høyde du ønsker, legg dem over det større avrundede firkantet, så bunnen møter halvveis mellom det store hvite området. Deretter minus disse nye figurene fra firkantet form ved hjelp av Pathfinder panel. Lag to flere piller, denne gangen vil de bli 3 x 8pt og linje dem opp i kutt ut seksjoner. Til slutt legger vi til en plassholderdato med følgende innstillinger, så vi grupperer disse elementene og legger til en Drop Shadow.
Når det ble pitchet, ønsket utvikleren å ha et sett med rullbare widgets langs bunnen av appens hovedside som viste forventet timevis for den aktuelle dagen. Så for å fullføre vår hovedside av appen, la oss lage de nå.
Aktiver Avrundet rektangelverktøy og lag et hvitt rektangel som er 165 x 250pt, senter justere det med kunstbrett og plasser det 40px fra bunnen av kunstbrettet.
Dupliser dette rektangelet og fyll det med svart. Dupliserer den en gang til og slår den opp 4px deretter Minus Front i Pathfinder panel. Du kan da slippe Opacity til 15%.
Dupliserer vårt hvite rektangel igjen og fyll med svart som er redusert til 15% opacity. Tegn en annen rektangelform over denne som er 79pt høy og hvilken som helst bredde og linje den opp til toppen av den underliggende rektangelformen. Velg hans nye rektangel og større svart fylt på under, velg deretter Krysse fra Pathfinder panel.
Aktiver Typeverktøy (T) og angi en temperatur du velger. Jeg ønsket å sørge for at jeg hadde nok plass til å utvide, så jeg valgte nummeret "100". For dette vil jeg bruke "Manglende gotisk" skrift i vekten "Svart". Teksten i seg selv vil også være en flat svart med opacity falt til 15%. Vi justerer den så nær toppen av den hvite delen av containeren vår.
Siden dette antas å være projisert vær, vil det ikke være så nøyaktig, så vi vil også inkludere mulig "lav" og "høy". Med Typeverktøy (T) lag igjen opp estimatene dine og i stedet for å bruke "svart" vekten, bruker vi i stedet "Tynn". Juster dette mot bunnen, sørg for at det er nok pusterom.
Den mørkere baren øverst vil være vår tidsindikator. Kopier klokkeikonet vi opprettet tidligere i denne opplæringen, og plasser den sentrert og til venstre for dette mørkere barområdet. Du kan også kopiere Time-teksten fra før også. Pass på at du fjerner Drop Shadow fra disse elementene som det ikke er nødvendig.
Til slutt legg til en Drop Shadow til hoved hvitt rektangel, og grupper disse elementene sammen. Du kan nå kopiere denne grupperingen og plassere dem 20px fra hverandre på hver side av de sentrerte elementene, sørg for å justere tiden for hver ny kopi. Som en ekstra bonus har jeg tatt tid widgets som går av siden og redusert størrelsen deres til å være 235pt høy. Hvis du har begrensningen låst når du tilpasser høyden, vil widgeten følge med. Dette vil ha et desimalnummer bak det, slik at det ikke er nøyaktig. Siden disse er av, må du bruke eller masken vi opprettet tidligere, for å skjule elementene som går av skjermen.
Dermed er vår hovedside fullført. Pass på å slå på bakgrunnsblandingen og test for å se hvordan den ser ut på mobilenheten din.
La oss nå begynne å jobbe på menyene våre. Jeg fant det enklest bare å kopiere laget med alle elementene fra hovedsiden, velg deretter kunstbrettet til venstre for hovedsiden og lim inn i duplikatlaget. Plasser den slik at bare ikonet for plassering er synlig på høyre side av kunstbrettet. Opprett nå en maske som er de samme dimensjonene i vårt kunstbrett, og skjul elementene som er utenfor siden.
Siden vår overordnede design er "flat" i stedet for en gradert skygge for å indikere at hovedsiden er over menyelementet, bruker vi et flatt svart fylt rektangel satt til 10% Opacity det er 4PT bred og i samme høyde som vårt kunstbrett.
I denne menyen trenger vi et område for å legge til en ny plassering, samt liste av våre angitte steder og brytere for å aktivere / deaktivere automatisk lokaliseringsdeteksjon og enhetene der temperaturen vises. La oss begynne med å opprette den nye plasseringen delen.
Velg Rektangelverktøy (M) og lag et rektangel som er 640 x 100pt og juster den til toppmoderne bord og legg til en Drop Shadow.
Aktiver nå Avrundet rektangelverktøy og lag et rektangel som er 8 x 32pt og fyll den med svart. Dupliser dette rektangelet og roter det slik at det krysser forrige form som danner en "+" symboler. Velg både rektangler og Forene dem fra Pathfinder panel. Minske opacity til 25% og senter den vertikalt med rektangelelementet vi opprettet med Drop Shadow fra før. Når du senterer vertikalt, skyver du den over, så det er omtrent samme avstand fra venstre som den er fra topp- og bunngrenser.
Endelig velg Typeverktøy (T) og skriv inn setningen "Legg til ny plassering ..." ved hjelp av "Mission Gothic" skrifttypen sendt til "Tynn" og slipp opacity til 15%.
Dupliser det forrige rektangelet og juster det til bunnen av den forrige, og juster deretter Drop Shadow.
Kopier over vår avrundede firkantede form som vi tidligere brukte til ikonene, og i stedet for et slag, fyll det med flat svart og reduser opacity til 15%. Kopier "+" -symbolet vi lagde i forrige trinn og roter det slik at det danner en "X" og senter den inne i vår avrundede firkantede form, og velg deretter Minus Front alternativ fra Pathfinder panel.
Kopier nå lokaliseringsteksten fra vår hovedside og fjern Drop Shadow og sett skriftfargen til svart og reduser opacity til 25%. Du er velkommen til å legge til flere forekomster bare slik at vi kan se hvordan listen vil fylle ut når nye elementer legges til.
La oss jobbe på bryterelementet for denne menyen. Dette elementet sitter fast på bunnen av denne menyen, uansett hvor lenge listen over steder blir. Begynn med å skape et rektangel som er 640 x 200pt og legg til en Drop Shadow.
Med Typeverktøy (T), skriv ut etikettene for bryterne vi skal lage. En vil være for automatisk lokaliseringsdeteksjon, og den andre vil stille om temperaturen vises i Fahrenheit eller Celsius. Siden hovedelementet disse bryterne sitter i er 200pt høy plass.
La oss legge til en separator mellom disse to etikettene. Med Linjesegmentverktøy (\), lag en linje som er 476pt bredt og gi det et slag av 2PT. Dette slaget vil være svart med opacity redusert til 10pt.
For å lage bryterne selv vil vi gjenbruke den avrundede firkantede formen fra før. Kopier denne formen og endre størrelsen på den 50pt og fyll den med svart. Høyreklikk denne formen og velg Transform> Flytt ... deretter flytte den horisontalt 80pt og klikk "Kopier", ikke "OK". Du bør nå ha to runde firkanter ved siden av hverandre.
Velg Rektangelverktøy (M) og tegne et rektangel som er i samme høyde som våre avrundede firkanter og møter hver direkte i midten. Velg alle tre av disse elementene og Forene dem i Pathfinder panel. Minske opacity av denne formen til 15% og juster det riktig ved siden av vår etikett.
Lim inn i vårt runde torg en gang til og fyll det med hvitt og juster størrelsen som skal være 40 x 40pt. Juster den til venstre eller høyre side slik at det er avstand rundt kantstykkene. Du kan nå kopiere disse figurene og vende dem horisontalt for å indikere motsatt bryterstatus. Legg deretter til i teksten din for å representere bryterstaten. Gjør dette for både på og av.
Til slutt kan du også kopiere dette elementet til enheten. Og med det er vår lokaliseringsmeny fullført. La oss gå videre til vår Date-meny.
Denne dataarmenyen viser været for de kommende dagene. La oss gjenta de første trinnene fra lokaliseringsmenyen og kopiere over hele hovedsidelaget og maske av elementene som går av siden og legg til et rektangel for å representere menyskyggen.
Lag nå et rektangel som er 640 x 160pt og juster den til toppen av kunstarket og gi den en Drop Shadow.
Vi trenger noe for å representere dagen og datoen, slik som før, la oss lage et kalenderikon. Lag et avrundet rektangel som er 120 x 120pt og legg til et indre slag som er 8 piksler. Gå nå til Objekt> Utvid Utseende å konvertere streken til en faktisk form. Med Direkte utvalgsverktøy (A) aktivert, velg de øverste indre ankerpunktene og kutt dem ned 30px ved hjelp av piltastene på tastaturet. Reduser deretter opacity til 15%.
Legg nå teksten til ikonet. Vi ønsker at toppaksjonen skal være dagen i uken. Dette blir hvit tekst. Datoen selv vil være svart med opacity falt til 15%. Begge bruker "Maven Pro" i "Medium" vekten.
Til slutt legg til den forventede temperaturen. Skriften vil være "Mission Gothic" for tallene og "Maven Pro" for gradersymbolet. Vi legger også til et "høyt / lavt" utvalg nederst til høyre på elementet.
Hvis du ønsker, kan du duplisere dette elementet og justere dagen / datoen for resten av uken.
Pass på å merke avstanden mellom elementene og eventuelle nøyaktige plasseringsfigurer du kan tenke på for å gjøre utviklerne enklere. Jo mer informasjon du gir lettere, det vil være for utvikleren å kode produktet for å matche designet. Jeg kan heller ikke stresse nok hvor viktig det er å alltid teste mens du designer, slik at du vet at designet ditt vil oversette til mobilskjermen. Lykke til med appdesignen din!
Accentsconagua