Готовый перевод Mac OS X Human Interface Guidelines / Руководство по проектированию пользовательских интерфейсов для Мак ОС X: Chapter 8 — UI Element Guidelines: Controls
Глава 8: Рекомендации по элементам интерфейса — элементы управления
Элементы управления — это графические объекты, взаимодействие с которыми приводит к видимому результату. MacOS X Application Kit (или AppKit) предоставляет стандартные элементы управления, который можно использовать в приложении, такие как кнопки, переключатели, флажки, поля ввода, списки.
Рекомендации, применимые к большинству элементов управления.
Рекомендуется использовать стандартные элементы управления Aqua во всех приложениях. Это позволит:
* Пользователю быстро понять, какой элемент управления как работает, не тратя на это времени.
* Так как элементы управления обновляются вместе с системой, не нужно обновлять программу, чтобы они выглядели так, как должны выглядеть в новой версии операционной системы.
Не следует использовать элементы разных размеров в одном окне. У многих элементов управления есть версии в трёх размерах: обычный, малый и миниатюрный. Чаще всего следует использовать элементы обычного размера. Когда требуется экономить место, к примеру на палитрах или [within a pane], можно использовать малые или (реже) миниатюрные элементы. Изредко в закладках можно использовать малые элементы, окружённые окном с большими элементами, лучше, чтобы в одном окне не такого не наблюдалось. (Заметьте, что во всех закладках окна элементы управления долны быть одного размера)
В целом, не следует изменять вертикальный размер элементов управления. Горизонтальный размер большинства элементов управления изменять можно, а вертикальный лучше не трогать, так как результат может быть неожиданным.
Следует использовать шрифт, установленный системой. К примеру, элементы обычного размера используют обычный размер шрифта для отображаемого текста, например «ОК» на кнопке или названии строки всплывающего меню. При использовании Interface Builder автоматически выставляется нужный размер шрифта для стандартного элемента управления.
Следует выставлять стандартные промежутки между элементами управления. Когда элементы управления расположены в строгом порядке, приложение становится более приятным на вид и простым в исползовании. В Interface Builder есть помощники по выравниванию элементов, которые покажут наиболее подходящее расстояние между элементами управления и краями окон.
Заметьте: описания элементов в этом разделе сопровождается как минимум одной иллюстрацией с примером применения элемента. Не обязательно на них будет изображено расположение, размер и цвета элементов, подходящие в вашей программе.
По этой причине не следует измерять элементы из этого документа и использовать при построении интерфейсов. При использовании Interface Builder правильные размеры выставляются автоматически.
Элементы управления для рамки окна
Для использовании в рамке окна (панелях инструментов в верхней и нижней части окна) служит небольшой набор специальных элементов. Эти элементы перечислены в таблице 8.1
Таблица 8.1 вид и стиль элемента управления, разработанного для использования в рамке окна:
Элемент (имя в API) |Стиль |пример
Выпуклая кнопка (NSButton)|NSTexturedRounded-BezelStyle|[<o>]</o>
Выпуклый переключатель(NSSegmentedControl)|NSSegmentStyle-TexturedRounded|[#|=|H|o]
-------------------------------------------------
Выпуклое выпадающее меню (NSPopUpButton с атрибутом PopDown)|NSTexturedRounded-BezelStyle|[Элемент А v]
Строка поиска(NSSearchField)|нет (выставляется автоматически)|(q )
*Заметьте, что можно использовать стиль NSTexturedRoundedBezelStyle, чтобы разместить меню действий на панели управления (подробнее см. «Action Menu» (стр. 247))
Большинство из этих типов элементов можно видеть на рисунке ниже.
--
Не следует использовать элементы для рамки в основной части окна. Элементы управления, перечисленные в таблице 8.1 предназначены для использования в верхней или нижней панели инструментов. Они плохо смотрятся в основном теле окна. В частности, эффекты прозрачности этих элементов оптимизированы под рамку окна, и включают неактивное и другие состояния, которые не сочетаются с другими частями окна.
Также не стоит использовать элементы в стандартном стиле Aqua в панели инструментов. Все элементы и стили, не перечисленные в таблице 8.1 не предназначены для использования в верхней или нижней панели инструментов, за исключением кнопки-значка, подходящей для обоих случаев. В приложениях, предназначенных для работы под Mac OS X v10.7 этот тип кнопки зарезервирован для работы в панели инструментов окон настройки. Подробнее о разработке значков для кнопок-значков см. «Designing Toolbar Icons» (стр. 180). Об использовании кнопок-значков см. «Icon Button» (стр. 231))
Если в окне есть нижняя панель инструментов (что нетипично), следует использовать элементы для рамки окна и там. Подробнее см. «Providing a Bottom Bar» (стр. 179).
Не следует использовать одновременно текст и значки. Кнопка панели инструментов может содержать текст или значок. Также и переключатели могут одновременно содержать и текст и значок, но лучше не совмещать текст и значки в одной панели переключателя.
Interface Builder позволяет легко добавлять значки на кнопку, такие как плюс, символ аккаунта и замок. Некоторые из этих символов можно увидеть в панели инструментов Finder-а. Подробнее о системных значках см. «System-Provided Icons» (стр. 303), а о разработке собственных значков — «Designing Toolbar Icons» (стр. 108).
--
Важно: на каждую кнопку можно назначить название, которое будет отображаться, если пользователь включит отображение значков и подписей. Надпись отображается ниже кнопки панели инструментов, если пользователь выберет режим «Значки или текст» или «Только текст» (Однако для элементов управления, размещённых в нижней панели подписи не требуются).
Если необходимо отображать текст внутри элемента панели инструментов, это должно быть [noun (or noun phrase)], описывающее объект, настройку или состояние, либо глагол (или словосочетание с глаголом), описывающий действие. [Характерно для английского языка] Заглавные буквы проставляются как в заголовке (подробнее см. «Capitalizing Labels and Text» (стр. 289)).
Следует убедиться, что кнопка с фиксацией правильно отражает текущее её состояние. Если используются такие элементы, как флажок или кнопка с фиксацией, можно включить автоматическую подсветку, отражающую текущее состояние. В этом случае важно, чтобы его состояние точно подтверждалось внешним видом.
Также, если на панели инструментов есть элемент с фиксацией состояния, у него должны быть две подписи. Одна из них для нажатого (включенного) и другая — для отпущенного (выключенного) состояния. И наконец, каждое из этих состояний должно быть снабжено справочным тегом, вне зависимости от того, расположен ли элемент управления в основной или нижней панели. Подробнее о внешнем виде нажатой кнопки см. «Appearance and Behavior» (стр. 234).
К примеру, в Mail есть кнопка, позволяющая переключаться между активным и автономным режимом (показанная на рисунке в нажатом состоянии). После нажатия на кнопку, под которой написано «Go Offline» подпись сменится на «Go Online», а кнопка переключится в отпущенное состояние.
--
Чтобы установить фиксацию на кнопку панели инструментов, отображающуюся по умолчанию во включенном состоянии, следует использовать объект NSSegmentedControl вместе со стилем NSSegmentStyleTexturedRounded в режиме NSSegmentSwitchTrackingSelectAny. Если используется Interface Builder, следует поместить объект Segmented Control на нужную панель инструментов. В атрибутах инспектора нужно выставить стиль Textured Rounded и режим Select Any. Убедитесь, что для элемента задан значок (в Interface Builder следует выбрать значок в инспекторе атрибутов).
Чтобы установить сегментный переключатель с выбранным элементом, следует применить стиль NSSegmentStyleTexturedRounded и режим NSSegmentSwitchTrackingSelectAny к элементу NSSegmentedControl. В Interface Builder же следует установить элемент Segmented Control на панель инструментов в верхней или нижней части окна, а на вкладке атрибутов Инспектора следует установить стиль Textured Rounded и режим Select Any. Проверьте значки на переключателе (в Interface Builder для этого нужно выбрать изображение из меню изображения в инспекторе атрибутов)
Кнопки
Кнопки нужны для запуска какого-либо действия. В Mac OS X есть несколько видов кнопок, предназначенных для тех или иных задач. При разработке интерфейса пользователя следует убедиться, что выбран правильный тип кнопки, соответствующий задаче. Рекомендации в этой секции помогут правильно выбрать тип кнопки.
Важно: кнопки, описанные в этом разделе подходят для основной части окна, а не для панелей инструментов, за исключением кнопки-значка, которая используется в панели выбора страниц окна настроек. Об элементах управления, предназначенных для использования в панелях инструментов см. «Window-Frame Controls» (стр. 225).
Основная кнопка.
Кнопка основного типа предназначена для запуска тех или иных действий в приложении.
--
Кнопи разработаны для использования в основной части окна, а не в панелях инструментов. О панелях инструментов см. «Window-Frame Controls» (стр. 225).
Кнопки доступны в Interface Builder. Чтобы создать кнопку без него, нужно создать объект NSButton типа NSMomentaryPushInButton или NSMomentaryLightButton. Заметьте, что стиль кнопки NSTexturedRoundedBezelStyle предназначен для использования в панелях инструментов.
Внешний вид и поведение
В кнопке всегда должен находиться текст, без изображений.
Все кнопки не окрашены ни в какой цвет, за исключением кнопки по умолчанию в диалоге (которая предназначена для запуска безопасных действий по кнопке Return или Enter, подробнее см. «Dismissing Dialogs» (стр. 205)). На рисунке ниже можно увидеть две кнопки: «OK» и «Отмена».
--
Когда пользователь нажимает на кнопку, на которую не проставлено умолчание, например «Отмена», она окрашивается в синий цвет, а кнопка по умолчанию его теряет. Данное поведение автоматически включается для всех системных кнопок.
Рекомендации
Следует использовать кнопку в теле окна для запуска действий, которые начнутся сразу после нажатия, таких как «Печатать» или «Удалить». Также по нажатию кнопки может открываться окно.
Под кнопку не должны маскироваться другие элементы управления. Пользователь ожидает немедленного начала действия после нажатия кнопки, включая открытие и закрытие окон. В частности:
* Не следует использовать кнопку для индикации состояния, такого как «Включено» или «Выключено». Для этого можно использовать флажок. (см. стр. 241).
* Не следует использовать кнопку в качестве надписи. Для этого следует использовать текстовое поле (см. «Static Text Field» (стр. 266)).
* Не следует вызывать с помощью кнопки меню.
Между кнопками должно быть место, чтобы проще было кнопки нажимать. В частности, если на кнопку назначено потенциально опасное или деструктивное действие (напр. «Удалить»), она должна располагаться на некотором удалении от других кнопок, чтобы пользователь не нажал на неё случайно.
Не следует располагать значок на кнопке. В кнопке должен быть только текст, указывающий на связанное с ней действие.
В надписи на кнопке должен быть глагол или глагольная фраза. Назвнаие кнопки должно указывать да действие, которое будет выполнено — сохранить, закрыть, распечатать, изменить пароль, и т.д. Если действие применяется к конкретному объекту, его также стоит указать в надписи. К примеру, «выбрать изображение...» звучит понятнее, чем просто «выбрать...». Так как кнопка всё равно запускает действие сразу, не нужно добавлять слово «сейчас» (к примеру «сканировать сейчас») в названии кнопки.
[Для английского языка] Следует использовать заглавные буквы как в заголовке, и если необходимо — добавлять многоточия. Об использовании заглавных букв см. «Capitalizing Labels and Text» (стр. 289).
Если после нажатия на кнопку должно открыться новое окно, в том числе диалоговое, или запуститься приложение, следует добавить многоточия после надписи на кнопке. Многоточия сообщают пользователю, что по нажатию на кнопку будет открыто новое окно, с помощью которого действие, описанное в названии кнопки будет выполнено. К примеру, на рисунке ниже изображено окно настроек принтеров и сканеров, где многоточия есть в кнопках «Открыть очередь печати» и «Опции и [настройки]»
[Изображение]
Размер кнопки должен соответствовать её содержанию. Если кнопка недостаточно широкая, текст будет обрезан. Заметьте, что высоту кнопки изменить нельзя.
Не желательно описывать назначение кнопки во внешней подписи. Назначение кнопки должно быть понятно из надписи на ней.
Значок
С помощью значка вызываются функции, характерные для конкретных приложений; часто значки размещаются на панелях инструментов. К примеру, в окне системных настроек значки позволяют перейти на соответствующие страницы настроек системы.
[Изображение]
Можно использовать значки как в панели инструментов (но не в нижней панели), так и в теле окна.
Чтобы поместить значок на окно приложения с помощью Interface Builder, на ней нужно разместить к нопку с объёмными или прямоугольными краями на окно, добавить значок и снять галочку «Bordered» на странице «Attributes» Инспектора. С помощью AppKit то же можно сделать, используя метод «setBezelStyle:» объекта «NSButtonCell» с аргументом «NSShadowlessSquareBezelStyle».
Внешний вид и поведение
Вокруг значка не отображается каких-либо границ, однако активна вся поверхность значка, а не только изображение.
На значок можно назначать всплывающее меню, обозначенное с помощью направленного вниз треугольника. Подробнее см. «Icon Button or Bevel Button Containinga Pop-Up Menu» (стр. 244).
Рекомендации
Следует использовать значки, чтобы вызывать функции, характерные для конкретных приложений. С помощью значка можно задействовать функции с переключением режима в окне настроек.
Не следует одновременно использовать значки и кнопки на панели инструментов. Панель инструментов выглядит лучше и понятнее если на ней присутсвуют лишь элементы управления одного типа.
Внешний вид значка должен чётко и однозначно указывать на его назначение. Пользовать может отключить подписи к значкам, поэтому очено важно правильно подобрать изображение, которое чётко ассоциируется с функцией. Подробнее см. «Designing Toolbar Icons» (стр. 108).
Подпись должна содержать имя объекта, либо описание действия. [для английского языка] следует использовать заглавные буквы как в загловке. Если значок предназначен для выбора страниц в окне настройки, в подписи к нему должно быть название объекта, например «Сеть» или «Пользователи». Если же на значок назначено действие, в подписи должно быть его описание, например «отфильтровать» или «показать рисунок». [для английского языка] в обоих случаях следует использовать порядок применения заглавных, характерный для заголовков (см. «Capitalizing Labels and Text» (стр. 289)).
Изображение на значке не должно выходить за пределы кнопки. Внешние границы значка не видны, они лишь определяют активную область. Хорошо, когда отступ от края значка до края изображения составляет около 10 пикселей.
Если у значка есть подпись, следует размещать её под изображенем, как показано на рисунке (использовать нужно маленький системный шрифт).
--
Не следует располагать значок поверх других элементов управления. Не следует забывать, что на курсор мыши реагирует вся поверхность значка, а не только изображение. При использовании Interface Builder границы значков можно увидеть.
Кнопки панели поиска
Кнопки на панели поиска позволяют указывать место, где нужно осуществлять поиск, либо определяют набор критериев поиска.
О панели поиска см «Using a Scope Bar to Enable Searching and Filtering» (стр. 173).
[Изображение]
Важно: кнопки поиска разработаны для использования на панели поиска и строчках фильтра. За пределами панели поиска, например в панели инструментов, или основном теле окна их использовать не следует.
Кнопки поиска есть в Interface Builder. Чтобы создать простую кнопку поиска, нужно использовать метод «setBezelStyle:» обекта «NSButtonCell» с аргументом «NSRecessedBezelStyle». Чтобы создать выпуклую кнопку поиска, в качестве аргумента «setBezelStyle:» следует использовать «NSRoundRectBezelStyle».
Внешний вид и поведение
Кнопки поиска могут отображаться в двух стилях:
Плоские кнопки поиска:
Выпуклые кнопки поиска:
Обычно в кнопках поиска содержится текст, но в виде исключения можно устанавливать на них изображение.
Рекомендации
Следует использовать простую кнопку поиска, чтобы помещать в них типы и группы объектов, либо направления, которые пользователь может выбрать, чтобы сузить рамки поиска.
выпуклые кнопки поиска можно использовать, чтобы сохранить критерий поиска или изменить их.
К примеру, в Finder выпуклые кнопки отображают критерии поиска, такие как «по дате последнего изменения» или «по дате последнего открытия», а также кнопку сохранения поиска. Направления поиска, такие как «На этом компьютере» «Общие папки» и пр. выбрираются с помощью простых кнопок поиска.
[Изображение]
Если на кнопки поиска нужно разместить значок, нужно использовать системный значок, если такой есть. Собственный значок можно рисовать, если для этой цели не предусмотрено системного (см. «Designing Toolbar Icons» (стр. 108)).
Градиентные кнопки
Градиентные кнопки используют для быстрого доступа к функциям конкретного элемента наподобие боковой панели.
--
Градиентные кнопки есть в Interface Builder. Чтобы создать их через AppKit, нужно методу «setBezelStyle:» объекта «NSButtonCell» присвоить значение «NSSmallSquareBezelStyle»
Внешний вид и поведение
Градиентные кнопки могут быть без фиксации, с фиксацией, а также с всплывающим меню. К примеру, в боковой панели Mail Градиентные кнопки используются, чтобы создать новую учётную запись почты, показать или скрыть функции mail а также вывести контекстное меню.
--
В градиентных кнопках должны располагаться изображения, но не текст. Рекомендации
Следует использовать градиентные кнопки для доступа к функций, относящихся к таким элементам управления, как боковая панель или табличный вид.
Так как функции, доступные через градиентные кнопки относятся лишь к конкретному элементу управления, они не требуют подписит.
Если возможно, для обозначения градиентных кнопок, таких как «Действия» или «добавить изображения», следует использовать системные значки, так как они более привычны для пользователей. о системных значках см. «System-Provided Icons» (стр. 303). Если нужно нарисовать собственные значки, см. «Designing Toolbar Icons» (стр. 108).
Кнопка справки
Кнопка справки отображает окно справочной информации текущего приложения.
--
Стандартная кнопка справки доступна в Interface Builder. С помощью AppKit кнопку справки можно создать, выбрав для метода «setBezelStyl:» объекта «NSButtonCell» значение «NSHelpButtonBezelStyle»
Внешний вид и поведение
Кнопка справки представляет собой круглую бесцветную кнопку. Размер кнопки стандартизирован, на кнопке всегда располагается знак вопроса.
Когда пользователь нажимает на кнопку справки, системные окно просмотра справки отображает страницу справочных материалов для текущего приложения. Справочные материалы должны открыться либо на главной странице, либо на странице, зависящей от контеста вызова справки.
Рекомендации
Не следует пытаться изображать кнопку справки самостоятельно.
В диалогах (включая окна настройки) и выезжающих панелях кнопку справки можно располагать в левом или правом нижнем углу. В диалогах, содержащих кнопку ОК кнопку справки можно располагать только слева на одном уровне с остальными кнопками диалога. Если в диалоге нет кнопок ОК и Отмена, к примеру, в окнах настроек, кнопку справки следует располагать снизу-справа. К примеру, в диалоге настройки Mail на странице «Шрифты и цвета» кнопка справки располагается в правом нижнем углу.
--
Об использовании справочной информации см. «User Assistance» (стр. 95).
Кнопки с рамкой
У кнопок с рамкой множество назначений, но они разработаны для основной части окна.
Заметьте, что кнопки с рамкой не рекомендуется использовать в приложениях под Mac OS X v10.7 и старше. Следует заменять их на градиентные кнопки (см. «GradientButton» (стр. 234)) и кнопки-перключатели (см. «Segmented Control» (стр. 243)).
Кнопки с рамкой можно использовать по одной (как обычные кнопки), так и группами (как переключатели или флажки). Ниже приведён пример кнопок с рамкой из окна инспектора, предназначенных для обрезки и поворота выбранной области.
Кнопки с рамкой доступны в Interface Builder. Чтобы создать кнопку с рамкой через AppKit, нужно методу «setBezelStyle:» объекта «NSButtonCell» выставить свойство «NSRegularSquareBezelStyle» (или NSShadowlessSquareBezelStyle если не нужны скруглённые углы).
Внешний вид и поведение
У кнопки с рамкой могут быть прямоугольные или скруглённые углы. В них можно располагать текст, значки или другие изображения. На кнопку с рамкой можно назначить всплывающее меню, после чего на кнопке появится соответствующий треугольник (см. «Icon Button or Bevel Button Containing a Pop-Up Menu» (стр. 244)).
Работают такие кнопки так же, как и обычные, но их можно объединять в группы, как переключатели и флажки.
Рекомендации
кнопки с прямоугольной рамкой следует использовать только тогда, когда недостаточно свободного места, либо когда кнопки объединены в группу.
Если используется отдельностоящая кнопка, её следует обозначать глаголом или глагольной фразой, указывающей на её функцию. Если кнопка включена в набор кнопок, используемых как флажки и переключатели, можно подписывать кнопки существительным, описывающим настройку или значение.
Если кнопка обозначается с помощью картинки, следует убедиться, что изображение понятно и однозначно описывает назначение кнопки. Желательно, чтобы картинка была не больше 32х32 пикселей. Рамка должна отстоять на 5—15 пикселей от края изображения. Если на кнопке есть и изображение и подпись одновременно, лучше, чтобы рамка отстояла от изображения на 15 пикселей, чем на 5. Для надписей лучше использовать соответствующий шрифт (Lucida Grande, прямой, размером 10 пунктов).
С помощью Interface Builder можно добавить на кнопку всплывающее меню. Для этого нужно перетащить кнопку всплывающего меню в окно, затем выставить на панели «Attributes» Инспектора тип Pull Down, а затем на других панелях выставить стиль Bevel (для кнопок со скруглёнными углами) или Square (для прямоугольных).
Круглые кнопки
Круглые кнопки предназначены для немедленного запуска действия.
Заметьте: не рекомендуется использовать круглые кнопки для приложений под Mac OS X v10.7 или старше. В качестве альтернативы можно использовать, например, градиентные кнопки (см. «Gradient Button» (стр. 234))
--
круглые кнопки доступны в Interface Builder. Для того, чтобы создать такую кнопку через AppKit, нужно методу «setBezelStyle:» объекта «NSButtonCell» выставить свойство «NSCircularBezelStyle».
Внешний вид и поведение
В круглую кнопку можно вложить только изображение без подписи.
Рекомендации.
Круглые кнопки — это устаревший элемент, редокий в современных версиях Mac OS. Лучше использовать другие элементы, например градиентные кнопки с системным или собственным значком для обозначения. Продробнее о градиентных кнопках см. «Gradient Button» (стр. 234) а о значках для них — «System-Provided Icons» (стр. 303).
Не следует пытаться самому создать кнопку справки из круглой кнопки. Для этого есть стандартная кнопка (см. «The Help Button» (стр. 235)).
Не следует использовать круглые кнопки в качестве флажков или переключателей. Для этих целей есть специальные элементы (см. «Radio Buttons» (стр. 239) и «Checkbox» (стр. 241)).
В качестве значка для круглой кнопки можно использовать отдельный символ из шрифта.
Элементы для выбора значения
Для выбора значения из списка можно пользоваться несколькими различными элементами интерфейса. Некоторые позволяют выбрать только один элемент, некоторые — сразу несколько.
Важно: описанные ниже элементы можно применять лишь в основном теле окна, но не в его рамке. Исключение — значок с всплывающим меню, который можно использовать в панелях инструментов. Об элементах для рамки окна см. раздел «Window-Frame Controls» (стр. 225).
Переключатели
Из группы переключателей можно выбрать только один элемент.
( ) Открывать все файлы в одном окне
(*) Открывать файлы группами
( ) Открывать каждый файл в отдельном окне
Переключатели доступны в Interface Builder. Чтобы создавать их через AppKit, нужно создать кнопку «NSButton» типа «NSRadioButton»
Внешний вид и поведение
Отрисовка переключателей происходит автоматически, отображать на поверхности переключателя дополнительный текст или изображение не следует.
Набор опций не должен меняться во время отображения, так же как и их названия.
Рекомендации
Следует отображать группы переключателей когда нужно выбрать одно значение из нескольких.
Если же нужно выбрать несколько значений сразу, следует использовать флажки. Также если нужно переключать значение одной настройки в одно из двух состояний по типу «включено»-«выключено», следует также использовать флажки (см. «Checkbox» (стр. 241)).
Возможно лучше использовать всплывающее меню, если выбирать нужно более чем из пяти значений. Переключателями хорошо выбирать одно из двух-пяти значений. (подробнее о всплывающих меню см. «Pop-Up Menu» (стр. 245)).
Переключатель не должен при нажатии запускать каких-то процессов. Для этой цели есть кнопки. Однако выбор переключателя может повлиять на состояние приложения. К примеру, в настройках восприятия речи пользователь должен выбрать метод «Ждать голосовой команды», и тогда будет снято затемнение с полей выбора голосовой комманды.
--
Каждому положению переключателя должно быть назначено описание. Пользователь должен знать, что он выбрал, когда выбрал тот или иной переключатель. [Для английского языка] заглавные буквы в описании переключателя должны применяться как в обычном предложении (см. «Capitalizing Labels and Text» (стр. 289)). Группы переключателей тоже должны быть подписаны.
В горизонтальных группах переключателей расстояние между переключателями должно быть одинаковым. В качестве расстояния следует выбирать длину наибольшей подписи с небольшим отступовм. Чтобы правильно выбрать расстояние между переключателями и расположить их на одной высоте, лучше использовать помощники Interface Builder-а.
Флажки
Флажки предназначены для того, чтобы включить или выключить процесс, состояние или значение.
[ ] Сворачивать окна в значок приложения
[x] Сопровождать открытие приложения анимацией
[ ] Автоматически скрывать и показывать Док
[ ] Подсвечивать индикатор открытых приложений
Флажки можно включать через Interface Builder. Через AppKit их можно создать, выбрав объект «NSButton» типа «NSSwitchButton».
Внешний вид и поведение
Отрисовка включенных и выключенных флажков происходит автоматически. Не нужно помещать изображение или текст внутрь флажка.
Рекомендации
Следует использовать флажки того, чтобы выбирать одно из двух проитвоположных значений, действий или состояний.
Следует использовать переключатели, если пользователю нужно выбирать одно из нескольких значений. Подробнее см. «Radio Buttons» (стр. 239).
Следует использовать выравнивание для групп флажков, позволяющее определить взаимоотношения между ними. Если значения не зависят друг от друга, флажки следует выравнивать по левому краю. В прочих случаях, когда пользователю нужно знать на какие параметры будет влиять установленный флажок — тогда нужно располагать значки в соответствии с их иерархией.
К примеру, вкладка «Часы» в настройках даты и времени содержит элементы, которые будут доступны только если поставить флажок «показывать часы в строке меню». Кроме подписей взаимодействие между элементами управления становится понятно благодаря начличию отступов.
--
Подпись к флажку должна однозначно показывать, какое из двух состояний соответствует выбранному флажку, а какое — невыбранному. Если подходящую надпись выбрать не удалось, можно использовать двухпозиционный переключатель — тогда каждое положение можно снабдить отдельной подписью. [Для английского языка] заглавные буквы в описании флажка должны применяться как в обычном предложении (см. «Capitalizing Labels and Text» (стр. 289), за исключением случаев, когда состояние или значение является заголовком элементов, взаимодействующих с флажком.
Также, хорошо, чтобы название группы флажков достаточно понятно отображало их назначение. Помощники Interface Builder-а помогут выровнять флажки относительно первого.
Если это уместно, сделует включить возможность быстрого выбора через подчёркнутый символ. Эта функция применяется также в меню (подробнее — «Using Symbols in Menus» (стр. 129)).
Группы флажков лучше располагать вертикально. Тогда пользователю проще отделить, к какому флажку относится его обозначение.
Группа кнопок
Группа кнопок представляет собой две или несколько кнопок, объединённых в один элемент управления.
(=|=|=|=|A)
Важно: группа кнопок, описанная в данном разделе подходит только для основного тела окна, но не для панелей инструментов. О последних см. «Window-Frame Controls» (стр. 225).
Группа кнопок доступна в Interface Builder-е. Через AppKit их можно создать, выбрав объект «NSSegmentedControl».
Внешний вид и поведение
На кнопки в группе может наноситься рисунок или надпись, но не то и другое одновременно. Группа кнопок может работать как переключатель, либо как флажок.
Рекомендации
Можно использовать группу кнопок, когда нужно выбрать один или несколько параметро из набора. Также можно с помощью группы кнопок выбирать одну из нескольких страниц в окне (заметьте, что похожий внешне переключатель вкладок работает по-другому, о нём можно узнать в разделе «Tab View» (стр. 280)).
Не следует использовать группу кнопок чтобы включать добавлять или удалять элементы боковой панели, или в таблице. Если пользователю нужно добавлять или удалять объекты в боковую панель, следует использовать градиентную панель (см. «Gradient Button» (стр. 234)) в теле окна. (Аналогичную функцию можно добавить в нижнюю панель (см. «Appearance and Behavior» (стр. 228)).
Ширина сегментов должна быть одинаковой. Если ширина сегментов различается, пользователь может не понять, почему сегменты выглядят, либо ведут себя по-разному, либо различаются по важности.
В обозначении сегмента следует использовать существительное, или короткую фразу. [для английского языка] Текст должен описывать объект, используя заглавные буквы как в заголовке (см. «Capitalizing Labels and Text» (стр. 289)). Если сегменты обозначаются через надписи, внешних заголовков не требуется.
Если возможно, следует использовать системные значки. Если нужно нарисовать собственный значок, он должен быть выполнен в том же стиле, что и системный. Рекомендации по созданию значков см. в «Designing Toolbar Icons» (стр. 108). О системных значках см. «System-Provided Icons» (стр. 303). значки в группе кнопок могут быть трёх размеров:
* Обычный: 17х15 пикселей
* Малый: 14х13 пикселей
* Миниатюрный: 12х11 пикселей.
Заметьте, что если в сегменты группы обозначаюся с помощью изображений, подписи к ним можно отображать под группой кнопок.
Всплывающее меню для значков и кнопок с рамкой
Значкам и кнопкам с рамкой можно назначить всплывающее меню. К прмеру, в инспекторе диаграмм Keynote используется кнопка с рамкой, содержащее всплывающее меню, прелагающее выбрать стиль диаграммы:
--
Также в Keynote есть значки, также оснащённые всплывающими меню (на рисунке ниже — кнопка Мастера настройки).
--
Важно: значок с всплывающим меню можно использовать как в рамке окна, так и в теле. Подробнее о элементов для рамки окна см. «Window-Frame Controls» (стр 225).
К значку, как и ко кнопке с рамкой несложно добавить всплывающее меню с помощью Interface Builder. Для этого нужно перетащить кнопку (объект NSPopUpButton) в окно, затем изменить для неё тип во вкладке Attributes Инспектора на «выпадающее меню». После этого нужно сменить для кнопки с закруглённой или прямой рамкой стиль на «квадрат» или «квадрат без тени». Для значка выбранный стиль не имеет значения, так как рамку ему нужно снять. Если необходимо, можно изменить размер кнопки.
Оба типа кнопок могут работать как стандартное всплывающее меню, в котором изображение на кнопке работает как текущий выбор, или как заголовок меню, в котором изображение на кнопке является тем же.
Подробнее о кнопках с рамкой см. «Bevel Button» (стр. 205), а о значках — «Icon Button» (стр. 200).
Всплывающие меню
Всплывающие меню представляет собой список опций, одна из которых может быть выбрана.
--
Важно: всплывающее меню, описанное в этом разделе подходит лишь для основного пространства окна. Для панелей инструментов есть специальные элементы, см. «Window-Frame Controls» (стр. 196)
Всплывающие меню доступны из Interface Builder-а. Чтобы создать его с помощью AppKit, нужно использовать класс NSPopUpButton
Внешний вид и поведение
Всплывающее меню содержит:
* Индикатор с двойной стрелкой
* Опцию в виде существительного (объекта), или прилагательного (свойства или значения), но не глагола (команды)
* Галочку в левой части выбранной опции
Большинство из вышеперечисленного можно увидеть на рисунке внизу, где изображено меню выбора цвета подсветки в основных настройках (индикатор с двойной стрелкой не виден, когда меню открыто).
--
Всплывающее меню работает так же как и другие меню: пользователь нажимает на кнопку вызова меню и переносит курсор на нужную опцию. Выбранная опция мигает, после чего меню пропадает. Если пользователь перемещает курсор за пределы меню, не отпуская кнопки мыши, выбранное значение остаётся выделенным. Пользователь может открывать меню не только для того, чтобы выбрать опцию, но и чтобы посмотреть, какие опции доступны из этого меню
Использование всплывающего меню
Всплывающее меню можно использовать для выбора не более 12 опций, которые не обязательно видеть постоянно.
В некоторых случаях уместно использовать всплывающее меню вместо других видов интерфейсов для выбора. К примеру, если нужно выбрать более чем из пяти значений, обычные переключатели лучше не использовать, а заменить их на всплывающее меню и тем самым сэкономить место.
Запомните, что всплывающее меню предназначено для выбора объектов или свойств. Если же нужно меню для выбора команд (которые описывают глаголами), нужно использовать выпадающие меню (подробнее см. UI Element Guidelines: Menus (стр. 103)). [для английского языка] следует использовать заглавные буквы в том же порядке, как и в заголовках.
Желательно для всплывающего меню ставить описание в левой части (или правой, если таково требование выбранного языка). [для английского языка] В описании следует придерживаться правил расстановки заглавных букв, действующих в предложениях (см. «Capitalizing Labels and Text» (стр. 252)).
Во всплывающие меню нельзя добавлять подменю. Подменю будут скрывать от пользователя опии слишком глубоко, и некоторым пользователям будут непонятны.
Не следует использовать всплывающие меню, если количество опций может меняться. Чтобы узнать, какие опции доступны, пользователь должен открыть меню, а значит он может не подозревать о новой доступной опции
Если значений слишком много, лучше использовать список с прокруткой. Если свободного места достаточно, а количество опций превышает 12, лучше использовать список.
Не следует использовать всплывающее меню, если нужно выбрать более одной опции. К примеру, нельзя использовать всплывающее меню для выбора стиля текста, так как может понадобиться выбрать и жирный и курсивный шрифт одновременно, но во всплывающем меню будет отображаться только один. В этом случае лучше использовать выпадающее меню, где нужные опции помечать галочкой.
Изредка может понадобиться вкладывать во всплывающие меню команды. Но эти команды должны иметь прямое отношение к опциями во всплывающем меню. К примеру, в диалоге печати во всплывающем меню есть пункт «Добавить принтер», который позволяет добавить ещё один принтер к списку доступных через всплывающее меню. Когда пользователь добавить новый принтер, он появится во всплывающем меню и будет выбран. Заметьте, что подобные команды во всплывающем меню следует отделять от значений разделителем (горизонтальной линией, которая в Interface Builder называется «Separator Menu Item»)
Если в группе располагается несколько всплывающих меню, они должны быть одинаковой ширины, несмотря на то, что длина названий опций может различаться.
Меню действий
Меню действий — это особый тип кнопки меню, по нажатию на которую появляется контекстное меню приложения.
--
Важно: меню действий можно располагать как в рамке окна, так и в основном теле. Подробнее о элементах управления, предназначенных для рамки окна см. «Window-Frame Controls» (стр. 196).
Чтобы создать меню действий в Interface Builder нужно выбрать элемент управления, предназначенный для данной области окна, а затем на странице «Attributes» Инспектора нужно выбрать значок «NSActionTemplate»
Внешний вид и поведение
Меню действий обозначается с помощью системного значка «Action» и стандартной стрелки вниз (аналогичной стрелке, которая появляется на значке или кнопке, если к ней присоединить всплывающее меню. Подробнее см. «Pop-Up Menu» (стр.212)).
У меню действий нет подписи, потому что пользователь и так знает, что это за меню. Исключение — когда эту кнопку нужно расположить на панели инструментов. Пользователь может захотеть включить подписи к кнопкам панели инструментов (подробнее о панели инструментов см. «Designing a Toolbar» (стр. 144)).
Рекомендации
Следует использовать всплывающее меню для частоиспользуемых и наиболее важных функций. Преимущество кнопки меню перед обычным контекстным меню в том, что пользователь всегда знает о его наличии (подробнее о контекстном меню см. «Designing Contextual Menus» (стр. 129))
В частности, можно использовать меню действий вместо контекстного меню приложения. К примеру, в Finder-е в стандартной настройке панели инструментов есть кнопка меню действий, работающая с выделенным в текущий момент объектом.
--
Не следует пытаться сделать меню действий самому. У кнопки есть системный значок, который позволяет узнать её назначение любому пользователю. (Подробнее о системных значках см. «System-Provided Icons» (стр. 267)).
Следуйте рекомендациям из раздела контекстного меню при наполнении меню действий. К примеру, все команды должны быть доступны из меню приложения, а сочетания клавиш отображаться не должны. Подробнее о рекомендациях для контекстных меню см. «Designing Contextual Menus» (стр. 129).
Желательно размещать кнопку меню действий в нижней части списков, чтобы перечислить в меню команды для списков. Это справедливо как для обычных списков, так и для боковых панелей. К примеру, меню действий в боковой панели Mail содержит команды, относящиеся к аккаунту или почтовому ящику, выбранному в боковой панели.
--
В случае размещения кнопки в нижней части списка или боковой панели следует использовать градиентную панель. (подробнее см. «Gradient Button» (стр. 203)).
Не следует располагать меню действий в других частях пространства окна. Меню действий должно быть визуально соотноситься с его назначением, то есть относиться к списку или панели инструментов. Меню действий не заменит контекстного меню, которое пользователи выбирают нажатием на кнопку мыши совместно с клавишей Control, потому что будучи размещённой в том или ином месте меню действий должно соотноситься с этим местом.
Поле со списком
Поле со списком (или комбо-бокс) — это список, куда пользователь может ввести новое значение с клавиатуры.
--
Поле со списком доступно из Interface Builder-а. Чтобы создать его с помощью AppKit, нужно использовать класс NSComboBox
Внешний вид и поведение
Поле со списком представляет собой поле ввода текста, к которому подключен выпадающий список. Этот список не отображается, пока пользователь его не откроет, а поле может быть пустым или содержать стандартное значение.
Чтобы открыть список, пользователю нужно нажать на стрелку справа от поля ввода. Список как бы выпадает из поля ввода и по ширине совпадает с шириной поля вместе с кнопкой-стрелкой
Пользователь может вводить любые разрешённые символы в поле ввода. Если пользователь вводит начальные символы уже имеющихся в списке значений, список должен раскрываться, а наиболее подходящее значение — подсвечиваться. Значение, введённое пользователем не добавляется в список.
Рекомендации
Следует использовать поле со списком чтобы упростить задачу выбора значения из списка, если пользователю может понадобиться ввести значение, отсутствующее в списке.
С помощью одного поля со списком пользователь может выбрать только одно значение. Нельзя выбирать несколько значений, пользователю нужно предлагать выбрать или ввести только одно значение.
Следует отображать наиболее подходящее стандартное значение. Очень хорошо, если оно будет намекать на остальные значения (кстати, оно не обязательно должно быть первым в списке). А ещё лучше добавить к списку подпись, которая будет пояснять назначение списка.
Не следует делать список шире поля ввода вместе с кнопкой-стрелкой. Выбранное значение всё равно будет обрезано.
Следует отображать наиболее подходящие значения, когда пользователь вводит что-либо в поле. Пользователю не следует запрещать вводить своё значение, но лучше предлагать также выбрать одно из присутствующих в списке. К примеру Safari позволяет пользователю выбрать любое значение минимального размера шрифта. На странице «Дополнительно» (на рисунке ниже), Safari предлагает несколько значений размера шрифта в поле со списком, но пользователь может сам ввести значения, если такового не окажется.
--
Строка пути
Строка пути отображает путь к выбранному файлу в файловой системе.
--
Строка пути доступна в Interface Builder-е (для неё также можно выбрать стиль на странице «Attributes» Инспектора). Через AppKit её можно создать, воспользовавшись классом NSPathControl
К примеру, в Finder-е строка пути в одном из стилей используется, чтобы показать путь к одному из выбранных ниже файлов, как показано в «A path control displays the path of the current item»
Внешний вид и поведение
Для строки пути доступно три стиля, и все они предназначены для основного пространства окна:
* Стандартная
* Панель навигации
* Всплывающая
Все три стиля строки пути отображают и текст и значок приложения, пкпки или документа. Когда пользователь нажмёт на строку пути типа всплывающего меню, появится всплывающее меню со списком всех вложенных папок и строку выбора. Если пользователь выберет последнюю, откроется диалог открытия файла, отображающий содержимое папки. (о диалоге открытия файлов см. «The Open Dialog» (стр. 180)).
Если путь в строке слишком длинный, названия папок скрываются от корневой к текущей, как показано на рисунке ниже.
--
Рекомендации
Следует использовать строку пути, чтобы отображать выбранный путь в файловой системе не углубляя пользователя в технические детали. Можно использовать строку пути, чтобы отображать папки, которые пользователь открывал ранее.
Следует использовать строку пути только когда это действительно необходимо. Во многих программах она не нужна, так как немногие программы требуют таких же функций для работы с файловой системой, как Finder
Кнопка выбора цвета
Кнопка выбора цвета предназначена для отображения цвета, выбранного для текущего объекта. При нажатии на неё появляется диалог выбора цвета (Подробнее о диалоге выбора цвета см. «The Colors Window» (стр. 73)).
В одном окне можно размещать сразу несколько кнопок выбора цвета. К примеру, на странице «Graphic» инспектора Pages есть три кнопки выбора цвета, с помощью которых можно выбрать цвет заливки, линий и теней
--
Кнопка выбора цвета доступна из Interface Builder-а. Чтобы создать его с помощью AppKit, нужно использовать класс NSColorWell
Кнопка выбора изображения
На кнопку выбора изображения можно установить изображение путём перетаскивания
К примеру, на странице «Пароль» в настройках профиля каждому пользователю можно назначить изображение.
--
На некоторых кнопках выбора изображения, таких как кнопка на странице настройки паролей в профилях пользователя изображение должно быть всегда. Если нужно разрешить пользователю убрать изображение (или оставить пустой по умолчанию), нужно убедиться, что команды в меню «Правка» и буфер обмена поддерживает работу с этим типом изображения.
Кнопка выбора изображения доступна из Interface Builder-а. Чтобы создать его с помощью AppKit, нужно использовать класс NSImageView
Календарь
Календарь отображает компоненты, содержащие дату и время, включая час, минуту, день и год
--
Календарь доступен в Interface Builder (и для него можно изменять стиль через страницу «Attributes» в Инспекторе). Чтобы создать его с помощью AppKit, нужно использовать класс NSDatePicker
Внешний вид и поведение
Выпадающий календарь доступен в двух стилях:
* Текстовом. Календарь содержит поля ввода совмещённые с элементом-счётчиком
* Графический. В этом стиле можно увидеть часы и календарь в графическом виде.
При использовании текстового представления можно ввести дату и время с клавиатуры, либо используя счётчики. Если включено графическое представление, пользователь может перемещать стрелки часов и выбирать день, месяц или год на календаре.
Рекомендации
Следует использовать календарь, когда нужно добавить куда-либо дату или время
Следует выбрать наиболее подходящее представление календаря. Текстовое представление подходит, когда недостаточно места, и требуется выбрать особую дату и время. Графический календарь позволяет найти нужный день на календаре, или час на циферблате часов, если такое представление удобно в приложении.
Выпадающее меню команд
Выпадающее меню команд предоставляет функции выпадающего меню в теле окна.
--
Можно создать выпадающее меню через Interface Builder: для этого нужно выбрать объект NSPopUpButton и сменить его тип на Pull Down, используя страницу «Attributes» Инспектора. Чтобы создать выпадающее меню с помощью AppKit, нужно задействовать класс NSPopUpButton
Внешний вид и поведение.
В закрытом состоянии выпадающее меню отображает текст, являющийся заголовком меню. Этим оно также отличается от всплывающего меню, где в закрытом виде отображается выбранная опция (подробнее см. «Pop-Up Menu» (стр. 213)).
В правой части кнопки отображается стрелка, направленная вниз, а в левой части открытого меню могут быть установлены флажки на выбранных пунктах.
Чтобы открыть выпадающее меню, нужно нажать в на него в любом месте. Рекомендации.
Следует помещать в выпадающее меню команды, которые влияют на содержимое содержащего его окна. К примеру, в окне выбора цвета есть команды, которые позволяют изменить содержимое окна выбора цвета.
--
В целом, луче использовать выпадающее меню в окнах, которыми пользуются несколько приложений. К примеру, окно выбора цвета можно вызывать из любого приложения. Команды в выпадающем меню позволяют создавать новые палитры цветов, доступных из окна выбора цвета.
Выпадающее меню не должно содержать слишком много команд. Команд в выпадающем меню должно быть не менее 3-х, но не более 12. [Команды в выпадающем меню должны быть взаимосвязаны.]
Поясняющей надписи к выпадающему меню лучше не делать. Текст внутри закрытого меню должен сам по себе пояснять, какие команды содержатся в меню.
Движок
Движок позволяет выбрать значение, заданное в определённых пределах (виден на рисунке, содержит деления и подписи).
--
Движки доступны в Interface Builder-а. Чтобы создать его с помощью AppKit, нужно использовать класс NSSlider.
Внешний вид и поведение
Движок может быть прямым и круглым.
Движущаяся часть прямого движка называется ручкой, и она может быть со стрелкой или без (круглая). На рисунке ниже — направленная ручка
--
Круглый движок представляет собой круглый регулятор, сходный по функциям с прямым движком: чтобы изменить значение, пользователю нужно повернуть его по или против часовой стрелки.
--
Круглый движок тоже может быть оснащён делениями, которые выглядят как точки, расположенные вокруг движка.
Рекомендации
Движок нужен, чтобы пользователь мог точно подобрать значение, или выбрать значение, попадающее в определённый диапазон. Движок откликается на любое перемещение, что позволяет пользователям увидеть результат в режиме реального времени. К примеру, когда пользователь перемещает движок размера Дока, док меняется в размерах одновременно с перемещением движка.
Движок должен двигаться так, как этого ожидает пользователь. По умолчанию пользователь может прокручивать содержимое «родной» манере Mac OS X v10.7 (содержимое окна прокручивается в том направлении, в каком пользователь двигает палец по трекпаду). Но пользователь может изменить эту настройку, чтобы прокрутка шла в противоположном направлении. Движок должен двигаться в том направлении, в каком пользователь проводит пальцами по трекпаду вне зависимости от данной настройки. К примеру, чтобы увеличить громкость, пользователь будет двигать движок вверх, а чтобы уменьшить — вниз.
При использовании прямого движка желательно использовать ручку со стрелкой, а сам движок снабжать делениями. Деления помогают лучше ориентироваться в выставленном значении. (Заметьте, что при наличии стрелки делений может и не быть.)
Если используется ручка без стрелки, от делений лучше отказаться. Круглая форма ручки без стрелки без делений работает лучше, так как и деления, и стрелка нужны, чтобы помочь выбрать более точное значение.
Желательно подписывать начальное и конечное значение, если движок снабжён делениями. Обозначения могут содержать числа или слова, в зависимости от того, как лучше обозначить границы. Если деления разбивают диапазон на равные доли, каждое деление можно не подписывать. Однако, если пользователю будет сложно определить текущее значение без дополнительных подписей, последние должны быть, чтобы тот не путался. Движок настроек экономии электроэнергии на рисунке ниже — пример, когда обязательно нужно подписывать некоторые значения.
--
К тому же, очень хорошо снабжать движок подписью, которая бы поясняла, какое же значение пользователь с его помощью может изменить.
!!!!!!!
Если возможно, следует подбирать вид движка согласно его назначению. К примеру, прямой движок настроек экономии электроэнергии (на рисунке выше) такой длинный, потому что позволяет выбирать значения как очень маленькие (заставка запустится через 3 минуты), так и очень большие (заставка не запустится никогда), и значение изменяется нелинейно. В этом случае, подразумевается, что значение меняется от малого до бесконечного, и здесь лучше использовать прямой движок.
Противоположный пример — круглый движок в окне инспектора Keynote Graphic на рисунке ниже, с помощью которого можно изменить угол падения тени. Здесь круглый движок не только позволяет отобразить весь возможный диапазон значений в небольшом пространстве, но и напрямую показывает, в каком же направлении будет падать тень.
--
Следует снабжать движок делениями, если они помогут пользователю понять их значения. Желательно отображать деления когда пользователю важно оценить значение, выбранное на движке более точно, либо когда нужно заострить внимание на конкретных значениях. В прочих случаях деления ставить не нужно, чтобы не создавать иллюзию, что одни значения чем-то лучше других (к примеру, без делений сделан движок изменения размера Дока).
Счётчик (кнопки-стрелки).
Счётчик (или кнопки-стрелки) позволяет пользователю увеличивать или уменьшать на единицу значение, которое отображается в находящемся рядом с ним текстовом поле.
--
Текстовое поле может быть открыто или закрыто для редактирования.
Счётчик доступен из Interface Builder-а. Чтобы создать его с помощью AppKit, нужно использовать класс NSStepper
Строка состояния
Строка состояния отображает информацию у нижнего края окна.
--
Заметьте: не рекомендуется использовать строку состояния в приложениях для Mac OS X v10.7 и старше.
Строка состояния доступна из Interface Builder-а. Чтобы создать её с помощью AppKit, нужно использовать подкласс NSScrollView
Также в строку состояния часто помещают команды для быстрого изменения способа просмотра содержимого — к примеру, для выбора страницы или для увеличения. Очень часто строку состояния используют для размещения в ней меню которое будет отображаться в нижней части окна слева от горизонтальной полосы прокрутки.
--
Не следует помещать в строку состояния меню, содержащие команды, влияющие на данные, отображаемые в окне. Для этого есть меню действий (см. «Action Menu» (стр. 215)).
Индикаторы
Индикаторы — это элементы, которые показывают значение чего либо. Чаще всего они не принимают каких-либо команд от пользователя.
Заметьте: все элементы, представленные на данной странице предназначены для установки в основном теле окна, а не в панелях инструментов и рамке окна, о которых можно прочитать в разделе «Window-Frame Controls»
Индикатор процесса
Индикатор процесса отображает состояние выполнения длительного процесса.
Удостоверьтесь, что правильно выбрали место для индикатора. К примеру, в Mail вращающийся индикатор процесса расположен в правой части поля «адресат», когда в Mail идёт поиск и отображение адресов, подбираемых по запросу пользователя. Выбор подходящего места для индикатора нужно, чтобы пользователь быстро нашёл его и определил текущий статус операции. (подробнее о выборе подходящих мест см. «Consistency» (стр. 32)).
Существует 3 типа индикаторов процесса, имеющих разное назначение:
* Индикатор определённой длительности
* Индикатор неопределённой длительности
* Индикатор асинхронного процесса.
Индикатор определённой длительности.
Индикатор определённой длительности предназначен для индикации выполнения процессов, длительность которых приблизительно известна.
--
Индикатор определённой длительности доступен из Interface Builder-а. На странице «Attributes» Инспектора нужно выбрать стиль «Bar» и снять флажок «Indeterminate». Чтобы создать его с помощью AppKit, нужно использовать класс NSProgressIndicator и стиль NSProgressIndicatorBarStyle.
Внешний вид и поведение
Индикатор длительности «заполняется» слева направо. Заполнение происходит автоматически (но можно указать минимальные и максимальные значения вручную)
Обычно пользователь ждёт, что индикатор процесса исчезнет, после того, как он будет заполнен
Использование индикатора определённой длительности
Следует использовать индикатор определённой длительности, когда длительность выполнения операции можно приблизительно определить, а пользователю нужно сообщить, сколько времени осталось до конца. К примеру, можно использовать такой индикатор в процессе преобразования файлов.
Следует убедиться, что заполнение индикатора достаточно точно отражает выполнение процесса. Если он заполняется на 90% за 5 минут, а остальные 10% заполняются те же 5 минут, это очень плохо, потому что вносит путаницу и раздражение, пользователь может подумать, что что-то идёт не так.
Следует убедиться, что индикатор заполнится до конца, прежде чем исчезнет. Если индикатор заполнится раньше, пользователь может удивиться, что процесс завершился слишком быстро.
Желательно оставить возможность прервать или приостановить выполнение процесса. Если запущенный процесс можно прервать, в диалоге процесса должна быть кнопка «Отмена» (на которую назначена кнопка Esc). Если по завершению процесса результат частично будет применён, вместо кнопки «Отмена» нужно использовать кнопку «Стоп». Подробнее о диалогах см. «Dialogs» (стр. 174). Кнопка «Отмена» реализуется через обычную кнопку (см. «Push Button» (стр. 198)). Для кнопки «Стоп» можно использовать специальную кнопку остановки в виде значка (подробнее см. «System-Provided Images for Use as Standalone Buttons» (стр. 269)).
Если уместно, нужно добавить описание к индикатору процесса в диалоге. Так пользователю будет понятно, какой же процесс выполняется. [для английского языка] следует использовать заглавные буквы по правилам предложения (см. «Capitalizing Labels and Text» (стр. 252)).
Индикатор неопределённой длительности
Индикатор неопределённой длительности устанавливается, если длительность выполнения процесса неизвестна.
--
Индикатор неопределённой длительности доступен из Interface Builder-а. На странице «Attributes» Инспектора нужно выбрать стиль «Bar» и оставить флажок «Indeterminate». Чтобы создать его с помощью AppKit, нужно использовать класс NSProgressIndicator и стиль NSProgressIndicatorBarStyle.
Внешний вид и поведение
Индикатор неопределённой длительности представляет собой «резьбу», которая вращается по мере выполнения процесса. В Mac OS X такое поведение выставляется автоматически.
Рекомендации
Следует использовать индикатор неопределённого процесса, когда длительность его выполнения нельзя предугадать.
Когда требуется, можно переключаться с определённого на неопределённый индикатор. Если во время процесса, длительность которого обычно известна возникает ситуация, выполнение команды задерживается на неопределённое время, следует переключить тип индикатора (подробнее об индикаторе определённого процесса см. «Determinate Progress Bar» (стр. 227)).
Желательно использовать индикатор неопределённой длительности в окнах, относящихся напрямую к процессу. К примеру, можно отображать индикатор неопределённой длительности в диалоге открытия файла. Это поможет пользователю понять, какой именно процесс запущен.
Желательно оставить возможность прервать или приостановить выполнение процесса. Если запущенный процесс можно прервать, в диалоге процесса должна быть кнопка «Отмена» (на которую назначена кнопка Esc). Если по завершению процесса результат частично будет применён, вместо кнопки «Отмена» нужно использовать кнопку «Стоп». Подробнее о диалогах см. «Dialogs» (стр. 174). Кнопка «Отмена» реализуется через обычную кнопку (см. «Push Button» (стр. 198)). Для кнопки «Стоп» можно использовать специальную кнопку остановки в виде значка (подробнее см. «System-Provided Images for Use as Standalone Buttons» (стр. 269)).
Если уместно, нужно добавить описание к индикатору процесса в диалоге. Так пользователю будет понятно, какой же процесс выполняется. [для английского языка] следует использовать заглавные буквы по правилам предложения (см. «Capitalizing Labels and Text» (стр. 252)).
Иногда лучше использовать асинхронный индикатор процесса вместо полноразмерного. Для индикации выполнения процесса, относящегося к конкретной части окна, в частности — конкретного элемента управления, либо когда свободного места немного лучше использовать асинхронный индикатор процесса. (подробнее см. «Asynchronous Progress Indicator» (стр. 228)).
асинхронный индикатор процесса
асинхронный индикатор процесса также отображает состояние длительного процесса.
--
асинхронный индикатор процесса также доступен в Interface Builder. Для того, чтобы его использовать, необходимо на странице «Attributes» Инспектора выставить стиль «Spinning», также должен стоять флажок «Indeterminate». С помощью AppKit создать асинхронный индикатор можно, нужно выставить стиль NSProgressIndicatorSpinningStyle объекту NSProgressIndicator.
Внешний вид и поведение
Отображение индикатора происходит автоматически. Асинхронный индикатор всегда вращается с одной скоростью.
Рекомендации
Следует использовать асинхронный индикатор процесса в местах, где свободного места мало, например, внутри полей ввода текста, или рядом с другим элементом управления. Так как индикатор очень компактен, он подходит для отображения состояния процессов, выполняющихся в фоновом режиме, таких, как запрос данных с сервера.
Если может потребоваться включить индикатор определённой длительности, асинхронный индикатор использовать не следует. Асинхронный индикатор процесса не совпадает по размеру с обычным, поэтому в подобных случаях следует чередовать индикаторы нормального размера: определённый и неопределённый. Индикатор определённой и неопределённой длительности совпадают по размеру и форме, поэтому взаимозаменяемы.
Не следует снабжать асинхронный индикатор подписью. Так как асинхронный индикатор появляется, когда пользователь запускает процесс, пояснения не требуются. Если же решено показывать пояснение к индикатору, это должно быть законченное или незаконченное предложение, поясняющее выполняющийся процесс. [Для английского языка] следует использовать заглавные буквы по правилам заголовков (см. «Capitalizing Labels and Text» (стр. 289)). Предложение можно заканчивать многоточием, чтобы сообщить о том, что процесс идёт.
Индикаторы значений
Индикатор значений предназначен для графического отображения значений какой-либо величины. Индикатору уоровней может быть назначен любой цвет, что может помочь пользователю сообщить например о том, что величина выходит за пределы допустимого.
В Mac OS X доступны три вида индикаторов:
* Уровня
* Рейтинга
* Релевантности
Индикатор уровня
Индикатор уровня предназначен для отображения величины, меняющийся в определённых пределах. Он может быть оснащён делениями и подписями (см. рисунок).
--
Индикатор уровня доступен из Interface Builder (стиль его можно менять на странице «Attributes» Инспектора). С помощью AppKit его можно создать, используя объект NSLevelIndicator, к которому можно применить стиль NSDiscreteCapacityLevelIndicatorStyle или NSContinuousCapacityLevelIndicatorStyle.
Внешний вид и поведение
Существуют два вида индикатора уровня:
Непрерывный. Непрерывный индикатор отображается в виде прозрачной трубки, которая заполняется цветом пропорционально отображамой величины.
Дискретный. Дискретный индикатор представляет собой строчку отдельных прямоугольных элементов, количество которых зависит от отображаемой величины.
По умолчанию индикатору назначается зелёный цвет вне зависимости от стиля. Можно назначить также жёлтый или красный цвет.
Непрерывный индикатор может оснащаться делениями и подписями как над, так и под индикатором, позволяющими определить назначение индикатора.
Каждый сегмент дискретного индикатора может быть либо включен, либо выключен, он не может находиться в промежуточном состоянии. При изменении размеров количество сегментов не меняется, меняется их ширина.
Использование индикатора уровня
С помощью индикатора уровня можно отображать информацию об уровне, или значении величины, для которой определено минимальное и максимальное значение.
Следует изменять цвет индикатора, если это поможет получить дополнительную информацию об отображаемой величине. Можно настроить индикатор, чтобы он отображался другим цветом, если значение величины достигает опасного или критического значения. Так как индикатор отображается в понятном и доступном виде, его можно использовать в диалогах и окнах настройки, чтобы пользователь мог оценить значение при беглом просмотре.
Если назначен критический уровень величины, который меньше, чем уровень, требующий оповещения, при уровне величины от минимального до критического следует окрашивать индикатор в красный цвет, от критического, до требующего оповещения — в жёлтый, а до максимального значения — в зелёный. Такое обозначение подходит, когда необходимо оповещать о значениях таких величин, как заряд батареи, или место на диске.
Для величин, для которых не требуется высокой точности индикации можно использовать Дискретный индикатор уровня. Дискретный индикатор округляет величину, так как все сегменты отображаются целыми, без промежуточных состояний, а при изменении длины — растягиваются или сжимаются, чтобы подстроиться под длину индикатора. Поэтому он больше подходит для отображения дискретной величины
Деления подходят только для непрерывного индикатора. Так как количество и ширина сегментов в дискретном индикаторе выполняет похожую функцию, деления ему не нужны (и даже могут внести путаницу). Если размеры сегментов слишком малы и их слишком много, что может потребоваться обозначать некоторые с помощью делений, лучше использовать непрерывный индикатор.
Желательно ставить обозначения в первую очередь на первом и последнем делении. Даже если другие значения не подписаны, подписи помогут пользователю лучше понять назначение индикатора.
Индикатор рейтинга.
Индикатор рейтинга отображается в виде звёзд.
*****
Индикаторы рейтинга доступны из Interface Builder. Для этого нужно установить дискретный индикатор уровня, а потом изменить его стиль на «Rating» на странице «Attributes» Инспектора. Чтобы создать его с помощью AppKit, нужно использовать класс NSLevelIndicator, назначив ему стиль NSRatingLevelIndicatorStyle.
Внешний вид и поведение
По умолчанию индикатор рейтинга отображается в виде звезд.
Звезда не может отображаться частично. Значение, которое отображается с помощью звёзд округляется до ближайшего так, чтобы отображалось целое количество звёзд. Если изменять размеры индикатора, звёзды не растягиваются и не сжимаются, чтобы поместиться в заданной области, расстояние между ними также фиксировано.
Рекомендации
Следует использовать индикатор рейтинга чтобы отображать рейтинг. Так как индикатор рейтинга позволяет упростить сортировку по одному значению, зависящему от всех других значений в категории, например по самым любимым картинкам, частопосещчаемым страницами, его можно использовать как поле в таблице, содержащей множество значений.
Пользователю нужно предоставить возможность выбирать критерии сортировки, если необходимо. Либо можно сделать индикатор рейтинга интерактивным, чтобы пользователь мог изменять положение элемента в таблице, или списке.
Иногда может понадобиться заменить стандартную звёздочку на другое изображение. На место звезды можно установить другое изображение, но оно должно отражать назначение данного рейтинга.
Индикатор релевантности
Индикатор релевантности отображает значение релевантности
--
Ундикатор релевантности доступен из Interface Builder. Чтобы его установить, нужно у индикатора уровня выставить стиль «Relevancy» на странице «Attributes» Инспектора. С помощью AppKit его можно создать, используя объект NSLevelIndicator, к которому можно применить стиль NSDiscreteRelevancyLevelIndicatorStyle.
Индикатор релевантности можно использовать в списках или таблицах. Дело в том, что значение релевантности становится понятным только в сравнеии с другими значениями в таблице.
Элементы отображения текста
Элементы отображения текста позволяют отображать или вводить текст. Поле со списком, которое содержит поле ввода текста и меню не описано в этом разделе — её следует искать в разделе «Combination Box» (стр. 250).
Важно: Элементы, описанные в этом разделе предназначены для использования лишь в основном теле окна, а не для панелей инструментов и рамок окна. Исключение — поле поиска, которое можно устанавливать на панель инструментов. Подробнее об элементов для рамки окна см. «Window-Frame Controls» (стр. 225).
Поле отображения текста
Поле отображения текста отображает текст, изменить который пользователь не может.
--
Поле отображения текста доступно в Interface Builder (под именем Label). Чтобы создать поле отображения текста с помощью AppKit нужно использовать класс NSTextField.
Поле отображения текста имеет два состояния: активное и затенённое.
Следует разрешать выделение текста, когда этот текст может потребоваться пользователю. К примеру, пользователю может понадобиться скопировать сообщение об ошибке, серйиный номер или IP-адрес, чтобы использовать его где-нибудь ещё.
Поле ввода текста
Поле ввода текста позволяет пользователю вводить текст.
--
Поле ввода текста доступно в Interface Builder. Чтобы создать его с помощью AppKit следует использовать класс NSTextField.
Внешний вид и поведение
Поле ввода текста (или поле редактирования текста) представляет собой прямоугольную область, в пределах которой текст можно вводить с клавиатуры и изменять. Введённый текст отображается системным шрифтом в зависимости от размеров поля. Также в поле может быть вставлен так называемый токен, который можно перемещать (подробнее см. «Token Field» (стр. 268)).
По умолчанию, текстовое поле поддерживает фокус ввода, также его можно использовать для ввода пароля.
Рекомендации
Следует использовать поле ввода для получения информации от пользователя.
Следует убедиться в правильности ввода прежде, чем использовать содержимое поле. К примеру, если разрешается вводить только цифры, приложение должно вывыодить предупреждение, когда пользователь вводит символы другого типа. Часть пользователю требуется больше времени на исправление, если пользователь после ввода неверного значения перешёл на другое поле, либо нажал Enter, Return или Tab.
Следует использовать элемент «Поле со списком», если пользователю потребуется вводить текст, либо выбирать готовый вариант из списка. Не следует пытаться делать поле ввода с отдельным списком готовых вариантов для вставки в поле ввода. Подробнее см. «Combination Box» (стр. 250).
Желательно отображать описание к полям ввода. Подписи помогут понять, какую инфрмацию нужно вводить в поле. [для английского языка] желательно соблюадть порядок использования заглавных букв, характерный для заголовков (подробнее см. «Capitalizing Labels and Text» (стр. 289)).
Следует убедиться, что размер поля ввода текста соотносится с предполагаемой длинной вводимого текста. Длина поля ввода текста позволяет пользователю [лучше определять количество необходимого текста для ввода]
Между полями ввода должно быть свободное пространство. Если необходимо использовать более одного поля ввода текста, необходимо оставить достаточно места между ними, чтобы пользователь мог легко увидеть, к какому полю относится его обозначение. Если необходимо расположить больше одного поля ввода в одну строку, следует убедиться, что места между концом одной строки и началом поясняющей надписи другой достаточно. Но обычно поля ввода текста располагают в одну колонку до заполнения формы. Также, размещая несколько полей ввода в одном окне следует позаботиться, чтобы их длина была одинаковой.
Поля токенов
Поле токенов позволяет создать токен, который можно вынести из текста.
--
Поле токена доступно из Interface Builder. Чтобы создать поле с помощью AppKit следует использовать класс NSTokenField.
Рекомендации
В основном поля токенов желательно использовать в полях ввода. Пока пользователь вводит текст в поле ввода, токен позволяет автоматически завершить текст спустя заданное время. Когда пользователь вводит несколько символов, или нажимает Return, введённый текст превращается в токен. (подробнее о поле ввода текста см. «Token Input Field» (стр. 267)).
Когда уместно, следует добавлять контекстное меню в токен (Заметьте, что это необходимо указать в коде). В меню токена можно разместить больше информации о токене и способам работы с ним. В Mail, к примеру, в контекстном меню токена отображается информация о токене (адрес электронной почты, связанный с именем) и команды для работы с данные, ассоциированными с этим адресом в Address Book.
--
Поле поиска
Поле поиска позволяет вводить текст, с помощью которого будет производиться поиск информации (ниже изображено поле, размещённое в панели инструментов).
--
Важно: поле поиска можно располагать как в рамке окна, так и в теле. Подробнее о элементах, предназначенных для размещения в рамке окна см. «Window-Frame Controls» (стр. 225).
Поле поиска доступно из Interface Builder. Чтобы создать поле с помощью AppKit следует использовать класс NSSearchField.
Внешний вид и поведение
Поле поиска похоже на поле ввода текста, но у него округлые края. Пользователь может вводить текст (или править существующий), чтобы уточнить значения, которые он хочет найти. Можно вклюить поиск по мере ввода текста, либо после полного набора.
По умолчанию, в левой части поля поиска отображается значок в виде лупы. В поле поиска может быть также кнопка отмены поиска и очистки поля.
Рекомендации
Следует использовать поле поиска, если в приложении есть поиск.
Следует решить, когда начинать поиск. Можно начинать поиск в процессе ввода, или дождаться, пока пользователь нажмёт Return или Enter. Если поиск производится во время ввода, это выглядить, будто поиск результата уточняется по мере ввода текста. Так должно работать поле поиска, если оно расположено в панели поиска в окне, в содержимом которого и осуществляется поиск. Если же поиск должен начаться после окончания ввода, можно включить автодополнение вводимого текста, позволяющего выбрать вариант из списка слов, начинающихся с тех же букв.
Не следует отображать историю поиска через меню. Нежелательно показывать историю поиска напрямую, так как это может раскрыть персональные данные пользователя. Вместо этого можно включить возможность изменить тип поиска через меню, или определить контекст или направление поиска. Заметье, что панель поиска отлично подходит для подобных целей (см. «Using a Scope Bar to Enable Searching and Filtering» (стр. 173)).
Не следует снабжать поле поиска пояснением. Пользователи и так знают о назначении этого поля, и пояснения не требуются. Исключение — поле поиска в панели инструментов, где подпись «Поиск» должна отображаться, когда пользователь включит отображение подписей ко всем элементам панели инструментов.
Следует отображать заполняющий текст, если он поможет пользователю понять, каким образом происходит поиск в приложении. Заполняющий текст отображается светло-серым цветом от левого края. К примеру, в поле поиска Safari отображается одна из трёх наиболее распространённых поисковых систем (пользователь может выбрать поисковую систму для поиска через это поле).
Прокручиваемый список
Прокручиваемый список представляет собой список значений, использующий полосы прокрутки при отображении содержимого.
--
Прокручиваемый список доступен из Interface Builder. Для этого нужно выбрать элемент «таблица» и подобрать размер так, чтобы отображалась только вертикальная полоса прокрутки, а затем на странице «Attributes» Инспектора нужно выставить 1 в поле количества колонок и убрать флажок «Headers». Чтобы создать его с помощью AppKit следует использовать класс NSTableView.
Внешний вид и поведение
Прокручиваемый список представляет собой прямоугольную область, в которую в одну колонку помещён список. Фон в списке можно делать белым, либо с чередованием белого и светло-голубого цвета.
Заметьте: направление прокрутки в прокручиваемом списке, как и в других полях с прокруткой можно менять через насройки системы.
Пользователь может просматривать прокручиваемый список, не выбирая значений, или нажать на значение, удерживая клавишу Shift, чтобы выбрать несколько значений из списка, или удерживая Command, чтобы не выбирать его. Пользователь может перемещаться по списку с помощью клавиш со стрелками, а также искать значение по первым буквам.
Рекомендации
Следует использовать список, чтобы отображать большое количество значений, одно или несколько из которых пользователь может выбрать. Так как значения нельзя изменять напрямую, для изменения значений нужно подключать дополнительные элементы управления.
Не желательно использовать такой список, если количество вариантов выбора невелико. Прокручиваемый список может не отображать все значения сразу, поэтому может случиться так, что выбрать нужное значение будет сложнее. Если нужно отображать небольшое количество значений, лучше использовать всплывающее меню (см. «Pop-Up Menu» (стр. 245)).
Если длина строки слишком велика, желательно вставлять в её середину многоточие. Если установить многоточие в середину строки, начало и конец останутся видны, и пользователю будет легче понять назначение каждой строки. К примеру, ползователю может потребоваться добавить важную информацию (к примеру, дату) в конец названия документа, и тогда подобная практика поможет увидеть и начало названия, и эту информацию.
Следует использовать чередование цветов, если он поможет пользователю различать пункты списка. К примеру, если строки списка слишком длинные, пользователь может перепутать, к какому значению одной ячейки относится другое, так как они выглядят одинаково. В этом случае чередование цветов поможет не потерять строку в списке при поиске значения.
Желательно, чтобы у списка была подпись. Подпись поможет пользователю определить назначение этого списка.
Контейнеры отображения
Описанные ниже элементы интерфейса позволяют управлять отображением информации или элементов управления в окне. Одни элементы предназначены для того, чтобы скрыть часть функций или информацию, которую не нужно отображать, пока пользователь сам не запросит её отображение, в то время как другие предназначены для организации отображения данных.
Важно: [window-body]
Раскрывающий треугольник
Раскрывающий треугольник отображает или скрывает информацию или элементы управления, ассоциированные с другим элементом в окне.
--
[Interface Builder]
Внешний вид и поведение
По умолчанию треугольник находится в закрытом положении. Когда пользователь нажимает на него, он поворачивается углом вниз, отображая скрытую область.
Рекомендации
Следует использовать треугольник когда требуется, чтобы по умолчанию отображалась простая форма, но при необходимости пользователь мог бы увидеть дополнителные сведения, или элементы управления, доступные в программе.
В целом, желательно использовать треугольник в двух случаях:
* чтобы отображать дополнительные сообщения в диалогах, у которых есть сокращённый и полный вид. К примеру, с помощью треугольника можно скрыть дополнительные сведения о выбранном элементе, которые пользователю каждый раз читать не интересно.
* чтобы отображать элементы в виде иерархического списка (дерева). К примеру, палитра отображения фотографий Mail содержит список категорий фотографий. который раскрывается с помощью треугольника.
--
Треугольник нужно снабдить подписью. Подпись должна показывать, открыт или закрыт контейнер треугольника, и изменяться при изменении его состояния. К примеру, если треугольник закрыт, он может быть подписан «Показать дополнительные настройки», а когда открыт — подпись должна измениться на «Скрыть дополнителные настройки»
Не следует использовать треугольник, чтобы отображать альтернативные методы выбора, ассоциированные с конкретным элементом управления — для этого следует использовать раскрывающийся контейнер с кнопкой (см. «Disclosure Button» (стр. 274)).
Раскрывающийся контейнер с кнопкой
Раскрывающийся контейнер с кнопкой позволяет расширить диалог, или палитру, чтобы отобразить дополнительные альтернативные варианты выбора, относящиеся к конкретному элементу управления.
--
[Interface Builder]
Внешний вид и поведение
Раскрывающийся контейнер с кнопкой в закрытом положении выглядит, как кнопка, на которой нарисован треугольник. По умолчанию контейнер закрыт, и треугольник обращён прямым углом вниз. Когда пользователь нажимает на кнопку, контейнер раскрывается, показывая дополнительные варианты выбора, а треугольник на кнопке поворачивается вверх.
Рекомендации
Следует использовать раскрывающийся контейнер с кнопкой, когда необходимо отобразить дополнительные возможности для выбора, относящиеся к конкретному списку значений.
Не следует использовать этот контейнер для отображения дополнительной информации или функций, либо для организации иерархического списка. В этом случае следует использовать треугольник (см. «Disclosure Triangle» (стр. 273))
Следует размещать кнопку раскрывающегося контейнера рядом с элементом управления, к которому он отностится. Пользователю нужно понять, как раскрытие контейнера отразится на выполнении текущей работы. К примеру, на рисунке ниже приведён диалог экспорта Preview, в котором кнопка раскрытия относится к полю ввода текста, подписанного «Export As», что позволит пользователю понять, что содержимое раскрытого контейнера поможет указать местоположение документа, имя которого введено в этом поле.
--
Список
Список позволяет отображать данные в одну колонку, но можно добавить дополнительную колонку для атрибутов, ассоциированных с данными в списке.
[Interface Builder]
Внешний вид и поведение
Список представляет собой набор данных, расположенных в один столбец и выравненных по левому краю (для систем письма с лева на право). Если данные представлены в виде дерева, дочерние объекты отображаются в той же колонке, а не в новых (для отображения иерархического списка используются раскрывающие треугольники).
В списке могут быть дополнительные колонки, но они предназначены для отображения дополнительных атрибутов элементов списка, отображаемых в основной колонке. В дополнительной колонке не должно быть данных, имеющих другой уровень иерархии. Обычно предоставляется возможность изменять размеры и менять местами колонки, а иногда — добавлять и удалять их.
Когда пользователь нажимает на треугольник, чтобы увидеть дочерние элементы, относящиеся к текущему, список удлинняется, а левая колонка расширяется. Когда левая колонка расширяются, остальные колонки сдвигаются вправо, но их [headigns] и порядок остаётся прежним.
Заметьте: полосы прокрутки у списков, как и у других подобных элементов могут двигаться по направлению двжиения прокрутки на указывающем устройстве, или против, в зависимости от настроек.
Рекомендации
Следует использовать списки, чтобы отображать списки элементов вместе с различными относящимися к ним атрибутами. Если нужен простой список значений, и не требуется отображения дополнителных атрибутов, лучше использовать прокручиваемый список (см. «Scrolling List» (стр. 271)). В списке можно создать отдельную колонку для каждого атрибута значений в списке.
Когда пользователь нажимает на заголовок столбца, желательно сортировать значения по выбранному столбцу. У списка могут быть дополнительные уровни сортировки, но выделяться должна только одна колонка, по которой осуществляется сортировка первого уровня. Если пользователь нажмёт на уже выбранный для сортировки столбец, направление сортировки должно измениться.
Для некоторых колонок в списке может быть назначена возможность правки значений. К примеру, в Finder-е можно изменять имя файла или каталога (левая колонка) из списка файлов, но другие колонки для правки недоступны. Таким образом имя файла можно изменять при любом способе отображения файлов в Finder-е (в виде значков, колонок, или обложек).
Заголовки колонок должны обозначаться существительными, или короткими словосочетаниями, которые будут описывать атрибут или данные. Если названия колонок понятны и просты, пользователь может быстро понять, какая информация содержится в колонке.
Отображение колонками.
Элемент отображения колонкаи предназначен для отображения иерархических данных таким способом, при котором каждый уровень иерархии отображается в отдельной колонке.
[Изображение]
Многоколоночный список доступен в Interface Builder. При использовании AppKit используйте класс NSBrowser, или элемент NSOutlineView в многоколоночном режиме.
Внешний вид и поведение
При отображении списка колонками не отображаются раскрывающие треугольники (см. «Disclosure Triangle» (стр. 273)). Отображаются треугольники, которые также раскрывают список (для того, чтобы список появился, нужно выбрать строку, в которой отображается этот треугольник).
Можно использовать вертикальную прокрутку внутри колонки и горизонтальную между колонками. Когда пользовать нажимает на строку в одной колонке, дочерние элементы (элементы следующего уровня иерархии) появляются в колонке справа от той, в которой находится выбранный элемент. В раскрытой колонке отображаются только элементы следующего уровня иерархии, относящиеся к выбранному элементу. Если в предыдущей колонке выбран элемент, не имеющий дочерних элементов, в следующей колонке могут отображаться дополнительные сведения о нём.
При отображении дерева в виде колонок у колонок не должно быть заголовков, так как это — не таблица. Колонки при отображении дерева содержать выбранные ветви дерева, а не атрибуты объектов.
Заметьте: полосы прокрутки у колонок, как и у других подобных элементов могут двигаться по направлению двжиения прокрутки на указывающем устройстве, или против, в зависимости от настроек.
Рекомендации
Следует использовать отображение в виде колонок когда доступен лишь один способ сортировки, либо только один способ сортировки предполагается предоставить пользователю. Список в виде колонок хорошо справляется с отображением деревьев большой глубины, по которым пользователю приходится часто перемещаться.
Следует отображать первый уровень иерархии (или корень) в колонке слева (при использовании письма с лева на право). Когда пользователь выбирает строку, фокус перемещается в следующую колоноку, содержащую дочерние объекты выбранной строки, либо, если у выбранной строки нет дочерних объектов, должен отображаться так называемый терминальный объект (или лист дерева). Когда пользователь выбирает терминальный объект, может отображаться колонка с дополнительными подробностями о данном объекте.
Размеры колонок лучше разрешать изменять. Это может помочь, когда имена строк слишком длинные и не помещаются в колонку целиком.
Сплиттер
Сплиттер разделяет два или более объекта, таких как колонки в списке, и позовляет пользователю изменять их ширину или высоту (см. рисунок, виден характерный курсор).
--
Сплиттер доступен в Interface Builder (можно выбрать тип сплиттера в меню «Style» на вкладке Attirbutes Инспектора). При использовании AppKit, нужно использовать класс NSSplitView (заметьте, что по умолчанию выбран горизонтальный сплиттер).
Внешний вид и поведение
Сплиттер включает в себя панель сплиттера, расположенную между двумя или несколькими вложенными элементами. К примеру, чтобы отделить друг от друга 5 элементов нужно 4 панели сплиттера. Вложенные элементы обычно называют страницами. Сплиттер позволяет группировать страницы по вертикали или горизонтали, но не в обоих направлениях сразу.
Заметьте: стандартный сплиттер так называемой «нулевой ширины» имеет ширину в 1 точку. Также существует широкий сплиттер, шириной 9 точек, но он используется нечасто.
Панель сплиттера — это активная зона. Проще говоря, над панелью сплиттера курсор меняет вид на курсор перемещения или изменения (о различиях между этими типами курсора см. «Use the Rigth Pointer for the Job» (стр. 55)). У сплиттера нулевой ширины в активную зону входят также два пикселя по сторонам от сплиттера.
Рекомендации
Следует использовать сплиттер, чтобы разделять два или несколько видов содержимого, для которых можно изменять размер.
В основном желательно использовать сплиттер нулевой ширины. Для пользователя такой сплиттер привычен. Можно использовать широкий сплиттер, если необходимо подчеркнуть, что страницы сильно различаются, но это требуется нечасто.
Не следует позволять пользователю потерять сплиттер. Сплиттер нулевой ширины может пропасть, если пользователь двигает его слишком далеко, пока не пропадёт весь вложенный элемент. Чтобы этого не случилось, можно задать минимальный и максимальный размер для каждого вложенного элемента. Другой путь — полностью скрывать вложенный элемент когда его ширина слишком мала — тогда для повторного раскрытия потребуется дополнительная кнопка.
Вкладки
Вкладки позволяют отображать информацию в многостраничном формате.
--
Вкладки доступны в Interface Builder. При использовании AppKit следует использовать класс NSTabView.
Внешний вид и поведение
Вкладки включает в себя также элемент управления отображением (который выглядит как группа кнопок), связанный с контейнерами для других элементов. Каждая кнопка в группе называется вкладкой. Контейнер, связанный с определённой вкладкой называется страницей. Элемент управления вкладками располагается у верхней границы страниц посередине.
Пользователь должен нажать на вкладку, чтобы увидеть страницу, связанную с ней. Несмотря на то, что страницы содержат различные элементы интерфейса, при переключении вкладок размер страниы или окна не должен меняться.
Рекомендации
Следует использовать вкладки, чтобы отображать содержимое на небольшом количестве страниц в окне. В зависимости от размера окна на нём можно располагать от двух до шести вкладок.
Следует использовать вкладки, чтобы предоставить несколько равнозначных страниц, и на каждой должен быть замкнутый набор элементов. Внешний вид данного элемента сильно подчёркивает замкнутость набора. Когда пользователь выбирая вкладку ожидает увидеть похожие, или имеющие общее назначение элементы.
Важно, чтобы элементы с одной страницы не влияли на элементы другой. Изменения, сделанные в одной странице, либо информация, введённая на ней не должны влиять на содержимое других страниц.
Желательно, чтобы между вкладками и границей окна был определённый отступ со всех сторон. Отступы хорошо смотрятся и позволяют установить дополнительные элементы, которые работают для окна в целом (а также на все вкладки). К примеру, в настройках специальных возможностей флажки «включить устройства-помощники» и «Показать состояние специальных возможностей в строке меню» расположены за пределами вкладок, потому что они относятся к настройкам доступа вообще.
В принципе возможно расположить панель вкладок вплотную к границе окна, но это не практикуется.
К какждой вкладке должна быть подпись, которая описывала бы содержащиеся в ней элементы. Хорошо, если пользователь сможет заранее определить назначение каждой вкладки прежде, чем нажмёт на неё. В названиях вкладок желательно использовать существительные, или короткие словосочетания, но иногда можно использовать глаголы. [для английского языка] заглавные буквы в названиях вкладок должны подчиняться правилам заголовков (см. «Capitalizing Labels and Text» (стр. 289)).
Не следует использовать всплывающее меню для переключения вкладок. Так поступать при проектировании современных приложений для Mac OS X. Если нужно уместить большое количество вкладок в пространстве одного элемента, желательно воспользоваться другими средствами.
Рамка
Рамка позволяет визуально разбить окно на несколько областей.
--
Рамки доступны в Interface Builder. При использовании AppKit используйте класс NSBox.
Внешний вид и поведение
Рамки выглядят так же, как и границы вкладок, за исключением отсутствия панели вкладок (см. «Tab View» (стр. 280)). Пользователь не может как-либо взаимодействовать с ней (к примеру, напрямую изменить размер), но ему доступны все элементы управления, расположенные внутри неё.
Рамки чаще всего не содержит заголовка, хотя его можно отобразить поверх верхней границы.
Рекомендации
Группировка с помощью рамок редко используется в современных приложениях для Mac OS X. Их можно использовать, чтобы визуально отделять логически связанные группы элементов.
Не следует вкладывать группы друг в друга. Вложенные группы занимают много места, и к тому же становится сложно различить группы при слишком глубокой вложенности. Гораздо удобнее группировать элементы с помощью отступов.
[для английского языка] заглавные буквы в названиях групп должны подчиняться правилам предложения (см. «Capitalizing Labels and Text» (стр. 289)).
Внимание! Этот перевод, возможно, ещё не готов.
Его статус: идёт перевод
Переведено на Нотабеноиде
http://notabenoid.org/book/21170/69929
Переводчики: tucvbif
Настройки
Готово:
