Приходилось ли вам когда-нибудь посещать китайские веб-сайты? Если владельцы не позаботились об адаптации под западный «глаз», то, скорее всего, они покажутся вам нагромождением иероглифов, кричащих картинок и ярких баннеров. Однако, прежде чем шутить про веб-дизайн нулевых, стоит разобраться, какое влияние на дизайн сайтов оказали поведение пользователе и культурные особенности страны.
В этой статье мы разберем наиболее характерные черты китайского веб-дизайна, затронем местные подходы к UX и даже сравним европейские и китайские версии различных онлайн-ресурсов.
Дисклеймер. Ничего из сказанного ниже не стоит воспринимать как камень в огород китайского дизайна и его создателей. Все, о чем пойдет речь в статье, просто непривычно европейцу.
Культурные особенности Китая, которые нашли свое отражение в дизайне
Китайская культура, мягко говоря, отличается от европейской. В рамках этой статье нам интересны два конкретных явления.
Коллективизм
В Китае доминирует коллективистская ориентация общества. Это значит, что для жителей страны крайне важно, как их воспринимают окружающие: друзья, соседи, партия.
В коллективистской культуре ключевой единицей является не человек, а группа. Поэтому китайские пользователи так активно общаются в чатах, оставляют отзывы и принимают участие в жизни интернет-сообществ.
«Китайцы увлечены своими онлайн-сообществами так сильно, что житель Запада даже не может это себе представить — пока не увидит воочию. Китайская культура... более ориентирована на группы, в то время как люди на Западе склонны к индивидуализму. Для типичного члена китайского онлайн-сообщества оно значит нечто большее, чем просто интернет-форум или чат. Оно становится частью его сущности.»
— Портер Эрисман, Six Billion Shoppers
Традиции и суеверия
Древние китайские традиции глубоко вплетены в современную культуру страны. Например, до сих пор уделяется внимание значениям цветов.
А еще в Китае любят игры, даже азартные, пусть они и вне закона еще с середины прошлого века. В китайском языке даже есть поговорка: «Если ты не играешь в азартные игры, ты не знаешь, насколько ты удачлив».
Отличия китайских сайтов
Посмотрим, чем именно отличаются китайские и западные сайты.
Свободное пространство
Китай ❯
Может показаться, что с белым пространством у китайских сайтов есть определенные... сложности. Китайцы уделяют много внимания тому, как их воспримет общество, поэтому на своих сайтах они нередко стараются разместить как можно больше информации, чтобы сразу показать посетителю свои преимущества, возможности и ценности.
Вот, например, пара элементов карусели китайского сайта Toyota:
«Западные дизайнеры принимают как догму тот факт, что удобство использования сайта напрямую связано с минимализмом в дизайне, который блокирует шум и ведет пользователя к покупке. Их шокирует, что китайские сайты так насыщены яркими цветами, броскими анимациями, что их дизайн кажется несколько беспорядочным.
Я думаю, все дело в том, что повседневная жизнь типичного веб-пользователя в Шанхае настолько отличается от жизни, скажем, в Швеции, что напрямую влияет на построение онлайн-интерфейсов. В Китае привыкли к оживленной торговле. А у жителя шведского села может уйти час езды по тихой проселочной дороге, прежде чем он доберется до магазина.»
— Портер Эрисман, Six Billion Shoppers
Запад ❯
Свободное пространство — самостоятельный элемент веб-дизайна западных ресурсов. И не только с точки зрения эстетики: оно помогает расставить правильные акценты и направить пользователя по нужному пути.
Текст
Китай ❯
Может показаться, что сайты буквально перегружены текстом. Его, словно масло на бутерброд, равномерно размазали по каждой веб-странице. Все дело в устройстве китайского языка. В нем отсутствуют пробелы между словами, нет разделения на строчные и прописные буквы. Ну а почему китайцы стараются дать пользователю сразу много информации, вы уже знаете.
Запад ❯
Привычный нам веб-дизайн ориентирован на визуальный, а не текстовый контент. Текст остается там, где без него не обойтись, остальное подается с помощью видео и картинок.
Шрифт
Китай ❯
В китайском языке — десятки тысяч иероглифов. Для создания профессионального шрифта на китайском языке придется переработать 20-30 тысяч символов с учетом латинских букв и знаков пунктуации. Представляете, сколько сил и времени занимает создание даже одного шрифта?
Не стоит забывать и про вес. До недавнего времени правило @font-face к сайтам на китайском языке де-факто не применялось: каждый раз отдельно подгружать шрифт, который весит 3-7 мегабайт, а то и больше — проблема. А чрезвычайно экспериментальные технологии для рендеринга китайских нестандартных веб-шрифтов вроде Youziku и Justfont появились не так давно.
Именно поэтому на большинстве сайтов используется один шрифт в одном-двух размерах, а текст нередко верстают просто картинками, как, например, здесь:
Запад ❯
Шрифт — неотъемлемая часть брендинга и фирменного стиля. Компании разрабатывают собственные шрифты и тратят кучу времени на то, чтобы утвердить сценарии и правила их использования. Размер текста прямо указывает на роль, которую он играет на странице.
А благодаря простоте начертания символов сегодня у нас есть огромное количество шрифтов под самые разнообразные задачи и ситуации.
Цвета
Китай ❯
Из-за большого количества контента и недостатка свободного пространства, дизайнеры сайтов полагаются на яркие цветовые акценты. Они помогают направить пользователей к важным разделам сайта или обратить их внимание на конкретные элементы — баннеры или кнопки. При этом выбор цветов нередко обусловлен их традиционными для Китая значениями. Например, красный символизирует позитив, счастье, преданность, пламенность, чувственность. Также популярны желтый и оранжевый.
Запад ❯
На западе дизайнеры придерживаются минималистичного подхода к использованию цветовой палитры. Если сайт корпоративный, на нем, как правило, используются фирменные цвета компании. Нередко преобладают светлые тона и оттенки — они создают ощущение «воздуха» и блокируют визуальный шум.
Что еще в Китае не так, как у нас?
Геймификация
Игровые механики и элементы встречаются не только в китайских социальных сетях, но и на e-com площадках. Китайцы любят играть в игры. Особенно, на смартфоне. Геймеров, которые играют в простые мобильные игры, намного больше, чем любых других. А китайские промоигры очень похожи на обычные. Гейммеханики не отталкивают, а наоборот, привлекают покупателей.
Один из самых ярких примеров — Alipay, платформа онлайн-платежей. В августе 2016 года компания выпустила Ant Forest, мини-игру, в которой нужно было выращивать виртуальные деревья прямо в приложении Alipay.
За отказ от использования автомобиля в пользу общественного транспорта или прогулки пешком, покупку электронных билетов вместо бумажных и совершение платежей через Alipay пользователи получали «зеленую энергию» и выращивали с ее помощью виртуальные деревья, которые затем превращались в настоящие — их высаживали в засушливых районах Китая. В 2019 году Ant Forest стал чемпионом по версии UNEP, а к 2021 году 600 миллионов пользователей «посадили» около 326 миллионов деревьев.
Mobile first
Несмотря на то, что «mobile first» — глобальный тренд веб-дизайна и e-com, в мире есть только одна по-настоящему мобильная страна, и это Китай. По данным от конца 2020 года, 99.7% от общего числа пользователей (около 986 млн) выходили в интернет с помощью мобильных телефонов.
В Китае мобильное устройство — основной способ выхода в интернет и совершения покупок. По отчетам China UnionPay за 2021 год, жители крупнейших городов Китая совершают около 80% своих ежемесячных покупок (то есть тратят примерно 5 000 юаней) с помощью мобильных платежей.
Супераппы
Суперапп — многофункциональное мобильное приложение, которое открывает доступ сразу к множеству сервисов и продуктов. Вообще автором этого термина называют Марка Лазаридиса, основателя Blackberry, — так он назвал закрытую экосистему, состоящую из множества приложений. Однако популярным оно стало из-за китайского WeChat.
С его помощью можно не только обмениваться сообщениями, но и читать новости, заказывать такси или доставку еды, приобретать билеты в кино, оплачивать покупки и коммунальные услуги, играть и многое-многое другое. Хотя, супераппы уже появляются и у нас — например, ВКонтакте и Яндекс Go.
Еще в Китае распространены цифровые домены. Во-первых, их проще воспринимать, чем чужеродную латиницу. А во-вторых — китайцы используют числа для передачи слов. Например, сайт Alibaba расположен по адресу 1688.com, а все потому что при прочтении на китайском эти цифры созвучны названию сайта. А еще там очень любят гифки и анимированные баннеры (что, кстати, объясняет, почему в Китае так долго использовался Flash), но это уже совсем другая история.
Комментарии (41)
little-brother
16.06.2023 20:17+35Как же заколебали современные сайты - где "сочные, яркие" картинки довольных людей всех национальностей, которые улыбаются, жмут друг-другу руки, дружески подсказывают и т.п., а техническая информация заныкана так, что даташиты на железки (с этого сайта) приходится искать с помощью гугла. Мне определенно нравится подход китайцев!
expdxx
16.06.2023 20:17+16Это вы теплое с мягким чуть перепутали. Одно дело, когда интерфейс и карта сайта понятны и доступны, но при этом есть возможность самому принять решение, что именно читать. И другое - когда на тебя сходу орет 15 заголовков на разные темы)
Что-то среднее должно быть в этом мире. Рунет, кстати, частенько где-то посередине и оказывается.
Nalivai
16.06.2023 20:17+2Это он вам нравится потому что вы по-настоящему там не пытались найти что-то. Если вы думаете что пролистывать стоковые фотки тяжело, попробуйте пролистать двадцать страниц убористого разноцветного текста в поисках ссылки на подзамочный файлообменник.
DaneSoul
16.06.2023 20:17+12где "сочные, яркие" картинки довольных людей всех национальностей,
которые улыбаются, жмут друг-другу руки, дружески подсказывают и т.п.Вот дико бесит эта современная мода напихать бессмысленных фотографий людей со стоков никак не относящихся к тематике сайта. Если я захожу на сайт хостинга, то меньше всего я хочу видеть на главной странице улыбающуюся рожу на пол экрана...
vadimk91
16.06.2023 20:17+2... или мультяшных уродцев на сайт банка, ага, типа это помогает клиентам совершать финансовые операции
splitfire
16.06.2023 20:17Мультяшные уродцы, с руками-бубликами, микроголовой и телом в форме песочных часов — это что бы ни одна падла не оскорбилась. Другой причины их повсеместного засилия не представляю.
Komrus
16.06.2023 20:17+4Эти фотки людей на сугубо технических сайтах много кого бесят.
Как говорил один мой знакомый:
"Когда наш мир окончательно накроется медным тазом, мы, бросив все эти ИТ и инженерные системы, займёмся по-настоящему-важными делами: работорговлей, сутенерством... Вот только тогда на моём сайте появятся фотографии людей" :)
Tzimie
16.06.2023 20:17Это да. Зайти на своему сайт авто и попытаться найти время разгона до 100
Didimus
16.06.2023 20:17Время разгона до ста не так важно, как график этого разгона.
Astroscope
16.06.2023 20:17Время разгона до ста не так важно
Это одна из объективных метрик. Не всеобъемлющая, но как минимум могущая быть прямо сравниваемой.
график этого разгона
Это почти никогда не публикуется и, видимо, не всегда измеряется. Используйте метрику ускорения 80-120км/ч, а также максимальную скорость, если она не ограничена электронно - это объективно и сравниваемо.
DaneSoul
16.06.2023 20:17Используйте метрику ускорения 80-120км/ч
Ускорение 0-60 куда интересней, потому как используется регулярно в городе, а что там после 80 с ускорением - это важно для любителей обгонять на трассе.
Astroscope
16.06.2023 20:17+2Держаться в городском потоке могут практически все современные и подавляющее большинство несовременных автомобилей потому, что скорость городского потока сдерживается с одной стороны наиболее медленными участниками движения, а с другой стороны, независимо, регулированием движения. При этом, чем меньше скорость, до которой необходимо разогнаться (ваш пример 60км/ч против "стандартных" 100км/ч или, в зависимости от региона, 60mph), тем меньшим будет разрыв между самым быстрым и самым медленным автомобилем. То есть для езды в городе, где редко удается развить даже разрешенные 50 или 60 км/ч, эта метрика имеет не такое уж и большое значение. С ростом же скорости, до которой измеряется разгон, различия в динамике начинают проявляться явственнее. Относительно небольшой маломощный автомобиль с неважной динамикой разгона до 100 км/ч и невысокой максимальной скоростью почти наверняка будет достаточно динамичен для городских скоростей, потому что ему требуется преодолеть меньшую инерцию массы, а посчитанная под его двигатель и под его целевые характеристики коробка сделает городскую езду вполне приемлемой. Ремарка про любителей обгонять на трассе мне непонятна, ведь чем выше ускорение, на которое способен автомобиль, тем быстрее совершается обгон, а быстрее равно безопаснее - да хотя бы просто потому, что сокращается время пребывания на встречной полосе. Если лично вы оказываетесь на трассе приблизительно никогда, а все же случайно оказавшись согласны двигаться в темпе относительно тихоходного попутчика перед вами - грузовика или автобуса, например, то это необязательно значит, что у всех остальных так же.
Didimus
16.06.2023 20:17+1Это называется картинки из стока (фотобанка): зелёное поле, улыбающаяся скачущая, взявшись за руки, семья
raamid
16.06.2023 20:17А представьте себе китайский шрифт засечками (serif). 帶襯線的中文可怕銘文 вот такое, только с засечками :)
DaneSoul
16.06.2023 20:17+6А что тут представлять - они активно используются, в основном в печатных текстах.
Пример
Самый верхний как раз с засечками, считается шрифтом для печати, средний без них - самый популярный в цифровых материалах, а самый нижний имитирует письмо от руки и используется в обучающих материалах.
ilitaiksperta
16.06.2023 20:17Текст остается там, где без него не обойтись, остальное подается с помощью видео и картинок
В китае все ровно так же, просто эти картинки - иероглифы. Даже один иероглиф может нести смысл целого слова, и видимо из-за этого китайцам тупо привычнее и проще воспринимать такую плотность информации. И скорее это главная причина таких набитых иероглифами и картинками сайтов, а не вот эта мутная херня:
Китайцы уделяют много внимания тому, как их воспримет общество, поэтому на своих сайтах они нередко стараются разместить как можно больше информации
Для сравнения возьмите корейские сайты. У корейцев, в отличии от китайцев и японцев буквы, а не иероглифы (которые только выглядят как иероглифы). Вот, например, намного более похоже на западный дизайн:
Hidden text
Или вот, та же тойота:
А вот тойота, но японская:
Hidden text
ru1z
16.06.2023 20:17и японцев
У них смесь двух своих азбук и пиктограм когда то давно взятых из китайского.
Корейские vs китайские, наверное, для большей обьективности (если она вообще возможна), нужно еще смотреть/сравнивать рекламки из северной кореи и Тайваня. Тайвань использует традиционные пиктограммы, в отличие от новодела материкового Китая и больше ориентируется на международный рынок, как и Южная Корея.
Сдается мне, что основная разница, что другие страны больше ориентируются на международный рынок с разными заказчиками, а Китай и похожие только на очень узкопрофильный рынок.
dizandr
16.06.2023 20:17+5Ну а лично меня от европейских минимализмов давно уже тошнит :(
Из примеров в этой статье мне азиатские варианты во всех случаях понравились больше
eton65
16.06.2023 20:17+6Ну а лично меня от европейских минимализмов давно уже тошнит :(
А для меня там основная проблема даже не в минимализме, а в огромных пустых пространствах, которые приходится проматывать, попутно разглядывая успешных и счастливых людей. Все равно неудобно и часто просто некрасиво (с точки зрения моего чувства прекрасного). Для меня минимализм — это только самое необходимое, помещающееся на одном экране.
На китайских же сайтах моя эстетика просто даже не просыпается))
Astroscope
16.06.2023 20:17+3Нам нужен
гипертекстовый векторный фидонетWeb 1.1 - все тот же Web 1.0, но без выгвиглазных гифок, вообще без них, ну и с некоторыми признаками адекватности в подборе цветовой гаммы в целом. Быстрый во всех смыслах.
R0bur
16.06.2023 20:17Может быть, Gemini?
Astroscope
16.06.2023 20:17+2Дело не в протоколах как таковых, а в разумном самоограничении разработчиков сайта - их самих и их заказчиков, разумеется, в комплексе. Самоограничение это, с моей точки зрения, такие вот вещи (список не то, что не исчерпывающий, а по сути даже не начатый):
Минимизация количества и веса интерактивных элементов до разумно-достаточного, что иногда означает до нуля, поскольку подавляющее их число - украшательства, более чем спорные с художественной точки зрения, и лишь некоторые действительно неплохо вписываются в идею usability конкретного сайта и навигации по нему
Минимизация количества и веса мультимедийных элементов везде, кроме как где они очевидно желательны
Рационализация использования видимого пользователем пространства экрана - уход от бессмысленных пустых полей на десктопных версиях и оптимизация под "пальцеориентированность" на мобильных, что реализовать тем легче, чем меньше перегружен сайт украшательствами, которые может быть сложно адаптировать к экранам не только разного углового размера, но и разной (портретной/ландшафтной) ориентации
Более ответственный выбор шаблонов и библиотек, уход от чрезмерно тяжелого везде, где это возможно.
Работа с клиентом. Подавляющее большинство сайтов пишется разработчиком за деньги заказчика, а не кустарно самим заказчиком (это не оскорбление, а наоборот похвала) или как хобби для себя. Это значит, что неплохо бы ненавязчиво подсказать клиенту, что можно сделать или как он хочет так же тупо как у всех, или все же сделать хорошо как будет только у него одного. Стоимость и время разработки едва ли поменяются сколь-нибудь значимо, а долгосрочный маркетинговый эффект от сайта, на котором приятно находиться, будет, пусть этот эффект и сложно измерить в дополнительной прибыли сейчас или лояльности клиентов в будущем.
Так-то TCP/IP вполне себе хорош, а из-за его распространенности попытки что-то менять заведомо обречены на провал - история с IPv6 как бы намекает, но IPv6 внедряется параллельно, а не вместо, поэтому провальное внедрение никого особо не беспокоит. Да и HTML6 сам по себе не абсолютное зло - зло это неумное и неумеренное использование его возможностей, из-за чего сайты объективно жиреют, а субъективно разжижаются до фиксированных кусочков фигни на пустом поле со всплываемыми кусочками другой фигни при прокрутке. Но тут и HTML4 не особо поможет, т.к. при желании сделать хорошо, но получить в результате плохо, всегда можно обвешать чистый HTML жабой и флешем в неадекватных количествах и получить все тот же треш, угар и содомию™.
torbasow
16.06.2023 20:17+1Поэтому китайские пользователи так активно общаются в чатах, оставляют отзывы и принимают участие в жизни интернет-сообществ.
Конечно, на Западе же никто никого не комментирует. Вот хотя бы под этим постом видите хоть один комментарий? А китайцы обязательно сбежались бы пообсуждать.
swame
16.06.2023 20:17+3Оригинальность зашкаливает
https://habr.com/ru/companies/ispsystem/articles/736182/
Почему японские веб-сайты выглядят так необычно, или учимся оценивать дизайн, не делая поспешных выводов
sekaifutari
16.06.2023 20:17Статья интересная, но есть пара но.
Возможно это вас удивить, но Китай - индивидуалистическая страна. Япония да, коллективистская, но в Китае народ куда более индивидуалистичен, так что связанные с этим тезисы не очень валидны.
А вообще, хз, мне довелось попользоваться парой сайтов и вот что я могу сказать.
Дизайн у них хороший, комфортный. Не чувствуешь что тебя забомбить чем-то пытаются, нет дискомфорта. Иероглифов я не знаю, прогонял через переводчик, и все вкладки оказались по делу. Пользовался и сервисами Байду, и 58.com, и Tuija, и Taobao
Но с чем-то у них есть проблемы, и это закрытость. Китайские сайты люто не любят делиться информацией если ты не зарегистрирован, а регаться можно только... если у тебя есть китайская сим-карта! И что самое плохое, они очень ограничивают контент если ты не зареган. Для рядового китайца это не беда, он везде есть, но для иностранца это сплошное мучение. Китай очень умело отгородил ИНОСТРАНЦЕВ от своего интернета, и КИТАЙЦЕВ от нашего, это чувствуется во всем.
Но для китайцев я думаю )|(N3Hb nPEKPACHA, так что как-то так.
Iron_Butterfly
16.06.2023 20:17Несколько лет назад нужно было по одному делу пообщаться с китайским партнером. Он требовал коммуницировать с ним только через WeChat и никак иначе. Завести себе аккаунт в этом WeChat было тем еще квестом.
Я к тому, что действительно, желание китайцев отгородиться от всемирного интернета явно прослеживается в их действиях. Самодостаточность их внутреннего китаенета полная и все мировые интернет тренды они крайне выборочно применяют к себе.
ri_gilfanov
Что-то меня смущает в этом отрывке. Не лучше ли было написать следующим образом?
Ну и не совсем понятно, что имеется ввиду под словами в контексте китайской иероглифической письменности.
DaneSoul
Визуально слова не выделяются в тексте, но как отдельные смысловые понятия они вполне различимы, процентов 70 слов состоят из 2-х иероглифов.
ri_gilfanov
А понятия из 2 иероглифов можно раскладывать на 2 более простых понятия по 1 иероглифу? И, если да, то меняется ли после этого их написание и произношение?
В моём представлении, слово -- это языковая единица, чья целостность явно отражена либо в написании, либо в произношении, либо в написании и произношении.
Иначе становится не очень понятно, где проходит граница между сложными словами (языковая единица) и составными понятиями (смысловая единица из нескольких слов).
DaneSoul
По разному бывает со смыслами:
Некоторые можно по смыслу разложить очень точно - 好吃 - вкусно = хорошо + кушать. Некоторые просто логичны по своей сути - 火车- поезд = огонь + транспортное средство, 飞机 - самолет = летать + машина
Иногда два иероглифа с очень близким значением используются вместе и означают по сути тоже что и каждый по отдельности: 疾病 - болезнь, 明亮- яркий, ясный
Иногда слова иероглифы с противоположным смыслом объединяются в новое значение: 买卖- бизнес = покупать + продавать, 多少 - Сколько? = много + мало
Иногда просто подбор похожих по звучанию для заимствованного слова 咖啡 - кофе.
С написанием все четко - иероглифы не меняются при комбинации в слова, более того, сами по себе иероглифы состоят из компонентов, которые тоже довольно стабильны и могут быть подсказкой к смыслу или фонетике иероглифа.
Самое шикарное что в китайском нет изменений формы слов по родам, числам, временам и т.п. Есть дополнительные частицы (иероглифы) для отельных грамматических функций, но грамматика китайского в целом довольно простая.
По произношению особо не подскажу, меня именно письменность интересует. Насколько знаю, 1 иероглиф = 1 слог, у некоторых может быть два варианта чтения с разным смыслом, но таких заморочек как японском нет. При комбинации в слова слоги складываются.
А тут еще есть какой момент - китайского есть несколько диалектов, у которых письменность общая, а вот произносятся они сильно по разному, они сами речь друг друга не понимают. Собственно в этом основная фишка иероглифического письма - оно позволяет использовать одну письменность с сохранением смысла для совершенно по разному звучащих языков. Это и позволило японцам заимствовать китайскую письменность в свое время, задав существующим иероглифам свое звучание.
Вообще, словообразование очень интересное тем, что количество иероглифов ограничено, и вместо того чтобы придумывать 100500 уникальных слов намного активней используются комбинации компонентов в иероглифы, а иероглифов уже в слова. То есть в этом намного больше логики и меньше хаоса.
长颈鹿 - длинный + шея + олень = жираф :-)
ifFamous
То есть на их клавиатуре не иероглифы, а компоненты и работает "автозаполнение"?)
DaneSoul
Там несколько разных подходов реализовано, была на Хабре еще древняя статья с их обзором.
Самый популярный метод - это фонетический. Просто на обычной клавиатуре с латиницей набирают pinyin транскрипцию (без тонов) и из выпадающего списка иероглифов выбирают то начертание которое нужно.
Графический ввод путем рисования у носителей мало популярен, но для изучающих очень полезен, поскольку позволяет ввести иероглиф чтение которого не знаешь. Причем современные методы распознавания довольно продвинутые и позволяют распознавать даже малопонятные каракули, если соблюдать хотя бы примерный правильный порядок написания и корректные черты.
Вот можно поиграться с онлайн клавиатурой графической, которая адекватно распознает рисование мышкой - https://www.qhanzi.com/index.html