Для квалифицированного реконструктора страниц очень важна способность «восстановить черновой дизайн веб-страницы». Необходимо сосредоточиться на том, может ли страница быть точно такой же, как и черновой вариант дизайна. Иногда детали могут определить успех или неудачу, и можно сказать, что разница между успехом и неудачей составляет тысячи миль. Особенно при создании бутик-проекта.
1. Визуальные характеристики
Иногда черновики дизайна, которые мы получаем от дизайнеров, не обязательно точны. Например: текст заголовка одного и того же типа имеет размер 13PX в одном месте и 14PX в другом; страница имеет несколько цветов шрифта. невооруженным глазом, но фактическое значение цвета разное; высота строки каждого абзаца разная; одно и то же всплывающее окно имеет несколько размеров и т. д. В этом случае мы не можем восстановить черновой вариант дизайна. восстановления эскизного проекта.
Чтобы снизить затраты на общение с дизайнером, инженеру-рефакторингисту приходилось на раннем этапе убеждать дизайнера составить визуальное задание для всего сайта, записать некоторый публично согласованный контент в виде документа и строго выполнять его. это на более позднем этапе.
Дизайнерам лучше всего задать визуальные характеристики перед началом создания страницы. Это может значительно снизить затраты на совместную отладку страницы. Кроме того, при создании страниц на ранней стадии можно создать унифицированные спецификации для шаблонных элементов, таких как шрифты, значки, границы, цвета фона, интервалы и т. д., а также создать унифицированные интерфейсы классов. Как только спецификации дизайна будут зафиксированы на более позднем этапе, любые изменения будет легко внести.
2. Аннотации к эскизам дизайна
должны требовать от дизайнеров отмечать в черновике дизайна различные интервалы, ширину, специальные шрифты, специальные цвета шрифтов, специальную высоту строк и т. д. Таким образом, при создании страницы нет необходимости проводить повторные измерения. и восстановление значительно повышается. Точность эскизного проекта также снижает затраты на общение с дизайнером и затраты на совместную доводку после производства. Вот пример:
3. Инструмент линейки веб-страниц (FastStone Capture).
Компас для навигации, термометр для врачей, рулетка для плотников... Во многих профессиях есть свои специальные измерительные инструменты, поэтому, когда мы делаем страницы, мы также должны измерять расстояние, ширину, высоту, цвет... и другие данные, тогда должен ли при производстве страниц также быть профессиональный инструмент для точного измерения страниц?
Вот программное обеспечение, которое может точно измерять веб-страницы, FastStone Capture. Можно сказать, что, хотя программное обеспечение маленькое, в нем есть все? самое необходимое.
4. Простое руководство по FastStone Capture
1. Откройте инструмент измерения.
Нажмите на значок в правом углу панели управления.
, откройте и выберите «Экранная линейка», на экране отобразится линейка, как показано ниже. Для облегчения измерения перспективы линейку можно установить на прозрачную или полупрозрачную:
2.
Для горизонтального измерения линейка по умолчанию располагается горизонтально. Вы можете нажимать клавиши вверх, вниз, влево и вправо на клавиатуре, чтобы переместить линейку на один пиксель. Щелкните мышью по шкале линейки. В правом верхнем углу экрана появится увеличительное стекло, чтобы отобразить область измерения. Перетащите мышь, чтобы точно измерить длину уровня. Перетащите два горизонтальных края линейки, чтобы удлинить или укоротить ее.
3. Для измерения по вертикали
нажмите значок кнопки, показанный на линейке.
Чтобы сделать линейку вертикальной: Или дважды щелкните линейку, чтобы сделать линейку вертикальной.
Методы измерения по вертикали и по горизонтали схожи, поэтому я не буду их здесь повторять.
4. Чтобы измерить точку-точку,
щелкните значок на линейке:
, лупа в правом верхнем углу экрана отобразит длину линии.
С помощью мыши перетащите прямую линию из точки А в точку Б и измерьте расстояние между двумя точками.
5. Измерение прямоугольника
К сожалению, в программе нет угольника или циркуля, что затрудняет измерение прямоугольника. Не волнуйтесь, вместо этого вы можете использовать другие методы. Здесь мы используем функцию скриншота.
Нажмите на значок линейки
Закройте линейку, вернитесь на панель управления программой и щелкните третий значок.
(Захват прямоугольной области):
перетащите мышь, чтобы измерить прямоугольный модуль веб-страницы, который вы хотите измерить. В увеличительном стекле в верхнем левом (или правом) углу экрана отобразится w*h=значение*значение, w is. ширина, а h — высота.
6.
Нажмите значок в правой части панели управления программным обеспечением, чтобы выбрать цвет веб-страницы:
, появится раскрывающийся список, выберите «Выбор цвета экрана», появится значок пипетки, переместите координаты, указанные пипеткой, и щелкните, чтобы получить значение цвета в любом месте экрана.