Original size 1140x1600

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

PROTECT STATUS: not protected
This project is a student project at the School of Design or a research project at the School of Design. This project is not commercial and serves educational purposes

Рубрикатор

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

Концепция

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

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

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

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

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

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

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

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

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

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

Original size 1152x823

iPhone OS 2

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

Original size 784x520

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

Original size 640x960

iOS 4.1

Original size 803x586

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

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

Original size 1600x1200

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

Original size 760x671

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

Original size 1600x1073

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

Original size 1280x720

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

Original size 1547x1347

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

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

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

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

Original size 1600x826

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

Original size 650x577

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

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

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

Original size 640x420

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

Original size 2000x676

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

Original size 1545x1347

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

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

Original size 652x668

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

Original size 615x760

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

Original size 615x552

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

Original size 1136x640

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

Original size 630x542

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

Original size 1540x616

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

Original size 1285x960

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

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

Original size 640x400

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

Original size 610x405

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

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

Original size 1280x720

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

Original size 1600x900

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

Original size 1180x730

заставка в IOS 16

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

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

Заключение

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

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

Bibliography
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)

Image sources
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.
Влияние скевоморфизма на восприятие интерфейсов
Project created at 23.05.2023