Горизонтальна прокрутка в дизайні мобільних додатках

Концепція журналу з використанням інтерфейсу з горизонтальною прокруткою

Фундаментальне UI / UX дослідження

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

Ось кілька прикладів, де необхідно провести дослідження:

Але тепер давайте почнемо з горизонтальної прокрутки.

Горізонтальнаяпрокрутка

Ставлячи правильне питання

Моє питання: Як можна було б використовувати систему горизонтальної прокрутки для додатків?

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

Горизонтальна прокрутка в дизайні мобільних додатках

Примітивне порівняння двох систем У вертикальній системі сторінки впорядковуються один над одним, і користувач прокручує сторінку вниз, щоб побачити більше контенту. Меню розташовані зверху і знизу. Я думаю, що ця система так широко поширена, тому що з самого початку мобільних додатків вертикальна система була стандартом. Більшість дизайн-програм для проектування та прототипування засноване на вертикальних артбордах.

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

Відповідаючи на питання

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

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

Два типу меню в моїй концепції горизонтальної прокрутки Зліва ви побачите відкрите меню навігації. Воно зникне, як тільки користувач зробить перемикання між двома екранами. Це меню може відображати набагато більше інформації, такої як інформація про програму, повідомлення або іконки. Справа знаходиться off-canvas меню, доступ до якого забезпечується натисканням іконки в лівому нижньому кутку. Він може містити такі функції, як пошук, контакти або просто додаткове меню.

Базова компоновка

Анімація базової компонування

Журнал на практиці

висновок

Сподіваюся, я продемонстрував вам новий спосіб сприйняття дизайну мобільних додатків і надихнув вас на проведення власних фундаментальних UI / UX досліджень. Під час створення цієї системи горизонтальної прокрутки я багато дізнався про основи дизайну. Я задоволений результатом, але я думаю, що в цій галузі має бути проведено набагато більше досліджень. Особливо живий прототип зможе допомогти зрозуміти, чи буде ця концепція прийнята користувачем. Зростання популярності Snapchat показує мені, що нові підходи до призначеного для користувача інтерфейсу варті того, і користувачі прагнуть вивчити нові способи створення додатків.

Дякую за увагу!