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

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

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

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

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

За да се даде възможност на разработчиците или дизайнерите да разберат по-лесно основната разлика между Android и iOS. Бих искал да представя и сравнява моделите / компонентите на потребителския интерфейс, които някъде имат различни имена на двете платформи, с някои скрийншоти като примери:

1. Навигационно чекмедже, раздели и навигация отдолу VS. Разделителни ленти

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

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

Еволюция на структурата на Youtube: Важните функции, Моите абонаменти, История и плейлист се поставят в чекмедже -> Структурата на приложението се реорганизира, чекмеджето се премахва и основните функции се преместват в раздели -> Тенденцията се добавя в раздели.Еволюция на структурата на Google Photos: Основните функции се поставят в чекмеджето -> Основните функции се преместват в навигацията на бутоните -> Бутонът с плаващо действие за търсене, който може да прекъсне разглеждането на снимки, се трансформира в лента за търсене.

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

  1. Раздели могат да се използват в по-високи или по-ниски нива в йерархията на информацията, но долната навигация се използва само в най-горното ниво.
  2. Разделите поддържат не само докосване, но преместване с жест за превключване на изгледи, но долната навигация поддържа само докосване.
  3. Сумата на артикула в раздели е гъвкава. Можете да поставите 2-5 елемента във фиксирани раздели или повече елементи в раздели за превъртане. Но само 3-5 елемента могат да бъдат пуснати в долната навигация. 2 или над 5 предмета са забранени。

В някои приложения с дълбоки и сложни навигационни структури може да открием чекмедже за навигация, навигация в долната част и раздели едновременно. Не препоръчвам навигационното чекмедже и долната навигация да се използват едновременно в приложенията, тъй като е трудно да се разпознаят йерархичните структури между тях. Нивото на навигационното чекмедже е по-високо или по-ниско от долната навигация? Или са на паралелно ниво? Нееднозначните структури биха объркали потребителите. Google Plus е отрицателен пример за мен. Наистина се чувствам объркан, след като обновихте Google Plus и след това видях навигационното чекмедже и долната навигация едновременно в началото.

Анализирайки текущите приложения на Google, можем да открием чекмеджето за навигация и долната навигация са на паралелно ниво. Вземете за пример Google Photos и Google Plus, след като разкриете чекмеджето за навигация в главния екран, няма нито едно подчертаване на нито един елемент от категорията. Изглежда Android поставя категории като акаунт, настройки и други вторични функции в чекмедже и намира често използвани / основни функции в долната навигация.

Google Plus

iOS използва долните „ленти с раздели“ като навигация по подразбиране за дълго време и никога не се променя. Разделителните ленти, подобно на долната навигация за Android, имат елементи от 3 до 5 и можете да превключвате изгледи на категории, като докосвате елементи.

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

2. Барове за приложения (ленти за действие) VS. Навигационни барове

Лентите в горната част на екраните с приложения за Android се наричат ​​ленти с приложения, ленти за действие на a.k.a. и ленти с инструменти, които се използват главно за поставяне на имена на текущо име или приложение и бутони за действие. Имената се поставят в лявата страна на лентите за действие и бутоните за действие, които обикновено не са повече от 3, поставени в дясната страна. Ако действията са повече от 3, ще използваме иконата за преливане и ще поставим по-малко важните действия в менюто за препълване.

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

Няколко общи барове за приложения и навигационни барове

3. Панели с инструменти

Бутоните за действие могат да се поставят не само на ленти за действие / навигационни ленти, но и на долните „ленти с инструменти“, както на Android, така и на iOS.

Въпреки че долните ленти с инструменти не са споменати в Насоки за дизайн на материали (Те говорят ленти с инструменти само като ленти за приложения), все пак можем да открием, че долните ленти с инструменти се използват в Google Keep и Google Photos.

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

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

Страниците във вторичното или по-ниско ниво на йерархия могат да използват „раздели“ за Android и „сегментирани контроли“ в приложения за iOS.

И двата раздела за Android и iOS сегментираните контроли могат да бъдат поставени в лентата за действие / лента за навигация.

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

Целият текст с докосване в Android е НАДЪЛЖИТЕЛНО и следователно текстът в раздели е главен. iOS сегментирани контроли използват Title Case.

Относно количеството елементи в Android раздели, то ще бъде 2–5 във фиксирана лента с раздели. Лентата за превъртане може да се използва, когато има дълги струни или повече от 5 елемента. Сегментираният контрол трябва да има пет или по-малко сегменти на iPhone, за да се осигури достатъчно място за лесно докосване.

