Самые комментируемые за месяц

Апп-субботник #2

28 апреля 2013, 11:30

Вторым донором для апп-субботника по просьбе Сергея Короля стал «Гетвеар».

«Гетвеар» — это сервис, с помощью которого люди заказывают себе джинсы по индивидуальным меркам. Я задизайнил интерфейс снятия мерок:

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

Макет для просмотра на пятом айфоне (манекена ретинизировать, к сожалению, не успел).

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

Аппендиксы

20 мая 2013, 12:23

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

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

Ответ — это аппендикс и скоро он канет в лету.

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

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

Я покопался в памяти и нашёл несколько примеров исчезнувших и исчезающих аппендиксов:

Помните эти мигающие лампочки (на картинке — внизу). Их мигание сообщало пользователю, что с жёсткого диска что-то считывается и записывается (могу ошибаться в деталях). Компьютеры были слабенькие и частенько висли. «Юзер, видишь, что лампочка не мигает, а горит постоянно — отойди от машины, попей чаю».

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

Ещё пример:

Технология кассет была несовершенна и их постоянно зажовывало. Поэтому, нужна была индикация, что всё в порядке, бабины крутятся. «Что, кассету заживало и порвало плёнку? Ну что же ты? Мы же сделали специальные окошки в магнитофоне, чтобы ты вовремя заметил проблему».

Суммируя: аппендикс — это индикация, не помогающая пользователю совершать полезное действие.

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

Например, пешеходов сбивают на переходах. Вместо борьбы с причиной ДТП — незаметностью пешеходов — акцентируют внимание на знаках:

А последнее время вот так:

И даже так:

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

А теперь клуб футурологов: какие аппендиксы известны вам и какой способ их устранения вы видите?

Апп-субботники

16 апреля 2013, 22:47

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

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

Чтобы принять участие в апп-субботнике нужно:

  1. В комментариях к этому посту описать идею приложения настолько подробно, насколько это возможно (или дать ссылку на готовое приложение, если оно у вас уже есть). Приложения, в основе которых лежит карта, очень вероятно я не возьму на субботник, потому что не интересно.
  2. По желанию дать референсы того, что нравится.
  3. Быть готовым к тому, что результат субботника и исходное задание будут доступны общественности.

Участие абсолютно ФО ФРИ

Из всех заданий на дизайн, пришедших до субботы, я вибираю одно; в субботу рисую; в воскресенье выкладываю результат в свой блог и на Дрибл.

Бонус: если вам понравится результат, нарисованный по вашему заданию, с радостью нарисую для вас всё приложение целиком. Но уже не фо фри, конечно.

Буду проводить апп-субботники пока есть задания или пока не надоест. Поехали.

Рисование теней

1 мая 2013, 0:15

Меня попросили рассказать, как я рисую тени.

Расскажу про два типа теней от объекта: который лежит на поверхности и который стоит на ней.

Если объект лежит на поверхности и слегка отстаёт от неё, то тень рисуется очень просто:

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

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

Готово.

Если объект стоит на поверхности, придётся немного повозиться:

  1. Беру объект, который должен стать на поверхность.
  2. Делаю «острую» ставящую тень. Она делается так же, как и в случае с лежащим объектом. Если у объекта есть массивное «дно», которым он должен стоять, то ставящая тень будет слегка размытой копией этого дна. У меня же объект стоит на носике, поэтому в качестве ставящей тени я использовал пиксельную полоску размытую по краям.
  3. Нужно чуть доработать ставящую тень. Размываю в горизонтальном движении то, что получилось в предыдущем шаге и уплотняю тень в месте стыка с носиком объекта.
  4. Для того, чтобы нарисовать падающую тень, копирую объект, искажаю его, так чтобы он лёг на фоновую поверхность. Беру инструмент размытия и размываю по всё тому же правилу (чем дальше от места стыка с объектом — тем сильнее). Затем стёркой приглушаю тень по краям (чем дальше тень от стыка с объектом — тем она прозрачнее).
  5. Чуть дотюниваю то, что получилось. На этом этапе становится понятно, что ставящая тень слишком далеко убежала от объекта — поднимаю её на пиксель. Также слегка уплотняю падающаю тень в районе носика.
  6. Если объект был цветной, неплохо бы бросить от него рефлекс на фоновую поверхность. Для этого рисую какаую-то ромбовидную фигуру цвета объекта, чуть темнее. Блюрю её Гаусом слегка и пару раз размываю в горизонтальном движении (пару, а не один, — чтобы замаскировать страшный результат фотошопного размытия в движении). Затем настраиваю прозрачность и цвет.

