Как разрабатывать состояния пользовательского интерфейса и общаться с разработчиками с помощью таблицы FSM

1656588853 kak razrabatyvat sostoyaniya polzovatelskogo interfejsa i obshhatsya s razrabotchikami s

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

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

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

Состояние и блок-схема

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

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

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

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

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

qFmzHj0yphxyH6wahzjbg2RlVvYME4jhD7bC
Блок-схемы недостаточно, чтобы рассказать детали дизайна

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

  1. Неудобство. Для рисования, изменения или поддержки диаграммы требуется помощь программного обеспечения или плагинов (кроме классического офисного или дизайнерского программного обеспечения). И это огромно.
  2. Неточности. Сложно сказать, какие состояния требуют просмотра, а какие входы изменяют состояния.
  3. Сложность. Это требует особого внимания при выборе правильных символов и цветов.

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

Таблица концевых автоматов (FSM).

Pbsf05o4zxVtaE2UutUvfBIwvI-Dq9vfKSZ8
Таблица FSM, вдохновленная вступлением Красимира о FSM

Дизайнеры, не испугайтесь звучащего технически названия! Разрешите разбить.

Что такое конечный автомат?

Конечный автомат (FSM) – это абстрактная машина, организующая все возможные состояния и входы. Эта методология обычно используется в программировании и всех видах устройств. Посмотрите на пример турникета конечного автомата, проиллюстрированного в Википедии, и вы сразу получите лучшую идею.

Опять же, FSM – это только совокупность состояний и входных данных. Это так просто. Давайте глубже рассмотрим использование этой таблицы и ощутим ее силу.

Как пользоваться таблицей FSM

В таблице есть три столбца: От государства, Входные данныеи В состояние.

В колонке От государствакаждая ячейка представляет одно возможное состояние, которое может иметь компонент.

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

Наконец, В состояние Фактически столбец является исходным состоянием согласно соответствующему входу.

Почему это лучше?

В таблице четко перечислены три вещи:

  • все возможные состояния
  • когда каждое действие можно выполнить
  • результат выполнения определенного действия

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

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

Лучшее командное общение

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

NxE8X6HX88T6hIGzH7J1K-1J4HjGxwbiVLAo
Блок-схема и каркас страницы аутентификации

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

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

h-sYwcWIhReXKwP2gUJWfi3YoD6Wt7zWPMnj
Есть много условий, которые следует учитывать

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

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

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

vV8ZulIty18DZSRqnH0LouRWxUUFaY4YcgiD
Форма аутентификации FSM — версия отключена

Или, если вы придерживаетесь руководства Google из Material Design, таблица будет выглядеть так:

hzim041f5AbrGtYsiIFgN2iUoGbZEWCN3TBQ
Форма аутентификации FSM — версия Material Design

Разве это не просто, быстро и понятно? Я думаю, что это гораздо лучше, чем другие методы!

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

6WLZESiLFLgUt-jqOMugKe4UcwjbLeEqSY0j
Заголовок таблицы FSM

Это! Добро пожаловать с заполнением простого, но понятного документа для вашей страницы аутентификации, соединив каркас, блок-схему и таблицу FSM!

Последнее замечание

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

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

Наконец, пожалуйста, сообщите мне, если у вас есть какие-то мысли на этот счет!

Китайская версия (中文版連結) / Подробнее о моей работе на vinceshao.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *