Распрацоўка для Android супраць iOS: Навігацыйныя ўзоры

У артыкуле на мінулым тыдні мы пачалі падыход на высокім узроўні, у якім апісалі адрозненні паміж дызайнерскімі мовамі iOS і Android: плоскі дызайн і матэрыяльны дызайн адпаведна.

Калі вы яшчэ не добра разумееце Flat vs Material, рэкамендую вам прачытаць гэтую тэму, перш чым прачытаць гэты артыкул.

На працягу наступных некалькіх тыдняў мы будзем пераадольваць вялікую колькасць мабільных распрацоўшчыкаў Native vs. Hybrid і іншыя адрозненні паміж платформамі Android супраць iOS.

На гэтым тыдні пагаворым аб мадэлях дызайну навігацыі.

Калі вы думаеце пра тое, як вашы карыстальнікі збіраюцца перамяшчацца па вашым мабільным дадатку, вам варта задаць сабе наступныя пытанні:

  • Як карыстальнік павінен арыентавацца па раздзелах раздзелаў майго прыкладання?
  • Калі я павінен выкарыстоўваць скрыню навігацыі або ўкладкі?
  • Ці павінны мае ўкладкі ўверсе або ўнізе экрана?
  • Як мне дазволіць маім карыстальнікам вярнуцца са свайго бягучага ўяўлення?

Мы будзем адказваць на гэтыя пытанні як для платформы iOS, так і для Android (з прыкладамі некаторых папулярных прыкладанняў). Калі вы яшчэ не хочаце і хочаце атрымаць абнаўленне пры публікацыі наступных артыкулаў, падпішыцеся на наш спіс рассылкі (я не абяцаю спаму). Калі вы прадпрымальнік / распрацоўшчык мабільнай прасторы і плануеце выпусціць сваё мабільнае прыкладанне як на iOS, так і на Android, вельмі важна разумець спецыфіку кожнай экасістэмы і базы карыстальнікаў, каб пастаўляць лепшае праграмнае забеспячэнне.

Чаму турбавацца вывучэннем навігацыі?

Навігацыя - гэта адна (калі не самая) самая важная частка мабільнага прыкладання. Паколькі экраны мабільных прылад у параўнанні з ноўтбукамі даволі маленькія, звычайна вы не можаце паказваць усё, што можа зрабіць ваша дадатак, на адным экране. Такім чынам, жыццёва неабходна растлумачыць карыстачу, як перамяшчацца з аднаго раздзела ў іншы. Прыняцце разумнейшых рашэнняў аб карыстацкай працы (і запіс таго, як карыстальнікі рэагуюць на іх) можа значна змяніць, як карыстальнікі выкарыстоўваюць (альбо адмаўляюцца) ад вашага прыкладання.

Ўкладкі

Калі ў вашым дадатку ёсць некалькі асноўных раздзелаў, і вы хочаце дазволіць карыстачу хутка пераключацца паміж імі, укладкі - выдатны выбар. Укладкі дазваляюць арганізаваць асноўныя прагляды вашага прыкладання і дазваляюць карыстальнікам хутка даследаваць змесціва кожнага з іх.

iOS

На iOS ўкладкі знаходзяцца ўнізе экрана. Гэта вельмі вядомы і звыклы падыход да дызайну навігацыі, які выкарыстоўваецца мноствам паспяховых прадуктаў, такіх як Facebook, Twitter і Instagram. Укладкі iOS звычайна маюць іконку, і тэкст.

Укладкі ў дадатку IOS на TwitterПанэль укладак у дадатку Trello для iOS

Звычайнае выкарыстанне ўкладак мае кожнае з раздзелаў вашай заяўкі:

  • Галоўная (асноўны змест) Укладка
  • Укладка "Пошук" (калі ёсць змест для пошуку)
  • Скласці / стварыць укладку
  • Укладка апавяшчэнняў
  • Укладка профілю
Акрамя таго, на ўкладках часта ёсць абразкі альбо лічбы, якія паказваюць на наяўнасць новага змесціва для карыстальніка

Існуе ўмоўнасць і абмежаванне на наяўнасць да 5 укладак. Умоўна ў вашым дадатку павінна быць не больш за 5 "вялікіх" рэчаў (гэта наогул проста добры UX-досвед).

