Использование визуальной иерархии Чтобы создать четкие и легко читаемый веб-страниц

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

A+ A-

Image of a cave-like basement with perspective facing wall, with stairs descending into the frame from the left and a door wide open in the middle

Представьте, что вы вошли в пещеру.

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

Вы видите три дверных проемов: они равны по размеру, и все на том же расстоянии от того, где вы стоите. Как вы выбираете, куда идти в первую очередь?

Вы расстроены, потому что у вас нет достаточной информации для принятия решения. Все, что вы можете сделать, это предположение.

Теперь представьте, что вы ввели вторую пещеру.

В этом, есть один большой дверной проем перед вами. Он говорит: "Tours" и широкий и хорошо освещенные.

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

В этой пещере вы точно знаете , что делать.

Вы здесь для тура, так что вы подходите к кассе, купить билет и пройти через дверь, которая говорит "Тур".

Ваш веб-сайт подобен темной пещере

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

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

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

Как владельцы сайта, мы должны сделать переход как можно проще.

Привести их вокруг вашей страницы с визуальной иерархии

Когда ваш сайт имеет четкую визуальную иерархию, она отвечает на извечный вопрос на уме каждого посетителя сайта: "Что это значит для меня?"

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

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

1. упорядочить вашу информацию в категории

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

Самое важное

Каждая страница должна иметь один "самый важный" часть информации. Это часто заголовок или изображение в верхней части.

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

Вторичная или поддержки

Эта информация основана на самой важной информации.

Он конкретизирует его, разделяет детали, и включает в себя призыв к действию .

Наименее важный

Это информация, которая должна быть на вашей странице, но не должны конкурировать с наиболее важной и вторичной информации.

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

2. Сделайте ваши категории очевидным путем проектных решений

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

Следуйте этим советам, для каждого раздела:

Самое важное

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

Чтобы нарисовать глаза вашего сайта посетители заходят "на свой наиболее важной информации, выбрать любую комбинацию этих визуальных« трюков »:

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

Вторичная или поддержки

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

Используйте эти подсказки, чтобы сделать его ясным и легко скользят:

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

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

Наименее важный

Что мы можем сказать о вашем не менее важную информацию? Это должен быть там, но мы хотим, чтобы исчезнуть в фон визуально.

Если кто-то хочет, чтобы найти его, они могут. Но мы хотим, чтобы стоять там, как дворецкий в 19-го века формального дела: готовы и ждут, но в тени.

Для достижения этой цели визуально, ваше наименее важная информация должна быть:

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

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

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

3. Шаг в сторону и вернуться: что ты видишь?

Мы все страдают от того, что я называю "дизайн слепота", который похож на редакционном слепоте.

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

Исправление для дизайна слепоты? Отойдите от вашей страницы.

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

Спроси себя:

  • У меня глаза сразу перейти к наиболее важному пункту?
  • Они естественным образом стекают через вспомогательную информацию?
  • Является ли не менее важная информация, там на странице, но не в конкуренции с другими предметами?

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

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

Если он не зная, что делать, как только он попадает на страницу, вы знаете, что до сих пор есть некоторые работы, чтобы сделать.

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

Визуальная иерархия: мощный, тонкий инструмент

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

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

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

Готов к использованию визуальной иерархии?

Присоединяйтесь к обсуждению на Google+ и соединиться со мной на Twitter .

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

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

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии