HTML Diff
0 added 0 removed
Original 2026-01-01
Modified 2026-02-21
1 <p><a>#Тесты</a></p>
1 <p><a>#Тесты</a></p>
2 <ul><li>23 мар 2022</li>
2 <ul><li>23 мар 2022</li>
3 <li>0</li>
3 <li>0</li>
4 </ul><h2>Тест: угадай значение иконок</h2>
4 </ul><h2>Тест: угадай значение иконок</h2>
5 <p>Первые иконки в точности повторяли папки и корзины. Но с развитием интерфейсов появляются новые пиктограммы! Сможете понять их значение?</p>
5 <p>Первые иконки в точности повторяли папки и корзины. Но с развитием интерфейсов появляются новые пиктограммы! Сможете понять их значение?</p>
6 <p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6 <p>Иллюстрация: Оля Ежак для Skillbox Media</p>
7 <p>Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.</p>
7 <p>Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.</p>
8 <p>Иконки призваны делать интерфейсы более понятными и простыми для восприятия. Но рисовать одинаковые пиктограммы везде - это скучно, а в погоне за уникальностью дизайнерская фантазия может зайти далеко! Мы собрали неоднозначные иконки с разных сайтов и убрали подписи - попробуйте угадать, что они означают.</p>
8 <p>Иконки призваны делать интерфейсы более понятными и простыми для восприятия. Но рисовать одинаковые пиктограммы везде - это скучно, а в погоне за уникальностью дизайнерская фантазия может зайти далеко! Мы собрали неоднозначные иконки с разных сайтов и убрали подписи - попробуйте угадать, что они означают.</p>
9 <p>Что бы вы написали под этой пиктограммой?</p>
9 <p>Что бы вы написали под этой пиктограммой?</p>
10 <p><p>Рассрочка на парковку.</p>
10 <p><p>Рассрочка на парковку.</p>
11 </p>
11 </p>
12 <p>Да, это вид сверху на автомобиль на парковке! Обычно машины в пиктограммах рисуют в профиль, чтобы было видно узнаваемую форму и два колеса. Но дизайнеры сайта компании-застройщика решили сделать, поэтому иконку сложнее расшифровать. Впрочем, подпись от пользователей никто не прячет.</p>
12 <p>Да, это вид сверху на автомобиль на парковке! Обычно машины в пиктограммах рисуют в профиль, чтобы было видно узнаваемую форму и два колеса. Но дизайнеры сайта компании-застройщика решили сделать, поэтому иконку сложнее расшифровать. Впрочем, подпись от пользователей никто не прячет.</p>
13 <p><p>Разведение шелкопрядов.</p>
13 <p><p>Разведение шелкопрядов.</p>
14 </p>
14 </p>
15 <p>Нет, это пиктограмма с автомобилем на парковке - вид сверху. Обычно машины в пиктограммах рисуют в профиль, чтобы было видно узнаваемую форму и два колеса. Но дизайнеры сайта компании-застройщика решили сделать иначе и в итоге иконка может путать. Впрочем, подпись от пользователей никто не прячет.</p>
15 <p>Нет, это пиктограмма с автомобилем на парковке - вид сверху. Обычно машины в пиктограммах рисуют в профиль, чтобы было видно узнаваемую форму и два колеса. Но дизайнеры сайта компании-застройщика решили сделать иначе и в итоге иконка может путать. Впрочем, подпись от пользователей никто не прячет.</p>
16 <p><p>Перевозка тяжёлых грузов.</p>
16 <p><p>Перевозка тяжёлых грузов.</p>
17 </p>
17 </p>
18 <p>Не совсем! Эта иконка означает рассрочку на парковку, и её использует жилищный застройщик. Не расстраивайтесь: эта самая рассрочка на иконке никак не обозначена. Впрочем, от пользователей подпись никто не прячет.</p>
18 <p>Не совсем! Эта иконка означает рассрочку на парковку, и её использует жилищный застройщик. Не расстраивайтесь: эта самая рассрочка на иконке никак не обозначена. Впрочем, от пользователей подпись никто не прячет.</p>
19 <p>Какой текст подходит к этой пиктограмме?</p>
19 <p>Какой текст подходит к этой пиктограмме?</p>
20 <p><p>Заказать клоуна на детский праздник.</p>
20 <p><p>Заказать клоуна на детский праздник.</p>
21 </p>
21 </p>
22 <p>Поосторожнее! Это, вообще-то, не клоун, а "Уверенная команда": человечек, вероятно, жонглирует задачами. Иконка используется на сайте банка.</p>
22 <p>Поосторожнее! Это, вообще-то, не клоун, а "Уверенная команда": человечек, вероятно, жонглирует задачами. Иконка используется на сайте банка.</p>
23 <p><p>Уверенная команда.</p>
23 <p><p>Уверенная команда.</p>
24 </p>
24 </p>
25 <p>Да, этот жонглёр символизирует уверенную команду! Иконка используется на сайте банка.</p>
25 <p>Да, этот жонглёр символизирует уверенную команду! Иконка используется на сайте банка.</p>
26 <p><p>Кулинарное шоу.</p>
26 <p><p>Кулинарное шоу.</p>
27 </p>
27 </p>
28 <p>Вполне правдоподобный вариант, но нет, это "Уверенная команда". Вероятно, человечек жонглирует не тарелками, а рабочими задачами. Иконка используется на сайте банка.</p>
28 <p>Вполне правдоподобный вариант, но нет, это "Уверенная команда". Вероятно, человечек жонглирует не тарелками, а рабочими задачами. Иконка используется на сайте банка.</p>
29 <p><p>Ремонт кухонной мебели.</p>
29 <p><p>Ремонт кухонной мебели.</p>
30 </p>
30 </p>
31 <p>Не угадали: это "Чипирование". Не людей, конечно, а животных - иконка с сайта ветеринарной клиники.</p>
31 <p>Не угадали: это "Чипирование". Не людей, конечно, а животных - иконка с сайта ветеринарной клиники.</p>
32 <p><p>Перепайка микросхем.</p>
32 <p><p>Перепайка микросхем.</p>
33 </p>
33 </p>
34 <p>Нет, это чип для животных. Иконку мы взяли с сайта ветеринарной клиники.</p>
34 <p>Нет, это чип для животных. Иконку мы взяли с сайта ветеринарной клиники.</p>
35 <p><p>Чипирование.</p>
35 <p><p>Чипирование.</p>
36 </p>
36 </p>
37 <p>Верно! Речь о чипировании животных, разумеется, - это иконка с сайта ветеринарной клиники.</p>
37 <p>Верно! Речь о чипировании животных, разумеется, - это иконка с сайта ветеринарной клиники.</p>
38 <p>Идём дальше! На этой иконке есть часы - они подсказывают, как долго нужно варить еду. Как думаете, какое время изобразил дизайнер?</p>
38 <p>Идём дальше! На этой иконке есть часы - они подсказывают, как долго нужно варить еду. Как думаете, какое время изобразил дизайнер?</p>
39 <p><p>15-30 минут.</p>
39 <p><p>15-30 минут.</p>
40 </p>
40 </p>
41 <p>Нет! Судя по подписи к этой иконке, еду нужно варить 15-45 минут! Кажется, дизайнер с копирайтером сайта доставки еды явно не сошлись во времени приготовления.</p>
41 <p>Нет! Судя по подписи к этой иконке, еду нужно варить 15-45 минут! Кажется, дизайнер с копирайтером сайта доставки еды явно не сошлись во времени приготовления.</p>
42 <p><p>10-45 минут.</p>
42 <p><p>10-45 минут.</p>
43 </p>
43 </p>
44 <p>Нет! Судя по подписи к этой иконке, еду нужно варить 15-45 минут! Кажется, дизайнер с копирайтером сайта доставки еды явно не сошлись во времени приготовления.</p>
44 <p>Нет! Судя по подписи к этой иконке, еду нужно варить 15-45 минут! Кажется, дизайнер с копирайтером сайта доставки еды явно не сошлись во времени приготовления.</p>
45 <p><p>15-45 минут.</p>
45 <p><p>15-45 минут.</p>
46 </p>
46 </p>
47 <p>Как вы разгадали этот хитрый дизайнерский ребус? Впрочем, под иконкой с сайта доставки еды именно такая подпись - варить 15-45 минут.</p>
47 <p>Как вы разгадали этот хитрый дизайнерский ребус? Впрочем, под иконкой с сайта доставки еды именно такая подпись - варить 15-45 минут.</p>
48 <p>Какая подпись должна быть под этой иконкой?</p>
48 <p>Какая подпись должна быть под этой иконкой?</p>
49 <p><p>Карта осадков и гроз.</p>
49 <p><p>Карта осадков и гроз.</p>
50 </p>
50 </p>
51 <p>Нет, это была бы немного странная карта. Реальная подпись - "Остеопатия". Видимо, дизайнер изобразил тут спину. Это иконка с сайта медицинской клиники.</p>
51 <p>Нет, это была бы немного странная карта. Реальная подпись - "Остеопатия". Видимо, дизайнер изобразил тут спину. Это иконка с сайта медицинской клиники.</p>
52 <p><p>Остеопатия.</p>
52 <p><p>Остеопатия.</p>
53 </p>
53 </p>
54 <p>Так точно - картинка обозначает остеопатию. Это иконка с сайта медицинской клиники.</p>
54 <p>Так точно - картинка обозначает остеопатию. Это иконка с сайта медицинской клиники.</p>
55 <p><p>Дорожные развязки.</p>
55 <p><p>Дорожные развязки.</p>
56 </p>
56 </p>
57 <p>Нет, дизайнер изобразил тут спину: реальная подпись - "Остеопатия". Это иконка с сайта медицинской клиники.</p>
57 <p>Нет, дизайнер изобразил тут спину: реальная подпись - "Остеопатия". Это иконка с сайта медицинской клиники.</p>
58 <p>Какая подпись кажется логичной здесь?</p>
58 <p>Какая подпись кажется логичной здесь?</p>
59 <p><p>Первый искусственный спутник Земли.</p>
59 <p><p>Первый искусственный спутник Земли.</p>
60 </p>
60 </p>
61 <p>Нет, это не космические тела, а обыкновенная иконка с лупой - просто нестандартного вида. Её используют на сайте рекрутинговой компании, которая занимается поиском IT-специалистов.</p>
61 <p>Нет, это не космические тела, а обыкновенная иконка с лупой - просто нестандартного вида. Её используют на сайте рекрутинговой компании, которая занимается поиском IT-специалистов.</p>
62 <p><p>Сорсинговый центр.</p>
62 <p><p>Сорсинговый центр.</p>
63 </p>
63 </p>
64 <p>Да, это же иконка с лупой! Правда, не совсем стандартная. Её используют на сайте рекрутинговой компании, которая занимается поиском IT-специалистов.</p>
64 <p>Да, это же иконка с лупой! Правда, не совсем стандартная. Её используют на сайте рекрутинговой компании, которая занимается поиском IT-специалистов.</p>
65 <p><p>Поиск.</p>
65 <p><p>Поиск.</p>
66 </p>
66 </p>
67 <p>Тут нарисована лупа, но она обозначает сорсинговый центр - это иконка с сайта рекрутинговой компании, которая ищет IT-специалистов.</p>
67 <p>Тут нарисована лупа, но она обозначает сорсинговый центр - это иконка с сайта рекрутинговой компании, которая ищет IT-специалистов.</p>
68 <p>Что хотел сказать автор этой иконки?</p>
68 <p>Что хотел сказать автор этой иконки?</p>
69 <p><p>Разработаем MVP (минимально жизнеспособный продукт).</p>
69 <p><p>Разработаем MVP (минимально жизнеспособный продукт).</p>
70 </p>
70 </p>
71 <p>Вы хорошо считываете метафоры! Это иконка с сайта веб-студии.</p>
71 <p>Вы хорошо считываете метафоры! Это иконка с сайта веб-студии.</p>
72 <p><p>Правила безопасности скейтеров на дороге.</p>
72 <p><p>Правила безопасности скейтеров на дороге.</p>
73 </p>
73 </p>
74 <p>Нет, всё гораздо интереснее: реальная подпись - "Разработаем MVP". Это иконка с сайта веб-студии.</p>
74 <p>Нет, всё гораздо интереснее: реальная подпись - "Разработаем MVP". Это иконка с сайта веб-студии.</p>
75 <p><p>Как наш курьер заработал на автомобиль.</p>
75 <p><p>Как наш курьер заработал на автомобиль.</p>
76 </p>
76 </p>
77 <p>Нет, никаких историй про успешный успех: эта иконка иллюстрирует услугу по разработке MVP на сайте веб-студии.</p>
77 <p>Нет, никаких историй про успешный успех: эта иконка иллюстрирует услугу по разработке MVP на сайте веб-студии.</p>
78 <p>Последняя пиктограмма! Что у нас тут?</p>
78 <p>Последняя пиктограмма! Что у нас тут?</p>
79 <p><p>Вопрос сотруднику службы поддержки.</p>
79 <p><p>Вопрос сотруднику службы поддержки.</p>
80 </p>
80 </p>
81 <p>Нет, тут нарисован не сотрудник с большими ушами, а разъём для розетки. Это иконка с сайта сервиса ремонтных работ.</p>
81 <p>Нет, тут нарисован не сотрудник с большими ушами, а разъём для розетки. Это иконка с сайта сервиса ремонтных работ.</p>
82 <p><p>Конструктор Lego в возрастной категории 0+.</p>
82 <p><p>Конструктор Lego в возрастной категории 0+.</p>
83 </p>
83 </p>
84 <p>Нет, тут изображён не кубик Lego, а разъём для розетки - это иконка с сайта сервиса ремонтных работ.</p>
84 <p>Нет, тут изображён не кубик Lego, а разъём для розетки - это иконка с сайта сервиса ремонтных работ.</p>
85 <p><p>Розетки и выключатели.</p>
85 <p><p>Розетки и выключатели.</p>
86 </p>
86 </p>
87 <p>Верно, это иконка с сайта сервиса ремонтных работ!</p>
87 <p>Верно, это иконка с сайта сервиса ремонтных работ!</p>
88 <p>Кажется, у вас не получилось разгадать ребусы современных дизайнеров. Но не беда: в отрыве от контекста иконки действительно бывает трудно опознать. Когда пользователь заходит на сайт, он знает его тематику и читает текст, поэтому большинство пиктограмм вопросов не вызывают.</p>
88 <p>Кажется, у вас не получилось разгадать ребусы современных дизайнеров. Но не беда: в отрыве от контекста иконки действительно бывает трудно опознать. Когда пользователь заходит на сайт, он знает его тематику и читает текст, поэтому большинство пиктограмм вопросов не вызывают.</p>
89 <p>Хотя иконки не всегда несут смысловую нагрузку сами по себе, без них трудно представить современные интерфейсы. Хотите узнать, с чего началась история иконок, когда они ещё были совсем простыми и пиксельными?<a>Читайте</a>нашу статью о Сьюзен Кэр!</p>
89 <p>Хотя иконки не всегда несут смысловую нагрузку сами по себе, без них трудно представить современные интерфейсы. Хотите узнать, с чего началась история иконок, когда они ещё были совсем простыми и пиксельными?<a>Читайте</a>нашу статью о Сьюзен Кэр!</p>
90 <p>Неплохой результат! В жизни перед пользователями не стоит задачи угадать смысл иконки вне контекста: по тематике сайта и сопроводительному тексту уже проще опознать рисунок. Иконки - неотъемлемая часть современного интерфейса, которые появились ещё в начале восьмидесятых годов прошлого века. Хотите узнать больше о первых пиктограммах для интерфейсов?<a>Читайте</a>нашу статью о Сьюзен Кэр!</p>
90 <p>Неплохой результат! В жизни перед пользователями не стоит задачи угадать смысл иконки вне контекста: по тематике сайта и сопроводительному тексту уже проще опознать рисунок. Иконки - неотъемлемая часть современного интерфейса, которые появились ещё в начале восьмидесятых годов прошлого века. Хотите узнать больше о первых пиктограммах для интерфейсов?<a>Читайте</a>нашу статью о Сьюзен Кэр!</p>
91 <p>Вы мастерски угадываете значение иконок - у вас наверняка большой опыт работы с пиктограммами. Но, конечно, перед дизайнером не стоит задачи сделать универсальный шифр, понятный без слов, - значение иконок можно без проблем понять по тематике сайта и сопроводительному тексту. У пиктограмм в интерфейсах долгая история - первые появились в начале восьмидесятых годов прошлого века. Хотите больше узнать об их истории?<a>Читайте</a>нашу статью о Сьюзен Кэр!</p>
91 <p>Вы мастерски угадываете значение иконок - у вас наверняка большой опыт работы с пиктограммами. Но, конечно, перед дизайнером не стоит задачи сделать универсальный шифр, понятный без слов, - значение иконок можно без проблем понять по тематике сайта и сопроводительному тексту. У пиктограмм в интерфейсах долгая история - первые появились в начале восьмидесятых годов прошлого века. Хотите больше узнать об их истории?<a>Читайте</a>нашу статью о Сьюзен Кэр!</p>
92  
92