Когда кто-то заходит на страницу вашего сайта, что вы хотите, что человек, чтобы сделать?Где вы хотите, чтобы они выглядели?Какую информацию вы хотите, чтобы ваши посетители заметили и в каком порядке

В идеале, вы хотите, чтобы люди видели вашу наиболее важную информацию первым и ваш следующий наиболее важная информация, второе.Вы хотите потенциальные клиенты, чтобы увидеть копию, которая будет убедить их купить прежде чем они видят “ Купить Now” кнопки.Вы хотите, чтобы люди, которые будут представлены нужной информации в нужное время, и один из способов сделать это, чтобы контролировать поток вашего composition ¹ .

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

Note: Это шестая должность в серии о принципах дизайна.Вы можете найти первые пять постов в серии здесь:

• Принципы проектирования: зрительное восприятие и принципы Gestalt __20 | 2
• Принципы проектирования: Пространство и фигура-фон Relationship ³
• Принципы проектирования: Подключение и разделяющие элементы, через контраст и Similarity __36 | 4
• Принципы проектирования: Визуальная Вес и видео Direction ⁵

__17 | Принципы проектирования: Доминирование, координаторов и Hierarchy ⁶

Шаблоны дизайна: Расход в отсутствие Design

Пара статей назад в этой серии я говорил о визуальной direction __63 | 7 и я упомянул Рудольф Arnheim’ ы структурный сеть.Вы должны прочитать этот пост для деталей, но общая идея в том, что в прямоугольном холсте центр и четыре угла акта холст как магниты тянуть глаз.Наряду с этими природными координаторов, естьосей работает между ними и ваших глаз движется вдоль них от фокальной точки до фокальной точки .

| Arnheim__50 сек структурная сеть не только шаблон, который предполагает, где и как глаз, естественно, перемещается через композиции.Гутенберг схема, компоновка F-модель и макет Z-модель все подскажет, как viewer’ Глаз будет двигаться, и они предполагают естественный поток к конструкции .

Note Эти модели описаны языки, читать слева направо.Отрегулируйте для других направлений чтения .

⁸

• Гутенберг diagram В этой модели, как правило глаз несется из верхнего левого в правый нижний, проходя через Arnheim’ S оптического центра.Меньше внимания уделяется другим углам, которые называются залежных области.С глаз movesto права, как она движется вниз, верхний правый угол сильный пар площадь, в то время как нижний левый угол, в основном, игнорируются .
• F-модель layout В этой модели глаз начинается в верхнем левом и движется по странице справа, прежде чем двигаться вниз немного, и повторяя движение по странице.Общая картина повторяет форму буквы F .
• Z-модель layout: глаз начинает в верхнем левом и движется прямо.В правом верхнем углу она движется вниз и слева по диагонали, прежде чем перейти еще раз направо.В целом, это повторяет форму буквы Z и повторяет рисунок вниз страницы, пока он не достигнет нижней правой .

I’ уверен you’ видел исследования глаз слежения и обсуждения вышеуказанных моделей до.Что редко упомянут как эти модели описывают текст тяжелых pages __41 | | 10__10 .Они описывают, как наш глаз двигается через колонки текста .

¹¹

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

They’ Re-прежнему полезны, потому что вы можете воспользоваться узорами и место важной информации, где глаз, естественно, попадают увеличить визуальный известность информации.Вы можете воспользоваться этими природными узорами, но понимают, что они описывают текстовые тяжелых страниц только .

Viewer’ Глаз будет двигаться через композиции, в некотором роде, независимо от того, или нет контроля вы движение.Вы могли бы также контролировать движение .

Композиционный Flow

Вы, возможно, видели слово “ storytelling” появляются все чаще и чаще в дискуссии о дизайне и оптимизации конверсии.Композиционный поток может помочь вам рассказать свою историю, представляя информацию в правильном порядке .

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

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

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

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

• Повторение elements
• Rhythm
• Подразумевается action
• Диагональ lines
• Жестовые lines
• Направленная lines
• Perspective
• Предмет elements
• Gradation

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

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

Расхода и Harmony

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

¹³

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

¹⁵

¹⁷

Как I’ ве упоминалось ранее в этой сер� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров