Використання типографіки в дизайні інтерфейсу
Типографіка є дуже важливою частиною в дизайні для користувача інтерфейсу. Ми бачимо шрифти всюди і постійно взаємодіємо з інтерфейсами, основним елементом яких є саме шрифт. Існує безліч правил, методів і теорій, що дозволяють наблизити типографіку до ідеалу, але в кінцевому підсумку все залежить від смаку і навичок конкретного дизайнера. Є кілька практичних порад і хитрощів при роботі зі шрифтами, завдяки їм можна істотно збільшити ефективність типографіки в своїх проектах, пропонуємо їх вашій увазі.
Теорія та практика
Типографіка це дуже велика і цікава тема, але дуже вже втомлива, якщо мати на увазі ті теоретичну частину. Тому замість міркувань про леттерінге і лігатури, краще розглянути питання на практиці.
користувачі
Гарний шрифт це завжди добре, але крім естетики потрібно пам`ятати і про користувачів. Так, дизайнер працює в умовах обмежень, його хвилює дозвіл екрана і маса інших технічних аспектів, але інтерфейс він створює для людей. Шрифт, який він буде використовувати повинен бути універсальним і гібкуім. Що це означає? Хороший шрифт має на увазі наявність безлічі накреслень, від легких, то важких, в ньому мають бути присутні різні спеціальні символи, при цьому бажано, щоб обраний шрифт добре виглядав як на екрані комп`ютера, так і на фізичних носіях. Дуже важливо приділити увагу вибору шрифту з самого початку, інакше може вийти, що весь проект доведеться переробляти, коли виявиться, що користувачі не можуть взаємодіяти з інтерфейсом так, як було задумано.
Хороша типографіка робить читання приємним, а про поганий користувачі часто відгукуються в стилі «очі зламав» або взагалі нецензурно. Розуміння того, що робить шрифт розбірливим, дає загальне кончина про те, які шрифти найкраще працюють в призначених для користувача інтерфейсів.
Чіткість
Шрифт повинен бути чітким і розбірливим, тобто дизайнер повинен розуміти, наскільки легко можна відрізнити одну букву від іншої в різних накресленнях того чи іншого шрифту. Це мікротіпографіка, де значення мають штрихи, переходи, накреслення та інші дрібні деталі. При цьому накреслення є одним з найважливіших факторів, що впливають на читаність шрифту. Далеко не всі шрифти є розбірливими, тому значна їх частина в принципі не може використовуватися в дизайні інтерфейсу. Наприклад, в латиниці найпоширенішою причиною є відсутність відмінності між великою літерою I і малої l (л). Дизайнер повинен уникати такого роду шрифтів, так як у користувачів обов`язково виникнуть проблеми при взаємодії з інтерфейсом невеликих пристроїв.
Висота символів
Велика частина текстів, з яким мають справу користувачі, набрана малими літерами. Однак при цьому важливо, щоб у шрифту було гармонійне поєднання між малими та великими символами, це робить шрифт більш розбірливим.
просвіти
Також потрібно пам`ятати, що є таке поняття, як внутрібуквенний просвіт, тобто порожній простір усередині символу. Наприклад у випадку з літерами О, С або Р розмір просвіту часто має величезне значення, так як він впливає на читаність шрифту. Багато дизайнерів, часто працюють з типографікою, вважають, що просвіти дозволяють нам краще розрізняти букви в рядку.
вага
Легкі шрифти зазвичай більш перебірливі, ніж масивні. У масивних шрифтах менше внутрібуквенние просвіти, що сильно впливає на розбірливість тексту. Тому в дизайні інтерфейсу потрібно дуже обережно використовувати накреслення Bold і не набирати їм більш-менш великі тексти. Краще залишити жирне накреслення для заголовків.
пропорції
Пропорція це відношення ширини символу до його висоті. Найбільш популярні шрифти, такі, як Helvetica або Arial дуже збалансовані, тобто у них практично ідеальні пропорції в стандартному зображенні. Ці шрифти досить розбірливі, тому дизайнери інтерфейсів використовують базові версії цих шрифтів, лише іноді застосовуючи накреслення Condensed або Bold.
межбуквенное відстань
Сьогодні дизайнеру зовсім не обов`язково ретельно підбирати інтервали між буквами відстані, але слід пам`ятати, що чим більше розмір шрифту, тим помітніше помилки. Такий текст виглядає неохайно і погано сприймається користувачами. Якщо межбуквенное відстань занадто велике, швидше за все доведеться його підкоригувати, скоротивши або збільшивши інтервали між символами. Зазвичай це робиться для заголовків, так як у випадку з дрібним шрифтом, невеликі огріхи не так видно.
читаність
Читаність - це досвід користувача при взаємодії з текстовим контентом. Те, як легко користувач сканує тест, має величезне значення. Заголовки, підзаголовки і абзаци роблять текст більш читабельним. Це макро-типографіка, тобто спосіб зробити текст більш привабливим і зручним для читання. Тут типографіка дуже схожа на мистецтво, так як дизайнер повинен враховувати контраст, колір, розмір шрифту і безліч інших аспектів, що впливають на призначений для користувача досвід.
Шрифти із зарубками і без
Історично склалося так, що шрифти із зарубками вважаються більш розбірливими. У докомпьютерную епоху при друку великих масивів текстів найчастіше використовувалися шрифти із зарубками, так як це полегшувало процес читання. Зарубки дозволяють оку легко ковзати по рядках, швидко скануючи текст.
Відео: Типографія в веб-дизайні - ТОП 5 правил типографіки на веб-сайтах
З появою комп`ютерів і мобільних пристроїв ситуація змінилася. Є невелика кількість шрифтів із зарубками, які є чіткими, тому все частіше дизайнери інтерфейсів вибирають шрифти без зарубок, в чому легко переконатися. Дисплей це не папір, сьогодні користувачі не читають дуже довгі тексти, а в дизайні інтерфейсу довгі тексти взагалі відсутні, якщо мова йде про візуальних елементах.
Міжрядковий інтервал
На читаність тесту дуже впливає міжрядковий інтервал, тобто порожній простір між рядками. Щоб підібрати ідеальний інтервал має сенс використовувати принцип золотого перетину. Ця маленька хитрість значно збільшує розбірливість текстів. Потрібно зробити наступне: помножити розмір символу на 1,618, в результаті вийде оптимальне значення інтервалу. Досвідчені дизайнери в цій хитрощі не потребують, а ось новачки за допомогою цього способу можуть зробити набраний текст більш приємним для читання.
Ширина текстового блоку
Сприйняття тексту користувачем нерідко залежить від ширини текстового блоку. Занадто широкі блоки з довгими рядками ускладнюють читання, так як оці стає важче переходити від рядка до рядка. Якщо ж блок занадто вузький, то швидке сканування сповільнюється, так як короткі строки порушують ритм читання.
Відео: [Початківцям] Композиція, Колір, Ритм, Акценти, Типографіка, Photoshop
Немає ніяких правил, що регламентують ширину текстового блоку, однак сьогодні рекомендована довжина рядка становить 50-70 символів, враховуючи пробіли.
кольори
Те, яким буде колір шрифту, залежить від проекту, але в дизайні інтерфейсів можна використовувати один простий трюк. Він полягає в тому, щоб використовувати замість чорного або сірого близькі до них відтінки. Невелика, практично непомітна деталь, але іноді цей спосіб дійсно покращує сприйняття тексту.
білий простір
Тема правильного використання простору хвилює дуже багатьох дизайнерів, але коли справа стосується типографіки, потрібно пам`ятати, що основне призначення пустого простору полягає в тому, щоб уникнути візуальної мішанини. Макети з достатнім простором між елементами сприймаються легше, тому що не ускладнюють сканування текстових блоків. Гармонійне розташування елементів створює відчуття порядку, витонченості та елегантності.
ієрархія
Ієрархія елементів вказує користувачу, як саме йому потрібно читати текст. За допомогою ієрархії легко виділити заголовки, підзаголовки і основний тест. Це досягається різними способами, змінюючи розмір шрифту, використовуючи контраст, поля, відступи і так далі. Ієрархія елементів дуже важлива в дизайні користувальницьких інтерфейсів, тому їй потрібно приділити достатньо часу, якщо потрібно досягти хорошої читабельності.
сепаратори
Хорошим способом розділити текстовий контент на блоки або секції є використання сепараторів. Найбільш популярним сепаратором є звичайна лінія. Це простий, але дуже дієвий інструмент, який може суттєво збільшити показник читаності.
Ще один спосіб поділу контента полягає в використанні популярних зараз карт або, як їх ще називають, плиток. Він відмінно працює, коли потрібно працювати з невеликими і не пов`язаними між собою текстовими блоками. Плитковий дизайн відмінно підходить для інтерфейсів мобільних пристроїв, так як він полегшує сканування контенту.
Ритм і повторення
Однією з найбільших проблем в дизайні інтерфейсів є ритм. Будь-який елемент, який повторюється, надає контенту єдність. З ритмом і повтореннями працювати нелегко, так як при цьому потрібно пам`ятати про позиціонуванні, розмірі тексту, кольорі шрифти, а також про відступи, полях, тлі та багато іншого. Якщо в дизайні потрібно використовувати повторення, то потрібно прагнути до того, щоб при скануванні контенту починав відчуватися певний ритм.
висновок
Безумовно, дизайнеру обов`язково потрібно знати теорію типографіки. Знайомство з її принципами може бути дуже захоплюючим і істотно розширить кругозір. Але ось практичні навички таким чином отримати не вдасться, доведеться опановувати цим мистецтвом самостійно. Щоб навчитися створювати привабливі інтерфейси, потрібна не тільки теорія, а й дуже багато практики.
