29, Жовтень, 2013, PEREDELKA
Підписка на блог електронною поштою
Спільноти
Блог про Інтернет
Дизайн та юзабіліті інтернет-магазину
Пропоную до вашої уваги скромну презентацію, за якою я з горем навпіл виступив рік тому на конференції про інтернет-магазини.
І хоч вона і називається «Дизайн та юзабіліті інтернет-магазину», але про конкретно інтернет-магазини там нічого немає. У ній взагалі про дизайн, юзабіліті, і ось це все.
Поділіться з колегами:
Сподобалося це:
Секретна симфонія: докладний посібник із легкочитаної друкарні у вебі
Зараз ця математична симфонія звучить на вашому сайті. Кожен його відвідувач підсвідомо відчуває її і, що важливіше, схильний реагувати на неї певним чином.
У зв'язку з чим виникає головне питання: ця симфонія приємна і приваблива, чи вона діє відразливо і лише ускладнює комунікації з вашими читачами?
Математична симфонія друкарні
Як відомо, ця симфонія не прерогатива Інтернету. Ви «чуєте» її щоразу, коли читаєте книгу, газету, журнал чи сайт — будь-що, що містить друкарню.
На перший погляд вам може здатися, що математика та друкарня не мають нічого спільного між собою. Адже, зрештою, друкарня складається з літер та слів, а математика…ну…з чисел.
Але насправді друкарня — це комбінація художніх форм символів та математичних пропорцій, вишуканий шлюб між формою та функцією.
Математичні пропорції друкарні - це життєво важливий фактор для сприйняття сайту та його змісту.
Яким чином можна налаштувати пропорції, щоб виходила гарна математична симфонія? Давайте здійснимо подорож удрукарську кролячу нору і дізнаємося відповідь на це питання!
Три фундаментальні друкарські параметри
Кожен параграф тексту, який ви бачите, має 3 основні параметри, що вимірюються. Перші два,розмір шрифту тависота рядка - вимірюються по вертикалі.
Рисунок 1 — Як розмір шрифту та висота рядка представлені у браузерах. Розмір шрифту — це відстань від точнішої точки великої літери (S) до нижньої межі нижніх виносних елементів (y). Висота рядка ділиться навпіл і рівномірно розподіляється зверху та знизу від центру рядка.
Третій параметрдовжина рядка вимірюється по горизонталі.
Малюнок 2 — Висота та довжина рядка — це вертикальна та горизонтальна метрики типографіки.
Ці три параметри разом визначають те, як ви сприймаєте текст.
Щоб зрозуміти, як ці параметри взаємодіють, корисно розглянути кілька прикладів, у яких одна з метрик змінюється, інші залишаються постійними. Крім того, такий спосіб дозволяє побачити, як кожен із параметрів впливає на два інших.
Нижче на малюнку 3 висота і довжина рядка зафіксовані, а розмір шрифту змінюється від 13 до 16 пікселів.
Рисунок 3 — З фіксованими висотою та довжиною рядка стає ясно, що чим більший розмір шрифту, тим більше потрібна висота рядка для збереження пропорцій та зручності читання.
На малюнку 3, у першому абзаці висота рядка досить велика по відношенню до розміру шрифту, що створює щедрі міжрядкові пробіли, а в другому абзаці - навпаки: висота рядка занадто мала для нормальних просвітів між рядками. Це дає відчуття певної затисненості тексту.
Звідси можна зробити важливий висновок: якщо розмір шрифту збільшується, то висота рядка повинна збільшуватися, щобзберегти геометричні пропорції тексту. Іншими словами:
Розмір шрифту та висота рядка мають прямо пропорційну залежність.
У наступному прикладі розмір шрифту та висота рядка фіксовані, а довжина рядка варіюється від 233 до 466 пікселів.
Рисунок 4 — У міру збільшення довжини рядка читання тексту не може, оскільки висота рядка не збільшується для компенсації ефекту надмірної ширини.
Незважаючи на той факт, що на малюнку 4 висота рядка однакова в обох абзацах, їх зручність читання значно відрізняється через різну довжину рядків.
Чим більша довжина рядків, тим складніше ковзати поглядом між ними (рух очей від кінця одного рядка до початку наступного), за умови, що висота рядка не збільшується відповідно.
Ці висновки підтверджують проведені дослідження. У 2004 році Мері Дайсон (MARY C. DAYSON) з Інституту Читання (яка іронія, так?) встановила, що:
«Велика довжина рядка говорить про необхідність такого міжрядкового простору, який дозволив би очам безпомилково знаходити наступний рядок при зворотному ковзанні погляду…»
Що це означає для нас? Це означає, що висота та довжина рядка мають певну математичну залежність, а саме:
Для будь-якого розміру шрифту висота рядка повинна збільшуватись, якщо збільшується її довжина.
Але який математичний зміст цього співвідношення?
Гармонійні пропорції та золотий перетин
Відповідь на це питання простіша, ніж може здатися на перший погляд. Справа в тому, що природа дала нам правило для створення гарних та ефективних пропорцій.
Помічене у флорі та фауні, у формах галактик і навіть у ДНК, це правило настільки поширене довкола, що люди помітили його вже тисячоліття тому. Результатийого застосування можна простежити протягом усієї історії мистецтва та архітектури.
Що ж це за дивовижні пропорції, які «склеюють уламки цього світу»?
Звичайно ж, я говорю про золотий перетин.
Коли природі потрібні пропорції, щоб співвіднести речі та навести лад у будь-якому масштабі, вона прагне використовувати золотий перетин.
У випадку типографіки метою є співвідношення розміру шрифту, висоти та довжини рядка естетично приємним та впорядкованим способом.
То, можливо, золотий переріз можна застосувати для вирішення цього завдання?
Математика золотого перерізу типографіки
Як ви вже, напевно, здогадалися, відповіддю є рішуче «так »! І як це працює.
По-перше,розмір шрифт а (f)і висота рядка (l)співвідносяться через коефіцієнт подібності (h). Базове математичне рівняння виглядає так:
Відповідно до цього рівняння,оптимальна висота рядка вийде в тому випадку, якщо коефіцієнт подібності h дорівнюватиме золотому перерізу φ. Це дає нам наступне рівняння:
На жаль, знання оптимальної висоти рядка для заданого розміру шрифту недостатньо.
Раніше ми розглянули, як кожен із 3 друкарських параметрів (розмір шрифту, висота та довжина рядка) впливає на два інших.Тому, не можна говорити про висоту рядка або розмір шрифту без урахування довжини рядка.
З цього випливає, що має існуватиоптимальна довжина рядка, що відповідає оптимальній висоті рядка з рівняння вище.
Проблема у тому, що відомо, у якому саме співвідношенні перебувають висота і довжина рядка. Все, що відомо, так це те, що довжина рядка повинна бути істотно більшою за її висоти.
Використовуючи найпростішіматематичні моделі, можна зробити обґрунтоване припущення, що залежність між висотою і довжиною рядка носить експоненційний характер. Ось просте рівняння, що ілюструє це твердження:
Ці рівняння примітні тим, що вперше підводять під параметри тексту міцну математичну основу.
На замітку дизайнеру : Золотий переріз друкарні покликаний служити основою для правильного друкарського набору. Такі фактори, як x-висота символу та інші параметри шрифту, теж впливають на друкарню та повинні враховуватися у кінцевому дизайнерському рішенні. Однак золотий переріз типографіки забезпечує найбільш раціональну стартову точку для роботи в цьому напрямку.
Однак тут є невелика проблема: веб не настільки точний, як ці рівняння.
Відомо, що веб-дизайнери змушені використовувати цілі значення для таких речей, як розмір шрифту, висота і довжина рядка (і так буде до тих пір, поки субпіксельний рендеринг не стане реальністю).
Наведені рівняння дають на виході велику точність і безліч знаків після десяткової коми, просте округлення яких до найближчого цілого призводить до суттєвих помилок, що порушують точність друкарських пропорцій.
Суть у тому, що веб дискретний, і, отже, представлені вище ідеальні рівняння насправді не придатні тонкої настройки параметрів типографики.
Виходить, що якщо ви хочете використовувати золотий переріз типографіки на своєму сайті, то вам знадобиться коригування результатів цих рівнянь.
Тонка настройка золотого перерізу типографіки для Інтернету
Щоб зрозуміти, як викорінюється коригування, давайте розглянемо приклад.
Для шрифту розміром 16 пікселів ідеальна висота рядка виходитьтоді коли коефіцієнт h дорівнює золотому перерізу (≈1.61 — Прим. перекладача). Це дає оптимальне значення для висоти рядка, що дорівнює 25.88854 пікселів. Використовуючи це значення, ви можете обчислити, що оптимальне значення для довжини рядка дорівнює 670.21670 пікселя.
Якщо ви спробуєте використовувати ці значення у CSS-коді, то зіткнетеся з рядом проблем.
Оскільки дозволені лише цілі числа, веб не зможе відобразити висоту рядка, що дорівнює 25.88854 пікселя. У кращому випадку висота рядка дорівнюватиме 26 пікселям.
Але 26 пікселів — це більше ніж оптимальна висота рядка, отримана з рівняння. А як ми вже знаємо, не можна змінювати висоту рядка (навіть трохи!) без зміни відповідної довжини рядка (інакше кінцеві пропорції не будуть «золотими»).
Тому операція округлення висоти рядка з 25.88854 до 26 пікселів вимагає, щоб кінцева довжина рядка має бути більшою, ніж 670.21670 пікселів.
Цю суть коригування параметрів типографіки :
Якщо довжина рядка менша, ніж оптимальна довжина, то відповідна висота рядка повинна бути меншою, ніж виходить по золотому перерізу. І навпаки, якщо довжина рядка більша за оптимальну, то й висота рядка теж має бути більшою за розрахункову.
Нижче наведено малюнок, який ілюструє цю концепцію для найбільш застосовуваних розмірів шрифту.
Рисунок 5 — Для збереження геометричних пропорцій і зручності читання разом зі збільшенням довжини рядка повинна збільшуватися її висота. Сіра лінія на цьому графіку є золотим перерізом (φ), а кольорові — зміна висоти рядка щодо цього значення для найбільш поширених розмірів шрифту.
З точки зору математики, скориговані рівняння більшскладніші ніж рівняння, які ми бачили до цього. Але на щастя для вас, я вже провів важку роботу з їхнього отримання, тому ви можете сконцентруватися на концепції та її результатах.
У результаті вам потрібні 2 скориговані рівняння для різних випадків, з якими ви зіткнетеся при параметризації типографіки. Залежно від ситуації вам знадобиться визначити
скориговану висоту рядка, знаючи розмір шрифту та довжину рядка;
або скориговану довжину рядка, знаючи розмір шрифту та висоту рядка.
Обчислення проводимо за допомогою наступних рівнянь:
Використовуючи друге рівняння, можна визначити скориговану довжину рядка для розглянутого вище прикладу з розміром шрифту 16 пікселів і цілочисленною висотою рядка 26 пікселів.
Скоригована довжина, яка підтримує золоті друкарські пропорції, в цьому випадку дорівнюватиме 685.32505 пікселів. Для використання цього значення в Інтернеті, воно має бути заокруглено до 658 пікселів.
А тепер давайте розглянемо інший, насущніший приклад, який покаже як ви можете підправити типографіку на вашому сайті прямо зараз:
Що, якщо ви захочете використовувати шрифт 16 пікселів для тексту шириною 550 пікселів?
Якою має бути висота рядка у цьому випадку?
Ви можете вирішити це завдання таким чином:
Отримане значення дорівнює 25.00169 пікселів. Знову ж таки, для використання в Інтернеті це значення має бути округлено до найближчого цілого. Значення скоригованої висоти рядка дорівнює 25 пікселів.
Калькулятор золотого перерізу типографіки
Очевидно, що розрахунки великої кількості математичних формул під час роботи з друкаркою сайту можуть швидко стомити.
Спеціально для вирішення цієї проблеми я розробив калькуляторзолотого перерізу типографіки, який дозволяє неймовірно легко визначити її параметри для будь-якої ситуації!
Розумний та гнучкий калькулятор дасть вам золоті друкарські рекомендації, що базуються на ваших вихідних даних.
Якщо ви вкажете розмір шрифту, то калькулятор розрахує для нього оптимальну висоту та довжину рядка.
Якщо ви введете довжину рядка, то калькулятор покаже вам для неї по два найкращі розміри шрифту та два відповідні значення висоти рядка.
Якщо ви вкажіть розмір шрифту і довжину рядка, то отримаєте цілий набір:
Оптимізовані параметри типографіки для розміру шрифту і довжини рядка.
Найкращі значення параметрів типографіки для довжини рядка, який ви вказали.
Додаткові параметри значень параметрів типографіки для довжини рядка, який ви вказали.
Оптимальні значення типографіки для вказаного розміру шрифту.
Спробуйте пограти з калькулятором золотого перерізу та пізнайте небачену якість типографіки!
Особливе значення золотого перерізу типографіки
Я вже натякав на це, але тепер заявляю відкрито: речі, якими я поділився з вами вище, не обмежуються застосуванням у Інтернеті. Насправді…
Золотий переріз типографіки можна використовувати для будь-якого тексту будь-якого середовища.
Книги, газети, журнали, веб-сайти, електронні видання, що захочете. Скрізь можна отримати вигоду з покращених пропорцій цього перерізу.
Тепер, коли ви почали дивитися на світ крізь призму золотого перетину, ви побачите безліч можливостей оптимізації для друкарні.
Висновок
Золоті пропорції проявляються по всьому всесвіту в тих місцях, де форма та функція поєднуються для створення прекрасного, ефективного та корисного результату.
Чи запам'ятали математичну симфонію друкарні?
Завдяки золотому перерізу друкарні ви можете бути впевнені, що на вашому сайті для кожного відвідувача звучить золота симфонія.