Значок иконка: Бесплатные иконки — Tilda Publishing

02.02.1980 Facebook Twitter LinkedIn Google+ Разное

Содержание

Красивые значки для инфографики [101 иконка и советы Visme]

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

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

Чтобы помочь вам продуктивнее использовать иконки в вашей инфографике, мы написали 8 полезных советов от Visme. Что же нужно сделать:

  1. Визаулизировать текст.
  2. Оформить диаграммы и графики.
  3. Создать списки.
  4. Добавить бэкграунд.
  5. Оформить заголовок.
  6. Придерживайтесь единого стиля.
  7. Подобрать цветовую палитру.
  8. Использовать иконки нужного размера.

Давайте узнаем больше!

 

1 Визаулизировать текст.

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

Взгляните на пример ниже.

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

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

 

2 Оформить диаграммы и графики.

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

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

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

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

 

3 Создать списки.

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

Вот пример того, как это может выглядеть на практике.

Часто инфографика носит исключительно информативный характер и лучше всего работает в виде списка.

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

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

 

4 Добавить бэкграунд.

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

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

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

shadow effect. Использовать подобные иконки для презентаций или на персональном сайте одинаково эффективно.

Вы можете выбрать шаблон инфографики, который мы рассмотрели выше, но можно пойти дальше. У нас для вас много идей! Например, вы можете выбрать Grid Option (Сетку), доступную на панели инструментов Visme. Она поможет настроить ваш дизайн инфографики и сохранять одинаковые интервалы в нем.

 

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

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

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

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

 

6 Придерживайтесь единого стиля.

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

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

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

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

Visme предлагает четыре различных стиля: контурные значки, плоские изображения, цветные иконки и isometric (изометрические изображения). Это означает, что если вы выберете цветной значок для своего первого инфографического блока, то остальные мы рекомендуем использовать в том же стиле.

 

7 Подберите свою цветовую палитру.

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

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

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

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

 

8 Использовать иконки нужного размера.

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

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

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

Посмотрите на этот шаблон, чтобы понять о чем речь.

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

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

 

Начните использовать иконки для инфографики в своих проектах уже сегодня.

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

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

Как изменить иконку файла или папки

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

Что такое иконка


Просматривая список файлов и папок на мониторе компьютера, кроме названий этих файлов и папок мы видим еще и их
значки, в разговорной речи чаще называемые иконками, которые отличаются друг от друга и предоставляют возможность пользователю быстро сформировать визуальное представление о структуре файлов компьютера. Благодаря иконкам пользователю очень удобно отличать файлы одних типов от других, щелкать по ним мышкой, осуществляя разнообразные операции наглядным способом. Иконка (значок) – это небольшое прямоугольное изображение, сохраненное в самостоятельном отдельном файле, находящемся где-то на запоминающем устройстве компьютера. Компьютер, формируя на мониторе визуальное представление списка всех файлов, подставляет каждому файлу и папке подходящую иконку. То есть, можно сказать, что в операционную систему компьютера заложена некая система взаимосвязей, в которой каждому файлу соответствует какая-то иконка, которая отображается на мониторе как значок этого файла, но на самом деле хранящаяся от него отдельно.
При этом, пользователь может внести изменения в эти взаимосвязи и заставить компьютер подставлять какому-то файлу или папке вместо «стандартной» любую другую иконку.Особенностью указанной системы взаимосвязей является то, что в ней любая иконка соответствует не каждому отдельному файлу, а всем файлам этого вида. Соответственно, поменять иконку можно не для какого-то конкретного файла, а для всех файлов этого вида одновременно. Ситуация с папками и ярлыками обстоит иначе. Иконки присваиваются каждой конкретной папке или ярлыку и могут изменяться независимо от иконок других папок и ярлыков. Но об этом немного позже. Сначала давайте более подробно рассмотрим вопрос о том, что из себя представляет файл иконки и как его сделать самостоятельно.Файл иконки для операционной системы Windows имеет расширение .ico (о том, что такое расширение файла, читайте здесь) и содержит небольшое квадратное изображение, размер которого, как правило, не превышает 48 на 48 точек (пикселов). Наиболее распространенными размерами иконок для Windows являются 16Х16, 32Х32 и 48Х48 пикселов. Иконки, превышающие 48Х48 пикселов, могут не отображаться или неправильно отображаться в старых версиях Windows. Файл иконки для Windows, разработанный на профессиональном уровне, может содержать одновременно несколько изображений (до 9), которые, как правило, отличаются между собой только размером. Например, один файл иконки может содержать одно и то же изображение в форматах 16Х16, 32Х32 и 48Х48. Зачем это нужно? Дело в том, что при автоматическом уменьшении изображения оно теряет резкость, а при увеличении — детализацию. И если файл иконки содержит только одну картинку, она может терять свою привлекательность в некоторых режимах работы компьютера, требующих изменения размера отображаемого на мониторе значка. Если же картинок в файле иконки будет несколько, компьютер автоматически использует самую подходящую из них, благодаря чему красивый внешний вид файла сохранится при любых обстоятельствах. Кроме файлов .ICO, иконки в операционной системе Windows хранятся и в файлах некоторых других типов (программы, специальные библиотеки), но их создание — удел разработчиков программного обеспечения и пользователей с высоким уровнем подготовки.

Как создать собственную уникальную иконку


Файлы иконок для Windows создаются при помощи специальных программ. В качестве картинки можно использовать любое понравившееся изображение (например, фотографию любимой кошки). Программ для создания иконок существует много. Одной из них является Easy Picture2Icon. Это не самая функциональная программа, зато она является бесплатной, простой в использовании, занимает мало дискового пространства и позволяет создавать иконки размером 16Х16, 32Х32 и 48Х48 из фотографий форматов JPEG, GIF, PNG, BMP. После загрузки установите программу и запустите ее. В окне программы сначала необходимо открыть фотографию, из которой будет создаваться иконка. Для этого нужно нажать кнопку «OpenPicture» и указать на эту фотографию в открывшемся проводнике (см. изображение, для увеличения нажмите на него мышкой).

