[Нам пишут] История одного интерфейса
Нам пишет Александр Ногай
Добрый день, уважаемые читатели! В этой статье мы решили показать вам изнанку разработки пользовательского дизайна на примере одного из интерфейсов нашего кофейного приложения — Great Coffee App. Собрав в кучу промежуточные наметки, мы представили их последовательно, в виде диалога между дизайнером и арт-директором проекта.
Задача: создать интерфейс навигации по видеорецепту. Нужен грубый набросок, и давай попробуем обойтись стандартными компонентами.
![1 1](https://appleinsider.ru/wp-content/uploads/2013/03/15-295x500.jpg)
Плохо. Плеер вырывает из контекста приложения. Нижняя панель лишняя. Бар видеоперемотки лишен контекста.
![2 2](https://appleinsider.ru/wp-content/uploads/2013/03/25-295x500.jpg)
Иконки «шагов» нравятся. Нужно дать пусть небольшое, но пояснение каждому шагу. Также замечу, у нас широкоформатное видео.
![3 3](https://appleinsider.ru/wp-content/uploads/2013/03/35-295x500.jpg)
Для прототипа хорошо. Давай идти к деталям. Общая претензия — слишком темно.
![4 4](https://appleinsider.ru/wp-content/uploads/2013/03/44.jpg)
Серый — хорошо. Еще светлее?
![5 5](https://appleinsider.ru/wp-content/uploads/2013/03/54.jpg)
Полноэкранный режим?
![6 6](https://appleinsider.ru/wp-content/uploads/2013/03/61.jpg)
Хорошо, а что, если стилизовать это под металлическую поверхность кофемашины?
![7 7](https://appleinsider.ru/wp-content/uploads/2013/03/71.jpg)
Хорошо, но монотонно. И почему экран «утоплен» в машину?
![8 8](https://appleinsider.ru/wp-content/uploads/2013/03/81.jpg)
Что это? Темный пластик, LED-экран? Если пластик, то почему иконки загораются на пластике?
И почему «динамическое» описание выдавлено в металле? В настоящих эспрессо-машинах для этого обычно используются LCD-экраны.
![9 9](https://appleinsider.ru/wp-content/uploads/2013/03/9.jpg)
Экран хороший. Как будет выглядеть переходное состояние при горизонтальном свайпе?
![10 10](https://appleinsider.ru/wp-content/uploads/2013/03/10.jpg)
Так не пойдет. Не кофемашина, а набор карточек.
Несколько пожеланий:
- Алюминий и экраны должны стоять на месте. Следовательно, все «динамическое» содержимое нужно убрать в LCD.
- В типичных LCD не используется пунктир – просто прямые линии.
- Вставь какой-нибудь реальный стоп-кадр из нашего видео.
- Давай попробуем вернуть блик на стекло.
![11 11](https://appleinsider.ru/wp-content/uploads/2013/03/111.jpg)
Отлично. Но если мы имитируем настоящую кофемашину, то два LCD экрана рядом вызывают подозрения — в промышленном дизайне это неоправданно дорогой прием. Давай попробуем объединить в один. И попробуй другую текстуру металла.
![12 12](https://appleinsider.ru/wp-content/uploads/2013/03/122.jpg)
Текстура хуже. Гравировка сверху – лучше. Как это будет выглядеть при вертикальном свайпе?
![13 13](https://appleinsider.ru/wp-content/uploads/2013/03/131.jpg)
Плохо. Опять не машина, а бумажная бутафория. Нужно придать ей тяжести.
![14 14](https://appleinsider.ru/wp-content/uploads/2013/03/141.jpg)
Лучше. Но по-прежнему выглядит длинной, погнутой картонкой. Давай попробуем завершить по краям.
![15 15](https://appleinsider.ru/wp-content/uploads/2013/03/151.jpg)
Лучше, но все-равно как-то странно. У настоящей машины сверху отверстия с горячим воздухом, которым греются и сушатся чашки.
![17 17](https://appleinsider.ru/wp-content/uploads/2013/03/17.jpg)
Вот это хорошо. Еще одна придирка – так чашки будут падать при работе. Обычно, для них делают что-то вроде «загона».
![18 18](https://appleinsider.ru/wp-content/uploads/2013/03/18.jpg)
Отлично. Оставляем. Только в текстуру добавь немного шума, для пущей «железности». И нужно где-то разместить кнопку «Поделиться видео»
![19 19](https://appleinsider.ru/wp-content/uploads/2013/03/19.jpg)
Текстура – хорошо! Поделиться – плохо. На телефоне выглядит слишком мелко и невыразительно – как случайное пятно. Нужно что-нибудь, на что хочется нажать.
![20 20](https://appleinsider.ru/wp-content/uploads/2013/03/20.jpg)
Хорошо! Интригующе и забавно. Только подними ему руку.
![21 21](https://appleinsider.ru/wp-content/uploads/2013/03/21-1.jpg)
Подними, а не сломай.
![22 22](https://appleinsider.ru/wp-content/uploads/2013/03/221.jpg)
Закончено! В разработку!
![23 23](https://appleinsider.ru/wp-content/uploads/2013/03/231.jpg)
Название: Great Coffee App
Издатель/разработчик: Mobile Creators
Встроенные покупки: Нет
Цена: 99 руб.
Ссылка: Универсальное приложение
![Pages_ Pages_](https://appleinsider.ru/wp-content/uploads/2012/08/Pages_.png)
![Оставить комментарий в Telegram. Поделитесь мнением в чате читателей Appleinsider.ru Оставить комментарий в Telegram. Поделитесь мнением в чате читателей Appleinsider.ru](https://appleinsider.ru/wp-content/themes/101media-ai-2015/img/tg1.jpg)