Scott
Страница профиля помогает пользователю представить себя в приложении или сообществе: выбрать имя, добавить изображение и решить, какие сведения показать другим. Удобство такого интерфейса зависит не от количества полей, а от того, насколько ясно разделены просмотр, редактирование и публичная информация.
Для одних сообществ важны профессиональные достижения, для других — интересы или творческие работы. Не каждый пользователь хочет публиковать личные сведения. Ниже рассмотрены шесть распространённых компонентов страницы профиля и три примера оформления, которые можно адаптировать к задачам своего продукта.
Часть 1. Определение страницы профиля
Страница профиля — это раздел сайта или приложения со сведениями об учётной записи и её владельце. В зависимости от продукта она может содержать имя, фотографию, описание, интересы и достижения. Это не означает, что вся собранная информация должна быть видна другим: состав публичного профиля и личного раздела настроек может различаться.
Дайте владельцу профиля понять, какие поля видит только он, а какие доступны другим людям. Если продукт позволяет менять видимость, покажите настройку рядом с соответствующими данными и обеспечьте понятный предварительный просмотр публичной страницы. Персонализация должна помогать выразить себя, не вынуждая раскрывать лишнее.
Часть 2. Каковы основные компоненты страницы профиля?
Ниже — распространённые компоненты профиля. Выбирайте их по назначению продукта: само по себе наличие фотографии или описания не подтверждает достоверность сведений о человеке.
1. Фотография профиля
Изображение профиля помогает узнавать пользователя в комментариях, списках и переписке. Предусмотрите подходящее кадрирование и читаемое отображение в малом размере. Если личная фотография не нужна для задачи продукта, разрешите аватар или оставьте нейтральное изображение по умолчанию, чтобы отсутствие фото не делало профиль непригодным.
2. Имя пользователя
Имя обычно размещают рядом с изображением профиля. Это может быть настоящее имя, отображаемое имя или псевдоним — в зависимости от правил сервиса. Если для поиска и упоминаний используется отдельный уникальный идентификатор, визуально отличите его от отображаемого имени.
3. Фотография на обложке
Обложка — необязательное крупное изображение, дополняющее аватар и общий стиль страницы. Она может передавать характер проекта или интересы человека. Проверьте кадрирование на узком экране и не размещайте важные сведения только внутри изображения.
4. Краткая личная информация
Раздел «Обо мне» позволяет в нескольких предложениях описать деятельность, цели или опыт. Покажите понятную подсказку и ограничение длины, если оно есть. Отсутствие описания не должно оставлять на публичной странице пустой блок с редакторскими подсказками.
5. Интересы
Интересы и увлечения помогают людям находить общие темы. Их можно представить коротким текстом или метками, если это соответствует способу поиска в сообществе. Пусть пользователь выбирает, какие интересы показывать: персонализация не требует публикации всех предпочтений.
6. Достижения
Раздел достижений уместен там, где опыт и результаты помогают оценить профиль: например, в профессиональном сообществе. Разделяйте сведения, добавленные самим пользователем, и подтверждённые сервисом отметки. Пустой список достижений не должен выглядеть как ошибка или недостаток человека.
Часть 3. Спроектируйте страницу профиля в Pixso
Для проектирования профиля удобно создать переиспользуемый макет и проверить его на разных данных. Pixso позволяет работать над такими интерфейсами вместе с командой. Подготовьте как заполненный профиль, так и варианты без обложки, с длинным именем и с ограниченным набором публичных полей.
Используйте возможности Pixso:
Используйте Auto Layout — автоматическую компоновку — для настройки отступов и поведения блоков при изменении текста. Проверяйте длинные подписи и переносы на нескольких ширинах. Это помогает подготовить адаптивный макет, но не заменяет проверку готовой страницы в браузере.
Работайте над вариантами страницы профиля на холсте; доступные лимиты файлов и черновиков зависят от текущего плана.
Используйте инструменты рисования и оформления для аватара, обложки и дополнительных визуальных элементов. Декор не должен мешать чтению имени, описания и доступных действий.
Обсуждайте варианты страницы с командой в общем файле и оставляйте комментарии рядом с полями, для которых ещё нужно согласовать видимость или поведение.
В сообществе Pixso можно искать готовые примеры профилей. Перед использованием откройте страницу ресурса, проверьте условия автора и возможность редактирования; затем замените демонстрационные данные на содержимое своего продукта.
Часть 4. Примеры оформления страниц профиля
Ниже представлены три примера из сообщества Pixso. Сопоставляйте их не только по внешнему виду: проверьте, какие поля действительно нужны вашему продукту и как тот же макет выглядит у владельца профиля и у посетителя.
#1 Пример оформления профиля
#2 Пример оформления профиля
#3 Пример оформления профиля
Создайте свою персональную страницу профиля…
Выберите пример, соответствующий задачам вашего сообщества, и адаптируйте его поля, видимость и действия. Начать проектирование можно в Pixso. Перед передачей макета в разработку проверьте его на реальных длинах имён, пустых необязательных полях и публичном просмотре.
