Книга: Мобильное приложение как инструмент бизнеса

Дизайн

Дизайн

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

В понимании заказчика, главная цель дизайна – нравиться ему. Это кажется естественным как для заказчика, так и для пользователя, и даже для разработчика. Но подход к реализации «сделайте мне красиво» у всех свой, ведь все по-разному понимают красоту. Пользователь приложения вообще не задумывается о том, насколько привлекательно выглядит приложение или какой у него должен быть дизайн. Оно ему или нравится, или нет. Разработчик одновременно оценивает красоту и удобство приложения с точки зрения пользователя, пытается не выйти за рамки требований заказчика, а также обдумывает, как можно реализовать задуманное с технической точки зрения, насколько это финансово выгодно и сколько займет времени. Другими словами, разработчик видит и тоннель, и свет в конце тоннеля, и поезд, мчащийся из него, но этого ни заказчик, ни пользователь не понимают. Каждому разработчику приходится довольно серьезно работать с заказчиком по вопросам его возражений и требований к внешнему оформлению приложения. Если у разработчика нет для этого подходящего человека, который сможет доступным и понятным языком объяснить заказчику, как лучше всего сделать дизайн приложения, то заказчик всегда будет чем-то недоволен.

Заказчику важно помнить, зачем он создает приложение и почему не делает этого сам. Ответ очевиден: приложение должно приносить прибыль и лучше, если его будут делать профессионалы с опытом работы. Помня об этом, умный заказчик не будет мешать разработчикам создавать приложение правильно, в том числе – правильно оформить его внешний вид.

Каждый дизайн должен создаваться под конкретную целевую аудиторию и конкретные задачи мобильного приложения. Нельзя делать весь дизайн или отдельные его элементы только с целью сделать его красивым. Дизайн приложения – это неотъемлемая составляющая всего приложения, и если вы сделаете что-то красиво, но в ущерб функциональной составляющей или удобству использования, это негативно отразится на приложении.

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

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

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

Если мобильное приложение принадлежит вашей компании, его можно создать в ее фирменном стиле. Однако его придется адаптировать под требования мобильных приложений. Дело в том, что большинство компаний имеют фирменный стиль, созданный под веб-сайт и полиграфию. Используя его без изменений, на выходе вы получите уродливое или красивое, но неудобное приложение. Дизайн для каждой сферы деятельности отличается, потому что невозможно сделать оформление на маленьком экране точь-в-точь как на листе А4.

Если собственного фирменного стиля у вас еще нет, то рекомендую вначале сделать его, а затем уже приступать к дизайну приложения. Часто приходится видеть, что у компаний униформа одного цвета и стиля, сайт другого, приложение третьего и все эти цвета и оформление совершенно разные, по ним никак не догадаешься, что это одна и та же компания. А ведь клиенты, однажды получившие позитивный опыт сотрудничества с вашей компанией, зайдя в магазин приложений и увидев знакомый стиль, с большей охотой скачают ваше приложение, потому что уже сталкивались с вашей продукцией и остались довольны. Я уже не говорю об эстетической стороне вопроса: для нашего мозга удобнее и красивее то, что привычнее.

Дизайн лучше всего начинать с создания иконки. Она так же важна, как и название, потому что показывается в магазине приложений и на самом устройстве. Перед разработкой ознакомьтесь с материалами для дизайнеров с официального сайта Material Design[35] для Android и с Руководством по iOS Human Interface[36].

Иконка запуска приложения в магазине приложений должна отличаться от иконок приложений-конкурентов – это выделит ее на их фоне и увеличит количество загрузок. Она должна отличаться от стандартных приложений, установленных целевой аудиторией, чтобы привлекать больше внимание пользователя – так он будет чаще запускать приложение. Кроме этого, иконка должна быть создана в соответствии с требованиями разработчика и операционной системы, для которой она создается.

Делайте иконку максимально просто. Желательно, чтобы изображение объясняло главную функцию приложения (к примеру, телефонная трубка говорит о том, что перед нами мессенджер, а ноты – что перед нами плеер). Посмотрите, как сделали конкуренты, они ведь первым делом тоже попытаются использовать для иконки интуитивно понятное изображение, а повторяться нельзя.

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

Разобравшись с иконкой можно приступить к выбору цветовой палитры приложения. Цветовая палитра – это набор цветов и их оттенков, которые гармонично сочетаются между собой. В интернете есть большое количество уже готовых цветовых палитр, подобранных другими людьми. Каждый цвет по-своему влияет на человека, и порой влияние сочетания цветов очень сложно предсказать.

Лучше делать приложение в цветах вашего фирменного стиля, уже знакомого потребителю. Есть и другой подход – выбор цветовой палитры на основе тех цветов, которые больше всего ассоциируется с вашим видом деятельности или полностью ему противоположны. К примеру, если ваша сфера деятельности – производство мебели, то вашей цветовой гаммой будет коричневый цвет и его оттенки, а полностью ему противоположный – синий цвет. Используйте только один подход к выбору цвета, то есть или только те цвета, которые ассоциируются с вашей деятельностью, или только те, которые противоположны вашей деятельности. Если смешать оба подхода, результат будет непредвиденным.

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

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

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

Дизайн для каждой операционной системы должен быть уникальным и делаться специально под платформу. Это связано с разным подходом к оформлению на разных платформах и разными привычками пользователей. Можете не беспокоиться о том, что у кого-то будет два смартфона с разными платформами – это редкость, но если это случится, то пользователь, привыкший ими пользоваться, не будет испытывать от этого дискомфорт.

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

Оглавление книги