Разработване за Android срещу iOS: Навигационни модели

В статията от миналата седмица започнахме с подход на високо ниво, където описахме разликите между дизайнерските езици на iOS и Android: плосък дизайн и дизайн на материали съответно.

Ако все още нямате добро разбиране на Flat vs Material, препоръчвам ви да прочетете това преди да прочетете тази статия.

През следващите няколко седмици ще преминем към повече мобилни разработки на Native vs. Hybrid и други разлики между платформите Android срещу iOS.

Тази седмица нека поговорим за моделите на навигационния дизайн.

Когато мислите как потребителите ви да навигират в мобилното ви приложение, трябва да си задавате следните видове въпроси:

  • Как трябва да се ориентира потребителят през разделите за разлика в моето приложение?
  • Трябва ли да използвам навигационно чекмедже или раздели?
  • Трябва ли разделите ми да са в горната или долната част на екрана?
  • Как да позволя на моя потребител да се върне от текущия си изглед?

Ще отговорим на тези въпроси както за iOS, така и за Android платформата (с казуси от някои много популярни приложения). Ако още не сте и искате да получавате актуализация при публикуването на следващите статии, моля, абонирайте се за нашия пощенски списък (обещавам без спам, обещавам). Ако сте предприемач / разработчик в мобилното пространство и планирате да пуснете мобилното си приложение както на iOS, така и на Android, е наложително да разберете спецификата на всяка екосистема и потребителска база, за да доставяте по-добър софтуер.

Защо да се занимавам с изучаване на навигацията?

Навигацията е една от (ако не и най-важната) част от мобилното приложение. Тъй като екраните на мобилни устройства са доста малки в сравнение с лаптопите, обикновено не можете да показвате всичко, което приложението ви може да прави в един екран. Затова е жизненоважно да обясните на потребителя как да навигира от една секция в друга. Вземането на по-интелигентни решения за потребителско изживяване (и записване на това как потребителите реагират на тях) може значително да промени начина, по който потребителите използват (или изоставят) приложението ви.

Tabs

Когато приложението ви има няколко основни секции и искате да оставите потребителя си бързо да превключва между тях, раздели са добър избор. Разделите ви позволяват да организирате основните изгледи на приложението си и да позволявате на потребителите бързо да изследват съдържанието във всеки от тях.

IOS

В iOS, раздели са в долната част на екрана. Това е много добре познат и познат подход за навигационен дизайн, който се използва от много успешни продукти като Facebook, Twitter и Instagram. Разделите на iOS обикновено имат както икона, така и текст.

Раздели в приложението за iOS на TwitterЛента в раздела за приложението на iOS на Trello

Типично използване на раздели има всеки от тях, включващ раздел от приложението ви:

  • Начало (основно съдържание) Tab
  • Търсене (ако има съдържание за търсене) Tab
  • Създаване / създаване на раздела
  • Раздел Известия
  • Раздел на профила
Освен това, раздели често имат икони или номера, показващи, че има ново съдържание за потребителя

Съществува конвенция и ограничение за разполагане на до 5 раздела. Обикновено не трябва да има повече от 5 „големи“ неща, които прави приложението ви (това е просто добро UX изживяване като цяло).

В портретен режим има само толкова много пространство хоризонтално на iOS устройства. По този начин, ако поставите 6-ти раздел, няма да има място за всички тях и системата ще ги „прехвърли” в „Още раздела”. Докосването на този пунктиран раздел отваря списък с други опции на раздела, които не са влезли в лентата с раздели.

Пример за раздела Още в Музикалното приложение на Apple

андроид

В Android раздели са в горната част и обикновено са представени като текст или икони (а не като текст и икони), освен ако не се движите в долната лента за навигация, вижте по-долу.

Раздели в приложението за Android на Twitter

Android Tabs обикновено са по-фокусирани върху специфични за приложение секции, отколкото iOS и по-малко върху „второстепенни“ секции като Търсене, Създаване / Създаване и Профил, тъй като Android има други елементи за навигация, за да изпълни тези роли.

Прекарване на пръст

Приложенията за Android (като Backdrops) обикновено позволяват на потребителите да прекарват екрана хоризонтално, за да се движат между разделите.

Долна навигационна лента

Долната лента за навигация е сравнително нов дизайн на Android модел, който се опитва да имитира как се използват раздели в iOS. Докато аз лично твърдя, че долният раздел е глупав в Android (тъй като е твърде близък до емблематичната навигационна лента на Android), Google казва следното в раздели Tabs vs. Navigation Navigation:

