Верстка страницы по макету: Верстка сайта из PSD макета

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

Популярный редактор — Adobe Photoshop. Это универсальный инструмент для работы с любой графикой: фотографы обрабатывают там снимки, иллюстраторы занимаются рисунками, а веб-дизайнеры делают макеты. Файл, в который сохраняется макет в Photoshop, имеет расширение .psd. Его отправляют разработчикам как PSD-макет для сайта.

Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.

Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign.

Перед тем как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать всё в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?

Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс вёрстки.

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

Проверьте все элементы макета и посмотрите на расстояния и отступы. Все размеры должны быть выражены целыми чётными числами. Не используйте нечётные числа и дроби.

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

Чтобы создать порядок в слоях:

• удалите скрытые и пустые,
• сгруппируйте по смыслу,
• напишите для каждого название.

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

Все элементы, которые нельзя отобразить с помощью HTML и CSS, необходимо вынести на отдельную страницу макета. Обычно так поступают с иконками, карточками и некоторыми кнопками. Чтобы сэкономить время верстальщику, элементы можно сразу экспортировать в формат PNG или SVG.

На этом артборде также покажите все позиции элементов. Скопируйте кнопку из макета и нарисуйте все её состояния: обычное, при наведении мыши, при нажатии. Укажите все цвета и шрифты, которые присутствуют в макете. Приведите примеры с параметрами и размерами заголовков, подзаголовков и основного текста.

Если в макете используются нестандартные шрифты, то отправьте файл с ними вместе с макетом.

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

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

Анимированные макеты используют не только для демонстрации сайта в портфолио или презентации заказчику.

Если нужно, чтобы элементы двигались и взаимодействовали друг с другом, нарисуйте интерактивный прототип и покажите верстальщику. Лучше продемонстрировать, чем описывать словами.

Как сверстать шаблона сайта из PSD в HTML и CSS

Совсем недавно я на блоге рассказывал как в Photoshop  сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Так же по теме

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

Подготовка

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

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

Всё. В принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.

Добавляем разметку HTML

Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.

Открываем наш текстовый документ index и вставляем в него следующий код:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<meta charset="utf-8" />

<title>Макет</title>

</head>
<body>

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

<!-- начало врапер -->

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

</body>
</html>

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:

<!— начало врапер —>

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

• id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
• id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
• id=»colLeft» — левая сторона сайта (Посты)
• id=»colRight» — правая сторона (Сайдбар)

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить. Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

CSS

Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом </head> ставим теги <style> … </style>, а между ними, соответственно будет располагаться код CSS.

Добавляем вот этот код CSS

* {
 margin: 0;
 padding: 0;
}

body {
 width: 100%;
 height: 100%;
 color:#333;
 background: #fff;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;

}

aside, nav, footer, header, section { display: block; }

ul {
 list-style:none;
}

a {
 text-decoration:none;
}

a:hover {
 text-decoration: none;
}

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

Это так сказать стандартные стили, их можно изменять по собственному желанию.

Главные блоки (верх, середина и низ)

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

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content  будет выравнивать сверху левую и правую сторону сайта.

#colLeft  отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

Переходим во вкладку «Файл»  и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

А вот теперь мы можем смело добавить стили для нашего меню, вот они:

/* Верхнее правое меню */

.topMenuRight {
 height:57px;
 position:absolute;
 left:0px;
 top:0px;
 border: 0px solid #1FA2E1;
 }

.topMenuRight ul li {
 background: url(images/line.png) 0px 0px no-repeat;
 float:left;
 height: 57px;
 }

.topMenuRight ul {
 padding-left:0px;
 }

.topMenuRight ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:16px 20px 21px 20px;
 }

.topMenuRight ul li a:hover{
 background: #fff;
 color:#555;
 }

Вот, что должно получиться:

Иконки социальных закладок

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

Теперь под HTML кодом меню добавляем вот этот код:

<div>

<a href="#" title="Следить в Twitter!" target="_blank"></a>
<a href="#" title="Подписаться на rss" target="_blank"></a>
<a href="#" title="Подписаться по e-mail" target="_blank"></a>

</div>

А в стили CSS нужно добавить вот это:

.share-new {
 z-index: 1;
 position:absolute;
 right:0px;
 top:14px;
 }
 .share-new a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; }

 .share-new .icon-twitter {
 background: url(images/twitter-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 3px;

}

.share-new .icon-rss {
 background: url(images/rss-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

.share-new .icon-mail {
 background: url(images/email-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

Вот результат:

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

<div>
<a href="#"><img src="images/logo.png" alt="Блог" /></a>
</div>

А вот и стили:

/*----------------------------
 Логотип
------------------------------*/

.logo {
 position:absolute;
 left:0px;
 top:90px;
 }

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

<!-- Начало #bottomMenu -->
 <nav>
<ul>

 <li><a href="#">Категория</a>
 <ul>
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>

 </ul>
 </nav><!-- конец #bottomMenu -->

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

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

Выбираем инструмент «Рамка»

Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:

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

Ну а сейчас можно смело добавлять CSS:

.bottomMenu {
 width:1200px;
 height: 70px;
 position:absolute;
 left:0px;
 bottom:0px;
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }

#dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 margin-top:18px;
 }

#dropdown_nav li {
 float:left;
 position:relative;
 display:inline-block;

 }

#dropdown_nav li a {

 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:15px 22px 20px 22px;
 background: url(images/linemenu.png) right no-repeat;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 }
 #dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
 }

 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }

