Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design

Маленькая подсказка: Делайте правильно скругленные углы

by
Read Time:2 minsLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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

Кто тут педантичен?

Неправильно вложенные углы можно обнаружить в дизайнах всех сортов, но я чаще всего их встречаю в дизайне иконок и интерфейсов. Если вы до сих пор не понимаете, о чем я говорю, то взгляните на эти две картинки – какая из них заставляет меня скрежетать зубами?

Точно, вторая

Сделайте по-простому: если у вас есть два скругленных угла, которые находятся параллельно друг другу, внешний угол должен иметь больший радиус, который обтекает окружность внутреннего угла.

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

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

Сгибаем трубы

Думайте об эффекте, который вы создаете, как о сгибании труб:

Рабочий гнет трубы

Посчитайте

Интерфейсы, созданные на html/css, могут часто усложнить задачу по закруглению углов. Вспомните о формах или кнопках.

Здесь невозможно быть излишне точным; разница между обоими border radius должна равняться промежутку между ними. Просто!

И оно тоже может быть адаптивным, например:

Отлично закругленные углы (смотрите демо).

Исключения

Как и везде в дизайне, четких правил не существует и здесь. Вы всегда найдете исключения. Это дело ощущений.

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

Выпадающее меню – UI/UX с CSS3 от Джонатана Морейра

Те, кто сделали это правильно

Я думаю вам наскучило слушать о таких очевидных вещах. Вместо ужасных примеров, давайте лучше взглянем на отличные примеры работ с Dribbble!

Snooker Table icon by JJ-Maxer
Postale Icon App by Aditya Nugraha Putra
Icon by chnvan
Found UI by Martin Karasek
Veggie Meals app icon by Max Rudberg
Upload button by Fares Farhan
BPM Lock Button (ON) by Paul Flavius Nechita
Sign In Button by Brad Haynes
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.