Як я малював дизайн програми для конкурсу Mail.Ru Group



У цій статті я постараюся розглянути всі аспекти розробки дизайну мобільного пропозиції, з якими мені довелося зіткнутися. Разом зі мною ви пройдете весь шлях — від прийняття участі у конкурсі до написання цієї публікації.

Замість вступу

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

В один з таких днів я натрапив на замітку «Конкурс для дизайнерів від Пошти Mail.Ru». Зазвичай я не приймаю участі в подібних конкурсах, але тут зовсім інша історія. Завдання мені здалося нестандартним і від того дуже цікавою. Мене це зачепило з професійної точки зору. Чи зможу я вирішити поставлену задачу або на худий кінець розробити і запропонувати концепти, які отримають застосування в готовому додатку?

З цими думками я приступив до роботи.

Аналіз проблеми

Я глибоко переконаний, що перш ніж приступати до вирішення будь-якої проблеми, необхідно її детальне вивчення. Тому першим ділом я встановив на телефон безліч різних поштових клієнтів і зайнявся їх аналізом. Як виявилося, деякі поштові сервіси пропонують рішення існуючої проблеми, в тій чи іншій мірі. Але жоден з них не може похвалитися зручністю, простотою і функціональністю. Та й повною мірою жоден сервіс не вирішує цієї проблеми.

Постановка завдання

Здавалося б, і так все зрозуміло, є завдання — треба знайти рішення. Так, але мова зараз піде про завдання, які перед собою ставлю я. А саме — необхідно скласти якийсь план, по якому буде здійснюватись робота.

Концепт
Розробка концепту роботи програми. Це, мабуть, найскладніший і найтриваліший етап. Тут я повинен зважити і продумати всі моменти і нюанси. Дана робота проводиться виключно в голові і на листку паперу. Детальніше про те, що ж такого я придумав, дізнаєтеся далі в процесі читання статті.

Окремий додаток або новий пункт меню?
Це один із самих важливих, але в той же час швидких питань. Я однозначно визначив, що це повинен бути додатковий пункт меню в головному додатку пошти. Так як суть поставленого завдання — це зробити зручний сервіс по роботі з вкладеннями та іншими важливими листами, то навіщо змушувати людину ставити ще один додаток? Крім цього, в мінуси можемо віднести те, що для реклами та інформування користувачів про новий додатку буде потрібно додатковий бюджет і час. В моєму випадку користувач після оновлення отримує додатковий зручний сервіс, з яким відразу ж може розпочати роботу.

Дизайн
Малювати новий або використовувати готовий стиль? Як не дивно (особисто для мене), але багато дизайни вибирають перше. Я це можу пояснити лише тим, що вони хочуть показати свої професійні навички і т. п. Хоча, може, справа в додаткових балах, які пообіцяли організатори.

Але я пішов по іншому шляху і вибрав другий варіант. Цьому є багато пояснень:
  • Існуючий стиль розробляла команда професіоналів і робили вони це явно не «на око». Кожному дизайнерським рішенням є своє пояснення. Принаймні, я в це вірю;
  • Існуючий стиль повністю відповідає «веению моди»;
  • Він зручний і добре сприймається;
  • Багато користувачів вже встигли звикнути до нього, так навіщо їх мучити черговою зміною інтерфейсу?
  • Зміна стилю головного поштового клієнта, може і повинна спричинити за собою редизайн та інших додатків сервісів. А це знову ж таки додаткові витрати.
Далі треба скласти список макетів, який буде включати всі нові екрани, а так само ті, які піддадуться змінами.

  1. Головне меню програми
  2. Всі вкладення
  3. Підменю всіх вкладень
  4. Пошук, він же підбір вкладень
  5. Календар в підборі
  6. Зміна елементів підбору
  7. Список листів
  8. Підменю списку листів

Макети

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


Зліва скріншот поточної версії програми, праворуч мій макет

На мою особисту думку, меню — це єдине, що б я змінив у існуючому додатку, поза тієї задачі, що була поставлена, крім додавання нового пункту, зрозуміло. Мабуть це вже професійна деформація.

Так як програма передбачає можливість використання декількох поштових сервісів в рамках однієї програми, я вважав за необхідне залишити над меню не просто маленьку сходинку, а створити невеликий інформативний блок. Найчастіше люди використовують кілька акаунтів: для роботи, особові, реєстраційні, старі, нові і т. д. І тепер їм немає необхідності вдивлятися в маленьку смужку з адресою електронної пошти, тепер практично моментально можна визначити активну пошту не тільки по аватару, але полю ім'я/прізвище.

Другий момент, який я виправив, особисто для мене більш серйозний, — зрушений екран списку листів(чого завгодно). Для того що б повернутися до нього у нас є зовсім маленький простір у вигляді вузької смуги, хоча при цьому, пункти меню дозволяють нам зробити його ширшим, що я і зробив.

Так само мною були прибрані деякі пункти меню, які я вважаю мало популярними, і до яких є доступ з екрану списку листів. Якщо у компанії є аналітика, використання цих розділів з головного меню, і вона говорить про зворотне — природно без всякого праці ці пункти можна повернути в меню.


Ось головний розділ, який покликаний вирішити частина проблеми, пов'язаної саме з вкладеннями. Сюди ми потрапляємо з головного меню. Тут ми розберемо докладно буквально кожну строчку «що, чому, навіщо і як»

