Я фронтенд, который любит подбрасывать и проектировать, и я всегда рекламировал, какое потрясающее восстановление моей страницы. Как сделать восстановление страницы? У меня есть один из самых дурацких, но эффективных методов, который состоит в том, чтобы сохранить черновик дизайна прямо как изображение, использовать его в качестве фонового изображения, а затем скопировать черновик дизайна для разработки. Я чувствую себя таким талантливым. Есть ли восстановление на уровне пикселей?
▲ сделал, чтобы увидеть эффект смещения пикселя на два
Но слишком молод, слишком прост. Хотя этот метод обеспечивает восстановление страницы на уровне пикселей, каждый интервал должен быть измерен, как и рукоделие, что значительно увеличивает временные затраты.
А в таком отказоустойчивом месте, как веб-страница, даже если я выровняю каждый пиксель в браузере «Chrome», нет гарантии, что рендеринг веб-страницы будет столь же идеальным в других браузерах. Очень вероятно, что интервал на странице может быть 2px, 3px, 6px, 15px...управление кодомЭто тоже фатальная проблема.
Говоря об этом, я должен упомянуть разницу между дизайнерами и программистами. Проблема, заключающаяся в том, что расстояние трудно поддерживать, не соответствует действительности с точки зрения дизайнера. Дизайнеры не заботятся о конкретной ценности элементов и расстоянии между ними, пока они расположены вместе для визуального баланса, пока они красивы, дизайнерская задача фактически выполнена.
▲ Траектории движения головы совершенно разные при работе дизайнеров и программистов
"Картинка с galshir.com"
Дизайн и код по своей сути являются языками из разных измерений. Код фокусируется на конкретных ценностях и логике, а дизайн больше фокусируется на эстетике и балансе. Именно из-за этой разницы в концепции и родились пришельцы в промежутке между проектированием и разработкой —внешний интерфейс. Хотя текущий интерфейс имеет серьезную тенденцию к развитию, это не означает, что интерфейс больше не может удерживать наш дизайн, охватывая код. На мой взгляд, передняя часть должна быть больше похожа на спроектированную и разработаннуюпереводчик.
1. Дивергенция или конвергенция
Передний конец в трещине обязательно должен быть левым или правым? Всякий раз, когда у меня есть вопросы по внешнему интерфейсу, я всегда могуУчитель ЧжанНайдите резонанс в блоге «Front-end Daniel Zhang Xinxu». Эта передовая идея учета как кода, так и дизайна напоминает мне статью в блоге г-на Чжана «Обмен опытом макета веб-страницы CSS на основе 20 пикселей».
▲ Принцип макета веб-страницы CSS на основе 20 пикселей
Базовая высота строки веб-страницы по умолчанию составляет 20 пикселей, а высота компонентов пользовательского интерфейса — 40 пикселей.
Это делает интервалы между большими модулями и интервалы между мелким текстом и пробелами на наших веб-страницах, будь то интервалы по горизонтали или по вертикали, все они стандартно кратны 5 пикселям. Так что фактическая высота всех наших модулей size кратна 10 "padding-top + line-height * количество строк + padding-bottom".
Мы используем 20 пикселей в качестве эталона для макета и дизайна компонентов пользовательского интерфейса, который стандартизирует интервалы наших веб-страниц, что незаметно делает макет наших страниц более профессиональным.
Просто говоря, если дизайнер - это 5 кратных 5 кратных, узкие места 5px, общий 10px, немного 20px. Затем время предельной инструмент измеряет время, и даже последний передний конец совершенно без измерений. Если вы посмотрите на свое мясо, вы знаете, насколько расстояния.
Для дизайнеров, если существует фиксированное отношение интервалов, они могут создавать вспомогательные линии или сетки на основе этого правила, и им нужно только выровнять эти сетки и вспомогательные линии в макете набора.Дизайнерская часть рабочей нагрузки.Интервал сходимостиДа, я встречался раньшеуправление кодомПроблема также решается.
Но идеал очень полный, а реальность очень тощая, потому что даже у одного и того же дизайнера в разных проектах разные интервалы и соотношения баланса. Как только вы берете на себя проект и этот конфликт, то норма бесполезна. Но есть один момент, который, я думаю, можно глубоко изучить, то есть после нормализации межстраничного интервала соответственно будет улучшена эффективность нашего фронтенда и дизайна. Хотя эта концепция конвергенции, кажется, противоречит дивергентному мышлению дизайна.
Но должен ли дизайн быть расходящимся?
Рассмотрим четыре основных принципа дизайна:
В сравнении"Контраст"
повторить"Репетиция"
выровнять"Выравнивание"
близость"Близость"
Можно видеть, что сама концепция дизайна расходится, но спецификация в конечном итоге остановится на конвергентном выводе.
Зачем нужно регулировать это дело? По-моему, это означает, чтоунаследовала такжеСовместная работа. Как самостоятельный мастер искусства, вам не нужно регулировать это дело, вы можете просто плыть по ветру и любить свободу. Но в рабочей среде, которая делает упор на agile-разработку, возможно, нормы могут отражать ценность «1 + 1 > 2» больше, чем свобода.
Существуют ли какие-либо существующие решения, которым отдают предпочтение как дизайнеры, так и разработчики?
2. Макет сетки "Сетка CSS"
Что касается этого вопроса, первое, что пришло мне в голову, — это макет сетки в интерфейсе. Для конкретной истории разработки вы можете самостоятельно использовать Baidu, если знаете, что источником этого изначально был дизайн под названием «Сетчатый дизайн».концепт дизайна, и, наконец, широко используется в веб-дизайне.
▲ Принцип компоновки сетки
Здесь я кратко представляю этот принцип. Макет сетки состоит в том, чтобы разделить ширину веб-страницы на несколько равных частей, а затем использовать код для максимально возможного достижения различных комбинаций между различными столбцами, обычно разделенными на 12 равных частей или 24 равных части, потому что 12 и 24 могут быть делится на обычные 2-х, 3-х, 4-х и т.д. Компьютерная версия нашего «Веб-новеллы» использует обычную сетку из 12 столбцов.
▲ Схема компоновки боковой сетки Webnovel для ПК
Этот растеризованный дизайн сохраняет нетронутым весь макет нашей страницы «Webnovel» для ПК.Объединить, показывая, что мы должныПрофессиональная надежность.在设计工具中调出这样辅助框之后，设计师在布局网页的时候只需要将模块对齐到这些矩形框就好，效率提升了有没有？
Для переднего конца планировка сетки уже оченьЗрелыйрешение. Всего лишь небольшая настройка параметров в препроцессоре CSS позволяет сгенерировать весь код макета. В сочетании с компонентами пользовательского интерфейса, предоставленными предыдущими дизайнерами, даже если дизайнера нет, внешний интерфейс может быстро создать прототип страницы на основе интерактивного черновика.
Интерфейсное решение, которое нравится как дизайнерам, так и разработчикам и сразу достигает эффекта «1 + 1 > 2». Это настоятельно рекомендуется для гибких команд.
3. Стандартизируйте расстояние между страницами
Фактически, макет сетки решает только проблему широты горизонтального макета на веб-странице, и он по-прежнему бессилен для некоторых деталей на веб-странице, которые потребляют основное время измерения внешнего интерфейса. Поэтому я общался с дизайнером дальше, надеясь откопать в нашем проекте другие вещи, которые также можно стандартизировать.
▲ Блочная модель, влияющая на макет во внешнем интерфейсе
При разработке станции "Webnovel" M я обнаружил, что расстояние в эскизе дизайна имеет аналогичное правило, но это правило не 20 пикселей, предложенных г-ном Чжаном, а 18 пикселей. После общения с дизайнером мы решили объединить некоторые расстояния, близкие к кратным 9, но отличающиеся всего на два пикселя, в кратные 9. С этим единым законом естественный код также прост.
▲ Основано на базовом коде с интервалом 9 пикселей.
До сих пор, расстояние между элементами, я могу напрямую применить приведенный выше код интервала. При построении страницы нет необходимости думать или измерять, а напрямую использовать «Конечно, этот код слишком велик для основных параметров, что увеличивает сложность расчета. Может быть, лучше заменить его на 9px и это будет улучшено в будущем».
▲ Интервал слева и справа желтой области составляет 18 пикселей, а нижний интервал — 9 пикселей.
Четыре, стандартизация межстрочного интервала
Теперь, когда я попробовал сладость в своей первой попытке, я, естественно, хочу немного расширить этот метод. Потому что есть другой интервал, более сложный, а именноМежстрочный интервал. Межстрочный интервал относится к категории текста, а не к интервалу между элементами, но он также влияет на интервал между элементами. Это звучит немного запутанно, например.
▲ Сравнительная таблица преобразования внешнего вида визуального черновика
Расстояние между текстом в «левой части изображения выше» и обложкой книги внизу в нашем проекте дизайна составляет 14 пикселей, а высота строки и размер текста такие же, как 12 пикселей. Возможно, вы заметили, что символ Y в правой части текста на самом деле превышает высоту строки нашего контейнера. Переднему интерфейсу нужно сделать так, чтобы эта строка текста была скрыта для отказоустойчивости, но из-за того, что маленький хвостик символа Y превышает высоту, он будет обрезан на один пиксель.
Чтобы обойти эту проблему, я вручную изменю высоту строки в этом месте на 16 пикселей. Чтобы не нарушать компоновку дизайна, нижний интервал, естественно, необходимо уменьшить до 12 пикселей, «верхний интервал должен быть отрегулирован соответствующим образом». Через весь этот процесс видно, что это всего лишь вопрос межстрочного интервала, а внешний интерфейс требует больших усилий.
Но для дизайнеров в контексте их инструментов дизайна изменение интервала одного текста не повлияет на другие соседние элементы. На переднем конце нам нужно вручную рассчитать и изменить. Конечно, если есть унифицированная спецификация интервалов, этой проблемы можно легко избежать.
Что касается межстрочного интервала, здесь может быть необходимо дать дизайнеру популярную науку.Обычно внешний интерфейс устанавливает соотношение высоты строки по умолчанию для всего текста. Здесь предполагается, что высота строки в 1,5 раза больше высоты текста.Естественно, высота строки нашего 12px текста равна 18px"12px*1.5", а высота строки 16px текста равна 24px"16px*1.5 " ... и так далее. Если дизайнер также следует этой спецификации, то для фронтенда нужно задать только размер шрифта, а высота строки будет естественно выровнена. Значительно снижает сложность межстрочного интервала внешнего интерфейса. Однако следует отметить, что когда размер шрифта некоторых шрифтов слишком велик, если высота строки также в 1,5 раза больше, разрывы строк будут казаться очень разнесенными. В настоящее время вам необходимо указать высоту строки отдельно для этого типа текста.
▲ Спецификация интервалов между названиями станций Webnovel M
В начале спецификации дизайна дизайнеры и передняя часть договорились разработать спецификацию межстрочного интервала, подходящую для текущего проекта. Поскольку передняя часть непосредственно участвует в настройке спецификации, рабочая нагрузка по измерению расстояния на более позднем этапе соответственно снижается.
5. Избегайте нечетных чисел
просить:В веб-среде, если элемент шириной 5 пикселей должен располагаться по центру по горизонтали в контейнере шириной 20 пикселей, как он должен быть выровнен?
отвечать:Бог тоже не знает!
▲ Разница в отображении элемента размером 5 пикселей в контейнере размером 20 пикселей.
В среде веб-страницы механизмы обработки различных браузеров и различных оконечных устройств различаются для вышеуказанных проблем. Некоторые перекошены влево, некоторые перекошены вправо, а некоторые некоторое время перекошены влево и вправо, что приводит к ряду проблем, таких как дрожание страницы или неровные края изображения и даже нарушение макета. Но часто клиентские программы должны использовать код для их исправления, что явно против неба, а фронтенд действительно не прост.
Нечетные числа крайне неблагоприятны для рендеринга в браузере. Это похоже на компьютерный языкбинарныйЯзык неразрывно связан. Изображения на наших веб-страницах также следуют такому правилу: будь то Jpg, Png или Gif, они будут преобразованы в двоичную форму для хранения и отображения.
▲ Сравнительная таблица сжатия изображений Jpg «Коэффициент сжатия PS 60%»
Видно, что размер изображения «1920*800» меньше, чем размер изображения «1920*799» при той же степени сжатия. Поскольку формат сжатия с потерями Jpg рассчитывается и отображается в базовой единице 8px. Изображение высотой 800 пикселей может отображать лучшую детализацию, чем изображение высотой 799 пикселей с меньшим объемом памяти.
Напишите меньше кода, чтобы сделать больше событий, это не наши программисты искали его? Но дизайнер нужна лишь небольшая заметка в дизайне веб-сайта, вы можете помочь нам избежать сложных проблем совместимости деталей.
6. 8-точечная сетка
Чтобы более полно продемонстрировать преимущества нормализации в процессе веб-разработки, мне нужно более систематическое решение. Ввиду упомянутых выше точек нормализации,8Этот номер понравился мне, как ребенку, отобранному для вербовки. 8 — это не только степень числа 2, но и основа алгоритма сжатия Jpg Размер шрифта по умолчанию в большинстве браузеров также составляет 16 пикселей «2 * 8», а базовый размер веб-иконок также кратен 8. Все это кажется таким случайным и так хорошо сочетается.
▲ Изображение передано Эллиотом Далем.
После этой идеи. Искал в интернете, и действительно есть техническое задание на основе 8:
8-точечная сетка от Брина Джексона
" https://spec.fm/specifics/8-pt-grid";
Существуют даже плагины для Sketch, основанные на этой спецификации дизайна:
Плагин для создания мягких сеток с 8 точками на основе Sketch
"эскиз app.rocks/secretariat/sketch…";
▲ Размер компонента пользовательского интерфейса основан на 8px
"От: Блог Douban "Правило 8 пикселей в дизайне пользовательского интерфейса"
▲ Сравнение использования правила 8px и без размещения по правилу 8px
«Изображение из блога Douban «8 правил пикселей в дизайне пользовательского интерфейса»
Подумайте о проекте дизайна, предоставленном дизайнером, будь то расстояние между элементами, межстрочный интервал текста или даже размер изображения, или все единицы измерения кратны 8. Какой сюрприз это для front-end программистов. Проблемы, о которых я упоминал ранее, легко решаются: достаточно просто написать несколько циклов в препроцессоре CSS, и все коды стилей будут сгенерированы автоматически. Интерфейсу также не нужно тратить время на измерения при создании страниц. Спецификация дизайна, которая доводит стандартизацию до крайности, что является просто вопросом веб-разработки.артефакт.
Когда я обсуждал этот план с дизайнером, взаимодействие также дало мне более сильную практическую поддержку. Визуальная спецификация пользовательского интерфейса Google Adroid «Material Design» также ближе к кратному 8. Пустые теории подтверждаются практикой. Поэтому я настоятельно хочу порекомендовать это решение огромному количеству наших дизайнеров.
▲ Домашняя страница и диаграмма кадра станции М после пересмотра на основе «8-точечной сетки»
В последней итерации станций M в этот крайний срок расстояние между нашими станциями M было пересмотрено с введением «8-точечной сетки». Делает ли это обсессивно-компульсивное расстройство крутым?
Вы не одиноки в битве
Пока я был импульсивен, я тоже должен был спокойно подумать над таким вопросом. Почему такая спецификация, как «8-точечная сетка», не считается артефактом, столь же популярным, как макет сетки?
Причина этого мне видитсяСпецификация мелкозернистаяЭта проблема. Ограничение макета сетки для дизайнеров заключается только в аспекте горизонтального макета, и его влияние на другие части дизайна можно игнорировать. Но в «8-точечной сетке» задействованы практически все единицы измерения. Это не только не относится ко всем стилям дизайна, но и сильно ограничивает пространство для размышлений дизайнера. Детализация этой спецификации ставит дизайн и разработку на оба конца шкалы.
Но я не думаю, что канонизация теряет свое значение в разработке веб-проектов только по этой причине. Программисты усердно работали над оптимизацией логики и упрощением процесса и, наконец, сжали код JS размером 40 КБ до 10 КБ. Однако, немного оптимизировав формат изображения, дизайнер может легко сжать изображение на десятки и даже сотни КБ.
В команде, если вы слишком зациклены на вещах, которые находятся в ваших руках, легко добраться до узкого места, и трудно найти проблемы с макроэкономической точки зрения. Вы могли бы также больше общаться со своими восходящими и нисходящими потоками, и, возможно, вы могли бы открыть другой способ сэкономить время и усилия, в конце концов, мы не боремся в одиночку.
Автор этой статьи: ziven27
Приветствуется перепечатка, но с указанием автора, источника и ссылки.