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

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

Исправленная версия сохраняет все функции и убирает обвес вокруг заметок. Цветные теги становятся тонкими чипами папок, закреплённые заметки превращаются в две белые плитки, остальные заметки становятся простыми строками, а поиск это одно серое поле под простым заголовком.

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

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

Исправлено

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

Справа экран читается в том порядке, в котором думает человек: что это, можно ли тут поискать, какая папка, что я закрепил, что ещё есть. Цвета остались только внутри самих заметок.

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

Правка 1: простой заголовок и одно поле поиска

До

После

Крошечный засечный логотип над All Notes (128), выпадающий список Date Modified, два переключателя вида и иконка поиска, а под ними жёлтый баннер о памяти с кнопкой UPGRADE NOW. Против этого: большой заголовок Notes, меню из трёх точек и серое поле поиска со словом Search внутри.

В шапке черновика семь элементов управления ещё до того, как вы увидели хоть одну заметку: меню, логотип, счётчик, сортировка, два переключателя вида и иконка поиска. Затем баннер сообщает, что вы израсходовали 85% места, и предлагает заплатить.

Исправление даёт экрану имя и вход. Notes набран 34 px жирным. Поиск это поле на всю ширину с радиусом 10 px светло-серого цвета (#F2F2F7), так что оно выглядит как поле, и никому не нужно гадать, что иконка означает поиск.

Сортировка и вид никуда не делись, они за тремя точками. Предупреждение о памяти и Upgrade переехали в Profile, куда человек заходит управлять аккаунтом.

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

Правка 2: чипы папок вместо цветных тегов

До

После

Восемь крошечных залитых тегов: Work красный, Ideas янтарный, Journal зелёный, Personal синий, Travel бирюзовый, Recipes оранжевый, Home фиолетовый и Books розовый, все втиснуты в одну строку. Против них: тонкие чипы-пилюли All, Work, Ideas, Journal и Travel, где All залит чёрным, а остальные уходят за правый край.

Восемь тегов в восьми цветах нельзя долго различать по цвету, а при 9 px в них трудно попасть пальцем. Кроме того, они ровно заполняют строку, поэтому ряд выглядит законченным и не намекает, что дальше есть ещё.

Исправление использует пилюли 32 px с тонким контуром. Выбранный чип, All, залит чёрным. Остальные простые, а папки после Travel выезжают с правого края. Чип, обрезанный краем экрана, подсказывает пальцу, что можно прокручивать, и стрелка не нужна.

Правило на будущее: показывайте выбранный элемент заливкой, а не отдельным цветом для каждого.

Правка 3: закрепляйте нужные заметки как две белые плитки

До

После

Три цветных стикера в ряд: жёлтый, розовый и синий, у каждого крошечная кнопка закрепа и иконка «ещё» в верхних углах и текст 8 px. Против них: заголовок Pinned с янтарной кнопкой и две белые плитки: карандашный набросок домика с названием Cabin renovation и «2h ago» и текстовое превью чек-листа запуска с названием и временем 9:12 AM.

В черновике закреплённая заметка выглядит точно так же, как все остальные, если не считать иконки закрепа 11 px. Первые два стикера это те самые заметки, что закреплены в исправленной версии. Закреп не меняет того, как с ними обращаются, поэтому найти их легче не становится.

Исправление отдаёт закреплённым заметкам собственный раздел и собственную форму. Две белые плитки по 169 px с радиусом 12 px и тонкой обводкой лежат под заголовком Pinned. Заметка про домик показывает набросок, чек-лист запуска показывает превью текста, а под каждой стоят название 14 pt semibold и дата 12 pt. Теперь закреп меняет то, что вы видите, и именно ради этого его и стоит ставить.

Правило на будущее: если состояние важно, дайте ему место на экране. Маленькая иконка на одинаковой карточке местом не считается.

Правка 4: каждая остальная заметка это простая строка

До

После

Два ряда цветных стикеров: зелёный, оранжевый, фиолетовый, жёлтый, розовый и синий, каждый набит мелким текстом, внизу дата Edited. Против них: четыре простые строки на белом: Lisbon in May, Sourdough notes, Book ideas и Morning pages, у каждой заголовок 16 pt, дата и одна строка текста под ним, строки разделены тонкими линиями.

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

Исправление это список. Каждая заметка: заголовок 16 pt, дата и одна строка текста 14 pt, которая обрывается многоточием. Строки высотой 57 px разделены тонкими линиями, поэтому под закреплёнными плитками помещается около восьми. Все заголовки читаются одним взглядом, а нужную заметку можно открыть по первой строке.

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

Правка 5: панель вкладок и кнопка создания

До

После

Низ черновика: жёлтая круглая кнопка плюс лежит поверх последней заметки над плоской панелью из пяти подписанных вкладок Notes, Daily, Tasks, Tags и Profile с иконками вперемешку залитыми и контурными. Против неё: плавающая капсула с четырьмя иконками, одна выбрана, заметки проходят под ней, и отдельная круглая янтарная кнопка создания с карандашом рядом.

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

Исправление делает два элемента управления для двух задач. Капсула 52 px только с иконками держит четыре вкладки в одном стиле иконок, а рядом стоит янтарная кнопка создания 52 px с карандашом. Заметки продолжаются под обоими, так что экран ощущается одним длинным списком, а не списком, обрезанным панелью. Вкладки Tags больше нет, потому что её работу делают чипы папок.

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

Мелкие правки

• Все функции остались. Поиск это поле под заголовком. Сортировка Date Modified и переключатели сетки и списка лежат за точками. All Notes (128) стали папкой All. Кнопка «ещё» теперь внутри каждой заметки. Предупреждение о памяти переехало в Profile.
• Одно поле. В черновике 14 px слева и 12 px справа. В исправленном экране 20 с обеих сторон и 10 px между блоками.
• Один акцент. Янтарный (#F5B301) используется только для закрепа и кнопки создания. Всё остальное чёрное, серое и белое.
• Шкала шрифтов, которую можно читать. В черновике размеры идут от 8 до 14 px. В исправленном экране от 12 px для дат до 34 px для заголовка.
• Настоящее содержимое. Плитка с наброском показывает настоящий рисунок вместо цветной коробки, так что закреплённый раздел показывает, о чём заметка, ещё до того, как вы её откроете.
• Никакого логотипа. В шапке черновика засечный логотип Margin. В исправленном экране его нет, потому что в Apple Notes шапкой служит сам заголовок экрана.

Проверьте свой экран заметок

Скачайте файл Figma

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

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

Редизайн приложения для заметок, до и после

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

Открыть в Figma

FAQ

Как проектировать главный экран приложения для заметок?

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

Что выбрать для приложения заметок: сетку или список?

Список, чтобы находить заметки, ведь названия и одна строка текста читаются с одного взгляда. Сетка из полных карточек работает, только если каждая карточка достаточно велика для чтения, а при ширине 117 px текст сжимается до 8 px.

Сколько цветов использовать в приложении для заметок?

Один акцентный. Apple Notes использует единственный янтарный для закрепа и кнопки создания, а всё остальное оставляет нейтральным, чтобы цвет несли сами заметки.

Куда в приложении для заметок деть предупреждение о памяти?

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

Как должны выглядеть закреплённые заметки в приложении для заметок?

Как отдельный раздел под заголовком Pinned, в виде двух плиток с превью, названием и датой. Иконка закрепа на одинаковой карточке не делает заметку легче для поиска.

Источники

• Оба экрана наши, спроектированы и измерены в Figma. Приложение Margin и все его данные выдуманы. Заметки совпадают на обоих экранах: две закреплённые плитки это первые два стикера черновика, а строки это следующие стикеры с теми же названиями, датами и начальными строками.
• Изученный паттерн: Apple Notes на iPhone.
• Фото: карандашный набросок Sofya Borboris на Pexels, выровнен, обрезан до рисунка и помещён на белый фон. Без ИИ.
• Иконки из Phosphor (MIT). Статус-бар нарисован по измеренному скриншоту iPhone. Логотип в черновике набран шрифтом Libre Caslon Display Regular.
• Впервые опубликовано как карусель в App Brainy.