Разное

Android design: Android Design Support Library — поддержка компонентов Material Design в приложениях с Android 2.1 до Android 5+ (с примерами)

21.04.2021

Содержание

32 отличия дизайна мобильного приложения под iOS и Android | by Futura by red_mad_robot

8. Способы верхнеуровневой навигации

Начнем с самого верха. iOS рекомендует только один способ верхнеуровневой навигации — через Tab bar. У Android-а в ответ есть три способа: Navigation Drawer, Bottom Navigation Bar и Tabs.

Если количество верхнеуровневых страниц больше 5, используем Navigation Drawer. Если меньше — Bottom Navigation Bar. Tabs нечасто применяют для данной навигации, но способ нам доступен. Однако Material рекомендует не совмещать Tabs и Bottom Navigation Bar, так как взаимодействие с данными компонентами влияет на контент страницы и пользователь может запутаться.

9. Отличия в поведении Tab Bar-а и Bottom Navigation Bar-а

Это отличие предлагает Material.

Если вы в iOS перейдете от материнской страницы к дочерней, потом через Tab Bar переключитесь на другую материнскую страницу, то по возвращении на первую материнскую страницу вы все также будете находиться на дочерней. В Android все строже — при переключении через Bottom Navigation Bar вы всегда переключаетесь между материнскими страницами. Если до этого вы были на дочерней, она сбросится.

Наши разработчики Android уверены, что такое поведение андроида неверное. В случае переключения по Bottom Navigation стоит сохранять открытые дочерние страницы, как на iOS.

10. Особое поведение Tabs у Android

Tabs у Android в отличие от Segmented Controls iOS имеют такое свойство: по табам можно перемещаться с помощью свайпа влево и вправо.

Это потому, что страницы табов находятся на одной высоте (elevation).

Это важно знать потому, что при использовании табов в Android нам не стоит добавлять в дизайн элементы с похожими жестами. Например, карусель картинок или взаимодействие с карточками с помощью свайпов.

В целом, эти два компонента не заменяют друг друга полностью. Segmented control — это control, который управляет контентом страницы. А Tabs — это инструмент навигации. Поэтому стоит советоваться с разработчиками перед тем, как при адаптации рассматривать их как равноценные компоненты. Иногда корректнее заменять андроидовские Tabs на Page Control. Все зависит от контекста.

11. Отличия в появлении дочернего экрана

В iOS появление дочернего экрана (не считая модалок) происходит только одним образом: дочерняя страница появляется справа поверх материнской с эффектом slide in. Возвращение на материнский экран происходит с эффектом slide out.

Material рекомендует показывать пользователю иерархическую взаимосвязь материнской и дочерней страницы с помощью осмысленной анимации.

Компонент, при взаимодействии с которым пользователь переходит к дочерней странице, раскрывается и покрывает собой материнскую страницу. Таким образом, пользователь понимает, откуда и куда он перешел, почему это произошло и куда он вернется при нажатии на кнопку назад. Переход происходит с помощью Standard Easing.

12. Особый паттерн вызова Navigation Drawer

При проектировании приложения с Navigation Drawer важно помнить, что этот компонент «забирает» себе жест edge swipe слева вправо. Поэтому не стоит добавлять этому жесту другую логику.

В iOS у этого жеста есть устоявшийся паттерн перехода с дочерней на материнскую страницу. Данный паттерн постепенно перекочевал и во многие андроидовские приложения.

13. Поведение контента при скролле

По HIG контент в iOS при скролле ведет себя так: Navigation Bar уменьшается в ширине, исчезает Tool Bar. Но в целом iOS разработчики могут настроить любое поведение контента и bar-ов при скроле.

Material предлагает больше вариантов поведения при скролле. Например, Bottom Navigation Bar, Search и Bottom App Bar при скроле могут исчезать.

Top App Bar может либо исчезать, либо подниматься выше основного контента.

14. Разное поведение поиска

Интересно, что HIG относит поиск к bar-ам и называет его Search Bar. В Material мы находим поиск в разделе Navigation, не в Components. То есть для Material поиск — это еще один способ навигации. Как в iOS, так и в Android поиск может статично присутствовать на экране и, как правило, прибит к Navigation Bar/Top App Bar.

На обеих платформах поиск может быть в виде иконки, только в iOS иконка раскрывается в самостоятельный компонент Search Bar, а в Android поиск раскрывается внутри Top App Bar.

Особенностью поиска iOS является то, что его можно «спрятать» под Navigation Bar и вызывать по жесту Swipe down. Такой же жест типичен и для рефреша (pull to refresh), поэтому не стоит вызывать поиск и рефреш по этому одному действию.

15. Каких компонентов нет в iOS

В iOS нет многих нативных компонентов Android. Пробежимся по ним.

a. Navigation Drawer

iOS в принципе не признает бургер-меню. Как говорили раньше, в iOS верхнеуровневая навигация только по Tab Bar

b. Backdrop

Backdrop — самый удивительный для меня компонент в Material. На момент написания статьи андроид еще только планирует реализовать его как нативный. В целом, при изучении компонентов Material стоит проверять, доступны ли они уже для использования.

Сам Material любит этот компонент. Посмотрите, например, на победителей Material Design Award 2019.

c. Banner

Banner не найти среди нативных компонентов iOS. С помощью Banner-а мы сообщаем пользователю важную информацию и предлагаем связанные с ней действия.

d. Snackbar

Как и Banner, Snackbar не является нативным для iOS. Snackbar применяют, чтобы донести до пользователя короткое сообщение о результате его действия.

e. Chips

Chips также отсутствует среди нативных компонентов iOS. Они используются для ввода информации, описания и действия.

f. Bottom App Bar

Тут можно поспорить, что у iOS есть похожий компонент как Tool Bar. Но они разные вот почему: Toolbar — это bar для контекстных действий. Например, при редактировании списка сообщений в Messages появляется Tool Bar с действиями Read All и Delete. Bottom App Bar в свою очередь — это, по сути, перемещение Top App Bar вниз с теми же действиями верхнего уровня: открытие Navigation Drawer, вызов поиска и так далее. Еще в Bottom App Bar мы размещаем FAB.

g. FAB

Да, FAB-а тоже нет в iOS. FAB — это кнопка для совершения основного действия на экране. Например, в почтовом приложении FAB будет создавать новое письмо.

Если вы используете в Android FAB для основного действия на экране, то в iOS это основное действие стоит разместить наверху в Navigation Bar справа (см. пример: iMessages).

h. Bottom Navigation Drawer

Разновидность Navigation Drawer-а, типичная только для Android. Вызывается нажатием кнопки бургер-меню в Bottom App Bar.

i. Side Sheet

Хоть Material и разрешает использовать этот компонент в мобильном приложении, я бы рекомендовал заменить его на более привычный Bottom Sheet.

j. Expanding Bottom Sheet

Этот очень красивый компонент Android не найти среди нативных для iOS. Expanding Bottom Sheet — это поверхность, которая прибита к низу страницы. По нажатии поверхность расширяется до полноценной страницы.

k. Standard Bottom Sheet

Standard Bottom Sheet является разновидностью Bottom Sheet, и его нет среди компонентов iOS.

16. Каких компонентов нет в Android

Теперь рассмотрим, каких компонентов не найти в библиотеке Android.

a. Page Controls

Page Control показывает, на какой из страниц находится пользователь. Его нет среди нативных компонентов Android.

b. Toolbar

Toolbar привычен только для iOS.

c. Steppers

Steppers — стандартный control iOS, не описан в Material. Используем его для ввода небольших значений. Пример, количества копий при печати.

d. Popover

Popover — это всплывающая панель, которая в основном используется на iPad.

В iOS есть одно стандартное применение Popover — настройка текста в ридерах или браузерах.

17. Разные Status Bar-ы

На обеих платформах Status Bar выполняет одинаковую задачу: сообщает о времени, уровне заряда, качестве мобильной связи и Wi-Fi. Они отличаются расположением этих индикаторов внутри Status Bar-а и в целом взуальным решением.

В Android 12 больше не будет привычного дизайна. Google откажется от Material Design

, Текст: Эльяс Касми

Впервые за семь лет Google готовит для Android полностью новую концепцию дизайна – она сменит нынешнюю Material Design семилетней давности и будет называться Material Design Next. Изменения коснутся самых разных элементов облика ОС – даже добавится функция управления одной рукой, которую Google подсмотрела у Apple, Samsung и Xiaomi. Анонс Android 12 запланирован на весну 2021 г.

Перерисованный Android со «сладким» названием

Google готовит радикальный редизайн своей мобильной ОС Android 12, которую может показать весной и выпустить к концу лета 2021 г. По информации портала XDA Developers, изменений в облике системы будет настолько много, что Google решила объединить их в новую философию дизайна Material Design Next, которая придет на смену использующейся сейчас Material Design.

Концепция Material Design в 2021 г. отметит свое семилетие – Google анонсировала ее летом 2014 г. и запустила в ноябре 2014 г. в составе ОС Android 5 Lollipop. В сравнении с интерфейсом в первых четырех версиях платформы Android 5 внешне изменилась полностью, в первую очередь сменив темные цвета на светлые оттенки.

Вместе с новой философией дизайна Android 12 может получить еще одно изменение – Google может вернуться к традиции называть различные версии своей ОС «сладкими» именами в честь различных не самых полезных продуктов. В последний раз такое кодовое имя было у Android 9 (она называлась Pie – «пирог»), тогда как Android 10 и Android 11 обошлись без псевдонимов. По версии XDA Developers, кодовым именем Android 12 станет Snow cone – так называется летний десерт из сладкого колотого льда.

В XDA Developers уверены, что Android 12 будет выглядеть именно так

Портал The Verge предложил ряд других вариантов названия, среди которых: Salted Caramel, Sheet Cake, Sponge Cake, Shortbread, Sherbet, Stracciatella и др. На каком именно остановится Google, и станет ли она в принципе возрождать давнюю традицию, пока остается неизвестным.

В погоне за Xiaomi и Samsung

В дополнение к «сладкому» прозвищу и новой концепции дизайна в Android 12 может появиться возможность управления одной рукой, необходимость которой диктует непрекращающийся рост размеров дисплеев смартфонов. Google, пишет XDA Developers, может встроить ее в AOSP-версию Android, что позволит всем производителям Android-гаджетов задействовать ее в собственных кастомизированных прошивках.

В актуальных версиях Android, вплоть до Android 11, эта функция не реализована, несмотря на то, что в iPhone она существует достаточно давно. В итоге ряд крупных производителей реализовали ее своими силами и интегрировали ее в оболочку собственных мобильников.

Управление одной рукой в Xiaomi MIUI

Например, режим управления одной рукой есть в современных смартфонах Samsung, равно как и в мобильниках китайской Xiaomi. В прошивке последней активация этого режима происходит при помощи свайпа слева направо по навигационным кнопкам внизу экрана.

«Картинка в картинке» и новшества в шторке уведомлений

В Android 12 ожидаются улучшения в работе режима «картинка в картинке», позволяющего, например, смотреть YouTube в небольшом окне поверх любого другого приложения. По информации MSPowerUser, пользователи получат возможность более плавно изменять размеры окна с видео, добиваясь наиболее удобных для них пропорций.

Смотреть YouTube на Android фоном станет еще удобнее

Также мини-окошко с запущенным роликом можно будет частично скрывать за пределами видимой области экрана. В Android 11 подобное приводит к закрытию этого окна, а в Android 12 оно на 2/3 скроется за экраном», но по-прежнему будет активно. Это нужно, чтобы можно было максимально высвободить пространство на экране при работе с основным приложением, например, с мессенджером, и одновременном просмотре роликов.

Медицинский ум: чем может помочь искусственный интеллект здравоохранению

Искусственный интеллект

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

Продвинутый акселерометр

В Android 12, по информации 9to5Google, появится более продвинутый программный акселерометр, способный лучше определять положение смартфона в пространстве и менять ориентацию изображения с портретной на ландшафтную и наоборот. В нынешних реализациях Android эта функция не всегда срабатывает корректно.

Улучшенный акселерометр пригодится в первую очередь владельцам планшетов

Google научит Android 12 отслеживать положение лица пользователя и на основе этой информации выбирать правильную ориентацию интерфейса. Использоваться для этого будет фронтальная камера, так что эту функцию определенно не оценят те, кто не хочет, чтобы устройство лишний раз следило за ним. Впрочем, 9to5Google утверждает, что собранная фронтальной камерой информация не передается на серверы Google – обработка снимков осуществляется на самом смартфоне.

Еще больше изменений

Первая бета-версия Android 12 может выйти до конца февраля 2021 г., но, по традиции, будет доступна только разработчикам. Премьера ОС может состояться в конце весны 2021 г. на конференции Google I/O.

