Исходный размер 1140x1600

Влияние скевоморфизма на восприятие интерфейсов

Данный проект является учебной работой студента Школы дизайна или исследовательской работой преподавателя Школы дизайна. Данный проект не является коммерческим и служит образовательным целям

Рубрикатор

1. Концепция 2. Скевоморфизм в IOS 3. Скевоморфизм VS плоский дизайн 4. Заключение 5. Библиография 6. Источники изображений

Концепция

В этом визуальном исследовании я рассмотрю эволюцию интерфейсов в сетевом искусстве и их взаимодействия со скевоморфизмом. Скевоморфизм — это техника дизайна, при которой элементы интерфейса имитируют реальные объекты и материалы, например, кнопка «включить» может иметь вид выключателя, а иконка карандаша — вид карандаша. Моя задача определить, как скевоморфизм влияет на восприятие интерфейсов и какие преимущества и недостатки имеют скевоморфные интерфейсы по сравнению с плоскими интерфейсами.

Скевоморфизм был популярен в дизайне интерфейсов в течение многих лет, его можно увидеть в различных приложениях и операционных системах. Например, кнопки в виде физических кнопок на старых телефонах, или календарь, который имеет внешний вид физического календаря со страницами. Влияние скевоморфизма на восприятие интерфейсов может быть как положительным, так и отрицательным.

С одной стороны, скевоморфизм может сделать интерфейс более интуитивным и понятным для пользователей, так как элементы интерфейса имеют внешний вид, который напоминает реальные объекты. Это может помочь пользователям быстрее и легче находить нужную информацию и выполнять задачи.

С другой стороны, скевоморфизм может привести к ненужным ограничениям в дизайне интерфейсов. Например, кнопка в виде физической кнопки может занимать больше места на экране, чем кнопка без скевоморфизма. Это может привести к тому, что интерфейс будет занимать больше места на экране, что может быть неудобно для пользователей.

Сегодня считается, что скевоморфизм как стиль уже устарел, но на самом деле скевоморфизм как метафора в дизайне будет актуален еще долго, так как это способ объяснять людям сложное и новое через простое и понятное. Он может быть использован для создания уникального и запоминающегося визуального стиля, который помогает пользователям лучше понимать, как использовать приложение или устройство. Однако, метафоры скевоморфизма не всегда должны быть прямыми копиями физических объектов. Они могут быть более абстрактными, чтобы передать определенную идею или концепцию. Например, в приложении для заметок, страницы могут быть представлены в виде блокнота, чтобы передать идею, что это место для записей и заметок.

Стив Джобс (1955-2011) и Стив Возняк

В целом, скевоморфизм как метафора в дизайне интерфейсов может быть очень эффективным инструментом для передачи концепций и значений, особенно для новых пользователей. Однако, он должен быть использован с умом и не должен отвлекать от функциональности интерфейса.

В качестве примеров я буду рассматривать интерфейсы IOS, так как тренд на использование скевоморфизма был введен именно Стивом Джобсом и использовался в IOS до 2013 года. После в Apple упростили дизайн и, начиная с 7-й версии операционной системы, скевоморфизм не использовали. Именно эти привычные для нас новые интерфейсы я буду сравнивать со скевоморфными.

Скевоморфизм в IOS

В 2007 году Apple представила iPhone и новую операционную систему, которая не имела названия. Несмотря на это, через 7 лет она стала одной из самых популярных мобильных платформ в мире.

Исходный размер 1152x823

iPhone OS 2

Стив Джобс был уверен, что скевоморфный дизайн интерфейса iPhone сделает его более дружелюбным.

Исходный размер 784x520

Интерфейс первой версии iOS

Исходный размер 640x960

iOS 4.1

Исходный размер 803x586

приложение для создания заметок в виде реального блокнота

В приложении для создания заметок использована метафора блокнота, чтобы создать уникальный и запоминающийся визуальный стиль. Это позволяет пользователям лучше понимать, как использовать приложение, и добавляет некоторую оригинальность в дизайн интерфейса.

Исходный размер 1600x1200

календарь в IOS 4

Исходный размер 760x671

скефоморфные приложения IOS 4

Исходный размер 1600x1073

Game Center в виде стола в казино в IOS 4

Исходный размер 1280x720

Приложение компаса было одним из многих примеров радикальных изменений в пользовательском интерфейсе, которые произошли с переходом от iOS 6 (слева) к iOS 7 (справа).

Исходный размер 1547x1347

приложение iCal и кресла в личном самолете Джобса

