Tipy pro navrhování elegantního rozložení uživatelského rozhraní pro iPhone aplikace ve Photoshopu
Grafický design pro web byl věkem populární trend. A s vynalezením iPhone od Apple v roce 2007 se obchod s aplikacemi rozrostl o obrovské množství. Nyní máme designéry a vývojáře aplikací pro iOS, kteří se spojují a vytvářejí opravdu fantastické koncepty do reality.
Ale pokud nemáte rádi učení Xcode a programování Objective-C, Photoshop může mít větší zájem. Níže nabídnu několik tipů, které jsem vyzvedl pro navrhování maket aplikací pro vrahy iOS. A protože se neustále objevují nové trendy, komunita návrhářů neustále předefinuje způsob vytváření aplikací. Přemýšlejte o tom jako o příručce pro začátečníky k navrhování zařízení Apple.
Správné nastavení dokumentu
Než začnete uvažovat o prvcích na stránce, měli byste pochopit, jak se vytváří grafika pro iPhone. Na novějším displeji sítnice u modelů iPhone 4 / 4S je obrazovka stále fyzicky měřena ve stejné velikosti. Zobrazení v pixelech je však ve skutečnosti zdvojnásobeno oproti původnímu - to znamená, že používáme 640 × 960 v rozlišení 326ppi.
Ikony iPhone 3 / 3GS byly navíc obvykle 57 × 57 pixelů. Obrazovky iPhone 4 a 4S ve výchozím nastavení používají 114 × 114 (pro starší rozlišení se však zvětší). Naštěstí proces návrhu ikony je poměrně oddělen od vytváření rozvržení uživatelského rozhraní. Ale jako designér nikdy neuškodí budovat obě dovednosti.
Pokud budete tato nastavení používat hodně, doporučujeme je uložit jako přednastavenou velikost dokumentu. V novém okně dokumentu pro Photoshop uvidíte tlačítko označené „Uložit předvolbu ...“. Stačí jej pojmenovat a můžete si vybrat z rozevíracího seznamu pokaždé, když vytvoříte nový dokument.
Namísto ručního vytváření prvků uživatelského rozhraní iPhone nabízí blog Teehan + Lax bezplatnou verzi sady UI ke stažení speciálně pro Photoshop. To zahrnuje vykreslení iPhone 4, horní lišty, tlačítka, klávesnice a tuny dalších užitečných věcí. Určitě to nejprve uchopte a uložte do místního adresáře, kde máte snadný přístup k těmto prvkům.
Přizpůsobte pruhy a tlačítka
Horní i dolní část aplikace bude pravděpodobně obsahovat panely nabídek. Horní část se používá k označení aktuálního pohledu spolu s tlačítky zpět a úprav. Spodní část je obvykle navigace a k tomu se nejčastěji používají karty.
Teehan + Lax k tomu používá několik opravdu obecných příkladů. Je však mnohem snazší je přizpůsobit podle vašich vlastních barev, textur a dalších bonbónů, které máte. Jako příklad si vezměme Skupinovou vrstvu (Šedá-Modrá) a přetáhněte ji do nového okna dokumentu velikosti iPhone. Poté klikněte na malý trojúhelník vlevo a otevřete otevřenou další podskupinu s názvem Bar Top . Úplně dole je vrstva pozadí s efektem překrytí pro přechod.
Otevřete FX v této vrstvě pozadí a dvakrát klikněte na překrytí přechodu. Odstranil jsem výchozí barvy z Apple a nastavil (zleva doprava) # 3478a7 na # 5eb0e7. Také dvě tlačítka budou muset ztratit své gradienty - pro tyto jsem použil hodnoty # 052b50 až # 044a8e pro bohatý tmavý efekt.
Zábava s texturami
Právě těmito malými změnami přechodu můžete říct, že přizpůsobení aplikace je poměrně jednoduchý úkol. Pro trochu detailů můžeme přidat texturu nebo vzor přes oblast přechodu pruhu. Pro tento ukázkový příklad půjdeme s několika šikmými pruhy.
Začněte vytvořením nového dokumentu o průhledném pozadí 7 × 7 pixelů. Poté nastavte svůj tužkový nástroj na nejmenší měřítko (1 x 1 x 1) a připojte se z pravého horního rohu do levého dolního rohu. Použil jsem černou HEX # 000000, ale na tom by nemělo záležet, protože barvu můžete kdykoli změnit. Pokud nebudete postupovat, podívejte se na níže uvedený snímek obrazovky:
Nyní stiskněte Úpravy -> Definovat vzor ... a pojmenujte jej, poté stiskněte Uložit. Klidně zavřete okno nyní (bez uložení), protože vše, co jsme potřebovali, byl vzor. Nyní zpět do horní skupiny lišty vytvořte novou vrstvu nad pozadím. CMD + kliknutí nebo CTRL + kliknutí na vektorovou masku, která vybere celou lištu přechodu na pozadí.
Ujistěte se však, že kliknete zpět na nově vytvořenou vrstvu, takže je zvýrazněna modrou barvou. Budeme ji vyplňovat tímto novým vzorem, ale chceme vidět pouze pruhy nad přechodem horního pruhu (a pod tlačítky). V horním menu přejděte na Upravit -> Vyplnit a z rozbalovací nabídky vyberte „Vzor“. V poli níže byste měli vybrat poslední tečkovaný vzor a stisknout OK.
Linky se na první pohled zdají docela rigidní. Takže ve vrstvách palety poklesněte výplň na asi 20% hodnoty. Také bychom mohli změnit režim prolnutí na Overlay, takže proužky budou plynout s přechodovými barvami. Oddálte zpět na 100% a podívejte se na úžasný efekt!
Další sladkou texturu můžete vytvořit nastavením dokladu 3 x 3 x 3 x a vyplněním symbolu plus. Přidal jsem výše uvedený příklad toho, jak to dramaticky změní vzhled našeho přechodu na horní liště. Můžete také zkusit změnit barvu z čistě černé na čistě bílou #FFFFFF.
Ikony na panelu karet
Navigační tlačítka nalezená v dolní části aplikace jsou rozhodující pro celkový dojem uživatele. Uživatelé musí zjistit, kde upravit nastavení, jak provádět úkoly a co dělat v aplikaci rychle. Jinak často frustrují nebo se nudí a přestanou se snažit. Takže, jako jeden další tip, smrkme do oblasti nav ve spodní liště.
Pomocí stejného souboru iPhone 4 GUI PSD vyhledejte skupinu „tabbar bar“. Nezapomeňte to provést CMD / CTRL + kliknutím na blok ve Photoshopu. Podobně jako v horním pruhu můžeme upravit gradient FX pozadí pro některé shodné styly. Alternativně však černý výchozí gradient přechází dobře u většiny barevných schémat.
U některých ikon vřele doporučuji sadu sítnice pracovní skupiny, která přichází v rozlišení 24, 48, 64 a 64 pixelů. Každá z ikon z GUI PSD má aplikované styly vrstev FX - v podstatě světlý stín a gradient překrytí. Tyto malé kousky detailů skutečně přispívají k úžasnému designu, proto věnujte velkou pozornost pixelům. Pokud máte potíže, zkuste použít tohoto návrháře barevných schémat.
Měli byste přemýšlet o tom, jak textové štítky ovlivní uživatelský dojem. Pokud máte pocit, že ikony karet jsou samy o sobě dostačující, může se text štítku jen dostat do cesty. Je však důležité ponechat své možnosti otevřené a hrát si s několika různými nápady. Zkuste získat názory přátel a spolupracovníků a zjistit, která metoda je pro vaši aplikaci nejlepší.
Další docela oblíbenou technikou je, že návrháři aplikací vytvoří prostřední tlačítko rozdělující panel karet do 5 slotů. Viděl jsem spoustu opravdu kreativních aplikací, které pomocí tohoto designu šetří místo a přidávají do navigace nějakou eleganci. Formspring je jeden příklad, přidal jsem obrazovku níže.
Užitečné odkazy
- Sada ikon glyfish
- Navrhněte aplikaci iPhone Bank ve Photoshopu [Výukový program]
- Navrhněte iPhone aplikace ve Photoshopu [PDF]
- Užitečná kolekce nástrojů a zdrojů pro vývojáře aplikací pro iPhone / iPad
- Tipy a zdroje použitelnosti pro iOS pro aplikace iPhone a iPad
- Jak vytvořit svou první iPhone aplikaci
Závěr
Tyto strategie pro práci s aplikacemi pro iOS a Adobe Photoshop se hodí, když dále rozvíjíte své smysly v designu. Mobilní aplikace jsou ve srovnání s webovými stránkami a logy úplně jiná. Mějte to na paměti během celého procesu, protože se budete neustále učit nové techniky.
Spolu s výše uvedenými odkazy byste se měli cítit mnohem pohodlněji při pohybu vpřed s návrhem rozhraní aplikace. Makety rozložení jsou vždy obtížné a vyžadují čas na sestavení a studium. Ale pokud máte dostatek odhodlání, mobilní trh je možná nejbohatší oblastí na světě. Pokud máte další dotazy nebo připomínky, dejte nám vědět v níže uvedené diskusní oblasti.