CNews писал, что изменений в пользовательском интерфейса Android 12 будет очень много – например, появится возможность устанавливать свою цветовую схему интерфейса вместо выбора между банальными светлой и темной темами. Также смартфоны на базе этой ОС научатся реагировать на постукивания по задней крышке и активировать те или иные приложения в зависимости от настроек.

Цвет интерфейса Android может быть, к примеру, зеленым, а не только черным или белым

Что касается облика системы, которую в XDA Developers назвали Material Design Next, то он будет напоминать интерфейс iOS – конкурирующей мобильной платформы Apple. Это выразится в первую очередь в отказе от эффектов прозрачности в ряде меню, например, в той же шторке уведомлений, и большем количестве элементов интерфейса со скругленными углами.



Дизайн для Android: как выбрать размер шрифта

Вы читаете «Размеры шрифта в UI дизайне: Полное руководство».

Другие статьи по теме: Введение · Андроид · Веб · iOS · Принципы

Разрабатываете приложение по принципу материального дизайна и хотите узнать какой (примерно) размер шрифта выбрать? Отлично. Вы обратились по адресу.

Все советы насчет размера шрифтов, приведённые ниже, в первую очередь относятся к Roboto. Другие шрифты в таком же размере, могут оказаться больше или меньше. В этом разделе я буду пользоваться единицей «

sp» — читается как «сипс» и расшифровывается как «масштабируемые пиксели» (англ. scalable pixels). Но всё, что вам, как дизайнерам, нужно знать — какое именно число нужно ввести в поле размеров шрифта (Информация о ‘px’, ‘pt’, ‘sp’, and ‘dp’ будет в другой статье).

Рекомендации по типографике на Android

Здесь я быстренько покажу, какие основные стили существуют. Наглядные примеры и более подробные инструкции будут ниже.


А теперь давайте пройдёмся от элемента к элементу с (а) наглядными примерами и (б) заметками о том, как ловко Google управляется со стилизацией шрифтов. Без шуток. Надеюсь, прочитав этот раздел, вы подумаете: «Тот, кто разработал гайдлайны для размеров шрифта в материальном дизайне — гениальный человек», — я, во всяком случае, именно так и думаю.

Заголовок

Размер заголовков в мобильных приложениях в материальном дизайне — 20sp.

Основной текст

Размер основного текста в материальном дизайне — 14sp. Этот показатель следует воспринимать как норму, а всё остальное, по сути, — её вариация.


Например, в то время как 14sp это размер шрифта по умолчанию для достаточно длинного текста, то, если перед нами небольшой макет с кусочком текста, этот размер увеличивается до 16sp!

Заметьте, шрифт здесь немного тоньше — благодаря этому появляется место для увеличения размера. Этот принцип часто используется в стилях материального дизайна.

Пункты списка

Во многих простых списках размер каждого из пунктов будет 16sp

На самом деле, такой размер для списков в материальном дизайне стоит по умолчанию

Для меня это стало неожиданностью — ведь создаётся ощущение, будто перед нами не список простых пунктов, а основной текст. Зачем же делать его больше? Вот что я думаю: значимость слова здесь гораздо выше, чем в основном тексте. По этой причине, список должен быть крупнее.

Обратите также внимание, что более крупные названия пунктов списка позволяют создать чёткий контраст между ним и второстепенным описанием, меньшим по размеру и более тонким по начертанию.

Однако более плотные списки, подобно тем, что находятся на сайд-барах, имеют размер 14sp и — для компенсации — на одно значение жирнее по начертанию (это слегка напоминает пример с более крупным размером шрифта макета, который компенсируется более тонким начертанием).

Элементы управления

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

Вот единственное, что может здесь удивить, на мой взгляд: кегль вводимого текста равен 16sp. Почему он не совпадает с тем, что стоит по умолчанию для основного текста? Потому что значимость каждого слова здесьвыше, чем у основного текста по умолчанию, и, если не брать в счёт кнопку (размер текста в которой все же 14sp), то видеть в поле текст средней или большой жирности весьма странно.


Подробнее читайте в «Рекомендациях по типографике в материальном дизайне» (Material Design typography guidelines) от Google.

Рекомендации по типографике на ПК

И хотя все примеры, которые я приводил выше, взяты из мобильных приложений, размеры шрифта в приложениях для планшетов и ПК не сильно отличаются. Здесь я вкратце изложил, какие изменения произошли в типографике в связи с этим переходом, опять же, согласно Google:

Если вы создаёте приложение для экранов покрупнее, используя материальный дизайн, то, возможно, стоит обратиться к статье по шрифтам в вебе, которая выйдет чуть позже.

Android Material Design на KitKat 4.4



Я начинаю учиться Android развитию. Я читал на сайте Google dev, что Material Design доступен только на Android 5.0. Интересно, почему некоторые приложения на Android 4.4 имеют material design. Я использую Android 4.4. Какие-нибудь руководства или советы мне дадут? Спасибо.

android material-design
Поделиться Источник Kim Sean     08 сентября 2016 в 15:19

2 ответа

  • Android KitKat 4.4 папка на sd-карте

    Мы только что нарушили новые разрешения, которые применяются для записи файлов на sd-карты (внешнее хранилище) на Android 4.4 (разрешение EACCES отказано) До KitKat мы устанавливали нашу доступную для записи папку следующим образом: mfolder = Environment.getExternalStorageDirectory().getPath() +…

  • Использование Android L Material Design на KitKat

    Читая раздел совместимости Android L Developer Preview ( http:/ / developer.android.com / preview/material/compatibility. html ), я увидел, что могу создать APP с помощью L-sdk, а также запустить его на более старых sdk (например, KitKat). Я создал новый проект, используя Android L sdk и настроил…

Поделиться Aurélien Lepage     08 сентября 2016 в 15:32


2

Во-первых, я должен помнить, что Material Design-это не только какой-то код или компонент ,это полностью концепция о том, как создать свое приложение, чтобы получить лучшее UI/UX.

И да, android 5 и выше, есть некоторые красивые и новые функции и компоненты ,которые вы можете использовать некоторые из них в android <5 с помощью какой-то библиотеки поддержки , которую Google или кто-то другой предоставляет им, например, посмотрите на эти две библиотеки lib:

com.android.support:appcompat-v7
com.android.support:design

это самые полезные библиотеки Google, чтобы иметь материальные компоненты в разработке android <5.

Поделиться MehDi     08 сентября 2016 в 15:41

Похожие вопросы:


Android KitKat 4.4 убивает мою службу, уставившуюся на менеджера сигнализации

У меня большая проблема с Android KitKat и менеджером сигнализации. Все мои приложения работают с сервисом, который всегда работает в фоновом режиме без Android kill it. До Android 4.4 KitKat…


HTML ввод файла в android webview (android 4.4, kitkat)

Я использовал <input type=file> на android webview. Я получил его работу благодаря этой теме: Загрузка файла в WebView Но принятый ответ (или любой другой) больше не работает с android 4.4…


Отключить удаленную отладку на WebView Android 4.4 (KitKat)

Как отключить удаленную отладку на Android 4.4 KitKat? У меня есть гибридное приложение, и по соображениям безопасности я не хочу, чтобы мои пользователи видели содержимое веб-страниц. Установка…


Android KitKat 4.4 папка на sd-карте

Мы только что нарушили новые разрешения, которые применяются для записи файлов на sd-карты (внешнее хранилище) на Android 4.4 (разрешение EACCES отказано) До KitKat мы устанавливали нашу доступную…


Использование Android L Material Design на KitKat

Читая раздел совместимости Android L Developer Preview ( http:/ / developer.android.com / preview/material/compatibility. html ), я увидел, что могу создать APP с помощью L-sdk, а также запустить…


Android Material Design на устройствах KitKat (и ниже)

Я собираюсь разработать приложение android в нашей школе в качестве проекта. Я хочу использовать новый Material Design от Google, но я знаю, что он доступен только на устройствах Android-L. Джек…


Я хочу, чтобы реализовать material design в android для версий ниже, чем чупа-чупс

Я хочу реализовать material design в android для версий ниже lollipop, но я не знаю, возможно ли это? Если это возможно, то может ли кто-нибудь помочь мне в том, как реализовать material design для…


Как записать экран устройства Android на версию Android ниже 4.4 (KitKat)

С версией Android 4.4 (KitKat) можно записать экран устройства Android следующей командой, используя ADB из командной строки. adb shell screenrecord /sdcard/demo.mp4 Но это работает только в версиях…


Применить material design на Android 4.4 KitKat

Я изо всех сил старался подать заявку Material Design на Android SDK ниже 21, но мне это не удалось. Я скачал appcompat-v7 , добавил его в свой файл maven как: <dependency>…


Как сделать android material design совместимым с android 4

Я недавно обновил свой android studio, и новый поставляется с material design. Для Android 5.1 и выше (API 21) все работает отлично, но я получаю запросы от моих пользователей на android 4.4 kitkat…

java — Что сделать, чтоб добавить библиотеку support:design?

Создал новый проект чтоб попробовать поработать с библиотекой support:design добавил

compile 'com.android.support:design:22.2.0'

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

Решил добавить тоже самое в основной проект и мне показало ошибку, я посмотрел и понял, что проблема в том, что версия

compileSdkVersion 23

выше чем в библиотеке

compile 'com.android.support:design:22.2.0'

я посмотрел, что мой

buildToolsVersion "23.0.2"

и решил поставить версию библиотеки тоже такую и стало выглядеть это так

compile 'com.android.support:design:23.0.2'

Вот так в итоге выглядит мой билд

buildscript {
repositories {
    jcenter()
}

dependencies {
    classpath 'com.android.tools.build:gradle:2.1.0'
}
}

apply plugin: 'com.android.application'

repositories {
jcenter()
}

dependencies {
compile 'com.android.support:design:23.3.0'
compile 'com.android.support:appcompat-v7:24.0.0-alpha2'
compile 'com.facebook.android:facebook-android-sdk:4.0.0'
compile 'com.google.android.gms:play-services:6.5.87'
compile 'com.android.support:cardview-v7:23.3.0'
compile files('libs/svgandroid.jar')
compile 'com.github.bumptech.glide:glide:3.5.2'
compile files('libs/guava-16.0.1.jar')
compile 'com.google.code.gson:gson:2.6.1'
}

// The sample build uses multiple directories to
// keep boilerplate and common code separate from
// the main sample code.
List<String> dirs = [
    'main',     // main sample code; look here for the interesting stuff.
    'common',   // components that are reused by multiple samples
    'template'] // boilerplate code that is generated by the sample template process

android {
compileSdkVersion 23
buildToolsVersion "23.0.2"

repositories {
    mavenCentral()
}

defaultConfig {
    minSdkVersion 21
    targetSdkVersion 21
}

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_7
    targetCompatibility JavaVersion.VERSION_1_7
}

sourceSets {
    main {
        dirs.each { dir ->
            java.srcDirs "src/${dir}/java"
            res.srcDirs "src/${dir}/res"
        }
    }
    androidTest.setRoot('tests')
    androidTest.java.srcDirs = ['tests/src']
}
}

при билде получит вот такое окно

Естественно нажал Install Repository and syns и получил такое окно

Вроде как интернета не хватает, хотя интернет работает отлично.

Пробовал менять версию этой библиотеки на разные и каждый раз разные ошибки…

Что нужно сделать, чтоб это работало?

Я по пробовал разные версии вот, что получается когда подключаю

'com.android.support:design:23.3.0'

Какие то ресурсы уже определены и показывает ошибку.. Что это значит?

Shape – советы по улучшению GUI приложения Android (и не только) с помощью изменения форм элементов / Хабр


Здравствуйте. Этот перевод я делаю потому как сам недавно начал разбираться с Shape в Android, решил пошарить по material.io, и нашел там этот сборник советов по использованию. Мне он показался интересным, полезным, и познавательным, поэтому я решил поделиться им с российским сегментом разработчиков мобильных приложений.

Мне кажется что эта тема достаточно важная, ведь использование разных форм для элементов интерфейса делает приложение интереснее, и может быть даже серьезнее.

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

Надеюсь что вы сможете извлечь пользу из прочитанного, и возможно улучшить качество своих приложений.


Введение



Иерархия форм



Форма как средство выразительности



Формы в движении




Элементы графического интерфейса в стиле Material Design могут иметь разные формы. Кастомные формы элементов привлекают внимание пользователей, делают ваш продукт более выразительным, и улучшают впечатление от использования.


По умолчанию, в Material Design все элементы имеют прямоугольную форму со скругленными углами (4dp). Их форму можно изменять, регулируя следующие параметры:
  • Степень закругленности углов
  • Степень остроты углов

Таким образом можно либо незначительно изменить форму элемента, либо сделать ее совершенно другой.

Кастомизация стандартной формы элементов Material Design.


Применение


Акцентирование внимания


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

Это сочетание круглой кнопки и скругленной нижней панели выделяется на фоне обычных прямоугольных элементов, расположенных где-либо на экране.

Идентификация элементов


