Како дизајнирати корисничко сучеље за Андроид апликацију која није срање

. Али зашто програмери не могу исто?



Некада у време када су анимиране почетне странице и фенси распореди били ствар, тада је сигурно било смисла ангажовати професионалног дизајнера. Али тренд је данас минимално - или бар увелико поједностављено.

Даћу вам један анегдотски пример - неко време неко је тражио да направим почетни екран за њихов софтвер за рачунар. Зато сам све извукао - нацртао на скици папиру, увезао у ПхотоСхоп, створио мноштво фенси неонских линија и ефеката. То је могла бити позадина радне површине, а не почетни екран. Поента је у томе што сам за њих креирао овај заиста отмен и сложен дизајн.



Као што вероватно можете да претпоставите, није им се свидело. Дизајн са којим су ишли био је буквално мали логотип неколико преклапајућих обојених кругова и назив софтвера испод њега. Као, 2 минута у ПхотоСхоп послу. И знаш шта? Морао сам се некако сложити да је бољи од мог.



Поента коју износим је овако - мислим да програмери упадају у ову замку правећи исту грешку као и ја. Склони смо да размишљамо о корисничком интерфејсу и почетним екранима који треба да буду заиста фенси, привлачне ствари које чине апликацију истичу . Али не морају бити - искрено, не би смели бити. Требали бисмо узети а програмери размишљање и примените га на естетски дизајн - једноставно, функционално, ради.



У овом чланку ћемо размотрити неколико врло једноставних начина за стварање елегантног Андроид АПП УИ / УКС-а, чак и ако немате готово никакво искуство у дизајнирању.

Ако заиста не желите нешто друго, држите се дизајна материјала

Ваша апликација не треба да буде „ јединствено ” и ' издвојите се од осталих “ да би била популарна и изгледала добро. То је оно што Гоогле има Дизајн материјала поставили да постигну - стандард за кориснички интерфејс апликација у целој индустрији и учинили су добар посао. Постоји мноштво популарних апликација које се држе Материјалног дизајна - нека од највећих имена у Андроид апликацијама, попут СвифтКеи, Нова Лаунцхер, Тектра СМС, ИоуТубе, да набројимо само неке.

Основни фокус Материал Десигн-а је на распореду заснованом на картицама, са једнобојном палетом боја. Гоогле је сарађивао са врхунским индустријским дизајнерима, цртајући пуно елемената из минималистичке дизајнерске праксе, а затим је све то објавио бесплатно - то је прилично добра ствар, јер курсеви за дизајн веб страница и апликација могу да потроше стотине долара за е-књиге, видео записе итд.



Почетак рада са Материал Десигн-ом је невероватно једноставан, а постоји прегршт алата који га чине још једноставнијим, а које ћемо навести у наставку:

  • Уређивач теме материјала (мацОС + скица)
  • Додатак за палету боја материјала (ПхотоСхоп / Иллустратор)
  • УИ Кит за дизајн материјала ПСД (ПхотоСхоп)
  • Комплет корисничког интерфејса за Андроид дизајн материјала ( Скица)
  • Генератор тема корисничког интерфејса материјала

А ако вам је потребна инспирација за стварање једноставних, елегантних тема Материјалног дизајна, погледајте ове блогове са листе:

Градијенти у боји су много лакши него што мислите

Као алтернатива дизајну материјала, градијенти боја су једноставни, у тренду и привлаче пажњу. И можда мислите да дизајнери проводе много времена сликајући у свим бојама или дизајнирајући крајњи градијент. Погрешили бисте - то можете да урадите за 10 секунди у ПхотоСхоп-у.

10 секунди у корисничком интерфејсу градијента ПхотоСхоп.

Чак ћу вас провести кроз ово, да вам покажем колико је лако.

Направите нови ПС пројекат за мобилне уређаје ( 1080 к 1920 пк @ 72 ппи добро ради)

УИГрадиентс.цом - Велика колекција унапред направљених градијената.

Иди на УИГрадиентс.цом и пронађите нешто што вам се свиђа.

Копирајте хексадецималне вредности боје из УИГрадиентс

Копирајте боје градијента изнад прегледа.

ПхотоСхоп бирач градијента.

Кликните десним тастером миша на празан слој у ПС и идите на Блендинг Оптионс> Градиент Оверлаи.

Кликните директно на преглед обрасца градијента у падајућем менију - не кликните на дугме падајућег менија. Кликом директно на градијент отвара се уређивач боја.

Унесите хексадецималне вредности из УИГрадиента у алат за градијент ПС.

Сада само залепите хексадецималне вредности боје из УИГрадиента у уређивач ПС градијента.

Подесите по потреби. Сада имате професионалну позадину градијента за своју Андроид апликацију.

Други алати за градијент који вреди погледати:

Користите СВГ уместо ЈПГ / ПНГ

Уместо да користите ПНГ или ЈПГ за своје графичке елементе (дугмад, логотипи итд.), Заиста бисте требали да користите СВГ ( Прилагодљива векторска графика) уместо тога. То је зато што се СВГ-овима може променити величина без губитка квалитета - на пример, ако ЈПГ повећате на већу вредност, он губи квалитет и постаје замућен / пикселизиран. СВГ не. Људи покушавају да користе огромне ПНГ датотеке које ће бити умањен како би се уклопили у Андроид екране - када уместо тога можете да користите мање СВГ-ове који јесу упсцалед без икаквог губитка у квалитету.

Штавише, СВГ-ови могу бити до Величина датотеке је за 60% до 80% мања од ПНГ-а . То значи да ће се апликација или веб локација за мобилне уређаје брже учитати за корисника и изгледаће добро без обзира на резолуцију екрана.

Укључите мрачни режим користећи Тхеме.АппЦомпат.ДаиНигхт

Не треба да дизајнирате две одвојене теме да бисте у апликацију укључили тему мрачног / ноћног режима. Прилично је уграђен у библиотеку АппЦомпат, само га требате омогућити и уредити вредности.

Погледајте Аппуалов водич „ Како применити тамни режим у Андроид апликацији ”.

Користите шаблон или мобилни кориснички интерфејс

Ако ваша апликација не захтева модни, прилагођени ГУИ, нема апсолутно ништа лоше у коришћењу шаблона или комплета. Предлошци и комплети могу се користити као инспиративна смерница, или дословно можете користити шаблон / комплет какав јесте, додајући своје дугмиће и остало.

Неки сјајни ресурси за Андроид УИ предлошке и комплете:

  • СпецкиБои - 50 бесплатних комплета за кориснички интерфејс за мобилне уређаје за иОС и Андроид
  • СкетцхАппСоурцес - Ресурси апликација за Андроид УИ ( Скица)
  • Фреебиесбуг - ПСД УИ комплети ( ПхотоСхоп)
Ознаке андроид Развој 4 минута читања