У міру того, як удосконалюються технології відображення інформації, а люди все більше починають користуватися Інтернетом, масштабування і підтримка високого дозволу в браузерах набули особливої важливості. Це перша з циклу статей, які розкажуть про зміни, внесених в Internet Explorer 8 з метою зробити сайти більш легкими для читання на сучасному поколінні моніторів. У сьогоднішній статті ми сконцентруємо увагу на змінах у функції масштабування.
Як використовувати масштабування?
По-перше, давайте подивимося, як використовувати переваги масштабування в Internet Explorer 8. У Internet Explorer 7 масштабування було ближче, по своїй суті, до оптичного збільшення, коли кожен елемент на сторінці масштабувати відносно свого розміру при візуалізації на рівні 100% збільшення або в нормальному режимі. Це призвело до проблем для користувачів і, зокрема, виникнення горизонтальної прокрутки. Новий механізм масштабування в Internet Explorer 8 масштабує елементи, які визначаються абсолютними величинами, такими як пікселі, без впливу на розмір елементів, що визначаються відносними величинами, такими як відсотки. Для повного опису виведення масштабування і поведінки візуалізації в Internet Explorer 8 дивіться цю статтю. Уподобання кожного індивідуального користувача дуже відрізняються, тому ми зробили доступними чотири способи збільшення і зменшення масштабу відображуваних сторінок: за допомогою призначеного для користувача інтерфейсу, за допомогою клавіатурних скорочень, за допомогою колеса миші, за допомогою сенсорних жестів (доступно в Windows 7).
Самим часто використовуваним і легко помітним способом масштабування сторінок є клацання по кнопці масштабування в правому нижньому кутку вікна браузера.
Мал. 1. Кнопка в нижньому правому куті браузера змінює масштаб зображення.
Клацання по іконці з лінзою дискретно змінює збільшення між 100%, 125% і 150%. Клацання по стрілочки праворуч від значка лупи надає доступ до більш точному масштабування.
Мал. 2. Клацання по стрілочки праворуч від значка лупи надає доступ до більш точному масштабування.
Також отримати доступ до всіх цих функцій ви можете, вибравши в панелі команд меню Вид, а там - Масштаб.
Використання клавіатурних скорочень є, мабуть, самим швидким способом зміни масштабів переглядається: збільшення масштабу на 25% можна виконати натисканням клавіш CTRL і «+», зменшення масштабу на 25% здійснюється натисканням CTRL і «-». Для того, щоб повернути масштаб до 100%, необхідно натиснути CTRL і «0».
При використанні клавіатурних скорочень для збільшення або зменшення масштабу, можна помітити, що значення масштабу прив'язується до 100%. Наприклад, припустимо, що ваш рівень масштабування встановлено на 115%. Якщо ви два рази натиснете комбінацію для зменшення масштабу, то його значення спочатку знизиться з 115% до 100%, а потім вже з 100% до 75%.
Жести на сенсорних екранах
Internet Explorer 8 пам'ятає ваші уподобання масштабування і використовує їх у всіх нових відкритих вкладках і вікнах. Наприклад, припустимо, що ви переглядаєте сторінку і вирішуєте, що масштаб в 125% підходить більше, ніж стандартні 100%. Клацання по значку лінзи в правій нижній частині вікна збільшить масштаб сторінки до 125%. Internet Explorer 8 запам'ятає дане перевагу і в майбутньому буде відкривати всі вікна і вкладки з уже встановленим масштабом в 125%. Фактично, в будь-якому з описаних вище способів зміни масштабу сторінки запам'ятовується Internet Explorer до тих пір, поки ви знову його не зміните. У Internet Explorer 7 було інше поведінку: масштабування скидалося до стандартного значення для кожної нової вкладки або вікна. Якщо ви віддаєте перевагу така поведінка, то можете включити його використання: на панелі команд відкрийте меню «Сервис», звідти відкрийте «Властивості оглядача» і перейдіть на вкладку «Додатково» - там необхідно поставити галочку напроти пункту відновлення масштабу для нових вкладок і вікон.
Мал. 3. На вкладці «Додатково» меню «Сервис», «Властивості оглядача» можна відновити поведінку IE7 при масштабуванні
Чи не губіться при використанні масштабування
Тестування показало, що багато користувачів IE губилися при використанні масштабування сторінки. Завдяки спільним зусиллям команд Internet Explorer Touch і Windows 7 Touch, ми реалізували так зване масштабування по точці фокусування, яке покликане вирішити цю проблему.
Що таке масштабування по точці фокусування?
Мал. 4. Фокус встановлений в області вуха президента Обами
Тепер ви можете збільшувати сторінку, скільки хочете, при цьому браузер буде прив'язаний до все тієї ж точці:
Як я можу використовувати точку фокусування?
Windows 7, одночасне натискання і точка фокусування
Якщо ви є одним з щасливих володарів комп'ютера з підтримкою сенсорних технологій і у вас встановлена Windows 7 RC. ви зможете використовувати деякі з функцій масштабування, доступні за допомогою сенсорних технологій, з використанням переваг точки фокусування.
Перша функція, яка може бути вам вже знайома, - збільшення розтягуванням. Коли ви використовуєте жест розтягування, розмістивши два пальці на сенсорній поверхні, фокус визначається половиною відстані між ними.
Мал. 7. При використанні жесту розтягування, фокус визначається половиною відстані між пальцями.
Чим більше ви будете розводити пальці в сторони, тим більше Internet Explorer буде збільшувати сторінку (відсоток масштабування збільшиться), і навпаки, чим ближче ви будете зводити пальці, тим більше Internet Explorer буде зменшувати сторінку (відсоток масштабування зменшиться), використовуючи одну і ту ж точку фокусування. Рівень масштабування прямо пропорційний зміни дистанції щодо актуального рівня масштабування.
Збільшення подвійним натисканням
Необхідно відзначити, що будь-які зміни в рівні масштабування, зроблені таким чином, не переносяться при навігації, відкритті нових вкладок або вікон. Завдяки користувачам ми виявили, що в основному люди використовують функції жестів для швидкого вивчення та натискання на посилання. Ви можете змінити стандартні настройки масштабування за допомогою інтерфейсу, клавіатурних скорочень або миші, як було описано вище.
Коли масштабування по точки фокусування працює не так, як передбачалося
Узгодження масштабування з високою роздільною здатністю в Windows
До наступної зустрічі
Сподіваюся, що вам сподобаються удосконалення, які ми внесли в функцію масштабування за останні кілька місяців, і ми з радістю буде чекати ваших думок. Найближчим часом ми опублікуємо другу частину цієї статті, в якій сконцентруємося на технічних аспектах масштабування, технології High DPI і платформі для розробки. Сподіваємося, що документ Zoom and High DPI. згадуваний вище, трохи вам допоможе. До скорого!
Харел Вілльямс (Harel Williams),
провідний спеціаліст по розробці UX