/* Выпадающее меню */
 #dropdown_nav .sub_nav {
 z-index: 4;
 width:180px;
 padding:0px;
 position:absolute;
 top:42px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 }

#dropdown_nav .sub_nav li {

 width:180px;
 padding:0px;
 }

#dropdown_nav .sub_nav li a {
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;

 }
 #dropdown_nav .sub_nav li a:hover {
 background:#222;
 color:#0dbfe5;
 }

Результат:

Блок «Последние записи»

Сразу после тега </header> нужно добавить HTML код, который будет отображать серый блок:

<div>

<h3>Последние записи</h3>

</div>

Левый блок с последними записями

Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:

<!-- Начало .postBox -->
<article>

<div><a href="#"><img src="images/tumb.png"/></a></div>

<h3><a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h3>

<div>
Александр // <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a>
</div>

<div>

<p>Приветствую Вас, уважаемые читатели блога. Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p>
</div>

<div><a href="#">Далее</a></div>

</article>
<!-- Конец .postBox -->

<div></div>

Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде <div class=»raz»></div> отвечает за разделитель между постами.

И конечно же не забываем про CSS для постов:

.raz {
 margin:0 auto;
 border:0px solid #333;
 background: #fff;
 width:116px;
 height:29px;
 margin-bottom:50px;
 background: url(images/raz.png) 0px 0px no-repeat;
 }

.postBox {
 border:0px solid #333;
 background: #fff;
 width:700px;
 margin-top:0px;
 margin-left:0px;
 margin-bottom:50px;
 }

.postBox h3 a {
 font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif;
 color:#000;
 font-style:normal;
 font-weight:100;
 font-size:33px;
 line-height:35px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.postBox h3 a:hover {
 color:#0dbfe5;
 }

.postBox .textPreview {
 border:0px solid #333;
 width:800px;
 margin-bottom:30px;
}

.postBox .textPreview p{
 margin-top:0;
 }

.postBox .postThumb{
 margin:0px 0px 15px 0;
 }

.postBox .postMeta {
 padding-bottom:15px;
 clear:left;
 overflow:hidden;
}

.more-link a {
 border-radius: 3px;
 background: #0dbfe5;
 margin-top:30px;
 font-weight:600;
 color:#fff;
 font-size:17px;
 padding:6px 25px 9px 25px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.more-link a:hover {
 background:#000;
 color:#0dbfe5;
 }

Чтобы лучше было видно как будет смотреться макет, просто скопируйте HTML код блока постов и поставьте один под одним. В итоге вот что получится:

Правая часть (Сайдбар)

Добавляем поиск. После тега <aside id=»colRight»> вставляем следующее:

<form method="get" action="/search" target="_blank">
<input name="q" value="" placeholder="Поиск...">
<input type=submit value="">
</form>

И стили для поиска:

#form-query {
 position:relative;
 background:#eeeeee;
 border:0px solid #e4e4e4;
 width:335px;
 height:31px;
 padding:8px 10px 7px;
 font-weight:100;
 font-size:18px;
 color:#000;
 margin-bottom: 30px;
}

#form-querysub {
 position:absolute;
 right:15px;
 top:15px;
 width:17px;
 height:17px;
 background:url(images/search.png) 0px 0px no-repeat;
 border:0px dashed #333;
 }

#form-querysub:hover {
 cursor: pointer;
}

Виджет

После кода поиска вставляем:

<div>

<h3>Виджет 2</h3>
<ul>

<li><a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a></li>

 <li><a href="#" title="Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a></li>

 <li><a href="#" title="Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery">Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery</a></li>
 <li><a href="#" title="500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов">500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов</a></li>
 <li><a href="#" title="Бесплатные PSD и CSS3 меню для Вашего веб проекта">Бесплатные PSD и CSS3 меню для Вашего веб проекта</a></li>
 <li><a href="#" title="Примеры идеального сочетания цветов в веб &#8211; дизайне">Примеры идеального сочетания цветов в веб &#8211; дизайне</a></li>
 <li><a href="#" title="Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS">Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS</a></li>
 <li><a href="#" title="Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей">Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей</a></li>
 <li><a href="#" title="Примеры игр которые сделанные с помощью html5 canvas">Примеры игр которые сделанные с помощью html5 canvas</a></li>
 <li><a href="#" title="Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов">Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов</a></li>
 </ul>

</div>

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h3img и сохранить в папке images нашего шаблона.

CSS код виджетов:

.rightBox {
 margin-top:0px;
 margin-left:0px;
 width:330px;
 margin-bottom:30px;
 }

.rightBox h3 {
 width:335px;
 background:#f7f7f7 url(images/h3img.png) 320px 14px no-repeat;
 font-size:18px;
 font-family: "Segoe UI Semibold", Tahoma, Helvetica, Sans-Serif;
 color:#333;
 display:block;
 padding:10px 0 15px 20px;
}

