четверг, 15 августа 2013 г.

Чаевые. "Голографический" этап разработки

К разработке приложения "Чаевые" я вернулся после длительного перерыва. В этот раз меня интересовала разработка под Android 4.x, использования стиля интерфейса Holo и поддержка планшетов.
Поэтому я выкинул симпатичные, но не стандартные кнопки, и удалил бэкграунд. Вместо вытягиваемого сверху нестандартного элемента я использовал второй экран. На нем было достаточно места и я доработал первоначальную идею с разделением счета для каждой возможной группы в компании. Теперь я стал делить счет на компании всех размеров: для двух человек, для трех и так далее до восьми человек. Получился длинный список цифр, но я постарался аккуратно его оформить, чтобы им было удобно пользоваться.

Теперь пользователю чтобы разделить счет надо было просто одним движением перелистнуть экран и в большинстве случаев сразу увидеть ответ. Если счет надо было разделить на большую компанию, то надо было скроллировать список вниз, что можно было сделать вторым движением.
Кнопку для управления вычитанием налога я убрал. Я посчитал, что часто этот параметр меняться не будет. Пользователь или будет использовать вычитание, если он из США или не будет, если он из другой страны.
С полем для ввода процентов было сложнее. Задача решилась, когда я сделал предположение, что мало кто станет вводить новые проценты при каждом посещение кафе. Это позволило мне использовать только три предустановленных значения процентов. Логика проектированию интерфейса Android предполагала оформить эти значения списком - в UI нет группы кнопок из которых только одна может быть нажата. Но список занимал бы слишком много места, выпадающий список был бы неудобен для использования, поэтому в этой ситуации я нарушил рекомендации и реализовал выбор процентов в виде кнопок.
Позднее к процентам очень удачно пристыковались варианты округления - вверх, вниз и до какой величины. После этого кнопки стали обозначать качество обслуживания. От "так себе" - с низким процентом и округлением вниз, до "великолепно" - с высоким процентом и округлением вверх.
Пришлось добавить и четвертую кнопку. С ее помощью пользователь переключался между расчетом для оплаты наличными и расчетом для оплаты картой. Разница между этими расчетами следующая: при оплате наличными пользователю удобно, если округляется конечная сумма, так как именно ее он и оставляет на столике. При оплате картой он оставляет на столе только сумму чаевых, поэтому ему удобней, когда округляются чаевые.

Много усилий я потратил на вывод основной информации: величина счета, величина чаевых, итоговая сумма. Я выделил цветом и размером шрифта главную и второстепенную информацию, но этого мне было мало. Я хотел чтобы размер текста был как можно большим. Размер, который меня устраивал отлично подходил для чисел из 5-6 символов, что более или менее подходило для долларового счета, но сумма в рублях уже не вмещалась. Знак валюты " руб." занимал 4 символа, и еще два символа занимали копейки.
Тогда я начал динамически выбирать размер шрифта в зависимости от числа символов. Я не хотел чтобы появился эффект, когда каждая введенная пользователем цифра уменьшала размер шрифта, поэтому я сделал 2 жестких размера. Большой размер, для сумм до 6 символов, и маленький размер, для сумм от 6 символов и выше. Таким образом у меня появились следующие размеры для шрифта:
  1. Заголовок важной информации
  2. Заголовок дополнительной информации
  3. Большой размер важного числа
  4. Маленький размер важной числа
  5. Большой размер дополнительного числа
  6. Маленький размер дополнительного числа
Я настроил эти размеры для экрана 4 дюйма, 5 дюймов, 7 дюймов (для двух ориентаций экрана), 10 дюймов (для двух ориентаций экрана). И это только для английского языка. Для русского, украинского и французского я проверил и часто поправил каждую из этих величин. На это ушло пару дней.
Еще пару дней ушло на реализацию настроек. Я использовал только стандартные элементы управления, но для того чтобы связать их между собой: выключить одни настройки, когда включены другие и наоборот, пришлось написать много кода. Несложного. Но много.
К этому моменту приложение стало выглядеть так:

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

Пример "карт" в приложениях Google
За месяц до этого я отвлекся от работы с приложением на создание небольшого прототипа, который реализовывал новый элемент интерфейса "карта". Этот элемент Google использовал в приложение Google Now, а позднее построил на его основе Google Play. Я решил, что "карта" - это именно тот финальный штрих, который сделает "Чаевые" законченным продуктом.
Сравнительно быстро я интегрировал "карту" в приложение. Места на экране стало меньше и крупный шрифт при отображение информации стал выглядит слишком крупным. С некоторым сожалением я уменьшил его и выкинул динамическое уменьшение размера. Я также убрал кнопку переключения между оплатой наличными и картой. Вместо этого кнопкой стала сама "карта", эффектно поворачиваясь при переключение. Это решение привело к небольшой потере функционала: до этого пользователь мог выбрать любую цифру на экране и скопировать ее в буфер обмена, с "картой" такая возможность стала для него недоступной.

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


Комментариев нет:

Отправить комментарий