Paano Magdisenyo ng isang Android App UI Na Hindi Suck

Bumalik sa araw, kapag ang mga animated na splash landing page at magarbong layout ay isang bagay, kung gayon sigurado, may katuturan na kumuha ng isang propesyonal na taga-disenyo. Ngunit ang takbo ngayon minimal - o kahit papaano pinasimple.

Hayaan akong bigyan ka ng isang halimbawa ng anecdotal - ilang sandali, may nagtanong sa akin na lumikha ng isang splash screen para sa kanilang PC software. Kaya't nilabas ko ang lahat - iginuhit ito sa sketch paper, na-import ito sa PhotoShop, lumikha ng maraming mga magagarang linya at epekto ng neon. Maaaring ito ay isang desktop wallpaper, sa halip na isang splash screen. Ang punto ay nilikha ko ito talagang magarbong at detalyadong disenyo para sa kanila.

Tulad ng maaari mong hulaan, hindi nila gusto ito. Ang disenyo na pinuntahan nila ay literal na isang maliit na logo ng ilang magkakapatong na mga bilog na kulay, at ang pangalan ng software sa ibaba nito. Tulad ng, isang 2 minuto sa trabaho ng PhotoShop. At alam mo ba? Medyo kailangan kong sumang-ayon na mas mabuti ito kaysa sa akin.

Ang puntong ginagawa ko ay ganito - Sa palagay ko ang mga programmer ay nahuhulog sa bitag na ito ng paggawa ng parehong pagkakamali na nagawa ko. May posibilidad kaming mag-isip ng mga UI at mga splash screen na kailangang maging mga talagang magarbong, nakakaakit ng mga bagay na gumagawa ng app tumayo . Ngunit hindi nila kailangang maging - totoo lang, hindi sila dapat. Dapat tayong kumuha a mga programmer mindset at ilapat ito sa disenyo ng aesthetic - simple, gumagana, gumagana.

Sa artikulong ito, titingnan namin ang ilang mga napaka-simpleng paraan upang lumikha ng isang matikas na Android APP UI / UX, kahit na halos wala kang karanasan sa pagdidisenyo.

Maliban Kung Talagang May Gustong Ilan, Manatili sa Disenyo ng Materyal

Hindi kailangang maging ' natatanging ” at ' tumayo mula sa iba pa ” para maging sikat at magmukhang maganda. Iyon ang Google Disenyo ng Materyal itinakda upang makamit - isang pamantayan para sa UI ng app sa buong industriya, at nagawa nila ang isang mahusay na trabaho. Mayroong isang toneladang mga sikat na app doon na dumidikit sa Disenyo ng Materyal - ilan sa mga pinakamalaking pangalan sa mga Android app, tulad ng SwiftKey, Nova Launcher, Textra SMS, YouTube, upang mapangalanan lamang ang ilan.

Ang pangunahing pokus ng Materyal na Disenyo ay nasa isang layout na batay sa kard, na may isang solidong paleta ng kulay. Nagtrabaho ang Google sa mga nangungunang tagadisenyo ng industriya, na kumukuha ng maraming elemento mula sa minimalist na kasanayan sa disenyo, at pagkatapos ay pinakawalan ang buong bagay nang libre - napakahusay na pakikitungo, dahil ang mga kurso sa disenyo ng website at app ay maaaring magpatakbo ng daan-daang dolyar para sa mga e-libro, video, atbp.

Ang pagsisimula sa Materyal na Disenyo ay hindi kapani-paniwalang madali, at may kaunting mga tool na ginagawang mas simple, na ililista namin sa ibaba:

• Materyal na Tema Editor (macOS + Sketch)
• Plug-in na Kulay ng Palette ng Disenyo ng Materyal (PhotoShop / Illustrator)
• Material Design UI Kit PSD (PhotoShop)
• Android Material Design UI Kit ( Sketch)
• Materyal UI Tema Tagabuo

At kung kailangan mo ng ilang inspirasyon para sa paglikha ng simple, matikas na mga tema ng Materyal na Disenyo, tingnan ang mga blog sa listahan na ito:

• MaterialDesignBlog - 15 Kahanga-hangang mga halimbawa ng Materyal na Disenyo tapos nang tama
• MockPlus - 12 Mga Pinakamahusay na Mga Halimbawa ng Website sa Disenyo ng Materyal upang Gumuhit ng Inspirasyon
• AndroidAuthority - 10 pinakamahusay na apps ng Material Design para sa Android

Ang Mga Gradient ng Kulay ay Mas Madali kaysa sa Iniisip Mo

