nobelfaik


Блог Игоря Штанга

Доктор, мой макет не дышит!


Previous Entry Поделиться Next Entry
Переверстка №16. Инструкция голографического стола
nobelfaik
Дарья пишет: Нужно было сделать короткий вариант инструкции для пользователей, в основном это девелоперы в офисах продаж.

О самом продукте: nettlebox.ru Для просмотра используются 3D-очки, по которым система отслеживает положение пользователя относительно экрана. На основе данных о положении зрителя система рассчитывает проекцию на плоскость экрана. Это похоже на рисунки на асфальте, которые выглядят объемными с определенного ракурса, только здесь проекция всё время перестраиваются относительно положения глаз.





Для начала помою окно — сотру линейки и плашки, чтобы проблемам некуда было спрятаться. Нумерация рисунков не нужна. В тексте есть только одна ссылка на рисунок, заменю ее ссылкой на пункт (выделил желтым):




Теперь хорошо видно, что:

  1. На левой странице колонка постоянно меняет ширину и вторгается на территорию другой колонки. Нельзя просто так взять и залезть одной колонкой на другую. Это неаккуратно и немодульно.

  2. На правой странице та же проблема с шириной колонки, но особенно бросаются в глаза беспорядочные отступы. Текст искусственно растянут в высоту.




Начнем с самого простого решения — пусть у всех четырех шагов будет одинаковая конструкция: заголовок, текст, картинка. Выноски «Проверка» и «Важно» стали частью основного текста:




То же самое в два столбца. Текст здесь первичен, поэтому иллюстрации под ним: сначала читаем, потом смотрим на картинку. Прекрасное решение, вот только у второго пункта нет иллюстрации. «Устранение неполадок» тоже в два столбца. Выглядит хорошо, но остается слишком много пустого места:




Если заголовок «Инструкция» заменить на «Настройка», он встанет в один ряд с «Устранением неполадок»: теперь это заголовки одного уровня. Набираю их крупно и светлым шрифтом. Пункт про «Выключение голографического стола» — внизу под шагами.

Чтобы занять больше места на правой странице, выношу заголовки в отдельную колонку. Расставляю акценты в тексте про техническую поддержку: телефон и почту крупно, остальное мелким шрифтом:




Выделяю цифры:




Если вы зануда и считаете, что растягивать стол на два пункта нелогично, вот вам другое решение:




Мне кажется, я передизайнил блок с телефоном и почтой. Надо быть проще:




Выровняю отступы над и под линейками. Поменяю начертание основного текста с light на regular. Обратите внимание, что я собрал побольше воздуха под заголовками «Настройка» и «Устранение неполадок» вместо того, чтобы равномерно размазывать этот воздух по макету:




Было и стало:

Инструкция голографического стола


ПС: Кириллица у шрифта Мириад не очень, да.

См. также: Переверстка №9. Инфографика для YouMagic

Присылайте макеты на переверстку. Описание и правила рубрики

Записи из этого журнала по тегу «переверстка»


  • 1
Очень хорошая переверстка. Спасибо!

Игорь, а почему вы решили оставить синие цифры [1] и оранжевые цифры [2] у шагов 1 и 4? Я считаю, что это — визуальный мусор, который вдобавок еще и сбивает с толку. Ведь шаги настройки уже нумеруются цифрами 1, 2, 3 и 4, а тут еще и внутри шагов такими же цифрами нумеруются элементы изображений.

По шагу 1: не вижу смысла показывать, где находится логотип на экране. Уже достаточно точно сказано: "логотип на экране". Это позволит использовать только синий полупрозрачный кружок, чтобы показать местонахождение кнопки включения. Кстати, с ней тоже не всё так гладко: с какой стороны стола её искать?

Если от ссылок никак не избавиться, то для них нужна другая система ссылок, например, буквы (а, б).

Эта переверстка у меня про конструкцию макета, поэтому я не трогал картинки со стрелками и не переписывал текст. Согласен, что можно решить изящней.

(Анонимно)
Левая полоса плотнее правой.
Ассоциативный ряд: NettleBox - Устранение неполадок. Разработчики будут в восторге.
Это че книга, что ли? Развернуть формат, и все станет на свои места.

  • 1
?

Log in

No account? Create an account