Весь список поділяється на рядки, по типу файлів. У кожному рядку у нас є наступні елементи:
  • Іконка — є візуальним індикатором-підказкою типу файлу(ів);
  • Основний заголовок — повідомляє ім'я файлу, його розширення. Або повідомляє кількість файлів одного типу з одного листа;
  • Підзаголовок — тема листа, в якому знаходиться файл;
  • Дата — дата отримання (відправлення) листа з вкладенням;
  • Аватар і ім'я відправника або адресата;
  • Параметр — вказує на належність файла до листа, який було відзначено вами як важливе.
Всі ці елементи були розміщені мною у відповідності з єдиним стилем програми, в порядку їх пріоритетності. Так, на першому місці стоїть ім'я файлу з розширенням. Далі, якщо людина не пам'ятає назви файлу (про пошук трохи пізніше), він швидше за все пам'ятає або назва листування, або ж з ким вона велася. Маленький аватар був доданий з тією метою щоб спростити пошук по автору, і так само є своєрідним маячком, який позбавляє від необхідності вчитуватися в імена, в кожному рядку списку. Прапорець дасть яскравий сигнал.

Далі розберемо ситуацію: у вашій поштовій скриньці є лист, в якому прикріплено 50 фотографій. Відображати кожну фотографію в загальному списку розділу — це маленький пекло незручно і нелогічно. Тому я запропонував рішення, яке ви можете спостерігати в третьому рядку.

Акцентую увагу на 5 рядку. З довгого назви файлу — вирізаємо тільки середину, для того що б завжди бачити його розширення. Адже до одного типу файлів, припустимо «Аудіо», можна віднести багато форматів: mp3, wav і т. д.

Додаткове меню для кожного елемента, що викликається «рухом вліво» містить стандартний набір функцій, за однією лише особливістю. Перш ніж користувач отримає посилання на файл, для того що б поділитися, — йому запропонують зберегти файл в хмару.


На цьому екрані, користувач отримує вже звичний функціонал вибору підкатегорії


Екран, який користувач побачить натиснувши на поле пошуку, в основному розділі «Всіх вкладень». Зупинимося на ньому і розберемося в представленому функціоналі

Користувач може здійснити стандартний текстовий пошук і розширений варіант пошуку. Або зробити вибірку по заданим параметрам. Всі параметри є необов'язковими, але саме їх використання допоможе знайти «забуте» вкладення.

Давайте розглянемо, що станеться коли людина натискає на поле вибору дати:



Буде підсвічено поле, в якому буде розташовуватися підказка, що йому необхідно вибрати дату не раніше якій було отримано лист з шуканим вкладенням, а так само він побачить і друге поле, для якого можна вибрати другу дату, не пізніше якої було отримано лист. Простіше кажучи користувач вибирає період, в який було отримано лист, якщо він не пам'ятає точної дати.

Так само йому (природно плавно і красиво) розгорнеться календар для вибору дати. Стандартна, зручна прокрутка календаря(вправо-вліво), при натисканні на обрану дату календар згортається, вибране значення підставляється в полі.


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

На даному етапі робота з вкладеннями закінчена. І саме час зайнятися вирішенням другої частини поставленого завдання, а саме — корисні листи без вкладень.


Навряд чи на цьому макеті ви побачите якесь революційне рішення, щодо систематизації корисних листів. Але саме це рішення, на мій погляд, є найбільш раціональним, без глобальної зміни інтерфейсу поштового клієнта

Коротенько, це маленькі яскраві іконки, які повинні дати інтуїтивно зрозуміти користувачеві з яким корисним змістом листа. На жаль, у мене немає статистики, аналітики, за типами корисних листів, які отримують користувачі сервісу. Але акцентую увагу на тому, що слід дуже уважно поставитися до створення цих іконок. Дуже важливо, що б вони були, саме, інтуїтивно зрозумілі пересічному користувачеві. Так само слід кожну іконку виділити, своїм унікальним кольором, інакше весь ефект буде втрачений, а елемент буде просто захаращувати список листів.


Так як, таких типів корисних листів може бути багато, можна розміщувати їх в основному екрані, — це украде занадто багато корисного робочого простору. Або їх просто не можна буде вивести усім списком. Тому найбільш логічним рішенням у даній ситуації я вважав, — додати нові розділи туди, де їх найбільше чекають

Тестування

Не можу не торкнутися один дуже важливий момент. При розробці дизайну мобільних додатків дуже важливо тестувати не тільки кінцевий продукт (додаток), але і дизайн. Справа кількох хвилин, просто завантажуєте макети пристрій і розгортаєте на весь екран.



Справа в тому, що дизайн, призначений для мобільних пристроїв, зовсім по іншому сприймається на десктоп-екрані. Який би гарний мокап ви не підставили (фото вище — моє), ви ніколи не зрозумієте, як він буде виглядати в робочому додатку. Адже тільки на цьому смартфоні ви зможете по-справжньому оцінити розмір елементів, відстань між ними і зручність в цілому.

Замість завершення

Сподіваюся, у мене вийшло провести вас через весь процес створення дизайну, донести всі думки та ідеї.

Завершу статтю своїм маленьким девізом. Головне — любити те, чим займаєшся, адже не можна робити добре роботу, яка тобі не подобається.

Дякую, за увагу.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.