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

Question

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

Существуют ли какие-либо руководства или практические правила для таких вещей, как цветовые схемы, макеты, форматирование и т. Д.? Я хочу обеспечить читабельность и ясность для посетителей, но не быть скучным и скучным одновременно.

Что касается моих знаний в этой области - если вы передадите мне изображение, у меня будет достаточно знаний, чтобы воспроизвести его на экране, но если вы попросите меня разработать новый интерфейс или перепроектировать существующий, я бы не узнал с чего начать.

Answer 1

Обычно каждая операционная система имеет Руководство по интерфейсу пользователя. Для Windows посмотрите здесь . (Редактировать: ссылки в этом посте не работают. Но поиск « Руководство по пользовательскому интерфейсу » в MSDN содержит статьи обо всем)

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

Answer 2

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

Плюс, хотя речь идет не о пользовательских интерфейсах, До и После Журнала может дать вам довольно хорошие советы о цвете, дизайне и связанных с этим темах. У него даже есть бесплатные PDF-файлы для скачивания.

Answer 3

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

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

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

Следование этим двум простым правилам стоит больше, чем большинство рекомендаций по «пользовательскому интерфейсу».

И, кстати, руководящие указания по пользовательскому интерфейсу MS (в общем и целом) ужасны. Прочтите Якоба Нильсена, посмотрите на эстетику дизайна Apple, но держитесь подальше от MS «нейтрально-серый / синий хрустящий ящик».

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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

DOs:

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

Donts:

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

Answer 8

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