В корзину
Купить в 1 клик
Бесплатная доставка Новой Почтой
Отправка на следующий рабочий день
Отправка на следующий рабочий день
Описание
2012г.
Количество страниц: 480
Разработать хороший интерфейс не так-то просто. Пользователю в наше время требуется программное обеспечение, работа которого прекрасно отлажена, интерфейс радует взгляд, да и в целом пользоваться программой легко. При этом клиенты и менеджеры требуют, чтобы ПО было оригинальным и быстро продавалось. Технологии разработки пользовательских интерфейсов, как для веб-приложений, так и для настольных приложений и мобильных устройств, предоставляют весь необходимый инструментарий, но нигде не говорится о том, как оптимальным образом этот инструментарий использовать. Книга «Разработка пользовательских интерфейсов» рассказывает о лучших достижениях в этой области, о наиболее удачных паттернах проектирования, о самых красивых решениях общих проблем, а также о методах применения абстрактных идей на практике. Каждый рассматриваемый шаблон содержит практические советы, которые вы можете тут же воплотить в жизнь. Для опытных разработчиков книга послужит источником интересных идей, а начинающие найдут в ней те ориентиры в мире интерфейсов, которые помогут не сбиться c пути и сразу же начать применять лучшие паттерны. Второе издание книги значительно переработано с учетом глобальных изменений, происшедших в сфере проектирования взаимодействия, а также дополнено шаблонами проектирования интерфейсов для социальных сетей и мобильных устройств.
Оглавление книги
Предисловие ко второму изданию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Изменения во втором издании . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Небольшие кусочки интерфейса, свободное соединение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 О шаблонах в целом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Прочие коллекции шаблонов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 О шаблонах в этой книге . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Аудитория . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Как организована книга . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Глава 1. Чем занимаются пользователи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Средство, ведущее к цели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Основы исследования пользовательской аудитории . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Мотивация пользователей к обучению . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Safe Exploration (Безопасное исследование) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Instant Gratification (Мгновенное вознаграждение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Satisficing (Разумная достаточность) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Changes in Midstream (Изменения на полпути) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Deferred Choices (Отложенный выбор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Incremental Construction (Пошаговое построение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Habituation (Привыкание) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Microbreaks (Микроперерывы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Spatial Memory (Пространственная память) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Prospective Memory (Проспективная память) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Streamlined Repetition (Организованное повторение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Keyboard Only (Только клавиатура) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Other People’s Advice (Советы других людей) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Personal Recommendations (Личные рекомендации) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Глава2. Организация содержимого: информационная архитектура и структура приложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Общая картина . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Отображение одного объекта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Отображение списка объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Инструменты для создания объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Содействие при выполнении единственной задачи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Feature, Search, and Browse (Новость, поиск и обзор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 News Stream (Лента новостей) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Picture Manager (Диспетчер изображений) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Dashboard (Приборная панель) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Canvas Plus Palette (Холст и палитра) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Wizard (Мастер) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Settings Editor (Редактор настроек) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Alternative Views (Альтернативные представления) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Many Workspaces (Несколько рабочих пространств) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Multi-Level Help (Многоуровневая помощь) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование . . . . . 102 Не теряйтесь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Цена навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Минимизация расстояний . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Навигационные модели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Дизайнерские условности для веб-сайтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Clear Entry Points (Понятные точки входа) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Menu Page (Страница меню) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Pyramid (Пирамида) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Modal Panel (Модальная панель) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Deep-linked State (Глубокая ссылка) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Escape Hatch (Аварийный люк) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Fat Menus (Полные меню) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Sitemap Footer (Карта сайта внизу страницы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Sign-In Tools (Инструменты регистрации) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Sequence Map (Карта последовательности) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Breadcrumbs (Хлебные крошки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Annotated Scrollbar (Полоса прокрутки с примечанием) . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Animated Transition (Анимированный переход) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Глава 4. Организация страницы: компоновка элементов страницы . . . . . . . . 150 Основы компоновки страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Визуальная иерархия: что важнее? что взаимосвязано? . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Визуальный поток: на что смотреть дальше? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Использование динамических дисплеев . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Visual Framework (Визуальная схема) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Center Stage (Центральная сцена) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Grid of Equals (Сетка равных) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Titled Sections (Именованные разделы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Module Tabs (Модульные вкладки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Accordion (Аккордеон) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Collapsible Panels (Свертываемые панели) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Movable Panels (Перемещаемые панели) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Right/Left Alignment (Выравнивание по правому/левому краю) . . . . . . . . . . . . . . . . . . . . . 190 Diagonal Balance (Диагональный баланс) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Responsive Disclosure (Ответное обнаружение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Responsive Enabling (Ответное включение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Liquid Layout («Резиновый» макет) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Глава 5. Списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Сценарии использования списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Обратно к информационной архитектуре . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Несколько решений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Two-Panel Selector (Двухпанельный селектор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 One-Window Drilldown (Погружение в одном окне) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 List Inlay (Список с вкладышами) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Thumbnail Grid (Сетка эскизов) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Carousel (Карусель) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Row Striping (Чередование строк) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Pagination (Разбивка на страницы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Jump to Item (Прыжок к элементу) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Alphabet Scroller (Алфавитная полоса прокрутки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Cascading Lists (Каскадные списки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Tree Table (Древовидная таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 New-Item Row (Строка для нового элемента) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Глава 6. За дело! Действия и команды . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Проверка границ доступного . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Button Groups (Группы кнопок) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Hover Tools (Инструменты, доступные при наведении) . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Action Panel (Панель действий) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Prominent «Done» Button (Заметная кнопка «Готово») . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Smart Menu Items (Умные элементы меню) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Preview (Предварительный просмотр) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Progress Indicator (Индикатор хода выполнения процесса) . . . . . . . . . . . . . . . . . . . . . . . . 275 Cancelability (Возможность отмены) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Multi-Level Undo (Многоуровневая отмена) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Command History (История команд) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Macros (Макрос) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Глава 7. Отображение сложных данных: деревья, таблицы и прочая информационная графика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Основы информационной графики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Организационные модели: как организованы эти данные? . . . . . . . . . . . . . . . . . . . . . . . . 290 Подсознательные элементы визуализации: что с чем связано? . . . . . . . . . . . . . . . . . . . . . 291 Навигация и просмотр: как изучать эти данные? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Сортировка и перестановка: можно ли изменить порядок данных, чтобы увидеть их по-другому? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Поиск и фильтрация: покажите только то, что мне нужно . . . . . . . . . . . . . . . . . . . . . . . . 299 Фактические данные: как узнать их конкретные значения? . . . . . . . . . . . . . . . . . . . . . . . 301 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Overview Plus Detail (Обзор и детали) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Datatips (Всплывающие данные) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Data Spotlight (Прожектор на данные) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Dynamic Queries (Динамические запросы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Data Brushing (Окрашивание данных) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Local Zooming (Локальное масштабирование) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 Sortable Table (Сортируемая таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Radial Table (Круглая таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Multi-Y Graph (График с несколькими осями Y) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Small Multiples (Небольшие образцы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Treemap (Древовидная карта) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Глава 8. Получение данных от пользователя: формы и элементы управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Основы дизайна форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Выбор элементов управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 Списки элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 Текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Числа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 Дата и время . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 Forgiving Format («Великодушный» формат) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 Structured Format (Структурированный формат) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 Fill-in-the-Blanks (Заполнение пропусков) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Input Hints (Подсказки при вводе) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 Input Prompt (Приглашение к вводу) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Password Strength Meter (Измеритель надежности пароля) . . . . . . . . . . . . . . . . . . . . . . . . 378 Autocompletion (Автозаполнение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 Dropdown Chooser (Раскрывающийся селектор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 List Builder (Компоновщик списков) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Good Defaults (Хорошие варианты по умолчанию) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Same-Page Error Messages (Сообщения об ошибках на той же странице) . . . . . . . . . . . . . . 393 Глава 9. Использование социальных сетей . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 О чем не говорится в этой главе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Основы социальных взаимодействий . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Editorial Mix (Редакторский микс) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Repost and Comment (Перенос публикаций и комментарии) . . . . . . . . . . . . . . . . . . . . . . . 409 Conversation Starters (Приглашения к разговору) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 Inverted Nano-pyramid (Инвертированная нанопирамида) . . . . . . . . . . . . . . . . . . . . . . . . . 415 Timing Strategy (График публикации) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Specialized Streams (Специализированные потоки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Social Links (Социальные ссылки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Sharing Widget (Виджет для рассылки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 News Box (Поле новостей) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Content Leaderboard (Доска почета) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 Recent Chatter (Последние комментарии) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 Глава 10. Будем мобильными! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 Сложности мобильного дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 С чего начать разработку мобильного дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 Несколько стоящих примеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 Vertical Stack (Вертикальный стек) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Filmstrip (Фотопленка) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Touch Tools (Инструменты, реагирующие на касание) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 Bottom Navigation (Нижняя навигация) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Thumbnail-and-Text List (Список эскизов и текста) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Infinite List (Бесконечный список) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Generous Borders (Щедрое окаймление) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461 Text Clear Button (Кнопка стирания текста) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Loading Indicators (Индикаторы загрузки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Richly Connected Apps (Тесно связанные приложения) . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 Streamlined Branding (Общий фирменный стиль) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Полезные источники . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Веб-сайты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Книги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Количество страниц: 480
Разработать хороший интерфейс не так-то просто. Пользователю в наше время требуется программное обеспечение, работа которого прекрасно отлажена, интерфейс радует взгляд, да и в целом пользоваться программой легко. При этом клиенты и менеджеры требуют, чтобы ПО было оригинальным и быстро продавалось. Технологии разработки пользовательских интерфейсов, как для веб-приложений, так и для настольных приложений и мобильных устройств, предоставляют весь необходимый инструментарий, но нигде не говорится о том, как оптимальным образом этот инструментарий использовать. Книга «Разработка пользовательских интерфейсов» рассказывает о лучших достижениях в этой области, о наиболее удачных паттернах проектирования, о самых красивых решениях общих проблем, а также о методах применения абстрактных идей на практике. Каждый рассматриваемый шаблон содержит практические советы, которые вы можете тут же воплотить в жизнь. Для опытных разработчиков книга послужит источником интересных идей, а начинающие найдут в ней те ориентиры в мире интерфейсов, которые помогут не сбиться c пути и сразу же начать применять лучшие паттерны. Второе издание книги значительно переработано с учетом глобальных изменений, происшедших в сфере проектирования взаимодействия, а также дополнено шаблонами проектирования интерфейсов для социальных сетей и мобильных устройств.
Оглавление книги
Разработка пользовательских интерфейсов. 2-е изд. Паттерны проектирования взаимодействия. Тидвелл
Предисловие ко второму изданию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Изменения во втором издании . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Небольшие кусочки интерфейса, свободное соединение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 О шаблонах в целом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Прочие коллекции шаблонов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 О шаблонах в этой книге . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Аудитория . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Как организована книга . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Глава 1. Чем занимаются пользователи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Средство, ведущее к цели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Основы исследования пользовательской аудитории . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Мотивация пользователей к обучению . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Safe Exploration (Безопасное исследование) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Instant Gratification (Мгновенное вознаграждение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Satisficing (Разумная достаточность) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Changes in Midstream (Изменения на полпути) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Deferred Choices (Отложенный выбор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Incremental Construction (Пошаговое построение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Habituation (Привыкание) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Microbreaks (Микроперерывы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Spatial Memory (Пространственная память) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Prospective Memory (Проспективная память) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Streamlined Repetition (Организованное повторение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Keyboard Only (Только клавиатура) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Other People’s Advice (Советы других людей) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Personal Recommendations (Личные рекомендации) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Глава2. Организация содержимого: информационная архитектура и структура приложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Общая картина . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Отображение одного объекта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Отображение списка объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Инструменты для создания объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Содействие при выполнении единственной задачи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Feature, Search, and Browse (Новость, поиск и обзор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 News Stream (Лента новостей) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Picture Manager (Диспетчер изображений) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Dashboard (Приборная панель) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Canvas Plus Palette (Холст и палитра) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Wizard (Мастер) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Settings Editor (Редактор настроек) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Alternative Views (Альтернативные представления) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Many Workspaces (Несколько рабочих пространств) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Multi-Level Help (Многоуровневая помощь) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование . . . . . 102 Не теряйтесь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Цена навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Минимизация расстояний . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Навигационные модели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Дизайнерские условности для веб-сайтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Clear Entry Points (Понятные точки входа) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Menu Page (Страница меню) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Pyramid (Пирамида) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Modal Panel (Модальная панель) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Deep-linked State (Глубокая ссылка) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Escape Hatch (Аварийный люк) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Fat Menus (Полные меню) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Sitemap Footer (Карта сайта внизу страницы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Sign-In Tools (Инструменты регистрации) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Sequence Map (Карта последовательности) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Breadcrumbs (Хлебные крошки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Annotated Scrollbar (Полоса прокрутки с примечанием) . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Animated Transition (Анимированный переход) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Глава 4. Организация страницы: компоновка элементов страницы . . . . . . . . 150 Основы компоновки страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Визуальная иерархия: что важнее? что взаимосвязано? . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Визуальный поток: на что смотреть дальше? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Использование динамических дисплеев . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Visual Framework (Визуальная схема) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Center Stage (Центральная сцена) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Grid of Equals (Сетка равных) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Titled Sections (Именованные разделы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Module Tabs (Модульные вкладки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Accordion (Аккордеон) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Collapsible Panels (Свертываемые панели) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Movable Panels (Перемещаемые панели) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Right/Left Alignment (Выравнивание по правому/левому краю) . . . . . . . . . . . . . . . . . . . . . 190 Diagonal Balance (Диагональный баланс) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Responsive Disclosure (Ответное обнаружение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Responsive Enabling (Ответное включение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Liquid Layout («Резиновый» макет) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Глава 5. Списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Сценарии использования списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Обратно к информационной архитектуре . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Несколько решений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Two-Panel Selector (Двухпанельный селектор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 One-Window Drilldown (Погружение в одном окне) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 List Inlay (Список с вкладышами) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Thumbnail Grid (Сетка эскизов) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Carousel (Карусель) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Row Striping (Чередование строк) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Pagination (Разбивка на страницы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Jump to Item (Прыжок к элементу) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Alphabet Scroller (Алфавитная полоса прокрутки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Cascading Lists (Каскадные списки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Tree Table (Древовидная таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 New-Item Row (Строка для нового элемента) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Глава 6. За дело! Действия и команды . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Проверка границ доступного . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Button Groups (Группы кнопок) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Hover Tools (Инструменты, доступные при наведении) . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Action Panel (Панель действий) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Prominent «Done» Button (Заметная кнопка «Готово») . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Smart Menu Items (Умные элементы меню) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Preview (Предварительный просмотр) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Progress Indicator (Индикатор хода выполнения процесса) . . . . . . . . . . . . . . . . . . . . . . . . 275 Cancelability (Возможность отмены) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Multi-Level Undo (Многоуровневая отмена) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Command History (История команд) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Macros (Макрос) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Глава 7. Отображение сложных данных: деревья, таблицы и прочая информационная графика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Основы информационной графики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Организационные модели: как организованы эти данные? . . . . . . . . . . . . . . . . . . . . . . . . 290 Подсознательные элементы визуализации: что с чем связано? . . . . . . . . . . . . . . . . . . . . . 291 Навигация и просмотр: как изучать эти данные? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Сортировка и перестановка: можно ли изменить порядок данных, чтобы увидеть их по-другому? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Поиск и фильтрация: покажите только то, что мне нужно . . . . . . . . . . . . . . . . . . . . . . . . 299 Фактические данные: как узнать их конкретные значения? . . . . . . . . . . . . . . . . . . . . . . . 301 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Overview Plus Detail (Обзор и детали) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Datatips (Всплывающие данные) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Data Spotlight (Прожектор на данные) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Dynamic Queries (Динамические запросы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Data Brushing (Окрашивание данных) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Local Zooming (Локальное масштабирование) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 Sortable Table (Сортируемая таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Radial Table (Круглая таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Multi-Y Graph (График с несколькими осями Y) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Small Multiples (Небольшие образцы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Treemap (Древовидная карта) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Глава 8. Получение данных от пользователя: формы и элементы управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Основы дизайна форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Выбор элементов управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 Списки элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 Текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Числа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 Дата и время . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 Forgiving Format («Великодушный» формат) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 Structured Format (Структурированный формат) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 Fill-in-the-Blanks (Заполнение пропусков) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Input Hints (Подсказки при вводе) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 Input Prompt (Приглашение к вводу) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Password Strength Meter (Измеритель надежности пароля) . . . . . . . . . . . . . . . . . . . . . . . . 378 Autocompletion (Автозаполнение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 Dropdown Chooser (Раскрывающийся селектор) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 List Builder (Компоновщик списков) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Good Defaults (Хорошие варианты по умолчанию) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Same-Page Error Messages (Сообщения об ошибках на той же странице) . . . . . . . . . . . . . . 393 Глава 9. Использование социальных сетей . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 О чем не говорится в этой главе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Основы социальных взаимодействий . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Editorial Mix (Редакторский микс) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Repost and Comment (Перенос публикаций и комментарии) . . . . . . . . . . . . . . . . . . . . . . . 409 Conversation Starters (Приглашения к разговору) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 Inverted Nano-pyramid (Инвертированная нанопирамида) . . . . . . . . . . . . . . . . . . . . . . . . . 415 Timing Strategy (График публикации) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Specialized Streams (Специализированные потоки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Social Links (Социальные ссылки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Sharing Widget (Виджет для рассылки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 News Box (Поле новостей) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Content Leaderboard (Доска почета) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 Recent Chatter (Последние комментарии) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 Глава 10. Будем мобильными! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 Сложности мобильного дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 С чего начать разработку мобильного дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 Несколько стоящих примеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446 Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 Vertical Stack (Вертикальный стек) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Filmstrip (Фотопленка) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Touch Tools (Инструменты, реагирующие на касание) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 Bottom Navigation (Нижняя навигация) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Thumbnail-and-Text List (Список эскизов и текста) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Infinite List (Бесконечный список) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Generous Borders (Щедрое окаймление) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461 Text Clear Button (Кнопка стирания текста) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Loading Indicators (Индикаторы загрузки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Richly Connected Apps (Тесно связанные приложения) . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 Streamlined Branding (Общий фирменный стиль) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Полезные источники . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Веб-сайты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Книги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475