Думай меньше. Дизайн лучше.

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

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

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

Американский психолог Барри Шварц написал в «Парадоксе выбора», что устранение выбора может значительно уменьшить беспокойство. Он утверждал, что у нас должны быть стандарты и критерии, но не беспокоиться о том, что может быть что-то лучшее. Это было в контексте потребителей, но я считаю, что это относится и к проектным решениям.

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

1. Ограничивающие переменные

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

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

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

Масштаб и интервалы

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

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

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

Сетки

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

Сетка будет уменьшать переменные в макете

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

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

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

Типография

Я бы сказал, что типографика является наиболее важным аспектом дизайна пользовательского интерфейса, поскольку она может составлять до 95% Интернета и быть движущей силой коммуникации.

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

цвет

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

Такие инструменты, как Adobe Color CC, позволяют легко определить палитру

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

Картинки

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

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

Сколько вариаций в соотношении и размере для изображений нам действительно нужно?

2. Создание руководства по стилю ранее

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

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

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

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

3. Модульный приоритет и адаптация

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

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

Определить ключевые области

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

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

Сосредоточиться на ключевых областях

Как только определены высокоприоритетные области, речь идет о суперфокусировке на критических частях и доведении их до конца. Идея состоит в том, чтобы убедиться, что они интуитивно понятны и отвечают всем требованиям, прежде чем адаптировать менее важные области.

4. Заставить его работать на всех

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

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

Доступность - скрытое благословение

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

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

Это не только инвалидность

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

5. Использование проверенных и протестированных шаблонов

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

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

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

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

Финальная нота

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

Подпишись на меня в Твиттере