2012г.
Разработать хороший интерфейс не так-то просто. Пользователю в наше время требуется программное обеспечение, работа которого прекрасно отлажена, интерфейс радует взгляд, да и в целом пользоваться программой легко. При этом клиенты и менеджеры требуют, чтобы ПО было оригинальным и быстро продавалось. Технологии разработки пользовательских интерфейсов, как для веб-приложений, так и для настольных приложений и мобильных устройств, предоставляют весь необходимый инструментарий, но нигде не говорится о том, как оптимальным образом этот инструментарий использовать. Книга «
» рассказывает о лучших достижениях в этой области, о наиболее удачных паттернах проектирования, о самых красивых решениях общих проблем, а также о методах применения абстрактных идей на практике. Каждый рассматриваемый шаблон содержит практические советы, которые вы можете тут же воплотить в жизнь. Для опытных разработчиков книга послужит источником интересных идей, а начинающие найдут в ней те ориентиры в мире интерфейсов, которые помогут не сбиться 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
