Автор Тема: web-стандарты пользовательских интерфейсов ПО внутреннего назначения  (Прочитано 3047 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн rjhdby

  • Постоялец
  • ***
  • Сообщений: 432
  • Рейтинг: 3
  • Пол: Мужской
    • rjhdby
    • Просмотр профиля
Из внутренней рассылки, "Уровень доступа: общедоступный", так что думаю ничего страшного :]
Может кому интересно будет.

Выдержки. (* не обязательно)
Цитировать
Общие законы «хорошего» интерфейса
Интерфейс интуитивно понятен и не требует дополнительных инструкций и описаний работы
Элементы интерфейса содержат всплывающие подсказки
Один и тот же элемент не должен называться по-разному в разных местах
Для улучшения удобочитаемости длинные числа разбиваются пробелом по три цифры: 1 500 000 руб.
В интерфейсе используется модель «Существительное-глагол»
*Интерфейс монотонен – имеет только один способ выполнения той или иной задачи
Текст является самой лучшей визуальной подсказкой
Закон Фитса – чем дальше находится объект от текущей позиции курсора и чем меньше размеры этого объекта, тем больше времени потребуется для перемещения к нему курсора
Окна
Общие принципы оформления

При изменении размера окна браузера содержимое «растягивается» под текущее разрешение экрана в соответствии с процентными соотношениями верстки
Заголовок окна приложения соответствует содержимому. Представляет собой конструкцию из названия программы и заголовка соответствующей формы
Примечание: в диалоговых окнах в заголовке пишется только название приложения, либо фраза, отражающая смысл диалога
Главное окно приложения
В шапке располагается логотип и «хлебные крошки» — элемент навигации, представляющий собой путь от «корня» приложения (главной страницы) до текущей страницы, на которой находится пользователь. Пункты в цепочке «хлебных крошек» отделены пиктограммами-стрелочками
Меню сверху – если количество пунктов меню небольшое и важна вся ширина зоны контента
Меню слева – вариант группировки, рекомендуемый к использованию при наличии большого количества пунктов меню двух уровней вложенности
Комбинированный вариант – для сложных форм и разделов
В нижней части окна приложения располагается футер с двумя текстовыми блоками: копирайтами и информацией об авторизированном пользователе — его ФИО, логином и другой персональной информацией.
Футер всегда «прижат» к низу экрана на расстоянии 30 пикселей, содержание футера может быть изменено в зависимости от специфики приложения
Модульная сетка, система отступов и выравниваний
Все элементы и блоки экранной формы прорисовываются с отступом в 20 пикселей от границы рабочей области
Цвета линии-разделителя подобраны таким образом, чтобы создавался эффект «вдавленности»
Вертикальный отступ между элементами формы составляет 15 пикселей
При наличии комментария к полю формы или при переносе основной подписи элемента на новую строку отступ в 15 пикселей сдвигается на соответствующее значение
Элементы формы упорядочены и сгруппированы в логические группы в соответствии с задачами пользователей
Логические группы элементов визуально отделены друг от друга увеличенным отступом в 24 пикселя и могут содержать заголовок третьего уровня
Блок с управляющими кнопками всегда расположен снизу на расстоянии 24 пикселя от прочих элементов формы. Расстояние между кнопками так же фиксировано
*Расстояние от конца самой длинной подписи в столбце до соответствующего ей элемента формы составляет 50 пикселей
Относительно высоты элемента формы подпись расположена строго по центру
*Подпись может быть расположена сверху элемента на расстоянии 6 пикселей. Величина вертикальной отбивки между полями в этом случае остается стандартной
Незаполненные «обязательные» поля ввода подсвечиваются бледно-красным цветом
При построении экранных форм важно учитывать четкую геометрию. Все элементы форм, окон, функциональных модулей по вертикали выравниваются строго по направляющим линиям сетки
Навигация
Горизонтальное «верхнее» меню
Меню этого типа предназначено для компактной подачи двух уровней навигации
Каждый пункт представляет собой кнопку (некоторые пункты меню могут быть раскрывающимися)
*Заголовок кнопки существительное — короткое, ёмко отражающее содержание
Активный пункт меню обозначается обводкой
Количество пунктов меню выбирается с тем условием, что весь блок меню ограничен шириной контентной области
Меню может выступать в роли главной навигации и находиться всегда на экране, либо быть частью одного из разделов приложения
Меню в левом фрейме
Вертикальная навигация менее компактна, но его преимуществом является то, что весь набор доступных для выбора пунктов представлен более наглядно (пункты второго уровня не скрыты)
Вертикальное меню представляет собой набор ссылок, разбитых на смысловые группы с помощью заголовков
Примечание: если заголовок является ссылкой, его цвет – цвет стандартной ссылки
Смысловые блоки отделены друг от друга
В вертикальном меню левого фрейма используется строгая вертикальная геометрия
В заголовках пунктов навигации не рекомендуется использование длинных фраз, образующих визуальный и смысловой «мусор» и использовать повторы – повторяющиеся слова выносятся в заголовок. (Неправильно: Просмотр справок|Справки об открытии счета, Справки об оборотах. Правильно: Справки|Об открытии счета, Об оборотах)
Длина кнопки выбирается из соображений визуальной гармонии в зависимости от длины расположенного в ней текста — подпись не должна быть сильно зажата и, в то же время, в кнопке не должно быть слишком много «воздуха»
текст подписи относительно кнопки по вертикали и горизонтали выровнен строго по центру
Кнопки имеют краткие и ясные подписи. Для подписи используется глагол в инфинитивной форме (например, «Найти», «Распечатать»)
Кнопки, выполняющие в разных диалогах идентичные функции, имеют одинаковые названия
*Формулировка подписи исключает двузначность и содержит уточняющие слова (Неправильно: Удалить. Правильно: Удалить заявку)
Кнопки, вызывающие продолжение диалога во вложенных формах, в подписи обозначены многоточием
Недоступные кнопки не исчезают с экрана, а становятся неактивными и обозначаются соответствующими атрибутами
В блоке кнопок присутствует кнопка по умолчанию. Выбирается исходя из текущих задач пользователя
Примечание: опасные для пользователя кнопки не могут быть кнопками по умолчанию
«Дроп-даун» лист (раскрывающийся список)
Раскрывающийся список используется для компактной подачи набора взаимоисключающих данных. С помощью него пользователи могут выбрать только один пункт
Подпись к элементу — существительное.
До осуществления выбора «дроп-даун» не содержит никаких подписей
Радиокнопки
С помощью радиокнопок пользователи делают выбор между несколькими взаимоисключающими пунктами. В отличие от раскрывающегося списка, система из радиокнопок менее компактна — к использованию рекомендуется не более семи элементов
Первый в списке пункт всегда активный (рекомендуется выбирать наиболее безопасным для пользователя)
Группа радиокнопок ведет себя как единый орган управления, поэтому важно учитывать вертикальное расположение пунктов списка — при таком расположении процесс переключения более нагляден и чтение подписей более комфортно
Поля ввода
Длина полей не меньше и, по возможности, не больше, длины вводимых в них данных
Содержимое полей выровнено по левому краю, за исключением полей с числовыми значениями (например, для ввода денежных сумм)
Таблицы
Ширина столбцов таблицы задается в процентном соотношении в зависимости от объема данных
Примечание: для более комфортного восприятия информации не следует перегружать таблицу лишними, не имеющими отношения к решению текущих задач пользователя, данными
Если в таблице содержится большое количество данных, информация разбивается на страницы
Областью ссылки в пункте постраничной навигации является не только текст, но и вся область кнопки с рамкой
Если в таблице отображается больше одиннадцати страниц, в конце ряда кнопок с номерами перед кнопкой «Последняя» появляется троеточие, указывающее что количество страниц в списке больше, чем отображено на экране
При нажатии на кнопку с номером страницы начиная от восьмой (8,9,10…), после отображения этой страницы, данная кнопка становится в центр ряда, тем самым изменяя диапазон отображаемых страниц
Таблица может иметь фильтр для поиска данных: пользователь вводит с поле необходимого столбца данные и в таблице без перезагрузки страницы отображаются данные, соответствующие поисковому запросу
Таблица переходит к «исходному» состоянию после удаления введенных поисковых запросов в соответствующих полях
Высота полей ввода в фильтре используется по-умолчанию, ширина определяется шириной столбца
Шрифты
Стандартным размером наборного шрифта является 13 пикселей
Примечание:  в особых случаях (например, для примечаний)  используется шрифт размером 11 пикселей
При верстке текста следует избегать больших текстовых блоков – для удобочитаемости текст необходимо разбивать на небольшие абзацы
Не допускается выравнивание текста по всей ширине страницы, текст в абзацах выравнивается только по левому краю
Рекомендации для графического стиля пиктограмм
Пиктограммы, используемые при оформлении приложений, условно разделены на две группы:
Первая группа – это пиктограммы, иллюстрирующие функциональность: «удалить», «открыть календарь», «Экспортировать». Эти изображения зачастую используются без вспомогательных подписей, поэтому должны в своем дизайне с максимальной очевидностью и простотой передавать выполняемые при их помощи команды
Примечание: рекомендуется использовать плоские одноцветные значки нейтральных спокойных цветов в минималистической стилистике
Вторая группа – это пиктограммы, предназначенные для «косметического» оформления текста, всплывающих окошек и кнопок. Они не несут в себе никаких системных функций, а выполняют чисто эстетическую задачу
Примечание: стиль таких пиктограмм более сложен: они крупнее, в них используется небольшой объем, детализация и цветовое разнообразие
Для одних и тех же действий всегда используются одни и те же значки
Приложение не следует перегружать большим количеством пиктограмм. Следует помнить, что никакая пиктограмма не заменит ясную и лаконично сформулированную текстовую формулировку
А вот тут можно посмотреть картины моей супруги http://sevil.pro

Оффлайн Fray

  • Администратор
  • Олдфаг
  • *****
  • Сообщений: 6668
  • Рейтинг: 58
  • Пол: Мужской
    • Просмотр профиля
    • IT-Бложек
  • Откуда: Петербург
Общие законы «хорошего» интерфейса
К сожалению, не все программеры их соблюдают :D
MCSE: Messaging, MCSE: Communication, MCSE: Productivity, MCSA: Office 365, MCPS
my blog - http://it-blojek.ru

Оффлайн risc

  • Модератор
  • Старожил
  • *****
  • Сообщений: 848
  • Рейтинг: 7
  • Пол: Мужской
    • Просмотр профиля
  • Откуда: раша
ну это не то чтобы стандарты ???
это логично и должно быть понятно любому вменяемому кодеру :)
Кто понял жизнь, тот не торопится...

Оффлайн rjhdby

  • Постоялец
  • ***
  • Сообщений: 432
  • Рейтинг: 3
  • Пол: Мужской
    • rjhdby
    • Просмотр профиля
ну это не то чтобы стандарты
Это название документа.
А вот тут можно посмотреть картины моей супруги http://sevil.pro