Facebook переработал углубленный анализ независимых проектов

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

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

Упорядоченная страница профиля

Редизайн этой страницы профиля принадлежит Харису Юсовичу, дизайнеру из балканского региона Европы.

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

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

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

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

Временная шкала с несколькими столбцами

Поворот к вертикальному колонному расположению - редизайн Алехандро Осорио. Этот макет представляет вид временной шкалы профиля, который видят пользователи Facebook при посещении страницы профиля пользователя..

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

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

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

Content-Dense Редизайн

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

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

Занятость этого макета - то, что делает его и большим и потенциально спорным. Наличие всего этого контента на одной странице делает его супер легко ориентироваться - как только вы действительно узнаете, где все находится. А ссылки на верхнем левом значке достаточно расплывчаты, чтобы отговорить кого-либо от взаимодействия с ними..

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

Объемная навигация

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

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

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

M Assistant и список последних действий

Многое можно сказать о редизайне FB Стивена МакКейба. Фактически, многие области, такие как игры и недавние мероприятия, были полностью переработаны с впечатляющим обновлением..

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

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

В самом низу вы увидите небольшую коробку для Facebook M, эквивалент Сири для пользователей Facebook.

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

Четырехколонная временная шкала

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

Крайняя левая боковая панель акцентирует внимание на традиционных ссылках на Facebook для игр, приложений, страниц, ресурсов разработчиков и других подобных предметов. Далее идет колонка контента, которая является самой разнообразной среди всех редизайнов. Это не сохраняет традиционные ссылки для обновления статуса / добавления фотографии, но вместо этого использует минималистский подход со скрытыми опциями.

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

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

Упрощенный интерфейс с темным списком чатов

Целью редизайна Бена Хартли является простота и тонкость. Макет использует комбинацию плоских концепций дизайна с несколькими тенями на более крупных элементах страницы..

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

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

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

Заворачивать

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

Не стесняйтесь заимствовать идеи из этого анализа и даже внедрять подобные идеи в вашу собственную проектную работу. Также, если вы обнаружите какие-либо важные изменения в Facebook, не стесняйтесь делиться комментариями с вашим собственным анализом..