.rightBox ul li{
 width:350px;
 padding:10px 0px;
 border-bottom:1px solid #f6f6f6;
 font-size:14px;
 line-height: 16px;
 }

.rightBox a {
 color:#333;
 }

.rightBox a:hover {
 color: #0dbfe5;
 }

Футер

После тега <div id=»footerInner»> вставляем код для логотипа и нижнего меню:

<div>
<a href="#"><img src="images/logo.png" alt="Блог" /></a>
</div>

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

CSS

#footer {
 margin-top:50px;
 height:100px;
 width:100%px;
 background: #0dbfe5;
 }

#footerInner {
 position:relative;
 border:0px solid #000;
 width:1200px;
 margin:0 auto;
 height:100px;
 }

#footerlogo {
 position:absolute;
 left:0px;
 top:25px;
 }

.footernav {
 position:absolute;
 right:0px;
 top:35px;
 }

.footernav ul li {
 float:left;
 }

.footernav ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:0px 0px 0px 25px;
 }

.footernav ul li a:hover{
 color:#333;
 }

В конечном итоге получаем вот такой шаблон:

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂

В общем если у Вас будут вопросы спрашивайте в комментариях.

До скорых встреч.

Собранные требования к psd-макету веб-сайта / Хабр

Привет, фрондэнд разработчики!

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

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

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

Через какое-то время я смог оценить весь profit от введения этих стандартов и требований:

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

— верстальщик получая «правильный» макет может более точно оценить срок выполнения, так как точно понимает, что ему не придется никуда больше ходить и просить что-то переделывать, также сюда можно добавить и сокращение сроков выполнения. Так как в случае соблюдения правил, становится возможно пользоваться штуками типа csshat.com + lesshat.com

— результат на выходе получается более идентичный тому, что нарисовано, так как все что дизайнера «натворил» можно реализовать в браузере.
Итог: дизайнер счастлив(не надо ничего переделывать), верстальщик счастлив(все хорошо верстается и тратится ночь на доп.работу, чтоб успеть и нервы впорядке), заказчик (сверстаный макет соответствует утвержденному макету), в итоге все остаются в профите от введение этих правил.

Ниже привожу список требований:

1) Соблюдение сетки в макете, если знаешь что это такое и как ее «готовить».
Зачем? о_О:
— чисто эстетические наслаждение
— возможность быстро собирать каркас страницы и позиционировать элементы на
странице в соответствии с представленном макетом, чтобы верстка получалась более честной по отношению к тому, что ты нарисовал(а).

2) Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа »multiply, screen, overlay, и т.д.».
Плохо: joxi.ru/Md6l32D
Хорошо joxi.ru/M2w9Nwe и еще пример joxi.ru/11ndBHq

3) Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.
Пример: joxi.ru/AGx4CQy

4) Никаких градиентных границ (бордеров, stroke).

5) Использование сложных режимов наложения (blend mode) касается любых свойств слоя (типа inner shadow, drop shadow и т.д.).

6) ОБЯЗАТЕЛЬНО прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF

7) По возможности — не использовать в макете больше 2-х не стандартных шрифтов, их кол-во сильно влияет на рендеринг страницы в браузере, что негативно сказывается на отношения пользователя к сайту.

8) Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты) joxi.ru/MKnCZQM

9) Если нарисовали типовую кнопку, ссылку, элемент, которые имеет состояние «наведения», нажатия — не заставляйте нас додумывать как это должно работать. Если есть ссылка, покажите ее цвет при наведении, если есть кнопка, покажите ее внешний вид при наведении или нажатии, а также при ее состоянии «неактивности». Это касается любых подобных элементов, стрелок в галереи и т.д. и т.п. joxi.ru/ZSmaLye

10) Каждый блок должен находится в своей папке и имеет правильное человеческое название, чтобы не собирать части блока по всему макету. joxi.ru/Agsfo3L

11) Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку / слой — цветом, чтобы его не пропустить, также он должен иметь название, которое близко по смыслу его функциональности. joxi.ru/G1h9LbN

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

Спасибо.

Старт в Figma для верстальщика — Блог HTML Academy

Figma — это графический онлайн-редактор для дизайнеров интерфейсов и веб-разработчиков. Сейчас это удобная, бесплатная альтернатива Photoshop. Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

Регистрация и добавление нового макета

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

Форма регистрации

Затем вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для ознакомления с инструментами приложения. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch. При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.

После добавления макет появится в общем списке, и можно будет приступить к работе с ним.

Импорт нового макета

Структура макета и рабочие инструменты

Интерфейс в разделе работы с макетом состоит из нескольких блоков.

1. В боковой панели слева показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
2. Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
3. В верхней части страницы расположено основное меню. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
4. Боковая панель справа включает в себя три вкладки, но нам будут нужны только две из них — Design и Code. В этих вкладках находится вся доступная информация об элементе.

Интерфейс страницы работы с проектом

Работа с параметрами элементов

Основная задача верстальщика при работе с макетом — получить параметры элементов. Давайте разберём по пунктам, как это сделать в Figma.

Текст

Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.

Работа с текстовыми элементами

Изображение

Свойства width и height во вкладке Code расскажут о размере изображения.

Работа с изображениями

Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF. Подробно о форматах изображений можно почитать в этой статье.

Экспорт изображений

