Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Гісторыя двух платформаў ці як распрацоўваць дызайн адначасова для Android і iOS

by
Length:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Незалежна ад таго, працуеце вы дома, складаючы кантракты, або на агенцтва, кампаніі маюць патрэбу ў мабільным дадатку па многіх прычынах. Рознага тыпу ўстановы павінны абслугоўваць сваіх кліентаў, а таксама прылады, якія яны выкарыстоўваюць. Часта гэта азначае стварэнне мабільнага прыкладанне для Android і iPhone.

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

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

Перад пачаткам: Выберыце ваш падыход

1. Трымайце ворага бліжэй

У кожнага з нас ёсць свае перавагі па выбары платформы распрацоўкі. Я заўсёды выкарыстоўваў iPhone, таму ў мяне ёсць больш дакладнае разуменне шаблонаў карыстацкага інтэрфейсу ў iOS. Першае, што трэба зрабіць, гэта разабрацца з другога платформай, якую раней вы яшчэ не выкарыстоўвалі і лепшы спосаб зрабіць гэта - купіць дадатковае прылада, у маім выпадку - Android. Магчыма, нават нядрэнна было б выкарыстоўваць яго ў якасці асноўнага прылады для распрацоўкі праекта, каб навучыцца адчуваць саму платформу.

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

2. Выберыце прыярытэт

Паколькі мы праектуем для абедзвюх платформаў адначасова, маючы справу з рэальным светам, дзе час абмежаваны, вам прыйдзецца выбраць вядучую платформу для распрацоўкі. Прыміце рашэнне не ў адпаведнасці з вашымі асабістымі перавагамі, а на аснове патрабаванняў рынку. Большасць спажыўцоў выкарыстоўваюць Android? Гэта платнае прыкладанне? Якая мэтавая аўдыторыя? Задаючы гэтыя пытанні, вы зможаце вырашыць, якая платформы пераважней.

3. Азнаёмцеся з правіламі

Азнаёмцеся з рэкамендацыямі карыстацкага інтэрфейсу для Android і iOS. У мінулым Apple, як вядома, была сістэмай, якая мела строгія прынцыпы і правілы. Каб размясціць прыкладанне ў краме, існуе працэс зацвярджэння, які займае прыблізна два тыдні. У краме GooglePlay няма працэсу зацвярджэння. Аднак з-за больш нізкага бар'ера для ўваходу на рынак Android якасць дызайну прыкладанняў заўсёды было горш. Google імкнецца змяніць гэта з дапамогай рэкамендацый для матэрыяльнаму дызайне.

Канцэпцыя Material Design стаў вельмі папулярнай для вэб-дызайнераў

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

Праектаванне вашага прыкладання

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

1. Агульны стыль

Пачынаючы з iOS7, кампанія Apple перайшла на больш «плоскі" стыль дызайну і адкінула рэзкія цені, тэкстуры і эфекты, якія раней былі характэрныя для iPhone. Android, быўшы больш сістэматычнасць па стылі ў пачатку, пайшоў іншым шляхам. Новае кіраўніцтва па Material Design ад Google ствараюць больш натуральныя лініі, характэрныя для рэальнага свету, з шматузроўневай «папяровай» іерархіяй.

2. Рэалістычныя кнопкі

На тэлефонах Android ёсць кнопка «Назад», якую можна выкарыстоўваць для вяртання да папярэдняга экране прыкладання.

Вярніцеся назад

У iPhone няма гэтай кнопкі, таму неабходна вярнуцца да асноўнага меню экрану. Звычайна рух «назад» робіцца шевроном ў верхнім левым куце экрана, і пра гэта трэба памятаць ствараючы прыкладанне.

3. Глабальныя элементы

Існуюць глабальныя элементы (напрыклад, радокстану і загаловак), якія адлюстроўваюцца на ўсіх старонках вашага дызайну. Вы не павінны змяняць іх вышыню ці стыль наогул, калі вы хочаце, каб прыкладанне было натыўных, таму я б рэкамендаваў вызначыцца з гэтымі пунктамі яшчэ на першых этапах стварэння дызайну. У іншым выпадку вы можаце выкарыстоўваць плэйсхолдер (або статус і верхнюю панэль з вашай асноўнай АС) на кожным з макетаў, але ўказваць распрацоўніку, што яны павінны быць аднолькавымі па ўсіх параметрах.

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

