Paleta ng kulay
Para sa paleta ng kulay ng Disenyo ng Materyal, ginusto ng Google ang isang 'dalawang kulay' na system na may mga variant:
Kaya halimbawa, tulad ng sa larawang ito. Ang iyong pangunahing kulay ay magiging lila, kasama ang iyong pangalawang kulay bilang cyan. At pagkatapos para sa iba pang mga elemento ng iyong UI, gagamit ka ng mga iba't ibang lilim ng lila at cyan, kaya't ang lahat ay magkakasama.
Ito Editor ng Materyal na Disenyo ay isang napaka kapaki-pakinabang na tool na tumutulong sa iyo na magkasama ang mga pagkakaiba-iba ng kulay. Maaari ka ring maghanap ng inspirasyon mula sa propesyonal na mga ahensya ng disenyo ng UI / UX tulad ng Clay , o ang listahang ito ng nangungunang mga kumpanya ng disenyo ng web sa 2019
Nakikiramay na layout ng grid
Ang pag-unawa sa tumutugong grid layout ay nangangahulugang pag-unawa sa kung paano density ng pixel at gumagana ang awtomatikong pagbagay ng screen. Para sa pinaka-bahagi, ang average na Android phone DPI ay nasa pagitan ng 300 hanggang 480 DPI.
Sa pag-iisip na iyon, ang isang 300 DPI screen ay karaniwang magagawang magpakita ng hanggang sa 4 na mga haligi:
Samantalang ang isang screen na may 600 dpi ay ipapakita hanggang sa 8 mga haligi.
Sa pagitan ng bawat haligi ay 'mga kanal', karaniwang ang mga lugar na naghihiwalay sa bawat haligi. Kaya sa isang mobile na may 360dp, ang bawat kanal ay nasa paligid ng 16dp.
Pag-unawa sa screen DPI
Kapag nagdidisenyo ng UI, UI man ng system o UI ng iyong app, kailangan mong isaalang-alang ang iba't ibang mga density ng pixel ng iba't ibang laki ng telepono. Narito ang isang tsart ng pinakakaraniwang mga resolusyon sa screen at mga pixel density:
Kaya't bilang panuntunan sa hinlalaki, kapag nagdidisenyo ng isang 'pandaigdigang' tema o app, at hindi nakatuon sa paglikha ng mga tema para sa isang solong aparato, dapat kang magsimula sa pinakamababang density. Ito ay dahil kung sinimulan mo ang iyong disenyo sa 1x, kailangan mo lang magsukat sa mga pixel, at mananatiling pareho ang mga halaga sa mga DP.
Gayunpaman, kung nagdisenyo ka para sa 3.5x, kailangan mong hatiin ang lahat ng mga halaga ng 3.5 para sa pagbagay sa iba pang mga density, at pagkatapos ay nagiging sakit ng ulo lamang ito sa pagkalkula ng maraming mga halaga ng DP.
Mga karagdagang tip para sa disenyo ng Android 10 UI / UX
Kung kailangan mo ng isang pasadyang kulay para sa mga bahagi ng tema tulad ng mga radio, pindutan, checkbox, atbp, dapat mo hindi gumamit ng drawables upang maipakita ang iba`t ibang mga estado ( naka-check, na-click, atbp) . Dahil kapag gumamit ka ng drawables, mawawala sa iyo ang katutubong epekto ng Disenyo ng Materyal (tulad ng ripple) na malawak na na-update ng Google sa Android 9 at Android 10.
Kapag nagtatrabaho sa Materyal na Disenyo, nagsasama ang Google ng maraming mga kalakal na maaari mong samantalahin, at mas natural na dumadaloy ang mga ito sa iyong UI / UX.
Kaya halimbawa, narito ang ilang mga keyword para sa mga sangkap na may temang may mga built-in na elemento ng Disenyo ng Materyal, at masisiyahan pa rin ang iyong app o UI / UX sa katutubong pag-uugali ng system at mga estado ng UI.
Button na may pasadyang kulay android: backgroundTint = '@ color / red' ----- Button ng Radio na may pasadyang kulay android: buttonTint = '@ color / red' ----- Mga Larawan at Icon android: drawableTint = '@ color / pula '----- ProgressBar na may pasadyang kulay android: ProgressTint =' @ color / red '
Upang ipakita ang isang simpleng anino sa ibaba ng mga sangkap tulad ng sa cardview mode, kailangan mo lamang gamitin ang pag-aari ng taas.
android: taas = '1dp'
Ang pagsasama-sama ng mga tag at pag-aari ng magulang ay lubhang kapaki-pakinabang, upang mabigyan ka ng mas mahusay na kontrol at mapamahalaan ang mga XML file.
Ang mga animated na pagbabago ng layout ay maaaring mapabuti ang iyong UX, at halos lahat ng ViewGroup ay igagalang ito. Kaya't tuwing may pagbabago sa hierarchy ng view, ito ay may kasamang isang animasyon. Sa kaunting kaalaman, maaari ka ring magdisenyo pasadyang mga epekto sa paglipat .
android: animateLayoutChanges = 'totoo'Mga tag android Kaunlaran Basahin ang 4 na minuto
