Чои Вин - Как спроектировать современный сайт

В качестве завершающего штриха разместим ссылки Send message и Add as a Friend сразу под фотографией. И снова такое соседство оправдано – эти ссылки расположены под элементами, позволяющими идентифицировать пользователя. Идеальное расположение для ссылок, позволяющих совершать действия с данной информацией.

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

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

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

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

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

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

Менее симметричная структура лучше соответствует конкретным условиям

Чтобы выбрать конкретный способ реализации, нужно учитывать, какое свободное пространство находится в нашем распоряжении. Нам не хватит места, чтобы привести эти изображения к тому же размеру, как на информационной странице. В нашем случае можно взять размеры изображений, которые использовались при создании страницы статьи. Изображения имели ширину 3 юнита (170 пикселов) каждое. Этих значений будет достаточно, чтобы разместить в колонке шириной 6 юнитов (350 пикселов) 2 узких столбца изображений. Результат напоминает информационную страницу, но больше подходит для конкретных целей.

Альтернативный вариант отображения пиктограмм проектов

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

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

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

Теперь осталось разместить обзор активности в правой колонке. Сам материал очень простой – всего лишь набор текстовых записей, и его необязательно усложнять. Текст можно расположить сверху вниз в виде колонки. Часто такой простой подход к материалу оптимален для крайней правой колонки, потому что пользователи считают эту область веб-страниц «рекламным местом». Контринтуитивный подход оказывается более эффективным для данной области – чем проще материал, тем меньше он похож на рекламу, поэтому больше пользователей уделят ему внимание.