Я разрабатываю мобильное приложение (UI/UX Design) для клиента, которое будет разработано с использованием React Native. С какого размера экрана мне следует начать? Нужно ли для этого разрабатывать 2 разных приложения?

До сих пор я разрабатывал одноплатформенные приложения и знаю, как работают размеры экрана. Так что я знаю, какой базовый размер экрана для Android (ширина-360px) и iOS (ширина-375px).

1
George L. Scott 6 Июн 2019 в 15:51

2 ответа

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

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

1
Toiletroller 6 Июн 2019 в 16:36

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

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

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

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

0
edgerunner 6 Июн 2019 в 23:08