Должен ли я разрабатывать PSD-файлы для настольных компьютеров, планшетов и мобильных устройств отдельно в адаптивном дизайне?

Я пытаюсь создать адаптивный веб-сайт в Photoshop. Но вопрос в том, должен ли я разрабатывать разные PSD для всех этих устройств? (Настольный компьютер, планшет, мобильный телефон)

Если да, то какой размер страницы выбрать в Photoshop для всех этих устройств?

Ответы (6)

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

Как веб-разработчик, я бы посоветовал сделать адаптивную версию дизайна только для главной страницы и для следующих размеров экрана:

Рабочий стол: (около 992 пикселей или в соответствии с вашим дизайном)
Планшеты: (768 пикселей)
Мобильные устройства: (480 пикселей)

Обратите внимание, что размеры экрана, рекомендованные выше, соответствуют популярным адаптивным средам разработки переднего плана Twitter Bootstrap 3.

Кроме того, по моему мнению, я бы попытался думать в первую очередь о мобильных устройствах. Иногда это может быть проще, чем пытаться уменьшить все элементы рабочего стола до меньшего размера.
Не могли бы вы объяснить, почему вы предлагаете использовать 480 пикселей вместо 360 пикселей для мобильного дизайна? Когда я тестирую устройство для его окна просмотра, результат всегда ~ 360 пикселей.
@ZZZ, когда дело доходит до дизайна, общий подход заключается в разработке дизайна для 480 пикселей, а затем его уменьшении до 320 пикселей. Это сделано из-за различных размеров экрана в портативных устройствах, например, iphone 6: 375px, iphone 6 plus: 414px и iphone 5 - 320px. Поэтому диапазон размеров мобильных экранов составляет от 480 до 320 пикселей, о чем должны помнить как дизайнер, так и разработчик.

Вопреки популярному мнению о проектировании «в первую очередь для мобильных устройств», я бы рекомендовал проектировать только для настольных компьютеров, используя сетку из 12 столбцов; затем позволить разработчикам создавать все мобильные состояния, используя стандартную адаптивную структуру CSS, такую ​​как Bootstrap. В этом есть ряд положительных моментов, как мы узнали в нашем собственном процессе веб-разработки:

  1. Вы не можете продать клиенту только мобильную верстку, он обязательно захочет увидеть планшет и десктоп. Как только вы пойдете по маршруту 3+ макетов для каждой страницы (рабочий стол, планшет, телефон), творческие часы будут проходить через крышу.

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

  1. Нет никакой гарантии, что тщательно подготовленные макеты для мобильных устройств и планшетов точно отражают макет и функциональность CSS-фреймворка по умолчанию, поэтому вы можете разрабатывать страницы, которые могут оказаться очень сложными для кодирования, что приведет к увеличению бюджета на разработку, пересмотру ТЗ, шоку от наклеек и другим приятным моментам. клиент.

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

http://184.72.251.109/oss/dev/WP_core/master/grid-system/ показывает, как отзывчивая сеточная система ведет себя в разных разрешениях, и пока макет рабочего стола соответствует сетке из 12 столбцов, это то, что вы должны ожидать от планшета и телефона. макеты. В самом верху страницы есть ссылка на файл PSD для загрузки шаблона сетки рабочего стола.

Надеюсь это поможет.

Хотя я согласен с пунктом 1, это именно та причина, по которой нужно начинать с мобильных устройств. Mobile first позволяет вам свести содержимое и функциональность к основным потребностям. Во что бы то ни стало, покажите настольную версию этого, но обычно лучше начать с мобильного. № 2, однако, отличный момент.

Я согласен с Максом Токманом выше и добавлю, что, будучи программистом и дизайнером в своей компании, я попал в ловушку создания мобильного макета, который было очень трудно воспроизвести в коде.

Тем не менее, вам также необходимо учитывать, кто будет целевой аудиторией. Если это сайт, который в основном будет использоваться на телефоне, то этому дизайну следует уделить больше внимания, чем другим. Большинство сайтов не будут одинаково использоваться на разных платформах, несмотря на надежды владельцев, концепции которых вы пытаетесь воплотить в жизнь. Конечно, всегда есть исключения из этого правила.

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

