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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

И самое главное правило в верстке — пробелы.Позвольте контенту дышать.

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

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

Что можно:

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

НЕТ:

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