Wskazówki dotyczące projektowania eleganckich układów interfejsu aplikacji iPhone w Photoshopie
Projektowanie graficzne dla Internetu jest od wieków popularnym trendem. A wraz z wynalezieniem iPhone'a Apple'a w 2007 roku sklep z aplikacjami urósł ogromnie. Teraz mamy projektantów i programistów aplikacji na iOS, którzy wspólnie opracowują naprawdę fantastyczne koncepcje.
Ale jeśli nie lubisz uczyć się Xcode i programować Objective-C, Photoshop może być bardziej zainteresowany. Poniżej przedstawię niektóre wskazówki, które wybrałem do projektowania zabójczych makiet aplikacji na iOS. A ponieważ zawsze pojawiają się nowe trendy, społeczność projektantów nieustannie redefiniuje sposób tworzenia aplikacji. Potraktuj to jako przewodnik dla początkujących dotyczący projektowania urządzeń Apple.
Właściwe ustawienia dokumentu
Zanim nawet weźmiesz pod uwagę elementy na stronie, powinieneś zrozumieć, jak powstaje grafika iPhone'a. W nowszym wyświetlaczu Retina w modelach iPhone 4 / 4S ekran jest nadal fizycznie mierzony w tym samym rozmiarze. Jednak wyświetlanie w pikselach jest w rzeczywistości dwukrotnie większe niż w oryginale - co oznacza, że używamy 640 × 960 przy rozdzielczości 326ppi.
Dodatkowo ikony iPhone'a 3 / 3GS miały na ogół 57 × 57 pikseli. Ekrany iPhone'a 4 i 4S domyślnie używają 114 × 114 (ale skalują się w przypadku starszych rozdzielczości). Na szczęście proces projektowania ikon jest dość oderwany od tworzenia układu interfejsu użytkownika. Ale jako projektant nigdy nie boli budować obie umiejętności.
Jeśli będziesz często korzystać z tych ustawień, zalecamy zapisanie ich jako zadanego rozmiaru dokumentu. W nowym oknie dokumentu dla Photoshopa zobaczysz przycisk „Zapisz ustawienia wstępne…”. Po prostu nadaj mu nazwę, którą możesz wybrać z listy rozwijanej za każdym razem, gdy tworzysz nowy dokument.
Zamiast ręcznie tworzyć elementy interfejsu użytkownika iPhone'a blog Teehan + Lax oferuje bezpłatne pobranie zestawu interfejsu użytkownika specjalnie dla Photoshopa. Obejmuje to renderowanie iPhone'a 4, górne paski, przyciski, klawiatury i mnóstwo innych przydatnych rzeczy. Zdecydowanie najpierw weź to i zapisz w lokalnym katalogu, w którym masz łatwy dostęp do tych elementów.
Dostosuj paski i przyciski
Zarówno górna, jak i dolna część aplikacji prawdopodobnie będą zawierać paski menu. Góra służy do oznaczania bieżącego widoku wraz z przyciskami wstecz i edycji. Na dole jest ogólnie nawigacja i najczęściej używa się do tego kart.
Teehan + Lax wykorzystuje kilka naprawdę ogólnych przykładów. Są jednak znacznie łatwiejsze do dostosowania za pomocą własnych kolorów, tekstur i innych cukierków. Jako przykład weźmy pasek warstwy grupy (szaro-niebieski) i przeciągnij go do nowego okna dokumentu wielkości iPhone'a. Następnie kliknij mały trójkąt po lewej stronie i otwórz otwórz kolejną podgrupę z napisem Bar Top . Na samym dole znajduje się warstwa tła z efektem nakładki na gradient.
Otwórz efekt FX na tej warstwie tła i kliknij dwukrotnie nakładkę gradientową. Usunąłem domyślne kolory z Apple i ustawiłem (od lewej do prawej) # 3478a7 na # 5eb0e7. Również dwa przyciski będą musiały stracić swoje gradienty - dla tych wartości użyłem wartości # 052b50 do # 044a8e, aby uzyskać bogaty efekt ciemności.
Zabawa z teksturami
Za pomocą tych niewielkich zmian gradientu możesz stwierdzić, że dostosowanie aplikacji jest dość prostym zadaniem. Dla odrobiny szczegółów możemy dodać teksturę lub wzór nad obszarem gradientu słupka. W tym przykładzie pokazujemy kilka ukośnych pasków.
Zacznij od utworzenia nowego dokumentu 7 × 7 pikseli z przezroczystym tłem. Następnie ustaw narzędzie ołówkowe w najmniejszej skali (1 x 1 x 1) i połącz je z prawego górnego rogu do lewego dolnego rogu. Użyłem czarnego HEX # 000000, ale to nie powinno mieć znaczenia, ponieważ zawsze możesz później zmienić kolor. Jeśli nie postępujesz zgodnie z poniższym zrzutem ekranu:
Teraz wciśnij Edycja -> Zdefiniuj wzór… i nadaj mu nazwę, a następnie naciśnij zapisz. Możesz teraz zamknąć okno (bez zapisywania), ponieważ potrzebowaliśmy tylko wzoru. Teraz z powrotem do górnej grupy paska utwórz nową warstwę powyżej tła. CMD + kliknięcie lub CTRL + kliknięcie maski wektorowej, która wybierze cały pasek gradientu tła.
Pamiętaj jednak, aby kliknąć ponownie utworzoną nową warstwę, aby była podświetlona na niebiesko. Wypełnimy go tym nowym wzorem, ale chcemy widzieć paski tylko nad gradientem górnego paska (i poniżej przycisków). W górnym menu przejdź do Edycja -> Wypełnij i wybierz „Wzór” z menu rozwijanego. W polu poniżej wybierz ostatni kropkowany wzór i naciśnij OK.
Na początku linie wydają się dość sztywne. Tak więc w palecie warstw upuść wypełnienie do około 20% wartości. Możemy również zmienić tryb mieszania na Nakładka, aby paski płynęły z kolorami gradientu. Zmniejsz do 100% i sprawdź niesamowity efekt!
Możesz zbudować inną słodką teksturę, ustawiając dokument 3px na 3px i wypełniając symbol plusa. Dodałem przykład powyżej, w jaki sposób to tak dramatycznie zmienia wygląd naszego gradientu górnego paska. Możesz także spróbować zmienić kolor z czystej czerni na czystą biel #FFFFFF.
Ikony paska kart
Przyciski nawigacyjne znajdujące się w dolnej części aplikacji mają kluczowe znaczenie dla ogólnej wygody użytkownika. Użytkownicy muszą dowiedzieć się, gdzie szybko edytować ustawienia, jak wykonywać zadania i co robić w aplikacji. W przeciwnym razie często stają się sfrustrowani lub znudzeni i przestają próbować. Więc jako jeszcze jedna wskazówka, powiększmy obszar nawigacji w dolnym pasku.
Korzystając z tego samego pliku PSD GUI dla iPhone 4, zlokalizuj grupę „paska kart”. Pamiętaj, że możesz to zrobić przez CMD / CTRL + kliknięcie bloku w Photoshopie. Podobnie do górnego paska, możemy edytować gradient efektów tła dla niektórych pasujących stylów. Ale alternatywnie czarny domyślny gradient dobrze pasuje do większości schematów kolorów.
W przypadku niektórych ikon bardzo polecam zestaw siatkówki The Working Group, dostępny w formatach 24px, 48px i 64px. Każda z ikon z GUI PSD ma zastosowane style warstw FX - w zasadzie cień światła i gradient nakładki. Te małe fragmenty szczegółów naprawdę składają się na wspaniały projekt, więc uważaj na swoje piksele. Spróbuj użyć tego projektanta schematów kolorów, jeśli masz problemy.
Zastanów się, jak etykiety tekstowe wpłyną na komfort użytkowania. Jeśli uważasz, że same ikony kart są wystarczające, tekst etykiety może po prostu przeszkadzać. Ważne jest jednak, aby mieć otwarte opcje i bawić się kilkoma różnymi pomysłami. Postaraj się uzyskać opinie znajomych i współpracowników, aby zobaczyć, która metoda jest najlepsza dla Twojej aplikacji.
Inną dość popularną techniką jest tworzenie przez projektantów aplikacji środkowego przycisku dzielącego pasek kart na 5 miejsc. Widziałem wiele naprawdę kreatywnych aplikacji wykorzystujących ten projekt, aby zaoszczędzić miejsce i dodać elegancji do nawigacji. Formspring jest jednym z przykładów, dodałem poniższy ekran.
Przydatne linki
- Zestaw ikon glifów
- Zaprojektuj aplikację iPhone Bank w Photoshopie [Samouczek]
- Projektowanie aplikacji na iPhone'a w Photoshopie [PDF]
- Przydatna kolekcja narzędzi i zasobów dla programistów aplikacji na iPhone'a / iPada
- Wskazówki i zasoby dotyczące użytkowania iOS dla aplikacji na iPhone'a i iPada
- Jak utworzyć pierwszą aplikację na iPhone'a
Wniosek
Te strategie pracy z aplikacjami na iOS i Adobe Photoshop przydadzą się, gdy będziesz dalej rozwijać zmysły projektowe. Aplikacje mobilne to zupełnie inna gra w porównaniu do stron internetowych i logo. Pamiętaj o tym przez cały proces, ponieważ będziesz stale uczyć się nowych technik.
Wraz z linkami dodanymi powyżej powinieneś czuć się znacznie bardziej komfortowo, projektując interfejs aplikacji. Makiety układu są zawsze trudne i wymagają czasu na zbudowanie i przestudiowanie. Ale jeśli masz wystarczająco dużo poświęcenia, rynek telefonii komórkowej jest prawdopodobnie najlepiej prosperującym obszarem. Jeśli masz dodatkowe pytania lub uwagi, daj nam znać w obszarze dyskusji poniżej.
