Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

О золотом сечении

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

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

«меньшее так относится к большему, как большее к целому».

К примеру я хочу нарисовать оно, одно простое окно, его размеры W x H, для того, чтобы длинна и высота окна находились в пропорции золотого сечения я решаю такое уравнение H/W = W / (H+W), это обычное квадраное уравнение, один из корней которого H = 0.61 * W, т.е. при длинне 500 пикселей высота окна 305 пикселей.

Гляньте на прямоугольник кредитной карты, он вам нравится, как прямоугольник? Его стороны находятся в пропорции золотого сечения.

Но с окнами, пиктограммами и прочим беда, они никогда не смотрятся нормально при таких параметрах. Почему?

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Что — то мне это напоминает тему про шахматы. Ну как же, тысячи лет назад придумали, должно быть полезно — приполезнно. Да если бы наши предки увидели какой нибудь простенький процессор, они бы построили храм, и молились бы на него много веков. И Да Винчи с Евклидом и Фибоначчи тоже бы молился.

хуже программиста делающего картинки может быть только дизайнер пишущий сайты

может стоит нанять дизайнера или аутсорснуть дизайнерские таски?

Перейдите от периметров (размеров сторон) к площадям, например, малое — это окно, большое — экран. Другой пример, панель по площади — малое, окно — большое. А по поводу карточки и ее золотого сечения, сделайте из проволки такой же прямоугольник, как карточка, или ножницами из бумаги, и полюбуйтесь им, причем долго так созерцайте. По итогу поймете что фигня-фигневая по размерам, никакой радости и пафосности от держания такого чуда в руке.

Относительно кнопок. Берем текст или изображение для отображения в них. Как на меня, по золотому сечению лучше высчитать размер отступа (padding) по бокам (большое) и сверху/снизу (меньшее) от содержимого. Что-то одно на выбор фиксируем и высчитываем ему пару.

гуглил картинки таким словосочетанием: design proportion grid ui, примерно о золотом сечение.

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

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

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

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

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

Но с окнами, пиктограммами и прочим беда, они никогда не смотрятся нормально при таких параметрах. Почему?
Думаю, что нужно приводить скриншот, иначе непонятно о чём речь.

Попробуй коеф : 0,56, как у айфона :)) Миллионы мух не могут ошибатся :)

Звісно, хто такі Евклід, да Вінчі, Піфігор... Стів Джобс — наше всьо!

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

Пруф: сиськи не соответствуют золотому сечению, и тем не менее нормально смотрятся.

против сисек не попрешь :)

но его корни как раз из природы.
Сильно притянуто за уши, как с листьями, так и с ракушками (всеми любимая nautilus shell), так и с человеком.

Ще варто додати відому Вітрувіанську людину, да Вінчі.

uk.wikipedia.org/...wiki/Вітрувіанська_людина

В данному випадку палець ± порівнюваний з піктограмою, а пропорції у Вітрувіанській людині починаються з пальця( кисть становить чотири пальці, ступня складає чотири кисті і т.д.).
Тому пропорції є і дуже чіткі.
Сам малюнок складає 34,3×24,5 сантиметри, що порівнювано з розміром монітору і відповідно, будь-яким інтерфейсом(сайт, меню, гра і т.д.) відображованим на ньому.

Сам принцип в тому, щоб зображення було можна розгледіти з будь-якої відстані. Тобто, якщо розглядати велику картину зблизька, можна було сфокусуватися на деталях, а якщо здалеку — було видно основне.

Для дизайна зображень під перегдяд на комп′ютері — немає жодної необхідності в розробці таких «адаптивних» малюнків. А якщо необхідність з′явилася (що дуже рідко) — краще використати звичайне масштабування, або навіть 3D якщо матеріал має справити вираження на дуже великому екрані..

Достаточно 20г золотой цепуры и крестик между сисег, и уже относяЦЦо и смотряЦЦа еще лучше ;) И потом я сильно подозреваю, шо 3-4 размер соответствует золотому сечению куда правильнее, чем нулевой или 6-й.

Так не честно! Это удар ниже пояса!

Підписатись на коментарі