1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>20 дек 2022</li>
2
<ul><li>20 дек 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Что значит "нативный"? Объясняем простыми словами</h2>
4
</ul><h2>Что значит "нативный"? Объясняем простыми словами</h2>
5
<p>Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"</p>
5
<p>Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
7
<p>Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.</p>
7
<p>Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.</p>
8
<p>Термин "нативный" встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?</p>
8
<p>Термин "нативный" встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?</p>
9
<p>Простыми словами объясняют, что такое "нативный", эксперт в дизайне Артём Кожевников и эксперт в разработке Николай Соцкий.</p>
9
<p>Простыми словами объясняют, что такое "нативный", эксперт в дизайне Артём Кожевников и эксперт в разработке Николай Соцкий.</p>
10
<p>Дизайн-директор диджитал-агентства бета.</p>
10
<p>Дизайн-директор диджитал-агентства бета.</p>
11
<p>Когда дизайнеры работают над приложениями или страницами в вебе, будь то сервис или концептуальный сайт с уникальной графикой и сторителлингом, они проектируют графический интерфейс - то, с чем непосредственно взаимодействует человек внутри страницы или приложения. А также - составляют сценарии пользовательского опыта: как всё будет устроено и как станет работать.</p>
11
<p>Когда дизайнеры работают над приложениями или страницами в вебе, будь то сервис или концептуальный сайт с уникальной графикой и сторителлингом, они проектируют графический интерфейс - то, с чем непосредственно взаимодействует человек внутри страницы или приложения. А также - составляют сценарии пользовательского опыта: как всё будет устроено и как станет работать.</p>
12
<p>Между этими двумя задачами есть значительная разница. Когда интерфейс нарисован, его можно увидеть и оценить в статике. А вот процесс взаимодействия можно понять лишь в динамике, пользуясь продуктом.</p>
12
<p>Между этими двумя задачами есть значительная разница. Когда интерфейс нарисован, его можно увидеть и оценить в статике. А вот процесс взаимодействия можно понять лишь в динамике, пользуясь продуктом.</p>
13
<p>И то и другое - статичный интерфейс и динамичный процесс - может быть нативным и ненативным.</p>
13
<p>И то и другое - статичный интерфейс и динамичный процесс - может быть нативным и ненативным.</p>
14
<p>Нативный, если простыми словами, означает "родной". И в таком значении мы используем слово "нативный" гораздо чаще, чем думаем. Например, когда говорим "родной шнурок от iPhone" - мы как раз имеем в виду оригинальный, подходящий, нативный провод из системы устройств Apple, обычно приобретённый в одной коробке с телефоном.</p>
14
<p>Нативный, если простыми словами, означает "родной". И в таком значении мы используем слово "нативный" гораздо чаще, чем думаем. Например, когда говорим "родной шнурок от iPhone" - мы как раз имеем в виду оригинальный, подходящий, нативный провод из системы устройств Apple, обычно приобретённый в одной коробке с телефоном.</p>
15
-
<p>В дизайне, если смотреть совсем широко, границу родства различной графики, интерфейсов или процессов взаимодействия бывает трудно определить. Так что для того, чтобы понять разницу между нативным и ненативным в дизайне, сузим рамки.</p>
15
+
<p>В дизайне, если смо��реть совсем широко, границу родства различной графики, интерфейсов или процессов взаимодействия бывает трудно определить. Так что для того, чтобы понять разницу между нативным и ненативным в дизайне, сузим рамки.</p>
16
<p>Будем рассматривать это свойство графики, интерфейсов и процессов в разрезе какого-то одного условного проекта.</p>
16
<p>Будем рассматривать это свойство графики, интерфейсов и процессов в разрезе какого-то одного условного проекта.</p>
17
<ul><li>Если иллюстрации, графика или motion в проекте выполнены в одном стиле, то можно сказать, что по отношению к этому стилю они нативны.</li>
17
<ul><li>Если иллюстрации, графика или motion в проекте выполнены в одном стиле, то можно сказать, что по отношению к этому стилю они нативны.</li>
18
</ul><p>В таком случае иллюстрации выглядят так, словно их нарисовал один и тот же специалист, хотя на деле это может быть не так.</p>
18
</ul><p>В таком случае иллюстрации выглядят так, словно их нарисовал один и тот же специалист, хотя на деле это может быть не так.</p>
19
Две иллюстрации на странице "Кинжала" нативны друг к другу<em>Скриншот: сайт "<a>Кинжал</a>" / Артём Кожевников</em>Иллюстрации на сайте "Абсолют Страхование". Они нативны не только между собой, но и выглядят как родные в интерфейсе в целом<em>Скриншот: сайт "<a>Абсолют Страхование</a>" / Артём Кожевников</em><ul><li>В хорошем дизайне иллюстрации нативны не только по отношению к выбранному стилю, они так же органично вписываются во все остальные графические составляющие проекта.</li>
19
Две иллюстрации на странице "Кинжала" нативны друг к другу<em>Скриншот: сайт "<a>Кинжал</a>" / Артём Кожевников</em>Иллюстрации на сайте "Абсолют Страхование". Они нативны не только между собой, но и выглядят как родные в интерфейсе в целом<em>Скриншот: сайт "<a>Абсолют Страхование</a>" / Артём Кожевников</em><ul><li>В хорошем дизайне иллюстрации нативны не только по отношению к выбранному стилю, они так же органично вписываются во все остальные графические составляющие проекта.</li>
20
</ul><p>И элементы интерфейса, и типографика, и лэйаут - всё в таком случае выглядит словно близкие родственники из одной семьи.</p>
20
</ul><p>И элементы интерфейса, и типографика, и лэйаут - всё в таком случае выглядит словно близкие родственники из одной семьи.</p>
21
На этом экране чувствуется родство всех элементов: и палитра, и шрифты, и иллюстрация, и лэйаут составляют крепкую композицию и выглядят нативно по отношению друг к другу и к проекту в целом<em>Скриншот: сайт<a>Ctrl Shift!</a>/ Артём Кожевников</em>Фотостиль дружит с цветами элементов, лэйаут подчёркивает характер проекта. Всё здесь ощущается не как разные кусочки, а как единый крепкий организм. Все элементы нативны друг к другу - и главное, в сумме составляют большее, чем по отдельности<em>Скриншот: сайт<a>Laframboise Avocats</a>/ Артём Кожевников</em>Даже в интернет-магазине карточки товаров должны быть нативны между собой и согласовываться с пользовательским интерфейсом. Здесь все элементы выглядят родными: картинки соразмерны, композиции схожи<em>Скриншот: сайт<a>Metro CC</a>/ Артём Кожевников</em><p>Снова рассмотрим понятие родства в двух отношениях.</p>
21
На этом экране чувствуется родство всех элементов: и палитра, и шрифты, и иллюстрация, и лэйаут составляют крепкую композицию и выглядят нативно по отношению друг к другу и к проекту в целом<em>Скриншот: сайт<a>Ctrl Shift!</a>/ Артём Кожевников</em>Фотостиль дружит с цветами элементов, лэйаут подчёркивает характер проекта. Всё здесь ощущается не как разные кусочки, а как единый крепкий организм. Все элементы нативны друг к другу - и главное, в сумме составляют большее, чем по отдельности<em>Скриншот: сайт<a>Laframboise Avocats</a>/ Артём Кожевников</em>Даже в интернет-магазине карточки товаров должны быть нативны между собой и согласовываться с пользовательским интерфейсом. Здесь все элементы выглядят родными: картинки соразмерны, композиции схожи<em>Скриншот: сайт<a>Metro CC</a>/ Артём Кожевников</em><p>Снова рассмотрим понятие родства в двух отношениях.</p>
22
<ul><li>Графика и иллюстрации могут быть ненативны по отношению сами к себе в рамках одного проекта. Это сразу бросается в глаза: картинки не дружат между собой и вставлены будто наугад. Это разрушает визуальную целостность проекта.</li>
22
<ul><li>Графика и иллюстрации могут быть ненативны по отношению сами к себе в рамках одного проекта. Это сразу бросается в глаза: картинки не дружат между собой и вставлены будто наугад. Это разрушает визуальную целостность проекта.</li>
23
</ul>На одной и той же странице в заглавных иллюстрациях к новостям используется и фирменная графика, и фотографии, и сканы документов. Выглядит неряшливо<em>Скриншот: сайт<a>Plug Me In</a>/ Артём Кожевников</em><ul><li>Графика может просто не подходить к проекту в целом, хотя все её элементы между собой отлично сочетаются. В этом случае можно сказать, что такая графика не нативна к проекту.</li>
23
</ul>На одной и той же странице в заглавных иллюстрациях к новостям используется и фирменная графика, и фотографии, и сканы документов. Выглядит неряшливо<em>Скриншот: сайт<a>Plug Me In</a>/ Артём Кожевников</em><ul><li>Графика может просто не подходить к проекту в целом, хотя все её элементы между собой отлично сочетаются. В этом случае можно сказать, что такая графика не нативна к проекту.</li>
24
</ul>На таком строгом сайте клинингового сервиса лучше бы сработала не анимированная векторная графика, а хорошие большие фотки чистых окон и помещений. Сейчас графика справа выглядит наивной, совсем не так, как строгие элементы интерфейса и фотка слева<em>Скриншот: сайт<a>Innovative Cleaning Services</a>/ Артём Кожевников</em><p>Как и в случае с иллюстрациями, пользовательские интерфейсы тоже обладают собственным стилем в рамках набора.</p>
24
</ul>На таком строгом сайте клинингового сервиса лучше бы сработала не анимированная векторная графика, а хорошие большие фотки чистых окон и помещений. Сейчас графика справа выглядит наивной, совсем не так, как строгие элементы интерфейса и фотка слева<em>Скриншот: сайт<a>Innovative Cleaning Services</a>/ Артём Кожевников</em><p>Как и в случае с иллюстрациями, пользовательские интерфейсы тоже обладают собственным стилем в рамках набора.</p>
25
<p>В веб-дизайне, дизайне приложений и сервисов принято объединять элементы интерфейса в дизайн-системы. В таком случае любой элемент интерфейса может быть как нативен по отношению к стилю дизайн-системы, так и ненативен по отношению к нему.</p>
25
<p>В веб-дизайне, дизайне приложений и сервисов принято объединять элементы интерфейса в дизайн-системы. В таком случае любой элемент интерфейса может быть как нативен по отношению к стилю дизайн-системы, так и ненативен по отношению к нему.</p>
26
Описание элемента "Карточка" дизайн-системы Material Design<em>Скриншот: сайт<a>Material Design 3</a>/ Артём Кожевников</em><p>Возьмём, например, карточку на скриншоте выше. Это сложный многосоставной компонент, который может состоять сразу из нескольких элементов дизайн-системы: заголовок, основной текст, кнопка, иллюстрация, цвет и само тело карточки. Все элементы карточки согласованы между собой графически и выполнены в стиле дизайн-системы, они нативны по отношению к её стилю.</p>
26
Описание элемента "Карточка" дизайн-системы Material Design<em>Скриншот: сайт<a>Material Design 3</a>/ Артём Кожевников</em><p>Возьмём, например, карточку на скриншоте выше. Это сложный многосоставной компонент, который может состоять сразу из нескольких элементов дизайн-системы: заголовок, основной текст, кнопка, иллюстрация, цвет и само тело карточки. Все элементы карточки согласованы между собой графически и выполнены в стиле дизайн-системы, они нативны по отношению к её стилю.</p>
27
<p>В целом, на этом скриншоте весь интерфейс состоит из нативных элементов дизайн-системы Material Design.</p>
27
<p>В целом, на этом скриншоте весь интерфейс состоит из нативных элементов дизайн-системы Material Design.</p>
28
<p>И когда дизайнеру потребуется добавить новый элемент к этому набору, ему надо будет свериться с тем, что элемент наследует стилям и правилам уже созданной дизайн-системы. Только в таком случае элемент интерфейса получится нативным.</p>
28
<p>И когда дизайнеру потребуется добавить новый элемент к этому набору, ему надо будет свериться с тем, что элемент наследует стилям и правилам уже созданной дизайн-системы. Только в таком случае элемент интерфейса получится нативным.</p>
29
<p>Иногда у производителей устройств, для которых, например, создаются новые приложения, уже есть собственная дизайн-система. В таком случае создать нативный к этому устройству интерфейс будет означать использовать дизайн-систему производителя. Тогда дизайн будет нативным уже по отношению к выбранному устройству.</p>
29
<p>Иногда у производителей устройств, для которых, например, создаются новые приложения, уже есть собственная дизайн-система. В таком случае создать нативный к этому устройству интерфейс будет означать использовать дизайн-систему производителя. Тогда дизайн будет нативным уже по отношению к выбранному устройству.</p>
30
Пример нативной библиотеки дизайн-ресурсов Apple<em>Скриншот: сайт<a>Apple</a>/ Артём Кожевников</em><p>Бывает так, что дизайнеры не следуют правилам дизайн-системы, и в новых интерфейсах возникают рассогласованные по стилю элементы. В таком случае элементы интерфейса будут ненативны по отношению к применяемой дизайн-системе и не будут выглядеть как родственники. Это проблема: ненативность затрудняет пользовательский опыт и плохо влияет на ощущения от продукта.</p>
30
Пример нативной библиотеки дизайн-ресурсов Apple<em>Скриншот: сайт<a>Apple</a>/ Артём Кожевников</em><p>Бывает так, что дизайнеры не следуют правилам дизайн-системы, и в новых интерфейсах возникают рассогласованные по стилю элементы. В таком случае элементы интерфейса будут ненативны по отношению к применяемой дизайн-системе и не будут выглядеть как родственники. Это проблема: ненативность затрудняет пользовательский опыт и плохо влияет на ощущения от продукта.</p>
31
Например, когда вы выбираете стиль для кнопки в проекте, важно придерживаться стиля выбранной дизайн-системы, иначе может получиться визуальная каша<em>Изображение:<a>Material Design 3</a></em>Потрясающая (нет) консистентность UI в Steam<em>Изображение:<a>HobbylosUwU</a>/<a>Reddit</a></em><p>Если кратко, то нативный пользовательский опыт - это известный, родной сценарий того, как ведёт себя интерфейс при взаимодействии с ним.</p>
31
Например, когда вы выбираете стиль для кнопки в проекте, важно придерживаться стиля выбранной дизайн-системы, иначе может получиться визуальная каша<em>Изображение:<a>Material Design 3</a></em>Потрясающая (нет) консистентность UI в Steam<em>Изображение:<a>HobbylosUwU</a>/<a>Reddit</a></em><p>Если кратко, то нативный пользовательский опыт - это известный, родной сценарий того, как ведёт себя интерфейс при взаимодействии с ним.</p>
32
<ul><li>Нативным процессом или опытом можно считать переход на другую страницу при клике по ссылке или открытие формы при клике по кнопке, которая явно называет это действие и призывает к нему.</li>
32
<ul><li>Нативным процессом или опытом можно считать переход на другую страницу при клике по ссылке или открытие формы при клике по кнопке, которая явно называет это действие и призывает к нему.</li>
33
<li>Ненативным можно считать ранее неизвестный опыт или процесс, который возникает при взаимодействии с известным интерфейсом.</li>
33
<li>Ненативным можно считать ранее неизвестный опыт или процесс, который возникает при взаимодействии с известным интерфейсом.</li>
34
</ul><p>Например, веб-страница может скроллиться вверх, а не вниз. Или ссылка будет работать не по клику, а по выделению, или просто по наведению курсором на неё.</p>
34
</ul><p>Например, веб-страница может скроллиться вверх, а не вниз. Или ссылка будет работать не по клику, а по выделению, или просто по наведению курсором на неё.</p>
35
<p>Нативный - понятие очень относительное, и чтобы определить, нативен ли дизайн, нужно сначала понять - по отношению к чему. И также надо учитывать: не всегда использование нативных элементов в дизайне или следование выбранному стилю или известному сценарию поведения интерфейса - верное решение задачи.</p>
35
<p>Нативный - понятие очень относительное, и чтобы определить, нативен ли дизайн, нужно сначала понять - по отношению к чему. И также надо учитывать: не всегда использование нативных элементов в дизайне или следование выбранному стилю или известному сценарию поведения интерфейса - верное решение задачи.</p>
36
<p>Иногда задача решается рассогласованием, а новый опыт удивляет и радует людей, что зачастую тоже может быть задачей дизайнера. Главное - чтобы было уместно.</p>
36
<p>Иногда задача решается рассогласованием, а новый опыт удивляет и радует людей, что зачастую тоже может быть задачей дизайнера. Главное - чтобы было уместно.</p>
37
<p>CEO агентства мобильной разработки InstaDev. Преподаёт мобильную iOS-разработку в Skillbox.</p>
37
<p>CEO агентства мобильной разработки InstaDev. Преподаёт мобильную iOS-разработку в Skillbox.</p>
38
<p>Когда про приложения говорят "нативный", имеют в виду английское слово native. Буквальный перевод - "родной", в нашем случае - родной для конкретной мобильной платформы.</p>
38
<p>Когда про приложения говорят "нативный", имеют в виду английское слово native. Буквальный перевод - "родной", в нашем случае - родной для конкретной мобильной платформы.</p>
39
<p>В данный момент есть только две значимые мобильные платформы - iOS и Android. У каждой из них есть:</p>
39
<p>В данный момент есть только две значимые мобильные платформы - iOS и Android. У каждой из них есть:</p>
40
<ul><li>Свои особенности по процессорам и поддерживаемой периферии.</li>
40
<ul><li>Свои особенности по процессорам и поддерживаемой периферии.</li>
41
<li>Свои операционные системы, в честь которых и названы платформы.</li>
41
<li>Свои операционные системы, в честь которых и названы платформы.</li>
42
<li>Свои инструменты для создания приложений - IDE, интегрированная среда разработки. Базовым для Android является Android Studio, а для iOS - Xcode.</li>
42
<li>Свои инструменты для создания приложений - IDE, интегрированная среда разработки. Базовым для Android является Android Studio, а для iOS - Xcode.</li>
43
<li>Свои наборы библиотек для работы с пользовательским интерфейсом и функциями устройства - геолокацией, управлением экраном, громкостью звука, камерой и так далее.</li>
43
<li>Свои наборы библиотек для работы с пользовательским интерфейсом и функциями устройства - геолокацией, управлением экраном, громкостью звука, камерой и так далее.</li>
44
<li>Свои языки программирования. Основной для Android - это Kotlin, а для iOS - Swift.</li>
44
<li>Свои языки программирования. Основной для Android - это Kotlin, а для iOS - Swift.</li>
45
</ul>Как выглядит разработка в Xcode<em>Изображение: Apple</em>Как выглядит разработка в Android Studio<em>Изображение: Wikimedia Commons</em><p>Это приложения, которые созданы с использованием базового языка программирования и прямо используют системные библиотеки для построения интерфейса и работы с устройствами.</p>
45
</ul>Как выглядит разработка в Xcode<em>Изображение: Apple</em>Как выглядит разработка в Android Studio<em>Изображение: Wikimedia Commons</em><p>Это приложения, которые созданы с использованием базового языка программирования и прямо используют системные библиотеки для построения интерфейса и работы с устройствами.</p>
46
<p>Основные библиотеки для построения UI - это UIKit, SwiftUI, Jetpack Compose. А для работы с возможностями геолокации используются Core Location и LocationManager.</p>
46
<p>Основные библиотеки для построения UI - это UIKit, SwiftUI, Jetpack Compose. А для работы с возможностями геолокации используются Core Location и LocationManager.</p>
47
Разные приложения выглядят родственниками<em>Изображение: pikisuperstar / freepik</em><p>Если нативные приложения выделили в отдельную группу, значит, есть альтернатива. В чём она заключается?</p>
47
Разные приложения выглядят родственниками<em>Изображение: pikisuperstar / freepik</em><p>Если нативные приложения выделили в отдельную группу, значит, есть альтернатива. В чём она заключается?</p>
48
<p>Альтернатива нативным - это приложения, построенные на кросс-платформенных фреймворках.</p>
48
<p>Альтернатива нативным - это приложения, построенные на кросс-платформенных фреймворках.</p>
49
<p>Основные кросс-платформенные фреймворки сейчас - это:</p>
49
<p>Основные кросс-платформенные фреймворки сейчас - это:</p>
50
<ul><li>Flutter,</li>
50
<ul><li>Flutter,</li>
51
<li>Kotlin Multi Platform,</li>
51
<li>Kotlin Multi Platform,</li>
52
<li>ReactNative,</li>
52
<li>ReactNative,</li>
53
<li>Xamarin.</li>
53
<li>Xamarin.</li>
54
</ul><p>Суть всех кросс-платформенных фреймворков в том, чтобы упростить разработчику задачу делать одно и то же приложение на обе основные мобильные платформы. А ещё некоторые из кросс-платформенных фреймворков используют для создания web-приложений, работающих в браузере.</p>
54
</ul><p>Суть всех кросс-платформенных фреймворков в том, чтобы упростить разработчику задачу делать одно и то же приложение на обе основные мобильные платформы. А ещё некоторые из кросс-платформенных фреймворков используют для создания web-приложений, работающих в браузере.</p>
55
Приложение и веб-версия<em>Изображение:<a>Iiro</a></em><p>Для этого создают дополнительный слой библиотек, которые умеют работать с интерфейсом и функциями устройства нескольких платформ.</p>
55
Приложение и веб-версия<em>Изображение:<a>Iiro</a></em><p>Для этого создают дополнительный слой библиотек, которые умеют работать с интерфейсом и функциями устройства нескольких платформ.</p>
56
<p>Такой подход может сильно экономить время разработчика, так как не приходится реализовывать одну и ту же логику работы для каждой платформы в отдельности.</p>
56
<p>Такой подход может сильно экономить время разработчика, так как не приходится реализовывать одну и ту же логику работы для каждой платформы в отдельности.</p>
57
<p>За удобство приходится платить. У кросс-платформенной разработки есть минусы:</p>
57
<p>За удобство приходится платить. У кросс-платформенной разработки есть минусы:</p>
58
<ul><li>Приложения могут работать медленнее, чем нативные.</li>
58
<ul><li>Приложения могут работать медленнее, чем нативные.</li>
59
<li>Поддерживаются не все возможности нативных библиотек.</li>
59
<li>Поддерживаются не все возможности нативных библиотек.</li>
60
<li>Есть ограничения на UI.</li>
60
<li>Есть ограничения на UI.</li>
61
</ul><p>Нативные приложения - это приложения, разработанные для конкретной мобильной платформы с использованием родного для неё способа разработки.</p>
61
</ul><p>Нативные приложения - это приложения, разработанные для конкретной мобильной платформы с использованием родного для неё способа разработки.</p>
62
<p>Нативные программисты - те, кто умеет такие приложения делать.</p>
62
<p>Нативные программисты - те, кто умеет такие приложения делать.</p>
63
<p>Альтернатива нативной разработке - кросс-платформенная. Она позволяет увеличить скорость работы, но имеет и свои ограничения.</p>
63
<p>Альтернатива нативной разработке - кросс-платформенная. Она позволяет увеличить скорость работы, но имеет и свои ограничения.</p>
64
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
64
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>