Як додати дані до дизайну ескізів

Sep 15, 2025

Як

Екранний дизайн пройшов довгий шлях за останні кілька років. Хек, ми навіть не говорили "Екран-дизайн" кілька років тому. Оскільки показники графічних дизайнерів та ілюстраторів розвиваються для вирішення дизайну екрану, то також повинен наш інструмент. Ми більше не створюємо статичних, сингулярно витончених частин мистецтва - ми плануємо жити, дихальні системи дизайну, які повинні працювати в різних середовищах.

Цей новий набір вимог народжував вибух гнучких, зосереджених нових інструментів. Мій улюблений купа - це ескіз, зростаюча зірка з команди в богемному коду.

Ескіз дозволяє мені працювати швидше, ніж я коли-небудь мріяв, всім, звільняючи мене, щоб зробити те, що мені краще: дизайн. Це досить легке, щоб швидко прототип і досить сильний, щоб піти високу вірність, коли я готовий. Одним з найбільших сильних сторін ескізу є його зростаюча спільнота, яка створила величезний вибір плагінів, які витягують ескіз у будь-якому напрямку, який ви хочете.

Ремесло , від Invision Labs, спрямований на владу дизайну робочого процесу майбутнього. Він пропонує зростаючий набір інструментів, всі побудовані, щоб заощадити час і додати реалізм при проектуванні. Час походить від незліченних збережених кроків (до побачення копію та вставки!), І реалізм походить від швидкого доступу до реальних даних та вмісту (до побачення Lorem IPSUM!).

У цьому уроці ми подивимося на використання трьох ключових інструментів з ремесла: фотографії, тип та дублікат, щоб створити повний та реалістичний дизайн екрану для списку контактів.

01. Налаштуйте свою монтажну дошку

Почнемо, створивши новий документ у ескізі та встановлення монтажної роботи для роботи всередині. У свіжому документі, натисніть Insert & gt; Монтажний або просто А Ключ для активації інструменту арматури.

У правій панелі ви побачите меню, заповнене попередньо визначеними розмірами монтажними дошками (створена для відповідності популярними пристроями та сценаріями). Виберіть iPhone 6, а монтаж буде створено для вас у центрі полотна.

02. Намалюйте заголовок

Хоча ми спеціально створюємо список контактів у цьому уроці, нам потрібні деякі додаткові інтерфейсні біти для завершення ілюзії. З інструментом прямокутника ( Insert & gt; Прямокутник або Г ), витягніть заголовок через вершину монтажу. Вставте назву "Контакти", а деякі значки для хорошої міри, як "меню" та "пошук", у лівому та правому куті кратки, відповідно.

03. Створіть нижній колонтитул

Add a tabbed footer, with a floating action button for adding a new contact — Додайте вкладку, з плаваючою кнопкою дії для додавання нового контакту

Перш ніж дістатися до даних, давайте також створимо швидкий вкладковий нижній колонтитул, укомплектований з кнопкою Fab (Floating Action) для додавання нового контакту. З інструментом прямокутника, витягніть білий прямокутник і покладіть його на нижню частину монтажної дошки. Використання овального інструменту ( Insert & gt; Овальний або O ), намалюйте коло для Fab.

04. Вставте значки

Далі вставити деякі піктограми, щоб показати користувач, де натиснути: A "Plus" всередині Fab, значок "користувач" на вкладці ліва, а значок "Історія" справа. Ми також додамо індикатор - просту чорну лінію - щоб показати, що Контакти Вибрано вигляд. Тепер також прекрасний час, щоб встановити колір тлі кольору (чорний), який ви можете зробити, вибравши монтування, а потім вибираючи колір у інспекторі.

05. Створіть контактний елемент

На нашому сцені настав час створити єдиний контактний елемент. Це елемент, який буде заповнений даними, дублюються та розташований у сітку, щоб заповнити повний список контактів. Почнемо з простого кола, який буде діяти як заповнювач для аватара (фото, який представляє кожного користувача).

06. Зробіть текстові шари

Add text layers where the names and addresses of your contacts will sit — Додати текстові шари, де імена та адреси ваших контактів будуть сидіти

Поряд з овалом, давайте також вставляємо пару текстових шарів. З Insert & gt; Текст або просто Т Ключ, скористайтеся текстовим інструментом, щоб вставити шар, який читає назву тут, а інший під ним, що читає повідомлення тут ". Це будуть шари, які ми заповнюємо дані з панелі типу всередині ремесла.

07. Виберіть ім'я

Using the Type panel, populate the design with some random names — Використовуючи панель типу, заповнити дизайн з деякими випадковими назвами

Час, щоб зробити ковбасу! Ми почнемо, вставимо справжнє ім'я та реальну адресу електронної пошти. По-перше, виберіть шар, який читає назву тут "та відкрийте панель типу (розташована в барі ремесла біля інспектора). Ви будете представлені з меню даних, щоб вибрати. Виберіть "імена", потім виберіть з чоловіків, жінок або обох. Ваш текстовий шар буде автоматично заповнений справжньою іменем.

08. Заповніть текстовий шар по електронній пошті

Ми збираємося заповнити текстовий шар електронної пошти так само, як ми зробили імена. Виберіть "Електронна пошта тут", відкрийте панель типу та виберіть адресу електронної пошти, щоб швидко вставити реалістичну адресу електронної пошти.

09. Випадкове обличчя

Select a source from which headshots can be pulled — Виберіть джерело, з якого можна витягнути голови

Далі ми хочемо заповнити це сіре коло з реальним аватаром фотографій, який ми будемо робити з панеллю фотографій. Почніть з вибору шару кола, а потім відкрийте "фотографії" з панелі ремесла. Тут у вас є кілька варіантів, наприклад, джерела з локальної папки, DropBox або веб-сторінки.

