подобие, аналогия и произвольный выбор

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

Иконки, базирующиеся на подобии (схожести)

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

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

Читайте также: Интуитивные иконки: пособие по юзабилити

Иконки, основанные на аналогиях (напоминаниях)

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

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

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

Читайте также: Без имени Лучший значок – text label

Произвольные иконки

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

Треугольный дорожный знак предупреждения об опасности может быть использован в качестве компьютерной иконки для предупредительного сообщения. Очевидно, что пользователям труднее всего понимать именно произвольные иконки (Arbitrary Icons), особенно в том случае, если они не настолько широко используются, чтобы конвенциональное значение стало «второй натурой» значка.

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

Пример: значок часов в качестве иконки подобия, и он же как иконка аналогии 

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

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

Читайте также: Что такое аффорданс, или Самый недооцененный термин веб-дизайна

Пример: значок дискеты в качестве иконки для команды «Сохранить»

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

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

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

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

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

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

Читайте также: Материальный дизайн: другой, но не лучший

Юзабилити иконок в интернациональном масштабе

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

В подобной ситуации в тупик может попасть и сам общепризнанный «гуру науки юзабилити», основатель Nielsen Norman Group Якоб Нильсен: «Подобным же образом почтовые ящики выглядят по-разному во всем мире, как по форме, так и по цвету (синий, красный, желтый и зеленый — это лишь несколько цветов, которые я видел в своих путешествиях). Я помню, что когда впервые отправил открытку в Бельгии, то не был уверен, воспользовался ли я “официальной” почтой, потому что бельгийские почтовые ящики выглядят совершенно по-другому, чем все остальные, когда-либо виденные мной. И ведь это был физический объект. Небольшая двумерная картинка, скорее всего, будет еще более непонятной».

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

Различие национальных конвенций может снизить юзабилити интерфейсов, нацеленных на использование иконок, работающих на принципе аналогий. Например, изображение обеденного стола (dining table) можно использовать в качестве «напоминающей» иконки, чтобы представить таблицу номеров (table of numbers).

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

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

Читайте также: Как оптимизировать юзабилити иконок интерфейса?

Простые иконки, сложные иконки

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

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

Высоких вам конверсий! 

По материалам: nngroup.com

30-05-2017

7 Основ Дизайна Иконок

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

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

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

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

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

1. Постоянный Визуальный Вес 💁🏻‍♂️

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

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

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

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

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

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

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

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

2. Простота И Минимализм ✅

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

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

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

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

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

3. Создание Иконок С Последовательным Голосом Бренда 👏🏼

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

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

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

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

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

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

4. Дизайн Иконок С Достаточным Количеством Белого Пространства 💻

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

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

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

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

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

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

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

5. Пиксельно-Совершенный дизайн 😍

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

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

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

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

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

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

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

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

6. Контраст И Цветовая Палитра 🎨

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

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

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

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

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

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

7.Геометрические Формы Имеют Большее Влияние 👏🏼

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

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

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

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

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

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

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

Итог 👈🏽

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

---

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

The link has been copied!

Знакомство с иконками в дизайне пользовательского интерфейса

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

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

Типы значков

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

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

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

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

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

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

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

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

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

Значки с логотипом могут быть одним из примеров уникальных значков. Логотип Sketch представляет собой стилизованный ромб. Для человека, не знакомого с программой, ромб будет бессмысленным. Но для тех, кто использовал продукт, он сразу узнаваем. Помните об этом при использовании уникальных значков.

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

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

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

Структура значка

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

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

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

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

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

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

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

Заключение

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

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

{Ресурс}

Стили и дизайн значков. При планировании руководства по стилю иконок… | by Varghese Mathai

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

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

Выберите стиль значка:

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

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

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

Стиль контурных значков:
Также часто называемые линейными значками, контурные значки чистые, современные и чаще всего выполнены в монохромном стиле с тонкими плавными штрихами. Стиль контура, ставший культовым благодаря iOS от Apple, является основным элементом современного дизайна иконок.

Стиль значка глифов:
Его также часто называют монохромным стилем, акцент делается на простые формы и плавные изгибы для быстрого и легкого распознавания объектов. Google использует стиль значков глифов в качестве основы для своего стиля Material, который охватывает ряд их продуктов, включая ОС Android.

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

Плоские значки Стиль:
Плоские значки являются цветным аналогом значков с глифами и известны своим тонким использованием света и тени. Именно из-за отсутствия контраста этот популярный стиль иконок получил название «плоский», шокирует, не так ли?

И это некоторые подстили для иконок, полученные из 4 основных стилей иконок:

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

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

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

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

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

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

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

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

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

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

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

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