[Нам пишут] История одного интерфейса

Нам пишет Александр Ногай

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

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

1

Плохо. Плеер вырывает из контекста приложения. Нижняя панель лишняя. Бар видеоперемотки лишен контекста.

2

Иконки «шагов» нравятся. Нужно дать пусть небольшое, но пояснение каждому шагу. Также замечу, у нас широкоформатное видео.

3

Для прототипа хорошо. Давай идти к деталям. Общая претензия — слишком темно.

4

Серый — хорошо. Еще светлее?

5

Полноэкранный режим?

6

Хорошо, а что, если стилизовать это под металлическую поверхность кофемашины?

7

Хорошо, но монотонно. И почему экран «утоплен» в машину?

8

Что это? Темный пластик, LED-экран? Если пластик, то почему иконки загораются на пластике?
И почему «динамическое» описание выдавлено в металле? В настоящих эспрессо-машинах для этого обычно используются LCD-экраны.

9

Экран хороший. Как будет выглядеть переходное состояние при горизонтальном свайпе?

10

Так не пойдет. Не кофемашина, а набор карточек.
Несколько пожеланий:

  • Алюминий и экраны должны стоять на месте. Следовательно, все «динамическое» содержимое нужно убрать в LCD.
  • В типичных LCD не используется пунктир – просто прямые линии.
  • Вставь какой-нибудь реальный стоп-кадр из нашего видео.
  • Давай попробуем вернуть блик на стекло.

11

Отлично. Но если мы имитируем настоящую кофемашину, то два LCD экрана рядом вызывают подозрения — в промышленном дизайне это неоправданно дорогой прием. Давай попробуем объединить в один. И попробуй другую текстуру металла.

12

Текстура хуже. Гравировка сверху – лучше. Как это будет выглядеть при вертикальном свайпе?

13

Плохо. Опять не машина, а бумажная бутафория. Нужно придать ей тяжести.

14

Лучше. Но по-прежнему выглядит длинной, погнутой картонкой. Давай попробуем завершить по краям.

15

Лучше, но все-равно как-то странно. У настоящей машины сверху отверстия с горячим воздухом, которым греются и сушатся чашки.

17

Вот это хорошо. Еще одна придирка – так чашки будут падать при работе. Обычно, для них делают что-то вроде «загона».

18

Отлично. Оставляем. Только в текстуру добавь немного шума, для пущей «железности». И нужно где-то разместить кнопку «Поделиться видео»

19

Текстура – хорошо! Поделиться – плохо. На телефоне выглядит слишком мелко и невыразительно – как случайное пятно. Нужно что-нибудь, на что хочется нажать.

20

Хорошо! Интригующе и забавно. Только подними ему руку.

21

Подними, а не сломай.

22

Закончено! В разработку!

23

Название: Great Coffee App
Издатель/разработчик: Mobile Creators
Встроенные покупки: Нет
Цена: 99 руб.
Ссылка: Универсальное приложение

Pages_
Если вам есть, чем поделиться с другими читателями нашего сайта, пишите на advert@appleinsider.ru и не забудьте указать свое имя или ник. Мы внимательно читаем входящие письма и публикуем ваши самые интересные истории.

Дизайн AppleРазработка приложений для iOS