Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>29 окт 2021</li>

3 <li>0</li>

4 </ul>Закон Фиттса, теория близости, отступы, якоря и гербы.

5 Иллюстрация: Meery Mary для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

8 Любые объекты, расположенные рядом, воспринимаются связанно. Это правило<a>сформулировал</a>Артемий Лебедев в своём "Ководстве".

9 Рассмотрим, как работает теория близости на примере обычных кружков. Если расставить их на одинаковом расстоянии, связи между ними не будет:

10 Изображение: Skillbox MediaЕсли поставить один из них рядом с другим - эти два объекта будут восприниматься связанно:

11 Изображение: Skillbox MediaА если увеличить отстоящий кружок - он будет подчинять себе остальные:

12 Изображение: Skillbox MediaЯркий пример использования этого принципа - вёрстка текстовой страницы. Заголовок всегда ставят к тексту, к которому он относится:

13 Изображение: Skillbox MediaЭтот же принцип можно легко применить к вёрстке таблиц и избавиться от лишних разделителей. Так как у объектов есть визуальные отступы, читатель легко поймёт, что означает каждая колонка:

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

15 "Точка любви у Палыча - ломбард". Изображение: Peekabone / "<a>Пикабу</a>"Это правило<a>описал</a>арт-директор Артём Горбунов. Звучит оно очень просто: "Внутреннее ≤ внешнее". Применить правило можно к чему угодно: к типографике, вёрстке текстовых блоков и даже к целым модулям со сложной иерархией.

16 В типографике внутреннее - это расстояния между штрихами букв, а внешнее - интервал между самими буквами. Если набрать строку шрифтом Montserrat c большими расстояниями внутри букв, межбуквенный интервал нужно будет тоже увеличить:

17 Изображение: Skillbox MediaУ шрифта Roboto Condensed обратная ситуация - так как буквы у него узкие, большой интервал ему ни к чему:

18 Изображение: Skillbox MediaЕсли рассматривать целый абзац, то здесь ситуация усложняется. В уравнении появляется интерлиньяж - межстрочное расстояние, которое должно быть больше или равно расстоянию между словами. Кстати, хороший интерлиньяж можно подобрать простой формулой - кегль умножить на 1,3:

19 Изображение: Skillbox MediaТа же ситуация и с абзацным отступом - он должен быть больше интерлиньяжа:

20 Изображение: Skillbox MediaЭто правило можно использовать и в вёрстке макета - поля должны быть больше абзацного отступа:

21 Изображение: Skillbox MediaЕщё одно<a>правило</a>от арт-директора Артёма Горбунова. Якорные объекты - те, которые сразу бросаются в глаза читателю: иллюстрации, заголовки, пиктограммы. Эти объекты должны тяготеть к якорным точкам модуля, расположенным в его углах или центре:

22 Якорные точки на модуле. Изображение: Skillbox MediaЯкорные объекты могут располагаться как в одной, так и сразу в нескольких точках:

23 Изображение: Skillbox Media Изображение: Skillbox MediaСтороны модуля - тоже якорные объекты. Этим правилом пользуются, например, разработчики macOS и Windows.

24 Якорные объекты в Windows 10 - верхняя и нижняя стороны экрана. Изображение: Skillbox Media Якорные объекты в Windows 10 - верхняя и нижняя стороны экрана. Изображение: Skillbox MediaФункциональность правила хорошо можно отследить на примере визиток. Как правило, заголовок и текст в них располагают в противоположных углах:

25 Все текстовые блоки занимают якорные точки макета визитки. Изображение: дизайн Jarosław Dziubek /<a>Behance</a>Промостраница Wallet Series. Заголовок и кнопки - якорный объект в левом углу, дополнительный текст - в правом углу, иллюстрация - на нижней стороне экрана. Изображение: дизайн Tran Mau Tri Tam /<a>Behance</a>Якорный объект - камера телефона на нижнем поле экрана. Скриншот:<a>apple.com</a>В 1954 году психолог Пол Фиттс провёл эксперимент. Он положил на стол две мишени и попросил испытуемых поочерёдно попадать в них ручкой. Расстояние между мишенями увеличивалось, а сами мишени - уменьшались.

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

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

28 Изображение: Skillbox MediaЕщё один вывод - нельзя ставить разные по смыслу кнопки рядом. Иначе пользователь может ошибиться и сделать неверный клик:

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

30 Изображение: Skillbox MediaБлагодаря закону Фиттса один из бывших дизайнеров Apple Джефф Раскин выяснил, почему панель настроек в программах для macOS удобнее, чем в их аналогах для Windows. И абсолютно те же различия можно заметить на современных системах.

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

32 Изображение: Skillbox MediaВ Windows выше панели инструментов вверху окна есть небольшой отступ под панель с кнопками "Закрыть", "Свернуть" и "Открыть на весь экран". Из-за этого попасть в нужное место становится сложнее. Но зато кнопка "Пуск" стоит в углу - благодаря этому пользователь может вести курсор "куда-то в угол", и он точно попадёт в нужное место:

33 Изображение: Skillbox MediaЭто правило считается основным в геральдике - дисциплине, которая занимается изучением гербов, их традиций и практики использования. Звучит оно очень просто: "Нельзя накладывать финифть на финифть и металл на металл".

34 Тинктуры, использующиеся в геральдике. Изображение: Skillbox MediaПравило сложилось в Средневековье - рыцарям и торговым судам было важно показывать на расстоянии, к какому государству они относятся и какой у них статус в обществе. Узор жёлтого цвета на белом фоне разглядеть с уже 20 метров невозможно, так как контраст этих цветов слишком мал. Другое дело, если тот же узор наложить уже на синий фон:

35 Герб средневековой Франции. Изображение:<a>Wikimedia Commons</a>/ Skillbox MediaАбсолютно тот же принцип работает в дизайне. Любые информационные продукты важно делать доступными, а жёлтый текст на белом фоне прочитать очень трудно:

36 Изображение: Skillbox MediaЕсли вы сомневаетесь, какие цвета использовать для фона, текста и иконок, обращайтесь к правилу тинктур. Оно часто подсказывает правильное направление для решения задачи:

37 Изображение: Skillbox Media<ul><li>Любые объекты, расположенные рядом, воспринимаются связанно.</li>

38 <li>Внутренние расстояния объекта должны быть меньше или равны внешним.</li>

39 <li>Самые заметные объекты макета должны занимать углы модуля.</li>

40 <li>Чем больше объект и чем меньше расстояние до него, тем проще в него попасть.</li>

41 <li>Нельзя рисовать жёлтым по белому.</li>

42 </ul><a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>