Android VS. iOS: Сравнете 20 UI компоненти и модели (част 2)

20 разлики между Android и iOS, които трябва да знаете, когато проектирате за приложения за крос-платформа

中文 版 Оригинална китайска версия, публикувана на 10 декември 2016 г.

Android VS. iOS: Сравнете 20 UI компоненти и модели (част 1)

14. Мрежи списъци VS. Изглед на колекция

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

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

Източник на изображения: Насоки за дизайн на материали на Google и Насоки за човешки интерфейс на iOS

15. Карти

Картите се използват в дизайна на потребителския интерфейс отдавна. След като Google пусна Material Design през 2015 г., картите стават един общ представител на дизайна на android. Картовият потребителски интерфейс има своето предимство в множество размери на устройства. Картите могат да бъдат преоразмерени и пренаредени според различни размери на екрана лесно. Освен това, картите могат да съдържат различна информация, като текстове, изображения и диаграми.

Въпреки че iOS не определят потребителския интерфейс на картите в своите насоки, но подобният дизайн може да бъде намерен в приложението на Apple iOS.

Във визуален стил Android подчертава сенките на картите, но картите са плоски в iOS 10. (След пускане на iOS 11 се появяват дълги сенки!)

Източник на изображения: Насоки за дизайн на материали на GoogleИзточник на изображение: Facebook Design

15. Меню VS. Избирачи и нови екрани

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

Менютата се появяват в следните 3 ситуации: 1) След докосване на иконата за преливане в лента за действие или ред списък; 2) след докосване на падащото меню и 3) след докосване на двуредов ред в стил, който се състои от етикет и стойност.

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

Друга алтернатива е "pickers", превъртащи се списъци с различни стойности, които ви позволяват да изберете стойност. След натискане на клетка със стойност ще се появи подбирач под клетката или ще се плъзне отдолу на екрана.

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

16. Избор на дата / час

Както Android, така и iOS имат свои собствени инструменти за избор на дата / час по подразбиране. Android има инструмент за избор на дата, за да изберете конкретна дата (дата, месец и година) и време за избор. iOS има 4 вида устройства за избор: 1) Дата, която показва месеци, дни от месеца и години. 2) Време, което показва часове, минути и (по избор) AM / PM обозначение. 3) Дата и час, които показват дати, часове, минути и (по избор) AM / PM обозначение. 4) Таймер за обратно отброяване, който показва часове и минути.

17. Разделители

За разделяне на съдържанието обикновено се използват разделители.

Android има 2 вида разделители: 1) Пълноделни разделители, използвани за разделяне на отделни секции за съдържание. 2) Разделители за вмъкване, използвани за разделяне на свързано съдържание.

iOS не определя разделители в своите указания. iOS използва групирани таблици и има сива зона между 2 групирани таблици за разделяне. iOS има вградени разделители в таблицата си, за да образува клетка.

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

В Android, ако има икона или изображение от лявата страна на ред, разделителят за вмъкване започва от левия ръб на текста и завършва до десния край на екрана. В iOS клетка с икона е същата като на Android, но за клетка с изображение делителят започва от левия ръб на изображението.

18. Текстови полета

Текстовите полета на Android обикновено се показват във формуляри, които трябва да попълните. Има 3 вида: 1) Единична линия 2) Множество линии и 3) Пълна ширина. През 2017 г. Android добавя друг вид: текстова област в своите насоки.

В зависимост от различния формат на въвеждане, трябва да се предостави подходящ тип клавиатура. Както Android, така и iOS предлагат няколко различни типа клавиатура. По принцип те могат да бъдат класифицирани в 3 вида: 1) Цифрова клавиатура (iOS има цифрова подложка и подложка за телефон), използвана за въвеждане на телефонни номера, номера на кредитна карта или ПИН кодове. 2) Текстова клавиатура, използвана за имената на хората. 3) Смесена клавиатура, използвана за имейл адреси или URL адреси.

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

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

Насоките за Android също определят помощни текстове, броячи на символи и съобщения за грешки за текстови полета.

19. Плъзгачи

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