Кожаная обшивка в приложении iCal вероятно была основана на креслах в личном самолете Джобса

iBooks — прекрасный пример того, как скевоморфизм может быть использован в дизайне интерфейсов. В приложении перелистывание страниц, как в настоящей книге, создает потрясающий визуальный эффект и добавляет удобство использования. Это является примером того, как скевоморфизм может быть использован для создания оригинального и запоминающегося дизайна интерфейса.

Заметим, что изначальная идея оформить приложение, где хранятся ваши книги на телефоне в виде реальной книжной полки остается, меняется только дизайн.

Исходный размер 1600x826

приложение iBooks в IOS 4

Исходный размер 650x577

приложение iBooks в IOS 4

Скевоморфизм VS плоский дизайн

В 2013 году Apple выпустили IOS 7, где отказались от идеи скевоморфизма и перешли к полной его противоположности — плоскому дизайну.

Исходный размер 640x420

резкий переход к плоскому дизайну в IOS 7

Исходный размер 2000x676

эволюция интерфейсов IOS

Исходный размер 1545x1347

IOS 4 (слева) и IOS 7 (справа)

В IOS 7 иконка «списка для чтения» поменяла свой внешний вид и стала выглядеть как очки Стива Джобса.

Исходный размер 652x668

иконка «списка для чтения» в IOS 7

Исходный размер 615x760

эволюция иконок от IOS 1 до IOS 8

Исходный размер 615x552

эволюция иконок от IOS 1 до IOS 8

Исходный размер 1136x640

«плоский» календарь в IOS 7

Исходный размер 630x542

поисковая строка в IOS 4 и IOS 7

Исходный размер 1540x616

приложения iBooks и компас в IOS 4 и IOS 7

Исходный размер 1285x960

мессенджер в IOS 4 и IOS 7

Смесь скевоморфизма и плоского дизайна была использована Apple еще в 1984 году в интерфейсе компьютера Lisa. На рабочем столе системы иконки были нарисованы так, чтобы напоминать реальные объекты. Однако, в то же время, интерфейс ОС был довольно простым и не содержал сложной графики и теней. Это пример того, как скевоморфизм и плоский дизайн могут быть использованы вместе, чтобы создать уникальный и оригинальный дизайн интерфейса.

Исходный размер 640x400

скевоморфизм вместе с плоским дизайном в интерфейсе компьютера Lisa

Исходный размер 610x405

скевоморфизм вместе с плоским дизайном в интерфейсе компьютера Lisa

Apple достигла баланса между скевоморфизмом и плоским дизайном в последние годы. В iOS 15 приложения Wallet, Notes и Weather — это лишь несколько примеров того, как скевоморфизм может быть использован в дизайне интерфейсов с учетом современных тенденций. Они сочетают в себе элементы реальных объектов с минималистичным дизайном, что создает уникальный и привлекательный визуальный стиль. Это пример того, как Apple продолжает развивать свой дизайн интерфейсов, чтобы соответствовать современным требованиям пользователей.

Исходный размер 1280x720

Приложения Wallet, Notes и Weather в iOS 15.

Исходный размер 1600x900

современный дизайн IOS 15 с использованием виджетов

Исходный размер 1180x730

заставка в IOS 16

«Мы иначе смотрим на дизайн. Дизайн — это не то, как продукт выглядит и воспринимается. Дизайн — это то, как он работает» — Стив Джобс.

По этой цитате можно предположить, что скорее всего Стиву Джобсу бы понравился плоский дизайн, так как он делает то, к чему Стив стремился всю жизнь — упрощает жизнь!

Заключение

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

Скевоморфизм должен быть использован с умом и не должен отвлекать от функциональности интерфейса. Современные тенденции в дизайне интерфейсов все больше и больше переходят к плоскому дизайну, что может ограничивать использование скевоморфизма. Тем не менее, он продолжает оставаться важным элементом в дизайне интерфейсов и может быть использован для создания оригинального и запоминающегося дизайна.

Библиография
1.

iOS 7: будущее будет ярким… и плоским // ITC [Электронный ресурс] Режим доступа: https://itc.ua/articles/ios-7-budushhee-budet-yarkim-i-ploskim/ (дата обращения: 15.04.2023)

2.

Скучаете по скевоморфизму? Я нет // iPhones.ru [Электронный ресурс] Режим доступа: https://www.iphones.ru/iNotes/642804 (дата обращения: 15.04.2023)

3.

Как Стив Джобс придумал скевоморфизм для Apple // Yablyk [Электронный ресурс] Режим доступа: https://yablyk.com/538773-kak-stiv-dzhobs-pridumal-skevomorfizm/ (дата обращения: 15.04.2023)

