Рубрикатор
1. Концепция 2. Скевоморфизм в IOS 3. Скевоморфизм VS плоский дизайн 4. Заключение 5. Библиография 6. Источники изображений
Концепция
В этом визуальном исследовании я рассмотрю эволюцию интерфейсов в сетевом искусстве и их взаимодействия со скевоморфизмом. Скевоморфизм — это техника дизайна, при которой элементы интерфейса имитируют реальные объекты и материалы, например, кнопка «включить» может иметь вид выключателя, а иконка карандаша — вид карандаша. Моя задача определить, как скевоморфизм влияет на восприятие интерфейсов и какие преимущества и недостатки имеют скевоморфные интерфейсы по сравнению с плоскими интерфейсами.
Скевоморфизм был популярен в дизайне интерфейсов в течение многих лет, его можно увидеть в различных приложениях и операционных системах. Например, кнопки в виде физических кнопок на старых телефонах, или календарь, который имеет внешний вид физического календаря со страницами. Влияние скевоморфизма на восприятие интерфейсов может быть как положительным, так и отрицательным.
С одной стороны, скевоморфизм может сделать интерфейс более интуитивным и понятным для пользователей, так как элементы интерфейса имеют внешний вид, который напоминает реальные объекты. Это может помочь пользователям быстрее и легче находить нужную информацию и выполнять задачи.
С другой стороны, скевоморфизм может привести к ненужным ограничениям в дизайне интерфейсов. Например, кнопка в виде физической кнопки может занимать больше места на экране, чем кнопка без скевоморфизма. Это может привести к тому, что интерфейс будет занимать больше места на экране, что может быть неудобно для пользователей.
Сегодня считается, что скевоморфизм как стиль уже устарел, но на самом деле скевоморфизм как метафора в дизайне будет актуален еще долго, так как это способ объяснять людям сложное и новое через простое и понятное. Он может быть использован для создания уникального и запоминающегося визуального стиля, который помогает пользователям лучше понимать, как использовать приложение или устройство. Однако, метафоры скевоморфизма не всегда должны быть прямыми копиями физических объектов. Они могут быть более абстрактными, чтобы передать определенную идею или концепцию. Например, в приложении для заметок, страницы могут быть представлены в виде блокнота, чтобы передать идею, что это место для записей и заметок.
Стив Джобс (1955-2011) и Стив Возняк
В целом, скевоморфизм как метафора в дизайне интерфейсов может быть очень эффективным инструментом для передачи концепций и значений, особенно для новых пользователей. Однако, он должен быть использован с умом и не должен отвлекать от функциональности интерфейса.
В качестве примеров я буду рассматривать интерфейсы IOS, так как тренд на использование скевоморфизма был введен именно Стивом Джобсом и использовался в IOS до 2013 года. После в Apple упростили дизайн и, начиная с 7-й версии операционной системы, скевоморфизм не использовали. Именно эти привычные для нас новые интерфейсы я буду сравнивать со скевоморфными.
Скевоморфизм в IOS
В 2007 году Apple представила iPhone и новую операционную систему, которая не имела названия. Несмотря на это, через 7 лет она стала одной из самых популярных мобильных платформ в мире.
iPhone OS 2
Стив Джобс был уверен, что скевоморфный дизайн интерфейса iPhone сделает его более дружелюбным.
Интерфейс первой версии iOS
iOS 4.1
приложение для создания заметок в виде реального блокнота
В приложении для создания заметок использована метафора блокнота, чтобы создать уникальный и запоминающийся визуальный стиль. Это позволяет пользователям лучше понимать, как использовать приложение, и добавляет некоторую оригинальность в дизайн интерфейса.
календарь в IOS 4
скефоморфные приложения IOS 4
Game Center в виде стола в казино в IOS 4
Приложение компаса было одним из многих примеров радикальных изменений в пользовательском интерфейсе, которые произошли с переходом от iOS 6 (слева) к iOS 7 (справа).
приложение iCal и кресла в личном самолете Джобса
Кожаная обшивка в приложении iCal вероятно была основана на креслах в личном самолете Джобса
iBooks — прекрасный пример того, как скевоморфизм может быть использован в дизайне интерфейсов. В приложении перелистывание страниц, как в настоящей книге, создает потрясающий визуальный эффект и добавляет удобство использования. Это является примером того, как скевоморфизм может быть использован для создания оригинального и запоминающегося дизайна интерфейса.
Заметим, что изначальная идея оформить приложение, где хранятся ваши книги на телефоне в виде реальной книжной полки остается, меняется только дизайн.
приложение iBooks в IOS 4
приложение iBooks в IOS 4
Скевоморфизм VS плоский дизайн
В 2013 году Apple выпустили IOS 7, где отказались от идеи скевоморфизма и перешли к полной его противоположности — плоскому дизайну.
резкий переход к плоскому дизайну в IOS 7
эволюция интерфейсов IOS
IOS 4 (слева) и IOS 7 (справа)
В IOS 7 иконка «списка для чтения» поменяла свой внешний вид и стала выглядеть как очки Стива Джобса.
иконка «списка для чтения» в IOS 7
эволюция иконок от IOS 1 до IOS 8
эволюция иконок от IOS 1 до IOS 8
«плоский» календарь в IOS 7
поисковая строка в IOS 4 и IOS 7
приложения iBooks и компас в IOS 4 и IOS 7
мессенджер в IOS 4 и IOS 7
Смесь скевоморфизма и плоского дизайна была использована Apple еще в 1984 году в интерфейсе компьютера Lisa. На рабочем столе системы иконки были нарисованы так, чтобы напоминать реальные объекты. Однако, в то же время, интерфейс ОС был довольно простым и не содержал сложной графики и теней. Это пример того, как скевоморфизм и плоский дизайн могут быть использованы вместе, чтобы создать уникальный и оригинальный дизайн интерфейса.
скевоморфизм вместе с плоским дизайном в интерфейсе компьютера Lisa
скевоморфизм вместе с плоским дизайном в интерфейсе компьютера Lisa
Apple достигла баланса между скевоморфизмом и плоским дизайном в последние годы. В iOS 15 приложения Wallet, Notes и Weather — это лишь несколько примеров того, как скевоморфизм может быть использован в дизайне интерфейсов с учетом современных тенденций. Они сочетают в себе элементы реальных объектов с минималистичным дизайном, что создает уникальный и привлекательный визуальный стиль. Это пример того, как Apple продолжает развивать свой дизайн интерфейсов, чтобы соответствовать современным требованиям пользователей.
Приложения Wallet, Notes и Weather в iOS 15.
современный дизайн IOS 15 с использованием виджетов
заставка в IOS 16
«Мы иначе смотрим на дизайн. Дизайн — это не то, как продукт выглядит и воспринимается. Дизайн — это то, как он работает» — Стив Джобс.
По этой цитате можно предположить, что скорее всего Стиву Джобсу бы понравился плоский дизайн, так как он делает то, к чему Стив стремился всю жизнь — упрощает жизнь!
Заключение
Таким образом, можно сделать вывод о том, что скевоморфные интерфейсы имеют определенные преимущества по сравнению с плоскими интерфейсами, такие как более интуитивное восприятие и лучшую запоминаемость элементов интерфейса. Однако такие интерфейсы могут быть менее эффективными в случаях, когда необходимо максимально быстро выполнить задачу.
Скевоморфизм должен быть использован с умом и не должен отвлекать от функциональности интерфейса. Современные тенденции в дизайне интерфейсов все больше и больше переходят к плоскому дизайну, что может ограничивать использование скевоморфизма. Тем не менее, он продолжает оставаться важным элементом в дизайне интерфейсов и может быть использован для создания оригинального и запоминающегося дизайна.
iOS 7: будущее будет ярким… и плоским // ITC [Электронный ресурс] Режим доступа: https://itc.ua/articles/ios-7-budushhee-budet-yarkim-i-ploskim/ (дата обращения: 15.04.2023)
Скучаете по скевоморфизму? Я нет // iPhones.ru [Электронный ресурс] Режим доступа: https://www.iphones.ru/iNotes/642804 (дата обращения: 15.04.2023)
Как Стив Джобс придумал скевоморфизм для Apple // Yablyk [Электронный ресурс] Режим доступа: https://yablyk.com/538773-kak-stiv-dzhobs-pridumal-skevomorfizm/ (дата обращения: 15.04.2023)
Эволюция iOS — от iPhone OS до iOS 8: инфографика // Yablyk [Электронный ресурс] Режим доступа: https://yablyk.com/000923-evolyuciya-ios-infografika/ (дата обращения: 15.04.2023)
Почему скевоморфизм должен вернуться в iOS // BIG geek mews [Электронный ресурс] Режим доступа: https://mews.biggeek.ru/pochemu_dolzhen_vernutsa_skeuomorphism/ (дата обращения: 17.04.2023)
Чему Apple научилась у скевоморфизма и почему он по-прежнему актуален // applespbevent [Электронный ресурс] Режим доступа: https://applespbevent.ru/chiemu-apple-nauchilas-u-skievomorfizma-i-pochiemu-on-po-priezhniemu-aktualien/ (дата обращения: 17.04.2023)
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)
Что такое скевоморфизм // Skillbox [Электронный ресурс] Режим доступа: https://skillbox.ru/media/design/chto_takoe_skevomorfizm/ (дата обращения: 20.04.2023)
ПЛОСКИЙ ДИЗАЙН ИЛИ СКЕВОМОРФИЗМ? // foykes [Электронный ресурс] Режим доступа:https://foykes.com/flat-or-skeuomorp/ (дата обращения: 20.04.2023)
Новый интерфейс iOS 7. Подробности // iPhones.ru [Электронный ресурс] Режим доступа: https://www.iphones.ru/iNotes/ios-7-interface-detailed-rumor (дата обращения: 20.04.2023)
Эволюция мобильной операционной системы от 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)
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)
What’s New in iOS 7 // HONGKIAT [Электронный ресурс] Режим доступа: https://www.hongkiat.com/blog/apple-ios7-features/ (дата обращения: 23.04.2023)
Скевоморфизм: да или нет? // republic [Электронный ресурс] Режим доступа: https://republic.ru/posts/1857916 (дата обращения: 23.04.2023)
iOS // skillfactory media [Электронный ресурс] Режим доступа: https://blog.skillfactory.ru/glossary/ios/ (дата обращения: 23.04.2023)
Вышла операционная система iOS 7 // lenta.ru [Электронный ресурс] Режим доступа: https://lenta.ru/news/2013/09/18/newios/ (дата обращения: 23.04.2023)
https://www.iphones.ru/wp-content/uploads/2016/11/ios6_ios7_home_screens.jpg (дата обращения: 25.04.2023)
https://itc.ua/wp-content/uploads/2013/09/ios-7.jpg (дата обращения: 25.04.2023)
https://itc.ua/wp-content/uploads/2013/09/Moleskine-iPhone-835x547.jpg (дата обращения: 25.04.2023)
https://itc.ua/wp-content/uploads/2013/09/9158478879_d5e1bae8bd_z.jpg (дата обращения: 25.04.2023)
https://itc.ua/wp-content/uploads/2013/09/IMG_3251.png (дата обращения: 28.04.2023)
https://itc.ua/wp-content/uploads/2013/09/ku-xlarge.gif (дата обращения: 28.04.2023)
https://r6z4d5g2.rocketcdn.me/wp-content/uploads/2014/10/calculatorbig.jpg (дата обращения: 28.04.2023)
https://r6z4d5g2.rocketcdn.me/wp-content/uploads/2014/09/iphone-6-ios-8-infographic-full.jpg (дата обращения: 28.04.2023)
https://lh5.googleusercontent.com/w2ikskBQ5jgPa69EzqKJ2KXE_gP2WstiIKDPasHg_LLkHXO3feM06IYfIezeKD2B2Y2c9i_CkL1CqwxZRLbH2_kPi_IxWhCwUflGzM4O-PkDtCjI2iV-JxjhGAcgiF9VLzVJmgg (дата обращения: 28.04.2023)
https://lh4.googleusercontent.com/pV4ZIRlouupR1rizM0jwblhx3rkDcFyPXAFngoTvfKxQTzEmTj0iZKP7RmHWx96Y05HpMSnN4Zyb4z6a_asEnriDokbd2CKbMc4ADsg6BrseMTknqswmeNx5gs4c_uOVapCHy5U (дата обращения: 28.04.2023)
https://applespbevent.ru/content/images/2022/08/image-26.png (дата обращения: 02.05.2023)
https://www.iphones.ru/wp-content/uploads/2013/04/992_1gulfstream_GIV_cabin_seats_interior_wood.jpg (дата обращения: 02.05.2023)
https://www.iphones.ru/wp-content/uploads/2013/04/ical-skeuomorphic.jpg (дата обращения: 02.05.2023)
https://naked-science.ru/wp-content/uploads/2016/04/article_djobs2_0.jpg (дата обращения: 02.05.2023)
https://skillbox.ru/upload/setka_images/11540907072022_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg (дата обращения: 02.05.2023)
https://cdn.lifehacker.ru/wp-content/uploads/2013/11/spotlight-search_thumb.jpg (дата обращения: 02.05.2023)
https://ic.pics.livejournal.com/palmindesert/27511509/30454/30454_original.jpg (дата обращения: 02.05.2023)
https://s0.rbk.ru/v6_top_pics/media/img/0/30/756545421990300.jpg (дата обращения: 02.05.2023)
https://blog.allo.ua/wp-content/uploads/Evolyutsiya-mobilnoj-operatsionnoj-sistemy-ot-Apple-ot-iPhone-OS-do-iOS-8-iPhone-OS.jpg (дата обращения: 04.05.2023)
https://www.cultofmac.com/wp-content/uploads/2010/07/post-50930-image-1d8f5ce08ed3a6999ee97de1f1181bf7.jpg (дата обращения: 04.05.2023)
https://itc.ua/wp-content/uploads/2013/09/IMG_3318.png (дата обращения: 04.05.2023)
https://itc.ua/wp-content/uploads/2013/09/steve-jobs2.jpg (дата обращения: 04.05.2023)
https://itc.ua/wp-content/uploads/2013/09/IMG_3299.png (дата обращения: 04.05.2023)
https://www.iphones.ru/wp-content/uploads/2016/11/skeuomorphism.jpg (дата обращения: 08.05.2023)
https://www.iphones.ru/wp-content/uploads/2012/09/ical-gamecenter-2.jpg (дата обращения: 08.05.2023)
https://blog.skillfactory.ru/wp-content/uploads/2023/02/istoriya-versij-ios-ot-iphone-os-do-ios-15-17-1276461.jpg (дата обращения: 08.05.2023)