UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как конвертировать интерфейс iOS в Android
Редакція
Редакція

Опубліковано • Оновлено

Как конвертировать интерфейс iOS в Android

1. Не конвертируйте

Вы не должны использовать те же спецификации UI для Android. В iOS есть физическая кнопка “home”, которая с любого экрана перебрасывает на домашний. А в Android есть экранные кнопки “назад”, “home” и многозадачная кнопка. Что это значит? Пользователь Android может поработать в вашем приложении, потом перейти к другому и легко вернуться назад. Это совсем разная навигация. Yahoo and wikipedia По этой причине, в iOS есть смесь вертикальных и горизонтальных UI-структур, а в Android структура более вертикальная. Android ios И эти кнопки “назад”, “home” и мультитаск находятся внизу, так что внизу нельзя располагать вкладки. Facebook app

2. Знакомство с новыми терминами

Вы часто будете слышать термины “DP”, “SP” и “9 Patch”. DP и SP - это единицы измерения размера, а 9 Patch - название формата для исходников.

Подробно о плотности пикселей в дизайне мобильных интерфейсов

Руководство дизайнера по DPI и PPI

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

Yahoo news Yahoo News Digest 9 Patch - это уникальный масштабируемый формат исходников, который существенно уменьшает размер файлов. Обычно он используется для кнопок с тенью. На этом сайте более детально описаны его особенности. 1-mOYnI5UGFyffIAyzpF_Bsg Крошечное изображение в формате 9 patch (слева) разворачивается в огромный размер, и становится полноценной графикой.

3. Плотность экрана и размеры

В отличие от iPhone, сотни производителей создают их собственные устройства. Например, на OpenSignal.com есть красивая, но страшная инфографика, описывающая фрагментацию Android: 1-xj1nUYZpH3wzTVIqjWCahQ Источник: OpenSignal : Фрагментация Android Но не паникуйте, вам не придется делать версии дизайна под все эти вариации. В Android есть система плотности экрана, которая адаптируется под каждый размер экрана. Так что вам придется создать всего пять (до семи) разных размеров. XXHDPI Если вы сделаете макет в размере 1080 x 1920 пикселей (XXHDPI), вам нужно будет разделить количество пикселей на три, и это будет DP. Если вы начинаете создавать дизайн в размере 1080 x 1920 пикселей, вы не делаете его только под Nexus 5. Эти спецификации и исходники подходят под все телефоны с разрешением в XXHDPI, включая Galaxy S4, HTC One или LG G2. И давайте вернемся назад к DP… Снова повторю, DP - это абсолютный размер для любого экрана. Чтобы добиться правильного количества пикселей, вам нужно умножить или разделить на нужную плотность. Например, если вы сделали макет в размере 1080 x 1920 пикселей, вам нужно разделить все номера пикселей на три, и это будет размер в DP. Да, тут придется немного посчитать, так что я предпочитаю начинать с 360 x 640 пикселей. Но делайте, как вам удобнее. В любом случае, вам нужно оптимизировать свое приложение под разные размеры и плотности экрана. Я рекомендую протестировать как минимум пять устройств с разными плотностями и размерами экрана перед релизом дизайна. Интересно, что пропорции очень похожи, поэтому не нужно сильно париться над начальным макетом. 1-hNmVMV_4YzQeEHi4jqIWzg Дайджест новостей Yahoo. Оптимизирован под каждую плотность

4. Иконки

Стиль иконок на Android более закругленный и лаконичный. иконок на Android Иконки Material Icons Система иконок Android масштабирует размеры иконок автоматически. Тем не менее, масштабирование может вызвать искажения в растре. Чтобы убедиться, что растровые иконки выглядят хорошо, вы должны потратить некоторое время на оптимизацию каждого размера. Иконки Android Yahoo Новостной дайджест Yahoo. Иконки оптимизированы под каждую плотность.

5. Material Design

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

6. И еще кое-что

Экранные кнопки

На экране типичного устройства Android есть кнопки меню, назад и home (переход на домашний экран). Тем не менее, в устройствах Samsung эти кнопки аппаратные. И это привносит свои изменения. Убедитесь, что ваш макет будет подходить и таким устройствам от Samsung и других производителей. Samsung Galaxy Nexus 6

Виджеты

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

Уведомления

Уведомления - это типичная иконка + текст или картинка + текст. В Android OS 5 (Lollipop) и более ранних версиях (KitKat, Gingerbread) используют другие методы. Android OS 5 (Lollipop)

7. Полезные ссылки

Вот список полезных ссылок. Google Material Design (главная) Google Material Design (паттерны) androidux.com pttrns.com materialup.com Снова повторюсь: не конвертируйте. Попользуйтесь ими некоторое время. Это огромная разница. Спасибо


Перевод статьи Minseung Song

Топ коментарі (0)