Я люблю разработку программного обеспечения. Еще больше мне нравится проектировать пользовательский интерфейс в процессе разработки. Моя проблема? Я всегда был перфекционистом. Для оптимизации, мне пришлось научиться сочетать свои дизайнерские навыки, принципы разработки и идеалы согласованности и минимализма. За 3 года работы дизайнером игр и еще 3 года работы разработчиком приложений я приобрел несколько привычек, так что вот мои советы.
Что делает экран красивым? Последовательность во всем. Я говорю о цветах, интервалах, шрифтах и даже анимации. На дворе 2022 год, и стандарты дизайна развиваются и меняются. Все становится проще, и я верю, что это к лучшему.
Организация, организация, организация
Я большой поклонник Apple. С их новой линейкой устройств, представленной на презентации 7 сентября, вполне понятно, что мы используем их последний UI в моих примерах.
Посмотрите на этот снимок экрана на веб-сайте Apple, демонстрирующий возможности нового Dynamic Island на iPhone 14 Pro и Pro Max:
Выглядит фантастически, правда? Вы действительно можете выделить некоторые детали даже из такого простого интерфейса. Весь Dynamic Island слегка размывает содержимое позади него. Присутствует единая цветовая гамма, все иконки очень похожи, шрифты идеально выровнены. И при просмотре полной анимации на их сайте все плавно анимируется.
Когда вы начинаете оптимизировать свои проекты, важно всегда разделять вашу информацию на части. Организуйте (извлеките) любой тип согласованности в дизайне в отдельную инкапсуляцию в процессе разработки.
Я покажу вам, что я имею в виду. Допустим, вы из Apple и рассматриваете реализацию SwiftUI для приведенного выше дисплея.
VStack { HStack { Text("FL234").font(.caption) Spacer() Image("airplane.fill").background(Color.gray).cornerRadius(4.0) Text("FLIGHTY").font(.caption) } HStack { Text("SFO").font(.title2).bold() airplayDisplayView Text("JFK").font(.title2).bold() } HStack { VStack(alignment: .leading) { Text("On Time") Text("Lading in 55m") } Spacer() HStack { Image("bag.fill").foregroundColor(Theme.black) Text(4) } .foregroundColor(.black) .padding(4.0) .background(Color.orange) .cornerRadius(8.0) } } .padding(16.0)
Даже если вы никогда не писали и не читали код SwiftUI, инстинкт разработчика может выдать вам несколько предупреждений. Например, мы используем жестко прописанные значения для угловых радиусов, отступов и текстовых меток. Вместо этого мы можем написать .xs, .s, .m, .l и т.д., чтобы определить предустановленные значения интервалов.
Предустановленные значения интервалов великолепны, потому что они делают ваш пользовательский интерфейс организованным и хорошо подходящим смартфону. Посмотрите на этот снимок экрана с функцией маршрутизации с несколькими остановками в Картах iOS 16 и обратите внимание, насколько равномерен интервал между различными элементами на экране:
Цвета должны быть такими же простыми
У вас также должна быть цветовая палитра для вашего дизайна. Конечно, выбранная вами паллета будет варьироваться в зависимости от вашего проекта или существующих проектов компании. Однако при разработке пользовательского интерфейса важно сохранить основные цветовые элементы и максимально упростить цвета.
Я использую простую цветовую систему для большинства своих приложений.
- Цвет переднего плана A: основной цвет переднего плана. Используется практически для любого основного текста.
- Цвет переднего плана B: дополнительный цвет переднего плана. Используется для отображения менее релевантного текста.
- Цвет переднего плана C: третичный цвет переднего плана. Требуется только для небольшого дискретного текста.
- Цвет фона Z: основной цвет фона.
- Цвет фона Y: дополнительный цвет фона. Используется для карточек, элементов пользовательского интерфейса и т. д.
- Цвет фона X: третичный цвет фона. Используется для элементов поверх других элементов пользовательского интерфейса. Мне также нравится использовать цвет X для границ.
- Акцентный цвет: акцентный цвет для использования в приложении. Это может быть один цвет, несколько цветов (в зависимости от вашего бренда) или даже градиент. Используется для выделения элементов.
Несмотря на то, что Apple использует гораздо более сложную систему цветов, вы все равно можете заметить цветовой принцип ABCXYZ в большей части их пользовательского интерфейса. Посмотрите скриншот функции Apple Pay Later в iOS 16:
Вы видите иерархию цветов? А используется для логотипа Apple Pay и важной информации… «46.27 долларов каждые 2 недели». Весь остальной текст — B; вторичная информация, которую пользователь может просмотреть далее. C используется в правом шевроне «>». Цвета фона также присутствуют, а цвет акцента — зеленый индикатор рядом с надписью «Срок выполнения сегодня».
Включение такого диапазона цветов — разумный шаг, поскольку он позволяет пользователю прочитать вашу тему и расцветку с одного взгляда. Хорошие разработчики пользовательского интерфейса позаботятся о том, чтобы именно эти цвета использовались во всей экосистеме их платформы. Организация (извлечение) ваших цветов — это здорово, так как вы также можете легко настроить все цвета вашего приложения одновременно.
В шрифтах больше деталей, чем вы думаете
Хорошо, ваша команда выбрала идеальный шрифт для вашего приложения… но что теперь? Как вы индивидуально стилизуете каждую метку в своем приложении? Какие куски текста должны быть маленькими, а какие большими? Жирными, курсивом или обычным?
Выбор правильных стилей шрифта важен для вашего приложения. У дизайнеров есть много вариантов, когда дело доходит до выбора шрифтов для приложения.
Обдумывая, какие стили шрифтов использовать, я стараюсь упростить его до нескольких правил.
- Используйте предустановленные размеры шрифта для вашего проекта. Избегайте более 4-5 размеров. Например, я придерживаюсь Header 1, Header 2, Body, Caption.
- Для каждого фрагмента текста, который вы включаете в свое приложение, подумайте дважды о том, какого размера должен быть текст. Текст Header 1 обычно представляет собой короткий фрагмент важной информации, отображающий содержимое страницы. Текст Header 2 обычно обозначает разделы. Основной текст Body — это то, что я использую в первую очередь, а текст Caption я использую только в том случае, если отображаю большое количество подтекста.
- Если вы хотите привлечь внимание к конкретным словам, используйте bold модификатор. Я редко вижу выделенный курсивом или подчеркнутый текст в приложениях.
- Если вы хотите включить фантазию, используйте heavy или light стили. Вы можете использовать легкий или тяжелый стиль шрифта во всех заглавных буквах, например, чтобы выделить важную информацию в подзаголовках.
Применяя эти принципы, давайте посмотрим, как Apple стилизует свои шрифты в новом Notes в iOS 16:
Вы заметите, что маленькие заголовки TODAY и YESTERDAY выделены жирным шрифтом, все буквы прописные и размер текста Caption. Получились отличные заголовки, особенно если сравнивать стиль шрифта с более светлой меткой LATEST UPDATES с соответствующим символом часов SF справа в представлении.
Обратите внимание, как на приведенной выше экране имена пользователей выделены жирным шрифтом, а временная шкала активности отображается справа с дополнительным текстом размером с Caption. Под примечаниями об изменениях находятся небольшие вторичные текстовые метки предварительного просмотра, отображающие соответствующие изменения, внесенные в заметки. И все это выглядит шикарно. Аккуратно!
Если вы разработчик, подумайте о том, как извлечь эту информацию в повторно используемые модификаторы или переменные. SwiftUI упрощает задачу; для создания маленьких шрифтов это просто .font(.caption), для жирных шрифтов это просто .bold().
Итого
Чтобы резюмировать, вот мои общие советы по разработке и дизайну вашего приложения, мои главные советы по разработке пользовательского интерфейса:
- Используйте единую цветовую схему во всем приложении.
- Используйте согласованное расстояние между элементами.
- Используйте одинаковые шрифты во всем приложении.
- Используйте анимацию экономно и только тогда, когда она улучшает взаимодействие с пользователем.
Если вам интересно, вы можете заметить, что это моя первая статья. Спасибо за чтение! Я учусь на дневном отделении, работаю над совершенствованием и делюсь своими знаниями со всеми, кто интересуется чтением. Надеюсь, вы прочитаете мои будущие статьи. Я надеюсь выпускать новую статью каждый день.
Ваше здоровье!