Готово.

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

Оптические иллюзии

11 июля 2013, 0:50

Сегодня наткнулся во Вконтакте на чей-то перепост какого-то паблика:

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

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

Почему кажется, что левая башня падает? Всё просто. Наш мозг (оба полушария, я думаю. А может быть левое логическое — не суть) приучен к тому, что всё, что поступает из глаз, должно быть вписано в систему перспективного искажения. Вспомните хотя бы уходящие в даль рельсы или длинный коридор. Все параллельные линии обязаны сходиться в одной точке.

Когда мы смотрим на картинку с двумя одинаковыми башнями срабатывает простейший трюк.

Давайте оставим только одну башню и дадим мозгу разобраться сначала с ней:

Мозг: Ага, вот две на самом деле параллельные линии стен башни, они сходятся, вот точка их схождения и она находится в стороне от центра картинки. Стало быть изображённый на картинке объект наклонён вправо, то есть падает. Понятно.

Затем мозг анализирует вторую картинку, которая по логике находится в том же пространстве, что и первая, следовательно они должны жить в одной системе перспективного искажения:

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

Или левая падает меньше правой, смотря откуда считать.

Но в подписке к картинке сказано, что всё дело в том, что левая и правая часть картинки обрабатываются разными полушариями, в том-то и кроется причина. Окей. Раз падает сильнее именно левая картинка, значит что-то не так с полушарием, отвечающим за левую часть изображения. Это полушарие норовит завалить всё.

Ой, а теперь завалилась правая башня.

Оптические иллюзии основанные на перспективе очень распространены:

Кажется, что дальний слон больше того, что на переднем плане.

Кажется, что дальнее ребро плиты больше ближнего, хотя оно на самом деле меньше.

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

В комменты призываются ребята способные восстановить цепочку «Разные полушария → ... → падает сильнее правая башня».

Ё

18 июля 2013, 15:42

Наткнулся на статью о ё на грамоте, прочёл там:

Попытка (на наш взгляд, вполне удачная) поставить точку в затянувшемся на 200 лет споре сделана авторами полного академического справочника «Правила русской орфографии и пунктуации» (М., 2006), одобренного Орфографической комиссией РАН. [...] При этом сделана важнейшая оговорка: по желанию автора или редактора любая книга может быть напечатана последовательно с буквой ё.

Полез искать эти правила, нашёл, но там написано диаметрально противоположное:

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

Полный текст действующих правил, регламентирующих написание буквы ё:

Употребление буквы ё в текстах разного назначения
§ 5. Употребление буквы ё может быть последовательным и выборочным.
Последовательное употребление буквы ё обязательно в следующих разновидностях печатных текстов:
а) в текстах с последовательно поставленными знаками
ударения (см. § 116);
б) в книгах, адресованных детям младшего возраста;
в) в учебных текстах для школьников младших классов и
иностранцев, изучающих русский язык.
Примечание 1. Последовательное употребление е принято для иллюстративной части настоящих правил.
Примечание 2. По желанию автора или редактора любая книга может быть напечатана последовательно с буквой е.
Примечание 3. В словарях слова с буквой ё размещаются в общем алфавите слов с буквой е, напр.: еле, елейный, ёлка, еловый, елозить, ёлочка, ёлочный, ель; веселеть, веселить(ся), весёлость, весёлый, веселье.
В обычных печатных текстах буква ё употребляется выборочно. Рекомендуется употреблять ее в следующих случаях.
Для предупреждения неправильного опознания слова, напр.: всё, нёбо, лётом, совершённый (в отличие соответственно от слов все, небо, летом, совершенный), в том числе для указания на место ударения в слове, напр.: вёдро, узнаём (в отличие от ведро, узнаем).
Для указания правильного произношения слова — либо редкого, недостаточно хорошо известного, либо имеющего распространенное неправильное произношение, напр.: гё'зы, сёрфинг, флёр, твёрже, щёлочка, в том числе для указания правильного ударения, напр.: побасёнка, приведённый, унесённый, осуждённый, новорождённый, филёр.

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

Таким образом я убедился: употребление буквы ё — на совести автора. Ни последовательно употребляющий ё, ни последовательно не употребляющий не может упрекнуть оппонента в ошибке.

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