Дизайн приложения для изучения языков: редизайн главного экрана, до и после
Главный экран приложения для изучения языков, где статистика выписана одним предложением на 9 px, а юнит превращён в двенадцать одинаковых строк, и тот же экран после правок: простые счётчики, цельный баннер юнита, дорога из узлов и один пузырь «Начать». Каждое изменение рядом, плюс бесплатный файл Figma.
У главного экрана языкового приложения одна задача: привести ученика к сегодняшнему уроку. В первом черновике ниже есть всё, что нужно ученику, но читается он как школьный табель. Статистика — одно серое предложение, юнит — двенадцать одинаковых строк с процентами, громкий баннер продаёт подписку, а следующий шаг — маленькая кнопка CONTINUE внизу.
Правка сохраняет все функции и меняет только внешний вид и расположение. Статистика превращается в четыре простых счётчика, юнит становится цельным баннером, список становится дорогой из узлов, а один пузырь говорит «Начать».
Весь экран, до и после
Черновик джуниора
Исправлено
Слева у всего одинаковый вес. Строка статистики на 9 px, громкий жёлтый баннер, двенадцать строк и кнопка CONTINUE требуют внимания одновременно, и ни один не говорит «нажми сначала меня».
Справа экран читается сверху вниз в том порядке, в котором думает ученик: как у меня дела, что это за юнит, где я в нём, что нажать. Одна дорога, один пузырь и одно действие.
Что изменилось, в цифрах
| Черновик джуниора | Исправлено | |
|---|---|---|
| Статистика | Одно предложение, 9 px | Флаг, серия, кристаллы, сердца жирным 16 px, маленький тег PLUS |
| Юнит | Строка текста «Юнит 3 Заказ еды» и ссылка на руководство | Фиолетовый баннер 350 x 76, заголовок 20 px, нижний край темнее на 4 px |
| Уроки | Двенадцать строк по 42 px, названия 11 px, XP и проценты 9 px | Дорога из узлов по 64 px, показано одно название |
| Следующий шаг | CONTINUE 91 x 30 капсом внизу | Пузырь «Начать» на текущем узле |
| Поля | 14 слева, 12 справа | По 20 с обеих сторон |
| Вкладки | Пять, иконки вперемешку залитые и контурные | Четыре, только иконки, один стиль |
Правка 1: статистика в одну простую строку
До
После
Шапка черновика: Hola, «Мой курс» с испанским курсом, под ним серия в 41 день и выпадающий список испанского, затем серая полоса «Уровень A2 62.5%, XP 1240, Сердца 4/5, Кристаллы 320, Лига Серебро», затем жёлтый баннер GO PLUS NOW со скидкой 50% на первый месяц и кнопкой UPGRADE. Против одной строки: испанский флаг, пламя с цифрой 41, кристалл с цифрой 320, сердце с цифрой 4 и маленький жёлтый тег PLUS.
Черновик выписывает статистику предложением: «Level A2 62.5% | XP 1240 | Hearts 4/5 | Gems 320 | League Silver». Оно на 9 px, серое, и его надо читать как текст. Ученик, который открывает приложение каждый день, не хочет читать свои цифры, он хочет на них взглянуть.
Правка даёт каждой цифре иконку и цвет: пламя для серии в 41 день, кристалл для 320, сердце для 4. Они стоят в одной строке жирным 16 px, и глаз схватывает их за один проход. Выпадающий список испанского становится флагом, который открывает список языков. Баннер «GO PLUS NOW!!!» со скидкой 50% и кнопкой UPGRADE сжимается до маленького тега PLUS в конце строки, и предложение открывается из него.
Уровень, XP и Лига Серебро переехали на вкладку «Профиль». Они важны, но не при каждом открытии приложения.
Правило на будущее: показывайте цифры, которые ученик проверяет ежедневно, иконками, а остальное уберите на одно касание глубже.
Правка 2: дайте юниту цельный баннер
До
После
Строка текста: «Юнит 3» жирным и «Заказ еды» серым, справа подчёркнутая ссылка на руководство. Против цельного фиолетового баннера с «РАЗДЕЛ 1, ЮНИТ 3» мелкими капителями, «Заказ еды» белым 20 px, тонким разделителем и иконкой книги, с более тёмным краем снизу.
В черновике юнит — это подпись. «Юнит 3» и «Заказ еды» стоят в строке с текстовой ссылкой, и ничто не говорит, что это заголовок, к которому относится всё ниже.
Правка делает из него баннер: 350 на 76, радиус 12, фирменный фиолетовый, заголовок 20 px и нижний край темнее на 4 px, из-за чего он выглядит нажимаемым. Это единственный крупный блок цвета на экране, поэтому ученик понимает, в каком он юните, не читая. Ссылка на руководство становится иконкой книги справа за тонким разделителем, так что до неё по-прежнему одно касание.
Правило на будущее: если у экрана есть заголовок, к которому относится всё ниже, дайте ему блок цвета, а не строку текста.
Правка 3: превратите список в дорогу
До
После
Двенадцать строк списка, у каждой иконка, название, а справа XP и процент: три с фиолетовыми галочками и 100%, «Заказ напитков» с иконкой play и 0%, затем восемь с серыми замками и 0%, от «Основных блюд» до «Повторения юнита». Против извилистой дороги из пяти крупных кружков: два фиолетовых узла с галочками, один фиолетовый узел со звездой и жёлтым кольцом и два серых закрытых узла.
Эта правка несёт на себе весь экран. В черновике каждый урок — одна строка 42 px с названием 11 px и двумя числами по 9 px. Двенадцать строк одного размера говорят, что двенадцать вещей одинаково важны, и ученику приходится искать ту, что ещё не пройдена.
Дорога говорит это одной формой и цветом. Пройденные узлы фиолетовые с галочкой, текущий фиолетовый со звездой и кольцом прогресса, закрытые серые с замком. Каждый узел 64 px с нижним краем темнее на 5 px, а кольцо вокруг текущего 92 px, три из двенадцати уроков залиты жёлтым. Состояние юнита читается с другого конца комнаты, без текста.
Ничего не потеряно. Названия открываются из узлов, XP показан в пузыре текущего урока, 100% стало галочкой, а 0% стало замком. Остальные уроки дальше по дороге. Duolingo сделал этот путь стандартом для обучающих приложений, и работает он здесь по той же причине: прогресс — это то, по чему идёшь, а не то, что читаешь.
Правило на будущее: когда у элементов есть состояние и порядок, показывайте состояние формой и цветом, а порядок положением.
Правка 4: один пузырь «Начать» на текущем узле
До
После
Маленькая фиолетовая кнопка CONTINUE капсом внизу справа, под списком. Против белого пузыря с тонкой рамкой «Заказ напитков» и «Начать, 12 XP», с указателем вниз на фиолетовый узел со звездой внутри жёлтого кольца.
В черновике следующий шаг — кнопка CONTINUE 91 на 30 под двенадцатью строками. Она далеко от урока, который запускает, поэтому ученику приходится связывать их самому. К тому же она набрана капсом, как и кнопка UPGRADE выше, и потому не выглядит главным действием.
Правка ставит действие на тот объект, к которому оно относится. Пузырь над текущим узлом называет урок, «Заказ напитков», и говорит «Начать · 12 XP». У него тонкая рамка 2 px и нет тени, поэтому он читается как часть дороги. Назван только текущий урок, так что нажимать нужно одно.
Правило на будущее: ставьте главное действие рядом с объектом, на который оно действует, и называйте объект в самом действии.
Мелкие правки
- Все функции остаются. Выпадающий список испанского — это флаг. Заголовок «Мой курс» — это вкладка «Учёба». Лига Серебро и вкладка лиг переехали на вкладку «Профиль». Предложение открывается из тега PLUS.
- Одно поле. В черновике 14 px слева и 12 px справа. На исправленном экране по 20 с обеих сторон и 16 между блоками.
- Одна пара акцентов. Фиолетовый (#7C3AED) — цвет действия на баннере и узлах. Солнечный (#FFC53D) — только кольцо прогресса и тег PLUS.
- Шкала шрифтов. В черновике от 9 до 15 px. Исправленный экран крупнее: счётчики 16 px и заголовок юнита 20 px.
- Плоская панель вкладок. Пять вкладок с вперемешку залитыми и контурными иконками становятся четырьмя иконками одного стиля, без подписей.
- Никаких теней. Глубина создаётся более тёмными нижними краями в 4 и 5 px, а не тенями.
Проверьте свой экран обучения
| Вопрос | Почему это важно |
|---|---|
| Может ли вернувшийся ученик прочитать свою серию одним взглядом? | Ежедневные цифры должны быть иконками, а не предложениями |
| Заголовок юнита — блок цвета? | Он говорит ученику, где он находится |
| Показывает ли список уроков состояние без текста? | Форма и цвет читаются быстрее процента |
| Есть ли ровно одно главное действие? | Две главные кнопки означают, что главной нет |
| Стоит ли действие рядом с уроком, который оно запускает? | Расстояние заставляет ученика самому их связывать |
| Предложение подписки меньше урока? | Продажа выше обучения отталкивает людей |
Скачайте файл Figma
В бесплатном файле есть черновик джуниора, исправленный экран и каждая деталь как компонент.
Бесплатный файл Figma
Редизайн экрана обучения языку, до и после
Оба экрана и каждая деталь как компонент Figma. Бесплатно, только просмотр, продублируйте файл в свои черновики.
FAQ
Как проектировать главный экран приложения для изучения языков?
Покажите сверху несколько простых счётчиков, цельный баннер юнита, дорогу из узлов уроков, где состояние видно по цвету и форме, и один пузырь «Начать» на текущем уроке. Ученик должен видеть, где он находится и что нажать, не читая.
Почему языковые приложения используют путь вместо списка?
Путь показывает состояние и порядок с одного взгляда. Пройденные, текущий и закрытые уроки выглядят по-разному, поэтому ученику не нужно читать двенадцать строк, чтобы найти следующий.
Какую статистику показывать на главном экране языкового приложения?
Ту, которую ученик проверяет каждый день: серию, кристаллы или очки и сердца. Уровень, XP и лига могут жить на вкладке профиля.
Куда поместить предложение подписки в обучающем приложении?
Маленьким тегом в строке статистики, который открывает предложение. Большой баннер над уроками конкурирует с уроком за внимание.
Какого размера должен быть узел урока?
Около 64 px, это удобная цель для большого пальца. На исправленном экране узлы по 64 px с нижним краем темнее на 5 px и кольцом 92 px на текущем.
Источники
- Оба экрана наши собственные, нарисованы и измерены в Figma. Приложение Hola и все его данные вымышлены. Цифры совпадают на обоих экранах: серия 41 день, 320 кристаллов, 4 сердца и урок 4 из 12, «Заказ напитков», 12 XP.
- Изученный паттерн: путь обучения в Duolingo и Babbel.
- Иконки из Phosphor (MIT). Логотип набран шрифтом Baloo 2 ExtraBold. Фотографий нет.
- Впервые опубликовано как карусель в App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