Разделите улесняват проучването и превключването между различни изгледи и

Долните ленти за навигация улесняват изследването и превключването между изгледи от най-високо ниво с едно докосване.

Чекмедже за странична навигация

Ако приложението ви има повече от шепа основни секции (или „вторични“ секции като настройки и обратна връзка), Навигационното чекмедже е друг много популярен модел на дизайн. Тя ви позволява да предоставите на потребителя списък от секции, които той може да изтрие, когато не го изискват.

IOS

На iOS, Навигационните чекмеджета не са естествен дизайн. Те дойдоха на платформата с развитието на дизайна на iOS, но все още са важна част от навигацията в много приложения.

Тъй като Apple не предлага API за прилагане на навигационни чекмеджета, разработчиците обикновено използват библиотеки на трети страни (тук е частичен списък).

андроид

На Android навигационните чекмеджета са естествен модел на дизайна, така че Google ви предоставя API-тата, от които се нуждаете, за да изградите навигационно чекмедже, няма нужда да търсите API-та на трети страни.

Ако е приложимо, горната част на навигационното чекмедже обикновено показва специфична за потребителя информация.Дъното на навигационното чекмедже може да показва вторични секции.

Топ барове

IOS

В iOS горната лента се нарича Navigation Bar. Навигационните барове обикновено включват:

  • Заглавието на секцията, в която потребителят се намира в момента
  • Бутон за връщане вляво, ако има екран, към който да се придвижвате обратно
  • Елемент за контрол на съдържанието вдясно, ако е приложимо (като Търсене)
Навигационната лента на приложението за iOS на TwitterНавигационната лента на приложението за iOS на Twitter с бутон за връщане

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

андроид

В Android горната лента се нарича лента с инструменти. Android Toolbar е по-стандартизирана от iOS и обикновено включва:

  • Заглавието на секцията, в която потребителят се намира в момента
  • Бутон нагоре вляво, ако има екран, към който да се придвижвате обратно
  • Бутон за навигационно чекмедже, ако няма бутон нагоре
  • Бутони за меню и меню за препълване с повече опции
Обърнете внимание, че в приложенията за Android както с лента с инструменти, така и с раздели, двете са обединени в един елемент.Менюто за препълване в приложението за Android на Youtube

Бутоните и менюто за препълване могат да се използват като алтернатива и като допълнение към чекмеджето за странична навигация. Менюто с препълване потенциално може да премахне нуждата от странично чекмедже за навигация в зависимост от това колко различни изгледи трябва да съдържа приложението ви.

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

Назад бутони (и навигационна лента на Android)

Чудесно е да се придвижвате до екран, но също така е важно да направите очевидно за потребителите как да се върнат обратно.

IOS

В iOS единственият начин за потребителя да се придвижва назад е чрез бутон за обратно / затваряне отляво на лентата за навигация.

андроид

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

Бутонът нагоре

Бутонът Up обикновено се включва в лентата с инструменти и премества потребителя обратно към последния екран, който са гледали в приложението ви (докато не достигне до началния екран на приложението).

Навигационната лента и бутона Назад за Android

Бутонът за връщане е част от лентата за навигация и „навигира в обратен хронологичен ред през историята на наскоро гледани екрани“. Въпреки че бутонът нагоре няма да изведе потребителите от приложението ви, бутонът „Назад“ може да отведе потребителя от текущото приложение до това, което преди са използвали.

Една съществена разлика между iOS и Android е това, че предният има физически бутон за начало (който служи и като скенер за печат на палец), а последният пропуска предния физически бутон да има по-голям екран (и хвърля скенера за отпечатване на палеца върху гърба на телефона).

Дори ако това е модел на системен дизайн, а не „приложение“, навигационната лента на Android може да бъде скрита и потапящи медийни приложения (като Youtube, Google Photos, Netflix, ect) ще скрие лентата за навигация, за да позволи на потребителя да се съсредоточи върху съдържанието, което приложението представя.

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

заключение

Това е статията за тази седмица за навигационните модели на iOS и Android.

В следващата статия ще преминем през разработката на Native vs. Hybrid за мобилни приложения.

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

Тази статия е в съавторство с:

Джордан Рехо, консултант по софтуерно инженерство, който помага на клиентите в мобилното пространство, като архитектира и пише софтуера, от който се нуждаят.

и

Алекс Буш, софтуерен инженер в SmartCloud. Той блогове за разширени теми за iOS и Ruby on Rails.