У цьому текстовому керівництві ти крок за кроком дізнаєшся, як створити екран додатку у Sketch. Ми зосередимося на основах і деяких перевірених принципах дизайну, щоб створити привабливий інтерфейс. Ти побачиш, що процес простий і зрозумілий, і вже незабаром зможеш створити свої власні дизайни.
Основні висновки
- Використання Sketch для створення макетів екрану додатка
- Важливі принципи дизайну для привабливих інтерфейсів
- Використання кольорових кодів та символів для спрощення процесу дизайну
Крок за кроком керівництво
Щоб почати свій дизайн, відкрий Sketch і створіть новий документ для свого екрану додатка.
Перш за все, вибери iPhone 8 як свій каркас дизайну. Має сенс почати з менше екрана, оскільки цей підхід полегшує адаптацію до більших дисплеїв.
Tепер відкрий оригінальний додаток або дизайн, який ти хочеш використати як шаблон. Ми додамо навігацію, яка підтримує структуру твого додатка. Почни з вибору навігаційних елементів.
Клікни на робочій області та назви панель як «Home Background Color». Щоб переконатися, що твій фон не є прозорим, встанови простий фон спочатку білий.
На наступному етапі ти зосередишся на створенні елемента курсу. Для цього натисни на область і почни створювати картку курсу. Ти створиш картку в чіткому, простому дизайні, що дотримується принципів плоского дизайну.
Для дизайну картки важливий фон. Ти можеш використовувати простий синій, щоб досягти миттєвого візуального відділення. Або можеш експериментувати з градієнтами, щоб додати глибини та виміру.
Тепер встав текст для курсу. При цьому ти можеш налаштувати текстове поле, щоб переконатися, що текст знаходиться по центру і добре читається. Проміжки навколо тексту є вирішальними. Переконайся, що ти залишаєш близько 16 пікселів з боків, щоб досягти гармонійної композиції.
Коли ти впорядкував відстані та текстове поле, створіть опис курсу. Також для мітки опису важливо звертати увагу на розмір. Значення близько 14 пунктів шрифту забезпечить хорошу читаємість.
Після того, як ти реалізував основні елементи, ти можеш створити додаткові символи. Вони будуть корисні, якщо ти хочеш багаторазово використовувати схожі елементи у своєму дизайні. Створи символ для картки курсу, щоб ти міг повторно використовувати його в інших частинах свого додатку.
Коли ти створиш свій символ, він автоматично оновить зміни в усіх примірниках. Тепер ти можеш налаштувати заголовок і опис свого курсу, не змінюючи все вручну. Використовуй прості текстові позначення, щоб забезпечити чітку структуру.
Щоб зробити свої картки візуально привабливими, додай тінь. Переконайся, що тінь є м'якою, щоб не перевантажувати дизайн. Легка тінь робить елементи більш виразними та допомагає їм краще вписуватися в загальну картину.
Використовуй округлі кути для своїх карток, щоб підвищити візуальну привабливість. Радіус кута 8 забезпечує сучасний, чистий вигляд, який відповідає стандартам дизайну Apple.
Тепер створіть чіткий заголовок над карткою курсу, щоб оптимізувати навігацію для користувача та краще структурувати контент. Переконайся, що висота та відстань до попереднього елемента залишаються послідовними.
Нарешті, важливо думати про єдиний дизайн. Залишай відстані між усіма елементами та краями однорідними, щоб створити гармонійний загальний вигляд.
Підсумок - Створи привабливий екран додатку з Sketch
Сьогоднішні кроки показали тобі, як створити функціональний і привабливий екран додатку з Sketch. Застосовуючи прості принципи дизайну та навігації для користувачів, ти можеш створити додаток, який є як візуально привабливим, так і добре функціонує.
Поширені запитання
Як я починаю з Sketch?Ти відкриваєш Sketch і створюєш новий документ.
Який пристрій я повинен вибрати як шаблон?iPhone 8 підійде добре, адже він має стандартний розмір.
Наскільки важливі відстані в дизайні?Відстані є вирішальними для чистого і привабливого дизайну.
Що таке символи в Sketch і як я їх використовую?Символи дозволяють створювати повторювані елементи дизайну та застосовувати зміни усюди.
Як я можу додати тіні до мого дизайну?Додай тіні через налаштування для «Шарів» в Sketch.
