Дизайн принципы Часть I

Dmitriy Thomas
Дизайн-кабак
3 min readMar 15, 2015

Кратко о принципах проектирования и о том как они могут быть применены: от архитектуры до дизайна продукта.

Часть I — Ось

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

Выравнивание

Apple Store App Recommended Screen

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

Простой пример оси — список товаров в Apple Store приложении от компании Эппл. В этой конструкции, вертикальная ось аккуратно выравнивает товары на левой стороне экрана, а описание на правой.

Армирование

Twitter App Timeline Screen

Хотя ось — это воображаемая линия, вы можете сделать это более очевидным, если края элементов четко выражены. Типичным примером данного решения в архитектуре — это город, улица. Улицы города — это и есть ось, подкрепляется зданиями по обеим сторонам. Если среди улицы отсутствует одно здание, неважно на какой стороне, оси улицы, не будут выглядеть такими чёткими и ясными.

Примером этого в дизайне продукта — главный экран в приложении Twitter. В этом дизайне, вертикальная ось помогает определить раздел для аватарки юзера слева и разделяет для контент твита справа.

Движение

SoundCloud App Playback Screen

Когда мы сталкиваемся с чем-то линейным, таким как оси, мы естественно хотим следовать линии по её направлению. Если мы выходим на улицу, то мы идем вдоль самой улицы. Если мы выходим из лифта в длинный коридор, мы идем по нему. Линии — стремительное движение и взаимодействие. Направление движения вдоль оси зависит от её конечных точек.

Пример такой оси, которая стимулирует движение — это экран скраббера в приложении SoundCloud. В этом дизайне, скраббер представлен как элемент с лево-правой осью и естественное направление движение скраббера вправо, пока не достигнет конца песни.

Непрерывность

Pinterest App Timeline Screen

Если конечная точка не определена, вы будете следовать вдоль оси до тех пор, пока вы не найдете что-нибудь интересное для себя лично или пока не устанете взаимодействовать с осью. Хотя понятие неопределенной конечной точки в архитектуре является редкостью, поскольку трудно что-то архитектурно продолжать вечно, это становится все более популярным в дизайне продуктов с бесконечным скроллом.

Примером является бесконечная прокрутка контента в основной ленте в приложение Pinterest. В этой конструкции, вертикальная ось начинается в верхней части экрана, затем продолжается вниз без остановки. Это заставляет вас скормить страницу вниз столько, сколько вы хотите смотреть пины.

Это была первая часть. Надеюсь вам понравилось. Продолжение будет на следующей неделе.

--

--