Иконка — это… Что такое Иконка?
Значки на панели инструментов текстового редактораЗначки были изобретены в 1970 году в исследовательском центре компании «Ксерокс» в Пало-Альто, чтобы облегчить взаимодействие с компьютером для новичков.
Вид значков
Как правило, значки представляют собой картинки квадратного формата стандартных размеров.
В операционных системах пикселов.
Значки KDE существуют в виде PNG‐изображений 6 размеров, и масштабируемых векторных SVG‐изображений.В различных средах также используются значки с размером 24, 40, 60, 72, 92, 108, 128 пикселов и другие; векторные значки (например, в форматах. Многие современные среды и приложения умеют задавать значки по умолчанию. Значок для приложения выбирается стандартным, для файла — в зависимости от типа файла (часто берётся значок приложения, обрабатывающего этот файл по умолчанию). Иногда значки для графических файлов получаются из самого файла (например, уменьшенная копия изображения).
Независимое создание значков
Те значки, которые уже́ включены в операционную среду, не всегда удовлетворяют вкусам и потребностям пользователей, поэтому появилось множество независимых художников и целых творческих групп, специализирующихся на создании новых значков — как отдельных, так и целых серий в единой стилистике или единой тематике.
Работа по созданию значков нередко бывает сопряжена с созданием целого массива изображений одного и того же значка, но с разным количеством пикселов, в разных видах и для различных операционных систем.
«Иконка» или «значок»?
В английском языке подобные графические элементы пользовательского интерфейса называются словом «icon» (от греч.
είκων — образ, символ, икона). При недостатке официальной документации по программному обеспечению на русском языке в среде русскоязычных компьютерных пользователей за значками закрепилось жаргонное обозначение «иконка» (уменьшительное от икона). Данное обозначение нельзя назвать удачным, ибо понятие «икона» в русской культуре несёт вполне определённую смысловую нагрузку, мало совместимую с обозначаемым понятием. В качестве альтернативы предлагались разные термины, но в настоящее время за обозначением картинок в интерфейсе пользователя закрепилось название «значок». Так, компания Майкрософт в документации на своё программное обеспечение называет эти элементы «значками».
См. также
Ссылки
Примечания
- ↑ В мае 1999 года Екатерина Лажинцева (тогда менеджер по операционным системам в отделе подготовки русских продуктов корпорации «Майкрософт») изложила историю выбора термина «значок» в статье «Как „Майкрософт“ решает вопросы выбора терминологии» (та же статья на другом сайте). По её словам, слово «пиктограмма» было отвергнуто из-за излишней длины, а вариант «иконка» вызывал опасения как задевающий религиозные чувства.
Wikimedia Foundation. 2010.
Иконка — это… Что такое Иконка?
Значки на панели инструментов текстового редактораВид значков
Как правило, значки представляют собой картинки квадратного формата стандартных размеров.
В операционных системах пикселов.
Значки KDE существуют в виде PNG‐изображений 6 размеров, и масштабируемых векторных SVG‐изображений.
В различных средах также используются значки с размером 24, 40, 60, 72, 92, 108, 128 пикселов и другие; векторные значки (например, в форматах. Многие современные среды и приложения умеют задавать значки по умолчанию. Значок для приложения выбирается стандартным, для файла — в зависимости от типа файла (часто берётся значок приложения, обрабатывающего этот файл по умолчанию). Иногда значки для графических файлов получаются из самого файла (например, уменьшенная копия изображения). Некоторые продвинутые интерфейсы умеют делать то же и для неграфических файлов (документов, презентаций). Не все значки статичны. Например значок, представляющий связь с интернетом, может наглядно показывать, идёт ли в данный момент передача данных, значок менеджера задач показывать загрузку процессора и т. д.
Независимое создание значков
Те значки, которые уже́ включены в операционную среду, не всегда удовлетворяют вкусам и потребностям пользователей, поэтому появилось множество независимых художников и целых творческих групп, специализирующихся на создании новых значков — как отдельных, так и целых серий в единой стилистике или единой тематике.
Работа по созданию значков нередко бывает сопряжена с созданием целого массива изображений одного и того же значка, но с разным количеством пикселов, в разных видах и для различных операционных систем.
«Иконка» или «значок»?
В английском языке подобные графические элементы пользовательского интерфейса называются словом «icon» (от греч. είκων — образ, символ, икона). При недостатке официальной документации по программному обеспечению на русском языке в среде русскоязычных компьютерных пользователей за значками закрепилось жаргонное обозначение «иконка» (уменьшительное от икона). Данное обозначение нельзя назвать удачным, ибо понятие «икона» в русской культуре несёт вполне определённую смысловую нагрузку, мало совместимую с обозначаемым понятием. В качестве альтернативы предлагались разные термины, но в настоящее время за обозначением картинок в интерфейсе пользователя закрепилось название «значок». Так, компания Майкрософт в документации на своё программное обеспечение называет эти элементы «значками».
См. также
Ссылки
Примечания
- ↑ В мае 1999 года Екатерина Лажинцева (тогда менеджер по операционным системам в отделе подготовки русских продуктов корпорации «Майкрософт») изложила историю выбора термина «значок» в статье «Как „Майкрософт“ решает вопросы выбора терминологии» (та же статья на другом сайте). По её словам, слово «пиктограмма» было отвергнуто из-за излишней длины, а вариант «иконка» вызывал опасения как задевающий религиозные чувства.
Wikimedia Foundation. 2010.
Иконки и ярлыки
02.01.2014 Как изменить иконку файла или папки Иконки являются средством для визуального отображения файлов и папок в проводнике компьютера.
Подробнее о том, что такое иконка, как создать собственную иконку, как изменить иконку файла или папки читатель узнает из этой статьи. ΞПОДРОБНЕЕΞ 28.08.2009
Как изменить стандартную иконку флешки Для того, чтобы стать обладателем уникальной флешки, совершенно не обязательно заказывать для нее специальный корпус или покупать эксклюзивную модель этого устройства. Придать индивидуальность флеш-накопителю можно гораздо проще, создав для него собственную иконку. Если подключить такую флешку к компьютеру, в разделе «Компьютер», а также в проводнике Windows, вместо стандартной иконки флеш-накопителя будет отображаться выбранный пользователем значок. ΞПОДРОБНЕЕΞ 22.03.2017 Как изменить иконку
системных ярлыков В интерфейсе Windows есть много системных ярлыков (значков), таких как «Мой компьютер», «Корзина» и другие, которые «стандартным» способом создаются только в определенном месте. Например, полноценный ярлык «Корзина» создается только на Рабочем столе. Тем не менее, существует альтернативный способ создания системных ярлыков, позволяющий размещать их где угодно, в том числе на флешке и других съемных носителях. Суть способа заключается в создании в нужном месте обычной пустой папки и присвоении ей специального расширения (через точку от имени). В зависимости от того, каким будет это расширение, папка «превращается» в соответствующий системный ярлык с автоматическим изменением ее иконки.
стрелки с ярлыков Ярлыки очень просто отличить от обычных файлов. На иконках ярлыков отображается небольшая, изогнутая вверх, стрелочка. К этому уже все привыкли и, в большинстве случаев, никто на нее не обращает внимание. Тем не менее, некоторых пользователей стрелочки на ярлыках раздражают. И если Вы принадлежите к их числу, эти стрелочки можно убрать. Проблема решается внесением некоторых несложных изменений в системный реестр Windows. ΞПОДРОБНЕЕΞ
что это и зачем они нужны
Знаете, с тех пор как я начал делать иконки для игр, я заметил одну вещь. Геймеры любят компьютерные игры, подписываются на паблики посвященные им, ищут моды, статьи, прохождения и все, что с ними связано. Но одну вещь я никак не могу понять, почему геймеры не интересуются игровыми иконками. Как-никак, они связаны с играми и хоть кто-то должен ими интересоваться, но как оказывается, тема иконок в какой-то параллельной реальности и интересуются ими единицы.
В общем, я тут подумал и решил популяризировать иконки, ну или попытаться. В этой статье я расскажу вам: кто такие эти иконки, зачем они нужны и в чем их отличие от значков и ярлыков. Как оказывается, эти термины путают 90% тех, кто ищет иконки. И это не удивительно, ведь все эти термины +- значат одно и тоже, но не совсем.
Что ты такое???Что такое ярлык, значок и иконка:
Я не буду вставлять здесь статью из википедии с заумными фразами и расскажу все своими словами. В интернете есть куча статей на тему того, что есть что, но они только создают большую путаницу и объединяют эти понятия. И так давайте разбираться.
Ярлык: В операционной системе Windows почти все программы и игры запускаются с файла, который заканчивается расширением .exe . Этот файл может быть с любым названием, но заканчиваться он должен именно .exe . Такие файлы называются «исполняемыми». Функция этих файлов заключается в запуске программ (игр)
Это исполняемый файл и именно он запускает игруТак вот ярлык — это, грубо говоря, телепорт к этому файлу, ну или ссылка. Никому ведь не хочется искать файл с запуском GTAV.exe по всему компьютеру, что бы поиграть в пятую гташечку. Именно поэтому при установке игры или программы в большинстве случаев автоматически создается ярлык на вашем рабочем столе.
Ярлык — это копия файла .exe и их разница в том, что при взаимодействии с ярлыком он обращается к файлу .exe (отличий конечно больше, но это уже совсем другая история)
Так и работаемОтличить ярлык от исполняемого файла можно, как уже писалось выше, расширением .exe, но беда в том, что по умолчанию в Windows расширения скрыты. Второй способ намного проще, на ярлыке всегда отображается маленькая стрелочка в левом нижнем углу значка (Смотри картинку выше)
Ну, и как вы уже поняли, ярлык — это далеко не иконка, но на ярлык можно поставить иконку.
Иконка: У многих при слове иконка воображение сходу выдает церковные иконы, но мы сегодня говорим не про них. Итак, в каждом исполняемом файле (это тот что заканчивается на .exe если кто забыл) содержится иконка. Иконка — это файл с расширением .ico, а ico — это сокращение от слова Icon, то есть иконка в переводе на Русский. В общем, это все, что нам нужно знать о том почему иконка так называется.
На вопрос, «что такое иконка?» многие отвечают банально — это значок. Нет, батенька, иконка — это не значок, иконка — это картинка (изображение), а еще точнее — это группа изображений. В одном файле .ico может содержаться куча изображений. Разница этих изображений в размере и используемом количестве цветов. Например: самые используемые размеры иконок в Windows 16×16 32×32 48×48 и 256×256 пикселей, но встречаются и совершенно другие.
Так выглядит файл Ico (иконка)Это было необходимо для того, чтобы при смене вида (например в папке) с «список» на «крупные значки» вы видели не мелкие бздюльки, а крупную красивую картинку
В новых версиях операционной системы отпала необходимость создавать иконки всех возможных размеров. Теперь достаточно одной картинки большего размера и система сама подгонит ее под нужный размер.
Сейчас самый популярный размер иконок это 512×512 пикселей. Как многие пишут, в Windows 10 максимальный размер иконки 256×256, но на больших экранах размер 512×512 будет выглядеть лучше. Так же не стоит забывать про сторонние программы, которые используют иконки. Для смены иконок в сторонних программах используется формат .PNG
Значок: Ну и давайте попробуем разобраться, что такое значок. Как вы уже поняли, многие ошибочно называют значком иконку, а иконку значком.
В интернете нет точного определения, что такое значок, но есть куча статей, вводящих в заблуждение и рассказывающих все так, будто значок и иконка — это одно и то же. Но как значок может быть иконкой, если иконка — это файл Ico? Даже иконку в формате PNG не совсем корректно называть иконкой, так как файл содержит всего одно изображение. Но с иконкой в формате PNG это еще хоть как-то вяжется с логикой, а со значком, ну никак.
В моем понимании, значок — это все вместе. Картинка, которая отображается и надпись под ней + информация о файле при виде «таблица, плитка и содержимое». Почему именно так? При нажатии на ярлык, папку или любой файл вокруг картинки и текста мы видим рамку. Так вот, рамка -это и есть границы нашего значка.
Обратите внимание на границы значковЗначок может существовать как без картинки (иконки), так и без текста, но без рамки, никак.
И такое бываетЭто дает нам право говорить, что значок — это все вместе и называть только отображаемую картинку значком неправильно. Так же можно заметить, что значок необязательно должен быть квадратной формы. Какое бы отображение значков мы не выбрали на вашем компуктере: что список, что крупные значки, что любой другой, у всех разная форма, а как мы знаем, иконка должна быть квадратной формы. Даже, если холст иконки будет прямоугольным, то Windows сама растянет иконку до квадрата.
Как мы видим, есть очень много нюансов, которые не позволяют нам называть значки иконками, но все эти термины ходят вокруг да около. Вот и получается путаница, но по сути это разные вещи. В тех же поисковиках, ища иконки, люди вбивают слово значок или ярлык (и это еще в лучшем случае), а потом удивляются, что не нашли то, что искали. Да и сама Microsoft грешит путаницей и предлагает заменить значок, а не иконку.
Давайте подведем итог:
Ярлык — это тот же .exe файл, но работающий удаленно (прим. с рабочего стола), но при выполнении операций, обращающийся к основному файлу (прим. в папке с игрой).
Иконка — это картинка или набор картинок разного размера, содержащиеся в файле .ico
Значок — это папка, ярлык или любой другой файл, которые могут содержать изображения (иконку),текст и информацию о файле.
Почему иконки нужны, почему иконки важны:
Надеюсь с терминами мне удалось все разъяснить и сейчас я объясню почему иконки важнее, чем может показаться.
Многие скажут, мол, сколько пользуюсь компудахтером, даже не обращаю внимания на то, какие в системе иконки и вообще мне со стандартными норм, и будут от части правы. С виду, действительно, неважно какая у вас иконка, ведь программа или игра будет работать одинаково, что со стандартной, что с новой.
Но есть все-таки у качественных иконок пару не совсем очевидных плюсов. Все мы знаем, что человек любит глазами. При взгляде на то что нам нравится, у нас невольно поднимается настроение или мы получаем удовольствие. Нам нравятся клевые тачки, красивые девушки, картины, природа, крутые и стильные девайсы и куча чего еще.
Почему многие так восхищаются айфонами? Можно услышать такие ответы как: он как продолжение твоей руки, в нем все на своих местах, отлично работает, стильно выглядит и им просто хочется пользоваться. На ютуб канале Droider.Ru есть отличное видео о том, почему иконки в айфоне выглядят лучше, чем в том же андроиде (рекомендую к просмотру). Да и вообще, становится понятно почему Apple так заморачиваются по поводу дизайна, что сменили внешний вид девайсов и иконок и подогнали под форму суперэллипсов. Даже такие мелочи, как иконки могут поменять внешний вид вашей системы, а в сочетании с обоями, темами и другими программами вообще изменить до неузнаваемости.
Такое незначительное изменение, как смена иконки, может повлиять на частоту запуска игры или программы, вызвать зависть у друзей или подписчиков или просто выделиться среди коллег. Почему вы достаете телефон когда вам скучно? Да потому что вам приятно им пользоваться. Подумайте и вспомните свои старые кнопочные телефоны и свой новенький смартфон. Если не брать в расчет функционал, а ограничиться дизайном и внешним видом, я с уверенностью в 100% могу сказать к какому девайсу у вас потянется рука.
Если до сих пор есть люди, которые думают, что вся это дизайнерская ерунда не важна, я бы порекомендовал установить вместо Windows XP, 7, 8 или 10 старенький добрый MS-Dos. Там нет никаких иконок, да и вообще, никакого графического интерфейса. Современные системы выглядят так именно потому, что развитие графики и новые подходы к управлению вытеснили старые интерфейсы и не без помощи иконок, разумеется.
Иконки в современном мире присутствуют везде, просто это стало настолько обыденным, что на них не обращаешь внимание. Ваш смартфон, планшет, умные часы истыканы иконками, ваш браузер, практически любой сайт и даже в поисковой строке, когда нам выдают результаты, мы видим фавиконку. А теперь представьте, что вместо этих иконок пусто или просто текст.
Как тебе такой интерфейс Илон МаскЧто то не айс да? И куда тянется ваш палец? первым делом на значек однокласников, даже если вы ими не пользуетесь. Понимаете в чем разница?
А теперь взгляните на картинку ниже.
До и ПослеЯ думаю все согласятся, что новые иконки выглядят куда приятнее и запускать такие игры вы будете явно чаще.
Есть куча программ для систематизации и сортировки ваших значков, упрощение запуска или просто для стильного отображения.
К примеру, всем известную и работающую с незапамятных времен легендарную RocketDock. Эта небольшая программка, которая зарекомендовала себя только с лучшей стороны. Она позволяет создать на рабочем столе панель для быстрого запуска игр и программ. Стильно компактно и нетребовательно к системе.
Нестареющая классика RocketDockЕсть у нее отличный клон ObjectDock, для тех кому мало одной панели. Можно сделать одну сверху, а вторую снизу (для игр и программ)
Также расскажу вам про одну программу под названием XLaunchPad. Эта программа, по моему скромному мнению, лучшая вещь для стилизации значков вашего рабочего стола. Удобная, красивая, многофункциональная. Она позволяет двойным кликом по рабочему столу открыть окно, в котором будут все ваши значки с играми и программами. В сочетании с качественными иконками это выглядит просто божественно. Особенно, когда иконки всех игр выглядят в одном стиле, это похоже на вашу полку с дисками на столе только в 1000 раз красивее и удобнее (еще и пыль не собирает). Программу даже можно приобрести в Steam
Вот такая красота появляется по двойному кликуА вот так бы она выглядела со стандартными иконками
Уже не так приятно, да?К сожалению, есть у этой программы и один недостаток. Недостаток в том, что разработчики плевать хотели на свой продукт и готовы только грести с него деньги. Есть в программе баг, из-за которого после перезапуска, рандомно слетает иконка, которую вы ранее установили. Я даже как-то писал разработчикам о проблеме, но вместо решения ее, меня просто забанили. В общем пользоваться или нет решайте сами.
Вообще, за время существования операционных систем Windows вышло огромное множество программ для организации ваших значков, но даже эти 3 могут изменить ваш опыт в использовании своего компьютера.
Ну и под конец, для тех, кто захотел изменить свой рабочий стол в лучшую сторону, но не знает где брать иконки.
Первым делом, я бы порекомендовал отправиться на сайт DeviantArt. Если кто и делает иконки, то с вероятностью 90% он выкладывает свои работы там.
Второй вариант, воспользоваться Яндекс.Картинками и при поиске использовать фильтры «Png» и «512×512» либо «256×256»
Ну и третий вариант, это зайти в раздел файлы на сайте PlayGround или ArtGamer
На этом все.
Поймут ли ваши иконки пользователи из других стран? Обзор научных исследований
Дизайнеры часто используют иконки для того, чтобы помочь пользователю быстрее находить нужные функции. Кажется, что иконки универсальнее, чем текст. Даже на браслете путешественника изображены иконки, потому что язык люди другой культуры не поймут, а в картинках разберутся.
Ученые попробовали проверить, так ли это и насколько отличается распознавание иконок у людей разных культур.
Отличаются ли американцы от корейцев в распознавании иконок?
Исследование корейских ученых Чжи Хе Ким и Гон Пхё Ли было представлено на седьмой конференции Mobile HCI в 2005 году в Зальцбурге.
Исследование проверяет три гипотезы:
- Буквальные и знакомые иконки работают лучше, чем новые и метафорические.
- У азиатов и европейцев распознавание иконок различается.
- Азиаты будут лучше распознавать буквальные иконки, чем европейцы
Участники
В исследовании участвовали 10 корейцев и 10 американцев.
Использовалось три сета иконок: совсем метафорические, более буквальные и максимально буквальные.
Иконки для списка вызовов, сообщений, загрузок, диктофона и браузера
Эксперимент
В первой части исследования участники должны были соединить иконки с подписями отдельно для каждого набора иконок. Измерялся процент ошибок и время выполнения.
Во второй части эксперимента участники должны были для каждой функции выбрать иконку, которая им нравится больше.
Результаты
Лучше всего все респонденты распознавали второй набор — не совсем буквальный и не совсем абстрактный.
Распознанные корейцами и американцами иконки для списка вызовов, сообщений, загрузок, диктофона и браузера
Корейцы лучше распознавали полуметафорические и буквальные иконки. Американцы лучше распознавали метафорические иконки.
Зависимость количества правильных ответов от сета иконок
Тем не менее исследователи признают, что группа была слишком маленькой, чтобы сделать какие-либо выводы, а разница — недостаточно значительной.
А еще они подозревают, что накосячили, разбивая иконки по сетам.
Cultural Difference and Mobile Phone Interface Design: Icon Recognition According to Level of Abstraction Чжи Хе Ким, Гон Пхё Ли.
Отличаются ли китайцы от американцев и немцев в распознавании иконок?
Исследование Сони Ауэр и Эстер Дик публиковалось на двенадцатой конференции HCI International 2007 в Пекине.
Исследование проверяет две гипотезы:
- Между распознаванием иконок американцами, китайцами и немцами различий не будет.
- Но при распознавании иконок, которые ассоциированы с языком группы (например, debug для американцев), у группы, для которой этот язык родной, распознавание будет лучше.
Участники
Всего в опросе участвовали 283 человека.
В исследовании не учитывались данные тех, кто сообщил о проблемах с правильным отображением опроса, и тех, кто живет в стране не с рождения.
Также исключали результаты тех, кто выбрал «ни один из этих значков» более чем в 36% случаев или более 60% иконок из одного семейства.
Чтобы получить равные размеры групп, выборка для каждой страны была сокращена до 45 участников.
Эксперимент
Опрос проходил в интернете, в течение двух месяцев. Реклама была размещена на нескольких новостных сайтах и в почтовых рассылках. Опросник был переведен на три языка: американский английский, немецкий и китайский.
Значки были сгруппированы так, как они группировались бы в реальном программном обеспечении: например, значки панели инструментов для настроек или значки на панели сообщений.
Пользователю было предложено выбрать значок, представляющий какую-либо функцию.
Чтобы результаты были качественными, значки в группах были представлены в случайной последовательности (чтобы избежать влияния порядка). Значков было больше, чем функций, которым они соответствовали (то есть нельзя было подобрать методом исключения).
Пользователь должен выбрать иконку, которая наиболее подходит к важным системным сообщениям, и указать, насколько он уверен в своем выборе
Иконки были двух типов: связанные с культурой и не связанные.
Например, на значке «Информация» буква I, первая буква слова Information служит подсказкой для участников из Германии и США, но не для участников из Китая.
Значок debug должен быть более понятен для участников из США, но не для участников из Германии или Китая, поскольку он основан на английской игре слов.
Результаты
Для пяти иконок, связанных с культурой, ученые обнаружили существенные различия между тремя национальностями.
Значки, которые в основном используют американскую культуру или язык, приводят к снижению уровня узнаваемости в китайской подгруппе, но также и в немецкой подгруппе, хотя и в меньшей степени.
Американцы правильно распознали 83,73% иконок, немцы — 78,81%, а китайцы — 68,85%. Но для иконок, связанных с культурой, правильных ответов было 86,22% у американцев, 66,22% — у немцев, 47,56% — у китайцев.
Слева — результаты для всех иконок, справа — для иконок, не связанных с культурой
Но даже после исключения значков, связанных с культурой, китайские пользователи по-прежнему распознавали иконки хуже других групп (73,24% против 81,55% у немцев и 83,19% у американцев).
Измеренные различия нельзя объяснить различным уровнем компьютерной грамотности. Исследователи сравнили самооценку начинающих, продвинутых и опытных пользователей.
When Does a Difference Make a Difference? A Snapshot on Global Icon Comprehensibility
Соня Ауэр, Эстер Дик
Отличаются ли мужчины и женщины в распознавании иконок?
Исследование так же было опубликовано на двенадцатой конференции HCI International 2007 в Пекине.
Ученые хотели прояснить два вопроса:
- Влияет ли гендер на распознавание разных типов иконок?
- Какие типы иконок любят тайваньские подростки?
Участники
В исследовании участвовали 60 человек от 16 до 24 лет — 33 женщины и 27 мужчин. Все использовали мобильный телефон больше 2 лет.
Эксперимент
Иконки разделили на три группы:
- Буквальные
Иконки, которые ссылаются на конкретный объект или визуализируют одну из его характеристик. - Метафорические
Визуализируют объект или понятие. Пользователь должен подключить воображение, чтобы понять их значение. - Произвольные
Не связаны с реальными объектами.
Иконки были представлены для функций: мультимедиа, запись звонка, настройки, контакты и сообщения.
Пользователи заполняли два опросника: в первом нужно было распознать, какой раздел обозначает иконка, во втором — указать, какая больше нравится.
Результаты
И юноши, и девушки лучше распознавали метафорические иконки, чуть хуже — буквальные, хуже всего распознавались произвольные иконки.
Но во всех трех категориях гендерная разница была незначительной.
Однако было обнаружено, что существует значительная гендерная разница в распознавании абстрактного значка для «Call Records» (Р = 0,019 < 0,05). Средний балл у женщин (0,91) был выше, чем у мужчин (0,67).
Во второй части эксперимента участники должны были оценивать несколько иконок для одной и той же функции по субъективному критерию «нравится / не нравится».
Обе группы отдали предпочтение буквальным иконам. Второе место по количеству очков получили метафорические иконки. Самая низкая оценка была у абстрактных значков. Это интересно, учитывая, что распознавали лучше всего метафорические иконки, но в рейтинге предпочтений они заняли всего лишь второе место.
Значимой гендерной разницы тоже не было выявлено.
The Effects of Gender Culture on Mobile Phone Icon Recognition
Shunan Chung, Chiyi Chau, Xufan Hsu, and Jim Jiunde Lee
Выводы
Представителям незападной культуры распознавать некоторые иконки тяжелее. Поэтому, если вы делаете международный продукт, стоит протестировать сет иконок на разных аудиториях.
Женщины и мужчины одной культуры распознают иконки одинаково.
Обзоры исследований на другие темы
Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
Красивое удобнее, чем некрасивое? Обзор исследований
Что такое фавикон (favicon) для сайта и зачем он нужен
Favicon – это пиктограмма (иконка) сайта, которая отображается в левой части перед названием страницы. Фавикон можно видеть в сниппетах поисковой выдачи Яндекса и Гугла, в закладках и во вкладках браузера. Нужен ли этот значок сайту, как он влияет на поведенческие метрики посетителей, помогает ли в продвижении? На все вопросы постараемся ответить в этой статье.
Что такое фавикон и зачем он нужен?
Название Favicon произошло от соединения двух английских слов: favorite – избранный и icon – значок. Фавиконка для сайта ассоциируется в сознании пользователей с определенным ресурсом в сети. В конкурентной среде эта небольшая пиктограмма помогает решать важные задачи:
- Улучшает отображение сайта в поисковой выдаче. Фавикон делает описание более заметным в визуальном плане, что положительно сказывается на кликабельности сниппета. Эффективно используя фавикон для сайта, можно выгодно выделить свой ресурс на фоне конкурентов. Например, придать картинке свойства СТА (call to action) – призыв к действию, изобразив стрелку, телефонную трубку или другую побуждающую инфографику.
- Повышает узнаваемость. У человека в эпоху клипового мышления развита визуальная память. Он не запоминает текст или названия, но очень хорошо откликается на яркую графику. Бренды, раскрученные сайты узнаются, в том числе, по фавикону. В 80% случаев пользователь в поиске кликнет на знакомую пиктограмму, даже если сниппет размещается на низкой позиции в выдаче ПС. Для продвижения компании часто используют маркетинговый прием: совмещают favicon для сайта с логотипом бренда. Это даёт двойной эффект – раскручивает ресурс в онлайн и повышает узнаваемость бренда в офлайне.
- Помогает лучше ориентироваться во вкладках и закладках браузера. Когда пользователь хочет найти нужную ссылку в браузерных закладках, он смотрит сначала на фавикон, а потом на описание. Если сохраненных сайтов много, то без наличия пиктограмм не просто найти необходимый ресурс.
Если не использовать favicon, то браузер покажет пустой квадратик напротив названия, сниппета вашего сайта. В 90% случаев страдает кликабельность, а соответственно снижается трафик и позиции в выдаче. Если для создания страниц использовались конструкторы, браузер выведет фавикон используемого сервиса. Хорошо это или плохо? Вы рекламируете услуги другого ресурса «забесплатно». Также вы повышаете количество отказов при переходах с поиска или РСЯ – пользователь, кликнув на известную пиктограмму, попадает на «не тот ресурс» и быстро уходит. Поэтому ставьте свою картинку, тем более сделать это не сложно.
Как сделать фавикон для сайта?
Пиктограмма для ресурса – это изображение в формате GIF, JPEG, PNG или SVG с разрешением ICO. Favicon для сайта размещается в корневом каталоге. Стандартные размеры – 16Х16, 32Х32, 60Х60 или 120Х120 пикселей. Для корректного отображения длина и ширина иконки должны быть равными. Если используете фавикон из картинки, подбирайте квадратные изображения.
Пиктограмма должна отвечать следующим критериям:
- Демонстрировать четкие ассоциации с тематикой сайта, деятельностью компании. Фавикон для сайта должен показывать отличие, вызывать желание кликнуть по нему. Создавая иконку, относитесь к ней, как к логотипу бренда – это поможет эффективно визуализировать концепцию.
- Простота, понятность. Не перегружайте фавикон дизайном или сложными формами. Небольшие размеры картинки не дадут рассмотреть всех деталей. Сделайте иконку лаконичной, внятно читаемой при беглом просмотре.
- Оригинальность. Не используйте типовые пиктограммы. Оптимальный вариант – закажите favicon дизайнерам или фрилансерам. Трудно переоценить значение узнаваемости и дифференциации бренда для успешного продвижения бизнеса онлайн.
Как разместить favicon на сайте?
В 90% случаев картинка устанавливается с помощью плагинов или встроенных опций, которые используются в CMS. Ручной вариант предполагает размещение иконки в корневой папке сайта. В код между тегами на главной прописывается следующее значение:
< link rel="icon" href="http://путь до фавиконки" type=" image/формат картинки" > В некоторых случаях для правильного отображения пиктограммы на гаджетах, может понадобиться прописать следующий код:
rel=»apple-touch-icon»
Как Яндекс работает с фавиконами?
Иконка не сразу появится в результат выдачи ПС. Новая фавиконка проходит индексацию Яндекса 2-3 недели после того, как поисковые роботы найдут ссылки на картинку в коде. Роботы скачивают пиктограмму в свою лабораторию, проверяют и через 10-14 дней добавляется в общую базу иконок.
Для быстрой индексации важно прописать ссылку на фавикон в коде главной страницы сайта. Также проверьте ответ Яндекса – сервер должен вернуть значение 200 ОК. Внимательно проверьте, нет ли запрета индексации в robots.txt.
Сервисы для создания пиктограмм
Для самостоятельного создания иконки сайта используйте:
- favicon.ru – можно нарисовать картинку самим, использовать готовые решения, преобразовать файл в нужный формат. Есть платные услуги дизайнеров.
- pr-cy.ru – в специальном разделе сервиса можно обработать картинку под иконку сайта, задать нужный размер и формат.
- favicon.cc – хороший инструментарий для самостоятельного моделирования пиктограмм, есть платные услуги.
Резюме
Мы узнали, что такое фавикон. Рассмотрели его назначение, критерии эффективности и особенности индексации Яндексом. Иконку для сайта необходимо использовать как в эстетических, так и в практических целях.
Иконки для визиток, контактов и соц сетей, векторные и растровые
На своей визитной карточке вы можете размещать не только контактные данные. Сделать ее интереснее и привлекательнее помогут иконки для визиток. Применяя их, можно дать больше информации о себе и своей компании. В том числе с их помощью можно давать свои дополнительные контактные данные.
Визитка с иконками контактов.В целом значки используются не только в полиграфии. Они нашли широкое применение в веб-проектах. В любом случае их предназначением является обозначение действий, ресурсов, видов деятельности и т. д.
Что такое иконки для визитки?Средний размер иконок и пиктограмм на визитке 3-5 мм, все зависит от дизайна иконки и стиля визитной карточки.
Их называют еще значками, пиктограммами, а представляют они собой графические элементы, размещаемые на пространстве визитной карточки для различных обозначений. Один из примеров – иконки соцсетей. Например, на своей визитной карточке вы желаете дать не только свой номер телефона, адрес офиса, но и ссылки на профили в социальных сетях, по которым можно вас найти и связаться с вами.
Очень простое и понятное решение использовать для этого набор иконок с обозначениями этих социальных сетей, которые известны и узнаваемы всеми. По сути это логотипы данных ресурсов, изображая которые на своей визитной карточке, вы обозначаете, на каком именно ресурсе вас можно найти по определенной ссылке. Это может быть иконка инстаграм для визитки, Facebook, Вк, Телеграмм, Skype, Viber и т. д.
Визитки с иконками соц сетей, для сохранения фирменного стиля перекрашены в один цвет..Использование значков – не новшество при печати визиток. Даже до появления такого количества соцсетей и прочих веб-ресурсов, используемых сегодня, в визитных карточках применялись такие значки. Например, иконка телефона без лишних слов поясняет, что за ним последует номер телефона обладателя промоматериала. Это пример и тому, насколько удобным является применение таких значков. Они не только позволяют сэкономить пространство визитки на выполнении надписей, но и позволяют разнообразить дизайн промоматериалов дополнительными графическими элементами.
Множество разнообразных иконок телефона которые можно использовать на визитках.Еще один пример использования таких обозначений – использование пиктограмм, указывающих на деятельность своего обладателя. Например, строитель может использовать для своей визитной карточке изображение каски, молотка, прочего строительного инструмента. По аналогии, на визитке парикмахера могут использоваться иконки, изображающие ножницы, на визитной карточке врача – чаша, обвитая змеей, на промоматериалах тренера по теннису – теннисные ракетки с мячом и т. д.
Дизайн визитки салона красоты оформлен с иконкой ножниц. Виды значковПо формату, в котором они выполнены, пиктограммы бывают таких видов:
- В формате EPS. Это значки, выполненные в векторе;
- Иконки для визиток PNG с прозрачным фоном. Они представляют собой растровые изображения.
Чаще используются векторные иконки для визиток, поскольку этот вариант имеет некоторые преимущества. Одно из них заключается в том, что изображения легко масштабировать. Кроме того, они обладают небольшим весом. Недостатком таких значков является невозможность применять для их дизайна обилие оттенков одного цветового диапазона. В этом вопросе растровые значки превосходят векторные – они могут иметь разные цвета и массу их оттенков, градиентов. Благодаря этому изображение получаются красочными.
Векторные значки бывают однотонными и цветными. Если изображения некрупные, целесообразно выполнять их в одном цвете, поскольку обилие тонов в них будет сливаться. Значки для визиток могут иметь плоский или объемный вид. Если в целом дизайн визитки лаконичный, то более подходящим вариантом будут плоские изображения.
Выбирая пиктограммы для печатной продукции, нужно ориентироваться на ее дизайн. Если он строгий, то желательно подбирать однотонные некрупные варианты. Знаки для визиток для креативных промоматериалов тоже могут отличаться броским оформлением.
Если используются пиктограммы соцсетей, мессенджеров, часто используются стандартные их цвета. Но можно изменять их, чтобы гармонично вписать в дизайн промоматериалов. Будь то знак инстраграм, Вк, Фейсбука, Вайбера, Скайпа или другой сети, придавать им можно любой цвет, можно даже выполнять их в черно-белой гамме. В любом случае они будут узнаваемыми. Можно даже выполнить их под фирменный стиль вашей компании.
Векторные иконки контактов. Где взять иконки для визитки?Можно заказать их разработку у профессионального графического дизайнера, который выполнит в точности в соответствие с вашими требованиями. Но такая услуга не бесплатна, и стоить она может недешево. К тому же, ее выполнение займет время. Поэтому гораздо проще, быстрее и дешевле будет скачать иконки для визиток из интернета.
Бесплатные иконки можно найти в публичном доступе, но не следует забывать об авторском праве. Многие банки пиктограмм для визитных карточек предлагают бесплатно скачать их, при этом указано, что это графика доступна для публичного пользования. В сети можно найти массу вариантов иконок, имеющих самые разные дизайны. Среди них вы обязательно сможете подобрать подходящий для себя набор.
После вам нужно будет просто через фотошоп или другие графические редакторы разместить пиктограммы для визитки на пространстве промоматериала. Даже значки, ассоциирующиеся с различными профессиями, видами деятельности, можно найти в интернете. А для печати полиграфической продукции следует воспользоваться услугами хорошо зарекомендовавшей себя типографии.
Основные информационные иконки и иконки соцсетей которые мы используем в своем дизайне
Скачать иконки для визиток
Самые распространенные иконки используемые в дизайне визиток в векторном формате.
Определение значка по Merriam-Webster
\ Ī-kän \ варианты: или реже ikon1а : графический символ на экране дисплея компьютера, который представляет приложение, объект (например, файл) или функцию (например, команду для сохранения).
б : знак (например, слово или графический символ), форма которого предполагает его значение.
2 : объект некритической преданности : идол 3 : эмблема, символ дом стал иконой жилой архитектуры 1960-х — Пол Голдбергер4 [Позднегреческий eikōn , с греческого] : обычное религиозное изображение, обычно нарисованное на небольшой деревянной панели и используемое в религиозных обрядах восточных христиан.
5 : обычно графическое изображение : изображениеЧто такое значок? Определение и значение
Значок может относиться к графическому символу, который мы используем в графическом интерфейсе пользователя (графический интерфейс пользователя).Иногда мы используем значки в веб-документах, чтобы идентифицировать программу , устройство, папку или файл. Например, значок может представлять модем, принтер или накопитель. Когда мы нажимаем на значок, мы активируем его, т.е. либо запускается операция, либо открывается окно.
Если я описываю кого-то как значок, я говорю, что они важны как символ чего-то. Например, Пикассо и Мэрилин Монро были иконами модернизма и Голливуда середины 20-го века соответственно.
Мы иногда используем этот термин, когда ссылаемся на изображение Иисуса Христа, Девы Марии или святого, нарисованное на деревянной панели.
Словарь Коллинза имеет следующее значение термина при обращении к изображению на экране компьютера:
«Значок — это изображение на экране компьютера, представляющее определенную функцию компьютера.Если вы хотите использовать его, вы перемещаете курсор на значок с помощью мыши ».
Термин «икона» появился в 1570-х годах в английском языке со значением «фигура, изображение, изображение», а также «статуя». Он произошел от позднелатинского «икона», которое произошло от греческого «эйкон». с компьютерным чутьем в 1982 г. (Источник данных: etymonline.com) Значок на экране компьютераКогда они появляются на экранах компьютеров, значки представляют собой маленькие изображения, которые представляют объектов или программ .
Они чрезвычайно полезны в приложениях Windows. Они полезны, потому что, щелкая мышью, вы можете сжать все окно до крошечного значка. Мы также называем эту процедуру сжатия окна «, минимизируя ».
Если вы хотите повторно отобразить окно, просто переместите курсор на значок и щелкните. Возможно, вам придется щелкнуть один или два раза. Мы также используем термины «, увеличивая » или «, восстанавливая », когда говорим о повторном отображении окна.
Виды значковЕсть стандартных значков электрических устройств, значков, метафор рабочего стола, значков и значков марки для коммерческого программного обеспечения.
Иконки для стандартных электрических устройствНекоторые общие компьютерные значки происходят из более широкого диапазона стандартизованных значков. Это значки, которые мы используем в широком спектре электрического оборудования.
Например, многие электрические устройства используют символы USB и питания.
Большинство электронных и электрических устройств имеют стандартные значки в качестве элементов безопасности. Они также помогают владельцам узнать, для чего нужны конкретные кнопки и заглушки и куда они идут.
Метафоры рабочего столаЗначки могут быть гиперссылками, которые представляют офисные объекты или предметы в нашей среде рабочего стола. Например, они могут представлять папку «Входящие», принтер, корзину, папку или файл.
Гиперссылка — это текст или изображение, которые переводят посетителя в другую часть веб-страницы, на другую страницу того же веб-сайта или на другой веб-сайт.Гиперссылка на рабочем столе, если вы нажмете на нее, переместит вас в другую часть вашей системы.
Эти метафоры рабочего стола изначально позволяли пользователям, знакомым с офисными процедурами, интуитивно перемещаться по рабочим столам своих компьютеров.
Что касается метафор рабочего стола, Википедия говорит:
«Значки обозначают объекты или функции, доступные в системе, и позволяют пользователю выполнять задачи, общие для офисного помещения».
Брендовые иконки для программного обеспеченияМы часто можем идентифицировать сторонние программы, которые доступны на экранах наших компьютеров, в виде значков.Эти значки брендов обычно появляются на экранах новых компьютеров. Другими словами, они являются частью набора продуктов, которые поставляются с новыми устройствами.
Они похожи на значки гиперссылок, описанные выше, в том смысле, что они представляют функции, доступные в системе.
Компании будут тратить деньги на иконку бренда, потому что она представляет определенный коммерческий продукт. Они будут платить коммерческим художникам за их дизайн.
Термин « бренд » может означать название продукта, изображение компании, логотип или слоган.
Что такое значок — Windows
Эта статья содержит информацию по следующим темам:
• В чем разница между изображением и икона?
• Как устроен значок?
• Какие форматы изображений я должен включать в свои значки?
• Что такое формат значка RGB с альфа-каналом?
• Можно ли сохранить значок в файл?
• Можно ли сохранить несколько иконок в один файл?
• Что нового в Windows Vista ™ Иконки?
• Как создать иконку?
Иконка — графическое изображение, маленькая картинка или объект, представляющий файл, программу, веб-страницу или команду.Иконки поможет вам быстро выполнять команды, открывать программы или документы. Выполнить команду с помощью значка, щелкните или дважды щелкните значок. Это также полезно для быстрого распознавания объекта в списке браузера. Например, все документы с одинаковым расширением имеют одинаковый значок.
Это почти все, что вам нужно знать, если вы используете только значки. Но чтобы создавать иконки, что является целью Axialis IconWorkshop ™, вам нужно больше о них.В чем разница между стандартным изображение и изображение значка? Как устроен значок? Как создать значок, который будет правильно отображаться во всех конфигурациях экрана (размер, цвета…)? Можно ли сохранить значок в файл? Можем ли мы собрать несколько иконок в один файл? А как насчет нового формата значков Windows® XP?
В чем разница между изображением и значком?
А компьютерное изображение — это растровое изображение (состоящее из пикселей) или векторное (состоящее из рисование путей) изображение, которое может быть сохранено в различных форматах (BMP, PSD, GIF, JPEG, WMF…). Все эти форматы имеют несколько различных свойств. (растровые изображения, векторы, сжатые, многослойные, анимированные …) и могут использоваться для хранить картинки любых размеров и разрешений.
Иконки отличаются от стандартных изображений. Они имеют стандартные размеры (обычно small): 16×16, 32×32, 48×48 … Один значок состоит из нескольких изображений. Каждый из них имеет разный размер и количество цветов (моно, 16 цветов, 256 цветов, 16,8 млн …). И самое главное свойство иконки — это возможность включать прозрачные области.Это позволяет видеть фон экрана за значком внутри его квадратного изображения (см. иллюстрацию ниже).
Начало страницы
Как устроен значок?
Значок — это группа изображений различных форматов (размера и цвета). Кроме того, каждое изображение может включать прозрачную область. Вот почему вы найдете прозрачный цвет в палитре рисования для 16 или 256 цветных изображений и переменной непрозрачности параметр с использованием альфа-канала для нового формата изображения RGB / A (opacity = 0 означает прозрачный).
Вы необходимо включить несколько изображений в значок, чтобы разрешить Windows® или Macintosh® ОС, чтобы выбрать соответствующий формат при отображении на экране. Это может изменение в зависимости от количества цветов на экране и места отображения. Например, на панели задач Windows® значки отображаются с использованием формата изображения 16×16 и на рабочем столе они отображаются в большем размере (48×48, 96×96, 256×256). В Windows Vista ™ используются некоторые промежуточные размеры (24×24, 32,32, 48×48 и 64×64).Если размер значка не указан, Windows Vista ™ отображает его автоматически, изменяя «на лету» самый большой размер 256×256.
Macintosh® OSX использует большие форматы 128×128, 256×256 и даже 512×512 в OSX 10.5. Все эти форматы включают альфа-канал для создает плавную прозрачность и позволяет создавать приятные эффекты изменения размера.
Это очень важно для создания нескольких форматы изображений в значке (особенно если вы хотите его распространять) для совместимости со всеми конфигурациями экрана.Axialis IconWorkshop ™ включает мощную функцию, которая позволяет создавать новые форматы на основе существующих изображений в несколько кликов.
Формат изображения 128×128 используется под Macintosh® Только ОС 10.0 или более поздняя. OSX 10.4 (кодовое имя «Тигр») поддерживает значки размером до 256×256. OSX 10.4 (кодовое имя Leopard) поддерживает значки размером до 512×512. Axialis IconWorkshop ™ полностью поддерживает создание и редакция OSX иконки размером до 256×256 и 512×512.
Windows® XP не отображает значки в формате 128×128 в обычном режиме. режим.По умолчанию отображение значков в версиях Windows® до Microsoft Vista ™ ограничено значками 48×48. Microsoft Windows Vista ™ поддерживает форматы иконок до 256×256 со сжатием. Axialis IconWorkshop ™ полностью поддерживает создание и выпуск Windows Vista ™ иконы. Чтобы узнать больше, прочтите эту тему: «Представляем Иконки Windows Vista ™ ».
Начало страницы
Какие форматы изображений я должен включать в свои значки?
Для совместимости со всеми витринами и конфигурации экрана, вы должны подумать о создании значков, содержащих различные форматы изображений.Ниже приведены минимальные и рекомендуемые форматы для разных версий ОС:
Windows® 95, Windows® 98, Windows® ME, Windows® 2000
• Рекомендуется: 48×48 (256 цветов, 16 цветов), 32×32 (256 цветов, 16 цветов), 16×16 (256 цветов, 16 цветов).
• Минимум: 32×32 (256 цветов, 16 цветов), 16×16 (256 цветов, 16 цветов).
Windows® XP
• Рекомендуется: 48×48 (RGB / A, 256 цветов, 16 цветов), 32×32 (RGB / A, 256 цветов, 16 цветов), 24×24 (RGB / A, 256 цветов, 16 цветов), 16×16 (RGB / A, 256 цветов, 16 цветов).
• Минимум: 32×32 (RGB / A, 256 цветов, 16 цветов), 16×16 (RGB / A, 256 цветов, 16 цветов).
• Дополнительно: 128×128 (RGB / A).
Windows Vista ™
• Рекомендуется: 256×256 (RGB / A), 64×64 (RGB / A), 48×48 (RGB / A, 256 цветов, 16 цветов), 32×32 (RGB / A, 256 цветов, 16 цветов ), 24×24 (RGB / A, 256 цветов, 16 цветов), 16×16 (RGB / A, 256 цветов, 16 цветов).
• Минимум: 256×256 (RGB / A), 48×48 (RGB / A, 256 цветов), 32×32 (RGB / A, 256 цветов), 16×16 (RGB / A, 256 цветов).
• Дополнительно: 256×256 (256 цветов, 16 цветов), 64×64 (256 цветов, 16 цветов), возможны другие форматы для работы с экранами HIDPI (см. Ниже).
Если вы создадите значок для последних версий Windows®, совместимость с предыдущими версиями будет обеспечена.Например, если вы создадите значок, содержащий изображение 256×256 для Windows Vista ™, он будет нормально отображаться в Windiws® XP. Основываясь на наших тестах, мы обнаружили единственное исключение: если вы добавляете форматы изображений 24×24 в ваш значок, он не будет совместим с Windows®98 и Windows®2000. Значок отображается правильно в IconWorkshop ™, но будет считается недействительным Windows®.
Windows Vista / 7/8/10 для экранов Hi-DPI
На экранах с высоким разрешением (LDC-экраны с высоким разрешением DPI) Windows будет уменьшать изображение до размеров от 64×64 до 256×256.Если вы хотите, чтобы ваш значок был совместим с будущими экранами, мы рекомендуем вам добавить следующие размеры:
• Рекомендуется: 256×256 (RGB / A), 64×64 (RGB / A, 256 цветов), 48×48 (RGB / A, 256 цветов), 40×40 (RGB / A, 256 цветов), 32×32 (RGB / A, 256 цветов), 24×24 (RGB / A, 256 цветов), 22×22 (RGB / A, 256 цветов), 16×16 (RGB / A, 256 цветов).
Примеры коэффициентов масштабирования, применяемых к некоторым распространенным размерам значков:
| DPI | Масштабный коэффициент | 16×16 Размер значка | 32×32 Размер значка | 48×48 Размер значка | |
| 96 | 100% | 16×16 | 32×32 | 48×48 | |
| 120 | 137% | 22×22 | 40×40 | 66×66 (масштабировано по коду) | |
| 144 | 150% | 24×24 | 48×48 | 72×72 (масштабировано по коду) | |
| 192 | 200% | 32×32 | 64×64 | 96×96 (масштабировано по коду) |
Macintosh® OSX
• Рекомендуется: 128×128 (RGB / A), 48×48 (RGB / A, 256 цветов, 16 цветов), 32×32 (RGB / A, 256 цветов, 16 цветов, моно), 16×16 (RGB / А, 256 цветов, 16 цветов).
• Минимум: 48×48 (RGB / A, 256 цветов), 32×32 (RGB / A, 256 цветов), 16×16 (RGB / A, 256 цветов).
Macintosh® OSX 10.4 Tiger
• Рекомендуется: 256×256 (RGB / A), 128×128 (RGB / A), 48×48 (RGB / A, 256 цветов, 16 цветов), 32×32 (RGB / A, 256 цветов, 16 цветов , моно), 16×16 (RGB / A, 256 цветов, 16 цветов).
• Минимум: 128×128 (RGB / A), 48×48 (RGB / A, 256 цветов), 32×32 (RGB / A, 256 цветов), 16×16 (RGB / A, 256 цветов) .
Macintosh® OSX 10.5 Leopard
• Рекомендуется: 256×256 (RGB / A), 128×128 (RGB / A), 48×48 (RGB / A, 256 цветов, 16 цветов), 32×32 (RGB / A, 256 цветов, 16 цветов , моно), 16×16 (RGB / A, 256 цветов, 16 цветов).
• Минимум: 128×128 (RGB / A), 48×48 (RGB / A, 256 цветов), 32×32 (RGB / A, 256 цветов), 16×16 (RGB / A, 256 цветов) .
• Дополнительно: 512×512 (RGB / A).
Ниже приводится сводка стандартных форматов изображений, которые должны быть включены в значки. Если формат изображения отсутствует, Windows® отображает ближайшее существующее изображение. Полученное изображение обычно размытое и искаженное.
Начало страницы
Что такое формат значков RGB с альфа-каналом?
Этот формат изображения, также называемый RGB / A, содержит 16,8 млн цветов. закодирован в RGB плюс дополнительный канал непрозрачности. Этот канал называется «Альфа-канал».Каждый канал кодируется с использованием 8 бит на пиксель. В результате каждый пиксель кодируется 32-битным (32 BPP — бит на пиксель). См. Иллюстрацию ниже, чтобы понять, как организованы каналы в изображение RGB / A.
Это новый формат изображений, который можно найти в иконках нового поколения. Этот формат изображения называется Windows®. XP RGB / A от Axialis IconWorkshop ™.
Главное преимущество этого формата изображения заключается в том, что он позволяет отображать плавную прозрачность значков.Результирующий изображение отображается с плавными контурами на всех фонах. Это позволяет также для создания падающих теней за иконками. Этот интересный эффект, который рекомендуется Microsoft, обычно используется в значках Windows® XP.
Следующая иллюстрация показывает разницу между прозрачностью стандартного формата изображения (в 256 цветовых форматов, например) и новой гладкой прозрачности Windows® XP:
Поддержка значков Windows® и Macintosh® RGB / A изображения.Эти значки могут отображаться в Windows® XP, Windows Vista ™ и в Macintosh®OS 10 или более поздней версии. Старые системы не поддерживают значки RGB / A. Это причина, по которой вам нужно включить в свои значки другие стандартные форматы.
Начало страницы
Можно ли сохранить значок в файл?
Да, файл значка Windows® имеет расширение «ICO». Расширения для значков Macintosh®: «ICNS», «RSC», «РСНЦ» и «БИН». В папке можно сохранить только один значок. файл значка.Если вы хотите сгруппировать несколько значков в файле, вы должны создать библиотека (см. ниже).
Axialis IconWorkshop ™ полностью поддерживает файлы значков Windows® и Macintosh®. Вы можете творить, читать и сохранять значки, используя эти форматы файлов. Формат MacBinary «BIN» используется для передачи значков между Windows® и Macintosh® с сохранением ресурсов Macintosh® вилки (см. «Macintosh® vs Иконки Windows® », чтобы узнать больше).
Начало страницы
Можно ли сохранить несколько иконок в один файл?
Да, вы можете собрать несколько иконок в один файл под названием Библиотека значков.Расширение стандартной библиотеки значков — ICL.
Axialis IconWorkshop ™ полностью поддерживает файлы ICL. Он может создавать, читать и сохранять файлы библиотеки ICL. Кроме того, ICL полностью поддерживается всеми версиями Windows®. Например, вы можете настроить ярлык Windows®, выбрав новый значок в ICL файл. Если вы управляете большим количеством иконок, рекомендуем хранить их в файлах ICL. Размер файла ICL ограничен 64 МБ.
Создание библиотек значков Macintosh® пока не поддерживается пользователя Axialis IconWorkshop ™.Однако вы можете читать файлы RSRC с несколькими встроенными значками, а также Библиотеки Icontainer. Кроме того, вы можете сохранить значки Macintosh® в ICL. файлы. Небольшое наложенное изображение позволяет различать их в Axialis IconWorkshopä. Однако ты не сможешь чтобы открыть эти файлы ICL в Macintosh®OS. Будущие версии Axialis IconWorkshop ™ будет поддерживать Создание библиотеки значков Macintosh®.
Начало страницы
Что нового в Windows Vista ™ Иконки?
Microsoft Windows Vista пришла с новым формат иконок с поддержкой сжатия PNG и размером до 256×256.В Стандартные значки Windows Vista или более поздней версии включают следующие форматы изображений (серые форматы не являются обязательными):
| 256×256 — RGB / A | 64×64 — RGB / A | 48×48 — RGB / A | 32×32 — RGB / A | 24×24 — RGB / A | 16×16 — RGB / A |
| 256×256 — 256c | 64×64 — 256c | 48×48 — 256c | 32×32 — 256c | 24×24 — 256c | 16×16 — 256c |
| 256×256 — 16c | 64×64 — 16c | 48×48 — 16c | 32×32 — 16c | 24×24 — 16c | 16×16 — 16c |
Проблема: если просто сделать значок и сохраните его в стандартном формате Windows® XP ICO, получившийся файл будет 400Кб на диске.Решение состоит в том, чтобы сжать изображения. Только Изображения 256×256 сжимаются. Используемая схема сжатия — PNG (Portable Сетевая графика), потому что он имеет хорошее соотношение без потерь и поддерживает альфа-канал. канал. Размеры сжатых значков: От 100 КБ до 150 КБ.
Axialis IconWorkshop ™ позволяет создавать Windows Vista ™ иконы. Чтобы узнать больше о Windows Vista ™ иконки и как их создавать с помощью Axialis IconWorkshop ™, прочтите эту статью: «Представляем Иконки Windows Vista ™ ».
Начало страницы
Как создать иконку?
Графика — один из основных способов рекламы продажа товаров или услуг. Это верно для вычислений при разработке программного обеспечения. или интерфейсы веб-сайтов. Основное решение — рисовать значки, используя либо изображение или вектор редактор. Затем, когда изображение будет готово, используйте Axialis IconWorkshop ™. преобразовать это изображение к иконке. Если вы не используете внешний редактор изображений, Axialis IconWorkshop ™ содержит некоторые инструменты для рисования, которые позволяет вам рисовать свои собственные значки.
Axialis IconWorkshop ™ предлагает альтернативные решения для пользователей Adobe Photoshop® и программистов, не имеющих навыков рисования.
Использование шаблонов проектов для Photoshop®
Если вы работаете с Adobe Photoshop®, была добавлена новая функция, которая позволяет рисовать значок в различных размерах и автоматически экспортировать его в IconWorkshop ™. В результате автоматически создается значок со всеми его форматами (см. Ниже). Было добавлено несколько готовых к использованию шаблонов для создания значков Windows® и Macintosh®.Чтобы узнать, как создать значок с помощью шаблонов Photoshop, прочтите этот урок.
Использование объектов изображения
Большинство из нас не графические дизайнеры и у нас есть проблема, когда дело доходит до создания привлекательных иконок или веб- графика. Возникает вопрос: «Каким образом создавать привлекательные пользовательские значки без навыков рисования? » Объекты изображения — вот ответ.
Решение состоит в том, чтобы использовать уже набор объектов изображения выполненный опытным художником-компьютерщиком, и собирающий их вместе чтобы создать окончательное произведение искусства, которое будет соответствовать вашим потребностям.Используя набор существующих объекты изображения возможности практически безграничны. Вы можете создать много различные значки или графику, просто регулируя различные параметры каждый объект, такой как оттенок (оттенок), насыщенность, яркость, контрастность, размер, непрозрачность и более:
Эту ассоциацию легко сделано с помощью Axialis IconWorkshop ™ с помощью нескольких щелчков мыши и перетаскивания. Создание разных версий иконки очень просто с пакетом объектов.См. Ниже несколько примеров значок справки, сделанный за несколько минут, просто с помощью мыши и без отрисовка одного пикселя (конечно, неполный список!):
Начало страницы
Что такое значок? А чем он отличается от пиктограммы?
Иконки — это небольшие дизайны с большим функциональным воздействием. В дизайне это означает, что вы можете сконцентрировать большое количество информации в ее минимальной форме выражения. Однако в других дисциплинах значки имеют другое значение.
Имея это в виду, графический дизайнер и энтузиаст иконок Гермес Мазали (@hmazali) делится некоторыми из этих значений с сообществом Domestika и дает нам несколько советов, как распознать значок и отличить его от пиктограммы.
Что такое значок?
Значок — это символ, который сохраняет сходство с объектом, который он представляет. Слово происходит от греческого eikon, что означает «образ» и «ключ». Как правило, значки используются для передачи информации без слов.
Это символы с высокой степенью смысла, и их легко декодировать, но иногда им требуется привязка для лучшей интерпретации. Иконки начинаются с концепции и собственного стиля и передают сообщение или функцию. Для них характерны соответствующий визуальный подход, их графическая свобода и цветовая палитра.
Иконки содержат необходимый баланс функций, синтеза и эстетики, чтобы создать язык, понятный каждому, независимо от языка, расы или возраста.Ключ состоит в том, чтобы хранить большой объем информации в чем-то минимальном, что могло бы немедленно доставить сообщение.
Каковы основные области применения иконок?
Поскольку они являются мощным средством визуальной коммуникации, их можно использовать в различных системах и средствах массовой информации: в зданиях, в вывесках, в музеях, аэропортах и во многих других корпоративных приложениях. Они также применяются в средствах массовой информации и инфографике, в дизайне пользовательских интерфейсов, в мобильных устройствах и для использования в Интернете.
В основном значки используются в цифровом мире и в мультимедийном дизайне.
Теперь, когда мы знаем, что такое значок, и прежде чем приступить к его разработке, мы должны сначала понять, что отличает значки от пиктограмм.
В чем разница между значками и пиктограммами?
Главное отличие в том, что икона обладает большей художественной свободой. Пиктограмма схематично представляет символы и предметы без деталей. Можно сказать, что это визуальное представление определенного объекта с высокой степенью абстракции.
Ограничения пиктограммы более значительны, чем ограничения значка, потому что ее значение всегда должно быть ясным и должно признаваться любой культурой, языком, страной или верой.Пиктограмма должна быть предельно синтезирована, сведена к самому простому выражению.
Многие пиктограммы обычно используются на предупреждающих и защитных знаках. Они более объективны и формальны, а их стиль ограничен и строг. Ключ к их идентификации — это то, что они выглядят как силуэты. Пиктограммы более формальные, а значки, эстетически говоря, более увлекательны для передачи сообщения или концепции.
Гермес Мазали ведет курс Domestika «Введение в дизайн иконок» — отличный способ изучить процесс, приемы и методы создания собственного семейства иконок, от создания до экспорта на различные носители.
Вам также может понравиться:
— Дизайн пиктограмм, курс Ромуальдо Фаура.
— Создание оригинального логотипа с нуля, курс от Tatabi Studio.
— Сьюзен Каре: знаковая карьера.
Итак, в чем разница между значками и символами в веб-дизайне?
В рамках ребрендинга и интеграции Hubspot нового веб-сайта oe: gen я создал несколько изображений для набора значков, которые будут использоваться по всему сайту. Отрисованные вручную изображения используются для передачи индивидуального подхода и намеков на работу, проделанную за кулисами — грубые наброски на стартовых встречах, каркасы липких заметок, каракули на белой доске — в основном все решает.Мы надеемся, что они привнесут индивидуальность и в новый бренд — oe: gen не относятся к себе слишком серьезно и являются очень доступной группой профессионалов.
Что касается домашней страницы, я полагал, что раздел «услуги» лучше всего будет представлен простыми геометрическими фигурами, а не значками, чтобы освободить их от предвзятых идей. Такие изображения, как лампочка для маркетинга, рукопожатие для продажи, значок пользователя для клиента. Я рассудил, что форма может выражать что-то, что имеет более глубокое значение с различными аспектами, по сравнению с простой иконкой, которую люди использовали снова и снова.Однако подход был бы другим, если бы мы говорили о дизайне интерфейса.
Дизайн, ориентированный на рост
Мы применили подход к проектированию, ориентированному на рост, к проектам в oe: gen, поэтому мы открыли внутренний канал Slack для сбора первоначальных отзывов.
Разве значки не должны заставлять вас думать? Нет смысла заставлять посетителя покидать сайт, потому что он не осознавал, что все ответы, которые они искали, скрывались за немного странным значком.
Очевидно, не все считали изображения чем-то символическим, а скорее знаковыми (и немного причудливыми).Для пояснения я быстро погуглил различия между значком и символом. Вот как Марк Бултон описывает значок-знак, индексный знак и символы:
Знак-значок — это знак, который чем-то напоминает, например, фотографии людей. Значок также может быть иллюстративным или схематическим, например, знак «не курить».
Знак индекса — это знак, в котором есть прямая связь между знаком и объектом. Большинство дорожных знаков являются указателями, поскольку они представляют информацию, относящуюся к местоположению (например, знак «скользкая дорога», установленный на дороге, которая подвержена затоплению)
Символы — символ не имеет логического значения между это и объект.К сожалению, в Интернете полно плохих примеров такого типа знаков, но есть и хорошие — например, значок домашней страницы, который представляет собой дом. Другие символы вне экрана, которые могут помочь объяснить разницу, — это флаги. Флаги — это символы, которые представляют страны или организации. Опять же, переход к дизайну и брендингу очень очевиден в этих знаках.
Итак, в чем разница между значками и символами?
И символы, и значки представляют другие вещи, но значок — это графическое представление продукта, который он обозначает, тогда как символ не похож на то, что он обозначает.
Символ представляет продукты или идеи, тогда как значки представляют только видимые элементы.
Иконки ограничены графическим представлением объектов, и можно легко понять, что они обозначают. С другой стороны, вы должны узнать, что означает символ.
Фирменные гадости
Единственное, чего может не хватать на веб-сайте, — это связь и недооценка (образование) того, что формы представляют в рамках бренда / истории oe: gen.Изображения могут измениться в течение следующих нескольких спринтов изменений веб-сайта, но пока мы сохраняем простые формы — в основном потому, что они выглядят очень красиво, и этого для меня достаточно.
Иконография
Я нашел это выступление настоящего иконописца. Сьюзан Каре рассказывает о некоторых ключевых моментах, касающихся дизайна значков и символов. Каре — художник и дизайнер, пионер пиксельной графики; она создала многие элементы графического интерфейса для оригинального Apple Macintosh в 1980-х годах в качестве ключевого члена команды разработчиков программного обеспечения Mac и продолжала работать креативным директором NeXT для Стива Джобса.
Сьюзан Кэр, иконописец (EG8), например, на Vimeo.
Могут ли значки вредить удобству использования, и когда их следует использовать? | Шейн П. Уильямс
Что вы подразумеваете под словом «значок»?
Значок — это символ, он происходит от греческого слова eikenai , означающего «казаться или уподобляться». Это может быть буквально, как маленькая мусорная корзина на экране вашего компьютера, или метафорическое, как в случае с известным человеком, связанным с идеей, например, Rolling Stones можно описать как музыкальные иконки.
https://material.io/design/iconography/system-icons.html#icon-themesВ данном случае я имею в виду значок в буквальном смысле, как небольшой графический элемент, используемый для представления чего-либо.
«Создавайте свой продукт на основе доказательств, а не ложных убеждений»
Вышеупомянутый слоган читается в меню веб-сайта под названием UX Myths. Они перечисляют тридцать четыре UX-мифа о дизайне. Счастливое число тринадцать — это миф под названием « Иконки могут повысить удобство использования » .
Вот краткое изложение:Многие исследователи показали, что значки трудно запоминать и зачастую они очень неэффективны. В большинстве проектов значки очень сложно получить правильно и требуют тщательного тестирования. Для абстрактных вещей значки редко подходят.
Представленные результаты исследований и статьи:
- UIE провел два эксперимента, чтобы проверить, как люди используют значки. Сначала они изменили изображения значков на панели инструментов, но оставили их в том же месте.Люди быстро адаптировались к этому изменению. Впоследствии они сохранили изображения, но перетасовали их расположение на панели инструментов. Это изменение запутало участников и доставило им проблемы.
- Майкл Зушлаг говорит, что «значки, вопреки интуиции, не обязательно помогают пользователю найти пункт меню лучше, чем просто текстовая метка. Это того не стоит. Он также обсуждает свои взгляды на UX Exchange.
- Бывшая панель инструментов Microsoft Outlook, содержащая только значки, была неудобна в использовании, и изменение значков и их расположения не сильно помогло.Введение текстовых меток рядом со значками сразу устранило проблемы с удобством использования, и люди начали использовать панель инструментов. Другой тест показал, что люди запоминают положение кнопки вместо графической интерпретации функции. — Важность ярлыков
- Понимание значка пользователем основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности. — Удобство использования значков
- В битве ясности между значками и ярлыками ярлыки всегда побеждают.- Ярлыки всегда побеждают.
- «Если сомневаетесь, всегда помните: лучший значок — это текстовая метка».
- Дон Норманн говорит, что «Непостижимые значки засоряют лицо устройств [Apple], хотя исследовательское сообщество уже давно продемонстрировало, что люди не могут запомнить значение более чем небольшого количества значков. Значок «плюс» лучше, чем просто значок или только метка. Кто может вспомнить, что означает каждый значок? Не я.
- В другом исследовании команда UIE отметила, что люди запоминают положение кнопки вместо графической интерпретации функции.
В их выводах присутствует еще несколько элементов UX Myths, но они повторяют те же чувства, что и те, что я перечислил выше.
Фото Балажа Кети на Unsplash- Основным атрибутом значков является общий визуальный язык , который эффективно устраняет языковые пробелы.
- Иконки могут быть эффективными, когда они используются для улучшения визуального интереса и привлекают внимание пользователя.
- Обеспечивает функциональность и обратную связь. Представьте себе видеоплеер с воспроизведением слов и паузой по сравнению с используемыми в данный момент значками. Иконки позволяют нам быстро передать идею .
1. Обдумайте свои принципы проектирования
Подумайте, каким принципам вы хотите следовать в своей дизайнерской работе. Если вы следуете принципу декоративного забавного дизайна, то, возможно, использование значков могло бы усилить этот принцип. Но, если вы следуете принципу простоты, будьте осторожны с использованием значков. Например, значки рядом с ярлыками не соответствуют этому принципу.
Если вам нужно руководство по созданию принципов дизайна, вы можете прочитать « Определение принципов дизайна бренда, руководство ».
2. Будьте узнаваемы
Значок «Поиск» представлен в виде увеличительного стекла, «Настройки» представлены шестеренками, поэтому эти элементы обычно не требуют ярлыков. Платформы и бренды, такие как Facebook, Twitter и Instagram, настолько распространены, что их значки можно узнать без ярлыков. Если вы обнаружите, что создаете значок для обозначения идеи, скорее всего, он не будет узнаваемым.Если значок не распознается, спросите себя, действительно ли вам следует его использовать.
Универсальные значки работают хорошо, например, печать, закрытие, воспроизведение / пауза, ответ, твит, публикация на Facebook и т. Д.
3. Расширение функциональности
Значки часто хорошо работают, когда они представляют что-то функциональное. Подумайте о кнопке воспроизведения, которая появляется в видео на YouTube. Часто значки используются в программном обеспечении и становятся узнаваемыми при многократном использовании.
Значки панели инструментов Photoshop с ярлыками и без них.Значки списка Adobe Photoshop рядом с ярлыками на их панелях окон.При многократном использовании эти значки становятся узнаваемыми, эти панели позже можно свернуть, чтобы отобразить только список значков.
Иконки могут служить маркерами, а также для структурирования контента, например, иконки типов файлов для PDF, DOC и т. Д.
4. Тестирование и уточнениеНе думайте, что использование иконок решит любые проблемы UX, которые у вас есть, всегда протестируйте и доработайте свою работу.
Дополнительные инструкции
Прочтите руководство iA по значкам для получения дополнительных указаний.
Всегда учитывайте причину использования значков и никогда не предполагайте, что значки улучшат взаимодействие с пользователем.
Маленькие элементы, большое влияние: типы и функции иконок пользовательского интерфейса. | by tubik
Иконки в пользовательских интерфейсах — это элементы, которые невозможно переоценить. Маленькие и содержательные, они решают множество проблем. Они становятся маленькими ключами к удобству использования и интуитивной навигации. И только дизайнеры знают, сколько времени и сил нужно, чтобы сделать их простыми, полезными и выразительными.
Гуру дизайна пользовательского интерфейса Стив Джобс сказал: «Детали имеют значение, стоит подождать, чтобы понять, как это нужно».Очевидно, что значки находятся в верхней части деталей, что делает интерфейс удобным и удобным для навигации. Итак, сегодня давайте обсудим, каковы их типы и как их можно использовать в интерфейсах.
В общих чертах, значок можно определить как изображение с высоким символическим значением, которое используется в целях коммуникации. Иконки представляют собой знаки, которые являются информативными и поддерживают обмен данными между информатором и адресатом наряду со словами и предложениями: в то время как копия подается с буквами или символами, значки общаются через изображения, показывающие графическое сходство с объектом физического мира.В вычислительной технике и цифровом дизайне значки — это пиктограммы или идеограммы, используемые в веб-интерфейсе или мобильном интерфейсе для поддержки удобства использования и обеспечения успешного взаимодействия человека с компьютером.
Если углубиться в преимущества значков, одним из наиболее важных среди них является возможность замены текста. В одной из наших предыдущих статей мы подробно рассказали о взаимосвязи текста и значков и их влиянии на удобство использования. Процесс исследования показал, что использование узнаваемых и четких значков имеет большой потенциал для улучшения навигации, поскольку большинство людей воспринимают изображения быстрее, чем слова.Однако даже малейшее неправильное восприятие может стать причиной плохого UX, поэтому решения по типу иконок должны быть тщательно протестированы, чтобы достичь хорошего баланса иконок и текста для конкретной целевой аудитории.
Weather AppОчевидно, что иконки не были изобретены дизайнерами интерфейсов. Как объект общения они имеют долгую и разнообразную историю, уходящую корнями в древние времена. Их можно найти на картах, знаках, схемах, руководствах и многих других источниках информации. Однако с появлением новых технологий и графических пользовательских интерфейсов иконки пережили новый виток прогресса.Исторически Xerox упоминается в кредитах за создание первых значков для графического пользовательского интерфейса в начале 1970-х годов: значки были реализованы на машине под названием Xerox Alto, которая была очень дорогой и на самом деле не пошла в широкие массы. Тем не менее, это было началом долгой истории: в 1981 году был выпущен Xerox Star, который называют первым потребительским компьютером, в интерфейсе которого использовались значки. В частности, применены значки папок и мусорных баков, которые использовались до сих пор.
SourceЕще одна веха, которую легко запомнить на этом пути, представлена цветными значками, которые Apple представила сначала в 1991 году, а затем позже с их последующими обновлениями для Macintosh. Они отличались другим подходом к стилю, когда иконки сочетали функциональность и информативность с привлекательным и гармоничным внешним видом.
ИсточникВ наши дни иконки представлены в цифровом дизайне с многочисленными пакетами и наборами во всех возможных темах и стилях. Несмотря на то, что существует множество готовых пакетов, база значков постоянно растет в поисках новых решений, привлекательных для пользователей.
Говоря о классификации иконок, можно выделить несколько аспектов их группировки по типам.
Уточняющие значки
Эти значки предназначены для пояснения. Это визуальные маркеры, объясняющие определенные функции или выделяющие категории контента. В некоторых случаях они не являются элементами макета прямого взаимодействия; кроме того, вы часто можете найти их в сочетании с копией, подтверждающей их значение. Этот трюк активирует несколько элементов восприятия в одном взаимодействии, обеспечивая лучшую узнаваемость элементов призыва к действию.Люди, которые сразу поймут символ, переданный вместе со значком, не обратят на копию большого внимания. То же произойдет и с теми, у кого проблемы с быстрым распознаванием копий. Однако использование копии вместе со значком снижает риск недопонимания или неправильного взаимодействия для людей, которые могут неправильно истолковать значение изображения.
Homey App Значки категорий для Приложение SailyИнтерактивные значки
Значки этого типа непосредственно участвуют в процессе взаимодействия и являются основными помощниками в навигации.Они кликабельны или нажимаются и отвечают на запросы пользователей, выполняя действия, обозначенные ими. Их основная цель — информировать пользователей о функциях или особенностях кнопок, элементов управления и любых других элементах взаимодействия.
Взаимодействие с панелью вкладок Концепция взаимодействия с менюДекоративные и развлекательные значки
Значки этого типа придают больше эстетической привлекательности, чем функциональности. Однако этот аспект также важен и должен рассматриваться, поскольку стиль и внешний вид, соответствующие предпочтениям и ожиданиям целевой аудитории, создают прочную основу для высокой желательности.При разумном применении это одна из функций, которые могут не только привлекать, но и удерживать пользователей и многое сделать для положительного пользовательского опыта. Декоративные значки часто используются для обозначения сезонных особенностей и специальных предложений.
Пасхальные и весенние тематические значкиЗначки приложений
Значки приложений — это интерактивные знаки бренда, которые представляют приложение на различных платформах, поддерживая оригинальную идентичность цифрового продукта. В большинстве случаев это логотип приложения, разработанный в соответствии с требованиями, установленными для этого вида значков.Однако на него также можно нанести что-то еще, например, талисман или абстрактное сочетание корпоративных цветов. Эффективное решение обычно основано на тщательном исследовании рынка и конкуренции с целью создания оригинального значка, который не теряется на экране, заполненном значками других приложений.
Значок приложения ElephunFavicon
Favicon, также известный как значок URL-адреса или значок закладки, — это особый тип символа, который представляет продукт или бренд в строке URL-адреса браузера, а также на вкладке закладок .Это позволяет пользователям получить быструю визуальную связь с ним во время просмотра. Этот элемент интерфейса зарекомендовал себя для продуктивного продвижения сайта и хорошей узнаваемости его визуальной идентичности.
Glyph icons
Термин «глиф» [глиф] пришел в дизайн из области типографики. Слово происходит от греческого слова, означающего «резьба». Первоначально термин представляет собой символы элементов или пиктограмму, которая входит в набор символов, согласованный многими пользователями (читателями, писателями и т. Д.).): он представляет собой читаемый символ, позволяющий людям писать его.
В сфере типографики это определенное графическое представление элемента письменного языка в рамках определенной системы письма или конкретного шрифта: это может быть графема или часть графемы, а иногда и несколько графем в сочетании ( составной глиф). Вот, например, набор древних кельтских символов.
ИсточникВ современном цифровом дизайне слово «глиф» изменило свое значение, но не превратилось в своего рода революцию.Он используется для определения графического символа, который обеспечивает внешний вид или форму символа: это может быть буквенный или числовой шрифт, а также символ, изображающий закодированный символ. Говоря об иконках, глифовые иконки в первую очередь описываются как типографский символ, который представляет что-то еще, а не букву или цифру. Среди популярных примеров вы также найдете символ «@», представляющий предлог «at». Например, вот набор иконок для материального дизайна от Google.
Значки материаловВ значках-глифах используются упрощенные и универсальные формы и изображения, чтобы их можно было узнать и гибко с точки зрения адаптивного дизайна.Они играют большую роль в вопросах навигации для цифрового продукта.
Иконки погодыПлоские и полуплоские значки
Плоские значки обычно немного сложнее глифов: они могут применять цветовые комбинации, заливку элементов и представлять немного более сложные изображения. Тем не менее, они также ориентированы на простые и узнаваемые визуальные метафоры, быстро передающие нужный смысл. Самая выдающаяся особенность, которая фактически вдохновила название этого направления, — применение плоских двухмерных визуальных деталей в противоположность высокореалистичным и детализированным скевоморфным изображениям.Плоский стиль позволяет дизайнерам более гибко применять выразительную силу цветов и форм, не теряя при этом разборчивости представленных предметов.
Blog AppSkeuomorphic icons
Skeuomorphism — это направление дизайна, несколько противоположное плоскому. Он основан на идее отражения изображений в 3D, которые выглядят очень близко к исходному естественному виду физических объектов. Несколько лет назад он был популярен для графических интерфейсов различного типа и функциональности. Но затем он был постепенно заменен плоским дизайном в пользовательском интерфейсе, который стал проще и, следовательно, более гибким и практичным для нужд цифровых интерфейсов.Тем не менее, скевоморфные значки по-прежнему широко используются в игровом дизайне и значках приложений в игровом секторе.
Значки SVG
Значки SVG, декодированные как масштабируемая векторная графика, представляют собой адаптивные значки, созданные на основе двухмерных векторных изображений на основе XML. Они разработаны и интегрированы в соответствии с открытым стандартом, разработанным Консорциумом Всемирной паутины (W3C) с 1999 года, и поддерживаются всеми основными браузерами. Иконки SVG становятся все популярнее, так как сегодня веб-сайты используются на самых разных платформах и устройствах и должны быть отзывчивыми, чтобы обеспечивать положительный UX.
Это направление типологии иконок основано на исследовании, проведенном известным экспертом по юзабилити Джекобом Нильсеном и раскрытом в его статье для Nielsen Norman Group. С этой точки зрения значки можно разделить на три основных типа в соответствии с типом метафоры, которую они отражают.
Значки сходства — это символы, непосредственно обозначающие физический объект, который представляет значок. Это, например, лупа для поиска, корзина для покупок, конверт для почты и т. Д.
Справочные значки — это символы, обозначающие объект по аналогии. Например, изображение зажима, представляющего утилиту сжатия файлов (потому что она сжимает), попадает в эту группу.
Произвольные значки — это символы, которые в настоящее время не устанавливают прямых связей с объектами, и их узнаваемость основана на условности и силе привычки. Здесь мы должны помнить о дискете, представляющей функцию «Сохранить»: хотя изначально это был значок ссылки, для многих пользователей теперь это не работает — они просто знают значение, прочно связанное с этим изображением в течение многих лет.
Мультимедийный набор значковВ одной из наших предыдущих статей, посвященных роли значков в пользовательских интерфейсах, мы уже описали все основные функции, делающие значки эффективными, поэтому сегодня давайте просто быстро их вспомним.
- прозрачный — значение значка понятно и доступно целевой аудитории
- значимое — значок передает информативное значение
- узнаваемый — визуальный символ, нанесенный на значок, представлен в виде который может быть правильно распознан и декодирован пользователями
- простой — значок не перегружен несущественными графическими элементами, что позволяет его быстро воспринимать и понимать без особых усилий
- оригинальный и заметный — значок выделяется среди других подобных элементов интерфейса, что особенно актуально для значков приложений
- масштабируемый и гибкий — значок сохраняет свое единство, целостность и удобочитаемость в разных размерах и разрешениях
- привлекательный — значок удовлетворяет эстетике ожидания и устанавливает гармоничный внешний вид
- не оскорбительный — t Значок не имеет скрытых значений или неправильных представлений, которые могут показаться оскорбительными или грубыми для любой части целевой аудитории.
