Цветова палитра
За цветовата палитра на Material Design Google предпочита „двуцветна“ система с варианти:
Така например, като на тази снимка. Вашият основен цвят ще бъде лилав, а вторичният ви цвят - циан. И тогава за други елементи на потребителския ви интерфейс бихте използвали варианти на нюанси на лилаво и циан, така че всичко да се смеси заедно.
Това Редактор на материалния дизайн е много полезен инструмент, който ви помага да комбинирате цветови вариации. Можете също така да търсите вдъхновение от професионални дизайнерски агенции за UI / UX като Глина или този списък на най-високо оценени компании за уеб дизайн през 2019г.
Отзивчиво оформление на мрежата
Разбирането на отзивчивото оформление на мрежата означава разбиране как плътност на пикселите и автоматичното адаптиране на екрана работи. В по-голямата си част средният DPI на телефона с Android е някъде между 300 и 480 DPI.
Имайки предвид това, екранът с 300 DPI обикновено може да показва до 4 колони:
Докато екран с 600 dpi ще показва до 8 колони.
Между всяка колона има 'улуци', основно областите, които разделят всяка колона. Така че на мобилен телефон с 360dp всеки улей би бил около 16dp.
Разбиране на DPI на екрана
Когато проектирате потребителски интерфейс, независимо дали това е потребителски интерфейс на системата или потребителския интерфейс на вашето приложение, трябва да вземете предвид различната плътност на пикселите при различните размери на телефона. Ето диаграма с най-често срещаните разделителни способности на екрана и плътност на пикселите:
Така че като правило, когато проектирате „глобална“ тема или приложение и не се фокусирате върху създаването на теми за едно устройство, трябва да започнете с най-ниската плътност. Това е така, защото ако започнете дизайна си с 1x, просто трябва да направите измервания в пиксели и стойностите ще останат същите за DP.
Ако обаче проектирате за 3,5 пъти, трябва да разделите всички стойности на 3,5 за адаптиране към други плътности и тогава това просто се превръща в главоболие при изчисляване на множество DP стойности.
Допълнителни съвети за Android 10 UI / UX дизайн
Ако имате нужда от персонализиран цвят за компоненти на темата като радиостанции, бутони, квадратчета за отметки и т.н., трябва не използвайте чертежи, за да покажете различните състояния ( проверено, щракнато и т.н.) . Защото, когато използвате чертежи, вие губите естествените ефекти на Материалния дизайн (като пулсации) които Google подробно актуализира в Android 9 и Android 10.
Когато работите с Material Design, Google включва много екстри, от които можете да се възползвате и те ще текат по-естествено с вашия UI / UX.
Така например, ето няколко ключови думи за тематични компоненти с вградени елементи на Материалния дизайн и вашето приложение или потребителски интерфейс / потребителски интерфейс все още ще се радва на поведението на естествената система и на потребителския интерфейс.
Бутон с персонализиран цветен андроид: backgroundTint = '@ color / red' ----- Радио бутон с персонализиран цветен android: buttonTint = '@ color / red' ----- Изображения и икони android: drawableTint = '@ color / червен '----- ProgressBar с персонализиран цветен андроид: progressTint =' @ color / red '
За да покажете обикновена сянка под компонентите, като в режим на преглед на карти, просто трябва да използвате свойството elevation.
android: elevation = '1dp'
Обединяването на тагове и родителски свойства е изключително полезно, за да ви даде по-добър контрол и управляеми XML файлове.
Анимираните промени в оформлението наистина могат да подобрят вашия UX и почти всички ViewGroup ще спазват това. Така че, когато има промяна в йерархията на изгледа, тя ще идва с анимация. С малко ноу-хау можете и да проектирате персонализирани преходни ефекти .
android: animateLayoutChanges = 'вярно'Етикети android Развитие 4 минути четене
