Хотя меня особенно интересует информация о веб-приложениях, мне также было бы интересно узнать о разработке настольных приложений. Этот вопрос вызван моей работой на моем личном веб-сайте, а также моей работой, где я разработал несколько функций, но предоставил другим возможность интегрироваться в внешний вид сайта.
Существуют ли какие-либо руководства или практические правила для таких вещей, как цветовые схемы, макеты, форматирование и т. Д.? Я хочу обеспечить читаемость и ясность для посетителей, но не быть скучным и скучным одновременно.
Что касается моих знаний в этой области - если вы передадите мне изображение, у меня будет достаточно знаний, чтобы воспроизвести его на экране, но если вы попросите меня разработать новый интерфейс или перепроектировать существующий, я не знаю, с чего начать. ,
Как правило, каждая операционная система имеет рекомендации по интерфейсу пользователя. Для Windows, посмотрите здесь . (Редактировать: ссылки в этом посте не работают. Но поиск " Руководства по пользовательскому интерфейсу " в MSDN содержит статьи обо всем)
У Apple тоже есть свои. Кроме того, вы можете иметь в виду доступность .
Один из советов, чтобы проверить, хорошо ли контрастируют цвета, - сделать его снимок и преобразовать в оттенки серого. Если вы не можете что-то прочитать, цвета были выбраны неверно.
Кроме того, хотя речь идет не о пользовательских интерфейсах, журнал «До и после» может дать вам довольно полезные советы о цвете, дизайне и смежных темах. У него даже есть несколько бесплатных PDF для загрузки.
В книге « Проектирование интерфейсов » Дженифер Тидуэлл есть целая глава на эту тему (глава 9, выдержки доступны в Интернете). Всю книгу стоит рекомендовать.
Я ужасно нахожу цвета, которые хорошо смотрятся вместе, поэтому я обманываю и использую картинки с натуры, в основном те цвета, которые я хочу (скажем, зеленый), а затем я использую этот сайт, чтобы вытащить основную цветовую схему. Как правило, природа неплохо справляется со своими собственными красивыми цветовыми схемами.
Что касается веб-интерфейса, я собираюсь остановиться здесь и сказать, что самый важный цвет в веб-дизайне - белый или «светлый». Это цвет, поверх которого вы размещаете плотные участки содержимого.
Темный текст, светлый фон, всегда, когда речь идет о ваших основных областях контента.
И самое важное правило в макете - это пробел. Пусть содержимое дышит.
Следование этим двум простым правилам стоит больше, чем большинство рекомендаций по «пользовательскому интерфейсу».
И, между прочим, руководящие принципы интерфейса пользователя MS (в общем и целом) ужасны. Прочтите Якоба Нильсена, посмотрите на эстетику дизайна Apple, но держитесь подальше от 12-ступенчатой текстовой философии пользовательского интерфейса Wizard 10pt от MS "нейтрально-серый / синий хрустящий ящик".
(И я говорю это как давний программист MS GUI)
Используйте высококонтрастные цветовые комбинации; Черный текст на белом фоне - лучший пример высококонтрастного комбо.
Плохая комбинация - зеленый текст на красном фоне. Это ужасно для дальтоников (таких как я).
Посмотрите, как ваш сайт выглядит дальтоник: colorfilter.wickline.org
Что касается настольных приложений: что бы вы ни делали, не используйте специально подобранные цвета. Придерживайтесь названных системных цветов, таких как «Фон окна», «Текст меню» и т. Д. В противном случае люди, полагающиеся на функции доступности ОС, будут заблокированы с вашими вариантами выбора цвета (например, неспособны выбрать высококонтрастную тему) и люди, которые любят настраивать свои темы рабочего стола, подумают, что ваше приложение бесполезно.
Вот несколько простых указателей для удобства использования в вашей типографии . Эти вещи в основном касаются вопросов читабельности и доступности.
DOs:
- Использовать относительный размер шрифта (em)
- Определите языковые изменения в документе, используя атрибут LANG
- Черный текст на белом фоне
- Для заголовков используйте H1, H2 и т. Д. И вкладывайте их соответствующим образом
- Упорядочить контент и организовать с заголовками, которые соответствуют тому, что ищут ваши пользователи
- Написать четкую и простую копию
- Выровнять по левому краю
- Цвет текста к фону должен быть высококонтрастным
Donts:
- Используйте «нажмите здесь» или «больше» в качестве текста ссылки
- Используйте подчеркивание для акцента
- Более 2 семейств шрифтов
- Курсив
- Блоки текста с использованием всех заглавных букв
- Используйте настоящий красный или синий текст на белом фоне (хроматическая аберрация)