Немножко о дизайне. Часть 2. Уровни детальности

Не прошло и двух лет с прошлой статьи о дизайне "Немножко о дизайне. Часть 1: передняя панель". Попробуем продолжить.

В этой статье я постараюсь доступно объяснить принцип «уровней детальности» и как он влияет на восприятие объекта. Относительно первой статьи это будет «перескок» на другую тему, но она поможет нам более тонко чувствовать соотношение пропорций, которые являются неотъемлемой частью любого дизайна. Так же статья поможет понять, почему иногда некоторые устройства выглядят как болванка, а некоторые как пульт космической станции.

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

↑ Задача первая: понять, что такое уровни детальности и на что они влияют

↑ Первый уровень детальности – общая форма предмета или детали

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

↑ Уровень второй – геометрическое, визуальное или цветовое деление на основные массивные детали

Представьте теперь, что отошли от дома метров на 300 (солнце отодвинем в сторону, чтобы не слепило). Что вы видете? В первую очередь, общую форму дома (первый уровень), так же вы можете разглядеть разделение между этажами, оконные проемы, покрашенный в иной цвет фундамент здания, трубу камина, поднимающуюся во всю высоту дома.
Это деление или элементы второго уровня.

↑ Третий уровень – детали (маленькие до микроскопических, если сравнивать с первым и вторым уровнем детальности)

Мы подходим близко к дому, стоим в нескольких метрах от входной двери. Мы можем разглядеть решетки на окнах, дверную ручку, номер дома, рисунок на шторах, провод громоотвода, и что кирпичи, оказывается, немного отличаются по цвету, а так же стена под окном треснула и из трещины растет сорняк.
Это детали третьего уровня.

↑ Хороший пример для понимания сути

Я немного поглумился в фотошопе над пистолетом, чтобы получился хороший пример.







Правильное пропорциональное и количественное соотношение деталей второго и третьего уровня влияет на то как будет выглядеть ваш объект.
Бывало ли у вас чувство, что вы смотрите на некий объект и вам кажется, что чего-то не хватает или перегруз, но понять почему не получается.
В следующий раз задумайтесь, присутствуют ли в объекте все три уровня или какой-то отсутствует, плохо выражен, а может напротив на одном из уровней перегруз.

↑ Задача вторая: разобраться и понять как с этим работать или «или как болванка превращается в пульт управления полета»

Так как объяснить на словах немного сложновато и придется залазить «по пояс» в композицию и пропорции, попробую добавить немного картинок с простыми формами, а некоторые специально буду немного утрировать для наглядности.

↑ 1.

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


А может быть сложной, загруженной и непропорциональной уже на начальной стадии. Когда к ней добавятся второй и третий уровень детализации, то визуальный загруз будет «дай Боже».

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

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

↑ 2.

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

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



Изменением размеров и расположением деталей можно менять композицию и получать разное «ощущение» от объекта – легкий, приземистый, глупый, улыбчивый, горбатый, массивный, довольный, устойчивый и так далее. О принципах композиции конечно нужно писать отдельную статью, и вероятно не одну.

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

Вот она, игра с деталями второго уровня во всей красе! Дизайнеры автомобилей очень хорошо знают гештальты и шаблоны восприятия, заложенные в нас и используют их по полной программе.



Для дополнительного упрощения можно взять ножницы и два вида бумаги – белую и темную (нам нужен контраст). Из белой вырежьте примерную форму вашего объекта или, например, вид спереди, желательно один к одному. Из темной бумаги вырежьте кружки и квадратики разного размера, которые будут ручками и ножками вашего объекта (несколько размеров для каждого элемента).
Затем накладывайте и передвигайте их. Лучше при этом ещё и фотографировать варианты, а затем на компьютере пролистывать, смотреть и сравнивать – так гораздо легче.
Да, это занимает время, но поверьте мне, не в пустую, если конечно вы хотите, чтобы ваш девайс выглядел достойно.

А теперь вопрос на засыпку, хотя думаю ответить теперь будет не сложно. Почему мы даем имена некоторым предметам, а некоторые так и прозябают безымянными?

↑ 3.

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

Мозг не любит напрягаться без причины, когда есть много-много всего мелкого и это не жизненно важно, мозг не спешит приниматься за работу. Плюс ступор, в который его вводит выбор — с чего начать. Отсутствие иерархии — всё блестит и мерцает, привлекает и отвлекает внимание, плюс напряжение от удержания всех деталей в фокусе. Тяжко! Есть еще много причин, но не будем отвлекаться.



Старайтесь не перегружать дизайн деталями. Это очень отвлекает. Крепеж, например. Постарайтесь подобрать цвет в тон конструкции или плоскости, на которой «сидит» болтик. Лучше, когда он привлекает внимание только формой. Если есть возможность загнать болтик впотай — ещё лучше!

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

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

Будьте осторожны с использованием текстурированных материалов. Сочетание «текстура — гладкий материал» смотрится хорошо. Детальность супротив спокойствия. Но когда у вас, например, грубая кожа, дерево с ярко выраженной текстурой, плюс перфорированная металлическая поверхность нашему глазу становится ОЧЕНЬ тяжко.

К этой части статьи картинок я не делал. Вместо этого и как заключение предлагаю посмотреть на работы Дитера Рамса (Dieter Rams), главного дизайнера фирмы Braun.

На примере его работ можно проанализировать и лучше понять принципы детальности и композиции. Кстати можно обнаружить, что многие дизайны фирмы Apple буквально списаны слизаны с его работ.
• Обширный сборник работ Дитера Рамса в высоком качестве и с описаниями (en.)
• Блог по дизайну компании Braun.

Надеюсь, что у меня получилось передать мысль и статья будет вам полезна.
Красоты всем!
Даниил

Камрад, рассмотри датагорские рекомендации