{"id":14271,"url":"\/distributions\/14271\/click?bit=1&hash=51917511656265921c5b13ff3eb9d4e048e0aaeb67fc3977400bb43652cdbd32","title":"\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043d\u0430\u0442\u0438\u0432\u043e\u043a \u0438 \u0441\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432 vc.ru \u2014 \u043d\u0430\u0439\u0434\u0438\u0441\u044c!","buttonText":"","imageUuid":""}

Эволюция дизайна интерфейсов: от первых телефонов до смартфонов

Рассказываем, как мобильные интерфейсы за 50 лет прошли путь от первого беспроводного кнопочного телефона до современного смартфона. Легкий экскурс в историю с нашими фирменными иллюстрациями.

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

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

Но если вспомнить – еще каких-то 20 лет назад люди пользовались телефонами исключительно для звонков, а понятия мобильного интернета в принципе не существовало.

За эти годы мир, оказывается, менялся очень быстро, а вместе с ним и наши привычки. Мы почти перестали звонить и держим связь с бОльшим количеством людей в мессенджерах. Мы можем закрыть наши потребности в пару кликов – стоит только выбрать нужное нам приложение. Как так получилось? Начнем с истории.

С самого начала – первые мобильные телефоны и приложения

Прародителем смартфонов стало устройство DynaTAC, выпущенное в 1973 году. Это был беспроводной телефон без дисплея, который держал зарядку 8 часов. Сложно сказать, что он был удобным – его вес составлял 1,5 кг и вся функциональность ограничивалась звонками.

Через 19 лет, в 1992 году компания Nokia выпустила первый GSM-телефон массового производства. У телефона появился дисплей, на котором отражались уровень заряда, уровень связи и сохраненные контакты.

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

К сожалению, из-за цены в 1099$ и ограниченного тиража первый смартфон не получил широкого распространения, но стал вдохновителем для следующего поколения телефонов со встроенными приложениями.

Так, например, в 1996 году появился Nokia 9000 Communicator. Это была “раскладушка” с QWERTY-клавиатурой, которая поддерживала факсы и электронную почту, а также имела много встроенных приложений: браузер, расписание авиарейсов, погоду, биржевые новости, курсы валют.

Первым истинным смартфоном назвали устройство Sharp PMC-1 Smart-phone, выпущенное в 1998 году. Именно оно считается прадедушкой Iphone. В нем было идеально все: размеры, вес, наличие сенсорного экрана и несколько встроенных приложений.

Добрались: IPhone и Android

До 2007 года модели телефонов в своем большинстве меняли только свою форму, но так и не смогли выйти на качественно новый уровень – тогда-то и появился первый Iphone на операционной системе IOS. У него был емкостный сенсорный экран, интуитивный интерфейс для управления пальцами, мультитач (жесты вроде двойного тапа), автоповорот экрана, удобный плеер и браузер.

А в 2008 году появился App Store, который позволил разработчикам со всего мира создавать приложения с практически неограниченными возможностями. Люди смогли легко и удобно загружать их на iPhone и (а потом и на iPad) без компьютера.

Тогда же, практически параллельно, стала развиваться история телефонов на базе Android. В 2008 году появился первый смартфон на операционной системе Android 1.0 HTC Dream (забавно, что первая версия вышла с названием “Apple Pie”). Этот телефон все еще имел физическую клавиатуру и его интерфейс мало чем напоминаел современный интерфейс Android.

В том же году появился Android Market, который так же, как и App Store, позволял загружать сторонние приложения. В 2012 году Android Market был реформирован и переименован Google Play.

Как вместе с мобильным рынком менялся интерфейс мобильных приложений?

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

По последним данным, в третьем квартале 2020 года число загрузок из Google Play достигло 28,3 млрд. Это в три раза больше показателя App Store, равного 8,2 млрд.

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

Pinterest, 2012-2022
The New York Times app, 2008-2022
WhatsApp, 2009-2022
Skype, 2010-2022
Flipboard, 2010-2022

Разница в дизайне между “было/стало” – очевидна. На эволюцию дизайна повлияли технические факторы и переосмысление трендов. Рассмотрим те, которые привели к этим изменениям в дизайне мобильных приложений подробнее.

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

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

Иллюстрации

В приложениях появилось больше иллюстраций, которые привлекают внимание пользователей. Они стали чем-то бОльшим, чем просто картинки и их использование повышает интерактивность.

Прозрачные элементы

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

Использование пространства

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

Округлые формы

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

AR/VR

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

Темная тема

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

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

Что дальше: будущее мобильных приложений

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

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