В окне программы Easy Picture2Icon под изображением можно выбрать один из 3 вариантов его подгонки под «квадратный» формат:
— Compress – сжатие фотографии по более длинному краю до размеров более короткого;
— CutEdges – обрезка фотографии по более длинному краю до размеров более короткого;
— Fit – оставить как есть, вставив поля.Справа от изображения можно выбрать от 1 до 3 форматов иконок (16Х16, 32Х32, 48Х48), которые будут созданы из исходного изображения и помещены в создаваемый файл .ico. Для создания файла иконки нужно нажать кнопку «Save Icon», после чего необходимо указать, куда и под каким названием этот файл следует сохранить.

Как изменить иконку папки или ярлыка


Для того чтобы поменять стандартную иконку папки или ярлыка на другую, необходимо щелкнуть по нему правой кнопкой мышки, в открывшемся контекстном меню выбрать пункт «Свойства». Затем:

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

Для ярлыка: в открывшемся окне перейти на вкладку «Ярлык», нажать на кнопку «Сменить значок», в окне «Искать значки в следующем файле» указать необходимый файл иконки и подтвердить внесение изменений.


Как изменить иконку файла


Как уже было сказано выше, в операционной системе Windows поменять иконку можно не для какого-то конкретного файла, а для всех файлов определенного типа одновременно. Чтобы поменять значок для определенного типа файлов в Windows XP: 1. Открыть любую папку или раздел, один раз щелкнуть левой кнопкой мышки по пункту «Сервис», находящемуся в верхней части открытой папки, и в появившемся списке выбрать пункт «Свойства папки» (см. рисунок). 2. В открывшемся окне перейти на вкладку «Типы файлов» и в окошке с названием «Зарегистрированные типы файлов» выделить (одним щелчком мышки) тип файлов, для которого необходимо сменить значок, затем нажать кнопку «Дополнительно», находящуюся под этим окошком (см. изображение). 3. Откроется еще одно окно с названием «Изменение свойств типа файлов», в котором нужно нажать кнопку «Сменить значок…» и в проводнике указать на новый файл иконки, которую необходимо присвоить этому типу файлов, затем подтвердить внесение изменений.Чтобы поменять значок для определенного типа файлов в Windows Vista / 7 / 8 / 10 понадобится специальная утилита, поскольку необходимые штатные средства в этих версиях Windows отсутствуют. Утилита называется Default Programs Editor. Она представляет собой единый файл и не требует установки. Просто скачайте ее и запустите двойным щелчком левой кнопки мышки. В окне утилиты необходимо нажать «File Type Setings», а на следующем этапе — «Icon». Появится окно со списком типов файлов. В нем необходимо выделить тип файлов, для которого нужно поменять иконку (одним щелчком левой кнопки мышки), после чего нажать кнопку «Next» (см. изображение). На следующем этапе нужно нажать кнопку «Browse…», в открывшемся проводнике указать на новый файл иконки и подтвердить внесение изменений.

Работа с иконками | WebReference

Иконки выводятся через псевдокласс ::before, поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент <i>, но можно использовать и любой другой строчный элемент, например: <b>, <span> и др.

Для <i> указывается два основных класса — fa и fa-icon, где вместо icon пишется имя иконки. Все имена доступны на этой странице.

http://fortawesome.github.io/Font-Awesome/icons

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

Рис. 1. Иконки для видеоплеера

Чтобы добавить иконку с именем play напишем следующий код:

<i></i>

Сам элемент <i> пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.

Размеры иконок

Размер любой иконки из набора мы можем изменить с помощью свойства font-size, переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу <i> как показано в примере 1.

Пример 1. Размер иконок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
 </head>
 <body>
  <p><i></i> Исходный размер</p>
  <p><i></i> fa-lg</p>
  <p><i></i> fa-2x</p>
  <p><i></i> fa-3x</p>
  <p><i></i> fa-4x</p>
  <p><i></i> fa-5x</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Размеры иконок

Цвета

Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color, background, text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.

Пример 2. Оформление иконок через стили

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-bug { color: #f15a22; }
   .fa-book {
    background: #000; /* Чёрный цвет фона */
    padding: 2px 5px; /* Поля */
    border-radius: 3px; /* Радиус скругления */
   }
   .fa-car {
    color: #96c13c; /* Цвет иконки */
    text-shadow: 2px 2px 0 #333; /* Резкая тень под иконкой */
   }
   .fa-comment {
    color: #f7941e; /* Цвет иконки */
    text-shadow: 0 0 6px #000; /* Размытая тень */
   }
  </style>
 </head>
 <body>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Цветные иконки

Font Awesome вводит специальный класс fa-inverse, изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.

Поворот иконок

Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:

  • fa-rotate-90 — поворот на 90º по часовой стрелке;
  • fa-rotate-180 — поворот на 180º;
  • fa-rotate-270 — поворот на 270º;
  • fa-flip-horizontal — отражение по горизонтали;
  • fa-flip-vertical — отражение по вертикали.

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

Пример 3. Поворот и отражение иконок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome. min.css">
 </head>
 <body>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
 </body>
</html>

Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.

Рис. 4. Преобразования иконки

Анимация

Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.

<p><i></i></p>

Объединение иконок

Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент <div> с классом fa-stack, а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x, в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.

<div>
  <i></i>
  <i></i>
</div>

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

Пример 4. Комбинация иконок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-ban { 
    color: #d51920; /* Цвет */
    opacity: 0.6; /* Полупрозрачность */
   }
  </style>
 </head>
 <body>
  <div>
   <i></i>
   <i></i>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 5.

Рис. 5. Комбинация иконок

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Что означают иконки в мобильных приложениях Ajax

Обновлено

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

Связь с сервером Ajax Cloud

Состояние соединения с сервером Ajax Cloud в приложении Ajax на Android и на iOS отображается по-разному.

В приложениях Ajax на Android состояние связи с Ajax Cloud отображается иконкой в правом верхнем углу. Есть два вида иконок — красная и синяя иконка монитора. Когда соединение стабильно, иконка не отображается.

Красная иконка монитора отображается, если приложение не может подключиться к серверу Ajax Cloud. Как только приложение подключится к серверу — цвет иконки изменится на синий, после чего иконка пропадёт. Если красная иконка горит более 30 секунд — проверьте подключение к интернету на вашем смартфоне.

Если приложение Ajax на iOS не может связаться с Ajax Cloud, под меню выбора хаба отобразится красная строка с надписью Нет интернет соединения. Как только приложение установит связь с сервером, красная строка исчезнет. Если красная строка отображается более 30 секунд — проверьте подключение к интернету на вашем смартфоне.

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

Таймер постановки под охрану в два этапа

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

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

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

Зелёная иконка таймера отображается, когда пользователь включает охрану с помощью клавиатуры или брелока SpaceControl. Система станет под охрану после восстановления завершающего датчика. Например, после закрытия входной двери. Время таймера и завершающий датчик указываются в PRO приложениях Ajax.

Жёлтая иконка таймера означает незавершённую постановку под охрану. Например, если пользователь не успел закрыть входную дверь. Пользователи и охранная компания получают соответствующие уведомления, если система переходит в состояние незавершённой постановки. В этом состоянии система не регистрирует тревоги.

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

Зелёная иконка таймера также отображается, если таймер стабилизации датчика открытия включён в настройках PRO приложения. Длительность таймера — от 0 до 5 секунд (зависит от настроек). Таймер запускается сразу после восстановления завершающего датчика при постановке под охрану в два этапа. Например, при закрытии входной двери.

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

Индикация тревог пожарных датчиков

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

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

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

Индикация задержки синхронной тревоги пожарных датчиков

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

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

Если пожарная тревога будет сброшена или датчик больше не будет регистрировать пожар, иконки исчезнут.

Индикация восстановления системы после тревог

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

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

Индикация доступа к настройкам системы в PRO приложениях

В PRO приложениях Ajax можно предоставить как временный, так и постоянный доступ к настройкам системы. Уровень доступа отображается иконкой замка в правом верхнем углу приложения. Если иконка замка отсутствует — пользователь имеет постоянный доступ к настройкам хаба.

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

Иконка открытого замка сообщает о том, что для PRO пользователя открыт временный доступ к настройкам системы (максимум — 8 часов). По нажатию на иконку замка можно продлить время или запросить постоянные права. При получении постоянных прав доступа, иконка исчезает.

Индикация нескольких предупреждений

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

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

Индикация оповещений об открытии

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

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

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

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

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

Если оповещения об открытии не настроены, иконка колокольчика не отображается.

Поддержка адаптивных иконок в PWA благодаря маскируемым иконкам

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

— Обновлено

Appears in: Прогрессивные веб-приложения

Что такое маскируемые иконки? #

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

Прозрачные иконки PWA отображаются на Android внутри белых кругов

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

Маскируемые иконки покрывают круг целиком

Подходят ли мои нынешние иконки? #

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

Различные формы иконок в зависимости от платформ

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

Вы можете проверить, какие части ваших иконок попадают в безопасную зону, с помощью Chrome DevTools. Открыв прогрессивное веб-приложение, запустите DevTools и перейдите на панель «Приложение». В разделе «Иконки» вы можете выбрать «Показывать только минимальную безопасную область для маскируемых иконок». Ваши иконки будут обрезаны так, чтобы была видна только безопасная область. Если ваш логотип виден в этой безопасной зоне, все готово.

Панель приложений

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

Как начать пользоваться маскируемыми иконками? #

Если вы хотите создать маскируемую иконку на основе существующей иконки, вы можете использовать редактор Maskable.app. Загрузите свою иконку, настройте цвет и размер, затем экспортируйте изображение.

Создание иконок в редакторе Maskable. app

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

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

Маскируемые значки должны использовать другое назначение: "maskable". Это значение указывает, что изображение предназначено для использования с масками иконок, что позволяет вам регулировать результат. Таким образом, у ваших иконок не будет белого фона. Вы также можете указать несколько назначений, разделенных пробелами (например, "any maskable"), если хотите, чтобы маскируемая иконка использовалась без маски на других устройствах.

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

{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- Новое значение свойства `"maskable"`
},
…
],
…
}

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

Благодарности #

Статью рецензировал Джо Медли.

Последнее обновление: — Улучшить статью

Забытые корни популярных иконок / Хабр

Популярная шутка утверждает, что наши дети воспримут 3,5-дюймовую дискету как распечатанный на 3D-принтере значок сохранения. Действительно, растёт поколение, не знающее объекта, с которого срисовали эту пиктограмму.

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

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

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

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

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


Контрольная панель немецкого магнитофона AEG FT4, который производился с 1939 по 1941 год. Никаких иконок, только краткие подписи. Фотография Музея магнитной аудиозаписи в Остине, штат Техас

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


Панель управления магнитофона Ampex AG-440, модель 1967 года. Профессиональный сегмент и назначение только для внутреннего рынка США избавляли от необходимости переводить надписи. Фотография сайта Audiofanzine

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


Швейцарский магнитофон Revox F36 1962 года. Возможно, из-за двуязычности страны происхождения производитель задумался нанести на корпус графические символы, а не надписи текстом. Фотография сайта Reverb

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

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

Попытки есть. Несколько сайтов ошибочно утверждают, что иконки придумал несуществующий шведский дизайнер Филип Ульссон (Philip Olsson) во время стажировки в Японии по окончании его обучения в Королевском технологическом институте. На деле это обрывок информации из «Википедии», который в 2012 году добавил викивандал под именем Phlopydisk. Судя по его аккаунтам в Сети, Филип зачем-то вставил своё имя в статью.

Треугольник воспроизведения указывает направо. Туда же движется лента при проигрывании звука. Если речь идёт про катушечный магнитофон с автореверсом, то кнопок воспроизведения иногда две. На магнитной ленте в этом случае 2 (моно) или 4 (стерео) дорожки. В дизайне укоренился лишь один вариант кнопки проигрывания: указывающая слева направо.


Продвинутый «бобинник» Pioneer RT-909 продавался уже в закат эпохи ленты, с 1978 года. Фотография Walkman Archive

Кнопка паузы похожа на символ цезуры «||», который ставят в тексте для указания паузы. Также она напоминает символ り — последний в японском слове 句切り (кугири), означающем «место для отдыха» или «знак пунктуации».

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

Цвет кружка кнопки записи был продиктован традицией: красной индикацией обозначали прямой эфир.


Кнопки управления Grundig TK46, магнитофон производили с 1962 по 1964 год. Уже здесь используется красный кружок, хотя в остальном корпус обильно испещрён английскими глаголами. Модель для рынка Германии производилась с надписями на немецком. Фотография Relics & Rarities

Символы из стандарта IEC 417 (также известен как IEC 60417:1973) постепенно распространились по всему миру. На это ушло не одно десятилетие, и часто рядом соседствовали значки и буквы. Но простота значков победила.

А нарисовать интуитивные пиктограммы не так-то просто. В том же документе IEC 417 у привычных треугольников, квадрата и кружка есть аналог, который изображает действия с лентой и сами катушки. К этому аналогу прибегала, к примеру, советская техника: вместо значка 5107B на кнопке воспроизведения стоял похожий на очки 5096, вместо двух паралелльных вертикальных полосок 5111B — магическая руна 5111A и так далее.


Советский кассетный магнитофон «Квазар-303» выпускался с 1985 года, когда на Западе уже устоялись простые треугольники, квадраты и круги для пиктограмм. Фотография «Виртуального музея отечественной радиотехники XX века»

Символом ⌘ в macOS обозначают клавишу Command. Как и для многих других особенностей интерфейса Apple, история этого значка

восходит

к дизайнеру Сьюзен Кэр.

В августе 1983 года команда разработки программного обеспечения Apple Macintosh заметила, что нужна специальная клавиша для вызова команд из строки меню. Разработчики решили поставить иконку компании — небольшое яблочко. Так уже поступили с клавиатурой Lisa.


Клавиатура компьютера Apple Lisa. Изображение из архива Bitsavers

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

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

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

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

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

Квадрат с петлями в разрешении 16×16 получил одобрение всего отдела. Спустя 37 лет на каждом «Маке» до сих пор есть языческий символ, который в позапрошлом тысячелетии рисовали для отпугивания злых духов.


Клавиатура Apple M0110 от оригинального Macintosh. Фотография Deksthority

Сам Джобс покинул Apple в 1985 году и основал собственную компанию NeXT Computer. На клавиатурах NeXT командная клавиша помечена зелёной надписью Command.

Уже в 1986 году в Apple IIGS на клавишу рядом к символу достопримечательности добавили логотип компании. Так сделали для сохранения совместимости с предыдущими поколениями Apple II. В 2007 году логотип компании вновь исчез. На тот момент NeXT уже как десять лет вошла в состав Apple, а Джобс вновь влиял на любые процессы.

Другой символ протонордической культуры, который жёстко обосновался на наших устройствах — это Bluetooth. Когда-то на сайте протокола даже была специальная страница, объяснявшая выбор имени и символики.

Составная руна в логотипе стандарта передачи данных по беспроводной связи комбинирует символ младшего футарка хагалаз («ᚼ») и беркану («ᛒ»). Вместе они образуют инициалы HB [Harald Blåtand] короля Дании и Норвегии Харальда I Гормссона «Синезубого», в честь которого и назвали стандарт. Как и связывающий устройства враждующих производителей протокол Bluetooth, этот правитель X века объединил соперничающие княжества Скандинавии.

А вот прозвище «Синезубый» Харальдс получил, вероятно, не за синие, а потемневшие зубы. Но логотип Bluetooth толкует цвет буквально.

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

При всей новизне требований бума четырёхдюймовых смартфонов символ родился куда раньше, чем Джобс показал iPhone журналистам в Купертино. Как и в случае с оконными интерфейсами, иконка-гамбургер родилась в Xerox на заре персональных компьютеров.

Автор трёх полосок — Норм Кокс, один из разработчиков первого в мире графического интерфейса Xerox Star. Как рассказывает создатель элемента, в своей работе он руководствовался ограничениями дисплеев. Требовалась хорошо различимая и запоминающаяся пиктограмма, которая будет имитировать вид открываемого списка элементов. А в квадрате 16×16 пикселей с градациями серого особо не разгуляться.


Скриншот из видеоролика. Видео смонтировано в 1990 году, но дата указывает на внутреннюю демонстрацию Xerox 1981 года. Слово «гамбургер» не звучит: элемент называют «кнопкой меню»

Как признаётся Кокс, один из самых незначительных и слабо обдуманных элементов системы Star получил наибольшее наследие. На эту кнопку даже хотели поставить указывающую вниз стрелку, значок «+» или «…» — подошёл бы любой символ, означавшие «разное», «дополнительное».

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

Отследить дальнейшее распространение иконки несложно. Гамбургер появился на самих смартфонах 17 июня 2009 года в приложении голосовых заметок в iOS.

Возможный кандидат среди сторонних приложений — Tweetie, первый клиент Twitter руки известного разработчика iOS Лорена Брихтера. Tweetie вышел в 2008 году, и на тот момент Брихтер работал в Apple

Поиски гамбургера шли по пути упрощения. Facebook в 2008 году добавила иконку с сеткой квадратиков 2×3, а через год её поменяла на 3×3. В 2010 году в интерфейсе приложения девять квадратиков сменили на три полоски.


Интерфейс приложения Facebook для iOS, 2008 год

Растущий темп современности стирает историю не только у изобретения 40-летней давности. В веб-интерфейсах нет стандартизированной иконки расшарки контента, хотя кандидаты находятся. Заметное распространение получили три точки, соединённые линиями, будто иллюстрирующие граф.

Её создатель — веб-разработчик Алекс Кинг, создатель плагина ShareThis для WordPress. В ноябре 2006 года Кинг задался вопросом, нужна ли дополнению специальная иконка. 4 декабря 2006 года веб-разработчик публикует первый вариант, который затем лишь незначительно модифицирует — утолщает «рёбра графа», чтобы их было лучше видно в маленьком размере.

Кинг удачно предугадал необходимость в новом символе. К концу 2006 года Алекс открыл веб-сайт Share Icon Project, в котором призывал пользоваться этим логотипом для указания действия расшарки, и выложил архив с изображениями. Алекс объявил, что лицензирует иконку сразу под 4 свободными лицензиями: GPL, LGPL, BSD и Creative Commons Attribution 2.5.

Пиктограмма получила распространение: меньше чем через год ей начал пользоваться Google в своём интерфейсе. В сентябре 2007 года Алекс Кинг объявил, что продаёт логотипы ShareThis одноимённой компании виджетов соцсетей.

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

Без истории развития стандарта логотип Ethernet понять тяжело: это какие-то квадратики, которые почему-то общаются по одному кабелю. Реальная витая пара идёт от устройства к устройству.


Порт Ethernet и его логотип

Но всё встанет на свои места, если вспомнить, что в 10BASE5, первом стандарте Ethernet, к общему коаксиальному кабелю «вампирчиками» подключались до 100 узлов.


В логотипе наверняка есть что-то от набросков автора стандарта Ethernet Роберта Меткалфа

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

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

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


На правах рекламы

Эпично!Мощные серверы

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

Как сменить значок (иконку) ярлыка в Windows 10

Иконки были придуманы, чтобы предоставить возможность быстро визуально идентифицировать объект на компьютере. Но иногда значок в Windows 10 оказывается настолько безликим и неинформативным, что пользы в этом мало. Хорошо еще, что операционная система позволяет просто поменять значок. Вот как это можно сделать.

♥ ПО ТЕМЕ: Как найти и отключить расширения Google Chrome, которые тормозят компьютер.

Найдите ярлык, на котором вам необходимо изменить значок. Объект может располагаться прямо на рабочем столе или же к нему надо перейти с помощью «Проводника». Щелкните правой кнопкой мыши по ярлыку и выберите «Свойства».

В окне свойств объекта убедитесь, что вы находитесь на вкладке «Ярлык», а потом нажмите там кнопку «Сменить значок…».

Появится окно изменения значка, в котором присутствует поле со списком значков, доступных к использованию с этим ярлыком. По умолчанию источником иконок выступает системный файл Windows с именем imageres. dll. Если вы хотите использовать значок отличный от предложенных по умолчанию, то можно нажать кнопку «Обзор…» и выбрать либо EXE-файл, либо DLL, либо ICO. На самом деле вы можете использовать в этом качестве любое понравившееся вам изображение, его предварительно надо просто сконвертировать в формат ICO. А после загрузки файла вы увидите в списке новые значки, которые можно использовать для обозначения ярлыка.

Вне зависимости от того, выбрали ли вы один из предложенных по умолчанию элементов или из добавленных, просто нажмите ОК.

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

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

Смотрите также:

