Как создавать интерфейсы в графическом редакторе для адаптивных сеточных систем, если они не идеальны по пикселям?

Любая отзывчивая сеточная система CSS использует длинные значения десятичной точки в процентах для ширины столбцов (например, «16,66666667%»). Я не понимаю, как выложить сетку в Photoshop, потому что элементы интерфейса будут либо длиннее, либо короче, чем предполагает сетка CSS, что приводит к определенным проблемам со всей компоновкой (элементы могут смещаться из-за того, что округления чисел) — в итоге в браузере это выглядит иначе.

Чтобы лучше проиллюстрировать это, давайте возьмем значения Bootstrap: ширина столбца для самого большого контейнера составляет ~ 97 пикселей. Итак, как мне выложить сетку в графическом редакторе, округлить до 97 или 98, или, возможно, мне следует забыть об этих точных значениях и проектировать не на точное количество пикселей, а вместо этого на количество столбцов — что угодно ширина?

Я имею в виду, я просто не могу смириться с тем, что это не будет выглядеть одинаково, отступы будут отличаться от того, как я их нарисовал (иногда даже отличаются друг от друга в случае, если элемент занимает 100% столбца [или two] ширина, скажем, кнопка с каким-то текстом может иметь padding-left из 30 и padding-right из 32; это заметно и неправильно), ширина будет другой, отступы будут другими, и скоро. Я не понимаю, как можно создавать функциональный и красивый интерфейс с такой несогласованностью и неточностью.

Не могли бы вы поделиться своим опытом? Как ты это делаешь? Я ошибаюсь в чем-то? Может быть, я могу прочитать что-нибудь хорошее о разработке адаптивных/гибких сеточных систем? Большое тебе спасибо.

Когда я делаю макеты адаптивного дизайна, я использую векторное программное обеспечение, более или менее по этой причине — чтобы не думать в точных пикселях. Раньше я использовал Illustrator, но теперь предпочитаю InDesign с Illustrator/Photoshop для иллюстраций/фотографий. Мой рабочий процесс InDesign еще не отлажен, но если этот вопрос не дублируется (у нас было несколько подобных), я вернусь, когда устраню ошибки, и опубликую ответ с подробным описанием.

Ответы (2)

Я просто не могу смириться с тем, что это не будет выглядеть так же

Вы должны преодолеть это. :)

Суть в том, что вы не можете легко создавать макеты пользовательского интерфейса в статических инструментах, таких как PhotoShop, и ожидать, что адаптивные макеты будут правильно адаптированы.

Лучший способ справиться с этим — создать дизайн в браузерах. Конечно, это работает не для всех, поскольку не все хотят писать код пользовательского интерфейса. Таким образом, второй лучший способ — работать бок о бок с разработчиком пользовательского интерфейса.

Я предлагаю этот поток в таких ситуациях:

  • сначала создайте мобильное представление. Работайте с 2-кратным или 3-кратным увеличением в редакторе изображений, чтобы вы знали, что у вас достаточно разрешения для работы, если вам нужно увеличить масштаб.
  • работать с разработчиком пользовательского интерфейса, чтобы реализовать мобильное представление в коде.
  • поработайте с разработчиком пользовательского интерфейса, чтобы теперь подумать о том, как будут объединяться другие представления, настраивая изображения по мере необходимости.
Речь идет о том, чтобы отпустить внутреннюю педантичность или застыть в аналитическом параличе. ;) Еще вариант - бросить.

Вы упомянули именно то, почему адаптивный дизайн так сложен. У вас больше нет холста для начала. Начать дизайн больше не то же самое, что «открыть Photoshop». Сначала вы должны работать головой. Как вы хотите, чтобы дизайн выглядел на разных устройствах, и как он должен меняться при незначительном изменении размера экрана (т.е. между разными типами телефонов).

Вы можете жаловаться, что почти невозможно создать дизайн для всех типов телефонов одновременно, но реальность такова, как будет выглядеть сайт. Другими словами, если вы придерживаетесь какого-то общего знаменателя и просто проектируете его, ваш сайт все равно будут просматривать на разных устройствах. Вам придется отказаться от контроля по крайней мере над некоторыми частями дизайна. Раньше это был размер левого и правого поля в старые времена с фиксированной шириной, но теперь все не так просто.

Вот несколько советов, которые приходят на ум:

  • Создавайте медленно, используя прототипы с низкой точностью. Продолжайте делать наброски простых прототипов для разных экранов и медленно выстраивайте свое представление о том, как должен работать весь дизайн.
  • Работайте с контентом : начните с очень четкого представления о том, какой контент у вас есть и каких целей должен на самом деле достичь сайт. Вы подаете новости, видео, рецепты? Если возможно, работайте с фактическим контентом, который вы будете обслуживать.
  • Думайте с точки зрения систем, а не страниц : избавьтесь от идеи страницы. Надлежащий адаптивный дизайн — это интеллектуальный способ перевода структурированного контента на любое устройство, которое пользователь держит в руках. Вы разрабатываете эту систему.
  • Сохраняйте дизайн простым и плоским : есть причина, по которой плоский дизайн сочетается с адаптивным дизайном. Поскольку набросок плоского дизайна в Photoshop занимает всего несколько минут, вы можете сделать много таких операций для разных размеров экрана и посмотреть, как выглядит система в целом, а не как выглядят отдельные экраны. Если бы каждая кнопка была идеально обработана, с множеством тонких 3D-эффектов, это просто заняло бы слишком много времени.
Как создавать интерфейсы в графическом редакторе для адаптивных сеточных систем, если они не идеальны по пикселям?
СпросиСетьПолитика конфиденциальности1y, 0v