Адаптивні заголовки та логотипи - поради та підводні камені
Концепція адаптивного веб-дизайну проникла в Інтернеті і стала основним продуктом для розробників інтерфейсів. Не можна заперечувати цінність адаптивного дизайну в сучасному світі, але існує певна складність у повному розумінні того, як правильно розробляти відповідні макети.
Тема може тривати довго, оскільки існує дуже багато унікальних областей веб-сайту, але фокусування на окремих елементах може допомогти краще зрозуміти цілі користувача, а також досягти цих цілей за допомогою адаптивного дизайну..
Я хотів би прикрити дизайн поради для заголовків, логотипів, і меню навігації, оскільки вони стосуються адаптивного дизайну. Візьміть ці пропозиції, оскільки вони застосовуються до вашої власної роботи, і переконайтеся, що ви розробляєте свої інтерфейси з урахуванням поведінки користувачів.
Розріджувачі Navbars
На великих екранах нормально мати великі заголовки, можливо навіть великі заголовки з багаторівневими рівнями. Але менші екрани не мають однакового простору і повинні бути обмежені в міру необхідності.
Оскільки зазвичай використовуються рідні мобільні програми фіксованих заголовків, Це звичайна практика у розробці дизайну. Фіксований заголовок слід також зменшити коли на менших пристроях: це залишає більше місця для вмісту, але все ж дає читачам прямий доступ до заголовка & навігації.
Візьміть, наприклад, розкладку мультфільму Brew на повнорозмірному моніторі та на мобільному пристрої.
У точці розриву 600px навігація зменшується майже на половину своєї висоти на сторінці. Це зменшує як логотип, так і навігаційне меню з можливістю натискання, але вони є значно пропорційніше до відносного простору екрана.
Також врахуйте, що у мультфільму Brew є випадаюче меню, що відповідає меню на екрані мобільного телефону. Це означає накладання вмісту на сторінці, коли відкрито, так що важливо залишити достатньо місця для цього.
Подібний приклад можна знайти на веб-сайті Джексонвілл Арт Уолк. Верхня навігаційна панель залишається фіксованою під час прокрутки, але зменшується на менших пристроях. Це краще для реагування дизайн, тому що більш тонкий Navbar залишає більше місця для змісту на меншому екрані мобільного телефону.
Кожне посилання на навігаційній панелі містить відповідну піктограму до текстового посилання. Це чудово виглядає на широкоекранному моніторі, але це занадто детально для невеликих екранів.
Навігація Art Walk переходить до випадаючого меню з фіксованими посиланнями навколо точки зупину 770px. Піктограми приховані у випадаючому меню, оскільки вони будуть надто малими та надто тісними на менших пристроях.
При проектуванні чуйного заголовка завжди враховуйте загальний простір екрану при укладанні навігаційної панелі. Якщо ви не хочете, щоб заголовок залишався фіксованим, це цілком нормально, але ви все одно захочете скоротити його трохи щоб зберегти кімнату у верхній частині сторінки.
Iconify Логотип
Більшість логотипів містять певний текст і піктограму або графіку для представлення бренду. Це означає, що ви завжди можете iconify (так, це справжнє слово) такого роду логотипи до символу його повної версії.
Це потужна техніка для реагування на заголовки, оскільки не завжди достатньо місця для повного логотипу. Ви втрачаєте частину блиску та гламуру логотипу в повному розмірі, але це ціна, яку ви, можливо, доведеться заплатити за чистий адаптивний макет.
Перегляньте логотип для веб-дизайнерських новин і дізнайтеся, як він змінюється під час зміни розміру браузера.
Можливо, не всі розпізнають цю іконку при першому відвідуванні сайту, але завдяки розпізнавання образів це не велика проблема.
Люди були в Інтернеті достатньо довго, щоб знати, що верхній лівий кут сторінки зазвичай зарезервований для логотипу. Ця маленька рожева піктограма також використовується у favicon, так що легко зробити деякі висновки, не копаючись занадто далеко на сайт.
Вам не завжди потрібно покладатися на графіку для цієї техніки конденсованого логотипу. Заголовок Young And Hungry використовує яскраво-зелений текст для логотипу, який згодом конденсується до тексту "Y&H".
Визначено, що це може не працювати для кожного сайту, якщо його не можна легко розпізнати як окремі літери. Але це показує, що логотипи можна зробити простіше і в графіку, і в текст, і в обидва варіанти займають менше місця на невеликих екранах.
Обробка повноекранних фонів
Багато цільових сторінок використовують фони на весь екран, щоб привернути більше уваги. Це потужна техніка, але часто працює найкраще на великих моніторах.
Отже, як це зробити на меншому екрані? Взагалі, дизайнери теж видалити фонове зображення минуле певної точки розриву або самого зображення отримує перепланування щоб поміститися у вікно.
Cap Radio Raffle використовує цю техніку на своїй домашній сторінці. Фонове зображення утримує фокус у будь-який час, незалежно від розміру екрана.
Такого роду рішення типово вимагає певного позиціонування CSS але це дуже просто, коли ви отримуєте це. Просто утримуйте фокус в очах в усі часи, і змінити розмір контейнера зображення щоб відповідати пропорційно до пристрою.
Крім великих фонів з естетичних причин, ви можете також використовувати великі зображення для вмісту сторінки. Домашня сторінка Mashable використовує фонове зображення для верхньої історії, яка охоплює весь макет.
Їх чутливий макет стискає зображення час збереження центрального координаційного центру. Це важко зробити, тому що це зображення змінюється, коли історія змінюється, тому фотографії потрібно ретельно курувати. Рішення Mashable все ще є прекрасним методом обробки фотографій у повноекранному режимі для блогів та макетів журналів, коли вони розроблені належним чином.
Спростіть навігацію
При реконструкції для невеликих екранів, зберегти якомога більше посилань у навігації та зробити її легкодоступною. Це означає, що вам може знадобитися декілька посилань, якщо ви маєте багаторівневі випадаючі меню.
Хоча, якщо ви маєте правильну стратегію, все одно можна зберегти всі випадаючі списки в такті. Наприклад, Kidscreen використовує a вибору меню з малі іконки стрілка що вказує на посилання в меню відповідей.
Багато людей сперечаються проти меню гамбургера, але я прийшов прийняти його як необхідний пункт для довгого меню меню. Вона просто працює і стала широко зрозумілою для більшості користувачів смартфонів як "кнопка меню".
Насправді, вам буде важко знайти чуйний сайт, який не покладається на меню з трьох бар. CyberChimps - чудовий приклад використовує вертикальне розкривне меню скоріше, ніж занурення.
Структура навігації для CyberChimps змінюється, щоб ковзати вниз на верхній частині сторінки. Меню падає зверху великі елементи блоку для посилань.
С більше області для натискання і більший текст посилання, процес навігації сторінок стає набагато простішим. Прагніть слідувати цій філософії з усім відповідним заголовком, і ваші проекти різко покращаться.
Створіть свій власний
З цими порадами у вашому розпорядженні не повинно бути жодних проблем з побудовою корисних відповідей на заголовки. Хоча існує багато інструментів, щоб допомогти вам, єдиний спосіб дійсно зрозуміти - це практика.
Тож беріть з собою ці прийоми і починайте будувати сайти! Я також перелічив декілька додаткових ресурсів для відповідних заголовків, які можна переглянути нижче.
- Створіть базове мобільне навігаційне меню CSS (teamtreehouse.com)
- Краща практика для чуйного заголовка веб-сайту (ux.stackexchange.com)
- Як я можу зробити своє зображення заголовка правильно реагувати? (stackoverflow.com)
