Съвети за проектиране на елегантен UI оформление на приложение за iPhone в Photoshop
Графичният дизайн в мрежата е популярна тенденция от векове. И с изобретяването на iPhone на Apple през 2007 г., магазинът с приложения нарасна огромна сума. Сега имаме дизайнери и разработчици на приложения за iOS, които се събират, за да създадат някои наистина фантастични концепции в реалност.
Но ако не сте любители на изучаването на Xcode и програмирането на Objective-C, Photoshop може да прояви по-голям интерес. По-долу ще ви предложа някои от съветите, които подбрах за проектиране на макети на приложения за iOS. И тъй като винаги се появяват нови тенденции, дизайнерската общност постоянно предефинира начина на създаване на приложения. Помислете за това като за повече начинаещо ръководство за ресурси за проектиране за устройства на Apple.
Правилни настройки на документа
Преди дори да обмислите елементи на страницата, трябва да разберете как се създават графиките на iPhone. В по-новия дисплей на ретината при модели iPhone 4 / 4S екранът все още се измерва физически в същия размер. Въпреки това дисплеят в пиксели всъщност се удвоява от оригинала - което означава, че използваме 640 × 960 при резолюция 326ppi.
Освен това иконите на iPhone 3 / 3GS обикновено са 57 × 57 пиксела. Екраните на iPhone 4 и 4S използват 114 × 114 по подразбиране (но ще се увеличат за по-стари резолюции). За щастие процесът на проектиране на иконата е доста откъснат от създаването на оформление на потребителския интерфейс. Но като дизайнер никога не боли да изгради и двете умения.
Ако много използвате тези настройки, препоръчвам да ги запазите като предварително зададен размер на документа. В новия прозорец на документа за Photoshop ще видите бутон с надпис „Запазване на предварително зададени…“. Просто му дайте име и можете да изберете това от падащия списък всеки път, когато създавате нов документ.
Вместо да създава ръчно интерфейсните елементи на iPhone, блог Teehan + Lax предлага безплатен UI комплект за изтегляне специално за Photoshop. Това включва визуализация на iPhone 4, горни ленти, бутони, клавиатури и много други полезни неща. Определено вземете това първо и го запишете в локална директория, където имате лесен достъп до тези елементи.
Персонализирайте баровете и бутоните
Както горната, така и долната част на приложението ви вероятно ще съдържат ленти от менюто. Горната част се използва за етикетиране на текущия изглед, заедно с бутоните за обратно и редактиране. Дъното обикновено е навигация и най-често използва раздели за постигане на това.
Teehan + Lax използва някои наистина общи примери за тях. Но те са много по-лесни за персонализиране със собствените си цветове, текстури и каквито и да е други бонбони за очи, които имате. Затова като пример нека вземем лентата за групов слой (сиво-синя) и да я плъзнем в нов прозорец с документи с размер iPhone. След това щракнете върху малкия триъгълник вляво и отворете отворете друга подгрупа с надпис Bar Top . В самото дъно е разположен фонов слой с ефект на наслагване за градиента.
Отворете FX на този фонов слой и щракнете двукратно върху градиентното наслагване. Премахнах цветовете по подразбиране от Apple и зададох (отляво надясно) # 3478a7 до # 5eb0e7. Освен това двата бутона ще трябва да загубят своите градиенти - за тях използвах стойностите # 052b50 до # 044a8e за богат тъмен ефект.
Забавление с текстури
Чрез тези малки промени в градиента можете да разберете, че персонализирането на приложението ви е доста проста задача. За малко подробности можем да добавим текстура или шарка върху градиентната зона на лентата. Ще продължим с няколко наклонени ивици за този демонстрационен пример.
Започнете със създаването на нов документ 7 × 7 пиксела с прозрачен фон. След това задайте моливния си инструмент в най-малката скала (1px на 1px) и се свържете от горния десен ъгъл в долния ляв ъгъл. Използвал съм черен HEX # 000000, но не трябва да има значение, тъй като винаги можете да промените цвета по-късно. Вижте екрана по-долу, ако не следвате:
Сега натиснете Редактиране -> Дефиниране на модел ... и дайте име, след което натиснете запазване. Чувствайте се свободни да затворите прозореца сега (без да спестявате), тъй като всичко, което ни трябваше, беше моделът. Сега отново в горната група на бара създайте нов слой над фона. CMD + щракване или CTRL + щракване върху векторната маска, която ще избере цялата лента на градиента на фона.
Но не забравяйте да щракнете отново върху току-що създадения нов слой, така че да е подчертан в синьо. Ще го запълним с този нов модел, но искаме само да видим ивици над градиента на горната лента (и под бутоните). В горното меню отидете на Edit -> Fill и изберете "Pattern" от падащото меню. В полето по-долу трябва да изберете последната точка и да натиснете ОК.
В началото линиите изглеждат доста твърди. Така в палета на слоевете спуснете запълването до около 20% стойност. Също така бихме могли да променим режима на смесване на Overlay, така че баровете да текат с градиентните цветове. Намалете обратно на 100% и проверете страхотния ефект!
Можете да изградите друга сладка текстура, като настроите 3px от 3px doc и попълните символ плюс. Добавих пример по-горе как това променя външния вид на нашия градиент на горната лента толкова драматично. Можете също да опитате да промените цвета от чисто черен на чисто бял #FFFFFF.
Икони на лентата на лентата
Бутоните за навигация, намиращи се в долната част на приложението ви, са от решаващо значение за цялостното потребителско изживяване. Потребителите трябва да разберат къде да редактират настройките, как да изпълняват задачи и какво да правят в приложението си бързо. В противен случай те често се разстройват или отегчават и се отказват от опитите. И така, като още един съвет нека да изпръскаме навигационната зона в долната лента.
Използвайки същия iPhone 4 GUI PSD файл, намерете групата „раздела“. Не забравяйте, че можете да направите това чрез CMD / CTRL + щракване върху блока във Photoshop. Подобно на горната лента можем да редактираме градиента на фонов FX за някои съвпадащи стилове. Но алтернативно черният градиент по подразбиране върви добре с повечето цветови схеми.
За някои икони силно препоръчвам комплекта за ретина на Работната група, който се предлага в 24px, 48px и 64px. Всяка от иконите от GUI PSD има приложени стилове на FX слой - основно лек капка сянка и градиент на наслагване. Тези малки късчета детайли наистина допринасят за страхотен дизайн, така че обръщайте голямо внимание на вашите пиксели. Опитайте да използвате този дизайнер на цветни схеми, ако имате проблеми.
Трябва да помислите как текстовите етикети ще повлияят на потребителското изживяване. Ако смятате, че иконите на раздела са достатъчни сами по себе си, тогава текстът на етикета може просто да ви пречи. Важно е обаче да поддържате опциите си отворени и да си играете с няколко различни идеи. Опитайте се да получите мнението на приятели и колеги, за да видите кой метод е най-подходящ за вашето приложение.
Друга доста популярна техника е дизайнерите на приложения да създадат централен бутон, разделящ лентата с раздели на 5 слота. Виждал съм много наистина креативни приложения, използващи този дизайн, за да спестят място и да добавят малко елегантност в навигацията. Formspring е един пример, добавих екрана по-долу.
помощни линкове
- Glyphish Icon Set
- Дизайн на iPhone Bank приложение във Photoshop [Урок]
- Дизайн на iPhone приложения във Photoshop [PDF]
- Полезна колекция от инструменти и ресурси за програмисти за iPhone / iPad
- Съвети и ресурси за iOS за използваемост за приложения за iPhone и iPad
- Как да създадете първото си приложение за iPhone
заключение
Тези стратегии за работа с приложения за iOS и Adobe Photoshop ще ви бъдат полезни, докато допълнително развивате дизайнерските си сетива. Мобилните приложения са съвсем различна топка в сравнение с уебсайтове и лога. Имайте това предвид през целия процес, тъй като постоянно ще изучавате нови техники.
Заедно с добавените по-горе връзки трябва да се чувствате много по-удобно да се движите напред с дизайна на интерфейса на приложението. Макетите на оформлението винаги са трудни и изискват време за изграждане и изучаване. Но ако имате достатъчно отдаденост, мобилният пазар е може би най-проспериращата област. Ако имате допълнителни въпроси или коментари, моля, уведомете ни в дискусионната област по-долу.
