Вступ
0:00
Привіт друзі в цьому відео я покажу вам
0:02
як створити ефективний дизайн форми
0:04
входу в свій кабінет і Поділюсь з вами
0:06
кількома порадами щоб ваш дизайн цієї
0:08
частини сайту ні в якому разі не
0:09
виглядав Ось так або Так
0:13
[музика]
0:18
поїхали Отже в формі входу в систему вам
Основні елементи форми
0:21
не знадобиться величезний список
0:23
елементів в основному це лише два
0:25
текстових поля для введення електронної
0:27
пошти і паролю посилання на відновлення
0:30
паролю кнопка заклику до дії тобто входу
0:32
в систему та додаткова кнопка
0:34
переадресації на форму реєстрації якщо
0:37
користувач на сайті вперше і ще немає
0:39
облікового запису за бажанням можна
0:41
додати кнопки входу через соціальні
0:43
мережі та чекбокс з можливістю зберегти
0:45
дані користувача Давайте розглянемо ось
Аналіз прикладу форми
0:47
цю форму більш детально Я знайшла її на
0:50
відомому українському сайті екатаalog І
0:52
на такому прикладі спробую пояснити що
0:54
на мою думку варто змінити Та зроблю
0:56
редизайн цієї форми по-перше вхід тут
0:59
чомусь виконується у два кроки спочатку
1:01
ми нажимаємо на кнопку увійти після
1:04
цього вибираємо яким способом Ми хочемо
1:06
увійти і тільки тоді вписуємо дані в
1:08
форму це займає більше часу користувача
1:11
а користувачі Як вам відомо дуже
1:13
нетерплячі тому в своєму варіанті Я
1:16
відображу всі необхідні елементи одразу
1:18
в одному вікні почнемо з текстових полів
Проєктування текстових полів
1:21
тут вони трохи заширокі відносно своєї
1:23
висоти ідеальна висота текстових полів
1:26
знаходиться в діапазоні 44-48 пікселів
1:29
на найкращим розміром тексту в
1:31
текстовому полі є 16 пунктів висота
1:34
лінії 150%. створюємо автолейаут і
1:37
налаштовуємо внутрішні відступи Зверху
1:40
Та знизу по 12 пікселів а з боків 16
1:43
пікселів заокруглюємо кути і додаємо
1:47
контур пізніше Ми змінимо ширину
1:49
текстового поля зверху додамо лейбл
Дизайн міток
1:52
вирівняне по лівому краю текстове поле з
1:54
вирівняним по лівому краю трохи вище
1:56
лейблом це завжди найкращий вибір як для
1:59
вебсайтів та як і для мобільних додатків
2:01
його найпростіше читати сприймати та
2:03
заповнювати тому що наші очі звикли
2:06
рухатися вздовж лівого краю намагайтесь
2:08
Не розміщувати лейбл всередині
2:10
текстового поля тому що коли користувач
2:12
переходить до введення тексту лейбл
2:14
зникає і він може забути що тут потрібно
2:16
було вписати розмір лейбла буде 14
2:19
пунктів висота лінії 120%. і товщина
2:23
семіболт правильний відступ між
2:25
текстовим полем Та лейблом - це
2:26
використання висоти однієї або півтори
2:29
великої Лі лейплу це в нашому випадку
2:31
буде 12 пікселів створюємо автолеayoutт
2:34
далі дублюємо все і розміщуємо нижче це
Поле пароля та додаткові функції
2:37
буде поле паролю змінюємо
2:46
текст вибираємо в налаштуваннях
2:48
автолейауту текстового поля іл
2:55
контейнер також в полі паролю варто
2:58
додати іконку для функції прихо та
3:00
показати
3:02
пароль розміщуємо її справа замість
3:04
посилання на відновлення паролю його ми
3:07
розмістимо трохи
3:10
нижче розмір тексту буде також 14
3:13
пунктів а висота лінії 120%. воно має
3:16
знаходитись ближче до поля пароль
3:18
Наприклад якщо відстань між ail і
3:20
паролем дорівнює 24 Пікселі то відстань
3:23
між написом відновити пароль і текстовим
3:25
полем в пароль має бути вдвічі меншою
3:27
тобто 12 Пікселів розширимо трохи наші
3:30
елементи А справа розмістимо чекбокс з
3:32
можливістю зберегти дані
3:45
користувача налаштуємо розмір
3:51
тексту створюємо автолейаут тексту і
3:54
чекбоксу налаштовуємо відступ створюємо
3:57
ще один автолейаут разом з відновити
3:59
пароль і вставляємо його в автолейаут з
4:02
паролем відступ від одного текстового
4:05
поля до лейбла наступного має бути
4:06
мінімум в двічі більшим щоб було
4:08
зрозуміло де закінчується одне поле і
4:11
починається інше створюємо автолейаут
Дизайн кнопок заклику до дії
4:14
далі йде найважливіший елемент заклик до
4:16
дії розмір тексту буде 16 пікселів
4:20
товщина семіболт висота лінії
4:23
150% створюємо автолейаут внутрішні
4:27
відступи Зверху Та знизу будуть 16
4:29
Пікселів а по боках 32 Пікселі пізніше я
4:32
збільшу ширину кнопки далі заокруглюю
4:35
кути і додаю
4:36
[музика]
4:40
заливку заокруглення тут потрібні тому
4:43
що всюди на сайті вони присутні окрім
4:45
цієї форми кнопка входу завжди повинна
4:47
мати найбільше простору навколо себе і
4:50
при цьому бути достатньо пов'язаною з
4:52
двома текстовими полями форми розмістимо
4:54
її на відстані 36 пікселів далі як
4:57
альтернативу потрібно запропонувати
Соціальні кнопки для входу
4:59
увійти за допомогою Google та Facebook
5:02
вставляємо текст або увійти за
5:05
допомогою розмір тексту буде 14 пунктів
5:08
а висота лінії
5:10
120%. дублюємо нашу кнопку змінюємо
5:15
текст вставляємо іконку логотипа Google
5:18
налаштовуємо відступ і змінюємо колір
5:21
кнопки на менш помітний це буде означати
5:24
що ця кнопка менш важлива ніж кнопка
5:26
увійти Аналогічно зробимо кнопку
5:29
Facebook
5:33
текст і кнопки розміщуємо на відстані 36
5:35
пікселів від кнопки увійти тому що ці
5:38
кнопки не мають відношення до форми вище
5:40
а відступ від тексту до двох кнопок буде
5:42
12 пікселів створюємо автолеayoutт
5:45
кнопок далі кнопок і тексту І кнопки
5:49
увійти та кнопок соціальних мереж ну і з
Посилання на реєстрацію
5:52
самого низу запропонуємо користувачу
5:55
зареєструватися так як це другорядна дія
5:57
то шрифт буде 14 пунктів висота лінії
6:01
150% І виділимо слова зареєструйтесь
6:06
тут відступ від кнопки до тексту зробимо
6:09
найбільшим 48
6:11
пікселів і залишився тільки заголовок
Дизайн та фіналізація створення форми
6:14
він може бути на два або чотири пункти
6:16
більшим від основного тексту зробимо
6:19
його 20 пунктів товщиною семіболт із
6:22
висотою лінії
6:24
1%. розмістимо його також на відстані 48
6:27
Пікселів об'єднуємо автолейаут з формою
6:30
та кнопками і знову створюємо автолейаут
6:33
з заголовком і пропозицією
6:35
зареєструватися відступи по ширині
6:37
можемо зробити 64 Пікселі а по висоті 96
6:42
розширимо трохи форму приблизно до 488
6:45
пікселів налаштуємо всі елементи в
6:48
автолейауті
6:54
[музика]
7:06
[музика]
7:11
[музика]
7:14
змінюємо колір фону на білий заокруглимо
Вибір кольорової гами
7:17
кути також вставимо іконку хрестика
7:19
справа
7:21
вверху далі змінимо кольори наших
7:24
елементів кнопка буде синього кольору як
7:26
на сайті екаталог а текст та інші елемен
7:29
елементи будуть трохи світлішими та
7:31
темнішими в залежності від того
7:32
наскільки важливіші вони відносно інших
7:35
але всі елементи будуть з відтінком
7:37
основного кольору спостерігайте за тим
7:39
як я змінюю налаштування кольору в
7:41
кожному з елементів створюючи ієрархію
8:00
[музика]
8:27
[музика]
8:33
Я вважаю що стало краще А ви як думаєте
Підсумок
8:36
напишіть в коментарях на цьому все
8:38
сподіваюсь що вам сподобалось Якщо ви
8:40
хочете ще більше уроків напишіть про це
8:42
в коментарях а також Ставте лайки цьому
8:44
відео та підписуйтесь на канал З вами
8:46
була адолька до зустрічі