Черная пятница в UPROCK!

Японский UX-дизайн

Автор статьи:
,

Введение

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

Дуализм японского дизайна

С одной стороны, японский дизайн ассоциируется с чистым и лаконичным по цвету и форме минималистичным интерфейсом. Истоки минимализма идут от дзен-буддизма с простой жизнью без излишеств. Но ситуация изменилась в послевоенное время, когда Япония стремилась восстановить экономику и стала сотрудничать с иностранными фирмами. Обилие товаров спровоцировало бум потребительства в стране. В дизайне это проявилось через обилие графики, яркую типографику и минимум свободного пространства. В 80-е минимализм вернулся как реакция на консьюмеризм: появились компании, которые производят товары с минималистичным дизайном без декора. Например, Muji.

muji.com

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

Черты сайтов Японии

01
Минимум свободного пространства экрана.
02
Обилие текста и подробное описание продуктов.
03
Яркие и насыщенные цвета.
04
Использование большого количества небольших и ярких графических элементов.
05
Микс языков, часто соединение нескольких начертаний японского вместе с английским.
Источник

Почему японские сайты такие

Каждый UX/UI-дизайн создается для людей, поэтому интерфейсы неразрывно связаны с потребностями и предпочтениями пользователей. Ниже мы собрали причины, которые могут объяснить, почему японские сайты выглядят так непривычно для нас.

Язык и письменность

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

Современный японский язык насчитывает три основных начертания:

01
Кандзи — иероглифы китайского происхождения.
02
Хирагана и катакана — слоговые азбуки.

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

Отсутствие акцентов

Иероглифы — вид логографического письма, где символы состоят из различно расположенных зримых элементов, а не из фонем, как в алфавитных языках (русский, английский).

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

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

Уверенность пользователя

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

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

Функционал

Многофункциональные товары — еще одна особенность рынка товаров и услуг в Японии.

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

Сайт как рекламная площадка

Организации в Японии рассматривают интернет не как инструмент взаимодействия аудитории с продуктом, а как рекламную платформу, где о каждом продукте или компании нужно заявить как можно ярче.

Пестрота графики и шрифтов в сочетании с насыщенными цветами работают как визуальные акценты «Посмотрите сюда».

Стоит отметить, что сейчас большое влияние на UX/UI-дизайн в Японии оказывают западные тенденции. Несмотря на обилие информации, визуал японских сайтов начинает больше напоминать европейские: стремление к свободному пространству, уменьшение количества текста.

Тенденции японского дизайна

Яркая цветовая палитра

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

Главные страницы сайта конкурса дизайна упаковки в Азии на английском и на японском языках.

topawardsasia.com
tomomi-shibakusa.com

Технологичность

Японский дизайн опирается не только на традиции, но и на передовые технологии. Поддержание атмосферы современного технологичного мира используется при создании различных сайтов. Например, на главном экране личного сайта Масаюки Дадзима анимация не только проецируется, но и носит интерактивный характер – направление 3D-элемента меняется при переносе курсора.

daijima.jp

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

triveinc.com

Оригинальные решения

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

alishia.net
square-enix.com

Авторская типографика

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

ko-minkan.jp

Каллиграфия

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

suzunoya.com

Вдохновение природой

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

bateau.jp
fukuda-chaya.jp

Соединение языков и написаний

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

mvmnt.tokyo
halfof8.com

Иллюстрации в стиле аниме и персонажи японской культуры

Обращение к культуре проявляется в использовании иллюстраций в стиле аниме, которые интегрируют в визуал продуктов. На сайтах появляются персонажи манги, эстетика рисовки Studio Ghibli. Популярные герои предстают анимацией, 3D-иллюстрацией или в статичном виде.

lamm.tokyo
tokyo-beast.com
Galafull - 2018 - Awwwards Nominee

Музыкальное сопровождение

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

blues-d.co.jp

Вертикальный ритм

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

samukawajinjya.jp
sushi-mitsukawa.com

Что можно перенять из японского дизайна

1. Максимализм

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

sushi-mitsukawa.com

2. Вертикальная ориентация

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

3. Опора на описание и фактические данные о товарах

Для формирования доверия у аудитории предоставляйте пользователям наиболее полную информацию о вашем продукте. Так вырастет лояльность и придут новые клиенты.

4. Влияние на разные способы восприятия

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

5. Обращение к природным мотивам

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

daisheng.com.tw

Полезные ссылки

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

Еще одна полезная ссылка — коллекция японских сайтов.

Заключение

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