5. Бутони

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

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

Въпреки че Насоките за дизайн на материали определят само визуалните стилове на плоски и повдигнати бутони, в Google Play могат да се намерят и призрачни бутони, които са плоски форми без запълване и прост контур, и подобни на повдигнати бутони без сенки. Ghost бутоните могат да бъдат сравнени с iOS нормален бутон; бутони като повдигнати бутони до натиснат бутон.

Текстът в Android бутоните е НАДЪЛЖИТЕЛНО; iOS бутоните използват главно Case. Понякога бутоните за призраци използват UPPERCASE, като бутон OPEN и UPDATE в App Store, но понякога те използват заглавие, като „Резервирай таблица“ и „Упътвания“ в Map iOS 10. Правилото за главни букви в iOS изглежда несъответстващо.

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

Плаващи бутони за действие, FAB за първи път се появи с Material Design в Android 5.0. FAB, разположени в долния десен ъгъл на екраните, се използват за решаване на проблема с използваемостта при работа с една ръка. Трудно е да достигнете до бутоните на лентите за действие, докато използвате телефони с една ръка. FABs понякога също са разположени на кръстовището на две зони и това прави FAB по-привлекателни за окото.

Бутон с плаващо действие представлява основното действие в приложението. Например, бутонът за композиране в приложението за поща и новият бутон за публикуване в приложението за социални мрежи са подходящи за използване на FAB.

Подобният дизайн за основното действие в iOS приложенията е бутон за призив към действие, който се намира в центъра на лентите с раздели. CTA бутоните използваха различен цвят или дизайн, за да ги различават от другите раздели. Но сега, тъй като потребителите са все по-запознати с модела, стилът на бутона на CTA е същият като раздели в много приложения. Бутоните за нова публикация в Medium и публикуване на нова снимка в Instagram са примерите.

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

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

Долният лист на Android има 2 форми: модални дънни листове и устойчиви дънни листове.

Android модални дънни листове има две съдържание: 1) Модални дънни листове с различни действия и 2) Списък с приложения, който се появява, след като потребителите докоснат иконата „Споделяне“. Предишната е точно като iOS Action Sheets; последният е като изгледи на активност на iOS, след като докоснете иконата „Действия“. Подредбата на съдържанието на Android долни листове може да бъде списък или мрежа.

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

Въпреки че не мога да намеря компоненти като Android Persistent Bottom Sheets, дефинирани в iOS Human Interface Guidelines, все пак можете да видите подобния дизайн в родните приложения за iOS, Map и Music.

Кредитно изображение: Указания за дизайн на материали за Google и дизайн на Facebook

8. Диалози VS. Сигнали

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

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

Диалозите за Android имат 3 форми: 1) Прости диалози, точно като меню: В диалоговия прозорец няма бутон ОК и Отказ. Можете да докоснете опция в диалоговия прозорец, за да изберете и след това диалогът да изчезне. Можете да докоснете извън диалоговия прозорец или клавиша Назад, за да затворите диалозите. 2) Диалози за потвърждение, най-често срещаните: Има бутони, които потребителите могат да натискат, за да потвърдят действието си. 3) Пълноекранни диалози, използвани само на телефони: диалоговете на цял екран не са на цял екран на таблети. Цялостният диалог на Android е точно като модален изглед на iOS, който ще бъде представен по-късно.

текстове

Текстът на заглавието и съдържанието в диалоговите прозорци на Android подравнява наляво; Текстът на заглавието и описанието в центъра за изравняване на предупреждение за iOS. Android използва „Заглавието на изречението“ за заглавията; iOS използва „Case Case“. И Android, и iOS използват „Случаят случай“ за текста на съдържанието.

Заглавието на диалоговия прозорец за Android и предупреждението за iOS трябва да е кратко и ясно. Избягвайте въпроси с някои индикации, като „Сигурни ли сте, че искате да изтриете файла?“ Изречението трябва да е просто, неутрално и директно, като „Изтриване на файла?“.

Бутони

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

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

Копирането на бутоните трябва да избягва използването на Да и Не, действието на писане върху бутоните ще бъде по-ясно и директно, като Отказ и Запазване, Отказ и Премахване.

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

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

9. Диалози на цял екран VS. Модални изгледи и попури

Диалогови диалогове на цял екран на Android, могат да се намерят само в малки мобилни устройства като смарт телефони, които могат да бъдат сравнени с модални изгледи на iOS. Модалните изгледи на iOS имат 4 стила, цял екран, лист със страници, лист с формуляри и други като сплит изглед и поповер. Относно прехода на модалните изгледи на телефоните, модалният изглед ще се плъзне нагоре, когато влезете, и той ще се изплъзне надолу, когато излезете.

