Grafisk design för webben har varit en populär trend för åldrar. Och med uppfinningen av Apples iPhone tillbaka 2007 har appbutiken vuxit en enorm mängd. Nu har vi iOS-appdesigners och -utvecklare kommit tillsammans för att bygga några riktigt fantastiska uppfattningar i verkligheten.
Men om du inte är förtjust i att lära Xcode och programmera Objective-C kan Photoshop hålla mer intresse. Nedan kommer jag att erbjuda några av de tips jag har tagit upp för att designa mördare iOS app mockups. Och eftersom det alltid finns nya trender som utvecklas, definierar designgemenskapen ständigt hur man skapar appar. Tänk på detta som en nybörjarresursguide för att designa för Apple-enheter.
Korrekt dokumentinställningar
Innan du ens överväger element på sidan, bör du förstå hur iPhone grafiken skapas. I den nya retina-skärmen på iPhone 4 / 4S-modellerna är skärmen fortfarande fysiskt uppmätt i samma storlek. Visningen i pixlarna fördubblas dock faktiskt från originalet, vilket betyder att vi använder 640? 960 vid 326ppi upplösning.
Dessutom var iPhone 3 / 3GS-ikonen i allmänhet 57 57 pixlar. iPhone 4 och 4S skärmar använder 114? 114 som standard (men kommer att skala upp för äldre upplösningar). Tack och lov är ikonens designprocess ganska avskild från att skapa en UI-layout. Men som designer gör det aldrig ont för att bygga båda färdigheterna.
Om du använder dessa inställningar rekommenderar jag att du sparar dem som förinställd dokumentstorlek. I det nya dokumentfönstret för Photoshop ser du en knapp märkt? Spara förinställning? ?. Ge det bara ett namn och du kan välja det från rullgardinslistan varje gång du skapar ett nytt dokument.
Istället för att skapa iPhone UI-element manuellt, erbjuder en blogg Teehan + Lax ett gratis UI-paket nedladdning specifikt för Photoshop. Detta inkluderar en iPhone 4 gör, topprader, knappar, tangentbord och massor av andra användbara saker. Ta det här först först och spara det till en lokal katalog där du enkelt har tillgång till dessa element.
Anpassa staplarna och knapparna
Både topp och botten av din app kommer sannolikt att innehålla menyrader. Överst används för att märka den aktuella vyn, tillsammans med bakåt och redigera knappar. Bottnen är i allmänhet navigering och brukar använda flikar för att uppnå detta.
Teehan + Lax använder några riktigt generiska exempel på dessa. Men de är mycket lättare att anpassa med egna färger, texturer och vad som helst annat ögon-godis du har. Så som ett exempel, låt oss ta grupplagret Bar (Gråblå) och dra det till ett nytt dokumentfönster i iPhone-format. Klicka sedan på den lilla triangeln till vänster och öppna öppna en annan undergrupp märkt Bar Top. Längst ner är ett bakgrundsskikt med överlagseffekt för gradienten.
Öppna FX på det här bakgrundsskiktet och dubbelklicka på gradientöverlagring. Jag tog bort standardfärgerna från Apple och har satt (från vänster till höger) # 3478a7 till # 5eb0e7. Även de två knapparna måste förlora sina gradienter - för dessa använde jag värdena # 052b50 till # 044a8e för en rik mörk effekt.
Roligt med texturer
Du kan bara berätta av dessa små gradientförändringar om att anpassa din app är en ganska enkel uppgift. För bara lite detalj kan vi lägga till en textur eller ett mönster över bargradienten. Vi kommer att gå med några sneda ränder för det här demo-exemplet.
Börja med att skapa ett nytt dokument 7? 7 pixlar med en genomskinlig bakgrund. Sätt sedan in ditt pennaverktyg i minsta skala (1px med 1px) och koppla från det övre högra hörnet till det nedre vänstra hörnet. Jag har använt svart HEX # 000000 men det spelar ingen roll eftersom du alltid kan ändra färgen senare. Kolla in skärmdumpen nedan om du inte följer:
Hit nu Redigera -> Definiera mönster? och ge det ett namn och tryck sedan på spara. Känn fria att stänga fönstret nu (utan att spara) eftersom allt vi behövde var mönstret. Nu tillbaka in i bar top grupp skapa ett nytt lager ovanför bakgrunden. CMD + klicka eller CTRL + klicka på vektormasken som väljer alla bakgrundsgradientfältet.
Men se till att du klickar tillbaka på det nya lagret som just skapats så att det är markerat i blått. Vi ska fylla det med det här nya mönstret, men vi vill bara se ränder över den övre streckgradienten (och under knapparna). På toppmenyn gå till Redigera -> Fyll och välj? Mönster? från rullgardinsmenyn. I rutan nedan bör du välja det sista prickade mönstret och trycka på OK.
Linjerna verkar ganska styva först. Så i skikten faller pallet fyllningen till ca 20% värde. Vi kan också ändra blandningsläge till överlagring så att staplarna kommer att flöda med gradientfärgerna. Zooma ut till 100% och kolla in den fantastiska effekten!
Du kan bygga en annan söt textur genom att skapa en 3px med 3px doc och fylla i en plus-symbol. Jag lade till ett exempel ovan om hur detta förändrar utseendet på vår toppstångsgradient så dramatiskt. Du kan också försöka ändra färgen från ren svart till ren vit #FFFFFF.
Tab Bar Ikoner
Navigeringsknapparna längst ner i din app är avgörande för den övergripande användarupplevelsen. Användare måste ta reda på var du ska redigera inställningar, hur du utför uppgifter och vad du ska göra i din app snabbt. Annars blir de ofta frustrerade eller uttråkade och slutar försöka. Så som ett enda tips får vi gräva upp navområdet i bottenfältet.
Använda samma iPhone 4 GUI PSD-fil hitta fliken?? grupp. Kom ihåg att du kan göra detta med CMD / CTRL + klicka på blocket i Photoshop. På samma sätt som den övre fältet kan vi ändra bakgrunds-FX-gradienten för vissa matchande stilar. Men alternativt går den svarta standardgradienten bra med de flesta färgscheman.
För vissa ikoner rekommenderar jag starkt Arbetsgruppens näthinneset som kommer i 24px, 48px och 64px. Var och en av ikonerna från GUI PSD har tillämpat FX-lagstilar - i princip en lätt drop-skugga och en överlagradient.Dessa små bitar av detaljer ger verkligen en fantastisk design, så var uppmärksam på dina bildpunkter. Försök använda denna färgscheman designer om du har problem.
Du bör tänka på hur textetiketter påverkar användarupplevelsen. Om du tycker att flikikonen är tillräckliga på egen hand kan etiketttexten bara komma i vägen. Men det är viktigt att hålla dina alternativ öppna och leka med några olika idéer. Försök få åsikter från vänner och medarbetare för att se vilken metod som är bäst för din app.
En annan ganska populär teknik är att appdesigners skapar en mittknapp som delar upp flikfältet i 5 slitsar. Jag har sett mycket kreativa applikationer med hjälp av denna design för att spara utrymme och lägga till lite elegans i navigeringen. Formspring är ett exempel, jag lade till skärmen nedan.
Användbara länkar
- Glyphish Icon Set
- Skapa en iPhone-bankapp i Photoshop [Tutorial]
- Design iPhone-applikationer i Photoshop [PDF]
- Användbar samling av iPhone / iPad App Utvecklarverktyg och resurser
- IOS Användbarhetstips och resurser för iPhone och iPad Apps
- Så här skapar du din första iPhone-applikation
Slutsats
Dessa strategier för att arbeta med iOS-appar och Adobe Photoshop kommer att vara till nytta när du vidareutvecklar dina design sinnen. Mobila applikationer är en helt annan ballspel jämfört med webbplatser och logotyper. Håll i åtanke hela processen eftersom du ständigt kommer att lära dig nya tekniker.
Tillsammans med ovanstående länkar borde du känna dig mycket bekvämare framåt med appgränssnittsdesign. Layoutmockups är alltid svåra och kräver tid att bygga och studera. Men om du har tillräckligt med engagemang är mobilmarknaden möjligen det mest välmående området att vara. Om du har ytterligare frågor eller kommentarer, vänligen meddela oss i diskussionsområdet nedan.