Цвет элемента

Во вкладке Code можно узнать фоновый цвет элемента — значение background.

Определение фонового цвета блока

Размеры элементов и расстояние между ними

Размер можно определить несколькими способами. Например, во вкладке Code посмотреть значения свойств width и height. Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между любым элементом и соседними с ним. Для этого нужно выделить его, а затем наводить курсор на остальные элементы — будет появляться направляющая и значение.

Определение размеров элементов и расстояния между ними

Figma — это удобный и простой инструмент для верстальщика, и мы предлагаем вам попробовать его в деле. Приобрести макет в нужном формате можно в нашем магазине макетов.

Фигма — только один из навыков фронтендера

Научитесь работать с макетами в Фигме, и верстальщики скажут вам спасибо.

Получить навык

Требования к дизайн-макетам web-страниц для верстки или делаем идеальный psd-макет

«Я не делаю брак, я не принимаю брак, я не передаю брак»
Toyota Production System

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

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

Требования к файлу:

1. Макет должен быть представлен в формате (.psd). В противном случае сайт будет отличаться от макета.
2. Строго необходимо цветовое пространство RGB. Именно оно используется по умолчанию в web. CMYK подходит для полиграфии, а не для web.
3. Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие меры длины . Указания значений не должны быть дробными!
4. Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
5. Слои ни в коем случае не должны быть склеены.
6. Векторные элементы должны быть векторными элементами: иконки, стрелки и т.д. Допускаются элементы shape и smart-объекты с ai-элементами.
7. Выравнивание слоев – строго по “Rulers”. Их необходимо оставлять в макете.
8. “Rulers” должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимы.
9. Необходимо группировать слои по папкам (смысловым блокам) с осмысленными названиями, а не «Группа 3 copy». То же самое касается всех слоев (шапка, контент, подвал и т.п.).Придерживаемся иерархии «сверху вниз» и «слева направо».
10. В случае фиксированного шаблона необходимо четкое соответствие ширины макета утвержденной минимальной ширине сайта.
11. Для адаптивного сайта должны быть макеты или элементы для 640px – 960px – 1200px – 1600px.
12. При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 ширина браузера 1000).
13. В дизайне должны быть «служебные страницы» (404).

Текстовое содержимое. Четкие размеры и отступы:

1. Необходимо использовать «родные» направляющие photoshop или готовые модульные сетки, чтобы точно определить расположение элемента на странице.
2. Нужно осознанно выбирать пропорции и размеры объектов и делать их кратными 10, например, 1000px, а не 998px.
3. Размер шрифта должен быть без дробей. Никогда не нужно растягивать шрифт принудительно.
4. Не допускается растрирование текста или размещение его в smart-объекте.
5. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf и otf.
6. Допустимо и даже приветствуется использование свободных кириллических шрифтов от Google web fonts.
7. Все текстовые элементы должны быть сглажены методом “Windows LCD”.
8. Необходимо описать поведение ссылок в дизайне («неактивная», «при наведении», «посещенная») в меню / модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.)

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

Графические фишки:

1. Фон должны быть повторяющимся, текстурированные фоны без логики повтора не принимаются.
2. Все слои должны быть в нормальном режиме наложения (normal). Не допускается наличие слоев в других режимах, как то multiply, overlay и т.д.
3. Необходимо использовать минимум элементов, что потребуют создания графических файлов png-24 (полупрозрачность etc).
4. Обязательно должна присутствовать favicon.ico для сайта. Не нужно забывать про favicon для Apple.
5. Векторные мелкие элементы должны быть отрисованы согласно однопиксельной сетке.
6. Настоятельно рекомендуется выстраивать отступы между элементами, чьи значения кратны 10, в отдельных случаях – кратны 5.

Исходные материалы макета

• Макет в формате PSD
• Шрифты
• Исходные изображения

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

Все нестандартные шрифты копируются в ту же папку. У верстальщика может не быть необходимого вам красивого шрифта. И на его поиски уйдет много времени.

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

Создание макета страницы и верстка

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

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

Однако табличная верстка создает не самые гибкие по дизайну страницы, что является особенно актуальным аспектом в мире, где нет одного единственного разрешения экрана, за то есть большие экраны на телевизорах, малые экраны на планшетах и фаблетах, очень маленькие экраны на смартфонах и т.д. Все это многообразие экранов табличная верстка оказалась не в состоянии удовлетворить. Поэтому постепенно ей на смену пришла блочная верстка. Блочная верстка — это отосительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство float, а основным строительным элементов веб-страниц является элемент <div>, то есть по сути блок. Используя свойство float и элементы div или другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет значительно гибче.

Ранее в одной из прошлых тем рассматривалось действие свойства float. Теперь используем его для создания двухколоночной веб-страницы. Допустим, вверху и внизу у нас будут стандартно шапка и футер, а в центре — две колонки: колонка с меню или сайдбар и колонка с основным содержимым.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
			div{
				margin: 10px;
				border: 1px solid black;
				font-size: 20px;
				height: 80px;
			}
            #header{ 
				background-color: #ccc;
			}
			#sidebar{
				background-color: #ddd;
			}
			#main{
				background-color: #eee;
				height: 200px;
			}
			#footer{ 
				background-color: #ccc;
			}
        </style>
    </head>
    <body>
		<div>Шапка сайта</div>
		<div>Сайбар</div>
		<div>Основное содержимое</div>
		<div>Футер</div>
    </body>
