Tips for utforming av elegante iPhone-app-grensesnittoppsett i Photoshop
Grafisk design for nettet har vært en populær trend i evigheter. Og med oppfinnelsen av Apples iPhone tilbake i 2007 har appbutikken vokst enormt mye. Nå har vi iOS-app designere og utviklere som kommer sammen for å bygge noen virkelig fantastiske forestillinger til virkelighet.
Men hvis du ikke er glad i å lære Xcode og programmere Objekt-C, kan Photoshop ha større interesse. Nedenfor skal jeg tilby noen av tipsene jeg har plukket opp for å designe mordere for iOS-apper. Og siden det alltid er nye trender dukker designsamfunnet stadig opp hvordan man lager apper. Tenk på dette som mer en nybegynners ressursveiledning for design for Apple-enheter.
Riktig dokumentinnstillinger
Før du overveier elementer på siden, bør du forstå hvordan iPhone-grafikken er laget. I det nyere netthinnedisplayet på iPhone 4 / 4S-modeller er skjermen fortsatt fysisk målt i samme størrelse. Imidlertid er skjermen i piksler faktisk doblet fra originalen - noe som betyr at vi bruker 640 × 960 i en oppløsning på 326ppi.
I tillegg var iPhone 3 / 3GS-ikonene vanligvis 57 × 57 piksler. iPhone 4 og 4S skjermer bruker 114 × 114 som standard (men skaleres opp for eldre oppløsninger). Heldigvis er ikondesignprosessen ganske løsrevet fra å lage en UI-layout. Men som designer er det aldri vondt å bygge begge ferdighetene.
Hvis du bruker disse innstillingene mye, anbefaler jeg at du lagrer dem som forhåndsinnstilt dokumentstørrelse. I det nye dokumentvinduet for Photoshop vil du se en knapp merket “Lagre forhåndsinnstilling…”. Bare gi det et navn, og du kan velge dette fra rullegardinlisten hver gang du oppretter et nytt dokument.
I stedet for å lage iPhone UI-elementene manuelt, tilbyr Teehan + Lax en gratis nedlasting av UI-kit spesielt for Photoshop. Dette inkluderer en iPhone 4-gjengivelse, topplinjer, knapper, tastaturer og mange andre nyttige ting. Definitivt ta tak i dette først og lagre det i en lokal katalog der du har enkel tilgang til disse elementene.
Tilpass stolpene og knappene
Både det øverste og nederste området av appen din vil sannsynligvis inneholde menylinjer. Toppen brukes til merking av gjeldende visning, sammen med bak- og redigerings knapper. Bunnen er vanligvis navigasjon og bruker ofte faner for å oppnå dette.
Teehan + Lax bruker noen virkelig generiske eksempler på disse. Men de er mye enklere å tilpasse med dine egne farger, teksturer og hva annet øye-godteri du har. Så som et eksempel, la oss ta gruppelaget (gråblått) og dra det inn i et nytt dokumentvindu i iPhone-størrelse. Klikk deretter på den lille trekanten til venstre og åpne en annen undergruppe merket Bar Top . Helt nederst er et bakgrunnslag med en overleggseffekt for gradienten.
Åpne FX på dette bakgrunnslaget og dobbeltklikk på gradientoverlay. Jeg fjernet standardfargene fra Apple og har satt (fra venstre til høyre) # 3478a7 til # 5eb0e7. De to knappene må også miste gradientene - for disse brukte jeg verdiene # 052b50 til # 044a8e for en rik mørk effekt.
Moro med teksturer
Du kan bare si ved disse små gradientendringene at å tilpasse appen din er en ganske enkel oppgave. For bare litt detalj kan vi legge til en tekstur eller mønster over søylenes gradientområde. Vi tar med noen skrå striper for dette demoeksemplet.
Begynn med å lage et nytt dokument 7 × 7 piksler med transparent bakgrunn. Sett deretter blyantverktøyet i minste skala (1px med 1px) og koble fra øverste høyre hjørne nederst i venstre hjørne. Jeg har brukt svart HEX # 000000, men det skal ikke ha noe å si, siden du alltid kan endre farge senere. Sjekk skjermdumpen nedenfor hvis du ikke følger:
Nå trykker du Rediger -> Definer mønster ... og gir det et navn, og trykk deretter lagre. Lukk gjerne vinduet nå (uten å lagre), siden alt vi trengte var mønsteret. Nå tilbake til bar- gruppen, opprett et nytt lag over bakgrunnen. CMD + klikk eller CTRL + klikk på vektormasken som vil velge hele bakgrunnsgradientlinjen.
Men pass på at du klikker tilbake på det nye laget som nettopp ble opprettet, slik at det er uthevet i blått. Vi kommer til å fylle det med dette nye mønsteret, men vi vil bare se striper over topplinjegradienten (og under knappene). Gå til toppmenyen til Rediger -> Fyll og velg “Mønster” fra rullegardinmenyen. I boksen nedenfor skal du velge det siste prikkete mønsteret og trykke OK.
Linjene virker ganske stive med det første. Så i lagpallen slipp fyllet ned til omtrent 20% verdi. Vi kan også endre blandingsmodus til Overlay slik at stolpene vil flyte med gradientfargene. Zoom tilbake til 100% og sjekk ut den fantastiske effekten!
Du kan bygge en annen søt tekstur ved å sette opp en 3px by 3px doc og fylle ut et plussymbol. Jeg la til et eksempel ovenfor på hvordan dette endrer utseendet til topplinjen gradient så dramatisk. Du kan også prøve å endre fargen fra ren svart til ren hvit #FFFFFF.
Ikoner for fanefelt
Navigasjonsknappene som er funnet nederst på appen din, er avgjørende for den generelle brukeropplevelsen. Brukere må finne ut hvor de skal redigere innstillinger, hvordan de skal utføre oppgaver og hva de skal gjøre i appen din raskt. Ellers blir de ofte frustrerte eller kjeder seg og slutter å prøve. Så som et tips til, la oss gran opp nav-området i den nederste linjen.
Bruk den samme iPhone 4 GUI PSD-filen for å finne “tab-bar” -gruppen. Husk at du kan gjøre dette ved å CMD / CTRL + klikke på blokken i Photoshop. I likhet med topplinjen kan vi redigere bakgrunns FX-gradient for noen samsvarende stiler. Men alternativt går den svarte standardgradienten godt med de fleste fargeskjemaer.
For noen ikoner anbefaler jeg arbeidsgruppens netthinnesett som kommer i 24px, 48px og 64px. Hvert av ikonene fra GUI PSD har FX-lagstiler brukt - i utgangspunktet en lys dropskygge og en overlaygradient. Disse små detaljbitene gir virkelig opp til et fantastisk design, så vær nøye med pikslene dine. Prøv å bruke denne fargevalgsdesigneren hvis du har problemer.
Du bør tenke på hvordan tekstetiketter vil påvirke brukeropplevelsen. Hvis du føler at faneikonene er nok på egen hånd, kan etikettekst bare komme i veien. Det er imidlertid viktig å holde alternativene åpne og leke med noen få forskjellige ideer. Forsøk å få meningene fra venner og kolleger for å se hvilken metode som er best for appen din.
En annen ganske populær teknikk er for appdesignere å lage en midtknapp som deler tabulatorfeltet i 5 spor. Jeg har sett mange virkelig kreative applikasjoner som bruker dette designet for å spare plass og legge til litt eleganse i navigasjonen. Formspring er ett eksempel, jeg la til skjermen nedenfor.
Hjelpsomme linker
- Glyphish Ikonoppsett
- Design en iPhone Bank-app i Photoshop [Opplæring]
- Design iPhone-applikasjoner i Photoshop [PDF]
- Nyttig samling av iPhone / iPad App Developer Tools og ressurser
- Tips og ressurser for brukervennlighet for iOS for iPhone og iPad-apper
- Hvordan lage din første iPhone-applikasjon
Konklusjon
Disse strategiene for å jobbe med iOS-apper og Adobe Photoshop vil være nyttige når du videreutvikler designsansene dine. Mobilapplikasjoner er et helt annet ballspill sammenlignet med nettsteder og logoer. Husk dette gjennom hele prosessen siden du stadig lærer nye teknikker.
Sammen med koblingene som er lagt til over, skal du føle deg mye mer komfortabel med å gå videre med design av appgrensesnitt. Layoutmodeller er alltid vanskelige og krever tid å bygge og studere. Men hvis du har nok engasjement, er mobilmarkedet muligens det mest velstående området å være. Hvis du har flere spørsmål eller kommentarer, vennligst gi oss beskjed i diskusjonsområdet nedenfor.
