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

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

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

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

7.08.2008 20:01:13
8 ОТВЕТОВ
РЕШЕНИЕ

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

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

5
7.08.2008 20:09:14

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

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

3
7.08.2008 20:10:55

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

2
7.08.2008 20:15:06

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

1
7.08.2008 21:02:24

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

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

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

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

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

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

2
7.08.2008 21:37:50

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

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

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

1
7.08.2008 21:41:03

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

0
7.08.2008 21:49:13

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

DOs:

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

Donts:

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