Содержание
Правила использования цвета, шрифтов и изображений в шаблоне формы
Примечание:
Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим
ссылку на оригинал (на английском языке)
.
Разработчик формы важно сосредоточиться на внешний шаблона формы вид, а не просто как это работает. Ли вы добавляете заставки цвета или эмблему компании, Microsoft Office InfoPath предоставляет несколько способов создания процентов и визуально упорядочить информацию, чтобы привлекательным и облегчает работу пользователей с помощью шаблона формы.
Не должны быть профессиональных графического конструктора, чтобы создать хорошо оформленных шаблонов форм.
Не забудьте не перегружать шаблона формы со слишком много различных элементов оформления, которые можно придать простой и понятной. Вместо этого выберите несколько элементов, которые соответствуют свои цели конструктор и затем с помощью их постоянно введите изысканных, профессионально оформленных шаблона формы.
В этой статье представлены контрольных списков, которые помогут вам хранить структуры на правильном пути.
В этой статье
-
Контрольный список для использования цвет границы и заливка -
Просмотрите список использования шрифты и форматирование шрифта -
Контрольный список для использования эмблемы и другие изображения
Контрольный список для использования цвет границы и заливка
Использование цвета — один из самых простых способов добавления привлечь внимание к шаблону формы.
InfoPath предоставляет готовых цветовых схем, которые помогают применять различные цветовые комбинации определенных элементов шаблона формы. Также можно применить цвет к фону шаблона формы.
Кроме того можно создать процентов и упорядочение элементов в шаблоне формы с помощью границы и заливка. Границы контуры элемента управления, таблицы или ячейки таблицы. Границы особенно полезны, если нужно провести различие между разделами в шаблоне формы. Чтобы отделить в разделах помочь пользователям понять организации формы. В приведенном ниже примере разработчик формы использовал границ для выделения ячеек в повторяющейся таблице.
Применение заливки ячейки таблицы или элемент управления изменяет цвет фона. На следующем рисунке показано, как различные варианты заливки можно изменить внешний вид флажок дополнительную информацию в шаблоне формы.
При использовании цвет при проектировании, учтите следующее.
|
|
| |
|
|
Не зависит от цвета отдельно для передачи важных сведений.
|
Например если шаблона формы содержит условные обозначения, используйте дополнительными подсказками, таких как текстовые примечания в дополнение использовать цвет. Некоторые пользователи могут использовать ограниченный цветовую схему или карманного компьютера с монохромных мониторов, или они может зависеть от программы интерпретации изображения, который редко передают информацию, представленную только цветом.
|
|
|
Рассмотрим контраст цвета и фон.
|
Убедитесь, что контрастность цветов высокая между фоном и на переднем плане шаблона формы. Например с помощью белом или сером фоне управления цветом или цвет ячейки таблицы белом или сером цвет шрифта.
|
|
|
При использовании цвет фона шаблона формы проверьте отключен параметр Печать фоновых цветов и рисунков.
|
Цвет фона можно создать контрастность и платежи по процентам пользователей при просмотре формы на экране компьютера их.
|
|
|
Внимательно используйте заливка и границы.
|
Несмотря на то, что границы можно использовать для группировки сходных элементов, слишком большого числа ячеек можно сделать шаблона формы будет выглядеть запутанной и отвлекать внимание от ее общий вид. Сосредоточиться на что нужно сделать с помощью границ и заливки и затем выберите и примените эффект, который соответствует этой цели.
|
|
|
Убедитесь, что цвета выглядят хорошо при просмотре шаблона формы на разных мониторах.
|
Необходимо проверить, как цвета в шаблоне формы отображать на разных мониторах. Например вы можете задать вопрос несколько коллег для просмотра шаблона формы, установите флажок цветов в разных освещения условий или поэкспериментировать с другого компьютера параметры экрана и принтера.
|
|
|
Быть конфиденциальных о том, что означает цвета различные действия в разных стран и регионов.
|
Например, в некоторых стран и регионов, красный будет связана с смерти.
|
Кроме того до 10% населения имеет трудности, обращая внимание на некоторые цвета или отображаются некоторые цвета.
Тем не менее цвета фона может быть оптимальные для печати, так как пользователи не могут иметь цветные принтеры, а печать в оттенках серого или в черно-белый цвет фона может сделать форму затрудняет чтение. Кроме того, Печать фоновых рисунков может сделать форму печать медленнее и могут тратить принтера чернил или тонера. По следующим причинам InfoPath не будут напечатаны цвета фона или изображения по умолчанию.
Например можно ограничить использование границ выделенной ключевые сведения или общей организации форма совершенствования.
К началу страницы
Просмотрите список использования шрифты и форматирование шрифта
Изменение внешнего вида текста можно выделить ключевые сведения или существенно изменить общий вид шаблона формы. Например можно настроить цвет и размер определенных слов, можно создать заголовки, которые помогают упорядочивать шаблона формы и разбить на логические разделы.
В приведенном ниже примере конструктор формы с помощью двух разных шрифтов: в качестве заголовков и текста, которое отображается в элементах управления в шаблоне формы. Обратите внимание, что в целом, не следует использовать все прописные для выделения. Тем не менее, этот способ работать при использовании экономно, такие как с заголовками и других короткие фразы, как показано в приведенном ниже примере.
1. на текст заголовка используется шрифт Arial 9 пунктов.
2. для элемента управления текстом шрифт является Verdana 10 пунктов.
При использовании различные шрифты и форматирование при проектировании шрифта, учтите следующее.
|
|
| |
|
|
Убедитесь, что текст видно на любые цвета фона или затененных областей.
|
Текст — легче читать при наличии соответствующих контрастности между текстом и фон.
|
|
|
Убедитесь, что текст в форме не слишком мало.
|
Иногда может потребоваться, например, при включении мелкий шрифт в шаблоне формы или когда меток элементы управления небольшие текстовые. Тем не менее в большинстве случаев увеличить текст намного проще для большинства пользователей для чтения.
|
|
|
Внимательно используйте шрифты и эффекты шрифтов.
|
Избегайте использования многочисленные шрифтов в шаблон формы.
|
|
|
Убедитесь, что он является удобным при просмотре в цветовые схемы высокой контрастности.
|
Некоторые люди с нарушениями зрения предпочесть использование высокой контрастности цветовой схемы для улучшения контрастности цвета текста и изображений на экране компьютера. Это делает эти элементы более различных объектов и легче идентифицировать. Проверка шаблона формы с помощью различных высокой контрастности цветовые схемы, чтобы убедиться, что шаблона формы пригодные для использования в этом режиме.
|
|
|
Можно ли читаемым текста.
|
Если шаблон формы содержит больших объемов текста, позволяющие пользователям убедившись, что текст читаемым. Например при включении длинных инструкций справки в шаблоне формы, используйте маркированных или нумерованных списков вместо большая блоков текста, из-за списки зачастую проще сканирования и краткая.
|
|
|
Проверьте, при использовании эффекты шрифтов соответствующим образом.
|
Использование полужирный, курсив и другие эффекты шрифтов экономно, если вы используете вообще. Например текст, выделенный курсивом чаще всего очень сложно читать на экране, особенно при использовании некоторых шрифтах. Аналогичным образом слишком много полужирным шрифтом затрудняет общее сообщение текста.
|
Черный текст на белом фоне дает наибольшие контрастность. Облегченная текст на фоне темно-также высокой контрастностью.
Его можно создать резать глаз, разрозненные эффект. Для простоты ее с помощью более трех шрифтов является хорошим рекомендации. Кроме того во избежание ошибок cartoonish шрифты, так как эти параметры, чтобы найти сумбурно в форме бизнес.
Чтобы узнать, как включить или отключить режим высокой контрастности цветовую схему, обратитесь к справочной системы для вашей операционной системы.
К началу страницы
Контрольный список для использования эмблемы и другие изображения
Изображения — еще один способ можно настроить и Добавление стиля в шаблон формы. Например включая логотип компании могут помочь оформление шаблона формы.
При использовании изображения при проектировании, учтите следующее.
|
|
| |
|
|
Убедитесь, что изображения должным образом идентифицировать компанию или назначение шаблона формы.
|
Будет ли изображение является визуальной подсказкой (например, эмблема компании) или используется для передачи важных сведений (например, диаграммы данных), убедитесь, что аудитории можно понять ее назначение.
|
|
|
Убедитесь, что изображения соответствующим образом изменять размеры и расположение.
|
Убедитесь в том, что размер изображения и его расположение в шаблоне формы не мешать пользователям заполнении шаблона формы.
|
|
|
Убедитесь, что сортировок, зависящих от изображения.
|
Например фотографии, включающих жесты может быть оскорбительные. Карты и флаги также может быть конфиденциальные изображения. Если изображение содержит людей, рассмотрите возможность с диапазоном ethnicities и оба мужчин и женщин.
|
|
|
Использование изображений с осторожностью.
|
Включая лишним или ненужные изображения можно сделать поиска шаблона формы простой и понятной и неорганизованных, которой в итоге затрудняет общий вид и эффективности шаблона формы.
|
|
|
Убедитесь, что изображения содержат замещающий текст и замещающий текст имеет смысл при чтении вслух.
|
Замещающий текст помогает тех, кто не могут видеть изображение на экране. Например полезным для людей, которые используют интерпретации читать данные на экране или для тех, кто использует только текст браузеры для просмотра шаблон формы с поддержкой веб-браузера замещающий текст.
|
|
|
Убедитесь, что изображения будут сохранены в подходящем формате.
|
Большими файлами изображений можно увеличить время, которое он принимает форму, чтобы открыть. Некоторые форматы файлов создают файлы, которые являются гораздо больше, чем другим пользователям. Например сохранить файл как точечный рисунок (расширение BMP) или значительно больше, чем тот же файл, сохраненный в виде файла JPEG, GIF или PNG файл Tagged Image File Format (TIFF).
|
|
|
Убедитесь, что изображения не защищенный авторские права.
|
Из-за слишком много изображений удобный доступ в Интернете, возможно, вам воспользоваться любое изображение, которое вы видите. К сожалению многие из этих изображений защищены авторскими правами, а вам необходимо разрешение, прежде чем использовать их в шаблоны форм. Тем не менее существует несколько сайтов, например Изображений Bing, при использовании фильтра авторских прав лицензии, которые можно использовать их картинок и рисунков до тех пор, пока вы соглашаетесь свои условия использования.
|
|
|
Не зависит от изображений отдельно для передачи важных сведений.
|
Так же, как не следует одним лишь цветом для передачи важных сведений для пользователей, не следует исключительно для изображений. Пользователи не смогут просматривать изображения в шаблоне формы. Например они могут отключить изображений в браузере для ускорения производительности при просмотре формы в браузере или они могут нарушениями зрения, которая предотвращает фактически видят изображение на экране.
|
Формат JPEG обычно лучше всего подходит для других сложных изображения или фотографии. Формат GIF или PNG, часто бывают идеально подходит для рисунков, эмблемы, иллюстрации, диаграмм и схем.
К началу страницы
Как сочетается цвет и шрифт в дизайне
Искушенный читатель скорее всего подумает, что данная статья не относится к теме фотографии.
И он будет прав, но касательно фотографии, как самодостаточного явления. Наш мир разнообразен и многогранен и это вполне обычное явление, когда одни сферы деятельности пересекаются с другими. А значит, нам приходится сталкиваться с ситуациями, когда клиенту хочется сделать более качественную продукцию: свадебные, семейные фотографы создают фотокниги — без использования шрифтов ну никак! Занимаетесь рекламной фотосъемкой — не редко может понадобиться клиенту сделать инфографику или нанести рекламный текст непосредственно на снятый кадр — опять необходимо умело подобрать шрифт. Выпускаете свою фотокнигу или работаете на арт рынке — красивая подача печатного материала вместе с вашими графическими работами — архиважная составляющая успеха. Именно по этой причине, я считаю, что уметь работать со шрифтами, «вкусно» сочетать цвета и форму очень важно, для получения конечного качественного продукта.
#1 Монохром — это не должно быть скучно
Черно-белая — самая старая комбинация цветов в полиграфии, но при использовании в правильном контексте она может быть далека от таковой.
Монохром может быть мятежным или элегантным и стильным. В качестве примера обратите внимание на премиум бренды Vogue и Chanel, использующие монохромные сочетания для создания респектабельного эффекта.
По своей природе такое сочетание является минималистичным и суровым. По этой причине шрифты в такой цветовой гамме органично использовать без засечек, что сразу придает им модернистскую атмосферу. Для наглядности обратите внимание на простые шрифты Acre, Futura идеально подходящие для черно-белого использования.
#2 Добавьте акцентирующий цвет, что бы оживить черно-белый шрифт
В ряде случаев, несмотря на все ваши усилия монохромный шрифт может выглядеть неказисто. Если после продолжительных поисков нужного шрифта в вашей библиотеке ни один так и не заиграл как нужно, попробуйте приправить его акцентирующим цветом. Насыщенные основные цвета, как красный, желтый имеют магическую способность оживлять монохромные шрифты.
Попробуйте цветом выделить заголовок, ключевое слово, точку или тире, что бы добавить немного драматичности.
Эти хитрости позволят привлечь внимание читателя к выбранному участку текста, но главное — не переусердствуйте.
#3 Инвертируйте фон и шрифт для достижения большего эффекта
В полиграфии традиционный подход состоит в сочетании цветного или черного шрифта с белым или бледным фоном, но в некоторых случаях инвертирование может быть очень уместно. Размещение светлого текста на темно фоне фокусирует внимание читателя, в тоже время темный фон выступает в роли рамки, помогающей кадрировать текст. Такой подход очень часто используют в рекламных сообщениях.
Следите что бы текст был читаемым — рекомендуется установить более жирный тип шрифта из семейства или поставить крупнее кегль. Для текста на светлом фоне, наоборот размер шрифта можно немного уменьшить.
#4 Использование нескольких цветов? Только из одной цветовой группы
Мультицветовой подход к оформлению шрифтов может быть невероятно эффективным, но сопряжен со сложностями цветовой гармонизации. Многоцветие может выглядеть раздражающим, устаревшим или просто непривлекательным.
Очень важный совет в такой ситуации — придерживаться цветовой палитры из одной группы, что бы получать гармоничный результат. Вы можете попробовать палитру пастелей, неоновых цветов, основных цветов, что бы получить приятный результат. В конце концов, выкопайте из глубин памяти цветовой круг, о котором вы могли узнать на курсе фотографии и воспользуйтесь его онлайн версией на сайте Adobe, для подбора гармоничных сочетаний. Всё еще сомневаетесь — попробуйте привязать многоцветный дизайн к нейтральному серому или черному, что бы сместить акцент.
#5 Неон на черном — всегда работает
Несколько последних лет стали свидетелями долгожданного возрождения печатной неоновой продукции. Цветовая палитра 80-х выглядит свежо и современно, когда она расположена на глубоком черном фоне. Неоновый шрифт на черном всегда работает и вызывает ассоциации с ночными клубами и вывесками для мотелей. Помимо прочего, это прекрасная возможность создать обрамление для вашего макета и вдохнуть в него требуемую атмосферу.
Попробуйте использовать сочный розовый (C=0 M=88 Y=0 K=0) или лаймовый желтый (C=7 M=0 Y=87 K=0) для шрифта, который невозможно не заметить!
#6 Смягчите фон для придания винтажности
Стремитесь добиться полного погружения в винтажность? Помимо выбора классического шрифта (напр.: Akzidenz Grotesk), попробуйте разбавить ваши цвета, для придания им эффекта выцветания и налета времени. Вы можете существенно усилить эффект винтажности, используя не белый фон, а цвет овсянки или легкий бежевый (C=8 M=4 Y=17 K=0). Такой фокус имитирует оттенок изношенной бумаги, придающий вашему дизайну эффект старины.
#7 Радуга может смотреться… легендарно!
Цвета радуги занимают центральное место в мире моды и попкультуры. Помимо природной красоты и гармонии цветов радуги, немалый толчок к их популяризации приложили ЛГБТ сообщества. На сегодня всё большее распространение в дизайне набирают такие цветовые решения и очень красивым примером может служить полноцветный шрифт Gilbert.
Радужная палитра, в которой собран весь спектр хроматических цветов беззаботна, весела и оптимистична. Это отличное решение для макетов — установите отдельные цвета для букв как в считалочке — каждый охотник желает знать где сидит фазан.. 🙂
Для сохранения стильности палитры и во избежание «оребячивания» ограничьтесь применением такого подхода к избранным словам или фразам, а остальной текст оставьте чёрно-белым.
Надеюсь, вам были полезны приведенные выше 7 советов о цветовом сочетании шрифта.
Цветовой контраст для лучшей читаемости
Когда вы создаете цветовые палитры для своих проектов веб-дизайна, проверяете ли вы цветовые комбинации на контрастность? Если нет, возможно, вы не учитываете возможную читабельность дизайна и, таким образом, теряете потенциальную аудиторию.
Я работал над процессом, который поможет мне обеспечить хороший цветовой контраст и удобочитаемость в моих проектах. Благодаря некоторым полезным инструментам доступности цветового контраста, я думаю, что у меня есть кое-что, что работает, и я хотел бы поделиться с другими, если вы тоже сочтете это полезным.
Должен отметить, что я далеко не эксперт по доступности. Моя цель – просто показать, что небольшое усилие может иметь большое значение, когда дело доходит до выбора цветов с учетом оптимальной читабельности. Проверьте W3C для более подробного объяснения. Кроме того, ознакомьтесь с Contrast Rebellion, чтобы узнать о проблеме контраста.
1. Создайте цветовую палитру (с оттенками, тонами и оттенками)
Хотя вы можете использовать инструменты цветового контраста, чтобы помочь вам установить цветовую палитру, вы также можете использовать инструменты, чтобы помочь найти хорошие варианты в существующей палитре. В этом случае я использую уже существующую цветовую палитру и показываю, как я использую оттенки, тона и оттенки, чтобы помочь создать больше вариантов цветового контраста.
Моя рабочая цветовая палитра. Из предыдущей статьи Добавление цветов в палитру с помощью смешивания цветов.
Определение оттенков, тонов и теней. Из предыдущей статьи «От тьмы к свету: универсальность цвета с использованием оттенков, тонов и оттенков».
2. Найдите хороший анализатор цветового контраста
В Интернете доступно множество хороших инструментов для тестирования цветового контраста. Найдите тот, который вам подходит, и используйте его для проверки комбинаций цветов фона и переднего плана. Вот несколько вариантов:
- Colorable (Demo) Брента Джексона (*новый фаворит* h/t @JimJones)
- Luminosity Color Contrat Ratio Analyser от Juicy Studio
- Color Contrast Check от Джонатана Снука
- Color Contrast Checker от WebAIM
- 6 My
- 6 My Colors by Giovanni Scala
- Color Safe by Donielle Berg & Adrian Rapp
Brent Jackson’s Colorable (Demo)
3. Изучите контрастность основного текста
Во-первых, полезно установить правильные значения основного текста. Обычно я начинаю с нейтральной цветовой палитры и стремлюсь к самому светло-серому с рейтингом WCAG AAA (соответствие разделу 508). Рейтинг AAA обеспечивает оптимальную читаемость, а некоторая яркость обеспечивает мягкость текста.
Обратите внимание, что названия цветов — это пользовательские имена, которые я присвоил цветам (из предыдущей статьи Придание цветам более красочных имен).
Тестирование нейтральной цветовой палитры в виде текста на белом фоне (из предыдущей статьи: «Оттенки серого — да, правда»).
4. Оцените яркость кнопок и ссылок
Следующим шагом будет поиск подходящего цвета для кнопок и ссылок (действий). Здесь я использую немного другой подход. Вместо AAA я ищу AA (разумный стандарт, к которому нужно стремиться), чтобы получить более яркий цвет, контрастирующий со статическим текстом, и привлечь внимание к важным ссылкам. Для этих целей я тестирую белый цвет (#FFFFFF) в сочетании с различными цветами.
У синего и красного цветов шанс успеха выше, а у желтого и зеленого меньше.
Я использую «Darkest Alice» (#107896) из-за хорошего сочетания контраста и яркости. «Рубин» (#C02F1D) тоже неплохой вариант.
5. Установите различные цветовые комбинации
Хорошо определить некоторые дополнительные цветовые комбинации для привлечения внимания и других возможных потребностей.
Мой базовый пример с темно-серым текстом «Ворон» и ярко-синим цветом «Самая темная Алиса» для ссылок и кнопок.
Пример с темными цветами на светлом фоне.
Пример с подсветкой на темном фоне.
6. Документ в вашем руководстве по стилю
Последний шаг — держать под рукой справочное руководство с результатами теста, добавляя примечания к вашему руководству по стилю. Ваши клиенты и аудитория будут впечатлены тем, что ваши цвета выбраны по обдуманным причинам — оптимальной читабельности, — и вы пройдете тестирование качества с дополнительными параметрами, если они вам понадобятся.
Образец документации для руководства по стилю.
Сводка
Это все, что нужно, но вы можете разбить это на три еще более простых фрагмента, если хотите:
- Текст для чтения: копии вашего тела (тяжелая работа).
- Ссылки действий: Для ссылок используйте яркие и контрастные цвета, чтобы было понятно, где находятся действия.
(Если вы все сделали правильно, будет некоторый контраст между текстом для чтения и ссылками действия.) - Экстра, Экстра!: Создавайте и документируйте различные цветовые комбинации для выносок, призванных привлечь дополнительное внимание.
(Если вы все сделали правильно, будет некоторый контраст между текстом для чтения и ссылками действия.)См. также:
Примечание. Эта статья является частью серии статей о цвете, связанном с веб-дизайном. Чтобы узнать больше об этой серии, ознакомьтесь со следующими статьями:
- Использование словесных ассоциаций для выбора фирменных цветов
- Добавление цветов в палитру с помощью смешивания цветов
- Оттенки серого — да, правда
- Присвоение цветам более красочных названий
- От тьмы к свету: универсальность цвета с использованием оттенков, тонов и теней
- Сигнал и шум: цвет как инструмент навигации
- Использование визуальной громкости для лучшего поиска пути
- Design Systems at Viget
Проверка текста и фона на достаточную цветовую контрастность
- Главная
- Советы по доступности
>
Цветовой контраст — это распространенная проблема доступности в Интернете, которую часто упускают из виду.
Люди со слабым зрением или страдающие дальтонизмом могут столкнуться с некоторыми трудностями при различении текста и цвета фона, если контрастность недостаточна. Людей со слабым зрением почти в три раза больше, чем людей с полной слепотой; и один из двенадцати человек имеет какую-то цветовую недостаточность. Поэтому очень важно учитывать адекватный контраст между текстом и фоном.
Для соответствия уровню AA критерий успеха WCAG 2.0 1.4.3 рекомендует, чтобы обычный текст имел минимальный коэффициент контрастности 4,5:1, а крупный текст (18 пунктов или 14 пунктов полужирным шрифтом) имел минимальный коэффициент контрастности 3:1. . Соотношения были рассчитаны с научной точки зрения, чтобы гарантировать, что текст может быть прочитан теми, у кого умеренно слабое зрение, и что контрастность достаточна для тех, у кого есть проблемы с цветом. Веб-дизайнеры часто задаются вопросом, когда обращаются к цветовому контрасту: каких цветов следует избегать. Речь идет не столько об избегании цветов, сколько о том, чтобы цвета, используемые в веб-дизайне, имели соответствующий контраст.
| Комбинации цветов | Цветовые коды | Коэффициент контрастности | Мелкий текст | Большой текст |
|---|---|---|---|---|
Черный на желтом ИЛИ Желтый на черном | Черный: #000000, Желтый: #ffff00 | 19,56:1 | Пасс АА | Проход АА |
Синий на оранжевом ИЛИ Оранжевый на синем | Синий: #0000ff, Оранжевый: #ffa500 | 4,35:1 | Сбой АА | Проход АА |
Белый на фиолетовом ИЛИ Фиолетовый на белом | Белый: #ffffff, Фиолетовый: #800080 | 9,42:1 | Проход АА | Проход АА |
Зеленый на красном ИЛИ Красный на зеленом | Зеленый: #008000, Красный: #ff0000 | 1,28:1 | Сбой АА | Сбой АА |
Вот некоторые инструменты, которые можно использовать для анализа цветового контраста:
- Онлайн-проверка цветового контраста Deque
- Расширения браузера axe DevTools: axe DevTools для Chrome и axe DevTools для Edge и axe DevTools для Firefox
- Luminosity Color Contrast Ratio Analyzer — веб-инструмент от Juicy Studio
- Проверка контрастности цвета — snook.