P.S. Больше о интерфейсах, дизайне и наших кейсах — можно почитать здесь, в нашем блоге. Еще мы есть в VK, Behance и других соц сетях, подписывайтесь!

0
30 комментариев
Написать комментарий...
vmp

Иллюстрации - полное .овно.
Увольте своего дизайнера.
P.S. эта картинка куда более полно раскрывает тему:

Ответить
Развернуть ветку
Роман Егоров

эта картинка даёт больше чем иллюстрации в статье

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

😀 индустрия - двигатель прогресса

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Кстати, про то, что ещё влияло на эволюцию дизайна в целом, у нас есть отдельная публикация. Возможно вам будет интересно 🙂

https://vc.ru/design/277165-kak-dizayn-kultura-i-polzovateli-vliyayut-na-sovremennye-interfeysy

Ответить
Развернуть ветку
Александр Бондарев

Статья дичь. Даже читать не стал. Оформление ужасное. У вас сразу все понятно

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

😯

Ответить
Развернуть ветку
Igor Reverb

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

Ответить
Развернуть ветку
Almaz Le Roc

«Эволюция дизайна интерфейсов: от первых телефонов до смартфонов»

А интерфейсы будут?

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Будут

Ответить
Развернуть ветку
Кира Ван

хотелв посмотреть картинки этих дизайнов.
а тут их нет

Ответить
Развернуть ветку
Александр Кабешов

Статья на воображение

Ответить
Развернуть ветку
Генадий Петренков

Тоже хотел посмотреть как эволюция в дизайне шла(

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

В статье показали пять примеров :)

Ответить
Развернуть ветку
Сергей Коновалов

Упущен огромный слой кпк. Да, они не звонили (а некоторые и звонили). Но в дизайне интерфейсов - было-бы действительно познавательно.

Ответить
Развернуть ветку
Сергей Коновалов

И стоит вспомнить провальный Apple Newton ;)

Ответить
Развернуть ветку
Николай Замотаев

Что ещё обиднее - с технической точки зрения, ко второй версии в нём стало всё хорошо, но было поздно.

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Спасибо за комментарий!
Рассмотрим эту тему в следующих публикациях 🙂

Ответить
Развернуть ветку
Петя Савинский

наглядно видно , классная статья. Спасибо!

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Спасибо! ❤️
Если интересно, можете почитать другие публикации в нашем блоге, там есть много полезного :)

Ответить
Развернуть ветку
Александр Кабешов

Но без картинок.

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

🧐

Ответить
Развернуть ветку
Sergey Kaluzhsky

Картинки в статье красивые, но немного не в тему. Тут бы больше показать сами интерфейсы - это главное в статье, а они в картинках мелкие, под углом и толком ничего не видно.А так с эволюцией интерфейсов полезно рассказать о взаимодействии десктопных и мобильных интерфейсов. Ведь исторически первые интерфейсом для десктопа был терминал и командная строка. Однако еще в 70х годах Xerox представила концепцию графического интерфейса, которым мир пользуется до сих пор (рис. 1).

И именно этот интефейс лег в основу первых мобильных терминалов, таких как IBM Simon (был в статье) или Apple Newton. И на основе его был сделан интерфейс в КПК (рис.2) Нажимать на все это предполагалось стилусом, поэтому кнопки и иконочки были маленькими.

А вот для кнопочных мобил интерфейсы изначально были другими - пришедшими из текстовых DOS-приложений - текстовые меню и подписи над функциональными кнопками (рис. 3)

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

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Сергей, спасибо за комментарий!
Оч крутые примеры приводите!

P.S. Действительно, акцент на картинках с интерфейсами неправильно поставили. Поправили и перезалили иллюстрации 🙂

Ответить
Развернуть ветку
Вадим Д.

Отличный материал, благодарю!
Уже подписался на вас (-:

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

❤️

Ответить
Развернуть ветку
Rare Things

General Magic забыли

Ответить
Развернуть ветку
Юлия Мальцева

Было интересно!

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

❤️

Ответить
Развернуть ветку
stanly qbrick

«По сравнению с приложениями 2008 года, сейчас все больше приложений начали использовать темный фон, так как белый – напрягает глаза пользователя. Темная тема предоставляет пользователям комфорт и позволяет им использовать приложение в течение долгих часов»
читать много текста белыми буквами с темного фона, да, что может быть лучше. Почти нигде не реализована нормально темная тема, что бы и глаза не убить при чтении, и выглядело все нормально.

Ответить
Развернуть ветку
Dmitry Boytsov

Пропустили эпоху Symbian. Как-то неполноценно без него.

Ответить
Развернуть ветку
27 комментариев
Раскрывать всегда