Формы дают пользователям возможность идентифицировать элементы интерфейса по смыслу, догадываться об их назначении.

Догадаться о предназначении этих вставок можно по их форме.

Отображение состояния


Вы можете отображать изменение состояния элементов при помощи форм. При использовании формы для отображения изменения состояния, используйте одну и туже форму каждый раз когда нужно отобразить изменение состояния.

Элемент частично изменяет свою форму, чтобы отобразить выделение.

Брендирование


Чтобы придать вашему бренду узнаваемый визуальный стиль, используйте формы в сочетании с другими способами кастомизации (например цвет). Небольшие контекстные изменения форм во всем приложении улучшат впечатление от использования.

Правильное использование форм элементов в приложении помогает улучшить впечатление от его использования.


Отображение форм


Измененные формы особенно хорошо видны когда их контур контрастирует с фоном. По умолчанию, Material Design использует выделение тенью чтобы подчеркнуть контур форм. Другие способы выделения форм (такие как цвет или прозрачность) могут быть использованы в сочетании с тенью.
Как нужно делать
Цвет заливки кнопки контрастирует с фоном, делая форму кнопки заметной.
 Как делать не стоит
Полупрозрачный фон кнопки и ее цвет ухудшает заметность ее формы.




Формы могут быть использованы для отражения зависимостей между компонентами интерфейса. Текст или иконки могут помочь усилить смысловую нагрузку, но только если форма элемента однозначно указывает в какую сторону думать.


Как нужно делать
Выпадающее меню имеет заостренный угол, похожий на стрелку, указывающую на навигационную
панель, демонстрируя связь между этими двумя компонентами.


Как делать не стоит
Откажитесь от использования формы, если чувствуете что она создает двусмысленное представление. Кнопка отмены подразумевает возвращение к предыдущему этапу, тогда как ее форма, похожая на стрелку «Вперед», создает ложное впечатление, что кнопка переносит пользователя на следующий этап.



Формы компонентов влияют на восприятие их пользователем. Степень необходимости изменения формы зависит от следующих факторов:
  • Насколько сильно компонент зависит от другого компонента
  • Ограничен ли компонент требованиями эргономики


Как делать не стоит
Не используйте формы, которые делают компоненты совершенно неузнаваемыми.


Как делать не стоит
Не используйте формы, которые затрудняют взаимодействие с пользователем. У этой кнопки слишком маленькая область нажатия.


Как делать не стоит
Не используйте формы, которые делают компоненты совершенно неузнаваемыми. Эти кнопки имеют одинаковую форму с вставками выше. Из-за этого становится сложно отличить один компонент от другого.



Формы могут привлекать внимание к важным элементам интерфейса и отображать отношения между компонентами.


Уникальные формы


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


Как нужно делать
Делайте формы компонентов контрастирующими с окружением. Круглая форма этой кнопки выделяет ее на фоне прямоугольных элементов, а черный цвет контрастирует с белым фоном.


Как делать не стоит
Элемент сложнее выделить на фоне других, если он имеет такую же форму. Эту кнопку сложно заметить из-за того что она находится среди элементов с такой же формой.



Соединение элементов с помощью форм


Формы элементов могут помочь пользователю понять как они связаны между собой.

Одинаковые элементы


Одинаковая форма элементов указывает на их взаимосвязанность и общий смысл.

Связанные элементы


Если один из элементов дополняет другой, но не является точной его копией, это отношение может быть выражено формой. Например, острый угол формы может символизировать стрелку, указывающую на связанный элемент.

Несвязанные элементы


С помощью фигур также можно подчеркнуть что элементы не связаны друг с другом, и работают по отдельности.
Как нужно делать
Закругленные углы белого элемента подчеркивают что он не связан с фиолетовым.
 Как нужно делать
Здесь форма кнопки в нижнем правом углу указывает что она не связана с элементом позади.


Как нужно делать
Форма и размер карточек сигнализируют о том что эти элементы принадлежат к одной группе.


Как делать не стоит
Не используйте указывающую форму если элемент не связан с другими элементами. Здесь диалоговое окно имеет форму, указывающую на карточку позади, создавая впечатление что они связаны.




Формы могут отображать состояние элемента, и делать ваш бренд узнаваемым.


Формы могут отображать различные состояния элементов, например выделение, результат обработки данных, и много другое.

Интерактивность элементов


Чтобы с помощью форм отображать интерактивность элементов, используйте смену формы в момент взаимодействия пользователя с элементом. Например, меняйте форму элемента чтобы отобразить его выделение после касания пользователя, или помечайте элемент выделения иконкой.

Отсутствие интерактивности


Если элемент не является интерактивным, следует выбрать для него такую форму, чтобы пользователь не подумал что с этим элементом можно взаимодействовать.


Как нужно делать
Изменение формы должно быть четко связано с определенными действиями пользователя, или с другой очевидной причиной. Здесь форма элемента изменяется после свайпа вправо, и у элемента появляется соответствующий индикатор в углу.
Как делать не стоит
Если вы хотите отобразить состояние элемента, то не делайте это с помощью слишком маленьких форм индикаторов.
 Как делать не стоит
Но не стоит и перебарщивать с размерами. Здесь используется слишком большая форма индикатор.


Аккуратно
В некоторых случаях форма элемента может создавать неоднозначность – является ли эта форма отображением состояния, или это просто фишка разработчика? Здесь загнутые углы карточек как раз создают такую неоднозначность. Пользователю может быть не понятно, является ли загнутый угол индикацией того что карточка выделена, или добавлена в избранные. Разрешить такую неоднозначность можно одним из способов:

  • привяжите изменение угла карточки к конкретному действию пользователя, выделению или добавлению в избранное
  • уберите имитацию загибания вообще, но оставьте скругление угла если хотите использовать это как фишку
Как нужно делать
Используйте одну форму чтобы отображать одно состояние. Закругленные углы здесь отображают выделение карточек.
 Аккуратно
Здесь используются разные формы для отображения одного состояния, что затрудняет восприятие пользователем.


Формирование брендового стиля при помощи форм


Используйте формы в сочетании с другими возможностями кастомизации (цвет и шрифт например) для создания визуального стиля вашего бренда. Повторяющиеся формы помогут сделать ваш бренд уникальным и узнаваемым. Ваше приложение также может использовать набор форм с похожими формами для разных компонентов. Стиль форм в наборе должен соответствовать стилю вашего бренда.

Создание стиля


Когда вы создаете свой стиль форм избегайте:
  • немеков на интерактивность
  • двусмысленных форм
  • затруднения использования

Смешивание различных стилей затруднит ассоциирование каких-либо форм с вашим продуктом или брендом.

Злоупотребление использованием


Слишком частое использование формы, которая задумывалась как фишка бренда, может уменьшить степень ее восприятия как таковой.


Как нужно делать
Разумное использование форм способствует формированию визуального стиля вашего продукта. В этом приложении используется форма, основанная на его логотипе.


Как нужно делать
Это приложение использует формы, похожие на форму логотипа.
Аккуратно
Слишком частое использование одной формы отрицательно влияет на ее восприятие.
 Как делать не стоит
Не используйте формы, не входящие в набор форм вашего приложения.



Формы могут изменяться в результате изменения контента или действия пользователя.

Изменение форм это событие, происходящее в ответ на изменение контента внутри формы, изменение состояния, или действие пользователя. Например, когда вы переводите девайс в горизонтальное положение, элементы интерфейса могут изменить свои размеры, что приведет к изменению формы.

Форма может изменяться также чтобы сохранять визуальный стиль приложения, или чтобы отобразить добавление новых объектов в какой-нибудь набор (прим. переводчика: например добавление карточек в лист).

Основные причины динамической смены формы:

  • Элемент не помещается на экране
  • Нарушенная эргономика
  • Изменение смысла элемента
  • Несоответствие стилю приложения
  • Привязка/отношение к другому элементу
Как нужно делать
Форма может меняться в ответ на другие изменения в интерфейсе. На нижней панели динамически появляется вырез для кнопки.
 Как нужно делать
Элемент может отражать изменения состояния. В этом приложении форма динамически расширяется по мере выделения карточек, сохраняя при этом закругление угла.



Изменение форм


По мере изменения размеров элемента, его форма также меняется. Она может сохранять текущую позицию на экране, но при этом тянуться или сокращаться.

Размеры



Как нужно делать
Форма может сохранять оригинальные размеры и позицию при изменении. Часть «B» сохраняет свои исходные размеры и позицию по отношению к части «A», в то время как часть «C» растягивается.


Как нужно делать
Элемент может изменять исходные размеры для сохранения формы. Высота части «А» меняется пропорционально ширине элемента чтобы сохранить угол наклона.


Растягивание и сокращение


Формы могут растягиваться и сокращаться в ответ на изменения размеров компонентов. Трансформация должна сохранять пропорции исходных фигур.


Как нужно делать
По мере растягивания этого элемента, его форма остается узнаваемой потому что ее отличительные закругленные углы сохраняют исходные размеры.


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


Изменение размеров


Сохраняйте соотношение сторон формы когда изменяете ее размеры чтобы избежать деформирования.


Как нужно делать
Радиус закругления угла изменяет размер в соответствии с исходным соотношением его к размеру формы.


Трансформация в другую форму


Форма может меняться на совершенно другую.


Аккуратно
Изменение формы на точно такую же, но с другими параметрами, выглядит гладко в процессе преобразования. Изменение формы на отличную от исходной может выглядеть странно или нелепо в процессе преобразования.



Видимость контента


Весь контент, содержащийся в элементе, должен быть виден пользователю, без обрезания, даже во время изменения формы.
Как нужно делать
Форма элемента должна изменять размеры в соответствии с изменениями контента, но сохраняя исходную узнаваемость.
 Как делать не стоит
Избегайте отделения формы от контента. Форма панели этого приложения создает ложное восприятие кнопок отдельно от самой панели.


Форма по умолчанию


По умолчанию, компоненты в стиле Material Design имеют прямоугольную форму. Они могут трансформироваться во что-то другое, и наоборот. Например, круглая кнопка может превратиться в прямоугольное меню, и в обратную сторону.

Прямоугольные формы предоставляют максимум пространства для скролящегося контента и смешиваются с остальными формами на экране. В результате, элемент обращает внимание на свое содержимое.

Используя стандартную форму, вы можете добавить подсказку (например иконку разворачивания и сворачивания), чтобы показать как ее изменить.


Как нужно делать
Круглая кнопка трансформируется в прямоугольное меню чтобы дать контенту максимум пространства.


Как делать не стоит
Выбирайте такие формы разворачивающихся элементов которые подходят для контента который они отображают. Это круглое меню препятствует восприятию контента потому что оно сохраняет форму кнопки.


Как нужно делать
Максимум пространства для отображения списка достигается трансформацией закругленного угла в стандартный прямой угол.

Концентрация внимания


Прямоугольные формы сливаются с другими прямоугольными формами, позволяя акцентировать внимание.


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




Ну вот собственно и все. Вы наверное заметили что некоторые моменты повторялись несколько раз, и это действительно так. Это я еще убрал некоторые совсем уж очевидные повторения, какие есть в оригинале, но старался максимально следовать исходному тексту.

Есть ли у вас мысли насчет того как еще можно улучшить впечатление от использования приложения? Буду рад почитать что вы думаете об этом в комментариях!

Material Design — история создания, принципы, философия

0 Просмотров 38312 Главное

Вице-президент по дизайну Google Матиас Дуарте (Matias Duarte) в интервью The Verge рассказывает об основных принципах нового дизайна, который получил название Material. Это совершенно иной подход, обеспечивающий унифицированный набор правил, начиная от вида программного обеспечения и заканчивая функциями. Пока дизайн кажется немного странным, и к нему необходимо привыкнуть.

Команда дизайнеров в Google почувствовала необходимость придумать единый внешний вид и функциональность ПО, которые могли бы применяться во всех продуктах: Android, Chrome OS, web-сервисах. Вместо того, чтобы начать с разработки палитры цветов, они начали с вопроса: «Что такое программное обеспечение?»

Материя и форма

Ответ пришел из отдела проектирования, когда Джон Уайли (Jon Wiley), главный конструктор поисковика Google, и его коллега Николай Житкофф (Nicholas Jitcoff) смотрели на дизайн Google Now. Они смотрели на карточный интерфейс и подумали: «А если сдвинуть карточку, то что находится за ней?»

«Этот невинный вопрос зажег мощную искру!» — Сказал Дуарте. Вся команда начала думать над новым способом взаимодействия с программными элементами. Вместо того, чтобы просто использовать пиксели на экране и абстрактные слои, команда начала рассуждать о дизайне, как о реальном осязаемом объекте. Поэтому карточки должны обладать физическими свойствами. Пришло время придумать правила, которые бы определили то, как все должно действовать и двигаться на экране. Команда разработчиков хотела добиться эффекта, будто пользователь взаимодействует с физическими объектами.