Para sa isang kahalili sa Disenyo ng Materyal, ang mga dolor gradient ay simple, naka-istilong, at nakakaakit ng mata. At maaari mong isipin na ang mga taga-disenyo ay gumugugol ng maraming oras sa pagpipinta sa lahat ng mga kulay, o pagdidisenyo ng tunay na gradient. Magkakamali ka - magagawa ito sa loob ng 10 segundo sa PhotoShop.

10 segundo sa PhotoShop gradient UI.

Dadaanin din kita, upang ipakita sa iyo kung gaano kadali ito.

Lumikha ng isang bagong proyekto sa PS para sa Mobile ( 1080 x 1920 px @ 72 ppi gumagana nang maayos)

UIGradients.com - Malaking koleksyon ng mga pre-made gradient.

Pumunta sa UIGradients.com at hanapin ang isang bagay na gusto mo.

Kopyahin ang mga halagang hex na halaga mula sa UIGradients

Kopyahin ang mga gradient na kulay mula sa itaas ng preview.

Tagapili ng gradient ng PhotoShop.

Mag-right click sa isang walang laman na layer sa PS, at pumunta sa Blending Opsyon> Gradient Overlay.

Direktang mag-click sa preview ng pattern ng gradient sa drop-down na menu - huwag mag-click sa dropdown na pindutan. Ang pag-click nang direkta sa gradient ay magbubukas sa color editor.

Mga halaga ng input hex mula sa UIGradient sa tool na gradient ng PS.

Ngayon i-paste lamang ang i-paste ang mga halaga ng kulay hex mula sa UIGradient sa PS gradient editor.

Ayusin kung kinakailangan. Mayroon ka na ngayong isang propesyonal na background na gradient para sa iyong Android app.

Iba pang mga tool sa gradient na nagkakahalaga ng pag-check out:

• WebGradients.com
• Android Generator ng Mga Hugis ( para sa pagbuo ng mga hugis sa pamamagitan ng XML, na may pagpipilian para sa gradient)

Gumamit ng mga SVG sa halip na JPG / PNG

Sa halip na gumamit ng mga PNG o JPG para sa iyong mga graphic na elemento (mga pindutan, logo, atbp.) Dapat ay gumagamit ka talaga ng mga SVG ( Scalable Vector Graphics) sa halip Ito ay dahil ang mga SVG ay maaaring baguhin ang laki nang hindi nawawala ang kalidad - halimbawa, kung pinalaki mo ang isang JPG sa isang mas malaking halaga, mawawalan ito ng kalidad at maging malabo / pixelated. Ang isang SVG ay hindi. Sinusubukan ng mga tao na gumamit ng mga malalaking PNG file na magiging downscaled upang magkasya sa mga Android screen - kung sa halip, maaari mong gamitin ang mas maliliit na mga SVG na nakataas nang walang anumang pagkawala sa kalidad.

Bukod dito, ang mga SVG ay maaaring hanggang sa 60% hanggang 80% na mas maliit sa laki ng file kaysa sa PNG . Nangangahulugan ito na ang iyong app o website ng mobile ay mabilis na maglo-load para sa gumagamit, at magiging maganda kahit na ang resolusyon ng screen.

Magsama ng isang Madilim na Mode Gamit ang Tema. AppCompat.DayNight

Hindi mo kailangang mag-disenyo ng dalawang magkakahiwalay na tema upang maisama ang isang madilim / night mode na tema sa iyong app. Nakatayo ito sa library ng AppCompat, kailangan mo lamang itong paganahin at i-edit ang mga halaga.

Tingnan ang gabay ng Appual na ' Paano Ipapatupad ang isang Madilim na Mode sa iyong Android App '.

Gumamit ng isang Template o Mobile UI Kit

Kung ang iyong app ay hindi tumawag para sa isang magarbong, naka-customize na GUI, talagang walang mali sa paggamit ng isang template o kit. Ang mga template at kit ay maaaring magamit bilang isang nakasisiglang patnubay, o maaari mo lamang literal na gamitin ang template / kit tulad nito, pagdaragdag ng iyong sariling mga pindutan at bagay.

Ang ilang mga mahusay na mapagkukunan para sa mga template at kit ng Android UI:

• SpeckyBoy - 50 Libreng Mga Mobile UI Kit para sa iOS at Android
• Mga Pinagmulan ng SketchApp - Mga mapagkukunan ng Android UI App ( Sketch)
• Freebiesbug - Mga PSD UI Kit ( PhotoShop)