У партрэтным рэжыме гарызантальна на прыладах iOS ёсць толькі столькі месца. Такім чынам, калі вы пакладзеце 6-ю ўкладку, не будзе месца для ўсіх іх, і сістэма перакіне іх у дадатковую ўкладку. Націснуўшы на ўстаўку, адкрыецца спіс іншых опцый, якія не ўвайшлі ў радок укладкі.

Прыклад укладкі

Android

На Android укладкі знаходзяцца ў верхняй частцы і звычайна прадстаўлены як тэкст альбо абразкі (а не тэкст і абразкі), калі вы не збіраецеся ў ніжняй панэлі навігацыі, глядзіце ніжэй.

Укладкі ў прыкладанні для Android на Twitter

Укладкі Android звычайна больш арыентаваны на раздзелы для прыкладанняў, чым на iOS, і менш на "другасныя" раздзелы, такія як Пошук, Стварэнне / Стварэнне кампазіцый і Профіль, паколькі Android мае іншыя элементы навігацыі для выканання гэтых роляў.

Правядзенне

Прыкладанні для Android (напрыклад, Backdrops) звычайна дазваляюць карыстальнікам праводзіць пальцам па экране па гарызанталі, каб перамяшчацца па ўкладках.

Ніжняя панэль навігацыі

Ніжняя панэль навігацыі - гэта адносна новы дызайн Android, які спрабуе імітаваць, як укладкі выкарыстоўваюцца ў iOS. Хоць я асабіста сцвярджаю, што ніжняя ўкладка ў Android недарэчная (бо яна занадта блізкая да знакавай навігацыйнай панэлі Android), Google кажа пра наступныя навігацыі:

Укладкі дазваляюць лёгка даследаваць і пераключацца паміж рознымі відамі і

Панэлі навігацыі знізу дазваляюць лёгка даследаваць і пераключацца паміж выглядамі верхняга ўзроўню адным кранам.

Бакавая скрыня навігацыі

Калі ў вашым дадатку ёсць некалькі асноўных раздзелаў (альбо "другасныя" раздзелы, такія як налады і зваротная сувязь), навігацыйная скрыня - яшчэ адзін вельмі папулярны дызайн. Яна дазваляе прадаставіць карыстачу спіс раздзелаў, якія яны могуць сцягнуць, калі яны гэтага не патрабуюць.

iOS

На iOS, Navigation Ladies - гэта не ўласны дызайн. Яны прыйшлі на платформу, калі дызайн iOS развіваўся, але па-ранейшаму застаецца важнай часткай навігацыі ў шмат якіх прыкладаннях.

Паколькі Apple не прадастаўляе API для ўкаранення навігацыйных скрынь, распрацоўшчыкі звычайна выкарыстоўваюць бібліятэкі трэціх бакоў (вось частковы спіс).

Android

На Android, навігацыйныя скрыні - гэта ўласная мадэль дызайну, таму Google прапануе вам API, неабходныя для стварэння навігацыйнай скрыні, не трэба шукаць API іншых вытворцаў.

Калі гэта дастасавальна, у верхняй частцы навігацыйнага скрыні звычайна паказваецца інфармацыя пра карыстача.Унізе навігацыйнай скрыні могуць паказваць другасныя раздзелы.

Лепшыя бары

iOS

У iOS верхняя панэль называецца "Navigation Bar". Панэлі навігацыі звычайна ўключаюць:

  • Назва раздзела, у якім зараз знаходзіцца карыстальнік
  • Кнопка "Назад" злева, калі ёсць экран для перамяшчэння назад
  • Прымяняльны элемент кіравання змесцівам справа (напрыклад, пошук)
Панэль навігацыі ў прыкладанні для IOS TwitterПанэль навігацыі ў прыкладанні для iOS пры дапамозе кнопкі

Асноўная мэта Панэлі навігацыі - дазволіць карыстачу перамяшчацца па шэрагу іерархічных экранаў прыкладання пры дапамозе кнопкі "Назад".

Android