</html>

То есть пока получается примерно следующая страница:

Высота, граница и отступы блоков в данном случае добавлены только для красоты, чтобы идентифицировать пространство блока и отделять его от других.

Далее, чтобы переместить блок сайдбара влево по отношению к блоку основного содержимого и получить эффект обтекания, нам надо указать у блока сайдбара свойство float: left и предпочтительную ширину. Ширина может быть фиксированной, например, 150 px или 8 em. Либо также можно использовать проценты, например, 30% — 30% от ширины контейнера body. С одной стороны, блоками с фиксированной шириной легче управлять, но с другой процентные значения ширины позволяют создавать более гибкие, резиновые блоки, которые изменяют размеры при изменении размеров окна браузера.

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

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

Итак, принимая во внимание все выше сказанное, изменим стили блоков сайдбара и основного содержимого следующим образом:

#sidebar{
	background-color: #ddd;
	float: left;
	width: 150px;
}
#main{
	background-color: #eee;
	height: 200px;
	margin-left: 170px; /* 150px (ширина сайдбара) + 10px + 10px (2 отступа) */
}

В итоге у нас получится сайдбар по левую сторону от основного блока:

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

Создание правого сайдбара будет аналогично, только теперь нам надо установить у сайдбара значение float: right, а у блока основного содержимого — отступ справа:

#sidebar{
	background-color: #ddd;
	float: right;
	width: 150px;
}
#main{
	background-color: #eee;
	height: 200px;
	margin-right: 170px;
}

При этом разметка html остается такой же, блок сайдбара по прежнему должен предшествовать блоку основного содержимого.

: Понимание автоматической разметки

Понимание Auto Layout

Auto Layout динамически рассчитывает размер и положение всех представлений в иерархии представлений на основе ограничений, накладываемых на эти представления. Например, вы можете ограничить кнопку так, чтобы она была центрирована по горизонтали с представлением «Изображение», и чтобы верхний край кнопки всегда оставался на 8 пунктов ниже нижней части изображения. Если размер или положение вида изображения изменяется, положение кнопки автоматически настраивается в соответствии.

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

Внешние изменения

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

• Пользователь изменяет размеры окна (OS X).

• Пользователь входит или выходит из Split View на iPad (iOS).

• Устройство вращается (iOS).

• Бары активного вызова и записи звука появляются или исчезают (iOS).

• Вы хотите поддерживать разные классы размера.

• Вы хотите поддерживать разные размеры экрана.

Большинство из этих изменений могут произойти во время выполнения, и они требуют динамического ответа от вашего приложения.Другие, такие как поддержка разных размеров экрана, представляют приложение, адаптирующееся к различным средам. Даже несмотря на то, что размер экрана обычно не изменяется во время выполнения, создание адаптивного интерфейса позволяет вашему приложению одинаково хорошо работать на iPhone 4S, iPhone 6 Plus или даже iPad. Автоматическая разметка также является ключевым компонентом для поддержки слайд-шоу и разделенных видов на iPad.

Внутренние изменения

Внутренние изменения происходят при изменении размера представлений или элементов управления в вашем пользовательском интерфейсе.

Вот несколько общих источников внутренних изменений:

• Содержимое, отображаемое приложением, изменится.

• Приложение поддерживает интернационализацию.

• Приложение поддерживает Dynamic Type (iOS).

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

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

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

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

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

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

в сравнении с рамочной компоновкой

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

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

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

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

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

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

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

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

Логика, используемая для разработки набора ограничений для создания определенных поведений, очень отличается от логики, используемой для написания процедурного или объектно-ориентированного кода.К счастью, освоение Auto Layout ничем не отличается от освоения любой другой задачи программирования. Есть два основных шага: сначала вам нужно понять логику, лежащую в основе макетов на основе ограничений, а затем вам нужно изучить API. Вы успешно выполнили эти шаги при изучении других задач программирования. Авто макет не является исключением.

Остальная часть этого руководства предназначена для облегчения вашего перехода к автоматической компоновке. Глава «Автоматическое расположение без ограничений» описывает высокоуровневую абстракцию, которая упрощает создание пользовательских интерфейсов с поддержкой автоматического размещения.Глава «Анатомия ограничений» содержит базовую теорию, которую вы должны понять, чтобы успешно взаимодействовать с Auto Layout самостоятельно. Работа с Ограничениями в Интерфейсном Разработчике описывает инструменты для проектирования Автоматической Разметки, и главы Программно Создавая Ограничения и Автоматической Разметки поваренной книги описывают API подробно. Наконец, Auto Layout Cookbook представляет широкий спектр образцов макетов разного уровня сложности, которые вы можете изучать и использовать в своих собственных проектах, а Debugging Auto Layout предлагает советы и инструменты для исправления ошибок, если что-то пойдет не так.

Автоматическая компоновка без ограничений

Copyright © 2018 Apple Inc. Все права защищены. Условия использования | Политика конфиденциальности | Обновлено: 2016-03-21