Таким образом, началась работа над метафорическим материалом, напоминающим бумагу  — плоскую и белую с реалистичными тенями. Это было семя из которого выросла остальная часть дизайна, реализацию которого можно увидеть в Android L. Material Design — это смелые, яркие цвета, минимализм и чувство последовательности.

Уайли и Житкофф говорят, что это эстетическая эволюция всей философии дизайна компании Google. В 2012 и 2013 годах в стенах штаб-квартиры интернет-гиганта закипела работа над Project Kennedy, который бы унифицировал дизайн всего.

Творчество и ограничения

Material Design объединяет все лучшие идеи. Матиас Дуарте воспринимает наш новый стиль в качестве ряда ограничений, которые, по его мнению, упрощают работу дизайнерам приложений, делают её более последовательной. К примеру, жест переворота карточки для того, чтобы увидеть написанное на задней стороне. В обычном мире это невозможно из-за нехватки места. Это как если бы софт представлял собой реальные физические предметы внутри устройств. А на вашем телефоне явно нет места, чтобы перевернуть карточку, поэтому Google ограничивает подобные манипуляции.

Мы сильно зависим от физики, и программное обеспечение часто ведет себя таким образом, что рвет наши представления о мире, как в каком-то научно-фантастическом фильме, нарушающем элементарную логику. Дуарте прямо комментирует новую философию дизайна iOS от Apple.

Мы не мчимся через пространство и время на сверхзвуковых скоростях. Дизайн — это поиск решения в рамках жестких ограничений. Дизайн — это искусство.

Дизайнеры компании Google упорно отказываются называть используемый вымышленный материал. Решение, которое одновременно дает им большую гибкость и добавляет уровень метафизического мистицизма к веществу. Квантовая бумага — так прозвучало в некоторых утечках до Google I/O. Это важно, потому что материал подчиняется физике и он не попадет в ловушку скевоморфизма. Это не имитация физических объектов в точности, как выразился Дуарте, это что-то «волшебное».

Материал в нашем дизайне может делать то, что физическая бумага не может, например, увеличиваться и уменьшаться с помощью анимаций. Эти анимации важны для Google, потому что они помогают пользователям понять, что они находятся внутри программного обеспечения. Уайли сравнивает ПО с фильмами, где между сценами наблюдаются резкие скачки. Пользователь теряет ощущение времени и пространства. В программном обеспечении важно, чтобы пользователь понимал принципы перехода от одного к другому.

Материализуй

Другая более важная вещь, которую привносит Material Design — унификация. Google работает над алгоритмами для всех продуктов годами, и это стало неотъемлемой частью новой философии дизайна. Вместо того, чтобы пользователь настраивал все сам, Material Design заставляет верить, что на экране они увидят то, что необходимо в нужное время.

Вот почему Android Wear не дает пользователям ничего, кроме взаимодействия с уведомлениями. Алекс Фоборг (Alex Faaborg), дизайнер платформы, говорит:

Вы не тратите много времени на взаимодействие с часами. Вы просто хотите иметь возможность взглянуть на запястье и мгновенно получить нужную информацию или выполнить действие при помощи голосовой команды. Мы проделали колоссальную работу для всей платформы Google.

Google просит слишком много доверия к себе и к его «волшебному» бумажному материалу, но Дуарте уверен, что на это есть веские причины.

Мы сделали так, потому что это наиболее простое решение. Мы хотим спроектировать максимально простой дизайн для пользователя.

Parc 3.0

За Material Design стоит гораздо больше, чем просто дизайн Android L, Android Wear и всего остального к чему причастна Google. Речь идет об ощущениях при взаимоотношении человека и технологий.

Дуарте говорит, что Xerox PARC проделала блестящую работу, создав принципы работы с привычными для всех окнами и курсором. Это было новаторством, потому что компании удалось создать виртуальную версию реального рабочего стола. Люди понимали то, как компьютер работает и могли комфортно с ним работать. Это касается и того, что сделала Apple с сенсорными экранами.

Теперь Google считает, что ей удалось проделать тоже самое. Уайли говорит, что сегодня у людей имеется множество технологий: сенсорные экраны, жесты, голосовые команды, интеллектуальные алгоритмы. Material Design объединяет все это многообразие в одну интуитивно-понятную вещь. Это поможет без труда пользоваться одним и тем же на Chrome OS, Android или в интернете.

9 принципов

1. Материал — это метафора

Material Design является системой, рационализирующей пространство и движение. Дизайн основывается на тактильной реальности, вдохновленной возможностями бумаги и чернил, но открытой для воображения и магии.

2. Поверхности интуитивно понятны

Плоскости и грани передают визуальные сигналы, основанные на нашем восприятии реальности. Использование знакомых тактильных атрибутов позволяет обратиться к первичным частям нашего мозга и помогает быстро понять «представляемое».

3. Размерность рождает взаимодействие

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

4. Единый адаптивный дизайн

Единый дизайн для всего. Каждое устройство отражает свой взгляд на те же базовые элементы. Каждый вид адаптирован к размеру и взаимодействию для каждого устройства. Цвета, иконография, иерархия и пространственные отношения остаются неизменными.

5. Шрифты, графика, цвета

Отчетливый дизайн создает иерархию, понимание и помогает сфокусироваться. Специально подобранные цвета, использование пространства от края до края, крупные шрифты и нарочитое/умышленное использование белого позволяет полностью погрузить пользователя в процесс взаимодействия, сделать его более ясным и понятным.

6. Первичные действия

Действие пользователя и есть суть дизайна. Первичные действия преобразуют весь дизайн. В них акцент делается на основную функциональность и сразу бросаются в глаза пользователя.

7. Пользователи инициируют изменения

Изменения в интерфейсе происходят от действий пользователя. Движение усиливает опыт первичного действия.

8. Анимационная хореография

Все действия происходят в единой среде. Объекты, которые видит пользователь, не нарушают весь остальной опыт использования даже после преобразований и реорганизаций.

9. Движение обеспечивает смысл

Движение имеет смысл и оно необходимо для привлечения внимания. Переходы эффективны.

Дизайн — это искусство создавать. Наша цель удовлетворить разнообразный спектр потребностей человека. Поскольку эти потребности развиваются, тоже самое должно произойти и с нашими проектами, идеями и философией.

Мы поставили перед собой цель — создать визуальный язык для наших пользователей, который объединит привычные принципы классического дизайна с инновациями.

— говорят в Google.

Руководство по разработке Android

| CodePath Android Cliffnotes

Обзор

Изучая разработку приложений для Android, одна из самых важных тем, которую нужно понять, — это создание восхитительных мобильных интерфейсов и взаимодействий. Это означает понимание соглашений во вселенной Android, общих рекомендаций по стилю, шаблонов и т. Д.

Руководящие принципы

Официальная документация по Android содержит отличный набор ресурсов для дизайна. В этом разделе будут выделены несколько ключевых рекомендаций по дизайну и даны ссылки на соответствующие руководства.Вы также можете ознакомиться с этими советами по дизайну Android, чтобы получить быстрый обзор.

Принципы проектирования

Ознакомьтесь с этими принципами дизайна, которые были разработаны командой Android User Experience Team и для них, чтобы учитывать интересы пользователей. Учитывайте их, применяя собственное творчество и дизайнерское мышление. Отклоняться с целью.

Материальный дизайн

С выпуском Android 5.0 обновлены рекомендации по дизайну современного пользовательского интерфейса Android. Эти рекомендации называются «материальным дизайном».Эта новая структура включает в себя несколько изменений интерфейса приложений Android, и Google настоятельно рекомендует принять эти новые принципы. Дополнительные сведения см. В следующих ресурсах:

Используя эти материалы, вы сможете понять и начать соблюдать эти рекомендации для своих собственных приложений.

Чистый Android

При планировании своего приложения для Android помните, что разные платформы работают по разным правилам и соглашениям. Дизайнерские решения, которые имеют смысл на одной платформе, будут выглядеть неуместными в контексте другой платформы.Если в прошлом вы создавали веб-приложения и / или мобильные приложения, просмотрите это Руководство по Pure Android, чтобы узнать, как избежать ошибок в дизайне Android. Ознакомьтесь с этой статьей от jackrabbit для более подробной разбивки.

Обзор пользовательского интерфейса

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

Цветовые схемы

Ознакомьтесь с руководством по цветовым схемам и цветами Android, которые включают общие цветовые палитры для приложений Android.За красивыми цветовыми схемами обращайтесь:

Для материального дизайна см. Палитру материалов для выбора цвета.

Типографика

Ознакомьтесь с руководством по типографике, чтобы понять распространенные типы шрифтов для приложений Android, а также цвета и размеры шрифтов по умолчанию. См. Библиотеку каллиграфии для каждого пользовательского шрифта.

Иконография

Значок — это любое изображение, которое занимает небольшую часть экрана и обеспечивает быстрое и интуитивно понятное представление действия, статуса или приложения.Иконки должны быть созданы для работы на широком спектре устройств. Также существует множество различных типов значков, таких как значок «Launcher» на главном экране, значки ActionBar и значки уведомлений. Чтобы начать работу с иконками, ознакомьтесь с руководством по стилю иконок материалов. Если вы ищете актуальные значки для использования, посетите значки materialdesignicons.com и material.io.

Ознакомьтесь с руководством по иконографии и рекомендациями по дизайну значков, чтобы получить более подробную информацию. В частности, постарайтесь понять советы по дизайну и следуйте правильным соглашениям об именах для различных значков.

Гибкая конструкция

Android работает на миллионах телефонов, планшетов и других устройств с экранами самых разных размеров и форм-факторов. Воспользовавшись преимуществами гибкой системы макетов Android, вы можете создавать приложения, которые плавно масштабируются от больших планшетов до небольших телефонов. Посетите следующие ресурсы для получения дополнительной информации:

Проектирование для Android статей

Общие шаблоны

Существует около десятка общих шаблонов пользовательского интерфейса, которые интегрированы почти в каждое приложение.При создании экранов Android важно придерживаться этих общих руководств по шаблонам. Самые важные из них перечислены ниже:

  • Общая структура приложения — общие рекомендации по элементам приложения.
  • Жесты UX — Жесты позволяют пользователям взаимодействовать с вашим приложением, манипулируя предоставленными вами экранными объектами.
  • UX навигации — последовательная навигация является важным компонентом общего взаимодействия с пользователем
  • Пользовательский интерфейс ActionBar. Панель действий — один из наиболее важных элементов дизайна, которые вы можете реализовать.
  • Прокрутка просмотров — эффективная навигация — один из краеугольных камней хорошо спроектированного приложения.
  • Панель навигации. Панель навигации — это панель, которая переходит от левого края экрана и отображает основные параметры навигации приложения.
  • Пользовательский интерфейс уведомлений — позволяет вашему приложению информировать пользователя о событиях, таких как новые сообщения чата или событие календаря.
  • Настройки — место в вашем приложении, где пользователи указывают свои предпочтения относительно того, как ваше приложение должно вести себя.

Следуя этим и связанным руководствам, подробно объясняется, как создавать согласованные и привлекательные мобильные приложения.

Сравнительный анализ

Один из лучших способов понять передовые практики и шаблоны для разработки приложений — это тестирование других популярных приложений на платформе. Один из лучших способов сделать это — купить устройство Android и использовать множество популярных приложений. В дополнение к этому, мы можем проводить сравнительный анализ, проверяя веб-сайты, которые предоставляют нам широкий выбор приложений и то, как они достигают определенных общих шаблонов пользовательского интерфейса. Для этого мы можем проверить следующие сайты:

  • UI-Oh-My — отличный ресурс для просмотра скриншотов приложений.
  • Вдохновленный-ui — Бесконечный список красивого дизайна пользовательского интерфейса
  • mobilepatterns — аккуратно организованные общие шаблоны экрана
  • pttrns — Список экранов android по категориям
  • androidniceties — Блог красивых интерфейсов
  • androidux — исследует общие шаблоны для UX
    • .
  • androidpatterns — шаблоны пользовательского интерфейса, упорядоченные по таким вопросам, как «Как я могу позволить пользователям управлять своими учетными записями?»

Использование указанных выше сайтов для создания интуитивного понимания того, как создавать различные пользовательские интерфейсы в ваших приложениях.

Каркас

При разработке мобильного приложения есть несколько этапов, которые вы, вероятно, пройдете во время гибкой разработки. Во-первых, вы определяете основную ценность приложения и определяете ключевые пользовательские сценарии. Оттуда полезно начать определять и рисовать различные пользовательские интерфейсы и взаимодействия с пользователем для приложения.

