Выбранные и активные элементы. Быть лояльным к ошибкам пользователя
Вольный перевод статьи Якуба Линовски — «A Good User Interface» .
Хороший пользовательский интерфейс обладает высокими показателями конверсии и прост в использовании. Другими словами, он хорош как для бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию предлагается ряд практических идей, которые вы можете попробовать применить.
Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночногоМакет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с помощью рассказа с обязательным призывом к действию в конце.
Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности. Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей.
В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того, что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные функции вместе.
Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить конверсию.
Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что данные рекомендации или мнения присутствуют.
Повторение призыва к действию больше применимо к более длинным страницам или же используется повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение или завершить сделку.
Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу перейти. Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти различия должны быть явно выражены, и следует использовать их одинаковым образом во всем интерфейсе.
На картинке приведен пример, где синий цвет выбран, чтобы отметить все, что может нажиматься, а черный для всего, что было выбрано или указывает на то, где мы. При правильном применении, людям будет гораздо легче ориентироваться среди таких подсказок. Не усложняйте жизнь пользователям — не нарушайте смысловое кодирование.
В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что решение вообще будет принято и реализовано. Чтобы не допустить такой аналитический паралич, старайтесь подчеркивать и выделять одни варианты на фоне других.
Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают, что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это возможно.
Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие.
Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас есть все возможности добавить вашему сообщению убеждение. Кто знает, быть может, иногда стоит подсказать людям следующий шаг на пути оптимизации конверсии?
Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты). Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между контентом и основным действием должен быть сбалансирован.
Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом. Хороший способ рассказать о себе - упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта.
Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей, сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после отправки основной формы на отдельной странице или при помощи дополнительной формы. Расширить форму несложно, но меньшее количество полей позволяют увеличить конверсию.
Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования.
Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).
Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того, что вы от него ждете. Следите за количеством ссылок и по возможности соблюдайте баланс между разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит шансы добраться до важной кнопки.
Перевод статьи дизайнера Эрика Кеннеди “7 Rules for Creating Gorgeous UI”, которую он опубликовал в собственном блоге со списком из семи правил по созданию красивых .
Расскажу о правилах создания красивых и чистых интерфейсов.
Вот данные правила:
Есть только несколько надежных методов красиво наложить текст на картинку. Я расскажу вам целых пять и еще один в качестве специального бонуса.
В случае если вы желаете быть хорошим профессиональным дизайнером интерфейсов, вам следует научиться накладывать текст на картинку таким образом, чтобы это выглядело красиво и приятно для глаз. Это то, что сегодня умеет делать любой хороший дизайнер интерфейсов, и, к сожалению, не умеет плохой. Поэтому после прочтения данной статьи у вас уже будет огромное преимущество!
Наложение текста непосредственно на фотоЯ не хотел включать данный способ. Но технически вполне возможно наложить текст напрямую на фото так, чтобы это нормально выглядело.
Otter Surfborads. Выглядит инстаграммно и по-хипстерски. Но текст читается трудновато
В данном способе есть множество рисков и проблем:
Понятно? Хорошо! Отныне никогда не меняйте фото и текст, и все будет отлично.
Я не помню, чтобы хоть раз применял такой способ в своей деятельности. Но при его помощи вполне можно добиться реально классного результата, но будьте при этом аккуратны.
Веб-сайт экспедиции Aquatilis. Вам следует обязательно посмотреть, если еще не видели
Затемните все изображениеНаверное, наиболее простой метод наложить текст на фото - это затемнить ее. Если оригинальное фото не очень темное, вы можете наложить на него полупрозрачный черный цвет.
Вот современное весьма красочное фото с затемнением.
Сайт Upstart применяет 35-% чёрный фильтр
Если зайти в консоль разработчика и убрать фильтр, то можно будет увидеть, что само фото слишком яркое и контрастное, чтобы текст был вполне читабельным. Однако с темным фильтром - никаких сложностей!
Такой метод также превосходно работает для маленьких картинок.
Черный фильтр является на сегодняшний день наиболее простым и универсальным, по правде, вы также можете применять цветные фильтры.
Это еще один надежный и простой способ. Начертите черный чуть прозрачный прямоугольник и расположите на нем текст белого цвета. Если ваш прямоугольник будет достаточно темным, то тогда снизу у вас может быть фактически любое фото и текст все равно будет нормально читаться.
Концепт программы для iPhone от Miguel Oliva Marquez
Здесь также можно применять цвет, однако в пределах разумного.
Хороший метод сделать текст более читаемым - размыть часть изображения.
В Snapguide размыта большая часть изображения. Заметьте, что она затемнена
Этот метод стал в особенности популярен сразу после выхода iOS 7, но широко применялся еще в Vista.
Вместо размытия можно также применять часть фото, которая находится не в фокусе. Правда будьте при этом осторожны - данный вариант не настолько динамичный.
В случае если изображение вдруг изменится, то убедитесь, что фон остался размытым.
Просто прочитайте подзаголовок внизу.
В данном варианте картинка слегка затемняется к низу, а сверху располагается текст белого цвета. Это весьма искусный метод, и я не знаю, применял ли его кто-либо до Medium, но я его увидел именно там.
Случайному пользователю вполне может показаться, что в коллекциях Medium текст белого цвета нанесен напрямую на картинку. Но это совсем не так! Здесь есть чуть заметный черный градиент с середины картинки к низу (прозрачностью - от 0 до приблизительно 20 %).
Его не просто заметить, но он там точно есть, и это очень улучшает читаемость всего текста.
Заметьте также, что Medium применяет небольшую тень в тексте во время наложения на миниатюры коллекций, что повышает читаемость. В итоге, Medium может наложить практически любой текст на любую картинку и получить очень хороший результат.
Почему картинку необходимо затемнять книзу? Ответ на данный вопрос читайте в Правиле № 1: свет всегда падает сверху. Для того, чтобы выглядеть наиболее натурально для человеческих глаз, картинка должна быть чуть темнее книзу, как и любой иной предмет, который мы видим.
Еще один современный и продвинутый способ: размытие и затемнение.
Почему в блоге Elastica получаются очень читабельные заголовки на каждом изображении?
Все картинки при этом:
- не особо темные;
- довольно контрастные.
Ответ - маскировка (scrim).
Scrim - рассеиватель, специальное оборудование для фотоснимка, делающее свет гораздо мягче. Еще это особая техника в графическом дизайне, помогающая «смягчить» картинку и сделать текст еще более читабельным.
Если уменьшить масштаб веб-браузера на страничке блога Elastica, можно увидеть, что там происходит.
Вокруг заголовка есть специальный полупрозрачный фон с еле заметным затемнением. Его гораздо легче заметить на синем сплошном фоне, нежели на контрастных фото.
Это, наверное, самый деликатный метод наложения текста. Я больше нигде его не встречал (он довольно хитрый). Однако отметьте его для себя. Так как вдруг он вам когда-то пригодится.
Секрет того, чтобы текст был одновременно красив и уместен, заключается в использовании контраста. К примеру, можно сделать его больше, но тоньше.
Дизайн текста - одна из наиболее сложных частей в создании приятного интерфейса. Но вовсе не из-за дефицита возможных вариантов. В случае если вы закончили начальную школу, то наверное знакомы с различными методами выделения текста. Это:
- Размер (текст можно сделать меньше или больше).
- Цвет (можно уменьшить или увеличить контраст; яркие цвета всегда привлекают внимание).
- Насыщенность (шрифт может быть тоньше или толще).
- Прописные буквы (текст можно набрать прописными или строчными буквами).
- Курсив.
- Разрядка (либо трекинг).
- Поля (они к самому тексту не относятся, но могут использоваться для привлечения внимания, в связи с чем также включены в данный список).
Здесь есть и поля, и цвет, и прописные буквы
Существуют и другие способы, правда я бы не стал их очень рекомендовать:
- Подчеркивание. На сегодняшний день подчеркивание следует применять только для ссылок.
- Цветной фон. Данный способ встречается не часто, но 37signals какое-то время применяли его для обозначения ссылок на своем веб-сайте.
- Зачеркивание. Добро пожаловать в 90-е!
По моему собственному опыту, если я не могу найти какой-то «правильный» стиль для моего текста, это вовсе не потому, что я не попробовал прописные буквы или же более темный цвет, а из-за того, что наилучшее решение зачастую заключается в грамотной комбинации «противоположных» стилей.
Утапливание и выделениеВсе методы выделения текста делятся на две группы:
- Методы, уменьшающие видимость текста: уменьшение контраста, размера, полей.
- Методы, которые повышают видимость текста: увеличение насыщенности, размера, применение прописных букв.
Мы назовем их способами для «утапливания» и «выделения» текста. Мы не будем их называть «визуальный вес», так как это скучно.
Заголовок «Material Design» выделен многими способами. Он очень контрастный, большой и выделен болдом.
Текст в футере же, наоборот, утоплен. Он неконтрастный, маленький и обычного начертания.
А теперь самое важное.
Название страничек - это единственный элемент на веб-сайте, который надо только выделять. Все прочие элементы необходимо утапливать и выделять одновременно.
В случае если вам необходимо выделить определенный элемент, используйте одновременно способы для утапливания и выделения текста. Это поможет вам не перегружать интерфейс и в то же время придаст разнообразным элементам визуальный вес, который им нужен.
Баланс визуальных стилей
Сайт Blu Homes - это пример превосходного дизайна. Там есть крупный заголовок, но то слово, на котором делается акцент, написано строчными буквами. Очень много выделений выглядело бы довольно избыточно.
Цифры привлекают к себе внимание при помощи цвета, размера и расположения - однако заметьте, они одновременно утоплены при помощи более тонкого шрифта, а также менее контрастного цвета, нежели темно-серый.
Подписи под цифрами, вопреки тому, что они маленькие и серые, набраны более жирным шрифтом и прописными буквами.
Все дело в балансе.
Contents Magazine - хороший пример утапливания и выделения текста.
- Название статей - единственный элемент на страничке, который набран не курсивом. В таком случае, именно отсутствие курсива так привлекает внимание (в особенности вместе с жирным начертанием).
- Имя автора здесь выделено болдом. В отличие от слова «by», которое набрано обычным шрифтом.
- Небольшая неконтрастная подпись «ALREADY OUT» здесь никому не мешает. Но за счет прописных букв, довольно щедрой разрядки, крупных полей сразу привлекает внимание.
Выделение активных элементов интерфейса- еще более трудная задача.
Как правило, если изменять размер шрифта, его начертание, либо строчные буквы на прописные, изменится вся площадь, которую занимает текст. Такие изменения могут привести к каким-то непредвиденным результатам.
Что же делать?Можно применять:
- Цвет текста
- Цвет фона
- Подчеркивание
- Небольшую анимацию (подъем и опускание)
Вот один проверенный метод: сделайте все белые элементы цветными, либо цветные элементы белыми, но при этом затемнив фон.
Выбранный значок стал белым, но, тем не менее, сохранил контраст относительно фона
Вывод: научиться выделять текст довольно сложно. Каждый раз, когда что-либо у меня не получалось, я понимал, что мне необходимо стать лучше. А для того, чтобы стать лучше, надо пробовать.
Используйте исключительно хорошие шрифтыВнимание: в данном разделе вы не найдете секретов. Я лишь перечислю ряд хороших и при этом бесплатных шрифтов, которые можно применять.
Сайты с отличительным характером могут применять отличительные шрифты. Однако для большинства интерфейсов необходимо что-то простое и чистое.
Потому что данная статья для тех, кто учится. Среди современных бесплатных шрифтов есть очень много достойных вариантов. Так почему бы ими не воспользоваться?
Так что прямо сейчас скачайте их для вашего следующего продукта.
Ubuntu имеет много начертаний. Для некоторых программ он очень специфичен, для остальных - подходит идеально. Можно всегда скачать на сервисе Google Fonts.
Open Sans
Open Sans - это популярный шрифт, очень легко читается. Отлично подходит для главного текста. Можно всегда скачать на сервисе Google Fonts.
Bebas Neue
Bebas Neue прекрасно подходит для заголовков. Состоит лишь из прописных букв. Можно скачать на веб-сайте Fontfabric . Там же можно посмотреть примеры применения.
Montserrat
Montserrat доступен лишь в двух начертаниях, однако этого вполне достаточно. Данный шрифт - это лучшая бесплатная альтернатива Proxima Nova и Gotham, но он не так хорош, как они. Можно скачать на сервисе Google Fonts.
Raleway хорошо подходит для заголовков. Возможно, чуть чересчур для главного текста (эти «w»!). Довольно красиво выглядит начертание Ultralight (нет на изображении). Можно всегда скачать на сервисе Google Fonts.
Cabin всегда можно скачать на Google Fonts.
Lato можно всегда скачать на сервисе Google Fonts.
PT Sans можно всегда скачать на сервисе Google Fonts.
Entypo Social
Включая, к примеру, Proxima Nova .
Крадите как художникКогда я в первый раз пытался сделать дизайн интерфейса - будь то таблица, кнопка, график или что-то еще - я хорошо понимал, как малы мои знания, чтобы сделать такие элементы красивыми.
К счастью, мне не пришлось изобретать какие-то элементы интерфейса, которых еще не было. Таким образом, я в любой момент могу смотреть, что делают другие, выбрать наилучшее.
Но где искать данные примеры? Вот несколько специализированных сайтов, которые были для меня полезными. Итак, в порядке убывания.
1. DribbbleЭто сайт-портфолио для современных дизайнеров, куда можно попасть лишь по приглашению. Здесь можно найти работы наивысшего качества. И фактически любые примеры.
Несколько человек, на которых следует подписаться.
- Victor Erixon . У него довольно специфичный стиль. И это радует. Чистый, красивый дизайн в стиле Flat. Дизайном он занимается только три года и уже считается одним из наилучших.
- Focus Lab . Эти люди «звезды Dribbble». Их работы соответствуют такой репутации. Крайне разнообразные и всегда наивысшего класса.
- Cosmin Capitanu . Еще один хороший дизайнер. Все его работы выглядят крайне футуристично, но точно не безвкусно. Он превосходно работает с цветом. Правда при этом не очень сосредотачивается на UX. Правда это проблема dribbble в общем.
Работы Focus Lab, Victor Erixon и Cosmin Capitanu
2. Flat UI PinboardЯ не знаю кто такой «warmarc», однако его доска на Pinterest с примерами различных мобильных интерфейсов каждый раз нереально мне помогала в поисках отличных примеров .
3. PttrnsЭто галерея различных скриншотов мобильных программ. На Pttrns очень радует то, что весь веб-сайт сделан по UX паттернам. Это существенно облегчает поиск в зависимости от того, над каким именно элементом интерфейса вы в данный момент работаете, будь то страничка с регистрацией, результаты поиска, личный кабинет и так далее.
Я убежден в том, что каждый художник сегодня должен копировать, пока он не сумеет имитировать наилучшие работы. И только после этого он может искать свой собственный стиль и создавать какие-то новые тренды.
А пока что крадите как художник)
Название данного раздела взято, кстати, из одноименной книги, которую я, увы, не читал, поскольку подозреваю, что в заголовке уже полностью раскрыта ее главная мысль.
Я перевел данную статью, так как сам очень хотел бы ее прочесть несколько лет назад. Очень надеюсь, что она вам поможет.
В случае если вы UX-дизайнер, сделайте красивый макет сразу после того, как набросаете полноценный прототип.
Если же вы разработчик, перейдите на определенно следующий уровень, а также сделайте так, чтобы ваш продукт был красивым. Для этого не надо заканчивать какой-то институт искусств. Достаточно лишь наблюдать, имитировать, а также рассказывать своим друзьям, что работает и что нет.
Инструкция
Проще всего создать интерфейс программы, воспользовавшись средой программирования от компании Borland. В зависимости от используемого языка, это может быть Borland C++ Builder или Borland Delphi. Обе среды программирования очень похожи и отличаются только используемым языком.
Установите и запустите среду программирования. Откроется окно программы, в нем вы увидите серый прямоугольник. Это окно дизайнера форм, а проще заготовка интерфейса вашей будущей программы, она обозначена как Form1. Щелкнув на заголовке формы, вы можете в левой части программы, в окне инспектора объектов, задать ей нужное название. В данном случае вам надо будет вписать название программы в строку Caption.
Определите размеры окна будущей программы, для этого просто растяните форму мышкой. Так как вы уже приступили к созданию интерфейса программы, значит, у вас продуман алгоритм ее работы и вы знаете, какие элементы должны входить в интерфейс. Например, вам нужна кнопка. В верхней части окна среды программирования найдите строку с визуальными компонентами, в ней выберите вкладку Standard. Найдите на ней изображение кнопки (на ней написано ОК) и просто перетащите мышкой на форму.
Расположите кнопку в нужном месте формы. Измените, при необходимости, ее размер. Теперь дайте кнопке название – например, Open. Для этого щелкните кнопку мышкой и в окне инспектора объектов введите в строку Caption название кнопки – Open.
Точно так же вы можете перетаскивать на форму другие необходимые вам элементы интерфейса – окна для ввода и вывода текста, панели для изображений, декоративные рамки, радиокнопки, раскрывающиеся списки и т.д. и т.п. Каждый перетянутый на форму элемент вы можете настроить нужным вам образом. Вы можете перемещать по форме группы расположенных на ней элементов, выделив их мышкой. Это удобно, когда надо немного передвинуть, например, сразу несколько кнопок.
Существует ряд компонентов, которые вы часто будете использовать, то есть перетаскивать на форму, но которые не будут отображаться в окне готовой запущенной программы. Например, перетащите из вкладки Dialogs компоненты Open Dialog и Save Dialog. Расположите их где-нибудь в нижней части окна – так, чтобы они не мешали. С помощью этих компонентов мы сможете реализовать процедуру открытия файлов и их сохранения. Подобных компонентов много, вы будете часто их использовать.
После того, как интерфейс программы будет создан, вам останется наполнить его жизнью – то есть вписать в окно редактора кода нужные строчки. После этого интерфейс вашей программы начнет откликаться на действия пользователя. Более подробно о работе с программами от компании Borland вы сможете прочитать в соответствующей литературе.
Мы говорили о правилах создания чистых и красивых интерфейсов.
Вот эти правила:
Есть всего лишь несколько надёжных способов красиво наложить текст на изображение. Я расскажу вам пять и ещё один в качестве бонуса.
Если вы хотите быть хорошим дизайнером интерфейсов, вам нужно научиться накладывать текст на изображения так, чтобы это выглядело красиво. Это то, что умеет делать каждый хороший дизайнер интерфейсов, и не умеет плохой. Так что после прочтения этой статьи у вас уже будет преимущество!
Метод № 0: Наложение текста напрямую на фотографиюЯ даже не хотел включать этот способ, но технически возможно наложить текст напрямую на фотографию так, чтобы это выглядело нормально.
Чёрный фильтр самый простой и универсальный, но вы также можете использовать и цветные фильтры.
Это ещё один простой и надёжный способ. Начертите слегка прозрачный чёрный прямоугольник и расположите на нём белый текст. Если прямоугольник будет достаточно тёмным, то снизу у вас может быть практически любая фотография и текст всё равно будет хорошо читаться.
Концепт приложения для iPhone от Miguel Oliva Marquez
Здесь также можно использовать цвет, но в пределах разумного.
Концепт в розовом цвете от Mark Conlan
Как ни странно, хороший способ сделать текст читабельным - это размыть часть картинки.
В Snapguide размыта обширная часть картинки. Заметьте, что она также затемнена
Такой способ стал особенно популярен после выхода iOS 7, хотя широко использовался ещё в Vista.
Вместо размытия также можно использовать часть фотографии, которая находится не в фокусе. Но будьте осторожны - этот вариант не такой динамичный. Если картинка вдруг изменится, убедитесь, что фон остался размытым.
Teehan + Lax
Я имею в виду, просто попытайтесь прочесть подзаголовок внизу.
В этом варианте изображение слегка затемняется к низу, и сверху располагается белый текст. Это очень искусный метод, и я не знаю, использовал ли его кто-то до Medium, но я увидел его именно там.
Случайному наблюдателю может показаться, что в коллекциях Medium белый текст нанесён напрямую на изображение. Но это не так! Здесь есть едва заметный градиент чёрного цвета с середины изображения к низу (с прозрачностью от 0 до примерно 20 %).
Его не так просто заметить, но он определённо там есть, и это совершенно точно улучшает читаемость текста.
Заметьте, что Medium использует небольшую тень в тексте при наложении на миниатюры коллекций, что ещё больше повышает читаемость. В конечном итоге, Medium может наложить любой текст на любое изображение и получить хороший результат.
Вы спросите, почему изображение нужно затемнять книзу? Ответ на этот вопрос читайте в Правиле № 1 - свет всегда падает сверху. Чтобы выглядеть наиболее естественно для наших глаз, изображение должно быть немного темнее книзу, так же как и любой другой предмет, который мы видим.
Ещё один продвинутый способ: затемнение и размытие.
Заголовок «Material Design» выделен множеством способов. Он большой, очень контрастный и выделен болдом.
Текст в футере, наоборот, утоплен. Он маленький, неконтрастный и обычного начертания.
А сейчас самое важное.
Название страниц - это единственный элемент на сайте, который нужно только выделять. Остальные элементы нужно выделять и утапливать одновременно.
Если вам нужно выделить какой-то элемент, используйте одновременно способы для выделения и утапливания текста. Это поможет не перегружать интерфейс, но в то же время придаст разным элементам тот визуальный вес, который им необходим.
Баланс визуальных стилей
Сайт Blu Homes - пример безукоризненного дизайна. Там есть большой заголовок, но слово, на котором делается акцент, написано строчными буквами - слишком много выделений выглядело бы избыточно.
Цифры привлекают к себе внимание с помощью размера, цвета и расположения - но заметьте, что они одновременно утоплены с помощью более тонкого шрифта и менее контрастного цвета, чем тёмно-серый.
Подписи под цифрами, несмотря на то что они серые и маленькие, набраны прописными буквами и более жирным шрифтом.
Всё дело в балансе.
Contents Magazine - хороший пример выделения и утапливания текста.
- Название статей - это единственный элемент на странице, который набран не курсивом. В этом случае, именно отсутствие курсива привлекает внимание (особенно в комбинации с жирным начертанием).
- Имя автора выделено болдом - в отличие от слова «by», набранного обычным шрифтом.
- Маленькая, неконтрастная подпись «ALREADY OUT» никому не мешает. Но благодаря прописным буквам, щедрой разрядке и большим полям тут же привлекает внимание.
Выделение активных элементов - ещё более сложная задача.
Обычно, если менять размер шрифта, его начертание или строчные буквы на прописные, то изменится площадь, которую занимает текст. А это может привести к непредвиденным результатам.
Что же тогда делать?
Можно использовать:
- цвет текста;
- цвет фона;
- тени;
- подчёркивание;
- небольшую анимацию (подъём, опускание и так далее).
Вот один проверенный способ: попробуйте сделать белые элементы цветными или цветные элементы белыми, но затемнив при этом фон.
Выбранная иконка стала белой, но сохранила контраст по отношению к фону
Вывод такой: научиться выделять текст очень сложно. Каждый раз, когда у меня что-то не получалось, я понимал, что мне нужно стать лучше. А чтобы стать лучше, нужно пробовать.
Правило № 6: Используйте только хорошие шрифтыВнимание: в этом разделе вы не найдёте никаких секретов. Я просто перечислю несколько хороших бесплатных шрифтов, которые можно использовать.
Сайты с очень отличительным характером могут использовать отличительные шрифты. Но для большинство интерфейсов нужно что-то чистое и простое.
Так что скачайте их прямо сейчас для вашего следующего проекта.
Все скаченные вами шрифты можно найти в приложении Шрифты во вкладке Пользователь.
Ubuntu
Ubuntu имеет множество начертаний. Для некоторых приложений он слишком специфичен, для других - подходит идеально. Можно скачать на Google Fonts .
Open Sans
Open Sans - популярный шрифт, легко читается. Хорошо подходит для основного текста. Можно скачать на Google Fonts .
Bebas Neue
Bebas Neue отлично подходит для заголовков. Состоит только из прописных букв. Можно скачать на сайте Fontfabric и там же посмотреть примеры использования.
Montserrat
Montserrat доступен только в двух начертаниях, но этого достаточно. Этот шрифт - лучшая бесплатная альтернатива Gotham и Proxima Nova, но он далеко не так хорош, как они. Можно скачать на Google Fonts .
Raleway
Raleway подходит для заголовков, возможно, немного чересчур для основного текста (эти «w»!). Очень красиво выглядит начертание Ultralight (нет на картинке). Можно скачать на Google Fonts .
Cabin
Lato
PT Sans
Entypo Social
Когда я впервые пытался делать дизайн интерфейса - будь то кнопка, таблица, график или что-то ещё - я понимал, насколько ничтожны мои знания, чтобы сделать элементы красивыми.
Но к счастью, мне ни разу не пришлось изобретать элементы интерфейса, которых ещё не было. Это значит, я всегда могу посмотреть, что делают другие, и выбрать самое лучшее.
Но где же искать эти примеры? Вот несколько сайтов, которые оказались для меня самыми полезными. В порядке убывания.
1. DribbbleЭто сайт-портфолио для дизайнеров, куда можно попасть только по приглашению. Здесь вы найдёте работы самого высокого качества. И практически любые примеры.
Долго не мог собраться начать писать статью, поэтому делая это в последние дни - думаю, получилось скомкано и местами криво. Но надеюсь, что вы простите мне это: чукча писатель, но очень занят своими делами Думаю, многие меня знают по моему , кучке , которые я публиковал на форуме, а также, что я "какой-то там гриб с горы ", который делает дорвеи в промышленных масштабах.
Начну издалека: BotUI - это новый интерфейс настроек проекта , чтобы заменить старые и не очень юзабельные "Входящие настройки" для шаблонов/ботов. Он появился в версии 5.11.0.0 и сейчас практически с каждой новой версий активно дополняется и развивается. Многообещающее нововведение для тех, кто делает шаблоны "на заказ" или для продажи "в несколько рук". Через данный интерфейс можно сделать очень красивые настройки, которые помогут работать с шаблоном не зная самого ZennoPoster. На сколько я слышал - в дальнейшем планируется привести их к такому виду, чтобы клиент вообще мог не запускать ZennoPoster/ZennoBox и работать с шаблоном только из BotUI (поправьте меня, если я не прав, но вроде бы где-то на форуме я читал именно это). Я пишу эту статью и привожу примеры, используя последнюю актуальную версию ZennoPoster 5.12.3.0.
SpoilerTarget">Spoiler: Предисловие
Когда подавал заявку на конкурс, то хотел просто накидать несколько примеров, которые по моему субъективному мнению могут быть полезны (хоть я сам и не использую BotUI, а ). Но в ходе написания статьи я заметил некоторые недоработки со стороны разработчиков, и мне пришла в голову мысль, что используя такой инструмент, как "Конкурсная статья" - я могу обратить на них внимание Мой внутренний перфекционист просто не может оставить бесследно какую-то багу, которую он находит в этом замечательном софте, которым я пользуюсь уже более 2-х лет с огромным удовольствием.
Поэтому я начну с того, что мне бросилось в глаза при написании статьи:
- Почему-то в коде BotUI есть загрузка скрипта гугл аналитики, причем это сделано таким образом, что он никогда не загрузится (из-за неправильно указанного протокола file:// ). Вот этот фрагмент из кода:
- Неправильно прописан путь до "_all-skins.min.css", при загрузке всегда будет 404 и эти стили не подключаются. Фрагмент кода:
- Стиль "pointer-events: none;", на который так и остался, и он всё также мешает при тестировании кода в браузере (в том обсуждении был предложен более-менее удобный вариант, но, по всей видимости, эти данные просто не дошли до разработчиков).
- Пути к стилям и JS зависят от той версии ZP, в которой шаблонописатель сделал свой проект. Если у покупателя шаблона не будет установлено такой версии, то скорее всего (я не тестировал, но подозреваю), что нужно будет копировать содержимое папки HtmlEditorContent из версии ZP шаблонописателя. Иначе всё просто может "поехать" На самом деле это важно и стоит учитывать такое поведение при разработке BotUI.
- При добавлении элементов на интерфейс - код не выравнивается, всё скидывается в кашу. Никаких отступов, никаких пустых строк, всё в одной куче. Причем в некоторых случаях родительские теги div то "склеиваются" в одну строку с дочерними элементами (input/textarea/button), то идут отдельными строками. Редактировать такой код - сущий ад, но во всех своих тестовых шаблонах я отформатировал код, чтобы от него не начал дергаться глаз при просмотре этих примеров.
- Также, в конце блока есть предустановленные стили, они не отформатированы, а "выплюнуты" как есть, из-за больших отступов перед ними - код смотрится очень коряво.
- При добавлении кнопки к ней автоматически добавляется атрибут onclick="userOnClickXX()" , причем эта функция не задана в js (но пустой всё равно добавляется). По факту добавлять этот обработчик нужно только тогда, когда явно задано какое-то действие в поле "OnClick" в панели "Свойства".
- AlignToGrid (выравнивание по пиксельной сетке) не работает при перемещении элементов, используя "стрелки" - они передвигаются по 1 пикселю. Но при изменении размеров с помощью мыши - работает. (Возможно, это не баг, но стоит иметь ввиду)
- При изменении ElementId для checkbox - он почему-то задается тегу label, а не тегу input (хотя, например, для input password - всё ок). Корректнее использовать id для input, а в label передавать его через атрибут "for".
- Почему в "Панели инструментов" есть элемент "Label", но по факту в коде добавляется обычный div? Это взято из конструктора элементов под какую-то десктопную IDE (VisualStudio, например)? Тогда просто логичнее назвать этот элемент "Text", т.к. интерфейс - это html код, а в нём смысл термина "Label" - это совсем другая сущность.
- У элемента "Label" нельзя поменять шрифт из настроек, хотя подгружается сразу несколько шрифтов и в принципе, это возможно.
- Невозможно работать с добавленными руками тегами. То есть если я добавлю где-то в коде свой элемент, то потом его нельзя выделить и соответственно переместить/удалить.
- Если добавить элемент Tab, а затем изменить его (хотя бы выравнять код) в редакторе, то потом при добавлении других элементов внутри его содержимого - их нельзя редактировать/выделить/удалить.
- Если переформатировать код и изменить id у родительского div для "Translate Service", то его становится невозможно выделить в редакторе интерфейса BotUI.
- Такое чувство, что нумерация id в добавляемых элементах глобальна для всех открытых шаблонов на время сессии ProjectMaker. Почему-то после создания нового проекта и добавления туда элемента - она не начинается с 0 или 1, а идет с трехзначных цифр (причем если делать несколько шаблонов подряд - эти цифры всегда увеличиваются, но не "сбрасываются"). Почему так сделано - остается загадкой.
- В последнем шаблоне используется сторонняя css-библиотека для анимации и почему-то она не работает в ZennoPoster, хотя в "Просмотре" интерфейса в ProjectMaker - всё превосходно работает.
- Также, при использовании animate.css почему-то "дергается" главный заголовок при выполнении некоторых эффектов, хотя ничего с ним не связано.
Интерфейс BotUI - это html+css+javascript , которые выполняются во встроенном браузере. За счет того, что можно редактировать внешний вид интерфейса с помощью кнопки "Открыть код " - можно делать там практически всё тоже самое, что сейчас можно сделать на обычных сайтах. Я даже подозреваю, что можно добавить iframe и уведомлять с его помощью клиентов о выходе новой версии шаблона или о чем-то важном.
Собственно, jQuery
- это JavaScript библиотека, с помощью которой можно манипулировать HTML-элементами на странице (в нашем случае - кнопками, селектами, текстом и так далее). В моей версии ZennoPoster в интерфейсе BotUI используется jquery version 3.1.1 (можно узнать, посмотрев исходный код интерфейса через вышеуказанную кнопку и найдя "jquery-3.1.1
.min.js").
jQuery
- очень популярная и старая библиотека, которая позволяет писать более-менее нормальный код на JS и не парится над тем, как всё будет работать в различных браузерах (но конкретно нам сейчас это не важно, но знать - стоит).
Вся документация по взаимодействию с jQuery находится по адресу: http://api.jquery.com/ - да, она на английском, но можно найти и описание на русском, только скорее всего
там будет очень много устаревшей информации. Но базовые принципы и вещи должны и будут работать, но обращаться как к первоисточнику - нужно всегда к оригинальной документации.
И как это "кушать" (использовать)?
Хотелось бы написать очень подробное руководство по применению jQuery и JavaScript в целом, но боюсь, что закопаюсь в дебри, поэтому некоторые вещи я буду подавать без длительного объяснения "Как? Почему? И зачем?". Думаю, если вы никогда не "трогали" javascript/jQuery - для вас всё будет на первый взгляд сложно и не очевидно (особенно после десктопных языков программирования, бугага). Поэтому советую вам ознакомится с некоторыми старыми, но пока ещё актуальными статьями и книгами о том, как подружиться с JavaScript/jQuery:
Как минимум вы должны знать что такое: html, css, селекторы, обработчики и методы.
В целом разработка под web - позволяет совершать ошибки и не особо заботится о том, что их не будет в 100% случаев. Специфика не та, не ракеты запускать
Но всё же, знать как протестировать свой код - нужно и это будет очень полезно. По-моему, самое простое и эффективное тестирование и написание кода под BotUI выглядит следующим образом:
От простого к сложному, а затем снова к простому
Возможность использовать jQuery в интерфейсе ботов дает огромный полет фантазии для того, чтобы кастомизировать их и сделать не только красивыми, но и удобными для клиента. Но из-за того, что вариаций как его использовать - огромное количество, то рассмотреть абсолютно все варианты - не представляется возможным. Поэтому, я напишу только о тех способах работы с ним, которые на мой взгляд являются самыми востребованными для нас.
При добавлении любого элемента (кнопка, ввод текста, выбор вариантов) в интерфейс - добавляется сам элемент в html представлении и его родительская обёртка , тег div. У тега div всегда присутствует атрибут id, через который можно обращаться к элементу (или самому родительскому тегу div), а также можно задать уникальный идентификатор для самого элемента, используя правую панель "Свойства" -> вкладка "Дополнительно" -> Прочее -> ElementId. Это важное вступление, нужно раз и навсегда запомнить этот способ как обратиться к определенному элементу или его базовому/родительскому тегу.
Ещё одно очень важное отступление
- частичное повторение из предыдущих абзацев. Следует запомнить, что весь код, который вы пишите на jQuery необходимо размещать ниже чем загрузка самой библиотеки jquery, но идеальным вариантом будет размещение кода перед закрывающимся тегом . К тому же, стоит отметить, что jQuery код необходимо
оборачивать специальной конструкцией, которая предотвратит выполнение кода, пока страница не загрузилась до конца (в нашем случае не критично, но лучше придерживаться этого стандарта). Выглядит это следующим образом:
Скрытие/отображение элементов
Скрыть или отобразить какой-то элемент с помощью jQuery можно как минимум 3 способами:
Code (javascript):
$("#element1" ) .css ("display" , "none" ) ; // скроет тег с id element1
$("#element1" ) .css ("display" , "block" ) ;
На самом деле - это не очень корректный способ, т.к. придется самостоятельно дописывать получение значения и проверку текущего состояния. Лучше использовать этот метод, чтобы задать изменение какого-то css.
Code (javascript):
$("#element1" ) .hide () ; // скроет тег с id element1
$("#element1" ) .show () ; // отобразит тег с id element1
Опять же - не всегда это решение является корректным, но уже гораздо лучше первого и используются по своему прямому назначению.
Code (javascript):
$("#element1" ) .toggle () ;
// получит текущее состояние тега с id=element1 и скроет его, если он видим или наоборот отобразит, если он скрыт
В основном, такой подход используется для того, чтобы при каком-то событии скрыть или отобразить элемент. Например, при клике на кнопку - скрыть какие-то данные, с которыми она связана, а при повторном клике (если не прописано другой логики) - снова отобразить скрытые данные.
Code (javascript):
// добавляем обработчик (при действии click) для кнопки "скрыть", используя её id="btn_css1"
$("#btn_css1" ) .on ("click" , function () {
$("#90" ) .css ("display" , "none" ) ; // скрываем текстовое поле через родительский тег c id="90"
} ) ;
Вот так выглядит интерфейс этого шаблона:
В нем добавлены вышеперечисленные методы и их обработчики, причем методы для различных действий выбраны просто исходя из моих предпочтений. По факту вы можете для любых действий использовать любые обработчики.
Получение и изменение данных элемента
В jQuery есть несколько методов для работы с данными элементов, но все они имеют значительные отличия друг от друга:
При вызове данного метода на самом верхнем DOM-элементе:
innerHtml ). Он точно также может и записать данные в html-представлении внутри тега.
Пример, который объясняет суть этого события: если применить событие .change() на тег select , то при изменении значения - мы получим это значение внутри переданной анонимной функции, т.е. отработает событие и далее мы можем в зависимости от выбранного пользователем элемента - строить свою логику. Да, немного сложно, но если посмотрите в последний пример в шаблоне, то сразу станет ясно о чем идет речь
Визуальные эффекты
Визуальные эффекты - неотъемлемая часть красивого оформления, поэтому манипуляции с ними в jQuery сделаны максимально просто и удобно. Для работы с анимацией и эффектами обычно используют следующие методы:
Внимание! Эффекты, используемые в animate.css почему-то отказались работать в ZennoPoster, хотя в ProjectMaker работали, поэтому изображение оттуда. Будем ждать, когда это исправят.
Послесловие aka выводы
jQuery - мощный и интересный инструмент для тех, кто любит делать по настоящему красиво и качественно. Нам повезло, что разработчики сразу же включили его в BotUI, теперь создание входящих настроек - это будет такое же искусство, как и написание хорошего шаблона. Да, конечно, не многие буду заморачиваться с этим, но свою аудиторию среди шаблонописцев он точно найдет.
В данной статье я рассмотрел самый минимум из того, что теперь можно делать, поэтому вашим лучшим другом должна стать официальная документация - в ней рассмотрены все методы и события, а также добавлено множество примеров. Но если вам сложно начинать, например, по причине не знания английского, то стоит обратить внимание на учебники и статьи на русском, что я приводил в начале статьи. В целом, при знании HTML/CSS и хотя бы чуть-чуть javascript - библиотека jQuery не такая уж и сложная, если четко понимать что нужно сделать, тогда и решение будет где-то на поверхности, ну и гуглить никто не запрещал В сети находится огромное количество примеров и рассмотрено множество ситуаций, которые могут у вас возникнуть в ходе работы. Если искать решение, то оно всегда будет найдено!
Спасибо, что дочитали до конца, надеюсь вам было интересно и вы узнали что-то новое для себя.
Мне будет приятно, если эта публикация в первую очередь принесет пользу для камрадов, а уж конкурс - дело десятое