Визуальное руководство по менеджерам компоновки (Учебные руководства Java ™> Создание графического интерфейса с помощью JFC / Swing> Компоновка компонентов в контейнере)

Несколько классов AWT и Swing предоставляют диспетчера макетов для общего использования:

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

---

Примечание: Этот урок посвящен написанию кода макета вручную, что может быть непросто.Если вы не заинтересованы в изучении всех деталей управления компоновкой, вы можете предпочесть использовать менеджер компоновки GroupLayout в сочетании со средством компоновки для компоновки вашего графического интерфейса. Одним из таких инструментов является IDE NetBeans. В противном случае, если вы хотите кодировать вручную и не хотите использовать GroupLayout , то GridBagLayout рекомендуется в качестве следующего наиболее гибкого и мощного менеджера компоновки.

---

Если вы заинтересованы в использовании JavaFX для создания графического интерфейса, см. Работа с макетами в JavaFX.

BorderLayout

Каждая панель содержимого инициализируется для использования BorderLayout . (Так как Использование контейнеров верхнего уровня объясняет, что панель контента является основным контейнером во всех фреймах, апплетах и ​​диалогах.) BorderLayout размещает компоненты в пяти областях: сверху, снизу, слева, справа и по центру. Все дополнительное пространство размещено в центральной зоне. Панели инструментов, созданные с использованием JToolBar должен быть создан в контейнере BorderLayout , если вы хотите иметь возможность перетаскивать столбцы из их начальных позиций.Для получения дополнительной информации см. Как использовать BorderLayout.

Класс BoxLayout помещает компоненты в одну строку или столбец. Он учитывает запрошенные максимальные размеры компонентов, а также позволяет выравнивать компоненты. Для получения дополнительной информации см. Как использовать BoxLayout.

Класс CardLayout позволяет реализовать область, которая содержит разные компоненты в разное время. CardLayout часто управляется комбинированным полем, причем состояние комбинированного блока определяет, какую панель (группу компонентов) отображает CardLayout .Альтернативой использованию CardLayout является использование панель с вкладками, которая обеспечивает аналогичную функциональность, но с предопределенным графическим интерфейсом. Для получения дополнительной информации см. Как использовать CardLayout.

FlowLayout является менеджером по умолчанию для каждого JPanel . Он просто размещает компоненты в одной строке, начиная новую строку, если его контейнер недостаточно широк. Обе панели в CardLayoutDemo, показанные ранее, используют FlowLayout . Для получения дополнительной информации см. Как использовать FlowLayout.

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

GridLayout просто делает набор компонентов одинакового размера и отображает их в требуемом количестве строк и столбцов. Для получения дополнительной информации см. Как использовать GridLayout.

GroupLayout - это менеджер компоновки, который был разработан для использования инструментами GUI Builder, но его также можно использовать вручную. GroupLayout работает с горизонтальной и вертикальной раскладками отдельно. Макет определяется для каждого измерения независимо. Следовательно, однако, каждый компонент должен быть определен дважды в макете. Окно поиска, показанное выше, является примером GroupLayout . Для получения дополнительной информации см. Как использовать GroupLayout.

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

,

макетов в флаттер - флаттер

меню

• Документы
• Начать
  • 1. Установите
  • 2. Настройте редактор
  • 3. Тест-драйв
  • 4. Напишите свое первое приложение
  • 5. Узнайте больше
  • С другой платформы?
    • Флаттер для разработчиков Android
    • Флаттер для разработчиков iOS
    • Флаттер для разработчиков React Native
    • Флаттер для веб-разработчиков
    • Трепет для Xamarin.Формирует разработчиков
    • Введение в декларативный интерфейс
  • Обзор языка дартс
  • Создание веб-приложения
• Образцы и учебники
  • Галерея флаттера [запущенное приложение]
  • Галерея трепетания [репо]
  • Примеры приложений на GitHub
  • Кулинарная книга
  • Codelabs
  • Учебники
• развитие
  • Пользовательский интерфейс
    • Введение в виджеты
    • Макеты зданий
      • Макеты во Флаттере
      • Руководство
      • Создание адаптивных приложений
      • Понимание ограничений [NEW]
      • Ограничения коробки
    • Добавление интерактивности
    • Активы и изображения
    • Навигация и маршрутизация
    • Анимации
      • Введение
      • обзор
      • Руководство
      • Неявные анимации
      • Анимация героев
      • Постепенная анимация
    • Расширенный пользовательский интерфейс
      • Щепки
      • жесты
      • Заставки
    • Каталог виджетов
  • Данные и бэкэнд
    • Государственное управление
      • Введение
      • Мыслить декларативно
      • Эфемерно против состояния приложения
      • Простое управление состоянием приложения
      • Параметры
    • Сеть и http
    • JSON и сериализация
    • Firebase
  • Доступность и интернационализация
    • доступность
    • интернационализация
  • Интеграция платформы
    • C и C ++ взаимодействие
    • Веб FAQ
    • Написание платформо-зависимого кода
  • Пакеты и плагины
    • Использование пакетов
    • Разработка пакетов и плагинов
    • Программа «Флаттер Избранное»
    • Фоновые процессы
    • Обновление плагина Android
    • Пакет сайтов
  • Добавить флаттер в существующее приложение
    • Введение

