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