Android плъзгачи има 2 вида: 1) Непрекъснати плъзгачи, позволяващи на потребителите да избират стойност в рамките на диапазон. 2) Дискретни плъзгачи, позволяващи на потребителите да избират определена стойност, например 10 или 20, от диапазон.

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

20. Други модели

20-1. Търсене

Android търсенето има 2 вида: постоянно търсене и разширяващо се търсене, което може да се сравни с изтъкнатото търсене на iOS и минималното търсене.

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

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

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

20-2. Изтриване и други действия

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

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

20-3. Изберете текст

И в Android и iOS, потребителите могат дълго да натискат текстове, за да ги изберат. След дълго натискане, в Android, иконите за действие ще се покажат в лентата за действие, която се превърна в стил прашник, за да посочи текущото състояние, режим на избор. В iOS действията са просто показани в меню над избраните текстове. Android вече има и плаващата лента с инструменти като iOS, показана по-горе в областта за избор с действия за изрязване, копиране, поставяне и други.

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

Източник: Google

20–4.Прогрес и активност

По принцип лентите за напредък са по-добри от въртящите се, тъй като лентите за прогрес позволяват на потребителите да знаят състоянието, колко процента остават, така че биха имали търпение да чакат.

Използват се ленти за напредък, за да се предвиди напредъкът. Ако напредъкът не се отчита, ще се използват спинери. Но ако напредъкът е предвидим и времето за изчакване само по-малко от 3-4 секунди, можете да помислите да използвате и спинери.

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

Лентите за напредък имат не само линейни, но и кръгови индикатори. Кръговите индикатори за напредък често се използват с бутони за изтегляне. След като бъдат натиснати бутоните за изтегляне, бутоните ще станат кръгови индикатори за напредък.

Индикаторите за напредък на Android имат 4 вида: 1) Определяне 2) Неопределен 3) Буфер 4) Заявка за неопределяне и определяне за различни ситуации.

Android линейни индикатори за напредък и активностAndroid Circular неопределени и определени индикатори за напредък

Относно опресняване, Android научи от iOS, като плъзнете надолу, за да опресните съдържанието. след завъртане надолу ще се покаже кръгов завъртач и ще изчезне след зареждане на съдържанието.

Обновете списъците, като плъзнете надолу. Ще се покажат индикаторите за зареждане.

20-5. Икони: Share VS. действие

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

Android Share icon VS. iOS действие икона

20-6. Статус Барове

И лентите за състояние на Android и iOS имат информация като време, състояние на батерията, състояние на Wi-Fi и сила на сигнала. Прекарване на пръст надолу от лентите за състояние, за да предизвикате центрове за уведомяване.

20-7. Навигационни барове VS. Начало бутон

Навигационните ленти за Android и навигационните ленти на iOS са различни. Моля, не ги обърквайте.

Android навигационните ленти имат 3 бутона за Back, Home и Последни приложения. Навигационните ленти могат да бъдат виртуални или физически.

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

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

рекапитулация

навигация

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

App Bar / Navigation Bar

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

Ленти с инструменти

Android и iOS имат най-долу ленти с инструменти за текстове за действие, икони за действие или състояние.

Раздели VS. Сегментирани контроли

За навигацията на второто или по-ниското ниво Android използва раздели, които съдържат 2 типа: фиксирани и превъртащи се и поддържа жест за преместване, за да превключвате изгледи. iOS използва сегментирани контроли, чиито елементи са ограничени до 2–5.

Бутони

Въпреки че Android и iOS имат свои собствени стилове на бутони по подразбиране, визуалните дизайнери все още могат да проектират бутони по мисълта си, стига стиловете на бутоните да не объркат потребителите. Единственото нещо, което трябва да се отбележи е, че Android използва НАДЪЛЖИТЕЛНО, за всички текстове с докосване, включително техните бутони.

Плаващи бутони за действие VS. Бутони за обаждане към действие

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

Долни листове VS. Листове за действие и изгледи на активност

iOS отдавна има листове за действие и след това Android има и най-долните листове с действия за използване с една ръка.

Диалози VS.Alerts

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