.

Adaptive and Layout - Визуальный дизайн - iOS - Руководство по интерфейсу пользователя

Адаптивность и макет

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

Размеры и ориентация экрана устройства

Устройства iOS

имеют различные размеры экрана и могут использоваться как в книжной, так и в альбомной ориентации. В таких устройствах, как iPhone X и iPad Pro, дисплей имеет закругленные углы, которые точно соответствуют габаритным размерам устройства. Другие устройства, такие как iPhone SE и iPad Air, имеют прямоугольный дисплей.

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

Устройство	Размеры (портрет)
12,9 "iPad Pro	1024pt × 1366pt (2048px × 2732px @ 2x)
11 "iPad Pro	834pt × 1194pt (1668px × 2388px @ 2x)
10,5 "iPad Pro	834pt × 1194pt (1668px × 2388px @ 2x)
9.7 "iPad Pro	768pt × 1024pt (1536px × 2048px @ 2x)
7,9 "iPad mini	768pt × 1024pt (1536px × 2048px @ 2x)
10,5 "iPad Air	834pt × 1112pt (1668px × 2224px @ 2x)
9,7 "iPad Air	768pt × 1024pt (1536px × 2048px @ 2x)
10,2 "iPad	810pt × 1080pt (1620px × 2160px @ 2x)
9,7 "iPad	768pt × 1024pt (1536px × 2048px @ 2x)
iPhone 11 Pro Max	414pt × 896pt (1242px × 2688px @ 3x)
iPhone 11 Pro	375pt × 812pt (1125px × 2436px @ 3x)
iPhone 11	414pt × 896pt (828px × 1792px @ 2x)
iPhone XS Max	414pt × 896pt (1242px × 2688px @ 3x)
iPhone XS	375pt × 812pt (1125px × 2436px @ 3x)
iPhone XR	414pt × 896pt (828px × 1792px @ 2x)
iPhone X	375pt × 812pt (1125px × 2436px @ 3x)
iPhone 8 Plus	414pt × 736pt (1080px 1920px @ 3x)
iPhone 8	375pt × 667pt (750px × 1334px @ 2x)
iPhone 7 Plus	414pt × 736pt (1080px 1920px @ 3x)
iPhone 7	375pt × 667pt (750px × 1334px @ 2x)
iPhone 6s Plus	414pt × 736pt (1080px 1920px @ 3x)
iPhone 6s	375pt × 667pt (750px × 1334px @ 2x)
iPhone 6 Plus	414pt × 736pt (1080px 1920px @ 3x)
iPhone 6	375pt × 667pt (750px × 1334px @ 2x)
4.7 "iPhone SE	375pt × 667pt (750px × 1334px @ 2x)
4 "iPhone SE	320pt × 568pt (640px × 1136px @ 2x)

ПРИМЕЧАНИЕ Все масштабные коэффициенты в приведенной выше таблице являются масштабными коэффициентами UIKit, которые могут отличаться от собственных масштабных коэффициентов. Для руководства разработчика см. Масштаб и nativeScale.

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

Auto Layout

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

Auto Layout автоматически перенастраивает макеты в соответствии с указанными ограничениями при обнаружении определенных изменений среды (известных как черты ). Вы можете настроить свое приложение для динамической адаптации к широкому спектру характеристик, в том числе:

Руководство разработчика см. В Руководстве по автоматической компоновке и UITraitCollection.

Путеводители по макету и безопасная зона

Направляющие макета

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

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

Инструкции для разработчиков см. В разделах UILayoutGuide, layoutMarginsGuide, readableContentGuide и safeAreaLayoutGuide.

Размер классов

Размерные классы - это черты, которые автоматически присваиваются областям контента в зависимости от их размера.Система определяет два класса размеров: , обычный (обозначает расширенное пространство) и , компактный (обозначает ограниченное пространство), которые описывают высоту и ширину вида.

Представление может иметь любую комбинацию классов размеров:

• обычной ширины, обычной высоты
• Компактная ширина, компактная высота
• Обычная ширина, компактная высота
• Компактная ширина, обычная высота

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

Классы размеров устройств

Различные комбинации классов размеров применяются к полноэкранному режиму на разных устройствах в зависимости от размера экрана.

Устройство	Портретная ориентация	Ландшафтная ориентация
12.9 "iPad Pro	обычной ширины, обычной высоты	обычной ширины, обычной высоты
11 "iPad Pro	обычной ширины, обычной высоты	обычной ширины, обычной высоты
10,5 "iPad Pro	обычной ширины, обычной высоты	обычной ширины, обычной высоты
9,7 "iPad	обычной ширины, обычной высоты	обычной ширины, обычной высоты
7.9 "iPad mini	обычной ширины, обычной высоты	обычной ширины, обычной высоты
iPhone 11 Pro Max	Компактная ширина, обычная высота	обычной ширины, компактная высота
iPhone 11 Pro	Компактная ширина, обычная высота	обычной ширины, компактная высота
iPhone 11	Компактная ширина, обычная высота	Компактная ширина, компактная высота
iPhone XS Max	Компактная ширина, обычная высота	обычной ширины, компактная высота
iPhone XS	Компактная ширина, обычная высота	Компактная ширина, компактная высота
iPhone XR	Компактная ширина, обычная высота	обычной ширины, компактная высота
iPhone X	Компактная ширина, обычная высота	Компактная ширина, компактная высота
iPhone 8 Plus	Компактная ширина, обычная высота	обычной ширины, компактная высота
iPhone 8	Компактная ширина, обычная высота	Компактная ширина, компактная высота
iPhone 7 Plus	Компактная ширина, обычная высота	обычной ширины, компактная высота
iPhone 7	Компактная ширина, обычная высота	Компактная ширина, компактная высота
iPhone 6s Plus	Компактная ширина, обычная высота	обычной ширины, компактная высота
iPhone 6s	Компактная ширина, обычная высота	Компактная ширина, компактная высота
iPhone SE	Компактная ширина, обычная высота	Компактная ширина, компактная высота

