Какие значки чаще всего присутствуют на рабочем столе компьютера
Обновлено: 24.11.2024
Краткий обзор ↬ Значки являются неотъемлемой частью многих пользовательских интерфейсов, визуально выражая объекты, действия и идеи. При правильном выполнении они передают основную идею и намерение продукта или действия и приносят много приятных преимуществ пользовательскому интерфейсу, например экономят место на экране и повышают эстетическую привлекательность. И последнее, но не менее важное: у большинства приложений и веб-сайтов есть значки. Это шаблон проектирования, знакомый пользователям. Несмотря на эти преимущества, значки могут вызывать проблемы с удобством использования, когда дизайнеры скрывают функциональные возможности за значками, которые трудно распознать. Первая задача значка — направлять пользователей туда, куда им нужно, и в этой статье мы увидим, что нужно для того, чтобы это стало возможным. Если вы хотите попробовать создать свои собственные значки, вы можете бесплатно загрузить и протестировать Adobe Experience Design CC и сразу приступить к работе.
Значки являются неотъемлемой частью многих пользовательских интерфейсов, визуально выражая объекты, действия и идеи. При правильном выполнении они передают основную идею и намерение продукта или действия и приносят много приятных преимуществ пользовательскому интерфейсу, например экономят место на экране и повышают эстетическую привлекательность. И последнее, но не менее важное: у большинства приложений и веб-сайтов есть значки. Это шаблон проектирования, знакомый пользователям.
Несмотря на эти преимущества, значки могут создавать проблемы с удобством использования, когда дизайнеры скрывают функциональные возможности за значками, которые трудно распознать. Первая задача значка — направлять пользователей туда, куда им нужно, и в этой статье мы увидим, что нужно для того, чтобы это стало возможным. Если вы хотите попробовать создать свои собственные значки, вы можете бесплатно загрузить и протестировать Adobe Experience Design CC и сразу приступить к работе.
Дополнительная литература на SmashingMag:
Познакомьтесь с потрясающими онлайн-семинарами по внешнему интерфейсу и пользовательскому интерфейсу с практическими выводами, сеансами в прямом эфире, видеозаписями и дружескими вопросами и ответами. О дизайн-системах, CSS/JS и UX. С Кэри Фишер, Стефаном Баумгартнером и многими другими.
Типы значков
Как уже упоминалось, значок — это визуальное представление объекта, действия или идеи. Если этот объект, действие или идея не будут сразу понятны пользователям, значок будет уменьшен до визуального шума, что помешает пользователям выполнить свою задачу.
Существует три типа значков: «универсальные», «конфликтующие» и уникальные значки. Давайте сосредоточимся на каждом типе и его влиянии на взаимодействие с пользователем.
Универсальные значки
Некоторые значки пользуются почти всеобщим признанием среди пользователей. Такими значками являются символы дома, печати, поиска и корзины.
Легко узнаваемые значки (Изображение: Icons8)
Есть только одна проблема: универсальные значки встречаются редко. Помимо приведенных выше примеров, большинство значков неоднозначны. Они могут иметь разное значение в зависимости от интерфейса.
Значки с противоречивым значением
Проблемы возникают, когда вы реализуете часто используемую пиктограмму, имеющую противоречивые значения. Сердце и звезда — отличные примеры. Мало того, что функции, связанные с этими значками, различаются от приложения к приложению, эти два значка конкурируют друг с другом.
В результате эти значки трудно интерпретировать точно. Даже в контексте отдельного приложения эти символы могут сильно сбивать с толку, когда пользователь ожидает одного результата, а получает другой. Это затрудняет понимание пользователем этих значков и отбивает у него охоту полагаться на них в будущем.
Рассмотрите другие популярные значки, которые имеют несколько значений:
Уникальные значки
Значки особенно плохо подходят для чего-либо абстрактного, потому что обычно они не являются сильным визуальным представлением. Как вы описываете уникальный объект или действие? Например, значок Apple для приложения Game Center представляет собой группу разноцветных кругов. Что означает значок Game Center? Как это связано с играми?
Значок Game Center не передает концепцию игр.
В качестве другого примера: когда Google решил упростить интерфейс Gmail и поместить все за абстрактным значком, он, по-видимому, получил поток запросов в службу поддержки, таких как "Где мой Календарь Google?"
Значок может иметь полный смысл, когда вы знаете, что он должен представлять, но новичкам может потребоваться некоторое время, чтобы разобраться во всем. Другая проблема заключается в том, что новые пользователи склонны избегать элементов интерфейса, которые они не понимают. Человеку свойственно не доверять неизвестному.
Практические рекомендации по дизайну с помощью значков
Давайте рассмотрим несколько простых приемов и стратегий выбора подходящего значка для определенного контекста. Очевидно, что выбор значка — это долгая история, и каким бы ни был выбор, тестирование значков в интерфейсах с реальными пользователями имеет решающее значение.
Используйте метки для пояснения абстрактных или незнакомых значков
Значки могут сэкономить место за счет сокращения текста, но ценой узнаваемости.Иконка может представлять тысячу разных слов, и именно в этом проблема. Было бы серьезным заблуждением полагать, что пользователи либо будут знакомы с вашими абстрактными пиктограммами, либо захотят потратить дополнительное время на изучение того, что каждая из них означает.
Значки нижней панели вкладок могут сбить с толку начинающих пользователей Android. (Изображение: Google) (Просмотреть увеличенную версию)
Пользователей часто пугает незнакомый интерфейс. Чего они действительно хотят, так это четкого представления о том, что произойдет, прежде чем они выполнят действие в незнакомом приложении. Вот почему ваши значки должны формировать у пользователей четкие ожидания, прежде чем они нажмут или нажмут на них.
Хороший пользовательский опыт можно измерить разными способами, один из которых — насколько он освобождает пользователя от необходимости думать. Ясность — самая важная характеристика отличного интерфейса. Чтобы избежать двусмысленности, характерной для большинства значков, мы можем добавить текстовую метку, поясняющую значение значка в конкретном контексте, особенно для сложных действий и абстрактных функций.
Компания UserTesting провела серию тестов, сравнивая значки с ярлыками и значки без ярлыков. Было обнаружено, что:
- пользователи могли правильно предсказать, что произойдет, если они коснутся значка с ярлыком в 88 % случаев;
- это число снизилось до 60 % для значков без ярлыков. Для непомеченных значков, которые были уникальными для приложения, пользователи правильно предсказали, что произойдет, если они коснутся значка, только в 34 % случаев.
Даже для универсальных значков добавление ярлыка обычно безопаснее.
Иконки с ярлыками используются гораздо чаще. (Изображение: Google) (Просмотреть увеличенную версию)
Когда достаточно одних значков
Поэтому не все пользователи знакомы с обычными значками, что потенциально усложняет им использование интерфейса, состоящего только из значков. С другой стороны, опытные пользователи могут счесть интерфейс с текстовыми метками повсюду загроможденным. Как сделать всех счастливыми? Как отмечает Майкл Зушлаг, одних значков будет достаточно, если выполняются хотя бы два из следующих трех условий:
- пространство очень ограничено (т. е. слишком мало для текста);
- значки стандартизированы (например, универсальны);
- значки представляют объекты с сильными физическими аналогами или визуальными атрибутами (например, красный прямоугольник, чтобы сделать фон страницы красным).
Остерегайтесь всплывающих подсказок и всплывающих окон для значков
Некоторые дизайнеры считают, что ярлыки мешают значкам и загромождают интерфейс. Чтобы избежать использования ярлыков, они используют всплывающие подсказки. Однако всплывающие подсказки — плохая замена текстовым меткам. Тот факт, что текстовые метки никогда не нуждаются в графических всплывающих подсказках, является хорошим признаком того, что текст лучше, чем значки. Еще одним серьезным недостатком является то, что всплывающие подсказки плохо отображаются на сенсорных экранах.
Еще один распространенный прием — использование руководств, пометок тренера или всплывающих подсказок. Однако пользователи могут просто пробежаться по учебнику или забыть все, чему они научились, когда в следующий раз запустят ваше приложение. Как и всплывающие подсказки, учебные пособия не заменяют интуитивно понятный дизайн; скорее наоборот. Как говорит Мэтью из CocoaLove: «Обучающий экран вашего приложения — это всего лишь список способов, которыми вы потерпели неудачу».
Значки и названия кнопок
Значки с ярлыками упрощают поиск и сканирование информации, если они расположены в нужном месте. Разместите значки в соответствии с естественным порядком чтения. По мнению UX Movement, расположение значка зависит от двух важных факторов:
- Чтобы значки служили визуальным средством сканирования, пользователи должны увидеть их прежде, чем они увидят соответствующий ярлык. Размещайте значки слева от ярлыков, чтобы пользователи видели их первыми.
- Выровняйте значок по заголовку метки, а не по центру заголовка и основного текста. Увидев значок первым, пользователям будет легче сканировать страницу.
Значки в таблицах данных
Представьте, что у вас есть таблица с числами в строках, и вам нужны значки в качестве вспомогательных элементов, чтобы указать, является ли значение хорошим, посредственным или плохим. Как правильно разместить значки рядом с цифрами — справа или слева? Как объясняет Дон Никель, значки слева от числа обычно указывают на назначение данных, тогда как значки справа обычно указывают на качество данных. Как и в случае со значками с метками кнопок, размещение значков должно соответствовать естественному порядку чтения. Есть два варианта размещения значка:
В конце строки появятся значки состояния. Как видно из приведенного ниже примера, пользователь сначала увидит тему, затем значение, связанное с темой, и, наконец, статус значения.
Значки для аккордеонного меню
Меню-аккордеон представляет собой шаблон пользовательского интерфейса, который сворачивает длинные списки в управляемые группы. Это полезно для меню навигации и особенно для поисковых фильтров.
- Какой значок следует использовать? Нужен ли вообще значок с точки зрения удобства использования?
- Должен ли значок располагаться слева или справа от пункта меню?
Лэнс Гутин провел эксперимент с разными типами значков (шевроны, знаки плюс и минус и треугольники) и расположением (слева и справа). Имея три варианта значков в двух местах и контрольную группу без значков, он выделил семь дизайнов для изучения.
Анализируя результаты, он упомянул два важных вывода:
- Наиболее убедительные данные касались местоположения значка. При представлении значка справа от пункта меню многие пользователи предпочли щелкнуть значок, а не текстовую метку. Вполне возможно, что некоторые пользователи считали, что значок и метка функционируют по-разному; небольшой размер значка и расстояние от метки увеличили время записанных задач, что привело к увеличению времени выполнения задач для аккордеонов со значками справа.
- С точки зрения выбора значка меню-аккордеон с плюсом слева оказалось самым быстрым: 90 % участников прогнозировали, что меню изменится. Однако время большинства задач не отличалось статистически, и ни одно из них не отличалось практически.
Обратите внимание, что исследование не означает, что мы все должны использовать значок со значком «плюс», расположенный слева в меню аккордеона. Однако, если мы поместим значок справа, безопаснее убедиться, что этот значок имеет достаточно большой размер (не менее 44 × 44 пикселей), чтобы его было легко нажать пальцем или мышью.
Будьте осторожны со значком гамбургера
Три горизонтальные линии (то есть значок «гамбургер») стали обычным явлением для кнопки главного меню, особенно на мобильных веб-сайтах:
Однако при принятии решения об использовании значка гамбургера учитывайте два важных фактора:
A/B-тестирование на основе статьи Джона Рандла показывает корреляцию между правильным определением функции значка гамбургера и возрастом пользователей. Этот значок не знаком пожилым пользователям. Следовательно, с точки зрения удобства использования спросите, кто является большинством ваших пользователей.
Создание значков для максимального удобства
При разработке элементов пользовательского интерфейса учитывайте принципы удобства использования (согласованность, доступность и т. д.). Доступность, важная концепция, по сути означает, что такие элементы, как значки, должны быть интуитивно понятными:
Старайтесь, чтобы значки были простыми и схематичными.
В большинстве случаев значки — не место для творчества. Если вы разрабатываете новую иконку, сведите к минимуму визуальные детали и избегайте очень реалистичного изображения, сосредоточившись на основных характеристиках объекта. Меньшее количество графических деталей способствует распознаванию.
Сделайте значки удобными сенсорными мишенями для мобильных приложений
Люди взаимодействуют с сенсорными интерфейсами пальцами. Элементы управления пользовательского интерфейса должны быть достаточно большими, чтобы фиксировать действия кончиками пальцев, не раздражая пользователей непреднамеренными действиями и крошечными целями. На изображении ниже показано, что ширина среднего пальца взрослого человека составляет около 11 миллиметров (мм), а у ребенка — 8 мм; у некоторых баскетболистов пальцы шире 19 мм!
Рекомендуемый целевой размер объектов сенсорного экрана – от 7 до 10 мм. Ниже приведены рекомендации Apple и Google для их платформ (см. «Руководство по пользовательскому интерфейсу iOS» и Material Design):
- Apple рекомендует минимальный целевой размер 44 x 44 пикселя. Поскольку физический размер пикселя зависит от плотности экрана, спецификации Apple в отношении пикселей лучше всего подходят для 3,5-дюймового дисплея iPhone с разрешением 320 × 480 пикселей.
- Google рекомендует, чтобы сенсорные объекты имели размер не менее 48 × 48 пикселей, не зависящих от плотности (DP). Сенсорная мишень 48 × 48 DP дает физический размер около 9 мм, независимо от размера экрана. В большинстве случаев значки должны быть разделены 8 DP или более, чтобы обеспечить сбалансированную плотность информации и удобство использования.
Важен не только размер цели; достаточное расстояние между мишенями касания также имеет значение. Основная причина поддерживать минимальное расстояние между объектами касания — не дать пользователям коснуться неправильного значка и вызвать неправильное действие. Это становится чрезвычайно важным, когда такие значки, как «Сохранить» и «Отмена», находятся рядом друг с другом. В таких случаях чрезвычайно важен зазор не менее 2 мм между мишенями.
Проверьте свои значки
Со значками нужно обращаться осторожно. Всегда проверяйте их на удобство использования. Посмотрите, как реальный новый пользователь взаимодействует с вашим интерфейсом, что поможет вам определить, достаточно ли понятны значки:
- Проверьте значки на узнаваемость.
Спросите людей, что, по их мнению, представляют эти значки. Им не нужно задаваться вопросом, что они делают, потому что они не будут пытаться выяснить это. - Проверьте значки на запоминаемость.
Значки, которые трудно запомнить, обычно неэффективны. Пригласите группу тестовых пользователей и спросите, помнят ли они значение значка после того, как ему сказали пару недель назад.
Заключение
Иконография лежит в основе дизайна пользовательского интерфейса.Это может сделать или сломать удобство использования интерфейса. Каждая иконка должна служить цели. Это должно помочь пользователю делать то, что ему нужно, не требуя дополнительных усилий. При правильном дизайне значки интуитивно помогают пользователям в рабочем процессе, не слишком полагаясь на текст. Не заставляйте пользователей думать. Сделайте ясность в приложении приоритетом!
Рекомендуемое чтение
Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Недавно представленное приложение Experience Design создано для быстрого и гибкого процесса проектирования UX, поскольку оно позволяет вам набрасывать идеи, создавать интерактивные прототипы, тестировать и делиться ими в одном месте.
Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также посетить блог Adobe XD, чтобы быть в курсе последних событий. Adobe XD часто обновляется новыми функциями, и, поскольку он находится в общедоступной бета-версии, вы можете загрузить и протестировать его бесплатно.
Это руководство по дизайну было создано для Windows 7 и не обновлялось для более новых версий Windows. Большая часть рекомендаций в принципе остается актуальной, но презентация и примеры не отражают наши текущие рекомендации по дизайну.
Стандартные значки — это значки ошибок, предупреждений, информации и знака вопроса, которые являются частью Windows.
Значки стандартной ошибки, предупреждения, информации и вопросительного знака.
Стандартные значки имеют следующие значения:
- Значок ошибки. Пользовательский интерфейс (UI) представляет ошибку или возникшую проблему.
- Значок предупреждения. Пользовательский интерфейс представляет состояние, которое может вызвать проблемы в будущем.
- Значок информации. Пользовательский интерфейс предоставляет полезную информацию.
- Значок вопросительного знака. Пользовательский интерфейс указывает на точку входа в справку.
Стандартные значки примечательны тем, что они встроены во многие интерфейсы программирования приложений (API) Windows, такие как диалоговые окна задач, окна сообщений, всплывающие подсказки и уведомления. Они также часто используются в сообщениях на месте и в строках состояния.
Примечание. Рекомендации по значкам представлены в отдельной статье.
Концепции дизайна
- Использование значка предупреждения для незначительных ошибок. Предупреждения не являются «смягченными» ошибками.
- Использование стандартного значка, когда лучше вообще не использовать значок. Не каждому сообщению нужен значок.
- Оповещать пользователей, предупреждая о незначительных проблемах или задавая стандартные вопросы в качестве предупреждений. Это делает программы уязвимыми и отвлекает внимание от действительно важных проблем.
В оставшейся части этого раздела объясняется, как думать о стандартных значках, чтобы избежать этих распространенных ошибок.
Тип сообщения и серьезность
- Ошибка. Произошла ошибка или проблема.
- Предупреждение. Состояние, которое может вызвать проблемы в будущем.
- Информация. Полезная информация.
Следовательно, сообщение об ошибке может иметь значок ошибки, но не значок предупреждения. Не используйте значки предупреждений как способ «смягчить» незначительные ошибки. Таким образом, несмотря на разницу в серьезности, "Неправильный размер шрифта" является ошибкой, а "Продолжение этой операции приведет к пожару в вашем доме" — предупреждение.
Определение соответствующего типа сообщения
Некоторые проблемы могут быть представлены как ошибка, предупреждение или информация, в зависимости от выделения и формулировки. Например, предположим, что веб-страница не может загрузить неподписанный элемент управления ActiveX на основе текущей конфигурации Windows Internet Explorer:
- Ошибка. «Эта страница не может загрузить неподписанный элемент управления ActiveX». (Фразируется как существующая проблема.)
- Предупреждение. «Эта страница может вести себя не так, как ожидалось, поскольку Windows Internet Explorer не настроен на загрузку неподписанных элементов управления ActiveX». или «Разрешить этой странице устанавливать неподписанный элемент управления ActiveX? Установка из ненадежных источников может нанести вред вашему компьютеру». (Оба формулируются как условия, которые могут вызвать проблемы в будущем.)
- Информация. «Вы настроили Windows Internet Explorer для блокировки неподписанных элементов управления ActiveX». (Фразировано как констатация факта.)
Чтобы определить подходящий тип сообщения, сосредоточьтесь на самом важном аспекте проблемы, который необходимо знать пользователям или принять меры. Как правило, если проблема не позволяет пользователю продолжить работу, она представляется как ошибка; если пользователь может продолжить, это предупреждение. Создайте основную инструкцию или другой соответствующий текст на основе этого фокуса, а затем выберите значок (стандартный или другой), соответствующий тексту. Основной текст инструкции и значки всегда должны совпадать.
Серьезность
Несмотря на то, что серьезность не имеет значения при выборе между значками ошибок, предупреждений и информационных значков, серьезность является фактором, определяющим, следует ли вообще использовать стандартный значок.
Значки работают лучше всего, когда используются для визуального общения. (Обратите внимание, что из соображений доступности эта визуальная коммуникация всегда должна дублироваться другой формой, такой как текст или звук.) Пользователи должны иметь возможность с первого взгляда определить характер информации и последствия их реакции, поэтому мы должны отличать критические ошибки и предупреждения от их обычных аналогов. Критические ошибки и предупреждения имеют следующие характеристики:
- Они связаны с потенциальной потерей одного или нескольких из следующих элементов:
- Ценный актив, например потеря данных или финансовые потери.
- Доступ к системе или целостность.
- Конфиденциальность или контроль над конфиденциальной информацией.
- Время пользователя (значительное количество, например 30 секунд и более).
Чтобы отличать некритические ошибки и предупреждения от критических, некритические сообщения обычно отображаются без значка. Это привлекает внимание к критическим сообщениям, делает критические и некритические сообщения визуально различимыми и соответствует тону Windows.
Не каждому сообщению нужен значок. Значки — это не способ украшения сообщений.
Ниже приведен хороший пример критического предупреждения, поскольку оно соответствует ранее определенным характеристикам.
В этом примере критическое предупреждение предупреждает пользователей о потенциальной необратимой потере данных.
Однако следующий пример не имеет решающего значения, поскольку он, скорее всего, был сделан преднамеренно, а его результаты легко отменить.
Неверно:
В этом примере это подтверждение не имеет решающего значения, поскольку оно может быть сделано намеренно и его легко отменить.
В типичном пользовательском интерфейсе большинство ошибок связаны с ошибками ввода данных пользователем. Большинство ошибок пользовательского ввода не являются критическими, поскольку их легко исправить, и пользователи должны исправить их, прежде чем продолжить. Кроме того, привлечение слишком большого внимания к незначительным ошибкам пользователя противоречит тону Windows. Следовательно, незначительные ошибки пользовательского ввода обычно отображаются без значка ошибки. Чтобы подчеркнуть их некритичность, мы называем их проблемами ввода данных пользователем.
В этом примере эта незначительная проблема с пользовательским вводом не является критической, поэтому для нее не нужен значок, когда она отображается в диалоговом окне.
Избегайте чрезмерных предупреждений
Мы предупреждаем в программах Windows. Типичная программа для Windows имеет везде предупреждающие значки, предупреждающие о вещах, которые не имеют большого значения. В некоторых программах почти каждый вопрос представлен как предупреждение. Чрезмерное предупреждение делает использование программы опасным и отвлекает внимание от действительно серьезных проблем.
Сама по себе возможность потери данных недостаточна для того, чтобы вызвать значок предупреждения. Кроме того, любые нежелательные результаты должны быть неожиданными или непреднамеренными и не должны быть легко исправлены. В противном случае практически любой вопрос с неправильным ответом может быть истолкован как приведший к какой-либо потере данных и заслуживающий значка предупреждения.
Чтобы сфокусировать значки предупреждений на действительно важных проблемах:
- Убедитесь, что проблема требует повышенного внимания пользователей. Обычные подтверждения и вопросы не должны иметь предупреждающих значков.
- Может ли поведение пользователей измениться из-за значка предупреждения? Могут ли пользователи более тщательно обдумать решение?
Неверно:
В этом примере пользователи могут по-разному ответить на этот вопрос из-за значка предупреждения?
- Есть ли какие-то важные действия или решения? Предупреждения без действий вызывают у пользователей чувство паранойи.
Неверно:
Почему это уведомление является предупреждением? Что должны делать пользователи (помимо беспокойства)?
Контекст
При использовании стандартных значков также следует учитывать контекст, поскольку сам контекст передает информацию. В частности:
- Хотя в диалоговых окнах (включая диалоговые окна задач и окна сообщений) и уведомлениях не нужны значки для некритических ошибок, для оперативных ошибок всегда нужны значки ошибок. В противном случае такую немодальную обратную связь было бы слишком легко не заметить.
- Предупреждениям на месте всегда нужны предупреждающие значки, чтобы отличать их от обычного текста.
- Диалоговые окна, уведомления и всплывающие подсказки не нуждаются в информационных значках, поскольку они четко представляют информацию. Напротив, для баннеров требуется информация размером 16 x 16 пикселей или другие значки, потому что такую немодальную обратную связь будет слишком легко не заметить.
Поскольку контекст является важным фактором использования значков, рекомендации по стандартным значкам в этой статье даны с учетом их контекста.
Оценка уместности стандартных значков
Оценивая текст пользовательского интерфейса, прочитайте также все стандартные значки. Значки ошибок читаются как «ошибка!», предупреждающие значки как «предупреждение, будьте очень осторожны!», а информационные значки как «внимание!». Затем продолжайте читать оставшийся контекст, такой как основная инструкция, область содержимого и кнопки фиксации. Убедитесь, что значение и тон каждого стандартного значка соответствует значению и тону его контекста. Если нет, вы обнаружили проблему.
Если вы делаете только одну вещь.
Убедитесь, что значение и тон каждого стандартного значка соответствует значению и тону его контекста.Если они не совпадают, измените или удалите значок.
Рекомендации
Примечание. В следующих рекомендациях "на месте" означает на любой обычной поверхности окна, например, в области содержимого мастера, страницы свойств или страницы элемента панели управления.
Общие
- Выбирайте стандартные значки в зависимости от типа сообщения, а не серьезности основной проблемы:
- Ошибка. Произошла ошибка или проблема.
- Предупреждение. Состояние, которое может вызвать проблемы в будущем.
- Информация. Полезная информация.
Правильно:
Неверно:
В неправильном примере стандартный значок предупреждения не соответствует основной инструкции (что приводит к ошибке).
Размер значка
Выберите стандартный размер значка в зависимости от контекста:
Значки ошибок
Используйте значки ошибок только в случае возникновения ошибки или проблемы:
Как правило, значки ошибок не нужны для некритических проблем с пользовательским вводом. Однако значки необходимы для ошибок на месте, потому что в противном случае такую контекстную обратную связь было бы слишком легко не заметить.
Для диалоговых окон задач не используйте значки сносок ошибок. Значки ошибок должны быть представлены только в области содержимого.
Значки предупреждений
Не используйте значки предупреждений, чтобы «смягчить» некритические ошибки. Ошибки не являются предупреждениями, вместо них применяются рекомендации по значкам ошибок.
Для диалоговых окон с вопросами используйте предупреждающие значки только для вопросов, имеющих серьезные последствия. Не используйте значки предупреждений для рутинных вопросов.
Правильно:
Неверно:
В неправильном примере значок предупреждения неправильно используется для стандартного вопроса.
- Для диалоговых окон задач можно использовать значок сноски с предупреждением, чтобы предупредить пользователей о рискованных последствиях. Однако используйте значок предупреждения либо в области содержимого, либо в области сносок, но не в обеих одновременно.
В этом примере в сноске используется желтый защитный экран.
Информационные значки
Используйте информационные значки только в том случае, если контекст явно не представляет информацию:
Информационные значки не нужны в диалоговых окнах, уведомлениях и во всплывающих подсказках, потому что их контекст в достаточной степени говорит о том, что они предоставляют пользователям информацию.
Для диалоговых окон задач не используйте значки информационных сносок. Сноски достаточно заметны, и само собой разумеется, что они носят информационный характер.
Как и в случае с великими произведениями искусства, вы должны заглянуть в прошлое, чтобы оценить будущее. Скромная икона, уходящая своими корнями в 1970-е годы, прошла долгий путь. Ниже представлена коллекция иконок по истории. Хотя в период с 1981 по 2010 год было создано много других операционных систем, я выбрал наиболее значимые для современного дизайна иконок. Эти дизайны показывают лишь малую часть значков во многих и разнообразных пользовательских интерфейсах на протяжении многих лет. Чтобы узнать больше об истории дизайна пользовательского интерфейса, вы можете найти исчерпывающую статью на эту тему в Википедии.
1981 Xerox 8010 Star — первый потребительский компьютер с графическим интерфейсом
В 1973 году Xerox Alto стала первой в мире вычислительной системой с графическим интерфейсом пользователя (GUI). Разработанный на основе «офисной» метафоры (также впервые), Alto был создан как исследовательский компьютер и поэтому не был доступен для коммерческого выпуска. Xerox Alto с 2000 машинами по всему миру был настолько значительным, что послужил источником вдохновения для Apple Lisa (1983). В 1981 году был выпущен Xerox Star, вобравший в себя многие конструктивные особенности Alto. Значки Xerox демонстрируют внимание к человеческому взаимодействию. Как видите, Калькулятор, Документ, Папка и Корзина не менялись почти 30 лет.
1981 – Xerox 8010 Star
Apple Lisa, 1983 г. — популяризация графического интерфейса
Разработка Apple Lisa началась в 1978 году, и на нее сильно повлияли более ранние компьютеры Xerox. Надеясь занять нишу на рынке персональных компьютеров, Apple использовала метафору офиса, чтобы упростить навигацию для новых пользователей. В то время Lisa была продвинутым графическим интерфейсом, поскольку в ней были подвижные «настольные аксессуары» (ранние виджеты), раскрывающиеся меню и каталоги на основе папок. Вы можете видеть, что значки не сильно отличаются от значков Xerox, за исключением размера и контуров в один пиксель, а также использования компьютера в качестве значка настроек (теперь принято использовать шестеренки).
1983 – Lisa Office System 1
Apple Macintosh 1.0 1984 года — значки, созданные художником
Через год после Лизы был выпущен Apple Macintosh 1.0. Теперь мы видим копирование файлов с помощью перетаскивания, подвижные окна и новые модные значки! Иконки Macintosh были разработаны ныне легендарной Сьюзен Каре. Сьюзан Каре, должно быть, всегда была мастером дизайна иконок и отвечала за многие иконки, включая интерфейс MacPaint (рис. 2). Философия Каре в отношении дизайна иконок проста: «Я считаю, что хорошие иконки больше похожи на дорожные знаки, чем на иллюстрации, и в идеале должны представлять идею в ясной, лаконичной и запоминающейся форме.Я стараюсь оптимизировать для ясности и простоты, несмотря на то, что параметры палитры и разрешения увеличились». Эта философия лежит в основе раннего коммерческого успеха Apple.
1984 – система Macintosh 1.0 (рис. 1)
1984 – система Macintosh 1.0 (рис. 2)
1985 Atari TOS — изометрические значки
Для тех, кто немного моложе нас, старых сентиментальных пользователей компьютеров, важно отметить, что графический интерфейс был предназначен не только для систем Apple. У Atari ST была ОС под названием TOS, которая имела минимальный интерфейс, также использующий метафору стола, которая к тому времени стала компьютерным стандартом. Интересно, что в TOS есть значки изометрического диска (файловые ящики).
1985 – Atari TOS версии 1.0
1985 Amiga Workbench — четыре цветных значка
Amiga Workbench был создан для персонального компьютера Amiga 1000. Несмотря на грубоватые значки, Workbench на самом деле опередил свое время. Включая такие функции, как настраиваемые курсоры мыши, четырехцветную графику и значки с несколькими состояниями. Вы можете увидеть два состояния значка «Workbench» в примере ниже. Amiga нарушила соглашение о рабочем столе и решила использовать верстак с ящиками вместо файлов.
1985 – Amiga Workbench 1.0
1985 Windows 1.0x — первая ОС Microsoft с графическим интерфейсом
В 1985 году Microsoft наконец выпустила свой первый графический интерфейс. Значки такие же грубые, как у Amiga, но без цвета. Интересно видеть, что первые значки для Windows Paint используют символы, отличные от символов MacPaint, в частности, для Spray Painter.
1985 — Windows 1.0x
GEOS 1986 года для Commodore 64 — Альтернативная ОС
Я включил GEOS для Commodore 64, так как в то время это был второй по популярности графический интерфейс после Macintosh 1.0 (на основе поставленных устройств). Значки более характерны, чем ОС Windows, и разделяют философию Mac с четко выраженными метафорами.
1986 — Commodore C64 GEOS
1991 Macintosh System 7 — первая Mac OS с цветами
В System 7 мы увидели появление цвета для значков. Вы можете заметить, что значки теперь немного приподняты, чтобы они стали «кликабельными».
1991 – система Macintosh 7
1992 Windows 3.1 — новые дизайнерские значки!
В Windows 3.0 (1990 г.) Microsoft наняла Сьюзан Каре (которая первой создала значки для Macintosh 1.0), которая значительно улучшила дизайн. В версии 3.1 Kare уточняет цвета и дизайн значков. Windows 3.1 была первой платформой Windows с предустановленными шрифтами True Type.
1990 – Windows 3
1995 Windows 95 — кнопка «Пуск»
В Windows 95 для значков добавлено больше цветов, а также несколько изометрических дизайнов. Дизайн Windows 95 представляет собой полную перестройку и включает в себя элементы, которые до сих пор являются частью дизайна Windows. Элементы включают в себя панель задач, меню и знаменитую кнопку «Пуск» от Microsoft.
1995 — Windows 95
1997 Macintosh OS 8 — более яркие значки для Mac
В Mac OS 8 значки теперь выглядят ярче и отображают сильный источник света. Macintosh также начинает реализовывать изометрический стиль с сильной «тенью».
1997 – ОС Macintosh 8
Mac OS X 10.0 2001 г. — Желейный Mac
Mac OS X была выпущена примерно в то время, когда я учился на факультете мультимедиа. Большинство студентов любовно называли его «Желе Мак». Мы не могли не заметить ультраблестящую и пластиковую желеобразную отделку иконок. Значки в OS X также представляют собой огромный скачок в дизайне по сравнению с предыдущей OS 9, которая была выпущена всего двумя годами ранее (OS 9 выглядит почти так же, как OS 8 выше). Предположительно, из-за Dock значки отображаются либо с прямой точки зрения, либо немного выше. Разработанные на основе новой темы Aqua, значки демонстрируют сложные отражения, блики и текстуры. Я сомневаюсь, что без темы Aqua дизайн иконок был бы таким востребованным, как сегодня.
2001 – Mac OS X 10.0
2001 Windows XP — яркие программные значки
В 2001 году Microsoft представила еще одну совершенно новую ОС. Используя насыщенную цветовую палитру, значки отображаются с мягким иллюстративным видом, в котором используется один источник света и полупрозрачная тень. Они продолжают использовать изометрический стиль.
2001 — Windows XP
Mac OS X Leopard 2007 года — отражающая док-станция
Mac отказывается от полос и использует отражающий 3D-документ, на котором значки «сидят». Использование хрома, стекла и отражений популярно как никогда. Значки не сильно изменились по сравнению с версией 10.0.
2007 — Mac OS X Leopard
Windows 7 2009 г. — мягкая и отражающая
Значки Windows 7 полностью отличаются от Windows XP и похожи на Windows Vista. Основное различие между Vista и 7 заключается в направлении значков. Мне не удалось найти никакой официальной документации об изменении, но я не единственный, кто задает вопрос. Значки в Windows 7 также стали мягче и прозрачнее, чем в предыдущих версиях.
2009 – Windows 7
Ресурсы и дополнительная литература
- Windows-Icons.com — История значков Windows
- Музей старинных компьютеров Mac – «Старые компьютеры Mac – 9-дюймовый/моноэкранный дисплей ТОЛЬКО 68000»
- Руководство — Галерея графического интерфейса пользователя
Скоро будет больше
В следующем выпуске («Знай свои значки, часть 2. Современный дизайн значков») мы углубимся в мир значков и узнаем, что значки значат для нас сегодня.
Есть несколько терминов, которые обычно используются в обсуждениях и инструкциях по использованию компьютера. В этом руководстве даны определения этих общих терминов, которые помогут вам читать инструкции.
Рабочий стол
Рабочий стол — главный экран компьютера. Это первый экран, который вы видите после входа в систему. Внешний вид рабочего стола может сильно различаться, поскольку он имеет широкие возможности настройки, но, как правило, рабочие столы содержат большое изображение, значки и панель задач (см. далее на этой странице).
Рабочий стол Windows 10.
Рабочий стол Windows 7.
Обратите внимание, что слово настольный компьютер также используется для обозначения настольного компьютера. Настольный компьютер не является портативным (он остается на столе), а портативный компьютер — переносным.
Окно
Окно – это область просмотра, которая графически отображает программу, чтобы пользователь мог взаимодействовать с ней. Окно регулируется, поэтому оно может занимать весь экран или только его часть. Обратите внимание, что этот термин отличается от термина операционной системы Windows — у компьютеров Mac тоже есть окна.
Окно Windows 7.
Внешний вид окон зависит от операционной системы и программы. Не каждое окно программы будет работать одинаково. Например, многие программы по умолчанию открываются в полноэкранном режиме, поэтому вы не увидите никаких панелей инструментов или кнопок окна. Большинство окон имеют одинаковые функции, которые мы рассмотрим здесь.
Схема окна Windows 10.
- Панель меню. Эта панель инструментов содержит различные команды, которые часто ведут к диалоговым меню (рассмотренным далее на этой странице). На компьютерах с Windows эта панель находится в верхней части окон; Вместо этого у Mac эта панель находится в верхней части экрана. Параметры, содержащиеся на этой панели инструментов, сильно различаются от программы к программе.
- Заголовок. Здесь показано название программы (в данном случае «Блокнот») и кнопки «Свернуть», «Развернуть/изменить размер» и «Закрыть». Если окно не развернуто, вы можете нажать и перетащить строку заголовка, чтобы переместить окно.
- Свернуть. Свернуть программу означает «свернуть» программу на панель задач. Свернутое окно больше не видно, но продолжает работать.
- Развернуть/изменить размер. Нажатие этой кнопки развернет окно так, чтобы оно занимало весь экран. Если окно уже развернуто, нажатие этой кнопки уменьшит размер окна.
- Закрыть. Эта кнопка закрывает окно.
- Изменить размер угла. Нажатие и перетаскивание этой кнопки изменит размер окна.
Работа с несколькими окнами: изменение размера
Изменение размера окон может помочь вам увидеть несколько окон одновременно, как показано ниже.
PR Практический вопрос
Строка меню и диалоговые меню
Нажатие параметра в строке меню, например "Файл", открывает диалоговое меню, предоставляющее дополнительные возможности для взаимодействия с программой.
Окно с диалоговым меню.
Инструкции в этом курсе и в других местах часто используют сокращения, чтобы указать, как перейти к определенной команде через диалоговые меню. Это сокращение разделяет фразы, которые следует щелкнуть, с помощью символа >. Например, инструкции для приведенного выше снимка экрана будут такими: «Файл>Сохранить».
Панель задач
Панель задач располагается на одном краю экрана, почти всегда внизу. Панель задач используется для доступа к меню «Пуск» и запущенным программам. Как и рабочий стол, он легко настраивается.
Панель задач Windows 10
- Кнопка меню "Пуск". Внешний вид кнопки «Пуск» различается в разных версиях, но это всегда самая левая кнопка панели задач. Меню "Пуск" также можно открыть, нажав клавишу Windows ( ) на клавиатуре.
- Закрепленные программы. Программы можно закрепить на панели задач, чтобы к ним можно было быстрее добраться: вы можете открыть закрепленную программу, просто щелкнув по ней. Вы можете настроить, какие программы будут закреплены на панели задач, открыв программу, затем щелкнув правой кнопкой мыши значок программы на панели задач и выбрав «Закрепить на панели задач». Вы также можете открепить закрепленные программы, щелкнув правой кнопкой мыши значок программы и выбрав "Открепить с панели задач".
- Открыть (свернутую) программу. Значки открытых программ появятся справа от закрепленных программ. В Windows 10 синяя линия под значком указывает на то, что программа свернута.
- Системный трей. Системный трей находится в правой части панели задач. Он отображает дату и время и имеет значки, показывающие полезную информацию, связанную с функциями компьютера и программ. Значки на панели задач сильно различаются от компьютера к компьютеру в зависимости от того, какие программы установлены и какая у вас версия Windows, поэтому не беспокойтесь, если ваша панель задач не соответствует снимкам экрана в этом курсе или панели задач ваших одноклассников. На скриншоте выше слева направо в системном трее:
- Стрелка. При нажатии расширяется, чтобы показать больше значков на панели задач.
- Батарея. Это особенность портативных компьютеров. Наведите указатель мыши на значок аккумулятора, чтобы узнать, сколько заряда осталось.
- Сеть. Этот значок показывает состояние вашего интернет-соединения. На скриншоте выше компьютер подключен к Интернету с помощью кабеля; значки беспроводного подключения часто выглядят как веер или гистограмма.
- Звук. Нажав на значок звука на панели задач, вы сможете изменить громкость или отключить звук компьютера.
- Дата/время.
- Центр уведомлений. Если вашему компьютеру требуются обновления или есть уведомления системы безопасности, эти сообщения можно просмотреть здесь.
- Показать рабочий стол. В самом дальнем правом углу панели задач находится тонкая линия. Если щелкнуть полоску панели задач между этой линией и краем экрана, все программы будут свернуты. Наведя указатель мыши на этот кусочек экрана, вы сможете «заглянуть» на рабочий стол.
Обратите внимание, что на компьютерах Mac нет панели задач, но у них есть аналогичная функция, которая называется Dock.
Работа с несколькими окнами: панель задач
Панель задач может быть очень полезна для многозадачности. Щелкая между значками двух открытых окон на панели задач, вы можете работать сразу в двух разных документах или программах. Наведите указатель мыши на значок, чтобы просмотреть другое окно, затем щелкните его, чтобы переключиться.
Наведите курсор, чтобы просмотреть программу.
Нажмите значок на панели задач, чтобы переключиться.
Проверьте свое понимание
Ответьте на вопросы ниже, чтобы узнать, насколько хорошо вы понимаете темы, затронутые в предыдущем разделе. Этот короткий тест не влияет на вашу оценку в классе, и вы можете пересдавать его неограниченное количество раз.
Используйте этот тест, чтобы проверить свое понимание и решить, следует ли (1) изучить предыдущий раздел дальше или (2) перейти к следующему разделу.
Значки облегчают распознавание и поиск элементов на вашем компьютере или функций в программе. Многие операционные системы, особенно для мобильных устройств, используют значки на рабочем столе, чтобы пользователи могли легко получить доступ к установленным программам. После запуска большинство программ теперь имеют графическую панель инструментов, в которой для обеспечения функциональности используются значки вместо слов. Например, в вашем браузере, вероятно, есть стрелка, указывающая на левую часть экрана, которая является кнопкой «назад». Вероятно, есть также небольшой домик, при нажатии на который вы попадете на домашнюю страницу браузера.
Хотя во многих программах по-прежнему используется текстовая система меню, она в значительной степени была заменена более упорядоченной и визуально привлекательной панелью инструментов со значками.
См. также: Приложение, Браузер
Часто задаваемые вопросы
Как узнать, что обозначает значок?
В большинстве программ используются значки, которые так или иначе визуально описывают выполняемую задачу. Например, в офисных приложениях значок ножниц обычно используется для функции вырезания. Если вы не уверены, что представляет собой значок, при наведении указателя мыши на значок обычно отображается краткое описание. Если вы все еще не можете найти нужную функцию, большинство программ по-прежнему предоставляют более традиционное текстовое меню.
Со значками программ может быть сложнее, так как они обычно содержат изображение, связанное с торговой маркой программы. В некоторых случаях это может быть связано с функцией программы, например музыкального проигрывателя с музыкальными нотами. Тем не менее, это не всегда так. По этой причине многие операционные системы позволяют отображать текст под значками программ, чтобы упростить их идентификацию.
Можно ли изменить значок?
Это зависит от используемой операционной системы или программы. В Windows вы можете щелкнуть правой кнопкой мыши значок программы, выбрать «Свойства», перейти на вкладку ярлыка и нажать кнопку «Изменить значок». Некоторые программы включают ряд предопределенных значков, которые вы можете выбрать, или вы можете выбрать любой другой значок, который вы сохранили на своем компьютере. Иконки для файлов обычно назначаются на основе программы, с которой они связаны. Чтобы изменить их, вам нужно будет изменить связанную программу. Мобильные операционные системы обычно предоставляют меньше возможностей для изменения значков. Точно так же значки программ, например, на панели инструментов вашего браузера, часто устанавливаются и не могут быть изменены. Некоторые приложения могут позволить вам настроить внешний вид ваших значков с помощью подключаемого модуля оформления, но это изменит внешний вид всех ваших значков.
Читайте также: