Всички палци, защо да достигнете навигацията трябва да замени Navbar в iOS дизайн

Navbar е изслушан

UINavigationBar, навигационно за кратко, съществува от оригиналния iPhone. В исторически план навигационните ленти са били удобни и ясни, лесни за разбиране и лесни за изграждане.

Тогава телефоните бяха балонирани, достатъчно, че iPhone 7 Plus замести продажбите на iPad mini. Сега, ако притежавате модерен iPhone, навигационните ленти могат да се почувстват невъзпитани - буквално от допир.

Растящите екрани означават, че разстоянието между навигацията и палците ни е нараснало. Екранът на 7 Plus е толкова висок, че ще отнеме дължина на палеца от 150 процента, за да достигне до тези досадни бутони с една ръка. Само още едно кокалче или две. Нищо странно.

Сензорните зони на Хърф илюстрират достижимост на дясната палец.

Докато устройствата се променят, нашият визуален език се променя с тях. Време е да се отдалечите от навигационната лента в полза на навигацията в рамките на палеца. За целите на тази статия ще се обадим на това достигане на навигацията.

Защо Navbar е извън допир

Navbar е основата на приложението „системен стандарт“, използвано в телефон, съобщения, поща, календар и безброй други. Има много причини да спечели:

  • iOS Standard Apple изгради навигационната лента, за да бъде персонализирана, мащабируема, достъпна и лесна за изпълнение. Тъй като е iOS стандарт, той е разпознаваем в приложенията.
  • Навигация Лявата и дясната страна на навигационната лента предоставят място за бутони. Лявата област често навигира потребителите нагоре в йерархията, а дясната зона е за грайфери. Бутонът за връщане информира потребителите, че те не са в коренния изглед.
  • Заглавие Осигурява последователно местоположение за текст, определящ функцията на изгледа. Тъй като навигационната лента винаги остава на екрана, това помага допълнително да се установи информационната йерархия.
  • Придружаване към лентата с раздели Ако имате ред икони с възможност за докосване в долната част на екрана (а именно лента с раздели), поставянето на други икони в горната част на екрана помага да се разделят отношенията родител / дете.
  • Лого Вашият клиент може да постави лого тук! Genius. Lol jk, намирам това за лепкаво, но се отклонявам.
Някои примерни навигации за вашето удоволствие.

О, боже, толкова много страхотни причини да използвате навигация в своя проект. Освен, по дяволите! Трудно е да вдигнеш палеца си сега.

Това е така, нека поговорим за някои минуси на Navbar:

  • По-трудно е да се върнеш назад. Можете да прекарате пръст от ръба, стига изгледът, който гледате, да няма нещо, което да се превърта хоризонтално, но ако това стане, вие сте в стреч-град.
  • Именуването на всички гледки е болка. Не всички екрани се нуждаят от постоянно заглавие, а някои изискват етикети твърде дълги, за да се поберат. Оставянето на празна зона за навигация губи пространство на екрана и изглежда безплодно.
  • Навигацията изисква две ръце. Ако можете да държите устройство в една ръка, трябва да можете да управлявате устройството с една ръка. Чувства се по-добре и е по-удобно в свят, пълен с колички за пазаруване, и бебета, които да носят.
  • Простите приложения стават по-сложни, отколкото е необходимо. Navbars са склонни да водят до информационна архитектура, която върви дълбоко. Лесно е да се разработи за хоризонтално прогресивно разкриване, което означава, че може да бъде битка за разгъване на линия или използване на лист.

Добре. Сега ние знаем как навигациите могат да бъдат глупости. И така, какво правим?

Достигнете навигация и Apple

Като дизайнер на iOS, това е частта, в която подкрепям тезата си, като изтъквам как Apple вече включва Reach Navigation. Готов? Ще започнем с два от очевидните начини Apple да се настани на по-големи мобилни екрани.

Вместо бутон за обратно движение, навигирайте назад, като плъзнете от левия ръб.

Първо, не е нужно да натискате бутона за обратно, можете да навигирате назад, като плъзнете от левия ръб. Можете също така да контролирате движението на екрана, когато той преминава назад, като ви позволява да надникнете в предишен екран, преди да извършите ангажимент. Тя не работи във всяко приложение, но когато се появи, трябва да гледате прехода на задния етикет в заглавието, което е просто красиво.

Леко двойно докосване на бутона за начало премества съдържанието надолу.

