Примеры интерфейса для android

Полезные советы новичкам в дизайне под Android

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

Кнопка “назад” (The Back Button)

Долгое время back была аппаратной кнопкой Android устройств, не было смысла добавлять программный аналог в пользовательский интерфейс. Сейчас модно использовать кнопку back для навигации внутри приложений. Если говорить о кнопке “назад” пользовательского интерфейса (её называют “up button”), то между хардварной back и up есть небольшая разница. Up производит переход на один экран, в рамках приложения, в то время как back к любому приложению или контенту.

Разрешение

Параметры разрешений под Android немного путают — xhdpi (2x), hdpi (1.5x) и mdpi (1x).

Звучит крайне технически. Когда год назад я начинал работать, никто толком не мог мне объяснить какое соотношение сторон межу ними. После многих расспросов и поисков, оно составило 720×1280, 540×960 и 360×640. Проектируя дизайн макет, не забывайте учитывать хардварные кнопки и статус бар.

От переводчика: На самом деле то, что описано в этом абзаце, не совсем верно. По ссылке и в таблице вы найдете более точное описание.

Начальный набор (Starter Kit)

Джереми Салли, дизайнер из Telly, графически наглядно показал соотношение этих трех разрешений. Вам пригодится Android Action Bar Style Generator для работы с темами по умолчанию. Он позволит задать базовые параметры цвета, стиля и сохранить настройки в Zip файл для всех всех трех разрешений. Лучший способ наглядно поэкспериментировать.

9-slice Scaling

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

• Top: область, которая может быть растянута по горизонтали.
• Left: аналогично по вертикали
• Right: Область по вертикали, в которой будет расположено содержимое. Этот параметр может использоваться для задания отступов.
• Bottom: аналогично по вертикали

The Action Bar

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

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

Наконец, если вы серьезно относитесь к гайдлайнам, все элементы управления должны быть в правом верхнем углу. Это относится и к функции обновить (потянуть, чтоб обновить как на iPhone, очень редко используются в Android), поиск, и печально известные кнопки “действия” которые в идеале дожны быть в виде трех точек. Точки используются для тех действий, которые не смог вместить Action Bar.

Шрифты

Шрифты, к сожалению, зависят от специфики устройства, так что будьте готовы к казусам. Не расстраивайтесь если вам придется протестировать дизайн на старом устройстве. Были и куда худшие дни — вспомните IE6. Самый популярный шрифт на данный момент Droid Sans. Впрочем Roboto набирает популярность, так как присутствует на новых устройствах.

Размеры

Начиная с Android 2.x, минимальный размер элемента должен быть: 28px для текста, 96px для меню и заголовка, 116px для нижнего колонтитула. Это немногим больше чем в iOS (24px, 88px и 100px). Если говорить о соотношении 116% Android к iOS.

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

Роман Нурик из Google разработал очень полезный инструмент Android Design Preview. Инструмент поможет дизайнеру посмотреть, как нарисованный в графическом редакторе на компьютере макет приложения будет выглядеть на реальном устройстве.

Программу Android Design Preview можно установить на Windows, Mac OS X или практически любую из операционных систем семейства *nix. Приложение написано на Java и представляет собой обычный JAR-файл. Работает Android Design Preview следующим образом: разработчик подключает смартфон к компьютеру по USB (На ПК должны быть установлены ADT), запускает Design Preview, нажимает «Select Mirror Region» в этой программе и видит перед собой рамку. Эту рамку он устанавливает на макет и видит его на экране смартфона.

Источник

Примеры интерфейса для android

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

Как выбрать хороший хостинг для своего сайта?

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

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Распознавание текста из изображений через командную строку

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

Источник

Jetpack Compose — как легко построить UI на Android

В июле этого года вместе с Android Studio Arctic Fox вышла одна из долгожданных библиотек — Jetpack Compose. Она позволяет создавать пользовательский интерфейс в декларативном стиле и обещает быть революцией в построении UI.

Разбираемся, так ли это на самом деле, какие у библиотеки преимущества и недостатки. Подробности — в статье.

Преимущества Jetpack Compose

Jetpack Compose — это набор инструментов для разработки UI в Android-приложении. Он призван ускорить и упростить разработку пользовательского интерфейса, избавить от лишнего кода и соединить модель реактивного программирования с лаконичностью Kotlin.

Сразу с места в карьер — какие есть преимущества у библиотеки:

1. Меньше кода. Jetpack Compose позволяет писать меньше кода, а значит разработчик может больше фокусироваться на проблеме, с меньшим количеством тестов и дебага, а значит и багов.

2. Интуитивно понятный. Compose использует декларативный API — разработчику нужно лишь сказать, что сделать, а все остальное ляжет на плечи библиотеки.

3. Удобство внедрения. Compose совместим с любым существующим кодом. Например, можно вызвать Compose-код из вьюх (view) и, наоборот, вьюхи из Compose. Многие библиотеки вроде Jetpack Navigation, ViewModel и Coroutines уже адаптированы под Compose, что позволяет сравнительно быстро внедрить его в свой код. Кроме того, Android Studio Arctic Fox поддерживает превью создаваемых вьюх.