Самый простой способ создания каркаса — это создание эскизов с низкой точностью на бумаге вручную. Чтобы упростить задачу, вы можете распечатать масштабированный фрейм Android.Вы также можете использовать множество отличных цифровых инструментов:

  • Pencil Project — отличный бесплатный кроссплатформенный инструмент для создания каркасов с трафаретами для Android
  • FluidUI — онлайн-инструмент для создания каркасов, бесплатный для ограниченного использования с обширными наборами шаблонов для Android
  • MockingBird — онлайн-инструмент для создания каркасов, бесплатный для ограниченного использования, без шаблонов для Android
  • Balsamiq — чрезвычайно мощный инструмент для создания каркасов, используемый многими профессионалами отрасли.

Дополнительную перспективу и примеры см. В документации Android по каркасному моделированию.

Список литературы

iOS и Android. Дизайн пользовательского интерфейса приложений: объяснение различий (2020)

Если вы разрабатываете для iOS и для Android (материальный дизайн) версии приложения , это руководство станет вашим новым лучшим другом 😎.

Мы собираемся рассмотреть наиболее важных различий между iOS и Android для дизайнеров UX / UI. Если вы создали приложение на одной платформе , это большая часть того, что вам нужно знать , чтобы «перевести» его на другую платформу.Но! — это , руководство , и в основном все, что я скажу, где-то противоречит, даже самими Apple / Google. Речь идет о переводе «мышления iOS» в «мышление Android» и наоборот.

Вот что мы расскажем. Пропустите или прочтите прямо — как урод. Это ваш вызов.

  1. Обзор основных отличий
  2. Навигация
  3. Органы управления
  4. Типографика
  5. Другие стандарты платформы

iOS vs.Дизайн пользовательского интерфейса Android: основные отличия

Вот наиболее важных отличий , которые дизайнеры UX / UI должны учитывать при «переводе» приложения с iOS на Android или наоборот:

О, и прежде чем мы действительно погрузимся в подробности, давайте ответим на один важный вопрос, который образует здесь все остальное …

У меня

есть , чтобы мои приложения для Android и iOS были разными?

Короче говоря: нет.

Apple и Google — очень умные компании с миллионом пользователей каждая.Они будут делать ошибки UX, как и все остальные, но в целом, когда они определяют язык дизайна для стандартного способа работы их системы, они не собираются делать невероятно вопиющих ошибок. Итак, хотя я представляю два способа сделать все ниже (способ iOS и способ Android), ни один из них не является неправильным. Если ваши пользователи могут уверенно перемещаться и использовать созданное вами приложение, тогда никто не сможет запретить вам использовать вкладки на iOS или модальные представления на Android.

Эта статья написана в духе обучения «думать на iOS» или «думать на Android» — и если ваша цель — создать приложение для обеих платформ, но при этом каждая из них будет чувствовать себя родной для системы, в которой она работает, то это руководство будет огромным подспорьем.

С учетом сказанного, приступим.

iOS и Android Навигация

Навигация в верхней части экрана

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

В iOS (необязательное) левое действие почти всегда является своего рода «назад» — последовательно ли на предыдущий экран («Шаг 2» возвращается к «Шагу« 1 ») или к родительскому экрану иерархически (« Входящие »Переходит в« Почтовые ящики »).Кроме того, здесь можно указать не связанный пункт назначения. Заголовок страницы практически всегда присутствует и начинается с большого размера, но сжимается вместе с заголовком по мере того, как пользователь прокручивает страницу. Необязательные действия правой страницы могут отображаться как одно текстовое действие или несколько действий значка .

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

Ресурсы: панели навигации iOS; Верхняя панель приложения Material Design

Основные пункты назначения навигации

Основные части или «пункты назначения» в приложении расположены по-разному.

В приложениях iOS основные места назначения в приложении перечислены как вкладки в нижней части .

  1. Всего 2-5 вкладок
  2. Они обозначены кеглем 10 шрифтом
  3. Они представляют собой основные направления или «существительные» приложения.

Как бы то ни было, многие популярные сторонние приложения для iOS также соответствуют нескольким дополнительным рекомендациям :

  1. Любая вкладка, которая представляет основное действие приложения — например, добавление новой фотографии в приложение на основе фотографий, — по центру
  2. Отображаются вкладки, относящиеся к профилю или настройкам последняя
  3. Появляется поиск секунд

Приложения iOS по умолчанию, с другой стороны, (1) не поощряют действия на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) отображают поиск из последних .

Самая большая разница в приложениях Android заключается в том, что одни и те же основные пункты назначения более разбросаны по интерфейсу — часто между (а) кнопкой гамбургера, (б) панелью поиска, (в) вкладками или (г) плавающей кнопка действия. Мы поговорим обо всех четырех в следующих разделах. О, и примечание : Android в последнее время использует нижнюю навигацию, как и iOS, так что у вас может не быть такой большой разницы.

Ресурсы: панели вкладок iOS; Материальный дизайн понимает навигацию (примечание: это немного теоретически)

Дополнительные пункты назначения

В iOS пункты назначения навигации, которые не помещаются в нижней панели вкладок, могут (а) быть переведены на общую вкладку «Еще» или (б) отображаться как действия в верхнем левом или верхнем правом углу другие направления.

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

Примечание: хотя Apple специально не поощряет использование кнопки гамбургера (или не использует ее в своих приложениях по умолчанию), во многих сторонних приложениях iOS есть одна , и это просто еще один выбор, который можно сделать, если вы хотите. использовать это или нет. Лучшая практика — избегать всего, что скрывает важные вещи, потому что очевидное всегда побеждает.

Ресурсы: панель навигации Material Design

Шаблон «Назад» на iOS vs.Android

В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.

Способ возврата (iOS) Контекст, в котором это работает
Нажмите кнопку «Назад» в верхнем левом углу экрана Любой экран, на котором отображается действие «Назад».
Проведите пальцем вправо от левого края экрана Любой экран, на котором в левом верхнем углу отображается действие «Назад».
Нажмите «Готово» в правом верхнем углу экрана Модальные виды без редактирования
Проведите по экрану вниз Модальный или полноэкранный режимы

Что такое модальный и полноэкранный режимы просмотра? Рад, что ты спросил.

Модальные представления — это одноэкранные задачи, которые появляются при перемещении вверх на переднем плане, позволяя предыдущему экрану заглядывать вверх, отступая на задний план. Вы можете закрыть их, проведя пальцем вниз или нажав действие «Назад» вверху.

Полноэкранные виды — это мультимедийные данные, такие как фотографии или видео, которые занимают весь экран. Их можно закрыть, проведя пальцем вниз на iOS и Android .

На Android вернуться назад намного проще: для Android 10 и новее просто смахните с любой стороны экрана внутрь — всегда будет переходить назад .Для Android 9 используйте вездесущую кнопку «Назад» в нижнем левом углу экрана.

iOS против Android Дизайн управления

Основные кнопки призыва к действию

В iOS основная кнопка страницы обычно находится в правом верхнем углу.

На Android , однако, основная кнопка страницы часто появляется в нижнем — справа как плавающая кнопка действия, или сокращенно FAB.

Стоит отметить, что для каждой платформы по-прежнему будут исключения.Давайте взглянем.

Иногда на iOS важные действия на странице появляются на нижней панели инструментов. Apple любит подчеркивать, что это , на самом деле отличается от панели вкладок, но теперь идет на .

Аналогичным образом, иногда на Android важные действия будут появляться в верхней части экрана.

Ресурсы: кнопки iOS; Плавающая кнопка действия Material Design

Поиск на iOS по сравнению с Android

Как на iOS , так и на Android , поиск является обычным, но очень гибким элементом управления.Иногда это основная задача приложения, иногда — крайний вариант использования, и в большинстве случаев он находится между ними. Как и следовало ожидать, каждая платформа обеспечивает здесь некоторую гибкость. Давайте посмотрим на общие парадигмы.

Одно различие между поиском в стиле iOS и Android:

  • Чтобы отменить поиск, нажмите «Отмена» на iOS или «←» на Android
  • Чтобы удалить текущий запрос, но остаться на экране поиска, нажмите «X» на iOS или «X» на Android
    • .

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

Когда поиск не так важен или распространен, вы можете получить к нему доступ через другие места.

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

На Android вы также увидите это в контекстных действиях на верхней панели.

Ресурсы: панели поиска iOS; Шаблон поиска по Material Design

Меню действий iOS и Android

На iOS меню действий может быть вызвано любой кнопкой или попыткой выполнить какое-либо действие.Они скользят снизу вверх, где до них легко дотянуться большим пальцем.

На Android , однако, нижние листы появляются только при нажатии трехточечного значка «меню шашлыка» (который является значком Android для «дополнительных параметров»). А появление снизу обычно бывает только тогда, когда есть много возможных действий.

Обе платформы имеют стандарты для оперативных меню.

Более новая (iOS 13) функция iOS , называемая «контекстными меню», показывает связанные действия, когда вы нажимаете и удерживаете элемент.Когда отображается контекстное меню, фон размывается.

А на Android многие меню появятся на месте прямо на элементе. В более новых версиях Android меню будет закрывать сам значок шашлыка.

Ресурсы: листы действий iOS, контекстные меню; Меню Android, нижние листы

Элементы управления выбором

На мобильных устройствах разумно обрабатывать выбор из нескольких вариантов иначе, чем выбор из множества вариантов.

Для выбора среди относительно небольшого числа вариантов используйте средство выбора в iOS .Средства выбора могут отображаться закрепленными внизу (как показано выше) или встроенными в контент (см. «Средства выбора даты» ниже для примера).

Для выбора одного из немногих параметров на Android обычно используется раскрывающееся меню (которое появляется на месте) или модальное диалоговое окно (которое появляется по центру и затемняет фон приложения) со списком параметров.

Для более длинных списков опций или когда возможен множественный выбор, обычно отображается специальный «экран выбора» как на iOS , так и на Android .Одна из самых больших ошибок начинающих дизайнеров в мобильном дизайне — , а не , посвящение всего экрана выбору одного варианта с множеством опций.

Ресурсы: средства выбора iOS; Выпадающие меню Android, диалоговые окна

Выбор даты на iOS по сравнению с Android

В iOS средства выбора даты принимают вид любого другого элемента управления выбора, но со столбцом для дня, месяца и (необязательно) года.

Android имеет собственный элемент управления выбором даты.Вы можете указать год, но не включать его, или разрешить пользователю выбирать, включать ли он его.

Ресурсы: сборщик iOS; Средство выбора даты Android (обратите внимание на различия в спецификации Material Design)

Вкладки iOS и Android

Стоит отметить, что iOS не имеет элемента управления, визуально напоминающего «вкладки». Вместо этого Apple призывает вас использовать сегментированную кнопку для перехода между родственными представлениями.

В Android вкладка в стиле «плоский дизайн» используется для того же дисплея.

Ресурсы: сегментированные элементы управления iOS; Вкладки Material Design

Шаблон «Отменить» на iOS и Android

В iOS оповещения отображаются в центре экрана, но вы также можете видеть, как оповещения скользят вверх из нижней части экрана (технически называемые «панелями действий» на жаргоне iOS). Деструктивные действия (например, удаление чего-либо) — красные.

На Android некоторые предупреждения появляются в центре экрана. Однако для предупреждений, которые не требуют ввода данных пользователем и должны исчезнуть через несколько секунд, вы можете использовать «закусочные».Snackbar — это фантастика, потому что (а) они дают вам способ сообщить пользователю, что его действие было успешным, и (б) вы, , можете добавить к ним действие или два, что делает их идеальным местом для «Отменить». . И когда дело доходит до этого, я бы предпочел дать своим пользователям возможность исправить ошибку, а затем дважды спрашивать их, когда они пытаются принять важное решение.

Ресурсы: Отмена iOS; Закусочные Material Design

iOS против Android Типографика

Шрифт по умолчанию

Хотя нет необходимости устанавливать в приложении iPhone шрифт iPhone по умолчанию или аналогично для Android, полезно знать, какие системные шрифты являются , на всякий случай, если вы хотите имитировать стиль нативного приложения.

Системный шрифт iOS называется SF. Это компактный шрифт, предназначенный для удобочитаемости при малых размерах. Вы можете скачать SF здесь.

Системный шрифт Android называется Roboto. Хотя в целом это очень похожий на SF шрифт, у него более высокие буквы и немного больше места для передышки. Вы можете скачать Roboto здесь.

Кроме того, большая часть ОС Android установлена ​​в проприетарном шрифте Google под названием Product Sans, который недоступен для стороннего использования.

Стили текста

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

Ресурсы: рекомендации по типографике iOS; Руководство по типографике Material Design

Сравнение iOS и Android Стандарты других платформ

Размер и форма значка приложения

Вам следует разработать значки следующих размеров для приложений iPhone:

Размер значка Где используется
180×180 пикселей Главный экран iPhone для телефонов @ 3x (например, 11 Pro, X, Xs, 8+)
120×120 пикселей Главный экран iPhone для телефонов @ 2x (например,грамм. 11, XR, 8)
1024×1024 пикселей Магазин приложений