Global Elements on Android and iOS

4. Навігацыя

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

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

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

Navigation patterns on Android and iOS

5. Выкарыстоўваць Карткі ці не?

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

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

Cards for Android and iOS
Карты для Android і iOS, некаторыя вымярэнне надае трохі частка

6. Выбар шрыфта

Сямейства шрыфтоў для iOS - Helvetica Neue. На Android - гэта Roboto. Хоць стыль шрыфтоў прыкметна адрозніваецца, метрыкі вельмі падобныя. Вы зэканоміце час, калі будзеце працаваць толькі з адным з іх, але абмяркуйце з распрацоўшчыкамі пытанні рэалізацыі дакладнага шрыфта для кожнай сістэмы. Пры працы з важнымі макетамі там, дзе важны памер шрыфта, рэкамендуецца, па меншай меры, праверыць свой макет з выкарыстаннем абодвух шрыфтоў.

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

  • Android Material Design выкарыстоўвае пустое прастору ў макеце
  • Існуе таксама больш рэзкае выкарыстанне памераў шрыфтоў у material design. Цудоўныя загалоўкі з вялікай колькасцю вольнага прасторы забяспечваюць зразумелую іерархію.
  • На iOS існуе менш рэзкая варыяцыя памераў шрыфта. Але ёсць трохі больш варыяцый ў таўшчыні шрыфтоў, якія па-ранейшаму дазваляюць паказаць іерархію.
  • Як правіла, абедзве платформы выкарыстоўваюць больш тонкія літары ў сямействе шрыфтоў. Аднак у прыведзеным ніжэй прыкладзе дызайн Android выкарыстоўвае спалучэнне тонкіх і звычайных літар Roboto, у той час як дызайн iOS выкарыстоўвае тоўстыя і рэгулярны літары для Helvetica Neue.

Гэта вельмі просты прыклад, каб падкрэсліць, як простыя друкарскія асаблівасці дапамогуць адразу вызначыць, ці маеце вы справу з Android або iOS-дадаткам.

Typography on Android and iOS

7. Сеткі і аб'екты дотыку

iOS (44px @ 1x) і Android (48dp - 48px пры суадносінах 1: 1) маюць некалькі адрозныя рэкамендацыі для сэнсарных аб'ектаў. Кіраўніцтва па Material Design прапануе выраўноўваць ўсе элементы з дапамогай сеткі памерам 8dp.

У апошнім праекце, над якім я працаваў, мы палічылі правільным прытрымлівацца гэтым рэкамендацыям ад Android, таму што (a) больш буйны аб'ект 48px выкарыстоўваецца і ў дачыненні для абедзвюх платформаў, і (б) макет для Material Design больш дакладны і новы. У любым выпадку вам спатрэбіцца сетка для працы, але з больш строгім вызначэннем Android мы выявілі, што памер 8dp добра прымяняецца. Гэта азначае, што вы ствараеце свой дакумент з крокам у 8dp ў гарызантальнай і вертыкальнай плоскасцях, каб стварыць структуру сеткі.

8. Стыль кнопак

У Material Design прадугледжана некалькі стыляў кнопак:

  1. Усплывальныя кнопкі: самыя выкарыстоўваюцца кнопкі. Цені даволі буйныя і падымаюць іх на старонцы. Яны павінны выкарыстоўвацца толькі на фоне або на картках. Яны не павінны выкарыстоўвацца пры абвесткі або усплываючых вокнах, бо гэта стварае занадта шмат слаёў глыбіні. Першасная кнопка прымае ваш колер акцэнту, у той час як другасная кнопка па колеры звычайна менш прыкметная.
  2. Плоскія кнопкі: па-сутнасьці гэта тэкст у вашым колеры з акцэнтам, без якіх-небудзь абмяжоўваюць элементаў. Яны выкарыстоўваюць водступы і ўсе ўласцівасці, каб падтрымліваць структуру.

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

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

Button styles on Android and iOS

9. Акно дзеянняў

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

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