На верхняй панэлі Android называецца Панэль інструментаў. Панэль інструментаў Android больш стандартызавана, чым iOS, і звычайна ўключае ў сябе:

  • Назва раздзела, у якім зараз знаходзіцца карыстальнік
  • Кнопка ўверх злева, калі ёсць экран для перамяшчэння назад
  • Кнопка навігацыі, калі няма кнопкі "Уверх"
  • Кнопкі меню і перапаўненне меню з дадатковымі опцыямі
Звярніце ўвагу, што ў Android-дадатках як з панэллю інструментаў, так і з укладкамі яны аб'яднаны ў адзін элемент.Меню перапаўнення Android-прыкладання Youtube

Кнопкі меню і меню перапаўнення могуць быць выкарыстаны ў якасці альтэрнатывы і дапаўненні скрыні для навігацыі. Меню перапаўнення патэнцыйна можа знішчыць патрэбу ў скрыні для навігацыі бакоў, у залежнасці ад таго, колькі розных відаў павінна змяшчаць ваша прыкладанне.

Акрамя таго, вы можаце дазволіць кожнаму раздзелу са свайго скрыні навігацыі мець сваё ўласнае меню з перапоўненымі дадатковымі параметрамі, з якімі ваш карыстальнік можа ўзаемадзейнічаць.

Кнопкі назад (і навігацыйная панэль Android)

Выдатна перамяшчацца на экран, але таксама важна зрабіць карыстальнікам зразумела, як вярнуцца.

iOS

У iOS адзіны спосаб, каб карыстальнік перайшоў назад, - гэта кнопка

Android

Паколькі Android мае экранную панэль навігацыі, дызайн-дакументацыя адрознівае кнопку "Уверх" і "Назад".

Кнопка уверх

Звычайна кнопка

Панэль навігацыі Android і кнопка Назад

Кнопка "Назад" з'яўляецца часткай навігацыйнай панэлі і "перамяшчаецца ў зваротным храналагічным парадку па гісторыі нядаўна прагледжаных экранаў". У той час як кнопка "Уверх" не выводзіць карыстальнікаў з вашага прыкладання, кнопка "Назад" можа перавесці карыстальніка з бягучага прыкладання да таго, якім яны карысталіся раней.

Адным з істотных адрозненняў паміж iOS і Android з'яўляецца тое, што папярэдняя ёсць фізічная кнопка дома (якая таксама выконвае функцыю сканавання пальца), а апошняя адмаўляецца ад фізічнай кнопкі, якая мае асабовую частку, каб мець большы экран (і кідае сканер друку вялікага пальца на задняя частка тэлефона).

Нават калі гэта "сістэмны" шаблон дызайну, а не "прыкладанне", навігацыйная панэль Android можа быць схаванай і захапляльнай медыя-прыкладаннямі (такімі як Youtube, Google Photos, Netflix, ect) будзе хаваць панэль навігацыі, каб карыстальнік мог засяродзіцца на змест, якое прыкладанне ўяўляе.

Паколькі ў панэлі навігацыі ёсць кнопка "Назад", не рэдка бачыць, што прыкладанні для Android не ўключаюць кнопку "Уверх", і карыстальнік выкарыстоўвае кнопку "Назад", бо іх функцыянальнасць вельмі падобная.

Выснова

Вось гэта артыкул на гэтым тыдні пра навігацыйныя ўзоры на iOS і Android.

У наступным артыкуле мы разгледзім распрацоўку Native vs. Hybrid для мабільных прыкладанняў.

Калі вы хочаце атрымліваць абнаўленне, калі наступныя артыкулы будуць у прамым эфіры, падпішыцеся на наш спіс рассылкі. Калі вы прадпрымальнік / распрацоўшчык мабільнай прасторы і плануеце арыентавацца і на Android, і на iOS, вы значна павялічыце свае шанцы на поспех, калі зразумееце дызайн і асаблівасці функцый паміж гэтымі дзвюма аперацыйнымі сістэмамі і чаканнямі карыстальнікаў.

Дадзены артыкул у суаўтарстве з:

Джордан Рэё, кансультант па распрацоўцы праграмнага забеспячэння, які дапамагае кліентам у мабільнай прасторы шляхам архітэктуры і напісання неабходнага праграмнага забеспячэння.

і

Алекс Буш, інжынер праграмнага забеспячэння ў SmartCloud. Ён вядзе блогі пра дадатковыя тэмы iOS і Ruby on Rails.