4. Имеет обширный инструментарий. Jetpack Compose позволяет создавать красивые приложения с прямым доступом к Android Platform API и build-in поддержкой Material Design, тёмной темы, анимаций и других крутых штук.

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

Подключение к проекту

Чтобы подключить Jetpack Compose к проекту, необходимо указать некоторые строки кода в своем build.gradle.

В рутовом объявим переменную с версией Compose:

Здесь мы указываем, что в проекте будем использовать Jetpack Compose и объявляем необходимые зависимости (подробнее про зависимости можно почитать в официальном гайде).

Дальше всё просто. В активити (activity) объявлем Composable-функцию, строим иерархию вьюх с указанием необходимых атрибутов и смотрим результат.

Пройдемся по коду. Я написал две реализации вёрсток различной сложности:

1. Простая реализация

Добавляет TextView в вёрстку с текстом с конкатенацией Hello и аргумента, переданного в Greeting.

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

2. Более сложная реализация

Этот вариант представляет собой скролящийся экран, который содержит изображение, текст и кнопку. Рассмотрим некоторые особенности:

Необходимо объявить Scroll State. Только не обычный, а тот, который позволяет сохранять состояние скролла сквозь рекомпозицию — rememberScrollState().

Column представляет собой ViewGroup с вертикальным расположением элементов.

Modifier позволяет управлять атрибутами, добавлять декорации и поведение к вьюхам.

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

Добавить вьюхи в активити можно через extension setContent <>, например:

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

Для тестирования воспользуемся библиотекой Jetpack Benchmark, о которой, кстати, тоже рассказывали в отдельной статье. Код теста выглядит так:

Протестируем три версии установки вьюхи в активити:

При передаче ресурса в setContentView.

При передаче вьюхи в setContentView.

Итоги тестирования можно посмотреть в таблице: левый столбец — название теста, правый — время на выполнение:

Источник

Как должны выглядеть Android приложения?

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

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

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

Ice Cream Sandwich

Последняя версия Android (4.0) была выпущена совсем недавно. Релиз принес с собой крупнейший набор пользовательских улучшений платформы, чем когда-либо. Эти изменения естественно влияют на то, как Android приложения будут выглядеть в будущем. Некоторые усовершенствования могут быть портированы обратно для более ранних версий, но не все из них. В этой статье я в основном говорю о том, как приложения для Android выглядят прямо сейчас. Надеюсь, скоро мы увидим эволюцию интерфейса ICS, но дело в том, что у нас есть около 200.000.000 Android устройств с версиями от 2.1 до 2.3.

Главный экран приложения

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

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

Общий экран приложения

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

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

Проект ActionBarSherlock (Jake Wharton) позволяет облегчить внедрение панелей действий.

Списки

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

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

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

Панель действий на экранах списков.

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

Элементы списка и чекбоксы

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

Размещение чекбокса слева в элементе списка имеет следующие преимущества:

1. Мы привыкли видеть чекбоксы с левой стороны элементов, которые мы выбираем. Это верно для веб, рабочего стола и других мобильных приложений.
2. Чекбокс на краю пункта позволяет нам создавать большие области для нажатия, что позволяет пользователям легче различать нажатия на элементы списка и выбор одного элемента.
3. Графический компонент с левой стороны элемента создает легкую визуальную подсказку, где заканчивается один элемент и начинается другой, что делает его намного проще для пользователей, чтобы быстро просмотреть список.

Вторичные элементы управления

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

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

Бесконечные списки

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

Android Market и Twitter автоматически загружают несколько элементов при достижении конца списка.

Действия над элементами — Долгое нажатие — Быстрые действия

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

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

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

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

Aldiko, Asto File Manager и Google+ используют различные визуальные стили. Во всех случаях эти действия появляются при длительном нажатии на элемента экрана.

Aldiko и Astro примеры хорошего дизайна, но Google + нарушает правило о сокрытии целевого элемента, поскольку они используют простые всплывающие окна. Я надеюсь, что они исправят этот недостаток в будущих версиях.

Действия над несколькими элементами

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

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

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

Больше информации о списках

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

Вкладки

Многие приложения в той или иной форме используют вкладки, чтобы помочь пользователям перемещаться между страницами. Android версии Honeycomb (3,0) и Ice Cream Sandwich (4,0) немного изменил способ работы и внешний вид вкладок. Мое мнение, что мы должны попытаться использовать это нововведение во всех наших приложениях, независимо от версии, на которой они работают.

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

Хорошими примерами приложений, которые используют слайдинг для навигации между вкладками являются Android Market и Google+.

Mark Allison написал несколько превосходных статей о технической реализации данной темы:
ViewPager – Part 1
ViewPager – Part 2
ViewPager – Part 3

Проект Jake Wharton’s показывает как можно работать с вкладками:
ViewPagerIndicator на GitHub

Заключение

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

Источник