Есть новый (несколько дней назад) способ сделать это. Я только что обновил Photoshop, и вы, возможно, будете рады узнать, что теперь вы можете создавать несколько художественных досок в одном документе Photoshop. Это позволит вам иметь все 3 ваших макета в одном файле. Вот видео о том, как работает эта новая функция: https://helpx.adobe.com/photoshop/how-to/design-with-artboards.html

На самом деле это не решает проблему адаптации адаптивной среды. Отзывчивый веб-дизайн — это не разные дизайны для разных экранов, а один дизайн, который правильно перестраивается на всех экранах.
Я не согласен, поскольку элементы меняют приоритет и смещаются в зависимости от размера экрана, клиенты хотят видеть, как будет выглядеть дизайн в разных контрольных точках. Кроме того, не все веб-страницы основаны на процентах с плавным макетом, а скорее являются «реактивными» и фиксируются на месте в определенных точках останова.
Я согласен, что элементы меняют приоритет и сдвиг. Это моя точка зрения. Страница должна быть построена таким образом, а не просто выложена в Photoshop. Изменение порядка двух элементов в Photoshop тривиально, но это может вызвать много сложных накладных расходов на кодирование, и это можно было бы исправить, адаптировав структуру в процессе проектирования, а не выполняя весь дизайн заранее. Чтобы RWD работал, это должен быть совместный и итеративный процесс с разработкой.

Если вы ищете более простой способ управления адаптивным дизайном и у вас есть подписка Adobe CC, у Adobe есть продукт под названием Edge Reflow , который значительно упрощает проектирование для различных разрешений. Вот видео от Adobe об этом. Но, по сути, вы можете импортировать свои PSD-файлы и манипулировать ими, чтобы они менялись при разных разрешениях.

Edge Reflow может экспортировать вашу работу как работающий веб-сайт. Это делает хорошую демонстрацию, и разработчики могут зайти туда, увидеть, как все работает, и извлечь из нее то, что им нужно.

Используя это, вам не нужно беспокоиться об управлении несколькими PSD-файлами или о том, какие размеры вы точно установили в Photoshop.

Прошло некоторое время, но я не думаю, что он перекомпоновывается на основе какой-либо конкретной структуры CSS, не так ли?
Я уверен, что это просто отключается от медиа-запросов. Или я не понял вопроса?
Позвольте мне перефразировать: он использует настоящий CSS или это инструмент для простой замены PSD-файлов? Если он действительно создает CSS, то можно (по крайней мере теоретически) использовать его в качестве основы, я полагаю. Однако, если это не так, у вас все еще есть проблема, когда дизайн может не соответствовать конкретной структуре RWD, которая будет использоваться.
Да, он работает с HTML и CSS, а не просто заменяет PSD-файлы.

Разработайте только мобильную версию. Затем поработайте с разработчиками, чтобы перекомпоновать вещи по мере необходимости для других представлений.

Причина использования мобильных устройств в том, что они вынуждают вас расставлять приоритеты в контенте и функциональности вплоть до необходимости. Это дает вам обтекаемый дизайн, который чаще всего также идеально подходит для рабочего стола, хотя, возможно, он расположен по-другому.

Причина, по которой нужно работать с разработчиками для разработки различных представлений в коде, заключается в том, что код будет диктовать, что, куда и как можно перемещать. Чаще всего, когда я получаю несколько файлов PSD для каждого окна просмотра, я на самом деле получаю 3 дизайна, которые на самом деле требуют 3 разных кодовых базы, а не одну кодовую базу, которая может вместить перекомпоновку. Иногда это можно «исправить» с помощью большого количества JavaScript и реорганизации DOM, но это, как вы можете себе представить, приводит к другим большим проблемам.

Должен ли я разрабатывать PSD-файлы для настольных компьютеров, планшетов и мобильных устройств отдельно в адаптивном дизайне?
СпросиСетьПолитика конфиденциальности1y, 0v