Оффтоп Юма Ясивельт
1 777

Мобильный интерфейс: тенденции дизайна 2018 года

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

В закладки

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

Однако нельзя безпроблемно просто взять и вписать новый дизайн в какую-то структуру. Новые вещи появляются все время и опираются они на аппаратные возможности. Они встраиваются в то, что мы называем тенденциями. Но как они появляются? Все ли универсальное появилось случайно? Или дизайнеры следуют некой линии стратегического выбора?

Мое предположение:

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

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

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

Независимо от того, что это такое полноэкранные телефоны – это выглядят круто и требует определенных изменений в мобильных пользовательских интерфейсах:

Кончина #bezel

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

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

Независимо от того, что это такое полноэкранные телефоны – это выглядят круто и требует определенных изменений в мобильных пользовательских интерфейсах:

- больше жестов,

- плавное отображение информации, меняющейся от кадров до непрерывных историй,

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

Buttonless UI - это первый реальный и интегральный шаг к виртуальным интерфейсам, который полностью полагается на жесты.

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

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

Меньше #grayscale, больше цветов и градиентов

Чистые цвета стали основными в парадигме плоского дизайна, которая проникла во многие смежные дизайнерские дисциплины. Минимализм плоского дизайна научил нас распознавать и ценить визуальную иерархию и чистый UX. Это было бы невозможно, если бы яркость некоторых элементов выделялась. Однако иногда нам нужно выделять некоторые вещи. Люди больше не скрывают своего мнения и более откровенны, чем когда-либо.

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

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

Но

Несмотря на то, что цвета являются основными элементами дизайна, они должны использоваться ответственно.

Нестандартная #typography

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

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

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

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

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

С учетом сказанного

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

#Animated #Smart и # 3D

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

Самое большое место в мире, куда вкладываются все новые мобильные технологии - это развлечения.

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

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

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

Для 3D-интерфейсов до сих пор нет технологии, которая сделает их коммерчески доступными для многоцелевых устройств. Тем не менее, постоянные попытки найти ее, приводят нас к пониманию того, что рано или поздно она будет обнаружена. Голографические дисплеи становятся все более простыми в производстве.

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

Смотрим вверх

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

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

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

Дизайн #systems

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

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

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

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

Погружаемся глубже

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

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

Демо-тенденции

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

Кроме того, если мы сможем распознать тенденции, приручить их и извлечь максимум из них, мы можем рассчитывать на создание одной из них.

Материал адаптирован веб-студией АВАНЗЕТ по статье Моисея Кима UX писателя и исследователя в Shakuro

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Юма Ясивельт", "author_type": "self", "tags": ["typography","systems","smart","grayscale","bezel","animated"], "comments": 3, "likes": 14, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 44394, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 44394, "author_id": 196604, "diff_limit": 1000, "urls": {"diff":"\/comments\/44394\/get","add":"\/comments\/44394\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/44394"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

3 комментария 3 комм.

Популярные

По порядку

2

Вручную заебешься писать код для анимаций

Ответить
0

Безпроблемно? Ваш родной язык болгарский? :-)

Ответить

Комментарий удален

0

Такое ощущение, что этот текст писал Джонни Айв

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления