Пользовательские интерфейсы-цвета и макет

Как правило, каждая операционная система имеет рекомендации по пользовательскому интерфейсу. Для Windows, посмотрите здесь . (Edit: ссылки в этом сообщении сломаны. Но поиск "руководства по пользовательскому интерфейсу" на MSDN содержит статьи обо всем)

У Apple тоже есть свой собственный. Кроме того, вы можете иметь в виду доступность .

Один совет, чтобы проверить, если ваши цвета имеют хороший контраст делает снимок его и преобразования в оттенки серого. Если вы не можете что-то прочитать, цвета, безусловно, были плохо выбраны.

Кроме того, хотя речь идет не о пользовательских интерфейсах, Before & After Magazine может дать вам довольно хорошие подсказки о цвете, дизайне и связанных с ними темах. Он даже получил некоторые бесплатные pdf для загрузки.

В книге " проектирование интерфейсов" Дженифер Тидуэлл есть целая глава на эту тему (Глава 9, выдержки доступны в интернете). Всю книгу стоит рекомендовать.

Для web UI я собираюсь пойти на крайность и сказать, что самый важный цвет в веб-дизайне-белый, или "light". Это цвет, поверх которого вы размещаете плотные участки содержимого.

Темный текст, светлый фон, всегда, когда речь заходит о ваших основных областях контента.

И самое главное правило в разметке-это whitespace. Пусть содержимое дышит.

Следование этим двум простым правилам стоит больше, чем большинство рекомендаций "user interface usability".

И кстати, руководство по пользовательскому интерфейсу MS (по большому счету) ужасно. Читайте Якоба Нильсена, смотрите на эстетику дизайна Apple, но держитесь подальше от философии текста MS "neutral gray/blue crunchbox" 12-step Wizard 10pt UI.

(И я говорю это как давний программист MS GUI)

Я ужасно нахожу цвета, которые хорошо смотрятся вместе, поэтому я обманываю и использую фотографии с природы, которые в основном являются цветом, который я хочу (скажем, зеленый), а затем я использую этот сайт , чтобы вытащить основную цветовую схему. Как правило, природа делает довольно хорошую работу по настройке своих собственных красивых цветовых схем.

Используйте высококонтрастные цветовые комбинации; черный текст на белом фоне-лучший пример высококонтрастной комбинации.

Плохая комбинация-это зеленый текст на красном фоне. Это ужасно для дальтоников (как и я).

Посмотрите, как выглядит ваш сайт для дальтоника: colorfilter.wickline.org

Вот несколько простых указателей для удобства использования в вашей типографии . Эти вещи в основном касаются проблем читаемости и доступности.

DOs:

• Использовать относительные размеры шрифтов (их)
• Определение языковых изменений в документе с помощью атрибута LANG
• Черный текст на белом фоне
• Для заголовков используйте H1, H2 и т.д. и гнездить их соответствующим образом
• Разделите контент и организуйте заголовки, соответствующие тому, что ищут ваши пользователи
• Написать четкую и простую копию
• Выровнять по левому краю, без выравнивания по правому краю
• Text-to-background цвет должен быть высококонтрастным

DONTs:

• Используйте "click here" или "more" в качестве текста ссылки
• Использовать подчеркивание для выделения
• Более 2 семейств шрифтов
• Курсивный
• Блоки текста с использованием всех заглавных букв
• Используйте истинно красный или истинно синий текст на белом фоне (хроматическая аберрация)

Что касается настольных приложений: что бы вы ни делали, не используйте подобранные вручную цвета. Придерживайтесь названных системных цветов, таких как" фон окна"," текст меню " и т. д. В противном случае люди, полагающиеся на специальные возможности OS, будут заблокированы с вашим выбором цвета (например, не могут выбрать высококонтрастную тему), а люди, которые любят настраивать свои темы рабочего стола, будут думать, что ваше приложение является ненадежным.