Дизайн экрана профиля: редизайн профиля и настроек приложения, до и после

У экрана профиля три задачи: показать, кто вы, показать, что у вас есть, и дать место, где можно что-то изменить. Первый черновик ниже справляется со всеми тремя, но делает это одним плоским списком из тринадцати строк, с баллами, втиснутыми в одну мелкую строчку, и кнопкой «Выйти» как самым громким элементом экрана. Это ящик с хламом: всё внутри, и ничего не найти.

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

Весь экран, до и после

Черновик джуна

Исправлено

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

Справа в экране четыре блока и один цвет. Строка личности короткая, карточка несёт баллы, а плитки и список настроек держат всё остальное. Фирменный кобальт появляется на карточке, кнопке «Изменить» и активной вкладке, а красный один раз, на «Выйти», простым текстом.

Что изменилось, в цифрах

Все отличия на одном экране, по двум фреймам Figma:

Исправление 1: одна строка для того, кто вы

До

После

Аватар по центру, имя, email, телефон и контурная кнопка «Редактировать профиль» с жёлтым баннером под ними, против одной строки: аватар слева, рядом имя и email, а справа маленькая таблетка «Изменить».

Стек по центру тратит около 160 пунктов высоты, чтобы сообщить имя и email. Номер телефона самая бесполезная строка в нём, а «Редактировать профиль» это полноценный контурный элемент, который конкурирует со всем, что ниже.

Исправление это одна строка: аватар слева, рядом имя и email, а «Изменить» маленькой таблеткой в конце. Блок высотой 60 пунктов вместо 158, так что следующий блок начинается выше. Назойливый баннер «Заполните профиль и получите 50 баллов!!!» убран с верха экрана. Просьба дозаполнить профиль относится к первому запуску или к экрану редактирования, а не к месту над тем, ради чего человек пришёл.

Правило на будущее: человек знает своё имя. Отдайте личности одну строку, а место отдайте тому, что меняется.

Исправление 2: превратите строку текста в карточку

До

После

Маленький логотип и следом «Баллы: 12480 | Уровень: Gold | Далее: Platinum (13000)» одной строкой крошечного текста, против глубокой синей карточки с логотипом, меткой Gold, числом 12 480 крупным шрифтом, индикатором прогресса и «520 баллов до Platinum».

Баллы это причина, по которой участник открывает этот экран, а черновик набирает их самым мелким шрифтом на странице. Все числа на месте, но читателю приходится вычитать самому: 13 000 минус 12 480.

Исправление делает вычитание за него. Карточка показывает баллы шрифтом 44 pt, уровень золотой меткой, шкалу, заполненную на 83 процента, и фразу «520 баллов до Platinum». Gold начинается с 10 000, так что 12 480 лежит почти у следующего уровня, и шкала показывает это с первого взгляда. Карточка использует фирменный кобальт и единственное золото уровня, что делает её самым сильным блоком экрана, и это правильно: это единственное, что здесь вознаграждает смотрящего.

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

Исправление 3: сгруппируйте настройки и покажите их состояние

До

После

Тринадцать строк в одном списке, от «Мои заказы» до «Условия использования», у каждой свой цветной значок и шеврон, против трёх плиток (Заказы, Кошелёк, Сохранённое) и одной белой группы из пяти строк: Адреса, Способы оплаты, Уведомления, Язык и Помощь и правовая информация.

Тринадцать строк одного размера, с одним шевроном и семью цветами иконок не имеют порядка. «Мои заказы» и «Условия использования» выглядят одинаково важными, а черновик ничего не говорит о том, что за строкой, пока вы не нажмёте.

Исправление сортирует список по частоте использования:

• Заказы, Кошелёк и Сохранённое становятся плитками. Это три места, куда ходят чаще всего, поэтому у них крупные зоны нажатия и по живому факту: «2 активных», «$42.50» и «18 товаров».
• Настройки сидят в одной группе. У «Адресов» написано «2 сохранено», у «Способов оплаты» «Visa ·· 4242», у «Языка» «Русский». Человек проверяет их без нажатия.
• Уведомления становятся переключателем. Это выбор «вкл или выкл», так что отдельный экран не нужен.
• Редко используемые строки уходят за «Помощь и правовая информация». «Пригласить друзей», «Оценить приложение», «О нас», «Политика конфиденциальности» и «Условия» по-прежнему есть, на одно нажатие глубже.

Каждая строка из черновика по-прежнему доступна. Ничего не удалено, всё поставлено туда, куда его отправляет частота. У иконок теперь общий оттенок, поэтому цвет на экране что-то значит: бренд отмечает активные, нажимаемые вещи.

Исправление 4: сделайте «Выйти» тихим

До

После

Красная кнопка на всю ширину с белыми заглавными буквами ВЫЙТИ, против слов «Выйти» красным цветом, 17 pt, по центру, с воздухом вокруг.

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

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

Мелкие исправления

• Крупный заголовок вместо навигационной панели. «Мой профиль» со стрелкой назад, иконкой «поделиться» и иконкой солнца стал «Профилем» размером 34 pt. Таб-бар уже говорит, где вы находитесь, поэтому стрелка назад убрана, а колокольчик уведомлений остался единственной иконкой.
• Одно поле. В черновике 14 слева и 12 справа. В исправлении 20 с обеих сторон и 14 между блоками.
• Одна типографская шкала. Текст в черновике идёт от 8 до 15 px. В исправлении размеры iOS от 11 до 34 pt.
• Один акцент. В черновике семь цветов иконок, жёлтый баннер и красная кнопка. В исправлении фирменный кобальт, одно золото для уровня и красный для «Выйти».
• Плавающий таб-бар. Пять вкладок остаются, но используют один стиль иконок, залита только активная вкладка.

Проверьте свой экран профиля

Получите файл Figma

В бесплатном файле оба экрана, исправленные блоки собраны как компоненты.

Бесплатный файл Figma

Редизайн экрана профиля, до и после

Оба экрана и каждая часть как компонент Figma. Бесплатно, только просмотр, продублируйте в свои черновики.

Открыть в Figma

FAQ

Что должен показывать экран профиля в приложении?

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

Где разместить кнопку «Выйти» на экране профиля?

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

Сколько строк должно быть в списке настроек?

Хорошо работают пять-семь на первом экране. Редко используемые, такие как правовые страницы и оценка приложения, уберите за одну строку вроде «Помощь и правовая информация».

Должны ли строки настроек показывать текущее значение?

Да. Значение вроде «Русский» или «Visa ·· 4242» отвечает на вопрос без нажатия, а для простого выбора «вкл или выкл» переключатель лучше строки.

Как показать бонусные баллы на экране профиля?

Карточкой с крупным числом, текущим уровнем в виде метки и одной фразой о том, что дальше, например «520 баллов до Platinum». Сделайте вычитание за читателя.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение, участник и числа выдуманы.
• Размеры текста соответствуют типографской шкале iOS из Human Interface Guidelines от Apple.
• Фото аватара: Tamra Creatives Agency на Pexels.
• Впервые опубликовано как карусель в App Brainy.