Для акна дзеянняў і папярэджанняў iOS і Android выкарыстоўваюць розныя ўласцівасці для ўказанні глыбіні слаёў:

  • Перакрыцця Android маюць суцэльны колер з невялікай ценем, якая паказвае, што гэта верхні пласт «паперы».
  • Перакрыцця iOS не маюць ценю, але валодаюць невялікі празрыстасцю фону.
Action sheet differences on Android and iOS

Кнопкі ў выпадальным спісе

Існуюць толькі на Android, гэта вельмі хуткі спосаб стварэння меню для выбару. Майце на ўвазе, аднак, што натыўнага эквівалента iOS няма. У прыведзеным ніжэй прыкладзе карыстальнік націскае «профіль» на кроку 1, бачыць простае меню ў гэтым месцы, і можа выбраць адзін з даступных профіляў. Гэтыя меню таксама часта выкарыстоўваюцца ў панэлі дзеянняў, пазначанай трыма вертыкальнымі кропкамі.

Увод дадзеных

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

10. Сэгмэнты элементы кіравання

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

Segmented controls on Android and iOS

11. Папярэджанні

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

У папярэджаннях Android выкарыстоўваюцца плоскія стылі кнопак, якія былі паказаны раней, памеры якіх можна знайсці ў кіраўніцтве па material design. Дзеянні знаходзяцца ў правым ніжнім куце акна папярэджання. «Кнопкі» на самай справе цалкам заснаваныя на тэксце. Яны выкарыстоўваюць усе водступы, каб надаць ім больш структураванні, і яны выкарыстоўваюць асноўны колер дзеяння вашага прыкладання.

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

Example of alert dialogues for Android and iOS using location as an example

12. Абразкі

Дызайн значкоў - даволі спецыфічная вобласць інтэрфейсу. Незалежна ад таго, карыстаецеся Ці вы бясплатныя абразкі, заахвочваючы дызайнера або распрацоўваеце іх самастойна, для кожнай платформы існуе асаблівы стыль. iOS папулярызаваць абразкі, з вельмі тонкімі рыскамі. Значкі сістэмы Android маюць больш тоўстыя рыскі ціцалкам суцэльныя абразкі. Раней абразкі Android выкарыстоўвалі перспектыву або трохмерны паварот, але зараз іх рэкамендацыі па стылі паказваюць на двухмерныя абразкі, якія размяшчаюцца прама. Вось кароткі прыклад з некалькімі абразкамі для параўнання або выкарыстанне прамых спасылак на абразкі для Android або iOS

13. Закускі, тосты, загрузка малюнкаў

Няўдалы нумар 13. Ёсць некалькі дэталяў карыстацкага інтэрфейсу, якія могуць выслізнуць ад вашай увагі. Звычайныя элементы, напрыклад абвесткі і абразкі загрузкі, часта застаюцца па-за ўвагай распрацоўшчыкаў. Магчыма, у вас быў вопыт работы з цудоўнымі загрузнікамі і дзіўнымі абвесткі, якія не адпавядалі стылю прыкладання. Звычайна для іх ёсць гатовыя рашэнні, але яны могуць быцьнастроены пад стыль вашага прыкладання. Гэта вызначана тая вобласць, у якой супрацоўніцтва з распрацоўшчыкамі - лепшы спосаб вырашыць, якім чынам усё павінна працаваць.

14. Агульныя элементы карыстацкага інтэрфейсу

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

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

Android left and iOS right
Android (злева) і iOS (справа)

Рэзюмэ

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

Рэсурсы

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

Метадычныя рэкамендацыі

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

Наборы карыстацкіх інтэрфейсаў

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

Абразкі

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

Макеты

Заўсёды карысна мець макеты прылад для прадстаўлення вашага прыкладання. Яны бываюць розных катэгорый. Магчыма, вам спатрэбіцца базавы макет прылады для кантэксту, спрошчанае плоскае прылада, якое дазваляе вашаму з дадаткам ззяць, або макет у дзеянні, каб прадставіць прыклад выкарыстання. Вось некалькі рэсурсаў, якія я знайшоў карыснымі, іх значна больш. Калі справа даходзіць да прылад Android, будзьце асцярожныя, што вы выбіраеце. Я схіляўся да дыяпазону Nexus, так як яны з'яўляюцца тэлефонамі вытворчасці Google і не будуць намякаць на перавагу іншым вытворцам.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.