Оцените объективно работу дизайнера
Первые UI работы в Sketch. Регистрационная форма для приложения и экран входа в фитнесс приложение. оцените, посоветуйте что исправить. Хорошо/плохо?
Первые UI работы в Sketch. Регистрационная форма для приложения и экран входа в фитнесс приложение. оцените, посоветуйте что исправить. Хорошо/плохо?
Всем привет:)
Я запустил небольшой личный челлендж. Каждый день я рисую 1 экран вымышленного мобильного приложения. Исходник каждого экрана можно скачать в формате Sketch, если экран с анимацией – исходник Principle тоже можно скачать.
Цель:
1) Собрать длинную страницу из дизайна iOs приложений разных тематик;
2) Практика в Sketch и Principle;
3) Разминка и небольшой отдых от основных проектов;
4) Тренировка скорости разработки, на прорисовку экрана я планирую тратить не более 40 минут времени;
Заканчивается первая неделя эксперимента и я хочу поделиться с вами результатом, а вы дайте обратную связь в комментариях и идеи для новых экранов:)
#1. Экран поиска посуточного жилья
04.02.2018
#2. Экран ожидания такси
05.02.2018
#3. Магазин наручных часов
06.02.2018
К этому экрану я заснял небольшое видео с анимацией интерфейса:
#4. Список задач на сегодня
07.02.2018
#5. Оформление заказа в интернет-магазине
08.02.2018
#6. Личный портфель криптовалют
09.02.2018
К этому экрану тоже есть видео:
Ребят, у меня уже заканчиваются идеи для экранов, осталось идей на полторы недели.
Есть идеи для приложения? напишите в комментариях, я буду отрисовывать интересные идеи.
Спасибо за внимание, если будет интересно, могу выкладывать каждую неделю пост с экранами:)
Персональный проект для прокачки скиллов. UI редизайн для музыкального композитора tycho. Всё от логотипа до анимации в After effects делал сам.
«Священная корова» типографики
В своих предыдущих постах я уже писал о выравнивании текстовых блоков, но этот вопрос требует более детального рассмотрения. Типографика — это способ организации букв, если не вдаваться в обширные подробности. Эффективная коммуникация и немного радости.
При работе с текстом оперируйте блоками. Думайте блоками.
Обратите внимание — вертикально текст выровнен относительно блока, в который входит весь текст, а не относительно какой-либо строки. Важно помнить, что типографика — не наука, и в ней нет точных рецептов. Любое выравнивание строится на ощущении, что так будет лучше, пусть даже эти ощущения подтверждены многолетней практикой.
Сравните два блока текста ниже. Который из них выглядит более сбалансированным?
Для моих глаз правый вариант предпочтительнее — излишне большой отрыв от линии выравнивания в заголовке компенсирован обратным отступом.
Используйте шрифты, у которых есть как минимум четыре начертания.
Используйте контрасты.
Чтобы создать визуальную иерархию, пользуйтесь различными начертаниями.
Cомневаетесь? Делите на два!
Будьте внимательны к межстрочным интервалам.
Наиболее органично выглядит текст с межстрочными интервалами 1,2х-1,5х от размера кегля шрифта. Смотрите:
Урезайте длину строк.
Дальнейшая информация — для фанатов своего дела.
Дефис используется в сложносоставных словах.
- – —
Короткое тире используется для обозначения диапазона или расстояния.
- – —
Длинное тире прекрасно заменяет запятые, скобки и двоеточия.
- – —
И самое главное, не забывайте о кернинге.
При подготовке материала использована статья Pierrick Calvez: https://medium.muz.li/typography-that-sacred-cow-ea7a5909ca7...
Спасибо, что дочитали!
Не знаю, мои уважаемые подписчики, о чём вам ещё было бы интересно почитать, поэтому предлагайте.
Всем привет!
Спасибо всем, кто подписался на меня, продолжаем статью.
Первая часть тут: https://pikabu.ru/story/opticheskie_yeffektyi_v_polzovatelsk...
Вторая часть тут: https://pikabu.ru/story/opticheskie_yeffektyi_v_polzovatelsk...
Если вы не дизайнер и вам неинтересно — смело проходите мимо.
3. Оптическое скругление угла
Что может быть более круглым, чем круг? Раньше я думал, что ничего. Но, как я сказал в самом начале, наши глаза иногда воспринимают вещи не так, как мы ожидаем. Итак, какой круг на рисунке ниже выглядит более плавным?
Люди, которых я спрашивал, выбирали между вариантами 3 и 4. Варианты 1 и 2, безусловно, слишком угловатые, 5 — уже близок к квадрату. Если мы совместим третий и четвёртый варианты — геометрический и исправленный круги, то узнаем, что второй чуть больше первого и, следовательно, более округлый для наших глаз.
Чтобы продемонстрировать, что именно я имею в виду, я взял буквы «О» из трёх известных геометрических шрифтов — Futura, Circe и Geometria. Учитывая, что высококачественные шрифты построены на основе визуального восприятия человека и используют сложную систему оптической конструкции, я полагаю, что их круговые формы выглядят более округлыми, чем геометрические. Разве эти буквы не приятны для глаз?
Давайте накладывать на них геометрические круги. Даже «О» шрифта Futura, что ближе всех к геометрической форме круга, больше. Буквы шрифтов Circle и Geometria шире, чем геометрические круги.
Таким образом, исправленный оптически (справа) может выглядеть еще более округлым, чем геометрический (слева).
Как мы можем использовать это? Для скругления угла, конечно! Если вы используете встроенную функцию скругления в популярных графических редакторах — Photoshop, Illustrator или Sketch — оптически результат не будет хорошим.
Глаз человека моментально обнаруживает точки, где прямая линия превращается в кривую. И это скругление не выглядит естественным.
Я исправил эту проблему с учётом зрительного восприятия.
У такого скругления есть дополнительная область за геометрическим кругом, что делает точки, где линия переходит в кривую, незаметными.
Просто посмотрите на разницу между этими методами скругления.
Теперь мы можем применить этот подход к округлым кнопкам.
Думаю, вы заметили, что кнопки справа имеют более плавный угол скругления и это более приятно для глаз.
Та же история с иконками приложений. Для достижения идеального результата не используйте стандартное скругление углов. Но прежде чем мы погрузимся в эту тему, давайте взглянем на две фигуры со скруглёнными углами.
Первая фигура — это квадрат со скруглёнными углами, который я создал в Sketch. Вторая фигура — суперэллипс, также известный как кривая Ламе. Эти кривые были открыты французским математиком Габриэлем Ламе (Gabriel Lamé) и, в зависимости от используемой формулы, могли варьироваться от чего-то вроде четырехконечной звезды до фигуры, которая выглядит как округлый квадрат.
Марк Эдвардс (разработчик эксклюзивных приложений для Mac) предложил формулу кривых Ламе, которая приводит к гладкой и оптически совершенной форме. Начиная с iOS 7 иконки создаются на этой основе.
Позднее эта форма была изменена. Для дизайнерских гайдов добавили пропорции золотого сечения и сетку, но это уже другая история.
Основное преимущество использования суперэллипса — его более круглая и гладкая форма. С другой стороны, эти нестандартные формы трудно вставить в реальный интерфейс. Нужно либо объединить несколько SVG-файлов, либо подключить специальные формулы или скрипты в код, или использовать PNG-маски, как это делает Apple для своих иконок.
Что касается самого дизайна, то существует простой способ исправить скругление углов. Необходимо перейти в режим редактирования формы и вручную переместить маркеры управления точками кривых ближе друг к другу.
Разница еще заметнее для скруглённых острых углов, что важно для рисования оптически правильных дорожных схем или схем метро.
ВАЖНО ПОМНИТЬ
Геометрически скруглённые углы выглядят искусственно, потому что можно легко увидеть точки, где прямая линия внезапно превращается в кривую.
Оптически правильное скругление угла требует специальных формул или ручной регулировки формы.
БОНУС
Иногда квадрат неидеальной геометрии выглядит более квадратно. Можно подумать «Что за бред?» Итак, что вы думаете о квадратах ниже? Какая форма выглядит более квадратной?
Если вы выбрали квадрат слева, вам удалось увидеть непредвзято, с точки зрения вашего оптического восприятия.
Я лично был удивлён, когда узнал, что наши глаза более чувствительны к высоте объекта, чем к его ширине. Это объясняет, почему даже в геометрических шрифтах буквы «О» всегда шире, чем геометрические круги, а вертикальные штрихи буквы «Н» всегда толще, чем горизонтальные.
При подготовке материала использована статья Славы Шестопалова (Optical Effects in User Interfaces (for True Nerds): https://medium.muz.li/optical-effects-9fca82b4cd9a
Спасибо, что дочитали! Дальше будет небольшая статья про текст
Всем привет!
Спасибо всем, кто подписался на меня, продолжаем статью.
Первая часть тут: https://pikabu.ru/story/opticheskie_yeffektyi_v_polzovatelsk...
Если вы не дизайнер и вам неинтересно — смело проходите мимо.
2. Выравнивание различных форм
Оптическое выравнивание является логическим продолжением темы оптического баланса
и феномена оптической массы. Взгляните на полоски ниже. Они одинаковой длины?
Что касается пикселей, то ответ — это твердое «да». Однако кажется, что нижняя полоса выглядит короче, чем верхняя.
Ещё одна картинка с двумя полосами. Что изменилось?
Я применил оптическую компенсацию для нижней полосы. Равновесие достигнуто за счёт того, что острые части «флажка» выходят на 20 пикселей за длину верхней полосы. Оптически этот приём выравнивает обе формы.
А теперь несколько более сложных примеров с полосками разной формы.
Итак, если вы создаёте плакат с загнутой лентой и текстом на ней, или накладываете яркий «скидочный» ярлык на карточку продукта интернет-магазина, то разумно сделать их оптически сбалансированными. Острые края должны выходить немного за пределы остальной формы, особенно если это прямоугольник.
А как насчёт выравнивания обычного текста и абзацев, которые имеют фон? Это зависит
от визуальной плотности фона. Если он светлый, вы можете выровнять выделенный абзац
с остальным текстом.
Поскольку фон блока «...Самое важное...» светлый, он не мешает чтению текстового потока. Для тёмного фона лучше использовать другой подход. На рисунке ниже чёрный фон выравнивается по ширине формата, а выворотка внутри блока снабжается отступами.
Тот же принцип будет работать с кнопками и полями ввода. Конечно, это не строгое правило, а рекомендация для оптического выравнивания интерфейса.
Слева.
Светлый фон полей ввода может выходить за пределы собственных заголовков и ограничений поля ввода текста. Правый край кнопки «Отправить» не полностью выровнен с фоном поля ввода сообщения, потому что кнопка темнее и выглядит оптически массивнее.
Справа.
У полей ввода есть рамка, по которой я выровнял заголовки полей. Информация внутри полей ввода имеет отступы. У кнопки «Отправить» правый край — треугольный, поэтому вся кнопка смещена вправо, чтобы сбалансировать её и поля ввода выше.
И здесь мы подходим к ещё одному аспекту выравнивания — выравнивание текста и значков. Посмотрите на кнопки ниже. Текст расположен по центру?
Трюк в том, что на правой кнопке я немного переместил слово влево, так как правый край треугольный. Кроме того, кнопка в виде стрелки на 21 пиксель шире, чтобы выглядеть оптически равной прямоугольной кнопке.
У текстовых кнопок есть не только горизонтальное выравнивание, но и вертикальное выравнивание слова и фона. Первый подход, о котором я хотел бы рассказать — выравнивание, основанное на высоте прописной буквы шрифта (так называемая высота шапки). Она равна высоте буквы «Н» или «П».
Пространство выше и ниже прописной буквы выравнено относительно краёв кнопки. Это разумно, потому что команды, как правило, пишутся с прописных букв. Английский алфавит располагает чуть большим количеством букв с верхними выносными элементами (l, t, d, b, k, h) в отличии от русского (б, ё,й, ф); нижних же выносных элементов букв в английском алфавите, наоборот, меньше (y^, j, g, p), чем в русском (д, р, у, ф, ц, щ)
Другой подход заключается в выравнивании надписи и фона с использованием высоты строчной буквы шрифта (так называемой x-height). В шрифтах sans и sans serif x-height равен (не поверите) высоте строчной буквы «х».
Такой подход тоже имеет смысл, поскольку основной оптический вес текста сосредоточен в области, где помещаются строчные буквы. Но лично я считаю внешний вид такой кнопки несбалансированным.
Есть ли разница между этими подходами? Да, есть. Тем не менее, графически, она не так уж и велика.
Ситуация с иконками на кнопках немного иная. Поставим популярный значок «Отправить» на круглую кнопку. Какой вариант выглядит лучше?
Надеюсь, вы заметили, что что-то не так с левой кнопкой. Это происходит из-за методов выравнивания. Слева значок обработан так, как если бы он был прямоугольным. В определённой степени это правильно, потому что при отправке файла SVG или PNG разработчику он имеет вид прямоугольного листа с рисунком на нём. Правый вариант показывает значок, размещенный так, чтобы все его острые края имели одинаковое расстояние до круга кнопки на фоне.
Если вы подготовили файл для разработчиков, то нужно зарезервировать некоторую область, чтобы они могли центрировать значок на фоне оптически правильно.
Та же история с кнопками «Воспроизвести». Если напрямую выровнять эти фигуры относительно друг друга (скруглённый прямоугольник и треугольник) — кнопка будет выглядеть странно.
Если вы хотите расположить треугольник оптически лучше, окружите его и выровняйте этот круг с фоном кнопки.
ВАЖНО ПОМНИТЬ
Формы с острыми краями должны быть больше, чтобы выглядеть сбалансированными с соседними прямоугольными объектами.
Выравнивание по высоте прописных букв — эффективный и широко используемый метод позиционирования названий кнопок на их фоне.
Один из эффективных способов правильно расположить треугольный значок на кнопке — окружить его и выровнять круг с фоном.
Всем привет!
Расскажу вам немного про интерфейсы и занятные оптические приёмчики. Если интересно — накидаю ещё.
О чём этот пост? Если вы не дизайнер и вам неинтересно — смело проходите мимо. А я расскажу всем, кто остался о магии сбалансированных кнопок, правильном выравнивании фигур и идеальных углах скругления.
Наши глаза — странные органы, которые часто нам врут. Но если вы знаете особенности зрительного восприятия человека, вы можете создать более доступный и совершенный дизайн. Не только в типографии используют оптические приемы для создания удобочитаемых и сбалансированных шрифтов, эти хитрости помогают дизайнерам интерфейсов, создающим взаимодействие между пользователем и компьютером.
1. Точный и оптический размер
Что больше: 400-пиксельный квадрат или 400-пиксельный круг? Геометрически их ширина и высота равны. Но посмотрите на картинку ниже. Наши глаза сразу обнаружат, что квадрат внушительнее круга. Кстати, слова, связанные с весом или объёмом, больше всего подходят для описания оптических эффектов.
В случае, если вы не верите, что эти формы нарисованы точно, это версия с направляющими
и цифрами.
Давайте взглянем на ещё одну картинку с квадратом и кругом. С точки зрения визуального веса, кажутся ли они вам равными?
Для меня определённо они равны. По крайней мере, трудно сразу сказать, что одно перевешивает другое. Неудивительно — я увеличил диаметр круга на 50 пикселей.
Чтобы показать, почему это происходит, я перекрывал фигуры из первого примера (400-пиксельный квадрат и круг) и второго примера (400-пиксельный квадрат и 450-пиксельный круг). Как вы можете заметить ниже, квадрат «перевешивает» круг за счёт зон «а» в первом примере, в то время как во втором примере круг уравновешивает своё положение зонами «b».
То же самое происходит и с квадратами (ромбами) или треугольниками. Чтобы визуально сбалансировать квадраты, они должны быть больше.
Как использовать эту особенность в интерфейсах? Например, когда вы создаёте набор иконок, важно, чтобы все они были хорошо сбалансированы, чтобы значок не выделялся слишком сильно или не был слишком мал. Если непосредственно вписать значки в квадратные области, то более квадратные значки будут выглядеть больше.
Я рекомендую компенсировать вес разных форм иконок, визуально увеличивая небольшие иконки и уменьшая визуально тяжелые относительно среднего размера области.
Пример иконок, сбалансированных оптически.
Становится ясно, почему область значков всегда больше, чем тело значка — чтобы неквадратные значки вписывались и выглядели не меньше, чем квадратные.
Проще всего проверить визуальный баланс размытием. Если ваши значки превращаются в более-менее похожие пятна, они имеют одинаковый оптический вес.
Но иногда мы работаем с уже существующей графикой, например, логотипы соцсетей используются в качестве кнопок «поделиться» и «лайк». Иконки Facebook и Instagram квадратные, а Twitter — это силуэт птицы, Pinterest — литера «P» в круге. Вот почему иконки Twitter и Pinterest из одного набора немного больше — так они выглядят сбалансированными с иконками Facebook и Instagram.
Другим примером проблемы оптического баланса является текстовое поле, расположенное рядом с круглой кнопкой. Если диаметр кнопки равен высоте текстового поля, то кнопка кажется меньше, но если немного увеличить её, то вся конструкция станет более сбалансированной.
Но если вы измените стиль кнопки, увеличение не потребуется. На рисунке ниже кнопка и текстовое поле имеют высоту 80 пикселей, но кнопка справа не выглядит «потерянной» из-за контрастной черной заливки.
ВАЖНО ПОМНИТЬ
Оптический вес — это то, как человеческие глаза воспринимают размер и значение объекта, и он не обязательно равен его пиксельному размеру.
Круги, алмазы, треугольники и другие неквадратные формы должны быть больше, чтобы оптически сбалансировать их с квадратными формами.
Области для значков должны иметь некоторое пространство, зарезервированное для оптической балансировки. Это важно для наборов иконок, которые постоянно на виду.
Ну, на этом я закончу, а если будет интересно, то впереди будет ещё про выравнивание разилчных форм, текстовых блоков и прочее
Справились? Тогда попробуйте пройти нашу новую игру на внимательность. Приз — награда в профиль на Пикабу: https://pikabu.ru/link/-oD8sjtmAi
Для начала взгляни на картинку ниже:
С 60-х годов дизайн панели набора номера не менялся. Почему? Наверное потому что текущий вариант — идеальный. А что если я тебе скажу, что это архаизм, не учитывающий особенности современных средств связи? Сейчас объясню.
Впервые кнопочную модель набора номера представили в, как не трудно догадаться, 1963 году, тогда компания Bell System просто решила взять за основу дизайн панели набора на калькуляторах того времени. Однако, какой-то умный человек в этой компании задался вопросом, а почему у калькуляторов именно такой дизайн панели?
Вопрос был задан производителям калькуляторов (Texas Instruments и Sharp), на что они сказали, что этот дизайн взят просто «от балды», никаких исследований они не проводили. Класс. Но ребята из Bell System дураками не были, и решили провести собственное исследование с множеством вариантов дизайна панели набора номера:
По результатам исследования выяснилось, что наиболее удобной в пользовании оказалась панель, похожая на уже существующую на калькуляторах, но только ее перевернутая версия. С тех пор такой дизайн используется на всех телефонах. Люди создали беспроводные домашние телефоны и зафигачили на них ту же панель, потом были созданы мобильные телефоны, дизайн по-прежнему не менялся, затем смартфоны, а панель все та же, что и полвека назад.
Пока размеры экранов были небольшими, люди могли набирать номер, удерживая телефон одной рукой. Однако теперь смартфоны становятся все больше и больше. Эта модель перестает работать.
Думаю, уже становится очевидным вывод о том, что текущий дизайн панели набора утратил свою актуальность. Маркетологами и веб-разработчиками было проведено много исследований на тему того, как пользователь держит телефон, куда ему удобней нажать, посмотреть или чихнуть.
Большинство людей держит телефон одной рукой(правой), при этом вторая рука никак не задействована, то есть все действия выполняются большим пальцем правой руки:
Интересно (и неудивительно), что наиболее эффективная часть экрана находится внутри т.н. «дуги большого пальца» и значительно ниже середины большинства крупных смартфонов.
— Области, демонстрирующие, куда проще или сложнее попасть большим пальцем, от зеленого к красному соответственно. Пример для правой руки.
Теперь, после изучения этой картинки, текущая панель набора номера уже не выглядит такой идеальной, верно? Все дело в так называемой проблеме большого пальца.
Мы с вами зажрались, нам нужны все бóльшие экраны смартфонов, без рамок, чуть ли не без задней панели, поэтому одним пальцем пользоваться смартфоном становится все сложнее, а держать его двумя руками — это не царское дело, т.к. обычно вторая рука занята: держит сумку, портмоне или руль.
Эта проблема со временем никуда не денется, а станет только более актуальной при взаимодействии со смартфоном.
Вот примеры того, как можно было бы попробовать оформить панель набора номера:
— Примеры не мои, но суть ясна. В любом случае, тут потребовались бы исследования с довольно значительной выборкой.
В общем-то, теперь, какой совершенный флагман ни возьми, везде будет старая, неудобная, неадаптированная под сам телефон панель набора номера, и это только из-за того, что дизайнеры не придают этому значения, говоря себе что-то вроде этого: «да ну его нафиг, всю жизнь пользуемся такой панелью, зачем ее менять, если бы она не была идеальной, она бы так долго не продержалась».
Не будь дураком, думай своей головой.
Подготовлено telegram-каналом о дизайне «Дизайнер»