Пълноекранни диалози VS. Модални изгледи и попури

Цялостният диалог на Android и модалните изгледи или iOS на iOS на телефонните устройства са на цял екран, но на таблетите не са на цял екран.

Закуски и тостове VS. Автоматично затваряне на сигналите

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

Списъци VS. Маси и клетки (редове)

Android обикновено използва пространство, а не разделител за разделяне на свързани текстове в списъци. Android използва разделители, когато текстовете на съдържанието са напълно различими. iOS има разделители за формиране на клетки в своите таблици. Клетките с възможност за натискане на iOS имат следващи индикатори на екрана, които осигуряват по-добра използваемост от Android. iOS таблетите имат 2 вида: обикновени и групирани таблици.

Подзаглавия VS. Групирани заглавки на таблици и заглавки на секции

Android има само подзаглавия, но iOS има заглавки на таблици за групирани таблици и заглавки на секции за обикновени таблети.

Списък на контролите

Android и iOS имат свой собствен контролен списък за единичен избор, мулти-избор и пренареждане. Моля, изберете правилни в зависимост от всяка платформа.

Менюта VS. Избирачи и нови екрани

Android има менюта, но iOS използва подбирачи за кратки списъци и нови екрани за по-дълги списъци.

Grid списъци VS. Изгледи на колекция

По принцип Android и iOS имат подобни изгледи на мрежа / колекция.

карти

Интерфейсът в стил на карти е основна характеристика на Android Material Design, но iOS също има подобен дизайн.

Избор на дата / час

Android и iOS имат свои подбирачи за дата / час по подразбиране.

пантограф

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

Текстови полета

Android и iOS имат свои текстови полета. Показване на подходящи клавиатури в зависимост от формите за въвеждане на текстови полета.

плъзгачи

Android и iOS имат свои собствени компоненти. И двете са сходни.

Търсене

Android има постоянно търсене и разширяващо се търсене като iOS има видно търсене и минимално търсене. Понякога iOS крие ленти за търсене зад лентата за навигация, потребителите трябва да плъзгат надолу, за да ги предизвикат.

Изтриване и други действия

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

Изберете Текстове

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

Напредък и дейност

Ако напредъкът на дадено действие е предвидим и измерим, използвайте лентата за напредък; ако не, вместо това използвайте спинери.

Икони: Share VS. действие

Android и iOS имат своя собствена икона за споделяне. Не използвайте иконата за споделяне на Android в iOS и обратно.

Статус Барове

Android и iOS лентата за състояние по принцип имат време, състояние на батерията, Wi-Fi сигнал и сигнал за клетъчна връзка. Центрове за известяване Evoke, като плъзнете надолу от лентите за състояние.

Навигационни барове VS. Начало бутони

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

резюме

От наблюдение през последните години поведението на Android и компонентите на потребителския интерфейс на Android все повече приличат на iOS, въпреки че Android все още поддържа някои свои собствени уникални поведения. Мисля, че Google се опитва да владее езика за дизайн на потребителския интерфейс в различни платформи. В бъдеще е предвидимо Android и iOS да са все по-близки и по-близки и това е добро за потребителите и разработчиците.

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

Тези модели, въведени тук, не могат да се прилагат директно към всяко приложение. Може да се наложи да бъдат коригирани в зависимост от различни сценарии и изисквания. Надявам се всички да знаят по-добре за компонентите и поведението на 2 платформи. Ако има грешки или имате въпроси, добре дошли да поправите или обсъдите с мен. Благодаря ти!

Моля, дайте 10 клауза - ако сте прочели тази статия.
Моля, дайте 20 claps, ако смятате, че е полезно.
Моля, дайте 50 хлопа - ако смятате, че е невероятно!
Благодаря ти :)
-------------------------------------------------- ------------------
Не говоря за причините, поради които Насоките за дизайн на материали и Насоките за дизайн на човешки интерфейс на iOS имат подобно поведение или правила, а не други. Тази статия е по-скоро за практическа употреба. Бих искал да обсъдя контекстите и причините в други статии в бъдеще.
Не съм актуализирал и за Android O и iOS 11.

препратка