4.

Эволюция iOS — от iPhone OS до iOS 8: инфографика // Yablyk [Электронный ресурс] Режим доступа: https://yablyk.com/000923-evolyuciya-ios-infografika/ (дата обращения: 15.04.2023)

5.

Почему скевоморфизм должен вернуться в iOS // BIG geek mews [Электронный ресурс] Режим доступа: https://mews.biggeek.ru/pochemu_dolzhen_vernutsa_skeuomorphism/ (дата обращения: 17.04.2023)

6.

Чему Apple научилась у скевоморфизма и почему он по-прежнему актуален // applespbevent [Электронный ресурс] Режим доступа: https://applespbevent.ru/chiemu-apple-nauchilas-u-skievomorfizma-i-pochiemu-on-po-priezhniemu-aktualien/ (дата обращения: 17.04.2023)

7.

iOS 14 для дизайнеров: скевоморфизм, виджеты, App Сlips и обновлённый поиск // vc.ru [Электронный ресурс] Режим доступа: https://vc.ru/design/136428-ios-14-dlya-dizaynerov-skevomorfizm-vidzhety-app-slips-i-obnovlennyy-poisk (дата обращения: 17.04.2023)

8.

Что такое скевоморфизм // Skillbox [Электронный ресурс] Режим доступа: https://skillbox.ru/media/design/chto_takoe_skevomorfizm/ (дата обращения: 20.04.2023)

9.

ПЛОСКИЙ ДИЗАЙН ИЛИ СКЕВОМОРФИЗМ? // foykes [Электронный ресурс] Режим доступа:https://foykes.com/flat-or-skeuomorp/ (дата обращения: 20.04.2023)

10.

Новый интерфейс iOS 7. Подробности // iPhones.ru [Электронный ресурс] Режим доступа: https://www.iphones.ru/iNotes/ios-7-interface-detailed-rumor (дата обращения: 20.04.2023)

11.

Эволюция мобильной операционной системы от Apple — от iPhone OS до iOS 8 // blog.allo [Электронный ресурс] Режим доступа: https://blog.allo.ua/evolyutsiya-mobilnoj-operatsionnoj-sistemy-ot-apple-ot-iphone-os-do-ios-8_2015-04-12/ (дата обращения: 20.04.2023)

12.

Quick Look: What’s New In iOS 4.1 Beta // cult of mac [Электронный ресурс] Режим доступа: https://www.cultofmac.com/50930/quick-look-ios-4-1-beta/ (дата обращения: 20.04.2023)

13.

What’s New in iOS 7 // HONGKIAT [Электронный ресурс] Режим доступа: https://www.hongkiat.com/blog/apple-ios7-features/ (дата обращения: 23.04.2023)

14.

Скевоморфизм: да или нет? // republic [Электронный ресурс] Режим доступа: https://republic.ru/posts/1857916 (дата обращения: 23.04.2023)

15.

iOS // skillfactory media [Электронный ресурс] Режим доступа: https://blog.skillfactory.ru/glossary/ios/ (дата обращения: 23.04.2023)

16.

Вышла операционная система iOS 7 // lenta.ru [Электронный ресурс] Режим доступа: https://lenta.ru/news/2013/09/18/newios/ (дата обращения: 23.04.2023)

Источники изображений
1.2.

https://itc.ua/wp-content/uploads/2013/09/ios-7.jpg (дата обращения: 25.04.2023)

3.4.5.

https://itc.ua/wp-content/uploads/2013/09/IMG_3251.png (дата обращения: 28.04.2023)

6.

https://itc.ua/wp-content/uploads/2013/09/ku-xlarge.gif (дата обращения: 28.04.2023)

7.8.9.10.11.

https://applespbevent.ru/content/images/2022/08/image-26.png (дата обращения: 02.05.2023)

12.13.14.15.16.17.18.19.20.21.

https://itc.ua/wp-content/uploads/2013/09/IMG_3318.png (дата обращения: 04.05.2023)

22.

https://itc.ua/wp-content/uploads/2013/09/steve-jobs2.jpg (дата обращения: 04.05.2023)

23.

https://itc.ua/wp-content/uploads/2013/09/IMG_3299.png (дата обращения: 04.05.2023)

24.25.26.
Влияние скевоморфизма на восприятие интерфейсов
Проект создан 23.05.2023
Загрузка...
Мы используем файлы cookies для улучшения работы сайта и большего удобства его использования. Более подробную информац...
Показать больше