Привіт друзі! Ви коли-небудь замислювались над тим, якою саме має бути сторінка з вибором тарифів? Ні? Тоді це відео саме для вас. Почнемо!
Якщо ви потрапили на цей канал вперше і цікавитесь всім, що пов’язано з Adobe Illustrator і Figma, підпишіться на канал і натисніть на дзвіночок, щоб не пропустити нові відео.
Отже, у мене є текст з назвами та описом тарифів для приватного медичного закладу, згенерований чатом GPT. Також є деякі компоненти, стилі та сітка. Якщо вам цікаво дізнатись, як створювати ці елементи дизайну, ви можете переглянути мої попередні відео по цих темах.
Копіюємо ось цю частинку тексту, це буде наш заголовок. Встановлюємо йому розмір 32 пікселя, звужуємо та розміщуємо по центру. Далі копіюємо текст “Оберіть свій пакет” і налаштовуємо йому колір.
Копіюємо перший термін опіки, вставляємо на нашу робочу область, прибираємо ось цю одиничку, знижку 10% перенесемо в другий рядок, напишемо її в дужках, вирівняємо текст по правому боці, 24 місяці виділимо жирним, а текст “знижка 10%” трішечки зменшимо.
Дублюємо наш текст, вирівнюємо по правому боці і змінюємо на 12 місяців, лишні видаляємо. Між цими термінами створимо перемикач. Вставляємо круг, дублюємо його, створюємо автолейаут, змінюємо педінги, робимо червону заливку, заокруглюємо кути і зафарбовуємо круги в білий колір. В одному з них прибираємо заливку. Розміщуємо перемикач посередині між текстом та створюємо автолейаут.
Далі копіюємо та вставляємо на робочу область назву першого пакету, опис та його ціну і налаштовуємо їм розміри. Вставляємо кнопку і змінюємо її назву. Створюємо автолейаут, додаємо контур та заокруглюємо кути.
Нижче покажемо можливості, які будуть доступні в цьому пакеті. Це дуже важливо, і бажано, щоб набір можливостей максимально відрізнявся у всіх пакетах. У нас цей набір відрізнятиметься кількістю спеціалістів, досліджень, обстежень, процедур та іншого.
Отже, ми скопіювали та налаштували першу можливість, додаємо галочку перед текстом, вставляємо ці два об’єкти в автолейаут, а тепер створимо ще один автолейаут. Виділяємо наш перший автолейаут з галочкою та текстом і натискаємо Command + D, щоб дублювати його ще декілька разів. Налаштуємо автолейаут так, як я показую на екрані.
Далі вставляємо інші можливості даного пакету. Поки я копіюю текст, поділюсь з вами цікавими фактами про сторінку з тарифами. Згідно з дослідженням CXL Institute, люди витрачають найбільше часу на вивчення перших двох тарифних планів, які розташовані зліва. Тобто, якщо ми розміщуватимемо найдорожчі тарифи зліва, то набагато більше людей зупинятимуться саме на цих варіантах.
Важливо також пам’ятати, що люди люблять вибирати. Ви помітили, що багато хто пропонує два або три варіанти тарифів? Зазвичай це безкоштовний варіант, оптимальний і якийсь супер крутий тарифний план. І це не просто так. Річ у тім, що люди можуть оцінити продукт тільки тоді, коли порівнюють його з іншим продуктом: Coca-Cola з Pepsi, Samsung з Apple і так далі. Самі по собі продукти не можуть бути оцінені об’єктивно, тому що їм немає альтернатив. Тільки порівнюючи щось, ми можемо оцінити, який продукт нам подобається, а який ні. Так і з тарифами: якщо є вибір, то більше ймовірності, що люди щось виберуть і придбають.
Ми перенесли весь текст, тепер робимо автолейаут і створюємо компонент. Вставляємо ще два таких компоненти на робочу область. Давайте виділимо другий пакет. Це робиться для того, щоб люди звернули на нього увагу та найчастіше купували. Давайте ще замінимо назви та ціни двох інших пакетів, а можливості можемо залишити ті самі, адже тут зміни будуть тільки в цифрах.
На цьому все. Сподіваюсь, що вам сподобалось. Якщо ви хочете ще більше уроків по Figma, напишіть про це в коментарях, а також ставте лайки цьому відео та підписуйтесь на канал. З вами була Адолька, до зустрічі!