Классы многозадачных размеров

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

2/3 разделенный вид

1/2 разделенный вид

1/3 разделенного вида

Устройство	Mode	Портретная ориентация	Ландшафтная ориентация
12,9 "iPad Pro	2/3 разделенный вид	Компактная ширина, обычная высота	обычной ширины, обычной высоты
	1/2 раздельного вида	N / A	обычной ширины, обычной высоты
	1/3 сплит	Компактная ширина, обычная высота	Компактная ширина, обычная высота
11 "iPad Pro	2/3 разделенный вид	Компактная ширина, обычная высота	обычной ширины, обычной высоты
	1/2 раздельного вида	N / A	Компактная ширина, обычная высота
	1/3 сплит	Компактная ширина, обычная высота	Компактная ширина, обычная высота
10.5 "iPad Pro	2/3 разделенный вид	Компактная ширина, обычная высота	обычной ширины, обычной высоты
	1/2 раздельного вида	N / A	Компактная ширина, обычная высота
	1/3 сплит	Компактная ширина, обычная высота	Компактная ширина, обычная высота
9,7 "iPad	2/3 разделенный вид	Компактная ширина, обычная высота	обычной ширины, обычной высоты
	1/2 раздельного вида	N / A	Компактная ширина, обычная высота
	1/3 сплит	Компактная ширина, обычная высота	Компактная ширина, обычная высота
7.9 "iPad mini 4	2/3 разделенный вид	Компактная ширина, обычная высота	обычной ширины, обычной высоты
	1/2 раздельного вида	N / A	Компактная ширина, обычная высота
	1/3 сплит	Компактная ширина, обычная высота	Компактная ширина, обычная высота

Общие соображения по компоновке

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

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

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

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

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

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

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

4,7 "iPhone

5,8 "iPhone

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

ПРИМЕЧАНИЕ По умолчанию контроллеры представления поддерживают все ориентации на iPad и все ориентации, кроме перевернутого портрета на iPhone (руководство разработчика см. В разделе supportInterfaceOrientations). Некоторые устройства, такие как iPhone X, не поддерживают перевернутый портретный режим, независимо от того, поддерживает ли это ваше приложение.

Применение полей удобочитаемости при отображении текста на более крупных устройствах. На этих полях текстовые строки достаточно короткие, чтобы обеспечить удобство чтения.

Адаптация к изменениям в контексте

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

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

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

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

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

Полноэкранное 4,7 "изображение устройства

Обрезка на 5,8 "устройстве

Почтовый ящик

на устройстве 5,8 "

Полноэкранное 5,8 "изображение устройства

Обрезка на 4,7-дюймовом устройстве

Pillarboxing на 4,7-дюймовом устройстве

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

Проектирование полноэкранного режима

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

Избегайте явного размещения интерактивных элементов управления в самом низу экрана и в углах. Люди используют жесты смахивания в нижней части экрана для доступа к таким функциям, как Главный экран и переключатель приложений, и эти жесты могут отменять пользовательские жесты, которые вы используете в этой области.Дальние углы экрана могут быть труднодоступными для людей.

Вставить необходимый контент для предотвращения отсечения. В целом, контент должен быть центрирован и симметрично вставлен, чтобы он отлично смотрелся в любой ориентации, не был обрезан закругленными углами, не скрывался корпусом датчика и не скрывался индикатором доступа к главному экрану. Для достижения наилучших результатов используйте стандартные предоставляемые системой элементы интерфейса и автоматическую компоновку для создания интерфейса и придерживайтесь руководств по компоновке и безопасной области, определенной UIKit.Когда устройство находится в горизонтальной ориентации, для некоторых приложений, таких как игры, может быть целесообразным размещать смещаемые элементы управления в нижней части экрана (расширяющейся ниже безопасной области), чтобы обеспечить больше места для содержимого. Используйте соответствующие вставки при размещении элементов управления в верхней и нижней частях экрана и оставляйте достаточно места вокруг индикатора «Домой», чтобы люди случайно не нацеливались на него при попытке взаимодействия с элементом управления. Поскольку индикатор «Домой» остается в центре экрана, его расположение относительно интерфейса вашего приложения может измениться.

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

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

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

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

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

Дополнительные соображения по компоновке

Убедитесь, что ваш веб-сайт отлично смотрится на экране от края до края. См. Разработка веб-сайтов для iPhone X на webkit.org.

,