UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Все, что вам нужно знать о фигурах и объектах. Основы UI дизайна
Редакція
Редакція

Опубліковано

Все, что вам нужно знать о фигурах и объектах. Основы UI дизайна

#ui

Давайте поговорим об основах, если вы планируете стать UI дизайнером.

Итак, вы подумываете стать UX / UI дизайнером, но боитесь сделать первый шаг? Не волнуйтесь. Это проще, чем вы думаете. Вам нужен только прочный фундамент и самоотдача. Я не могу помочь вам с последним пунктом, поэтому давайте сосредоточимся на первом.

Эта статья будет частью большой серии публикаций, основанных на бесплатных главах книги «Designing UI». Я попытался разделить ее на легко усваиваемые куски. Наслаждайтесь!

Как создаются изображения?

Независимо от того, делаете ли вы вайрфрейм низкой точности или полностью завершенный, красивый дизайн интерфейса, вы будете использовать фигуры и объекты в выбранном вами инструменте дизайна. Вы можете использовать даже Keynote или Powerpoint, чтобы ознакомиться с фигурами и их отношениями, а затем перейти к Sketch, Figma, Adobe XD или другим программам.

Все доступные в настоящее время инструменты проектирования интерфейса работают с векторными фигурами. Это означает, что все, что вы видите, представлено числами, определяющими изображение. Это также означает, что объект можно растягивать и увеличивать без потери качества – числа просто увеличиваются и объект воссоздается заново.

Если вы планируете проектировать интерфейсы, будьте готовы к тому, что большую часть времени это будет перемещение различных прямоугольных объектов. Прямоугольники – самая популярная фигура во всех интерфейсах (на втором месте эллипсы).

Общая идея дизайна интерфейса заключается в правильном перемещении прямоугольников.

Дизайн пользовательского интерфейса – это перемещение прямоугольников. И нужно знать, как их перемещать, ГДЕ и, главное, ЗАЧЕМ.

Блочная модель

Блочная модель (Box model) является наиболее простым способом определения объекта цифрового интерфейса как в дизайне, так и в коде. Большая часть дизайна, который мы делаем, работает в соответствии с блочной моделью, поэтому очень важно хорошо ее изучить.

Она состоит из четырех основных элементов:

  • Заливка
  • Граница
  • Внешнее поле
  • Внутреннее поле

Заливка – это фон нашего элемента. Это может быть сплошной цвет, градиент, изображение или смесь всего этого.

Граница – это контур вокруг нашего объекта. Мы расскажем о разных видах границ в следующих статьях нашей серии.

Внешнее поле (часто называемое просто «полем») – это область вне нашего объекта. Оно обеспечивает объект достаточным безопасным пространством относительно окружающих его объектов. Это голубая область за пределами нашего прямоугольника.

Внутреннее поле также называется отступом – это может пригодиться при общении с разработчиками. Чем оно шире, тем больше становится безопасная область внутри объекта. В приведенном выше примере это более темная область внутри нашего цветного прямоугольника.

Определение свойств

Размер

Ширина и высота (в точках) определяют размер объекта. В большинстве случаев для краткости мы используем буквы W и H. Поскольку это двумерное пространство, ширина – это шкала на горизонтальной оси, а высота – шкала на вертикальной оси.

Короче говоря, точки не совпадают с пикселями. Разрешения и плотность пикселей являются темой для другой статьи, поэтому, если говорить кратко: точки - это векторные пиксели, которые зависят от разрешения экрана. На современных дисплеях с высокой плотностью пикселей 1 точка может составлять 4 или более пикселей. Это сделано для того, чтобы получить достаточно большие элементы, а также придать им достаточную четкость и точность.

Ширина и высота всегда имеют наименьший возможный прямоугольный блок, который может содержать объект, даже если сам объект имеет неправильную форму.

Положение

Положение объекта – это набор чисел на осях X и Y, определяемый артбордом, на котором он находится. X – это положение на горизонтальной оси, а Y – на вертикальной.

Хорошо, это легко с квадратом. Но как насчет круга? Или какого-нибудь шарика? Положения ассиметричных объектов – это положение их ограничительной рамки, в которой находится фактическая фигура.

Угол

Угол определяет вращение нашего объекта по часовой стрелке – по умолчанию 0 °. Вращение также может быть отрицательным числом. Стоит помнить, что угол поворота на -15 ° равен 360 ° -15 °, то есть 345 °.

Чтобы получить согласованный интерфейс, лучше не поворачивать объекты вручную, а вместо этого вводить подходящее значение угла с помощью клавиатуры, поскольку это намного точнее.

Если мы сгладим (Flatten) объект (для этого есть кнопка), он сбрасывает угол до 0 градусов, но он все еще поворачивается – только новая перспектива становится основой для дальнейшего вращения.

Разумеется, при вращении круга вы не увидите результат, если они не заполнены градиентом или фотографией.

Радиус скругления

Многие исследования показывают, что округлые формы считаются более дружелюбными, чем острые. Чтобы определить уровень округлости, мы используем свойство, известное как радиус скругления (иногда угловой радиус).

Радиус скругления – это число. Как ширина и высота, он также представлен в точках. Чем больше это число, тем больше закругленность углов нашей фигуры. Вы можете использовать его для всех ребер одновременно или задать его индивидуально для каждого угла.

В общем, даже слегка закругленные углы (от 2 до 6 пунктов) считаются более дружелюбными, чем острые (от 0 пунктов). Однако желательно придерживаться последовательности в округлости. Базовая единица сетки, которую мы выбираем, должна определять радиус границы. Это должно также соответствовать его окружению.

Применив различные радиусы скругления в одном объекте, вы можете получить отличную кнопку, если это соответствует рекомендациям бренда (т. е. логотип также имеет похожий паттерн).

Если вы решили сделать свои кнопки таким образом, не забывайте соблюдать последовательность на всех экранах.

Что дальше?

Спасибо за прочтение статьи. Надеюсь, вы уже на пути к созданию своих первых фигур!

Продолжение: Заливки и границы. Основы UI дизайна

Я расскажу о заливках, границах, тенях, размытии и многом другом в следующих статьях из этой серии. ? Вы также можете СКАЧАТЬ эту главу в виде бесплатного PDF-файла. Я написал целую книгу ? 420+ страниц на тему проектирования интерфейсов. ??‍? днем я работаю в HYPE4.com

Статьи из серии:

Часть 1: Заливки и границы. Основы UI дизайна

Часть 2: Все, что вам нужно знать о фигурах и объектах. Основы UI дизайна

Часть 3: Тени и размытие. Основы UI дизайна

Часть 4: Экраны и плотность пикселей. Основы UI дизайна

Часть 5: С чего начать проектирование мобильного приложения. Основы UI дизайна

Часть 6: 5 советов по улучшению дизайна кнопок. Основы UI дизайна


Перевод статьи uxdesign.cc

Топ коментарі (0)