Пользовательские интерфейсы - цвета и расположение
По правде говоря, я добавляю свой ответ на вопрос с более высоким разрешением, но это имеет следующие преимущества:
- не зависит от каких-либо внешних библиотек, включая jQuery
- - Не загрязняющее пространство имен глобальных функций путем расширения «String»
- Не создавать глобальных данных и выполнять ненужную обработку после найденного соответствия
- Обработка проблем с кодировкой и принятие (при условии ) Некодированное имя параметра
- Избегание явных for циклов
String.prototype.urlParamValue = function() {
var desiredVal = null;
var paramName = this.valueOf();
window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
var nameVal = currentValue.split('=');
if ( decodeURIComponent(nameVal[0]) === paramName ) {
desiredVal = decodeURIComponent(nameVal[1]);
return true;
}
return false;
});
return desiredVal;
};
Тогда вы использовали бы его как:
var paramVal = "paramName".urlParamValue() // null if no match
8 ответов
Обычно, каждая операционная система имеет Инструкции по пользовательскому интерфейсу. Для Windows взгляните здесь. (Редактирование: связи в том сообщении разорваны. Но Поиск "Инструкций по Пользовательскому интерфейсу" по MSDN имеет статьи обо всем),
Apple имеет свой собственный также. Кроме того, можно хотеть иметь в виду доступность.
Одна подсказка, чтобы проверить, имеют ли Ваши цвета хороший контраст, берет снимок его и преобразовывает в шкалу полутонов. Если Вы не можете считать что-то, цвета были, конечно, плохо выбраны.
Плюс, хотя это не о пользовательских интерфейсах, Прежде и После того, как Журнал может дать Вам некоторые довольно хорошие подсказки о цвете, дизайн и связанные темы. Это даже имеет некоторый свободный PDF для загрузки.
Книжные Интерфейсы Разработки, Jenifer Tidwell имеет всю главу по предмету (Глава 9, выборки, доступные онлайн). Всю книгу стоит рекомендовать.
Для веб-UI я собираюсь рискнуть здесь и сказать, что самый важный цвет в веб-дизайне является белым, или "легким". Это - цвет, сверх которого Вы помещаете плотные трактаты содержания.
Темный текст, светлый фон, всегда, когда дело доходит до Ваших основных предметных областей.
И самое важное правило в layouting является пробелом. Позвольте содержанию дышать.
После этих двух простых правил стоит больше, чем большинство "инструкций по" удобства использования пользовательского интерфейса.
И между прочим, инструкции по пользовательскому интерфейсу MS (в общем и целом) ужасны. Read Jakob Nielsen, взгляд на Apple разрабатывает эстетику, но избегает MS "нейтральный серый/синий crunchbox" текстовая философия Мастера 10 ПБ с 12 шагами UI.
(И я говорю что как долговременный MS программист GUI),
Используйте высококонтрастные комбинации цвета; Черный текст на белом фоне является лучшим примером высококонтрастной комбинации.
Плохая комбинация является зеленым текстом на красном фоне. Это ужасно для страдающих дальтонизмом людей (как я).
Посмотрите то, на что Ваш сайт похож страдающему дальтонизмом человеку: colorfilter.wickline.org
Я ужасен при нахождении цветов, которые выглядят хорошими вместе, таким образом, я обманываю и использую изображения от природы, которые являются главным образом цветом, который я хочу (скажите, зеленый), и затем я использую этот веб-сайт для вытаскивания основной цветовой схемы. Обычно природа делает довольно хорошее задание установки его собственных хороших цветовых схем.
Что касается настольных приложений: Независимо от того, что Вы делаете, не используйте подобранные цвета. Палка с именованными системными цветами, такими как "Фон окна", "Текст меню", и т.д. Иначе люди, полагающиеся на функции доступности ОС, будут заблокированы с Вашими выборами цветов (не могущий выбрать высококонтрастную тему, например) и людям, которым нравится настраивать их темы для рабочего стола, будет думать, что Ваше приложение является fugly.
Вот несколько простых указатели на удобство использования в вашей типографии . Эти вещи в основном решают проблемы удобочитаемости и доступности.
DO:
- Использовать относительный размер шрифта (em)
- Идентифицировать языковые изменения в документе с помощью атрибута LANG
- Черный текст на белом фоне
- Для заголовки, используйте H1, H2 и т. д. и размещайте их соответствующим образом
- Разбивайте содержимое на части и систематизируйте с заголовками, которые соответствуют тому, что ищут ваши пользователи
- Напишите четкую и простую копию
- Выровнять по левому краю, рваный справа
- Цвет текста к фону должен быть высококонтрастным.
НЕ ДЕЛАЙТЕ:
- Используйте «щелкните здесь» или «больше» в качестве текста ссылки
- Используйте подчеркивание для выделения
- Более 2 шрифтов- семейства шрифтов
- Курсив
- Блоки текста, состоящие только из заглавных букв
- Используйте красный или синий текст на белом фоне (хроматическая аберрация)