Тут я вибираю місцеву папку, повну зображень, які я завантажив з веб-сайту uifaces.com. Натисніть "Місце фотографії", а ремесло наповнить ваше коло з випадковим обличчям, зробленим з вашої колекції.

10. Створіть список контактів

Завдяки єдиному контакту, настав час створити повний список контактів. Перш ніж це зробити, давайте вставити невелику роздільну лінію під шарами, які ми просто створили.

11. Дублікат

Щоб повторити наш єдиний контактний елемент у цілий список, ми будемо використовувати дублікат ремесла. За допомогою вибраної групи відкрийте дублікатну панель та перегляньте параметри.

У нас є два варіанти: всередині відбору та конкретного розрахунку. Перший дозволяє вибрати область, яку ви хочете, щоб список, а потім заповнює його, однак багато елементів підходять. Друга дозволяє визначити точний підрахунок ("Я хочу, щоб сітка X-елементів шириною і y елементів високою").

12. Використання внутрішнього відбору

Ми будемо використовувати параметр "Всередині", який я знайшов ідеально підходить для дизайну екрану. Оскільки це вертикальний список, а не сітка, ми збираємося перевірити вертикальний варіант. Натисніть Duplicate Content, і ви побачите кілька речей.

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

13. Зміна розміру шару

Resize the Duplicate Control layer, and the contacts will multiply to fill the space — Зміна розміру дубліката керуючого шару, а контакти будуть помножити, щоб заповнити простір

Щоб зробити список контактів, заповнити весь екран, ми збираємося змінити розмір Дублікат керування шар. Просто візьміть нижню ручку форми і перетягніть його до нижньої частини монтажної дошки.

Як тільки ви відпустите, дублювати автоматично створюватиме більше контактних груп, щоб заповнити новий простір, знову заповнити кожну нову групу з свіжими даними.

14. Виправити інтервал

Тепер наш список на місці, ви можете помітити, що відстань не зовсім правильно. З ремеслом, регулюючі жолоби досить просте. З метою вибору дублікатного керуючого шару знову відкрийте дублікатну панель, і помічайте, що кнопка тепер читає відрегулюйте жолоби. Замість того, щоб наносити кожен новий шар навколо полотна, просто змініть варіант вертикального жолоба до 20, а потім натисніть кнопку Adjust Gutters. Ваш список автоматично зафіксується у правильному інтервалі.

15. Додайте прохолодний заголовок

З нашим списком завершено і заселений з реальними людьми, давайте подвійне назад до інтерфейсу та вставити трохи відчуття, можливо, у формі повного фото заголовка. Ми почнемо, вибравши оригінальну форму "заголовка-BG", яку ми намалювали за допомогою інструмента прямокутника, і змінюємо розмір його до першого контакту у списку. Заголовок, мабуть, повинен зупинитися навколо 20px з першого елемента, оскільки це той самий жолоб, який ми використовували у нашому списку.

16. Знайдіть правильне зображення

Unsplash is an impressive online photo resource — Unsplash - це вражаючий онлайн-ресурс фото

Зібравши нашу нещодавно розміщену форму, давайте відкриєте панель фотографій, а також голова до вкладки unsplash. Unsplash - це дивовижний онлайн-ресурс, наповнений бездоганним, високоякісними фотографіями.

Ремесло дозволяє фільтрувати за кольором і категорією, тому знайшов ідеальну фотографію для будь-якого випадку легше, ніж будь-коли. З нашою темною кольоровою схемою, я думаю, що простір категорія буде добре. Натисніть Place Photo, і ваша нова фотографія знизиться на місце.

17. Налаштування кольорів

Оскільки ремесло розміщує випадкову фотографію, що базується на наших фільтрах, легко перемішати зображення знову і знову, доки ви не знайдете. Просто тримайте натискання фотографії, поки ви не любите, що ви бачите.

Фото Мені подобається трохи яскрава, тому я збираюся вимкнути його вниз, додаючи темний напівпрозорий заповнити на верхній частині зображення. Ескіз дозволяє "Складайте" наповнення на одну форму, тому все, що нам потрібно зробити, це натиснути маленький "+" значок у розділі "Заповніть секцію інспектора". Я додав 50 відсотків чорного шару на вершині зображення, який зараз виглядає прямо.

18.

There you have it – a realistic mockup full of data — Там у вас є - реалістичний макет, повний даних

Це все, що є! Нормальний божевільний тире, щоб знайти вміст, як правило, складається з пошуку, копіювання, вставки та повторюваності - більше не. Заповнення цілого макета з реалістичними даними - лише кілька кліків, і вам навіть не доведеться залишити свою улюблену програму дизайну.

Як додати дані до дизайну ескізів

01. Налаштуйте свою монтажну дошку

02. Намалюйте заголовок

03. Створіть нижній колонтитул

04. Вставте значки

05. Створіть контактний елемент

06. Зробіть текстові шари

07. Виберіть ім'я

08. Заповніть текстовий шар по електронній пошті

09. Випадкове обличчя

10. Створіть список контактів

11. Дублікат

12. Використання внутрішнього відбору

13. Зміна розміру шару

14. Виправити інтервал

15. Додайте прохолодний заголовок

16. Знайдіть правильне зображення

17. Налаштування кольорів

18.

Як - Найпопулярніші статті

Основне керівництво для переходів у мистецтві

Поверніть 2D ілюстрації в 3D-арт

Як створити робот з документом

Скульпт реалістична анатомія в Збраш

Як створити стилізовані ілюстрації ігри

Як підкреслити фокусну точку зображення

Як створити Custom Controls у Maya

Як зробити реалістичний спортивний автомобіль

Категорії