Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 45
До некоторой степени перед вами плоды WWW-археологии: как я и сказал в своём примечании, Lea Verou сочинила эту блогозапись почти три года тому назад, с тех пор вышли многие новые браузеры. Тем не менее, насколько я мог судить, все пять советов в настоящее время актуальны, причём совет о плавных цветовых переходах даже перестал быть исключительно вебкитовым и работает в последних версиях всех популярных браузеров, кроме, разве что, Opera Mini. А совет о спецсимволах заставляет сожалеть о том, что коллекция Google Web Fonts не принимает спецсимвольные шрифты — не то можно было бы вырезáть отдельные символы и подгружать их со страшной, радующей душу, скоростью.
Я вот не люблю использовать спецсимволы из шрифтов, потому что сглаживание.
Из-за него, например, красивая стрелочка (слева) часто превращается в какое-то кособокое уебище (справа):
Поэтому я предпочитаю все отрисовывать самому. Или я просто очень люблю пиксель-арт :)
Из-за него, например, красивая стрелочка (слева) часто превращается в какое-то кособокое уебище (справа):
Поэтому я предпочитаю все отрисовывать самому. Или я просто очень люблю пиксель-арт :)
Хорошо захинтованный шрифт в этом отношении превосходит пиксель-артовые возможности. Ибо масштабируется невозбранно.
Может быть. Но ведь возможны случаи, когда сглаживание отключено (на домашнем мониторе, например, оно мне просто выжигает глаза). Да и не раз было замечено, что шрифты выглядят по разному на разных дисплеях и ос. Ну а масштабируемость, в данном случае, не столь важна, хотя в более общем случае, пожалуй, сыграет не последнюю роль.
На счет иконок скажу, не важно символьные они или нет, с ними удобнее это факт, возьми интерфейс в телефоне или, например, навигацию по сайту. Даже скорее не удобнее, а приятнее.
Спасибо за перевод.
Спасибо за перевод.
Да и удобнее. Достаточно беглого взгляда, чтобы понять, что иконка делает, а не читать текст целиком. Ещё помогает цветовое кодирование кнопок типа зелёный — да/красный — нет. А бесят больше всего кнопки, начинающиеся с одних слов вроде: «Выйти и сохранить»/«Выйти и не сохранить», — пока найдёшь значащее слово — расхочется пользоваться.
Честно говоря, меньше всего здесь ожидал увидеть слова «браузер» и «кросс-браузерный», учитывая автора перевода.
Но почему? Разве я когда-нибудь употреблял вместо слóва «браузер» какое-нибудь другое слово?
Я не следил за вашими статьями настолько серьезно, чтобы знать это точно. Просто у меня было впечатление, что вы стараетесь обходиться без заимствованных (с помощью транслитерации) слов, когда это возможно.
А обратил внимание только потому, что пару лет назад в дипломе всерьез хотел заменить слово «кроссбраузерный» на что-то более удобчитаемое. Но кроме «всеобозреваемый» ничего не придумал и оставил как было.
Словом, не обращайте внимания.
А обратил внимание только потому, что пару лет назад в дипломе всерьез хотел заменить слово «кроссбраузерный» на что-то более удобчитаемое. Но кроме «всеобозреваемый» ничего не придумал и оставил как было.
Словом, не обращайте внимания.
«межобозревательный» :)
Как вариант, но смысл потерялся окончательно :)
Вспомнился Язык Предельной Ясности у классика:
Вспомнился Язык Предельной Ясности у классика:
— Откроюсь тебе, что я — как составное яйцо. Во мне — девять сфер.
— Сфера — птичье слово!
— Виноват. Видишь, как я неизобретателен. Во мне — девять… ошарий.
вовсехбраузерахправильноотображаемый
может слово браузер упустить, раз речь идет о css?
Тогда получится просто «всеподдерживаемый»
Тогда получится просто «всеподдерживаемый»
Если бы браузер сделали первым в россии, то врятли бы его назвали «Обозревателем». Это все таки человеческое слово.
Была бы какая-нибудь аббревиатура типа Интерпретатор Активного Рассширенного Текста.
… просто, к слову
Была бы какая-нибудь аббревиатура типа Интерпретатор Активного Рассширенного Текста.
… просто, к слову
когда-то, в эпоху fido7.ru.html.chainik, бытовало прекрасное слово «бродилка»
Плавные переходы юзабилити не улучшат — дизайн, да, но пользоваться удобнее не станет. А всё остальное, полезно :)
Главное, чтобы не надо было ждать окончания анимации для взаимодействия. А то как раздражали флешевые меню, которые по несколько секунд разъезжаются.
Воспринимаемость — составная часть юзабилити (Aesthetic and minimalist)
Резкая смена цвета вызывает большее раздражение и большую вероятность эпилептического припадка :)
Плавная смена будет комфортнее даже на 40мс.
Резкая смена цвета вызывает большее раздражение и большую вероятность эпилептического припадка :)
Плавная смена будет комфортнее даже на 40мс.
Вы перепутали дизайн и юзабилити между собой.
Плавные переходы очень даже могут улучшить последнее, если грамотно их применить.
А дизайн интерфейса это не рисование картинок, это именно эффективность и общее удобство.
А рисование картинок это рисование картинок.
Просто у нас по неизвестной мне причине маляров в интернете называют веб-дизайнерами, а тех, кто на самом деле занимается дизайном сайтов вообще почти нет. Рисуют одинаковые сайты в N колонок, отличающиеся только названиями и цветом и считают себя дизайнерами.
Плавные переходы очень даже могут улучшить последнее, если грамотно их применить.
А дизайн интерфейса это не рисование картинок, это именно эффективность и общее удобство.
А рисование картинок это рисование картинок.
Просто у нас по неизвестной мне причине маляров в интернете называют веб-дизайнерами, а тех, кто на самом деле занимается дизайном сайтов вообще почти нет. Рисуют одинаковые сайты в N колонок, отличающиеся только названиями и цветом и считают себя дизайнерами.
Я иногда небольшую тень ставлю тексту.
Для ряда таких символов существуют ключевые слова (named HTML entities), а другие придётся вызывать по их номерам в Unicode (наподобие ꯍ) — их придётся тестировать усерднее, так как не все они достаточно распространены в шрифтах.Зачем это всё, если есть Юникод?
Transition можно писать и так:
-prefix-transition: color 1s;
Для выбора символов: www.sciweavers.org/i2symbol
←(ಠ_ಠ)→
ОМФГ, Мицгол!
Ну справедливости ради, вчерашнее:
ASIDE: regarding using -webkit- prefix, clarification re: Lea Verou — she's advocated using *both* vendor prefixed properties (multiple
vendors) and the unprefixed version after them. See her talk
www.slideshare.net/LeaVerou/css3-a-practical-introduction-ft2010-talk
from Front-Trends 2010 for example. An actual example of -webkit-
*only* prefix examples (thus implied advocacy) is Google's
slides.html5rocks.com/, e.g.
slides.html5rocks.com/#css-columns has three -webkit- property
declarations starting with -webkit-column-count
Плавные переход
Вот раньше, в первой половине двухтысчяных и ранее баловались подобной ерундой на Яваскрипте. Потом подобные «классные» эффекты люди стали ненавидеть. А теперь тенденции опять меняются что ли только делать всё предлагаем на CSS?
> В этой блогозаписи я намерена…
Первая мысль — Мицгол сменил пол? Вторая мысль — пишет его фанатка? Третья мысль — надо автора глянуть.
Первая мысль — Мицгол сменил пол? Вторая мысль — пишет его фанатка? Третья мысль — надо автора глянуть.
Добавлю немного пожеланий цсс-кодерам:
Если используете плавные переходы — не делайте их до нудного долгими. Особенно там, где этого не надо. Ну вот совершенно незачем анимацию смены цвета растягивать на секунду, полсекунды там выше крыши. А в некоторых элементах дизайна медленные интерфейсы бесят просто адово. Скорость анимации должна быстрее, чем человек успевает среагировать, но медленней, чем успевает заметить (иначе она вообще не нужна) — чтобы она проходила раньше, чем я поведу мышь к другому элементу, и успевала открутиться за то время, пока мышь ещё не уехала (особенно касается ссылок)
Кстати отображать имеет смысл не только нажатия кнопок, но и наведение на оные. Чтобы было сразу понятно, что это кнопка. И стоит в любом случает писать правильный тег a или указывать alt, чтобы можно было понять без нажатия, куда оно на самом деле ведёт. И в случае яваскрипта или попапа нужно всё-равно писать тег a с нормальным человеческим путём просто потому, что: я могу отключить яваскрипт; я могу открыть ссылку в новой вкладке (очень неприятно открывать новую вкладку колесом мыши и обнаруживать в ней «javascript:popup» вместо вкладки, особенно когда вкладка-родитель давно закрыта или пролистана мимо); я могу быть гуглём. И хоть это очень старый совет, но всё-же если элемент никуда не ведёт, то вешать onclick на тег a не стоит.
Статья хорошая, хотелось бы побольше чтобы к ней прислушивались.
Если используете плавные переходы — не делайте их до нудного долгими. Особенно там, где этого не надо. Ну вот совершенно незачем анимацию смены цвета растягивать на секунду, полсекунды там выше крыши. А в некоторых элементах дизайна медленные интерфейсы бесят просто адово. Скорость анимации должна быстрее, чем человек успевает среагировать, но медленней, чем успевает заметить (иначе она вообще не нужна) — чтобы она проходила раньше, чем я поведу мышь к другому элементу, и успевала открутиться за то время, пока мышь ещё не уехала (особенно касается ссылок)
Кстати отображать имеет смысл не только нажатия кнопок, но и наведение на оные. Чтобы было сразу понятно, что это кнопка. И стоит в любом случает писать правильный тег a или указывать alt, чтобы можно было понять без нажатия, куда оно на самом деле ведёт. И в случае яваскрипта или попапа нужно всё-равно писать тег a с нормальным человеческим путём просто потому, что: я могу отключить яваскрипт; я могу открыть ссылку в новой вкладке (очень неприятно открывать новую вкладку колесом мыши и обнаруживать в ней «javascript:popup» вместо вкладки, особенно когда вкладка-родитель давно закрыта или пролистана мимо); я могу быть гуглём. И хоть это очень старый совет, но всё-же если элемент никуда не ведёт, то вешать onclick на тег a не стоит.
Статья хорошая, хотелось бы побольше чтобы к ней прислушивались.
Тем кто хочет нереально улучшить юзабилити своего сайта — идите на офигенский ресурс — http://9lessons.info
Есть разбор элементов Google+, Facebook, Twiter.
Может и баян, но я оттуда не вылезаю уже неделю. Это супер.
Есть разбор элементов Google+, Facebook, Twiter.
Может и баян, но я оттуда не вылезаю уже неделю. Это супер.
Хочу добавить на счет спецсимволов и иконок к кнопкам — не все так однозначно. Тут самое важное — контекст. Где-то это хорошо смотрится, а где-то будет «каша». С таким же успехом можно было бы порекомендовать цветовое кодирование или размещение кнопок в соответствующих функциональных местах в зависимости от их назначения (пейджинг — возле текста, кнопка «купить» — возле товара и т. п.).
«Вот какоЙ простоЙ уловкою» vs. «представляются мне сподручноЮ альтернативою»
o_O
o_O
В первом методе будьте аккуратней с маленькими элементами. Элемент получит мертвую зону 1px в левой и верхней части. Соответственно вероятность несрабатывания клика зависит от размера элемента. Кажется это паранойя :)
Интересный ресурс, спасибо. Жена как раз на днях о чём-то подобном говорила.
Помимо безопасности, Вам очень надо позаботиться о сохранности информации (резервирование и пр.), а то если данные накроятся лет через несколько — будет ну очень пользователям обидно.
Помимо безопасности, Вам очень надо позаботиться о сохранности информации (резервирование и пр.), а то если данные накроятся лет через несколько — будет ну очень пользователям обидно.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Улучшаем юзабилити за 5 минут