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

28.11.13

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


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

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

ok rounding
Светло серая область (контент) внутри закругленного прямоугольник чувствует себя комфортно и свободно.
ok rounding
Здесь же, все выглядит искусственно и зажато.

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

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

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


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

Для эргономичности у смартфонов скругляют углы.
Иногда слишком стараются в этом уйти от конкурентов.

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

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

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

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


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

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


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

Радиусы: 90-70-50.
Закругления пропорционально уменьшаются в зависимости от расстояния до границы родительской фигуры.
Радиусы: 90-90-15.
Вторая вложенная фигура не может иметь такой же радиус, как и внешняя. У третьей слишком маленький радиус для такого расстояния от внешней границы.

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


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

17.06.13

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

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

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

#1 О разделители в кнопке

26.01.13

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

Отлично
Не нравится
Полный отстой
Вертикальный разделитель — обязательный атрибут для кнопки с дополнительным функционалом. Главное — логическое разделение функционала
Отлично
Не нравится
Полный отстой
Без разделителя кнопка воспринимается как выпадающий список. При желании открыть его, все нажимают на надпись (зачем целится в стрелку)

«Два действия — две кнопки»


Обратная ситуация, когда кнопку простого выпадающего списка (с одной единственной функцией открытия выпадающего списка) рисуют с ненужным разделителем.

Русский
English
Правильная кнопка выпадающего меню
Русский
English
Вводит в заблуждение: 2 кнопки — 1 действие

Никогда не разделяйте кнопку без необходимости.

«Одно действие — одна кнопка»