Как адаптировать размер текста и / или элементов при проектировании к экранам меньшего размера? - PullRequest
0 голосов
/ 04 января 2019

У меня есть персональный проект, разработанный для рабочего стола, который я ранее создал в Adobe XD, и теперь я бы хотел разместить его на Behance.Для этого мне нужно адаптировать макет, предназначенный для настольных компьютеров, для мобильных устройств.

Обычно я не проектирую для небольших экранов, поэтому мне интересно, насколько мне нужно уменьшить размер текста и элементов?Например, если у меня есть текст с размером шрифта 40px, какие расчеты следует использовать, чтобы уменьшить размер для мобильных устройств?Существует ли процент по умолчанию для уменьшения значений рабочего стола?В качестве альтернативы, существуют ли визуальные правила, которым следуют другие дизайнеры?

Я всегда проектирую для Bootstrap, но я не уверен, правильно ли я думаю о мобильных устройствах.

Я также опубликовалэто на форуме User Experience Stack Exchange, но я не уверен, какой из них лучше всего подходит для моего вопроса.

Спасибо, что поделились своими мыслями и советами.

Я разработал в основном для настольных компьютеров как традиционный веб-дизайнер, и сейчас я пытаюсь перейти на UI / UX.

1 Ответ

0 голосов
/ 04 января 2019

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

Например, если вы разрабатываете дизайн для Интернета, вам, вероятно, потребуется использовать такие функции браузера, как медиа-запросы для управления вашим контентом.

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

Вот несколько советов:

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

  • Из-за схожего размера, но уменьшенных размеров экрана вам необходимо упростить свой дизайн,Избегайте использования нескольких столбцов (особенно для телефонов).

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...