Значок PNG Изображения | Векторные и PSD файлы

  • набор значков электронной коммерции 36 значков для веб-сайтов и приложения

    4000 * 4000

  • WhatsApp Icone WhatsApp Logo

    800 * 800

  • правильный значок

    2000 * 2000

  • Набор иконок в социальных сетях

    1200 * 1200

  • 1024 * 1024

  • Черные социальные медиа иконки

    1200 * 1200

  • Набор иконок социальных медиа

    800 * 800

  • Вектор Расположение Icon

    1024 * 1024

    • 0

    1200 * 1200

    1200 * 1200

  • интернет-магазин значок дизайн иллюстрации

    1200 * 1200

  • Набор значков электронной коммерции для интернет-магазина

    4000*4000

  • реалистичный значок материал psd

    1024*1369

  • 90 003 Семья значок набор

    2000 * 2000

  • бумаги

  • бумаги

  • Векторный дизайн вектор

    4167 * 4167

  • загрузки стрелки вектор значок белый прозрачный фон

    1049 * 1049

  • телефонная будка значок круг

    5000 * 5000

  • Вектор блокировки пользователя Icon

    1024 * 1024

  • финансовый бизнес значок значок

    1369 * 3840

  • значок лампочки иконка лампочки маленький свежий значок синий значок

    1369 * 3840

  • Векторная медицинская папка значок

    1024 * 1024

  • UI маленькие значки рисованной ветер

    1024 * 1369

    • 9024 * 1369

  • значок телефона в твердом круге

    3000 * 3000

  • красная кнопка подписки на канал с лайком и комментарием D Share Icon

    1200 * 1200

    • 9000 * 1200

    1200 * 1200

  • INSTAGRAM 3D Значок сердца

    • 1200 * 1200

  • Расположение значок в плоский

    1200 * 1200

  • Live Streaming Icons Red Символы и кнопки

    1200 * 1200

  • Красная карта Местоположение Расположение Icon Element

    1200 * 1200

  • Новые

    Куча книг 3D Знак Образование и Студенческая Концепция

    4040 * 4040

    • 9040

  • Красное сердце значок

    1200*1200

  • набор информационных иконок различных стилей

    1200*1200

  • черно-белый значок визитная карточка контактная информация

    4267 * 5742

  • INSTAGRAM Социальные медиа значок пользователей пользовательские истории

    • 1200 * 1200

  • Youtube Подписаться кнопка с такими же колоколами

    2000 * 2000

  • NEW

    Куча книг 3D значок Образование и студент Концепция

    2630 * 2630

  • Вызов телефона Glyph Icone

    3333 * 3333

  • Email Icon

    3000 * 3000

    • 9000 * 3000

  • Иконка

    2400 * 2400

    • 4167 * 4167

  • Зеленый флажка значок значок дизайн шаблона вектор

    2000 * 2000

  • красные градиентные карты значок значок вектора

    5000*5000

  • значок музыкального плеера png

    3264*3264 90 004

  • значок социальных медиа значок набор

    2084 * 2084

    • * 2084

  • New

    без войны иконы Остановить вооруженный конфликт военный агрессия и насилие

    1200 * 1200

  • зеленый правильный значок

    2000 * 2000

  • значок запрещены

    2500 * 2500

  • 3D например, Instagram Icon 02

    2000 * 2000

  • Вектор правой стрелки значок

    1024 * 1024

  • Свяжитесь с нами Icons Простые плоские векторные иконки Набор на белом фоне

    8334 * 8334

  • 1200 * 1200

    • 1200 * 1200

  • Tik Tok Tok Enter Interface в социальных сетях приложение Tiktok и видео иконки

    1200 * 1200

  • 3D например, Instagram icon

    2000*2000

  • NEW

    открытые книги 3d icon образование и студенческая концепция 9 0004

    4000 * 4000

  • телефона

    3000 * 3000

  • роскошные золотые социальные медиа-логотипы иконы

    1500 * 1500

  • телефонный глиф значок вектор

    3333 * 3333

  • Live Поток значок 3d визуализация спереди 40004

    2000 * 2000

  • звезды Векторный Icon

    1024 * 1024

  • цена значок цен на illust Clipart

    3000 * 3000

    • 9000 * 3000

  • значок телефона с квадратной черной рамкой

    1200 * 1200

  • Расположение значок на карте

    6250 * 6250

  • 3d Как сердечное значок

    5000 * 5000

    • 5000 * 5000

  • 3D значок ракеты для запуска бизнес и биткойны Реклама

    4000 * 4000

  • сертификат награда круглый значок черное золото бизнес граница

    1200 * 1200

  • подписка png кнопка красный wi Значок колокола

    4000 * 4000

    4000 * 4000

  • без ввода Запретный круг и символ линии

    1200 * 1200

  • Христианство Иисус Cross Черная линия значок вектор

    3000 * 3000

  • ценник значок дизайн шаблона

    4167*4167

  • маркетинг в социальных сетях вирусные ммс изометрические иконки 1200

    • Iconify

    Более 100 наборов иконок, одна библиотека.


    Более 100 000 векторных иконок с открытым исходным кодом.

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

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

    SVG-фреймворк Применение:

    <скрипт src="https://code.iconify.design/2/2.1.2/iconify.min.js">

    Реагировать Применение:

    импортировать { Icon } из ‘@iconify/react’;

    Стройный Применение:

    импортировать иконку из ‘@iconify/svelte’;

    По умолчанию, Iconify предлагает более 100 000 иконок из более чем 100 наборы иконок с открытым исходным кодом.

    Все иконки проверяются, очищаются, оптимизируются и регулярно обновлено.

    Вы можете использовать Iconify со своими собственными значками или со значком премиум-класса. наборы тоже.

    Данные для всех значков с открытым исходным кодом хранятся в простом для использования формате JSON и может быть получен из:

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

    Для разработчиков Iconify предлагает:

    Iconify — это проект с открытым исходным кодом.

    Инфраструктура Iconify SVG имеет двойную лицензию Лицензия Апач 2.0 а также Лицензия GPL 2.0. Вы можете выбрать по своему усмотрению одну из вышеперечисленных лицензий.

    Другие компоненты и инструменты значков лицензируются по лицензия MIT.

    Лицензии Apache 2.0 и MIT разрешают практически все, в том числе коммерческое использование.

    Лицензия GPL 2.0 позволяет использовать более строгие популярные программы с открытым исходным кодом. проекты.

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

    Просматривать все 100к+ иконок Документация

    Значок приложения — Значки и изображения — iOS — Руководство по человеческому интерфейсу

    Значок приложения

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

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

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

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

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

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

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

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

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

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

    Сохраняйте углы значков прямыми. Система применяет маску, которая автоматически скругляет углы значков.

    Атрибуты значка приложения

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

    Атрибут Значение
    Формат PNG
    Цветовое пространство Дисплей P3 (широкий цветовой охват), sRGB (цветной) или Gray Gamma 2. 2 (оттенки серого).См. Управление цветом.
    Слои Плоский без прозрачности
    Разрешение Варьируется. См. Размер и разрешение изображения.
    Форма Квадрат без закругленных углов

    Размеры значков приложений

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

    Устройство или контекст Размер значка
    Айфон 60×60 пт (180×180 пикселей при 3x)
    60×60 пт (120×120 пикселей при 2x)
    iPad Pro 83,5×83,5 пт (167×167 пикселей при 2x)
    iPad, iPad mini 76×76 точек (152×152 пикселей при 2x)
    Магазин приложений 1024×1024 точек (1024×1024 пикселей при 1x)

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

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

    Spotlight, значки настроек и уведомлений

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

    Устройство Размер значка Spotlight
    Айфон 40×40 точек (120×120 пикселей при 3x)
    40×40 точек (80×80 пикселей при 2x)
    iPad Pro, iPad, iPad mini 40×40 точек (80×80 пикселей при 2x)
    Устройство Размер значка настроек
    Айфон 29×29 точек (87×87 пикселей при 3x)
    29×29 точек (58×58 пикселей при 2x)
    iPad Pro, iPad, iPad mini 29×29 точек (58×58 пикселей при 2x)
    Устройство Размер значка уведомления
    Айфон 38×38 точек (114×114 пикселей при 3x)
    38×38 точек (76×76 пикселей при 2x)
    iPad Pro, iPad, iPad mini 38×38 точек (76×76 пикселей при 2x)

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

    СОВЕТ Если ваше приложение создает пользовательские документы, вам не нужно создавать значки документов, поскольку iOS использует значок вашего приложения для автоматического создания значков документов.

    Выбираемые пользователем значки приложений

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

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

    Для получения рекомендаций для разработчиков см. метод setAlternateIconName в UIApplication.

    Учебник по иконкам

    Как добавить значки

    Чтобы вставить значок, добавьте имя класса значка в любой встроенный элемент HTML.

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

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

    Font Awesome 5 Icons

    Чтобы использовать значки Free Font Awesome 5, перейдите на fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.

    Подробнее о том, как начать работу с Font Awesome, читайте в нашем Шрифт Awesome 5 глава.

    Примечание: Загрузка и установка не требуются!

    Пример




    ваш код .js» crossorigin=»anonymous»>






    Попробуй сам »

    Font Awesome 4 иконки

    Чтобы использовать значки Font Awesome 4, добавьте следующую строку в раздел вашей HTML-страницы:

    Примечание: Загрузка и установка не требуются!

    Пример










    Попробуй сам »

    Bootstrap 3 иконки

    Чтобы использовать глификоны Bootstrap 3, добавьте следующую строку в раздел вашей HTML-страницы:

    Примечание: Загрузка и установка не требуются!

    Пример










    Попробуй сам »

    Примечание. Глификоны не поддерживаются в Bootstrap 4.

    Для получения дополнительной информации о Bootstrap 3 и Glyphicons посетите наш учебник по Bootstrap 3.

    Иконки Google

    Чтобы использовать значки Google, добавьте следующую строку в раздел вашей HTML-страницы:

    Примечание: Загрузка и установка не требуются!

    Пример





    облако
    избранное
    приложение
    компьютер
    трафик


    Попробуй сам »

    Полный список ВСЕХ значков (шрифт awesome, bootstrap и google) см. Справочник по значкам.



    Скачать бесплатные иконки — более 2676 иконок на выбор Iconscout

    За последние несколько лет Iconscout превратился в средство поиска иконок для коммерческих дизайнеров. В наши дни трудно найти бесплатные вещи, но из-за постоянно растущей экономики и устрашающего перехвата технологий в Интернете все еще доступно многое. В такой потребительской культуре бесплатные иконки, как и любой другой бесплатный продукт или услуга, являются инструментом, обозначающим свободу.Ассоциация между словами и их значением для представления в виде логотипа или значка или даже иллюстрации не может не вызывать восхищения. Учебники и видеоролики, созданные некоторыми дизайнерами Iconscout, открывают нам мир, исходящий из огромной умственной силы и сосредоточенности. Плоские значки, созданные сообществом для некоторых известных приложений и социальных сетей, таких как Facebook, Twitter, Instagram, Pinterest и т. д., описывают такие неслыханные истории из далекого будущего, и все же они доступны бесплатно.Бесплатные значки не должны иметь никакой ценности, когда вы загружаете их, но они имеют большое значение, когда они размещены в абстрактном цифровом издании для картины. Бесплатные значки для коммерческого использования позволяют использовать бесплатные векторы для смайликов, логотипов известных брендов, значков коронавируса и многого другого, о чем вы даже не подозреваете. Некоторые из этих бесплатных значков доступны даже без входа в систему или создания учетной записи в Iconscout. Мы поощряем указание авторства, чтобы расширить и правильно отдать должное нашему сообществу дизайнеров, но это зависит от вас. Это одни из лучших бесплатных иконок, доступных в Интернете, а также доступные в редактируемых форматах.В свете недавнего распространения Коронавируса, из-за которого профессионалы теряют работу, мы также рекомендуем загружать бесплатные иконки для резюме и портфолио.

    Twitter Free Icons

    Социальный веб-сайт с микроблогами для получения актуальных новостей и информации по таким темам, как спорт и политика. Платформа создана таким образом, что приносит вам живые комментарии отовсюду и ото всех. Как и в Facebook и других социальных сетях, вы можете публиковать то, что хотите сказать, в виде «твитов».Недавно, 7 ноября 2017 года, компания увеличила ограничение на минимальное количество символов, которыми можно поделиться. Теперь пользователь может поставить 280 символов вместо 140 ранее. Компания с момента своего основания несколько раз меняла логотип. Когда Твиттер был запущен в 2006 году, он начинался с простого текстового логотипа с надписью «Твиттер» синими буквами. Примерно в 2010 году к тексту в качестве логотипа компании была добавлена ​​птица Twitter. В июне 2012 года компания остановилась на логотипе bluebird без текста. Вы можете скачать бесплатные иконки для коммерческого использования для всех платформ социальных сетей, включая Twitter.Эти бесплатные иконки Twitter доступны в нескольких стилях, таких как плоский, цветной, контурный и материальный дизайн. Значки доступны бесплатно и могут быть загружены в редактируемых форматах, таких как AI, PSD, PNG, SVG, base64 и т. д.

    Бесплатные значки Facebook

    когда-либо созданная медиа-платформа. В магазине Play приложение Facebook скачали более 5,4 миллиарда пользователей. Количество итераций для этого бесплатного логотипа Facebook меньше, чем у его аналога в социальных сетях Instagram.Во всех версиях логотипа буква «f» находится внутри синего блока с заостренными краями. Последняя бесплатная иконка доступна в материальном дизайне. Недавнее бесплатное изменение значка в Facebook привело к принятию текстового логотипа для многих его дочерних компаний. На Iconscout вы можете найти более 500 вариантов логотипов Facebook. Эти бесплатные иконки для коммерческого использования доступны в форматах PNG и JPG, а также в векторных форматах, таких как SVG, AI, PSD и ICO.

    Instagram Free Icons

    В октябре 2010 года Instagram был основан как платформа для обмена фотографиями и видео со всем миром.В марте 2016 года старый логотип Instagram — квадратная мгновенная камера с крошечной радугой наверху — был заменен гораздо более ярким и современным дизайном приложения, призванным обеспечить баланс между узнаваемостью и индивидуальностью. Эти современные значки приложений доступны для скачивания в нескольких вариантах. Попробуйте эти социальные значки, персонализировав свои визитные карточки, блоги, статьи или веб-сайт компании. Официальный логотип Instagram доступен в линейной, цветовой, сплошной и плоской цветовой гамме. Логотип социального приложения доступен в прозрачных форматах PNG и JPG, а также в векторных файлах, таких как SVG, AI, PSD и ICO.

    Pinterest бесплатно значок

    Мобильное приложение Pinterest похоже на Instagram, где пользователи могут обмениваться и загружать видео, фотографии, изображения и т. д. Ключевым отличием является то, что в Pinterest пользователи собирают такие элементы, как значки, иллюстрации, фотографии, видео и т. д. , тогда как в Instagram их нет. Это делает Pinterest сообществом кураторов со всего мира. Любой человек, который «прикрепляет» элемент, добавляет его на «Доску для прикрепления», которую он, возможно, создал. Pinterest полон идей, и изучение различных таких досок делает экспедицию исключительной.В Iconscout бесплатные иконки Pinterest для коммерческого использования доступны в нескольких форматах. Вы можете загрузить эти значки в форматах PNG, SVG, Base64 и других подобных форматах.

    Обзор Iconicon Джона Гриндрода – преображение Британии | Книги по искусству и дизайну

    Если название заставляет вас думать, что это будет все о больших, блестящих общественных зданиях забавной формы («иконы»), к которым мы все привыкли примерно с середины 1990-х до конца 00-х годов. , будьте готовы к чему-то более темному, гораздо более яркому и довольно печальному.Несмотря на веселый стиль прозы Гриндрода, изобилующий поп-отсылками и модными отступлениями, он ведет хронику ускоряющегося упадка Великобритании с 1980 года, что выражается в том, что мы строим. Приготовьтесь к головокружительному путешествию, которое начинается с закона Маргарет Тэтчер о праве на покупку, который уничтожил большую часть нового социального жилья, и заканчивается ужасающим адом Гренфелл-Тауэр. Система вышла из-под контроля, все скрестили пальцы и пытались избежать вины.

    По пути мы получили несколько довольно хороших зданий и огромное количество ужасных.Поскольку я зарабатываю на жизнь архитектурой и нахожусь в определенном возрасте, чтение этой книги похоже на то, как вся моя карьера проносится перед глазами. Это все, что я испытал, и множество людей, которых я встретил в режиме реального времени. Многое из этого испытал и Гриндрод (на 15 лет моложе). И все же в данный момент вы не всегда понимаете подводные течения. Почему все делается именно так? Почему возникла эта почти забытая архитектурная одержимость 1980-х и 90-х годов бизнес-парками и супермаркетами за городом? Что заставило нас думать, что архитектурный постмодернизм был либо нормальным, либо неизбежным? К чему был этот белый вертолет в рекламе Barratt Homes?

    С тех пор как в 1950-х годах Иэн Нэрн начал свои все более эмоциональные путешествия по британским городам, различные авторы и телеведущие с надеждой пошли по его стопам, от Иэна Синклера через Джонатана Мидса до Оуэна Хазерли.Все хороши по-своему, но есть одна вещь, которую они, как правило, не делают: опрашивают реальных людей, участвующих в создании наших городов. Вот здесь-то и выигрывает болтливый, слегка уставший от учебы стиль Гриндрода. Он ищет их, берет у них интервью, наслаждается их обществом, строит свою книгу вокруг них.

    Есть несколько громких имен. Майкл Хезелтин, свободно говорящий о годах Тэтчер и Мейджора, является одной из звезд книги, в то время как Майк Дэвис, добродушный седобородый архитектор, напарник покойного Ричарда Роджерса, который всегда одевался полностью в красное и спроектировал Купол Тысячелетия всего за две недели. в 1996 году — другое.Он построил его быстро за 43 миллиона фунтов стерлингов: это были 12 «зон» внутри, включая типично амбициозную Зону разума Захи Хадид, которые стоили больших денег. Я впечатлен тем, что Гриндрод проводит связь между этой образовательной выставкой и так и не построенным «Чудо-миром» — предполагаемым соперником диснеевского «Эпкота» во Флориде — запланированным для бывшего сталелитейного города Корби в 1982 году Дереком Уокером, архитектором, который заложил Милтон Кейнс. «Этот тематический парк основан на идее образовательного развлечения», — пугающе говорилось в его брошюре.

    Я нахожу менее известных собеседников Grindrod более показательными, например, Карлу Пикарди и Сару Фокс, американских менеджеров проектов, которые построили огромный деловой район Кэнэри-Уорф в лондонских Доклендс. «Давайте просто скажем, что если требовались ловкость, тонкость и дипломатичность, то это была Карла, а если нужно было выбить дверь, то это был я», — говорит Фокс.

    Это был разнузданный капитализм: большие налоговые льготы, практически полное отсутствие планового контроля. Наступили годы новых лейбористов, все это было связано с культурным возрождением, финансируемым национальной лотереей и деньгами ЕС.Рассмотрим «Ангела Севера» Энтони Гормли, ранний пример проекта «Миллениум», финансируемого лотереей, в Гейтсхеде, где также были построены Балтийская художественная галерея, комплекс концертного зала Sage, мост через реку Тайн, получивший приз Стерлинга, фабрики высоких технологий. . Большие успехи в целом, но не ключевой части населения – бывшей шахтерской общины.

    Они не хотели такой работы, они не видели, что все это для них, и они отомстили Полу Колларду, бывшему сотруднику ICA, который перепозиционировал постиндустриальный северо-восток в качестве туриста. пункт назначения, с грустью вспоминает здесь.Будь прокляты европейские деньги. «Это было сообщество, которое единодушно проголосовало за Brexit: именно так они давали отпор всему… на самом деле это наша неудача. Мы не нашли способа заставить его работать на них».

    Хью Пирман — архитектурный критик и бывший редактор журнала RIBA. Iconicon: A Journey Around the Landmark Buildings of Contemporary Britain издается Faber (20 фунтов стерлингов). Чтобы поддержать Guardian и Observer, закажите свой экземпляр по телефону guardianbookshop.ком . Может взиматься плата за доставку.

    Адаптивные значки  | Разработчики Android

    Android 8.0 (уровень API 26) представляет адаптивные значки запуска, которые могут отображать различные формы на разных моделях устройств. Например, значок адаптивной панели запуска может отображать круглую форму на одном OEM-устройстве и отобразить сквиркл на другом устройстве. Каждое OEM-устройство предоставляет маску, которая затем система использует для рендеринга всех адаптивных значков одинаковую форму.Адаптивный значки запуска также используются в ярлыках, приложении «Настройки», диалогах обмена, и обзорный экран.

    Рисунок 1. Адаптивные значки поддерживают множество масок, которые варьируются от одной устройство к другому.

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

    Рис. 2. Адаптивные значки определяются с помощью 2 слоев и маски.

    В Android 7.1 (уровень API 25) и более ранних версиях значки панели запуска имели размер 48 х 48 дп. Теперь вы должны изменить размер слоев значков, используя следующие рекомендации:

    • Оба слоя должны иметь размер 108 x 108 dp.
    • Внутренний размер значка размером 72 x 72 dp отображается в окне просмотра с маской.
    • Система резервирует внешние 18 дп с каждой из 4 сторон для создания интересные визуальные эффекты, такие как параллакс или пульсация.

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

    Внимание! OEM-производитель устройства может указать маску, которая может включать радиус то есть всего 33 dp вдоль определенных точек формы.

    Рисунок 3. Адаптивные значки поддерживают различные визуальные эффекты.

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

    Чтобы узнать, как создавать адаптивные значки с помощью Android Studio, см. Создавайте значки приложений с помощью Image Asset Studio.

    Создание адаптивных значков в XML

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

    <приложение
    …
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    …>

    Далее вы должны создать альтернативные ресурсы для рисования в своем приложении для использования с Android 8.0 (уровень API 26) в res/mipmap-anydpi-v26/ic_launcher.xml . Затем вы можете используйте элемент , чтобы определить передний и фоновый слои чертежи для ваших иконок. <передний план> и <фон> оба внутренних элемента поддерживают атрибут android:drawable . 

    <адаптивный значок xmlns:android="http://schemas.android.com/apk/res/android">
    <фон android:drawable="@drawable/ic_launcher_background" />
    <передний план android:drawable="@drawable/ic_launcher_foreground" />

    Вы также можете определить фоновые и передние рисунки как элементы заключив их в <передний план> и <фон> элементов.

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

    • Для статических ярлыков используйте элемент .
    • Для динамических ярлыков вызовите создатьWithAdaptiveBitmap() метод при их создании.

    Для получения дополнительной информации о ярлыках см.

    Comments
    Leave Comment