#3 Закругле­ния углов относи­тельно контента

28.11.13

Объекты и предметы с закруглёнными углами воспринимаются нами более органично чем с острыми углами, так как в природе почти не существует абсолютно острых углов.

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

Основные варианты закругления углов (удачные и не очень):

Хороший дизайнер чувствует на сколько можно скруглить углы. Но если у него плохое чувство «прекрасного», он может заучить одно правило:

«Область контента не должна пересекать центр круга скругления»

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

---

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

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

Например, в скругленном прямоугольнике, который стремится к форме круга, вообще не останется места для контента.

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

«Если длинна закруглённой части больше длинны незакруглённой, то эту фигуру можно считать кругом»

На такие фигуры правило закругления не действует.

---

В конце еще хотелось бы напомнить о правильном вложении скругленных объектов.

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

#2 Правильный :hover

17.06.13

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

В следующем примере рассмотрено сразу 3 ошибки (можете попробовать найти их сами):

1. Самое главное — изменение вида стрелки-курсора. Эта ошибка часто возникает, когда на обычные элементы, например <div>, цепляют функционал через JS.
2. Изменение вида объекта (и его вложенных элементов) должно происходить один раз при пересечении курсора функциональной области. В примере ссылка имеет вложенный тег с надписью «Скачать», цвет которого должен меняться при наведении на его родителя (функциональную область).
3. Стили :hover для важных обьектов нужно всегда прописывать в паре с псевдоелементом :focus, что бы при навигации с использованием только клавиатуры (без мышки или тачпада) функционал был максимально отзывчивым и удобным.
   Используйте tab на клавиатуре что бы протестировать интерфейса в экстремальных условиях.