Небольшая заметка об интерфейсах

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

https://teletype.in/@neron_lordoff/BkLcrNL7X

Об иконках и об интерфейсах

Сергей Чикин как-то писал в своем бложике:

 


 

Верно сказано, поэтому на типичном шаблонном вебсайте от блока с иконками совершенно нет проку:


 

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

 


 

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

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

Короче, если есть место, иконки всегда следует подписывать:

 

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

 


 

Когда нет подписей — интерфейс превращается в рубку космического корабля, и его изучение требует такое время, которое сопоставимо с получением образования:

 

 

Поэтому у адобы отжали рынок интерфейсов. Конкуренты срезали 99% функционала иллюстратора, сделали простые и понятные программы с минимумом кнопкой и вуаля, успех.

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

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

И всё равно получилось неудобно. Во время работы нужны самые разные панельки. Поэтому они все всегда должны быть в рабочем пространстве, хотя бы в свернутом виде, чтобы иметь к ним быстрый доступ. Однако сворачивать ненужные, чтобы хватило места нужным, — сжирает чудовищное количество нервной энергии. Из-за этого я присобачил к компу второй моник и ЦЕЛИКОМ занял его рабочим интерфейсом.

 


 

Но даже в навороченных интерфейсах есть место упрощению.

Есть такая замечательная махонькая программка для трёхмерного моделирования и анимации — Anim8or. Она бесплатная, с неказистым интерфейсом в стиле конца 90-х годов, но жутко удобная. Если вы когда-нибудь открывали какой-нибудь блендер или 3д-макс, то вы наверняка знаете, что интерфейсы Адобы по сравнению с 3д-редакторами — это ясли-сад, штаны в подтяжку. В трехмерке очень легко заработать заболевание головного мозга из-за обилия кнопок.

 

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

Понятно, что у маленького Анимэйтора нет столько же функций, сколько у Блендера, но я к тому, что трёхмерка — все равно сложнее двухмерки, и даже 3д-редакторы можно поддаются очеловечиванию.

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

 


 

Разумеется, нужно вкуривать очень тонкий баланс между двумя крайностями: если слишком много кнопок на виду — это плохо, но также плохо, когда слишком много кнопок скрыто под другими кнопками. В принципе, в понимании И создании этого баланса в основном и заключается работа дизайнера. Причём, создавать баланс — доступно далекооо не каждому, а вот понимать его может каждый человек — в нас это зашито на аппаратном уровне. Поэтому любой недизайнер может легко сказать, какую игру из скриншотов ниже он предпочтет.

скрин №1:

 

скрин №2:

 


 

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

 

Несколько лет назад я наткнулся на чудесный материал от студии Area17, где подробно разжёвывается воркфлоу по разработке дизайна в Люстре. Гайд был очень близок мне по духу, как в техническом плане, так и в идеологическом — тогда продвинутые дизигнеры интерфейсов перескочили с фотожопы на Иллюстратор. И до сих пор он мне близок: студия внесла пометку, что гайд хоть и морально устарел (никто в своем уме сейчас не дизайнит UI в люстре, и тем более в фотожопе), но все равно может быть применим для скетча и (внимание) их любимой Фигмы. Кто не в курсе — скетч это фашисткий выблядок яблосектантов, а Фигмочка — заебательская кроссплатформенная программулька.

Короче. Всем люстроводам и интерфейсо-строителям рекомендовано к изучению, или хотя бы к чтению по диагонали — есть ряд клёвых tips&tricks, которые обязательно станут вашими козырями:

https://guides.area17.com/design-techniques