В конечном счете, ваш значок можно использовать и в других размерах, но если вы создадите его в 60 пикселей, а затем убедитесь, что он хорошо смотрится в 120 x 120, 180 x 180 и 1024 x 1024 пикселях, вы золотой.

Создавайте значки следующих размеров для приложений Android:

Размер значка Где используется Кратное 48×48 пикселей
48×48 пикселей Главный экран (телефоны со средним разрешением) 1x
72×72 пикселей Главный экран (телефоны с высоким разрешением) 1.5x
96×96 пикселей Главный экран (телефоны xhdpi) 2x
144×144 пикселей Главный экран (телефоны xxhdpi) 3x
192×192 пикселей Главный экран (телефоны xxxhdpi) 4x
512×512 пикселей Большая версия для магазина Google Play (все устройства) НЕТ

Итак, если вы (1) создадите красивый векторный значок размером 48×48 пикселей, (2) увеличите масштаб до 400%, чтобы убедиться, что он по-прежнему выглядит великолепно, и (3) создадите отдельную версию с размером 512×512 пикселей, вы будете золотыми. .

Когда вы впервые посмотрите на таблицы значков, которые вам нужны для iPhone или Android, это может показаться довольно сложным. Но пока вы знаете базовый размер и можете проверять и экспортировать его с большим кратным увеличением, это совсем не сложно.

Ресурсы: рекомендации по значкам приложений iOS; Рекомендации по значкам приложений Material Design (к сожалению, здесь ничего не говорится о размерах значков)

iOS и Android. Минимальный размер цели по нажатию:

.
Платформа Минимальный размер метки
iOS 44x44pt
Android 48x48dp

Обратите внимание, что точки Apple («pt») и пиксели, не зависящие от устройства Android («dp»), функционально эквивалентны.Они просто относятся к базовому размеру (так же, как единица CSS «пиксели»), который измеряется независимо от того, имеет ли экран нормальное разрешение, высокое разрешение, сверхвысокое разрешение или что-то еще, что люди делают в наши дни!

Благодаря большему размеру касания Android и меньшему количеству пикселей на экран приложения Android, как правило, имеют более чистый и легкий вид, чем их собратья на iOS.

Язык дизайна в материальном дизайне по сравнению с iOS

Пытаясь продемонстрировать различия между двумя языками дизайна и философиями, это руководство охватывает большую часть схожих языков iOS и Material Design.Чтобы узнать больше об этом, вы захотите погрузиться в официальную документацию каждой дизайн-системы.

Чтобы узнать больше о проектировании для iOS, прочтите Руководство Apple по интерфейсу пользователя.

Чтобы узнать больше о дизайне в стиле Material Design, прочтите сайт Material Design.

Завершение

Я что-то пропустил? Что-то устаревшее? Свяжитесь со мной по адресу [электронная почта защищена]. Я буду постоянно обновлять это руководство, чтобы оно было наиболее точным и актуальным в Интернете для перевода между мобильными приложениями iPhone и Android.

Одна заключительная нота

11

Если вы здесь впервые, возможно, вас заинтересует:

  • Learn UI Design, мой полнометражный онлайн-видеокурс по дизайну пользовательского интерфейса
  • The Design Newsletter, информационный бюллетень для более чем 40 000 человек с оригинальными статьями по дизайну, цель которых дать вам тактические советы по улучшению ваших навыков UX / UI.

Некоторым людям есть что сказать о информационном бюллетене.

Благодарность за информационный бюллетень по дизайну

Спасибо за ваш информационный бюллетень.Возможно, это лучший информационный бюллетень, который я получал с 1999 года, когда я начал работать фрилансером.

Триша Литтлфилд
Основатель, TheSimpleWeb

Каждый раз, когда я получаю от вас письмо, я говорю: «Черт, это длинное письмо! Я ни за что не буду читать все это », а затем я начал читать и сказал:« Черт, это чертовски блестяще », и прочитал все это.

Жан-Филипп
UX-стратег, внештатный сотрудник

Подписано более 40 000 человек.
Нет спама. Отпишитесь в любое время.

Дизайн

с iOS на Android (и обратно) — Библиотека

Наконец, имейте в виду некоторые из этих ключевых различий между двумя подходами:

  • Нижние панели навигации могут сохраняться на экранах категорий и подробных сведений, в то время как это крайне не рекомендуется для верхние панели вкладок
  • Нижние панели навигации всегда представляют верхний уровень информационной иерархии приложения, тогда как верхние вкладки могут использоваться для любого уровня
  • Панель навигации обычно содержит дополнительные цели верхнего уровня при использовании с нижними панелями навигации, в то время как верхние панели вкладок всегда подчинены элементам в панели навигации.

Жесты

Сенсорные жесты для управления вашим приложением — отличный способ сделать работу быстрее, плавнее и увлекательнее.Вы всегда должны помнить об ожиданиях пользователей в отношении жестового взаимодействия на платформе. На Android большинство обычных жестов имеют очень стандартизированное поведение, поэтому пользователи ожидают, что ваше приложение их поддерживает. В руководстве по материальному дизайну есть целый раздел, посвященный жестам, но наиболее важно правильно выполнить пару ключевых жестов.

Горизонтальное смахивание повсеместно на сенсорных устройствах. В отличие от iOS, на Android при горизонтальном перемещении по вкладке необходимо переключать вкладки — это ключевое ожидаемое поведение.Вне вкладок смахивание часто используется для каруселей или для удаления элементов из коллекции, например для удаления элемента из списка. Горизонтальная прокрутка на Android — редкость; привязка к границам страницы более распространена.

Что касается вертикальной оси, на Android предпочтительна непрерывная прокрутка, а привязка к границам страницы несколько не рекомендуется. Материальный дизайн поощряет использование методов прокрутки, таких как закрепление, для оптимизации макета в различных положениях прокрутки. Например, панель приложения может отодвигаться при прокрутке вниз и появляться снова при прокрутке вверх.

Проведение пальцем от левого или правого края экрана также является обычным жестом. В отличие от iOS, где смахивание от левого края возвращает вас на один экран назад, Android резервирует смахивание по краю для двух вариантов поведения. Во-первых, если слева или справа от экрана есть ящик, например ящик навигации (или «гамбургер-меню»), проведите пальцем внутрь от края экрана, чтобы открыть ящик. Во-вторых, если у вас есть внутреннее прокручиваемое содержимое внутри вкладки, прокрутка от края должна изменить вкладки.

Последний жест, который следует рассмотреть, — долгое нажатие.На Android долгое нажатие на элемент должно либо выбрать его, либо начать перетаскивать элемент, либо ничего не делать. Избегайте использования длительного нажатия для контекстных меню или менее ожидаемых действий, таких как ярлыки для других функций. Поскольку долгое нажатие — это в некоторой степени скрытый жест, его поведение обычно не очевидно, поэтому особенно лучше придерживаться норм платформы. Если вам действительно нужно отображать контекстные действия над элементами, используйте экранные возможности, такие как значок переполнения и всплывающее меню.

Google Design

Добро пожаловать на Книжную полку, новую серию книг, написанных гуглерами.Для нашей первой части старший дизайнер Клифф Куанг делится адаптированной подборкой из книги «Удобство для пользователя: как скрытые правила дизайна меняют наш образ жизни, работы и развлечений». Написанная совместно с Робертом Фабрикантом и описанная New York Times как «проявление силы», книга является обязательной к прочтению для всех, кто сегодня работает в области UX. — 28 марта 1979 года Соединенные Штаты оказались в пределах тридцати минут от немыслимой гибели. после аварии на втором реакторе атомной электростанции Три-Майл-Айленд в Мидлтауне, штат Пенсильвания.Как позже выяснили исследователи, 150 тонн урана в активной зоне реактора достигли поразительной температуры 4300 ° F. При температуре всего на 700 ° F он расплавился бы через восьмидюймовую стальную защитную оболочку реактора, пробив землю, пока не упал бы на коренную породу под рекой Саскуэханна, и выбросил бы радиоактивные паровые гейзеры в воздух всего в 90 милях от Филадельфии. время, бюрократические пупы обвинили в этой близкой неудаче любимого козла отпущения, к которому мы все еще стремимся, когда происходит что-то катастрофическое, будь то авария в беспилотном автомобиле или неудачное предупреждение о ракетном нападении на Гавайях: ошибка пользователя.Но факт в том, что TMI не был ошибкой пользователя; у людей, управляющих реактором, не было ни единого шанса. TMI был провалом конструкции, и этого никогда не должно было случиться. Проблемы начались с панели управления реактором, которая после засорения системы охлаждения станции загорелась из-за шторма сигнальных ламп и клаксонов. Буквально сразу сотни сигнализаций и огней загорелись. Операторы поспешили их выключить, пытаясь разобраться в проблеме. Туман замешательства — что происходит ?! — уже начал спускаться.Сама панель не давала четкого представления о том, как на самом деле работает установка, бессмысленно группируя кусочки информации. Например, панель, показывающая утечки реактора, была рядом с панелью, сообщающей о проблемах лифта; Позже следователи обнаружили, что красный свет может означать четырнадцать разных вещей, плохих и хороших. Столкнувшись с скоплением противоречивых сигналов, ни один из операторов не мог распознать причину и следствие всех действий, которые они пытались устранить с некогда незначительной засорением.Но, возможно, самая вопиющая ошибка дизайна была даже более фундаментальной. В верхней части системы охлаждения реактора имелся выпускной клапан. В диспетчерской этот клапан был настолько важен, что у него был собственный свет и собственный выключатель. Как оказалось, свет был подключен просто к переключателю, а не к клапану. Следовательно, он мог только показывать, щелкнул ли кто-то выключателем, а не был ли действительно закрыт клапан. Другими словами, этот единственный идиотский свет мог обозначить только намерение закрыть клапан, а не фактическое закрытие этого клапана.Поэтому, когда операторы пошли проверять, свет просто солгал. И из-за этой единственной ложной обратной связи этот клапан оставался открытым в течение нескольких часов, пока вода кипела от активной зоны реактора, заставляя температуру внутри устрашать до 5000 ° F. То, что произошло в TMI, вызвало печальный каскад событий. Вместе с полностью дезинформированным фильмом-катастрофой «Китайский синдром» авария на TMI помогла положить конец политической поддержке ядерной энергетики в Америке, которая, по мнению экспертов, является одним из самых безопасных и надежных источников чистой энергии.Итак, оглядываясь назад на чистую энергию, которая могла бы быть, можно с уверенностью сказать, что TMI был самым большим провалом дизайна в истории США. Это также очень поучительно. Неудачи в TMI многое говорят нам о том, что на самом деле означает хороший дизайн: если обратная связь в приложении или гаджете неправильная, вы никогда не поймете, как это работает. Но это не только приложения или гаджеты, но и механизмы обратной связи вокруг нас, которые учат тому, как устроен мир. Эти механизмы показывают нам, что важно. Они дают нам свободу воли, в то время как в противном случае мир был бы просто бессмысленным светом, лгающим нам о том, что они делают.

Op-Ed

Топ-10 практических примеров дизайна пользовательского интерфейса Android-приложений для вдохновения | by Grace Jia

Как сделать элегантный дизайн пользовательского интерфейса для Android-приложения? В этой статье собраны 10 практических примеров дизайна пользовательского интерфейса Android-приложений, которые очень популярны в повседневной жизни людей.

Исследование рынка показало, что рыночный разрыв между iOS и Android увеличивается. Устройства Android становятся ведущим игроком на рынке мобильных приложений.Плоский дизайн Apple очень популярен в последние годы, но дизайн пользовательского интерфейса Android-приложений, основанный на материальном дизайне, также заслуживает внимания и изучения дизайнерами.

Как сделать элегантный дизайн пользовательского интерфейса для Android-приложения? В Интернете разбросано множество ресурсных и справочных материалов. Итак, здесь Mockplus собрал 10 лучших примеров дизайна пользовательского интерфейса Android-приложений, которые очень популярны в повседневной жизни людей.

Как и в Apple App Store, в Google Play Store есть множество погодных приложений. Eye in Sky Weather выделяется своими минималистичными голографическими темами, и пользователи должны ожидать от него основных функций погодного приложения. Это приложение включает в себя 14 лучших наборов значков погоды, которые вы можете добавить самостоятельно. Доступны четыре виджета и одно масштабируемое уведомление с широкими возможностями настройки. Также есть расширение DashClock.

Snapseed — это комплексное приложение для редактирования фотографий от Google. В дополнение к основным функциям редактирования, предоставляемым Instagram, я также ценю этот тип редактирования, который делает редактирование фотографий проще, чем когда-либо.Многие приложения для редактирования фотографий усложняют этот процесс, но Snapseed упрощает его и предлагает множество параметров, которые можно легко настроить.

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