Поповерс се използва само за таблети

10. Снекбари и тостове VS. Сигнали

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

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

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

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

11. Списъци VS. Маси

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

Стилът на списъка с Android има едноредов списък, списък с два реда (състоящ се от първичен и вторичен текст) и многоредов списък (състоящ се от първичен текст и 2 или повече вторичен текст). Икони, миниатюри и контроли на списъци, като квадратчета за отметка, радио бутони и бутони за превключване, могат да се добавят в списъци. Обикновено основните действия се поставят в лявата част на списъка, а вторичните действия се поставят в дясната част на списъка.

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

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

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

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

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

Подзаглавията на Android и заглавките на iOS се използват за разделяне и групиране на списъци или списъци на мрежи с различно съдържание. iOS имат 2 различни стила за отделяне на списъци: 1) Групирани таблици, използвани за групиране на напълно различна информация; 2) Заглавки на секции могат да се видят в обикновени таблици, използвани за сортиране на подобен формат на данни, като снимки с различни направени дати или контакти с различни имена.

Подзаглавията на Android използват случай на изречение. iOS групираните заглавки на таблици използват „UPPERCASE“, а обикновените заглавки на таблици използват „Case Title“.

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

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

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

13–1.Многократен избор: Отметки VS. Отметка с кръг

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

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

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

13–2.Избор на единно място: Радио бутони / Отметки VS. отметки

Android има радио бутони, които също могат да бъдат намерени на уеб страници или настолни ОС, като единствен контрол за избор. Ако е избран елементът, радио бутонът има кръг с точка вътре. Радио бутоните се използват за списъци с два или повече взаимноизключващи се елемента.

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

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

Въпреки че Насоките за дизайн на материали не въвеждат отметки, които се появяват от 2016 г. постепенно, но можете да намерите примера в менюто на Google Календар.

Android Single Selection: радио бутони и отметки. Но лявата е лош пример като прост диалог, НЕ трябва да има бутон CENCEL според Насоките на Google. Или може да бъде диалогов прозорец за потвърждение чрез добавяне на бутон OK, но това ще доведе до още стъпки.

13-3. Ключове

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

Настройки на Android за включване и изключване: Gmail използва квадратчета за отметки, но Photos използва бутони за превключване

13-4. Пренареждане / Gripper

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

Иконата за захващане на iOS се появи по-рано от Android. Можете също да го видите в режим на редактиране. Но iOS захватът се състои от 3 реда само защото iOS не използва чекмедже като навигация по подразбиране като Android.

13-5. Оставяне назад (Плъзнете действия)

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

След Android 5.0 плъзгайте действия, така наречените Leave-Behinds, са показани в указанията. Заслужава да се отбележи, че Leave-Behinds не трябва да се използва в екран има раздели поради конфликт с жестове и затова Android не е разполагал с този компонент преди.

След като плъзнете списък за разстояние и след това спрете, можете да видите 1–3 действия отзад, след което докоснете едно от него, за да предприемете действие. Но ако прекарате пръст за по-голямо разстояние, ще бъдат предприети действия по подразбиране. Android има само едно действие зад себе си и предприемете действието, като плъзнете направо.

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

13-6. Expand / Collapse

Контролите за разгъване / свиване могат да помогнат на йерархията по-плоска, тъй като не е необходимо потребителите да влизат в следващия екран, за да видят информацията, информацията ще бъде показана на същия екран. Този контрол често може да бъде намерен в списъци с често задавани въпроси. След като се чуе въпрос, отговорът ще се покаже. Необходими са по-малко стъпки, ако се опитате да разглеждате тези QA.

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

Източник на изображение: Указание за дизайн на материали на Google

Разширяване / свиване не може да бъде намерено в Указания за човешки интерфейс на iOS и рядко се среща в приложения за iOS. Подобните контроли може да са нещо, което се появява в екрана Explore на App Store, в iOS 8. Но това е по-скоро път, отколкото контрол на разширяване / свиване, защото не можете да видите други елементи, групирани в различни заглавия на един и същ екран.

iOS 8 App Store
Моля, дайте 10 клауза - ако сте прочели тази статия.
Моля, дайте 20 claps, ако смятате, че е полезно.
Моля, дайте 50 хлопа - ако смятате, че е невероятно!
Благодаря ти :)

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

препратка