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