UXPUB

UXPUB - сообщество из 2,891 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Стилі дизайну інтерфейсів
Xperience
Xperience

Опубликовано

Стилі дизайну інтерфейсів

Коли Apple представила App Store у 2008 році, це створило революцію в індустрії додатків. З цього дня кожен, хто має комп’ютер, зміг створювати та публікувати свої програми по всьому світу. Щоб відповідати поточним додаткам за замовчуванням в iOS, багато дизайнерів імітували скевоморфний ​​стиль Apple, і це стало стандартом на багато років.

Скевоморфізм

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

Плоский дизайн

Плоский дизайн (Flat Design) дозволяє створювати більш прості дизайни в порівнянні зі скевоморфізмом. Це мінімалістичний підхід до дизайну і вперше був застосований Microsoft у своїй системі Windows. Щоб зазначити програми плоский дизайн створює зображення, подібні до піктограм, а не намагається перенести реальні речі в макет
Плоский дизайн

Неоморфізм

Неоморфізм (від нео-скевоморфізм) виник у результаті поєднання скевоморфізму та плоского дизайну. Neumorphism використовує світло та тіні, щоб створити дійсно чисті інтерфейси. Перейдіть до Neumorphism.io, щоб створити кілька дійсно крутих кнопок!
Неоморфізм

Додаткова інформація

Є цікаве відео, старе, але гарне, про скевоморфізм проти плоского дизайну. Він показує багато цікавих фактів про еволюцію дизайну інтерфейсу користувача.


Створіть неоморфну ​​кнопку

Для цієї вправи ми працюватимемо в Figma, але не соромтеся використовувати свій улюблений інструмент дизайну. Знайдіть логотип Swift. Поруч намалюємо коло розміром 245 * 245, натиснувши O.
Створіть нейроморфну ​​кнопку

Далі додамо до кола лінійний градієнт. У верхньому кінці ми будемо використовувати #F2F6FF, а в нижньому - #FFFFFF. Переконайтеся, що градієнт має діагональ зверху зліва до нижнього правого.
лінійний градієнт

Розмістіть логотип Swift в середині овалу. Тепер надайте дві тіні логотипу Swift, щоб ми могли створити вигляд глибини. Для першої тіні поставте 20 для X і Y, 40 для Розмиття, а для кольору використовуйте #000000 з непрозорістю 40%.
Розмістіть логотип

Для другої тіні додайте такі значення: 250 для розмиття, 0 для X і Y і для кольору #4037D8 з 61% непрозорості.
Для другої тіні

Тепер попрацюємо над нашим овалом. Ми додамо до нього чотири ефекти, щоб створити свого роду 3D-візуал. Спочатку додайте тінь з такими значеннями: для X і Y -31, 62 для Розмиття і для кольору #FFFFFF з 50% непрозорості.
попрацюємо над нашим овалом

Далі додайте Внутрішню тінь з -12 для X і Y, 12 для Розмиття, встановіть колір на #BECCE5 зі 100% непрозорістю.
додайте Внутрішню тінь

Потім додайте нову внутрішню тінь з 6 для X і Y, 12 для Розмиття і #FFFFFF зі 100% непрозорістю.
додайте нову внутрішню

Нарешті, додайте нову тінь для кола, для X і Y давайте поставимо 62, для розмиття 124 і встановимо колір на #D9E1F2 зі 100% непрозорістю. Після того, як ви додасте всі ці параметри, ви помітите, як красиво ми перетворюємо просте коло в нейроморфну ​​кнопку.
перетворюємо просте коло в неоморфну ​​кнопку

Висновок

Як дизайнери, ми відповідальні за розуміння еволюції ринку та за те, куди саме ми повинні спрямувати наші зусилля. "Чого вчитися далі?" — це питання, яке ми повинні постійно собі задавати.

Переклад designcode.io

Обсуждение (0)