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

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

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

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

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

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

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

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

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

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

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

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

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

  • МатериалДесигнБлог - 15 сјајних примера дизајна материјала урађено је исправно
  • МоцкПлус - 12 најбољих примера веб страница за дизајн материјала како бисте црпили инспирацију
  • АндроидАутхорити - 10 најбољих апликација Материал Десигн за Андроид

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

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

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

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

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

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

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

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

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

Селектор нагиба ПхотоСхоп.

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

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

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

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

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

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

  • ВебГрадиентс.цом
  • Андроид Схапес Генератор ( за генерисање облика путем КСМЛ-а, са опцијом за градијент)

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

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

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

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

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

Погледајте Водич за Аппуал "Како имплементирати тамни режим у вашу Андроид апликацију".

Користите шаблон или комплет мобилног сучеља

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

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

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

Занимљиви Чланци