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

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

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

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

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

Исправлено

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

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

Исправление 1: одна строка поиска, один контрол Rent или Buy

До

После

Поле поиска в контуре с микрофоном, пять круглых иконок категорий, затем залитая кнопка Rent, простое слово Buy, контурная кнопка Sort и ссылка Filter. Против серого поля поиска с одной синей кнопкой фильтра и Rent с Buy как двух половинок одного сегментированного контрола.

Черновик ставит четыре элемента в один ряд и каждому даёт свой вид: Rent это залитая кнопка, Buy просто текст, Sort в контуре, а Filter обычная ссылка с иконкой. Читателю приходится разбираться, где кнопки, где вкладки, а где переключатели, прежде чем он начнёт ими пользоваться.

Исправление даёт каждой задаче одну форму. Поиск и фильтр живут в одной строке, потому что фильтрация часть поиска. Rent или Buy это выбор ровно из двух вариантов, а для этого и нужен сегментированный контрол: обе опции видны, выбранная явно подсвечена. Sort отодвигается, потому что важен лишь когда есть результаты.

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

Исправление 2: категории, показывающие выбор

До

После

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

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

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

Исправление 3: карточка объявления, которая читается по порядку

До

После

Featured Listings со звездой и стрелкой, фото с плашкой «1 Year Old» и кнопками плюс и сердце, синяя цена $2,400 в месяц, таблетки Sale и Rent, адрес, а детали про спальни и ванные обрезаны плавающей кнопкой Map. Против большого фото со скруглёнными углами и одним сердцем, затем $2,400 в месяц, 2-bed apartment, Alfama, Lisbon и 2 bd, 2 ba, 980 sq ft.

Человек, который смотрит на жильё, задаёт четыре вопроса в одном и том же порядке: сколько стоит, что это, где находится и какого размера. Исправление выстраивает карточку в этом порядке, один ответ на строку. Цена самый крупный текст, затем тип жилья, затем более светлые строки с местом и деталями.

Черновик перемешивает ответы. Цена делит строку с двумя таблетками Sale и Rent, хотя жильё только в аренду. Адрес стоит над деталями, но под ценой и другого цвета. Детали набраны мелким текстом в 9 пунктов, а последняя спрятана под кнопкой Map, так что читатель теряет площадь, число, которое большинство людей сравнивает.

С фото также убраны плашка «1 Year Old» и кнопка плюс. Две плавающие кнопки на каждом изображении просят решений, которых читатель ещё не принял. Достаточно одного сердца, а фото стало больше, потому что именно фото продаёт жильё.

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

Исправление 4: четыре вкладки в одном стиле иконок

До

После

Home, My Properties, Messages, Favorites и More, с вперемешку залитыми и контурными иконками. Против Home, Saved, Messages и Profile, все иконки контурные, только Home синяя.

В черновике пять вкладок, и три из них похожи: My Properties, Favorites и More звучат как места, где может лежать сохранённое или своё жильё. Иконки тоже смешивают залитые формы (дом, сообщения) с контурами (здание, сердце), поэтому активную вкладку трудно отличить от вкладки, которая просто нарисована жирнее.

Исправление использует четыре вкладки в одном стиле иконок, так что единственная разница между вкладками в том, какая активна. «Favorites» становится «Saved», более коротким словом, которое совпадает с сердцем на карточке. «More» становится «Profile», названием, которое говорит, что за ним скрыто. Рекомендации Apple описывают панель вкладок как навигацию между разделами верхнего уровня, поэтому пункт, который на деле меню остатков, там не нужен.

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

• Заголовок с человеком. Исправление добавляет приветствие, аватар с инициалами в сплошном синем круге и колокольчик с красной точкой. В черновике заголовка нет, так что ничто не говорит, чьё это приложение.
• Один отступ. Черновик использует 12 слева и 16 справа, поэтому ничто не выравнивается по краю экрана. Исправление использует 20 с обеих сторон каждой строки.
• Одна шкала интервалов. Промежутки равны 4, 8, 12 или 16. Когда каждый промежуток берётся из одного короткого списка, строки выглядят связанными без разделителей.
• Шкала текста от платформы. Текст в черновике идёт от 9 до 15 px без системы. Исправление использует размеры iOS от 11 до 22 pt, которые люди могут прочитать.
• Более спокойный баннер. «List your home for Free» потерял курсивное акцентное слово, контур дома и вторую кнопку внутри. Теперь это одна строка с одной стрелкой.

Проведите аудит своего приложения для недвижимости

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

В бесплатном файле оба экрана, каждая часть исправленного экрана как компонент, переменные цветов, текстовые стили iOS и файл read-me с авторами фотографий.

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

Главный экран приложения для недвижимости, до и после

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

Открыть в Figma

FAQ

Что должен показывать главный экран приложения для недвижимости в первую очередь?

Поле поиска с одной кнопкой фильтра, затем Rent или Buy и тип недвижимости. Объявления поместите сразу ниже, а баннер и второстепенные предложения после них.

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

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

Что должна включать карточка объявления о недвижимости?

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

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

Четыре это хорошее число: Home, Saved, Messages и Profile. Избегайте двух вкладок, которые звучат как одно и то же место, например Favorites и My Properties.

Как показать, какая категория выбрана?

Залейте выбранный чипс фирменным цветом, а остальные оставьте нейтральными. Небольшое изменение цвета текста под кружком легко пропустить.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma.
• Фотографии с Unsplash авторов Luke van Zyl, A. L. Brown и Annie Spratt, по лицензии Unsplash.
• Apple Human Interface Guidelines: Tab bars.
• Apple Human Interface Guidelines: Typography, размеры текста iOS.
• Впервые опубликовано как карусель в App Brainy.