YouTube , крупнейший в мире веб-сайт для обмена видео, с момента своего основания в 2005 году извлекает выгоду из своего продуманного дизайна.То же самое вдохновляет и сегодня, и вы можете увидеть простые в использовании сервисы мобильных приложений на iOS и Android.

Точно так же, хотя YouTube не является специализированным мобильным приложением, более половины видео YouTube просматривается на мобильных устройствах. Потребность в таком приложении в 2017 году совершенно очевидна. Так что пользовательский интерфейс для приложений Android и iOS в какой-то степени одинаково важен.

Prototype Быстрее, умнее и проще с Mockplus

Начать работу БЕСПЛАТНО

YouTube проделал большую работу, сохраняя доступный и свежий дизайн, обновляя приложения каждые две недели и адаптируя дизайн к изменениям, которые они вносят в платформу.Фактически, большинство пользователей предпочитают мобильную версию.

Одним из новейших претендентов на самый красивый дизайн пользовательского интерфейса Android-приложения является социальный скрапбукинг Pinterest. Pinterest добавил достаточно деталей в пользовательский интерфейс, от тщательно реализованного процесса регистрации до полномасштабного отображения фотографий, чтобы изображения и контент оставались в центре внимания.

Trello — это инструмент управления проектами и организации, основной задачей которого является то, что они называют «советом директоров». Каждая доска может соответствовать разным задачам или обязанностям и должна быть выполнена.Простой и понятный дизайн ускоряет выполнение работы и снижает количество ошибок связи между сторонами.

Trello — хороший пример дизайна пользовательского интерфейса, поскольку в нем не так много ненужных функций. Все на главном экране приложения легко понять и работает точно так же, как и приложение, без каких-либо проблем, связанных с передачей какой-либо задачи с одной доски на другую. Дизайн интерфейса очень интуитивно понятный, первый пользователь приложения может легко просматривать разные страницы.

Slack — это инструмент командного взаимодействия всех форм и размеров. Планируете ли вы мероприятие, работаете над проектом или просто устали от электронной почты, Slack становится одним из наиболее широко используемых инструментов среди профессионалов. Ключ к этому успеху — их простой, но мощный дизайн.

Хотя Slack не является специализированным мобильным приложением, его пользовательский опыт на мобильных устройствах не хуже, чем на компьютере. Все, что вам нужно, очень четко размещено в левом раскрывающемся меню, а командный канал всегда обновляется в основной области приложения.

Duolingo — это компания, изучающая языки, которая обучает пользователей говорить на разных языках с помощью мини-игр и коротких курсов. Основанная в 2009 году, компания достигла 100 миллионов пользователей и продолжает расти, в основном за счет простоты их приложений и постоянных технологических инноваций.

Любой, кто пользуется Duolingo, понимает простоту приложения. Выполнив миссию или игру, вы можете перейти в более продвинутые категории. Это также отличная идея — объединить увлекательность мобильных игровых приложений и использовать их для изучения новых языков, на основе чего пользовательский опыт также является одним из факторов, привлекающих пользователя.

Wickr так же прост, как и дизайн многих других эффективных пользовательских интерфейсов мобильных приложений. Он отлично передает сообщение о безопасности, сохраняя при этом свой базовый черно-белый дизайн. Независимо от того, находится ли пользователь вне работы или по личному выбору, существуют безопасные способы отправки зашифрованных сообщений. Он имеет возможности группового обмена сообщениями, а также индивидуального общения. Отправитель сообщения может контролировать продолжительность просмотра сообщения, изображения или видео. Такие сообщения, как Snapchat, могут показывать только 1–10 секунд, и со временем они будут фрагментировать удаленное сообщение в цифровом виде.

Hipmunk — самый быстрый и простой способ спланировать свое путешествие. Это приложение сэкономит ваше время, сравнивая все популярные туристические сайты, включая напоминания о том, куда вы хотите отправиться, просмотр отзывов других пассажиров, бронирование рейсов, поиск гостиничных номеров для ближайшего пункта назначения, который вы хотите Подождите.

Дизайн, который мне очень нравится, заключается в том, что он может адаптировать ваш вид к вашим потребностям, например, к макету карты города или к лучшему времени для бюджетного отеля. Это действительно настраиваемое приложение для бронирования поездок.

PEAR — это персонализированное фитнес-приложение, которое помещает тысячи тренировок и персональных тренеров прямо у вас на ладони. Это приложение удивило меня, потому что оно обрабатывает данные о вашем здоровье в режиме реального времени в соответствии с вашими конкретными потребностями. Для этого требуются некоторые упражнения, такие как бег, езда на велосипеде и силовые тренировки, и в зависимости от того, какое из них вы выберете, обеспечить ободряющий звук. Он синхронизируется со всеми основными фитнес-трекерами и приложениями, чтобы упростить управление всеми данными упражнений.

Самое главное, вы можете включать и выключать телефон по своему желанию.Если вы занимаетесь йогой или чем-то, что требует обеих рук, ваш тренер может направить вас исключительно через аудио. Например, если вы бегаете на беговой дорожке, она предоставляет полезные графики частоты пульса, сжигаемых калорий и общего прогресса. В целом, это очень полезное приложение, учитывая личную пригодность, а также его настраиваемые функции и дизайн.

Как разработчики Android, вы можете обратиться к спецификациям Google Android Design, официальным документам о том, как создать дизайн пользовательского интерфейса Android-приложений, всегда было много советов и предложений.

В разделе «Дизайн пользовательского интерфейса Github» собрано множество материалов, связанных с дизайном, и отличные сайты, посвященные дизайну. Не ограничивается только дизайном интерфейса приложений Android.

Это видео объясняет пользователям Eclipse, как создать графический пользовательский интерфейс для вашего приложения с помощью Android Studio. Ролик длинный (почти час), но логически процесс прост.

Одно из лучших руководств по макету и анимации пользовательского интерфейса Android. В нем рассказывается, как использовать Android Studio для создания различных макетов (макет фрейма, линейный макет, относительный макет и макет сетки), представлений (TextView, ListView, ImageView, GridView, RecyclerView) и действий (анимация атрибутов, анимация с возможностью рисования).Это руководство предназначено для начинающих и опытных дизайнеров и доступно на GitHub.

Я думаю, что проектирование прототипа — это основной шаг для определения стиля приложения. На этапе проектирования прототипа приложения дизайнеры должны проявлять осторожность при выборе и использовании элементов пользовательского интерфейса в инструментах прототипирования. Судя по характеристикам приложений для Android, Mockplus и Justinmind, как правило, больше соответствуют материальному дизайну.

Хорошее онлайн-сотрудничество и передача обслуживания также помогают дизайнерам и разработчикам создавать великолепные приложения для Android.На этапе реализации и передачи проекта Android-приложения, по сравнению с постоянным общением друг с другом с помощью инструментов социальных сетей, инструмент для совместной работы в онлайн-дизайне, такой как Mockplus iDoc, является лучшим, чтобы значительно сэкономить ваше время и усилия.

Почему стоит выбрать Mockplus iDoc?

Для интерфейсных разработчиков Mockplus iDoc помогает получать доступ к спецификациям и просматривать их различными способами, легко искать повторяющиеся элементы и цвета, бесплатно проверять и загружать ресурсы дизайна и одним щелчком получать фрагменты кода с идеальной точностью до пикселя.

Для менеджеров по продукту Mockplus iDoc помогает более эффективно управлять дизайн-проектами, например создавать / отображать взаимосвязи страниц простым перетаскиванием, добавлять комментарии и общаться с другими членами команды по проектам Android за секунды, а также загружать документы в разных форматах. типы одним щелчком мыши.

Короче говоря, Mockplus iDoc — хороший выбор для совместного создания лучшего приложения для Android.

Mockplus iDoc, автоматическая передача проектов с точными спецификациями, активами и фрагментами кода

Начните работу БЕСПЛАТНО

Руководство для начинающих по разработке приложений для Android

Android — чрезвычайно популярная мобильная платформа. В настоящее время устройствами Android пользуется больше людей, чем мобильными устройствами любого другого типа. Это дает вам как дизайнеру возможность создать приложение, которым могут пользоваться миллионы людей.В то же время начало работы с Android-дизайном может показаться сложным, особенно если у вас нет опыта в дизайне мобильных устройств. Но не волнуйтесь! Советы, упомянутые в этой статье, помогут вам создать удобный мобильный интерфейс для пользователей Android.

Изучите основные правила дизайна для Android

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

Изучите язык дизайна Android

Хорошо известно, что лучшие приложения, представленные на рынке, создаются в соответствии с правилами, изложенными в руководстве по платформе. Когда дело доходит до разработки приложения для Android, изучение Material Design должно стать первым естественным шагом для вас как дизайнера. Материальный дизайн — это намного больше, чем просто рекомендации по платформе; это документ, описывающий визуальный язык. Как описывает это Google: «Мы поставили перед собой задачу создать визуальный язык для наших пользователей, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями технологий и науки.”

Создание сильной визуальной иерархии

Невозможно создать удобство для пользователей, не имея надлежащей визуальной иерархии в пользовательском интерфейсе. Вот почему, когда дело доходит до приложений для Android, основополагающими элементами материального дизайна являются сетки и пробелы. Вам нужно сосредоточиться на удалении всех чисто декоративных элементов и сосредоточиться на самом важном — на контенте.

Использование общих системных шаблонов

Многие дизайнеры считают, что когда дело доходит до создания нового продукта, им необходимо разрабатывать каждый шаблон взаимодействия своего приложения с нуля.Я настоятельно рекомендую вам избегать этого пути. Каждый настраиваемый компонент, который будет отличаться от языка Material Design, может увеличить когнитивную нагрузку на пользователей (просто потому, что он будет им незнаком, и им нужно будет научиться его использовать). Но даже если вам удастся создать пользовательский компонент, ваше решение будет стоить намного дороже. Вы потратите много времени не только на их разработку, но и на их реализацию на этапе разработки.

Стандартные компоненты (стандартные макеты, навигация, цветовые схемы и т. Д.) сократит накладные расходы на проектирование и инжиниринг как в отношении начальных инвестиций, так и в отношении долгосрочной поддержки. И Android, и iOS имеют множество шаблонов, которые считаются отраслевыми стандартами.

Используйте движение для описания пространственных отношений между видами

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

В этом примере движение используется для создания логической связи между двумя различными состояниями — просмотром музыкальных дорожек и прослушиванием любимой дорожки. Изображение: Аниш Чандран

Не забывайте о доступности

Пытаясь создать красивое приложение, многие дизайнеры игнорируют одно важное правило хорошего дизайна — доступность.Доступность — это то, что позволяет пользователям с любым уровнем подготовки успешно использовать пользовательский интерфейс. Как говорит Material Design: «Хорошо спроектированный продукт доступен пользователям с любыми способностями, в том числе с ослабленным зрением, слепотой, нарушением слуха, когнитивными или двигательными нарушениями».

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

  • Мелкий текст должен иметь коэффициент контрастности не менее 4.5: 1 на фоне
  • Крупный текст (14 пунктов полужирного / 18 пунктов обычного и выше) должен иметь коэффициент контрастности не менее 3: 1 по сравнению с его фоном

Даже великие дизайнеры могут попасть в ловушку проблема низкой контрастности. Некоторые части этой страницы плохо читаются людьми с нормальным зрением. Изображение: Антон Ахейчанка

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

Учитывайте особенности устройства

Будьте готовы оптимизировать дизайн для различных экранов

Когда дело доходит до разработки приложения для iOS, у вас есть точно определенное количество устройств и дисплеев, необходимых для разработки вашего продукта (в большинстве случаев , список устройств начинается со старых iPhone, таких как 5s, и идет до последних моделей, таких как iPhone X). Но когда дело доходит до разработки приложения для Android, у вас не будет определенных моделей экранов / устройств.Android работает на множестве устройств с разными размерами экрана и плотностью пикселей.

Компании, специализирующиеся на разработке мобильных приложений, всегда проводят различные тесты, чтобы убедиться, что их продукт хорошо работает на всех типах устройств. Это тестирование обычно проводится группой обеспечения качества (QA). Они также создают подробные отчеты об ошибках, обнаруженных в процессе.

Будьте готовы оптимизировать приложение для большинства размеров экрана. Размеры и плотность экрана могут сильно различаться — от смартфона за 100 долларов с крошечным экраном и низким разрешением экрана до планшетов высокого класса с дисплеями, подобными Retina.

Для достижения этой цели вы должны переключиться с пикселей на пиксели, не зависящие от плотности (dp или dip) в качестве единицы измерения. Сохранение независимости плотности важно, потому что без нее элемент пользовательского интерфейса (например, значок) может выглядеть больше на экране с низкой плотностью и меньше на экране с высокой плотностью.

Пример двух устройств одинакового размера, но с разной плотностью пикселей. Система Android использует dp, чтобы помочь вам добиться независимости от плотности. Изображение: Google

