Иконка статьи: 10 сайтов с качественными и бесплатными иконками — Дизайн на vc.ru

Содержание

10 сайтов с качественными и бесплатными иконками — Дизайн на vc.ru

{«id»:150691,»url»:»https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»title»:»10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami&title=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami&text=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami&text=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.

ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=10\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438&body=https:\/\/vc.ru\/design\/150691-10-saytov-s-kachestvennymi-i-besplatnymi-ikonkami»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

12 119 просмотров

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

Рядом с именем сайта во вкладке браузера

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon. ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

manifest.json позволяет настраивать ряд параметров, среди которых внешний вид иконки, используемой для запуска веб-приложения.

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

{ «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «mobiForge»,

«short_name»: «mobiForge»,

«icons»: [

{

«src»: «/icon-144×144.png»,

«sizes»: «144×144»,

«type»: «image/png»

{

«src»: «/icon-192×192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

Используйте код ниже для ссылки на манифест, который в нашем случае сохранен в корне:

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.

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

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

Какие размеры favicon использовать?

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8. 0 и IE 10 плитку 144×144 можно задать в разметке так:

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

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

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

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

Собираем все вместе

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

Этого незначительного куска разметки должно хватить, чтобы все браузеры были счастливы.

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

Например, прозрачность хорошо работает на Android, но на iOS она превращается в черный цвет. Во многих случаях это неприемлемо.

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

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

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

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «»,

«short_name»: «»,

«icons»: [

{

«src»: «/icon-192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

4. Следующая разметка

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

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

Автор: Ruadhán O’Donoghue

Источник: //mobiforge.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Иконка в строке с URL’ом. | | | Программирование Realcoding.Net

Хотите чтобы ваша собственная иконка нагло светилась в строке с URL’ом. Или в меню «Избранное». Сделать это на самом деле элементарно.

Процедура создания и использования такого изображения довольно проста. Необходимое изображение хранится в файле favicon.ico, который должен находиться в корне вашего сайта. Рекомендуемые параметры изображения: 16х16 пикселей — размеры; 16 цветов. Однако, можно создавать иконку с размерами 32х32 и 48х48 пикселей. В последнем случае IE сам изменит размеры изображения.

После того, как вы создали файл favicon.ico, поместите его в корневой каталог вашего сервера, и на этом работа завершена.

Если вы, по каким-либо причинам не можете разместить данный файл в корне своего сайта, то используйте директиву

<LINK REL="SHORTCUT ICON" href="/your/path/favicon.ico">.

Кроме того, если вы считаете, что пользователь может занести в «Избранное» не только корневой URL вашего сайта, то скопируйте файл favicon. ico во все директории сайта

Установить к себе на сервер такую иконку достаточно просто — необходимо подготовить рисунок размером 16×16 (32×32) и записать его в формате .ICO в корневую директорию своего сайта с именем favicon.ico.

К тому же, у провайдера должен быть прописан mime type для типа файлов ICO. Проверить несложно: надо в браузере попытаться загрузить файлик — например, yandex.ru/favicon.ico — если грузится текст — значит, mime-type для .ico не прописан.

В принципе, можно не напрягать провайдера и самому прописать mime-type в файле .htaccess, если вам он вам доступен для изменения. Формат примерно следующий:

	AddType image/ICO ICO (регистр важен).

Файлик сделали, mime type даже прописали… а все равно ничего не видим?

Вот, почему-то, у меня получается все увидеть лишь тогда, когда я сделаю кнопочку в панельке быстрых ссылок. После этого ее можно снести, все теперь будет грузиться. Самое интересно, что при указании любого файла (даже из корня) иконка не появляется, работает фишка видимо, лишь когда по HTTP уходит запрос именно на «/», хотя, конечно, сервер возвратит потом реальный адрес странички.

Может быть, в MSIE 5.5 все работает нормально. но в 5.0 так и есть, а в 4-м вообще, эта фишка не пашет. В NN, разумеется, тем более.

Принципы «плоского» или flat дизайна иконок от Google — PowerBranding.ru

Продолжаем рассказывать о новом ярком тренде в дизайне: о «flat» дизайне.

Сегодня мы рассмотрим подходы к созданию иконок в стиле «flat» от компании, стоявшей у истоков данного тренда.

Принципы создания flat иконок, описанные в данной статье не стоит воспринимать как истинные законы «плоского» дизайна, но из подхода, используемого Google при создании flat icons, можно почерпнуть несколько , по моему мнению, важных идей.

Базовые требования к визуализации

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

Иконки для программных продуктов:

Иконки пользовательского интерфейса:

Строгое следование геометрическим формам

Основа плоского дизайна иконок Google — правильные геометрические формы. Начинать дизайн любой иконки следует с отрисовки точно выверенных форм.

Фронтальная визуализация

Изображение иконки должно находится в 2D плоскости, а не в 3D пространстве.

Прямые точные тени

В «плоском» дизайне иконок важное значение отдается визуализации теней:

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

Точные цвета и цветовые оттенки

Цвет — основа любого flat дизайна. Google предлагает следующую палитру цветовых решений для иконок своих программ:

Основные цвета: синий, красный, желтый, зеленый, серый, белый
Без серого цвета не обходится ни один элемент flat-дизайна
Google предлагает 11 оттенков серого для дизайна иконок
Каждый цвет имеет 3 оттенка: чистый цвет, цвет + 40% белого, цвет + 60% белого

Цветовые палитры «плоского» дизайна (с точным описанием используемых цветов) можно посмотреть в конце статьи.

Пример цветовых комбинаций

Пример цветовых комбинаций в 2 цвета: оттенки не считаются отдельным цветом

Пример цветовых комбинаций в 3 цвета:

Точно в пиксель

Каждая иконка должна быть нарисована точно по пиксельной сетке.

Подход к шрифтам

Шрифт, используемый Google: Open Sans Semi Bold

Для маленьких размеров иконок используется выверенный по пикселям шрифт:

Правила скалирования иконок

Иконка «мини» формата не является полной копией иконки обычного размера: в мини — иконках исчезает часть линий для получения чистоты изображения.

Единый подход к размеру иконок

Не смотря на то, что иконки могут быть разной формы и разного размера, все они вписываются в единый формат:

для иконок продукта: 128px:128px (размер границ квадрата), 96px:96px (размер иконки)

для иконок пользовательского интерфейса: 21px:21px (размер границ квадрата), 19px:19px (размер иконки)

Таблица размеров программных иконок от Google:

Точное описание цветовых решений «плоского» дизайна

Цветовые решения для программных иконок:

Цветовые решения для иллюстраций и инфографики:

24 отличных примера иконок и иллюстраций «Flat» дизайна от Google

Источник: http://www. behance.net/

Твитнуть Please enable JavaScript to view the comments powered by Disqus. comments powered by

Её величество иконка в manifest.json

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

Иконка для сайта называется Favicon.

В зависимости от браузера и контекста они могут отображаться:

ICO – формат изображений для отображения иконок. Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

В настоящее время favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG и даже SVG favicon.

Почему я назвал статью «Ее величество иконка»? Да потому, что эта «пешка» прошла в «ферзи».

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки размером 16х16 пикселей в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Кстати, большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico и я всегда обязательно размещаю фавикон в главную директорию сайта.

Позже, когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon.

Тег link можно прописать по разному, я использую все сразу, чтобы угадать:

Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

Дело осложняется тем, что современные браузеры и мобильные ОС требуют разные размеры иконок и угадать бывает очень трудно.

Смотрите сами неполный список рекомендаций:

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

Разметка link примерна такая:

<link rel="icon" href="/icon-96.png">
<link rel="icon" href="/icon-144.png">
<link rel="icon" href="/icon-192.png">
<link rel="icon" href="/icon-256.png">
<link rel="icon" href="/icon-384.png">
<link rel="icon" href="/icon-512.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">

Уверен, вы уже схватились за голову. Караул!!! Это ж сколько рисовать всего, да еще вставлять столько тегов.

А еще появился Manifest.json и browserconfig.xml.

По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.

Вы опять скажете — «Блин…. еще и эти файлы делать к куче картинок»… «Королева иконка требует меня в жертву»…

Все просто на самом деле. Я сейчас подскажу как все сделать. У меня на этот сайт — все про все — заняло 10 минут.

Но сначала разберемся с этими файлами, а не с иконками разных размеров.

Manifest.json

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

Подключение файла как и всего остального в head:

<link rel="manifest" href="/manifest.json">

Пример простого файла:

{
    "lang": "ru",
    "name": "Моё приложение",
    "description": "Описание приложения",
    "icons": [{
        "src": "/icon.png",
        "sizes": "64x64",
        "type": "image/png"
    }],
    "start_url": "/",
    "display": "fullscreen",
    "orientation": "landscape",
    "background_color": "#000000",
    "screenshots": [{
        "src": "/screenshots.jpg",
        "sizes": "640x480",
        "type": "image/jpeg"
    }]
}

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое, например мы можем убрать адресную строку, чтобы было похоже на нативное приложение.

Кратко пройдемся по параметрам:

name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.

Как быстро все реализовать:

1. Вначале приготовьте прозрачный свой логотип или квадратную картинку в формате PNG, достаточного размера.

2. Идем на бесплатный сервис https://www.favicon-generator.org/

Выставляем в нем галочки как на скриншоте:

Выбираем созданную заранее картинку и генерируем.

И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.

Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).

Я исправил в нем только имя:

"name": "Веб-студия WebTend",
"short_name": "WebTend",

Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.

Правьте в NotePad++ в UTF-8 без BOM.

Вставил полученные на этом же сервисе теги в head:

<link rel="apple-touch-icon" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

И кинул все иконки в главную директорию (не хотелось пути менять).

В результате, добавив ссылку на экран IPhone, получил такое:

Как видим это 5s — экран маленький и он взял short_name — WebTend из manifest.json, что логично. На Ipad я уже увидел полное имя. При добавлении пользователь может изменить имя. Единственно на Android нет скругления иконки, что растраивает, думаю будет в будущем, при развитии этой системы.

При открытии по клику на ней очень интересно — при загрузке иконка с названием по типу preloader без анимации (можно цвет фона предзагрузки менять в manifest.json). Открывается без строки браузера, в полноэкранном режиме, с имитацией приложения.

А совсем недавно такое работало только на андроид системах. Прогресс идет.

Еще один отличный сервис: https://realfavicongenerator.net

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

Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?

А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).

Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

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

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

Для такой маленькой иконки очень много работы

Пусть браузер сам занимается уменьшением

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

Минимальный набор иконок (от Ruadhán O’Donoghue)

Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

Файл manifest.json, использующий изображение chrome:

{
 "name": "",
 "short_name": "",
 "icons": [
 {
 "src": "/icon-192.png",
 "sizes": "192x192",
 "type": "image/png"
 }
 ],
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "display": "standalone"
}

Файл browserconfig.xml, использующий изображение mstile:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
 <tile>
 <square150x150logo src="/mstile-150x150.png"/>
 <TileColor>#da532c</TileColor>
 </tile>
  </msapplication>
</browserconfig>

Разметка:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/icon-32x32.png">
<link rel="icon" type="image/png" href="/icon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

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

Можно и закончить эту публикацию, но осталась одна важная вещь:

Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).

И наконец, в догонку, связанная с темой информация — вывод Иконки в Яндекс браузере.

Она там имеет «кличку» — Виджет для Табло. Жуткое название. Всегда были Визуальные закладки. Красиво и понятно. Теперь Табло…

Про табло и иконки (виджеты на нем) читайте тут: https://yandex.ru/support/browser/personalization/tableau.html

Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.

И ничего в начале не получил. Виджет да, Заголовок да, а вот саму иконку нет. Оказалось абсолютный путь до иконки должен быть закодирован в URLencoded — вот ссылка на сервис это делающий: http://www.codenet.ru/services/urlencode-urldecode/

Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.

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

Дополнение:

После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат SVG у них сейчас стал рекомендуемый. Требования к фавиконке: Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16 или 32 × 32. Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Совет. Используйте размер 120 × 120 пикселей или формат SVG, чтобы на сервисах Яндекса логотип сайта выглядел четче и заметнее.

SVG формат конечно хорош, но я лично рисовать ничего не буду. И так все четко и заметно. Могли бы сами сконвертировать при желании. В on line конвертерах в svg из png и генераторах даже не пытайтесь, при сохранении будет черно-белая иконка (такая применима только в mac os. Писал выше). Если есть правильная цветная svg, то вставить ее можно как обычный файл, используя в type (Тип передаваемых данных) image/svg — для формата SVG:

<link rel="icon" type="image/svg" href="/image.svg">

У svg есть конечно перспективы сделаться «ферзем» в будущем. Несомненный плюс — в возможностях переопределения размеров svg изображений. Но я бы не стал торопиться. Всему свое время.

Поэтому все выше описанное — актуально.

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

так это… а где винда 10 а?

nedo May 21, 2018

Они очень разные. в зависимости от того, что нарисовано. См. сравнение стилей у нас на странице https://icons8.com/free-ios-7-icons-in-vector/ — там в середине страницы есть виджет сравнения. Так вот, на одной иконки торта есть 3 разных скругления: тарелки, торта, и свечки.

Иван July 28, 2015

Щодо iOS можна добавити радіуси заокруглення іконок.

Марта July 28, 2015

Если есть возможность, подскажите, какого размера должны быть иконки во всплывающей панели Android, iOS и остальных мобильных ОС? (я про те верхние маленькие иконки, которые вылазят сверху, в случае, если тебе приходит какое-либо сообщение)

Дмитрий April 2, 2015

Для iOS 8 добавите описания? 🙂

Сергей October 20, 2014

Спасибо, пригодилось

August 13, 2014

Для андроида, кажется, неверно написано Низкое разрешение (ldpi) 32×32 тут 36×36 надо. У вас даже на картинке сбоку нарисовано 36×36

AltSolution November 30, 2013

Для Windows 7 теже правила, что и для Висты. Для Windows XP 16×16, 24×24, 32×32, 48×48.

Александр September 3, 2012

Здравствуйте, существуют ли требования к иконкам для Windows XP, 7. Или руководствоваться теми же правилами что и для Windows Vista?

Марина August 30, 2012

Какой dpi сдедует выставлять?

Игорь May 20, 2011

Дизайн в эпоху иконок приложений

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

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

Такое поведение пользователя и является целью. Команда дизайнеров «Instagram» подтверждает: что-то такое простое, как значок, может влиять на реакцию и активность пользователей. Это один из последних и наиболее ярких примеров значительных изменений в мобильном дизайне. Для такого крошечного, казалось бы, несущественного и в значительной степени поверхностного дизайна ставки на удивление высоки: чем дольше происходит распознавание значка — какой бы маленькой ни была заминка — тем меньше его побудительная сила для пользователя.

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

Эпоха иконок

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

Все сошлись на том, что максимумом являются две секунды. После этого нашей кратковременной памяти начинает не хватать, и мы запутываемся в том, что нам нужно, или даже забываем, что делали. Вам знакомо это чувство, когда заходите в комнату и не знаете, зачем пришли? Это неприятно. «Чем дольше контент будет храниться в кратковременной памяти, тем больше шансов забыть или ошибиться», — написал исследователь ЭВМ Роберт Миллер в своей знаменитой статье 1968 года о психологии времени задержки.

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

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

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

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

Они поймали блестящую идею: вместо того, чтобы использовать для общения текст, почему бы не показывать пользователям ненастоящий, метафорический «рабочий стол», где приложения и действия были бы представлены иконками вместо слов? Таким образом любой, кто видел рабочий стол в реальной жизни, мог сразу же понять, как пользоваться цифровой версией. В 1973 году у «Xerox Alto» появился первый графический пользовательский интерфейс с файловыми папками, корзиной для мусора, дисками и другими пиктограммами.

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

МРТ, отслеживание взгляда и даже больше

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

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

Больше, чем когда-либо, интерактивный дизайн — это наука об интервалах, миллисекундных беглых взглядах и балансе когнитивной нагрузки. И неудивительно, что исследователи чаще всего изучают, как мы используем свои экраны, в рамках науки о мозге. Возьмем новые логотип и иконку «Instagram», разработать которые компания поручила Йену Спелтеру. Дизайн был сформирован с помощью сотрудников компании, которых попросили нарисовать значок по памяти. «Это дало нам представление о том, от чего следует избавиться», — сказал Спелтер Клиффу Гуангу. Кроме того, команда провела обширное качественное тестирование, сосредоточившись на том, насколько хорошо пользователи могут распознать новый дизайн.

Есть некоторые научные данные в поддержку такого подхода. В своей статье «Графика и семантика: взаимосвязь того, что увидят, и дизайна иконок» Сара Ишервуд опровергает идею, что иконку или логотип легче распознать, если в них есть конкретная визуальная отсылка к их функции. После того, как люди привыкают к абстрактным значкам, они начинают понимать их так же хорошо. Что более важно? Наше узнавание.

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

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

То же самое может быть верно и для новой иконки «Instagram». «Как видно по возмущению, которое поднялось после смены значка „Instagram, у людей глубокая личная связь со светящимся квадратикам в их телефонах», — говорит датский дизайнер Майкл Фларап, который руководит сайтом по дизайну иконок.

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

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

Вы можете найти динамические элементы по всему рабочему столу; хороший пример — iOS-приложения с погодой, так как они все вынуждены конкурировать за внимание со стороны Apple. Чтобы найти динамическую иконографию, можно не смотреть дальше «DarkSky», одного из самых популярных приложений с погодой в «AppStore». Локализованное приложение с погодой использует молнию, раскалывающую пополам небо, что на самом деле похоже на движение. (Создатели «DarkSky», в свою очередь, говорят, что этот эффект стал результатом «осуществления миллиона улучшений, пока все не стало простым и не уродливым»). По сравнению со статичным облаком и солнцем приложения с погодой в iOS, это выглядит свежо и актуально — почти угрожающе.

Начало науки о дизайне

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

В 2014 году Ассоциация информатики и технологий опубликовала статью «Как мозг обрабатывает иконки? Нейровизуальные показатели четырех типов визуальных стимулов, используемых в информационных системах». В ней трое исследователей из Техасского университета описывают, как они планировали сделать открытие в чем-то с виду очень простом: что легче анализировать человеческому мозгу — образы или слова?

Используя МРТ, они смогли пронаблюдать, как мозги испытуемых сталкиваются с иконографией, и увидеть, какие участки серого вещества были задействованы для работы. Как ни странно, оказалось, что понимание изображения или значка требует использования гораздо больших ресурсов вашего мозга, чем просто истолкование слова. Это может оказать «глубинное» влияние на пользовательский интерфейс, заключают авторы; в конце концов, если чтение текста требует меньших умственных усилий, то так ли полезны иконки, как мы думаем? Или текстовые интерфейсы — такие, как диалоговый интерфейс или интерфейс с голосовым контролем — лучший способ справляться с когнитивной нагрузкой для пользователей?

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

значков синхронизации Dropbox | Что они имеют в виду?

Настольное приложение Dropbox обеспечивает синхронизацию папки Dropbox на вашем компьютере с вашей учетной записью Dropbox в Интернете. Приложение будет отображать специальные символы (или «значки»), чтобы вы знали, что происходит. Вы увидите эти значки в нескольких местах:

Значок Dropbox на панели задач (Windows) или в строке меню (Mac) показывает общий статус Dropbox
Значки на отдельных файлах или папках показывают статус этого файла или папки

Из этой статьи вы узнаете, что означает каждый значок и что делать, если они застряли или пропали.

Еще не пользуетесь Dropbox? Узнайте, как Dropbox упрощает синхронизацию файлов.

Интеллектуальная синхронизация

Если вы являетесь клиентом Dropbox Plus, Family, Professional или Business, у вас также могут быть значки, уникальные для Smart Sync:

Только онлайн-контент

Файлы и папки со значком облака доступны только в Интернете. Это означает, что они появятся в папке Dropbox на вашем компьютере, но загружены не полностью.Эти значки-заполнители просто показывают, что элемент доступен в вашей учетной записи Dropbox в Интернете. Затем вы можете загрузить его полностью, если хотите.

Местное содержание

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

Папки смешанного состояния

Папки со смешанным состоянием содержат как локальные, так и онлайн-файлы.

Значки состояния на панели задач или в строке меню вашего компьютера

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

Что делать, если значок Dropbox отсутствует на панели задач или строке меню

Значок Dropbox будет отображаться на панели задач (Windows) или в строке меню (Mac) только в том случае, если настольное приложение Dropbox загружено на ваш компьютер и запущено.Иногда кажется, что значок Dropbox исчезает, но это означает только то, что настольное приложение не запущено.

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

Windows : щелкните меню Пуск , затем щелкните Программы , затем найдите и запустите приложение Dropbox
Mac : откройте папку Applications , затем найдите и запустите приложение Dropbox
Linux : щелкните меню Applications , затем откройте папку Internet , затем найдите и запустите приложение Dropbox

Что делать, если в ваших файлах отсутствуют значки синхронизации Dropbox

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

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

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

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

Значок газетной статьи — Прозрачный векторный файл PNG и SVG

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

Где я могу использовать этот дизайн?

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

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

Использование шаблона: Вы можете использовать его для цифровых шаблонов, включая веб-сайты, брошюры и т. Д., Предназначенных для продажи в Интернете по запросу, при условии, что он не продается «как есть» и используется исключительно в качестве графического ресурса для создания новый дизайн / макет / шаблон, который существенно отличается от оригинального дизайна.С индивидуальной лицензией вы можете продать до 200 копий и до 5000 с расширенным дизайном. С подпиской Pro и Merch — до 200. А с расширенной подпиской вы можете продать до 5000 копий каждого дизайна.

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

Для редакции: Вы можете использовать графику в книгах, журналах, газетах и т. Д.

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

Использование в образовательных целях: Вы можете использовать это изображение / графику в образовательных целях.

Использование видео: Изображение / графику можно использовать для видеопродукции, видео на Youtube, телевидения и т. Д. Для массового использования Open TV требуется расширенная лицензия.

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

Новое определение тяжелой сердечной недостаточности, разработанное Ассоциацией по сердечной недостаточности

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

Ассоциация сердечной недостаточности (HFA) Европейского общества кардиологов (ESC) впервые применила термин «прогрессирующая хроническая сердечная недостаточность» для определения этого состояния в 2007 году.1 В 2018 году определение было обновлено, чтобы включить дополнительные клинические аспекты, такие как амбулаторное лечение эпизодов декомпенсации и роль сопутствующих заболеваний, а также обновление лечения, а именно с помощью новых устройств механической поддержки кровообращения (MCS) 2

После того, как было опубликовано первое заявление о позиции HFA, и поскольку классификация сердечной недостаточности Нью-Йоркской кардиологической ассоциацией (NYHA) на четыре класса была сочтена неадекватной, была разработана классификация Межведомственного реестра механической поддержки кровообращения (INTERMACS).3 Эта классификация делит пациентов на семь клинических профилей, чтобы лучше описать тяжесть их состояния. Эти критерии разделяют людей на разные профили риска и связаны с разными исходами после того, как пациент получил MCS.4 Однако критерии INTERMACS были разработаны для создания реестра для классификации пациентов, проходящих MCS в США. Целью было выявить разные уровни тяжести СН, но только для пациентов, получавших это лечение. По этой причине они не охватывают историю болезни пациентов, а только степень тяжести их симптомов во время лечения.

Напротив, критерии HFA были разработаны с целью выявления всех пациентов с хронической сердечной недостаточностью на поздней стадии, независимо от того, можно ли их лечить с помощью MCS. Классификация HFA включала пациентов, у которых может не быть показаний к MCS, например, с сохраненной фракцией выброса, а также пациентов со значительными сопутствующими заболеваниями, такими как тяжелая почечная и / или печеночная дисфункция. Такие пациенты часто встречаются в клинической практике, и в заявлении о позиции ЗДВ 2017 г. им уделяется должное внимание.

Обновленное определение тяжелой хронической сердечной недостаточности

Критерии хронической сердечной недостаточности на поздней стадии за 2007 и 2018 годы приведены в таблице 1. Как и в определении приливов в рекомендациях ESC, они принимают критерий наличия как признаков и симптомов сердечной недостаточности, так и объективных свидетельств сердечной дисфункции для определения прогрессирующей хронической сердечной недостаточности. Как в определениях 2007 г., так и в определениях 2018 г. признаки и симптомы — это признаки тяжелой сердечной недостаточности III или IV класса по NYHA.

Что касается сердечной дисфункции, заявление 2007 года включало систолическую дисфункцию, показанную фракцией выброса левого желудочка (ФВЛЖ) <30%, а также диастолическую дисфункцию ЛЖ, показанную эхокардиографическими аномалиями и / или признаками высокого внутрисердечного давления наполнения при инвазивных вмешательствах. измерения или высокие уровни мозговых натрийуретических пептидов (BNP) в плазме.1 В заявлении 2018 г. используется то же определение систолической дисфункции (например, ФВЛЖ <30%) и используются критерии рекомендаций ESC 2016 г. для определения СН с сохраненной фракцией выброса 2,5. Кроме того, в нем предлагается изолированное правое желудочковое кольцо (ПЖ). ) недостаточность, например, вызванная аритмогенной кардиомиопатией правого желудочка или неоперабельные тяжелые клапанные аномалии и врожденные аномалии как возможные причины тяжелой сердечной дисфункции2

В обоих документах указывается на необходимость продемонстрировать серьезное ограничение возможностей для физических упражнений, о чем свидетельствует низкая дистанция <300 м, 6-минутная ходьба, или низкое пиковое потребление кислорода или неспособность выполнять упражнения.Также требуется плохое клиническое течение, проявляющееся в эпизодах декомпенсации сердечной недостаточности за последние 6 или 12 месяцев.1,2 Потому что многие пациенты с острой декомпенсацией сердечной недостаточности в настоящее время лечатся амбулаторно или в отделениях неотложной помощи с краткосрочной петлей. диуретики или, реже, инфузия инотропных препаратов, 6–9 незапланированных визитов в больницу включены в более недавний отчет2. Аналогичным образом, теперь включены посещения отделений неотложной помощи или госпитализации по поводу злокачественных тахиаритмий2.

Наконец, сопутствующие заболевания, в том числе болезни легких и дисфункция печени и почек, теперь включены в качестве возможных основных факторов, определяющих плохое клиническое течение и прогноз для пациентов с хронической сердечной недостаточностью на поздних стадиях.10,11 Также считается, что в некоторых случаях такие сопутствующие заболевания могут доминировать в клиническом течении самой СН (таблица 1) .2 В обоих документах четко указано, что они должны присутствовать, несмотря на оптимальное, основанное на доказательствах лечение, которое теперь включает ивабрадин, сакубитрил. / валсартан, сердечная ресинхронизирующая терапия и имплантация имплантируемого кардиовертера-дефибриллятора в соответствии с последними рекомендациями2,5

Прогностическая стратификация

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

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

Среди биохимических параметров были отмечены маркеры конечной стадии дисфункции и повреждения органов (например, дисфункция миокарда, почек и печени), а также маркеры дефицита железа, электролитных нарушений (гипонатриемия, гипо- или гиперкалиемия и гипохлоремия). связаны с худшими результатами. Прогностическая роль гипохлориемии была продемонстрирована в недавних исследованиях.12–14

Визуализация и оценка функциональной способности

Многие параметры, полученные с помощью визуализации, в основном с помощью допплеровской эхокардиографии и магнитно-резонансной томографии сердца, имеют большую прогностическую ценность, чем ФВЛЖ.К ним относятся дилатация и гипертрофия ЛЖ, митральная регургитация, функция левого предсердия, аномалии клапанов, функция правого желудочка, оценки легочного артериального давления, диаметр и динамика нижней полой вены. Точность неинвазивных измерений, чтобы оценить давление наполнения ЛЖ остается спорным с использованием многопараметрических подходов вероятно, лучше, чем одного измерения, такие как Е / Е»ratio.15,16

Кардиопульмональный тест с нагрузкой (CPET) предоставляет объективную информацию о переносимости физических нагрузок амбулаторных пациентов с сердечной недостаточностью.Показан для отбора кандидатов на трансплантацию сердца. Пиковое потребление кислорода при физической нагрузке (VO ₂), измеренное как в процентах от максимальных прогнозируемых значений и как абсолютное значение, а также минутная вентиляция / производство углекислого газа (VE / VCO ₂) и колебательный характер вентиляции во время Было показано, что упражнения имеют независимую прогностическую ценность. 17 Основываясь на прогностических исследованиях, трансплантация сердца показана, когда пиковое значение VO ₂ составляет ≤14 мл / кг / мин или ≤12 мл / кг / мин у пациентов, принимающих бета-адреноблокаторы.Достижение скорости дыхательного обмена> 1,05 важно для определения достижения максимальной аэробной способности. Вентиляционная реакция на физическую нагрузку обеспечивает объективную оценку способности к физической нагрузке независимо от мотивации пациентов и, наряду с наличием осциллирующего режима вентиляции, может еще больше расслоить пациентов.17 Низкое тестовое расстояние 6-минутной ходьбы (6MWTD) также может использоваться в прогностической оценке.

Многовариантные прогностические баллы

Было разработано несколько многопараметрических оценок риска.Они включают в себя показатель выживаемости при сердечной недостаточности (HFSS), Сиэтлскую модель сердечной недостаточности (SHFM), данные теста на метаболические упражнения в сочетании с оценкой сердечного и почечного индексов (MECKI) и Глобальную группу метаанализа по хронической сердечной недостаточности (MAGGIC). 18–21

HFSS был разработан для отбора кандидатов на трансплантацию сердца среди амбулаторных пациентов с тяжелой сердечной недостаточностью. Полностью неинвазивные модели, включая CPET, могут быть столь же точными при прогнозировании прогноза, как и модели, включающие инвазивные измерения.19 ВШФМ прошел полную валидацию. Он продемонстрировал адекватную способность распознавания, хотя и недооценил абсолютный риск у пациентов с тяжелой сердечной недостаточностью, а именно у пациентов, показанных для MCS.22 Его прогностическая ценность также была показана у пациентов, принимающих MCS, поэтому его можно использовать для оценки результатов по сравнению с отсутствием вмешательства. 23 MAGGIC, основанный на индивидуальных данных 39 372 пациентов с сердечной недостаточностью со сниженной фракцией выброса и сохраненной фракцией выброса из 30 когортных исследований и шести клинических испытаний, является одним из наиболее полных и последовательных.₂ и VE / VCO ₂ наклон, гемоглобин, уровень натрия в сыворотке и функция почек. Он выгодно отличается от HFSS и SHFM, хотя последний не требует данных CPET24

Сравнительное исследование показало аналогичную прогностическую точность четырех баллов с тенденцией занижать частоту событий с помощью баллов SHFM и HFSS и склонностью завышать их с баллами MAGGIC и MECKI.25

Лечение

По определению, традиционное лечение лекарствами и устройствами неэффективно для облегчения симптомов и улучшения клинического течения пациентов с тяжелой сердечной недостаточностью.Устойчивость к петлевым диуретикам остается основным признаком продвинутой СН, и стратегии ее преодоления имеют первостепенное значение. Внутривенная ультрафильтрация, особенно с использованием новых более простых устройств, может стать действенной альтернативой лечению диуретиками26. Альтернативы внутривенному введению фуросемида, такие как подкожный фуросемид, внутривенный и пероральный торасемид, или комбинация ацетазоламида или тиазидов или метолазона, могут дать положительные результаты в будущих исследованиях27–31. Также может потребоваться заместительная почечная терапия, например перитонеальный диализ.5 Инотропные препараты по-прежнему можно использовать в качестве паллиативного лечения. Однако периодическое введение левосимендана было связано с благоприятным воздействием на натрийуретические пептиды, качество жизни и, возможно, количество госпитализаций.9

Использование краткосрочной или долгосрочной MCS оправдано у пациентов с тяжелой сердечной недостаточностью, когда она вызвана систолической дисфункцией ЛЖ и при отсутствии серьезных противопоказаний, таких как сопутствующие заболевания или тяжелая дисфункция правого желудочка.5,32,33 Повышенная безопасность. а выживаемость пациентов с постоянными вспомогательными устройствами LV расширяет их показания.Данные недавних испытаний подтверждают их показания также для людей с серьезными функциональными ограничениями, хотя они находятся в амбулаторных условиях и не зависят от инотропов.34

Тем не менее, определение наилучшей терапевтической стратегии для отдельных пациентов с тяжелой сердечной недостаточностью остается сложной задачей, а использование MCS сопряжено с высоким риском нежелательных явлений, включая отказ устройства, инфекции, тромбоэмболические и геморрагические события35–37

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

В случае показаний как для MCS, так и для трансплантации сердца, необходима соответствующая организация и связь между различными высокотехнологичными центрами HF. Отбор пациентов и лечение должны выполняться с использованием моделей ступиц и спиц, как указано в недавнем расширенном заявлении о положении HF.1 Паллиативная помощь остается важным вариантом, который следует указывать не только в случае неудачи лечения, но и в качестве сопутствующего лечения пациентам с тяжелым заболеванием2,38

Заключение

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

Разработка более качественных значков приложений. После всей шумихи, созданной последним… | Майкл Фларуп

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

Пакеты значков приложений бывают разных размеров. Получите этот шаблон на appicontemplate.com

С практической точки зрения, когда вы создаете значок приложения, вы создаете набор PNG-файлов разных размеров — от меньшего размера, например, 29 x 29 пикселей, до 1024 x 1024px — это должно быть в комплекте с вашим приложением.Этот набор тщательно продуманных дизайнов будет использоваться во многих контекстах ОС, где пользователи сталкиваются с вашим приложением, включая App Store или Google Play, панель настроек, результаты поиска и ваш домашний экран.

Значки приложений могут быть созданы в любом приложении, способном создавать растровые файлы, но обычно выбираются Photoshop, Illustrator и Sketch. Бесплатные инструменты, такие как appicontemplate.com, предлагают умные шаблоны PSD, которые помогут вам быстро начать работу.

Короткое видео, демонстрирующее, как использовать один из шаблонов в appicontemplate.com

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

Значок приложения должен работать с несколькими разрешениями, сохраняя четкость концепции во всем диапазоне размеров.

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

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

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

● Работа с холстом 1024 x 1024 пикселей может быть обманчивой — убедитесь, что вы опробовали свой дизайн на устройстве и в разных контекстах и размерах

● Оцените простоту и сосредоточьтесь на одном объекте, желательно уникальной форме или его контуры и качество при масштабировании

● Убедитесь, что значок приложения хорошо смотрится на различных фонах.

Несколько значков, которые я сделал с учетом масштабируемости.

Как ICON строит дома будущего, напечатанные на 3D-принтере за 4000 долларов

В 2017 году соучредители ICON Джейсон Баллард, Эван Лумис и Алекс Ле Ру встретили Бретта Хаглера, соучредителя некоммерческой организации New Story, и поняли, что у них есть единая миссия: использовать 3D-печать и новые строительные технологии для преобразования строительной отрасли и создания доступных, долговечных и экологически безопасных домов для тех, кто в этом нуждается.

Это первый разрешенный дом, напечатанный на 3D-принтере.Компания ICON завершила напечатанную на 3D-принтере часть дома примерно за 48 часов.

Было похоже, что двум компаниям суждено было объединить усилия: New Story искала инновационные способы предоставить качественное жилье большему количеству семей, а ICON разрабатывала проприетарные технологии 3D-печати и материалы, которые могли бы это сделать.

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

Всего восемь месяцев спустя, в марте 2018 года, ICON и New Story завершили строительство первого разрешенного дома с 3D-печатью в Остине, штат Техас.Дом площадью 350 квадратных футов был напечатан устройством под названием Vulcan I примерно за 48 часов. Более того, стоимость напечатанной части (крыша не была напечатана на 3D-принтере) составляла около 10 000 долларов — сумма намного ниже средней стоимости дома аналогичного размера и качества.

Компания ICON разрабатывала свой 3D-принтер Vulcan I примерно за два года. Портальный принтер на рельсах является мобильным и весит около 2000 фунтов.

Как именно это возможно, спросите вы? Основатели ICON сосредоточились на разработке технологии 3D-печати специально для развивающихся стран — и примерно через два года они пришли к реальному решению.Поскольку характеристики объекта, погода и доступность материалов могут сильно различаться, Vulcan I является мобильным, весит около 2000 фунтов и печатает на месте без перерыва.

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

Дом в Остине площадью около 350 квадратных футов состоит из двух комнат с внутренней перегородкой, сделанной из того же напечатанного на 3D-принтере раствора, что и внешние стены.

Команда хотела, чтобы дом был узнаваемым и желанным как дом, но, как объясняет Баллард, они также «хотели продемонстрировать несколько возможностей, которые открывает 3D-печать», например кривые и другие неоднородные формы. . Это область, в которой 3D-печать выделяется — элементы, которые традиционно делались на заказ, теперь могут быть выполнены дешевле, быстрее и часто с более высоким и стабильным качеством.

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

Alchemy Builders установили крышу и окна, используя традиционные материалы и методы строительства.

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

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

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

Тем не менее, Vulcan I служит важным подтверждением концепции, и ICON уже смотрит в будущее. В 2019 году компания планирует напечатать сообщество домов для малообеспеченного населения. Площадь каждого дома будет составлять от 600 до 800 квадратных футов, а стоимость дома ICON составляет около 4000 долларов США.

Дом ICON, напечатанный на 3D-принтере, является одновременно доказательством концепции, а также выражением возможностей 3D-печати для создания изогнутых уникальных дизайнов.

Следующая итерация 3D-принтера ICON, получившая название Vulcan II, будет в два раза больше и в два раза быстрее, чем Vulcan I, объясняет Баллард.Он сможет печатать дома площадью до 2000 квадратных футов — «это позволяет нам обслуживать гораздо больший круг домовладельцев и печатать гораздо больший массив дизайнов домов», — добавляет он.

Ожидается, что в этом году будет представлен 3D-принтер Vulcan II, который приблизит ICON к достижению своей цели — позволить людям в Соединенных Штатах загружать и распечатывать свои дома за 24 часа.

Справочная информация: Решит ли 3D-печать кризис доступного жилья?

Иконок-гармошек: какие означающие работают лучше всего?

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

Вопрос, который часто задают в наших классах Mobile UX и Application Design: какой значок мы должны использовать, чтобы лучше всего сигнализировать о том, что контент будет расширяться на месте? Другими словами, какое лучшее обозначение для аккордеонов?

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

Каретка (или стрелка, направленная вниз)
плюс
Стрелка, направленная вправо
Нет значка

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

Jennair: аккордеон, обозначенный значком каретки Bolé Road Textiles: аккордеон, обозначенный значком плюса Ferrari: аккордеон, обозначенный значком стрелки Braun: аккордеон без значка значка

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

Методология

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

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

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

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

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

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

Мы также провели несколько пилотных исследований, чтобы убедиться, что показатель успешности задачи был высоким (более 90%) и чтобы люди могли легко определить «правильную» категорию меню, которую нужно было выбрать для выполнения каждой задачи.После каждого пилотного исследования уточняли формулировку задач и надписи в меню. Таким образом, мы фактически провели несколько исследований удобства использования информационной архитектуры наших прототипов, прежде чем собрать количественные данные. Этот процесс гарантировал, что определение правильной категории было относительно тривиальным для большинства участников — так как целью нашего исследования было проверить означающие аккордеон, а не сложность поиска информации в задачах, которые мы давали пользователям.

Участники . В нашем исследовании приняли участие 136 человек.Все участники видели экземпляры всех разных иконок (в разных прототипах и в разном порядке).

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

Мы собрали данные по:

Место касания: место касания участником (непосредственно на текстовой метке, непосредственно на значке, в пространстве между меткой и значком или в любом другом месте прототипа)
Ожидания участников: ответ на вопрос об ожиданиях после задания (переход непосредственно на новую страницу, просмотр дополнительного списка ссылок на той же странице или что-то еще)

Где участники нажимают

Отводов за пределами области, связанной с аккордеоном, было относительно немного (5–8%), и большинство ударов приходилось либо на этикетку, либо на значок, связанный с аккордеоном (а не на пространство между ними).

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

ANOVA для данных, когда пользователи нажимали на текстовую метку, обнаружил значительное влияние типа значка, когда участники или прототипы рассматривались как случайный фактор.Парные контрасты показали, что условие отсутствия значка значительно отличалось от всех других условий. В частности, для был более высокий шанс нажать на ярлык, когда значок не был. — открытие, которое совсем не удивительно, поскольку «область значка» была просто пустым пространством в этом состоянии (мы просто отслеживали, нажимали ли люди на место, где обычно находится значок), но важное напоминание о том, что пользователи обычно предпочитают взаимодействовать с очевидными указателями.

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

Чего ожидают участники

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

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

Для стандартных означающих (курсор, плюс и стрелка) не было сильного ожидания покинуть страницу (так как коэффициент ожидания новой страницы незначительно отличается от 50%, p> 0,05). Среди всех стандартных означающих, знак вставки имеет значительно более сильное ожидание остаться на странице, чем фольга (p <0,05) или условие отсутствия значка (p <0,05) , а плюс значительно лучше, чем фольга (p <0,05), но не при условии отсутствия значка. Стрелка статистически не отличается от условий фольги или отсутствия значка, что позволяет предположить, что этот значок не следует использовать для аккордеонов.

Ключевые выводы

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

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

Для паттернов «аккордеон» люди, как правило, одинаково нажимают на значок и на ярлык для большинства стандартных значков. Единственное исключение — курсор, когда люди чаще нажимают на значок, но все же 29% нажатий приходится на метку.Это говорит о том, что использовать разделенные кнопки для аккордеонов небезопасно — текстовая метка указывает прямо на целевую страницу, а значок открывает аккордеон.
Создание новых значков для знаков-аккордеонов или их отсутствие — не лучшая идея, поскольку они нарушают ожидания пользователей (которые заключаются в том, что они будут переведены на новую страницу).
Ни один из стандартных указателей не имеет прочной связи с пребыванием на странице. Что, как говорится:
- Использование каретки определенно лучше, чем использование вообще без значка или случайного значка с точки зрения выражения ожидания остаться на странице (и открыть гармошку).
- Использование стрелки или плюса не лучше, чем вообще отсутствие означающего.
Когда значок отсутствовал, пользователи имели тенденцию нажимать на текстовую метку, а не на пустое пространство в этой строке. Хотя это очевидный вывод, это еще одно свидетельство того, что пользователи склонны взаимодействовать с сильными и четкими указателями.
Интересно, что использование иконки со стрелкой, направленной вправо (в отличие от плюса или каретки), НЕ было в значительной степени связано с ожиданием перехода непосредственно на новую страницу.Хотя многие дизайнеры могут подумать, что значок стрелки означает «перейти непосредственно на страницу», тогда как тот же значок, указывающий вниз, означает «открыть гармошку здесь, на странице», что не поддерживается в наших данных.

Сводка

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

Новости газета СМИ бумага пресса статья бесплатные векторные иконки

☰ Авторизоваться Подписаться Настройки профиля Изменить пароль Выйти
Эти значки Glyph
Эти значки
Глиф
Creative Commons
Значок загрузки
Другие иконки из этого набора
Все иконки из этого набора
О
Поддержка Iconbolt
API
Связаться с нами
.
No related posts.

alexxlab

Разное

Аллергия на воду из-под крана: симптомы, причины и лечение

Разное

Сон новорожденного: режим, особенности и рекомендации для родителей

Разное

Свекольный сок от насморка: эффективное природное средство для детей и взрослых

Разное

Размер ноги ребенка по месяцам: как правильно измерить и подобрать обувь

Разное

Питание при грудном вскармливании: что можно и нельзя есть кормящей маме

Разное

Синемаграфия на iphone: Синемаграфия в Instagram / Паразайт

29.11.2021
0