Второ, iOS включва функция, наречена Reachability, при която съдържанието на екрана ви се измества надолу, за да ви помогне да достигнете бутони в горната част, когато леко натиснете бутона за начало. Изработваме засега, но се чувствам като решение на Bandaid.

Сега ето къде завойът към Reach Nav става по-очевиден. Apple вече започна да отбива приложенията си от лентата за навигация. Картите и музиката имаха структурни редизайн за iOS 10, които намалиха или премахнаха нуждата от навигационни ленти.

Apple Music се променя от iOS 9 (отляво) до iOS 10 (вдясно). Премахването на лентата за навигация позволи на етикета на основния изглед да се увеличи по размер. Красива.

Сега и двете приложения използват лист, който можете да плъзнете надолу, за да го отхвърлите.

Apple Maps се променя от iOS 9 (отляво) до iOS 10 (вдясно). Потребителският интерфейс е почти изцяло обърнат. Настройките на картата и заключването към текущото местоположение са по-трудни за достигане, докато търсенето и резултатите са с приоритет.

Няколко бутона за връщане в Apple Music оцеляха от котлената блок за iOS 10, но те изглеждат маркирани за премахване в бъдеща ОС. Глупаво е да отделяте толкова хоризонтално пространство за бутон, който заема само 20 процента от недвижимите имоти. Apple Music също се превърна в обикновен етикет Back, вместо да описва връщащата дестинация, крайъгълен камък на функционалността на бутона за връщане чрез версията на iOS 7.

Бутонът Назад в iOS 10 заема много недвижими имоти тук. Изглежда временно, нали? Да.

Така че изглежда, че това е посоката, която предприема Apple, което ви дава шанс да промените дизайна си съответно.

Включване на навигация за достигане

Ето някои специфики как да включите Reach Nav във вашите приложения. Ако работите върху:

Ново приложение с помощта на лентата с раздели:

  • Използвайте листове, които изскачат от дъното и могат да бъдат преместени.
  • Вместо да поставяте важни бутони като Филтриране или Промяна на изгледа нагоре, вижте дали можете да ги плавате над лентата с раздели.
  • Проверете някои разговори за това, кои функции са от критично значение за мисията, преди да изберете раздели за най-ценните си екрани недвижими имоти.
  • Не поставяйте бутон за местоназначение - като Търсене, кошница, ново съобщение - в лентата за навигация. Или направете раздел или го вградете в областта на съдържанието.

Ново приложение без лента с раздели:

  • Опитайте открито чекмедже като Карти или листове като Поща.
  • Трябва ли да кажа това? Приоритетно поставете бутоните в долната част на екрана.

Обновяване на наследен дизайн:

  • Преместете най-използваните елементи до дъното.
  • Уверете се, че прекарването му от ръба на екрана, за да се върнете назад, работи за всички изгледи.
  • Вижте какво можете да вложите, за да освободите място в най-използваемите области на екрана.
  • Премахнете важните действия от горната дясна точка на навигацията и ги поставете навсякъде другаде.
Бързо предаване за това как Safari може да премести адресната лента до дъното, да премахне лентата с инструменти и да запази функционалността си.

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

Примери за достигане на Nav in the Wild

Новите приложения на Apple не са единствените продукти, които започват да уважават Reach Nav. Lyft и Pokémon Go поставят всичко в рамките на една ръка разстояние.

Pokémon Go и Lyft използват Reach Navigation.

Някои други приложения като Overcast са започнали да използват листове, които ви позволяват да прекарате пръст надолу.

Overcast използва листове, които позволяват на потребителите да прокара надолу.

Приложението iOS Twitter премахва необходимостта да прекарате пръст от ръба на екрана, за да се върнете назад, сега можете да прекарате пръст отвсякъде.

Очаквайте да видите още приложения да преместят функционалността до дъното в най-достъпната част на екрана. Адаптирането е доста лесно, въпреки че приложенията с прекомерни функции ще имат най-много проблеми.

Поддържате връзка

Навбар е съществена част от iOS, тъй като Apple пусна първия комплект за разработчици и ни послужи добре. Но е време да го пуснем

Нека се съгласим да спрем да залепваме важни бутони в горната част на екрана. По-добрата навигация е на място.

Брад Елис е основателят на Tall West, дизайнерска агенция, чиито клиенти включват Airbnb и Target. Той е носител на Apple Design Award и е получил две Webbys за дизайн на приложения. Ако искате да работите заедно, пуснете му линия на Брад в Tallwest.com.

Сътрудници: Ронан Рууни и Маги Мейсън