Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Guide04

199 views

Published on

  • Be the first to comment

  • Be the first to like this

Guide04

  1. 1. http://sk.ru UI guidelines
  2. 2. СИСТЕМА ПРЕДСТАВЛЕНИЯ Д АННЫХ В ГИПЕРТЕКСТЕВ этом руководстве • Типографика. • Оформление списков: людей, событий,описываются основные компаний, новостей. Пагинаторы. • Виды ссылок и правила их оформления.элементы веб страниц и • Буллиты.способы их использования. • Оформление списков. • Примеры верстки текстовых • Фичуред элементы.Основано на twitter/bootstrap. материалов • Правила оформления пользовательских карточек. • Кнопки и формы • Выносные комментарии • Чекбоксы и радиокнопки и правила представления экранов настройки. • Выносные данные для аггрегации Хлебные крошки и навигация в Оформление различных типов данных: близлежащих элементах. блоги, статьи, отчеты, события и подобные. • Правила по созданию новых разделов и места их интеграции. • Таблицы • Правила связи выносных элементов • Галереи и иллюстрации контента с главной страницы. Правила • Рыбные стилеобразующие оформления текущих соц.аккаунтов иллюстрации. и инструкции + элементы для оформления последующих. • Диалоги ожидания загрузки. • Инструментарий редактирования • 404 страница для сообщества и для и представление элементов головного сайта с входом и выходами. администрирования. ( Должна понимать опечатки в URL и предлагать переходы) • Правила использования иконок и пиктограмм. • Структуры навигации для нескольких уровней вложенности (Верхний • Наборы иконок и пиктограмм для уровень, внутри разделов и тд) типовых задач. (Аналог helveticons подготовленный для использования • Правила адаптивной реструктуризации любой структурой в векторе + представления в условиях маленьких растровые) экранов и мобильных устройств
  3. 3. ТИПОГРАФИК АКак верстать текст?Обычный текстовый блок состоит из h1. Размер 1 (42пикс.)двух сущностей: заголовка и текста.Размер шрифта, кегль для текстового h2. Размер 2 (24 пикс.)блока: 14, в редких случаях 13 или 12. h3. Размер 3 (18 пикс.)Подсказки и тизеры допустимонабирать 10, 11 или 18 кеглем. h4. Размер 4 (14 пикс.)Рабочие шрифты: pt sans, helvetica или h5. Размер 5 (12 пикс.)arial. H6. РА ЗМЕР 6 (10 ПИКС.)Большие новости достойны БОЛЬШИХЗАГОЛОВКОВ в несколько строк.Можно набирать и очень большие заголовки когда это нужно. Главное учитывать то, что вес заголовка всегда долженсоставлять не более 25% от веса текстового блока. Поэтому дальнеший текст не имеет особого смысла и написан толькодля того, чтобы уравновесить пропорции текстового блока к заголовку.Междустрочное расстояние 16,8 пикслей. Кернинг оптический. После абзаца необходимо делать дополнительный отступв 10 пикселей.
  4. 4. ВИДЫ ССЫЛОК И ПРАВИЛА ИХ ОФОРМЛЕНИЯ.« Ссылки всегда должны быть подчеркнуты, даже если это кажется кому-то некрасивым. Заголовок ссылка Нельзя подчеркивать на вебе текст, который не является ссылкой. Подсвеченный заголовок Убирание подчеркивания у ссылки при подведении курсора — глупость. Заголовок ссылка Активные ссылки всегда должны быть синего Подсвеченный заголовок цвета (как исключение — черные или темно- серые). Посещенные ссылки должны быть сиреневого цвета. Ссылки других цветов Активный заголовок ссылка гарантированно сбивают с толка читателя. Цвет, отведенный для ссылок, не должен использоваться для других элементов. Хорошо и правильно подсвечивать ссылку Активный заголовок ссылка красным или оранжевым при подведении к ней курсора. Как вариант — подсвечивать фон или рамку вокруг. Обычная ссылка Пунктирная ссылка означает, что нажатие на текст произведет некое действие (откроется Посещенная ссылка калькулятор, приедет подсказка, раскроется Подсвеченная ссылка, наведена мышь подробность), а повторное нажатие вернет все в исходное состояние. Пунктирные ссылки не должны переносить Техническая ссылка — якорь или переключатель контентного поля читателя на другую страницу. А сплошное Техническая ссылка — подсвеченная подчеркивание, в свою очередь, нельзя использовать для временно вызываемых Техническая ссылка — включенная элементов. Проверка дизайна на правильность проста: если Альтернативная техническая ссылка зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, — перед нами хороший сайт. Это правило перевешивает все остальные. » Альтернативная активная техническая ссылка Ководство § 171. Правила оформления ссылок Альтернативная недоступная техническая ссылка Артемий Лебедев
  5. 5. ОФОРМЛЕНИЕ СПИСКОВМногоуровневые списки В остальных случая списки Если в списке подразумеваются Списки могут состять из ссылок.с иерархией крайне не можно использовать как удобный фаилы необходимо вместо Лучше всего к ссылкам даватьрекомендуется использовать инструмент показа глубины буллитов ставить иконки комментарии, как в блочномв формах фильтрации и как вложенности данных. формата вложений. списке.элемент навигации если уровнейвложенности более 2. Заголовки примеров — h2. Размер 2 (24 пикс.) Обычный текст набора и жирный (14 пикс.) Средний шаг отступа от левого края (10 пикс.) Цвет выносных элементов списка #666666
  6. 6. ПРИМЕРЫ ВЕРСТКИ ТЕСТОВЫХ МАТЕРИА ЛОВ Исходник в формате psd (Adobe Photoshot) — text-usage.psd
  7. 7. НАВИГАЦИЯ — ШАПК А С АЙТА Исходник в формате psd (Adobe Photoshot) — hdr-def-sk-state-1.psd Исходник в формате psd (Adobe Photoshot) — hdr-def-sk-state-2.psdИсходник в формате psd (Adobe Photoshot) — hdr-def-sk-state-3.psd
  8. 8. НАВИГАЦИЯ — ШАПК А С АЙТА Исходник в формате psd (Adobe Photoshot) — hdr-def-sk-state-4.psd Исходник в формате psd (Adobe Photoshot) — hdr-def-sk-state-5.psdИсходник в формате psd (Adobe Photoshot) — hdr-def-sk-state-6.psd
  9. 9. НАВИГАЦИЯ — ШАПК А РА ЗДЕ ЛА С АЙТА Исходник в формате psd (Adobe Photoshot) — tabs.psd Исходник в формате psd (Adobe Photoshot) — сustom-hdr-notice.psd

×