Обязательно проверьте, как поддерживать разные размеры экрана.Как видно из приведенного ниже примера, размеры экрана варьируются от xsmall до xlarge.

На этом рисунке подробно показано, как разная ширина dp экрана обычно соответствует разным размерам и ориентации экрана. Изображение: Google

Ваша цель как дизайнера заключается в том, чтобы следующие объекты отлично смотрелись на экране любого размера и плотности:

  • Текстовые объекты (например, метки, текстовая копия)
  • Иконки и изображения (например, фоновые изображения )
  • Динамическое содержимое (e.грамм. анимация и видео)

Оптимизация для различного оборудования

Получите максимальную производительность для своего приложения. Вы не можете рассчитывать, что у всех ваших пользователей будет топовое оборудование, такое как Samsung Galaxy S9, поэтому вам следует сосредоточиться на том, чтобы сделать ваше приложение менее требовательным к аппаратным ресурсам. В идеале разрабатываемое приложение должно отлично работать на разном оборудовании — от устройств низкого уровня за 100 долларов до устройств высшего класса.

Совет. Используйте аналитику Google Play, чтобы понять, какие устройства чаще всего используются людьми для работы с вашим приложением.Оптимизируйте свое приложение для этой группы устройств.

Использование возможностей устройства

Современные мобильные устройства имеют множество аппаратных компонентов, которые можно использовать для облегчения жизни пользователей. Камера, GPS-навигатор, Bluetooth, NFC, акселерометр, гироскоп и многое другое — все эти датчики могут обогатить пользовательский интерфейс. Позвольте мне привести простой пример того, как вы можете использовать местоположение GPS для повседневных задач. Когда дело доходит до заполнения формы, вместо того, чтобы спрашивать пользователя о его / его текущем местоположении, вы можете запросить доступ к службе определения местоположения и автоматически заполнить необходимые данные.Это сэкономит драгоценное время ваших пользователей.

Автоматическое определение местоположения может сэкономить время пользователей. Изображение: Thinkwithgoogle

Продвиньте свой бренд

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

  • Цвет. Используйте цвета компонентов в соответствии с нашей торговой маркой.
  • Иллюстрации. Создавайте иллюстрации, которые передают сообщение и ассоциируются с вашим брендом.

Google Trips использует красивые иллюстрации, которые помогают отразить бренд. Изображение: The Verge

Прототип и тестирование вашего дизайна

Когда дело доходит до создания мобильного приложения, нет другого выбора, кроме как создать прототип и протестировать свой дизайн. Не пытайтесь создать идеальный дизайн с первого раза. В большинстве случаев это просто невозможно. Вместо этого будьте готовы доработать свой продукт.

Наличие в вашем наборе инструментов дизайнера отличного инструмента для создания прототипов Android, такого как Mockplus, может значительно облегчить вашу жизнь. Mockplus не только поможет вам создать интерактивный прототип с высокой точностью за считанные минуты; это также позволяет вам протестировать прототип на реальных пользователях. Итак, в следующий раз, когда у вас будет какое-то предположение о том, как должна выглядеть или функционировать определенная функция / экран / элемент пользовательского интерфейса вашего продукта — не угадайте, а протестируйте!

Mockplus — мощный инструмент для создания прототипов для дизайнеров приложений Android

Отслеживайте итерации дизайна

Если вы отслеживаете свою проектную работу, это поможет вам лучше понять, как эволюционировало ваше дизайнерское мышление.Особенно важно сохранить все отрицательные итерации (неудачные попытки). Отрицательные итерации знаний не позволят вам снова совершить те же ошибки.

Заключение

Когда дело доходит до создания отличного мобильного приложения, самое важное, что следует учитывать, — это то, что вы разрабатываете для своих пользователей, а не для себя. Как дизайнер, вы должны тратить меньше времени на продвижение пикселей и больше времени на работу с вашими пользователями. Экспериментируйте, пробуйте разные подходы, выбирайте тот, который лучше всего подходит для вашей целевой аудитории, и опирайтесь на ценность, которую вы предоставляете своим пользователям.Удачи!

Различия в дизайне iOS и Android и почему они имеют значение

Действительно ли дизайн iOS и Android настолько отличается?

Типичный запрос, который мы получаем здесь, в Tapadoo, — это создать приложение, которое будет иметь те же конструктивные особенности iOS и Android. Разумный вопрос, во что бы то ни стало.

«Наше приложение должно выглядеть одинаково для всех, независимо от того, на какой платформе они работают!»

«Что делать, если у кого-то есть устройство Android и iOS?»

«Конечно, идеально разработанное приложение может выглядеть только в одну сторону!»

Мы вас слышим!

Нет никаких сомнений в том, что идея идентичности конструктивных особенностей iOS и Android соблазнительна.Однако если копнуть глубже в дизайн приложения, станет очевидно, что во многих случаях это плохая идея. Тот, который часто приводит к увеличению затрат, времени и низкому качеству продукта.

Проблема в том, что дизайн iOS и Android специфичен для каждой отдельной платформы. То есть каждая платформа имеет свои собственные стили дизайна, идиомы и идеологии. Следовательно, пользователи ожидают, что приложения будут выглядеть и действовать определенным образом в зависимости от выбранной ими платформы. И отойти от этого может быть действительно сложно!

Преимущества адаптации дизайна iOS и Android к конкретной платформе

Есть преимущества адаптации дизайна iOS и Android к их платформе.Приложение сразу становится знакомым пользователю после того, как соблюдаются правила платформы. Следовательно, позволяя им легко перемещаться и использовать приложение, не останавливаясь и не думая. И мы знаем, насколько высоко оценивается пользовательский опыт с дизайном приложений. Поэтому мы должны стремиться предоставить пользователям наилучшие возможности.

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

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

Например, Android предоставляет стандартные раскрывающиеся меню, тогда как iOS не имеет прямого эквивалента. Вместо этого iOS достигает тех же целей с помощью собственных шаблонов проектирования. Выпадающее меню в iOS требует, чтобы оно было построено с нуля. Это увеличит как стоимость, так и время.Все для чего-то, что может показаться пользователю менее знакомым и интуитивно понятным.

Рекомендации по дизайну iOS и Android

К счастью, и Apple, и Google предоставляют подробную документацию по дизайну для своих платформ. Apple предоставляет рекомендации по человеческому интерфейсу, а Google — рекомендации по дизайну материалов. Оба являются живыми документами и со временем меняются. Действительно, и Apple, и Google недавно заметили радикальные изменения в своем дизайне. К счастью, как таковые, оба, вероятно, останутся довольно стабильными в обозримом будущем, сосредоточив внимание на постепенных изменениях.

Дизайн интерфейса пользователя

С выпуском iOS 7 в 2013 году Apple внесла значительные изменения во внешний вид своей мобильной платформы. Исчезли старые метафоры, трехмерные формы и тени, а также детализированные текстуры, которые стали доминировать в экосистеме iOS. Вместо этого Apple перешла на «более плоский» дизайн. По словам Apple, это было направлено на воплощение темы почтения, ясности и глубины.

Material Design

Android тоже претерпел постепенный переход и развитие своего дизайна.Кульминацией этого стало анонсирование Material Design в 2014 году. С помощью Material Design Google пытается создать единообразный визуальный язык для Android и других своих продуктов.

В их руководствах описывается искусственный «материал», для которого Google определил свойства и правила. Этот новый Материал призван обеспечить знакомые тактильные атрибуты, которые имеют сходство с правилами физики, но при этом расширяют их границы. Таким образом обеспечивается что-то знакомое и мощное.

Соблюдение

Ни Apple, ни Google не требуют полного соблюдения своих рекомендаций по дизайну. Все согласны с тем, что определенные приложения и возможности требуют уникального или неповторимого опыта. Однако оба настоятельно рекомендуют придерживаться стандартных элементов пользовательского интерфейса и принципов дизайна своих платформ.

Они утверждают, что согласованность между их платформами позволяет избежать увеличения когнитивной нагрузки на пользователя. Новизна индивидуального дизайна быстро исчезает.И что еще хуже, это становится помехой для пользователей, которые просто хотят эффективно выполнять задачи. Google даже опубликовал статью под названием «Дизайн с iOS на Android (и обратно)». Это указывает на некоторые различия и подводные камни, о которых следует помнить при создании для обеих платформ.

Примеры разработки iOS и Android

Различия между обеими платформами многочисленны и часто незначительны. Документирование всех этих различий, вероятно, могло бы заполнить страницы книги среднего размера.Однако для наглядности давайте возьмем лишь несколько примеров различий. Начнем с сравнения задачи установки будильника в приложениях «Часы» для iOS и Android.

Пример 1: приложение для часов и приложение для часов

Приложение для часов для iOS

Приложение для часов для Android

Уделите несколько минут, чтобы изучить оба экрана.

Сначала вам может показаться, что на самом деле они очень похожи. При этом у пользователя Android или iOS не возникнет проблем с сопоставлением экрана с предпочитаемой платформой.Каждый экран будет удобен и знаком только на одной платформе. Это часто называют «чувством родства» с платформой. Повсюду есть тонкие различия. От раскраски, структуры, анимации до навигации и шрифта. Их бесчисленное множество, и они жизненно важны для обеспечения ощущения нативности платформы в приложении.

Начиная с панелей вкладок, оба приложения имеют одинаковые параметры. Но обратите внимание на их расположение и значки. Панель приложений Android расположена в верхней части экрана. В отличие от этого, панель вкладок iOS расположена в нижней части экрана.

Также обратите внимание на разницу в иконографии и на то, как соответствует выбранная вкладка. В iOS мы видим использование цвета при выделении вкладок. Важно отметить, что пользователь Android ожидает, что сможет перемещаться между этими вкладками влево и вправо. Приложение Android Clock по праву оправдывает это ожидание. Но не на iOS, где жесты часто используются иначе.

Обратите внимание на пятый значок справа на Android. Этот значок переполнения представляет собой раскрывающееся меню панели приложения. Тот же, который мы ранее обсуждали выше, как не имеющий прямого эквивалента для iOS.

Установка будильника на Android.

Установка будильника на iOS.

Добавление нового будильника показывает большее расхождение во взглядах. Мы видим контраст между круговым выбором времени Android и устройством прокрутки времени в стиле игрового автомата iOS. iOS представляет пользователю новый экран для редактирования настроек будильника. Пока Android разворачивает детали на том же экране. Таким образом, приложение Clock придерживается принципов материального дизайна, согласно которым материал может изменять форму.

Пример 2: Плавающие кнопки действий

Плавающая кнопка действия, особенность Material Design

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

Одним из наиболее ярких изменений, которые Material Design привнес в Android, стала плавающая кнопка действия (FAB). В нашем примере с часами это можно увидеть как кнопку «+». Большой, ярко раскрашенный и свободно перемещающийся поверх другого контента, FAB — смелый и отличительный аспект Material Design. Он предназначен для представления отдельных действий, которые пользователи чаще всего выполняют на этом конкретном экране.

В iOS ни одной кнопке не уделяется такого внимания. Кнопки обычно располагаются по углам экрана.Вместо этого основное внимание уделяется содержанию. Кнопку добавления можно увидеть аккуратно расположенной в правом верхнем углу экрана.

Пример 3: обратная навигация

Android-навигация назад.

Одним из самых больших различий между платформами является кнопка «Назад» в системе Android. iOS имеет только одну физическую кнопку на передней панели устройства — кнопку «Домой». Эта кнопка возвращает пользователя к экрану знаковых приложений iOS. Вся остальная навигация в iOS зависит от контекста и отображается на экране.

Android, напротив, предлагает системную кнопку «Назад». Эта кнопка действует аналогично кнопке «Назад» в интернет-браузере. Он возвращает вас к последнему экрану, на котором вы были, даже если он был частью другого приложения.

Обе платформы часто предлагают своего рода кнопку возврата в верхнем левом углу экрана приложений. В Android это называется кнопкой «Вверх», чтобы отличать ее от системной кнопки «Назад».

На бумаге это может показаться несущественной разницей.Но обратная навигация — это основа навигации по приложениям. Я много раз видел, как пользователь Android с iPhone на мгновение лапы под левым нижним краем экрана пытался найти путь назад. Или видели, как опытный пользователь iOS выглядит сбитым с толку, когда он изучает устройство Android в поисках кнопки возврата на экране.

Пример 4: смахивание влево

Смахивание слева, чтобы вернуться в iOS.

Смахивание влево или вправо от края экрана — распространенный жест на мобильных устройствах.В iOS смахивание от левого края экрана вернет вас на один экран назад. Обычно это распространено на протяжении всего опыта. Это ключевое ожидаемое поведение и, как правило, обязательно в дизайне iOS.

Android, однако, резервирует боковые свайпы для других целей. На Android, если приложение использует панель навигации, смахивание от левой части экрана должно открывать эту панель. И, как ранее обсуждалось в примере 1, по вкладкам следует перемещаться, перемещаясь между ними.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *