Сегодня я посетил замечательный доклад Джеймса Боуза на GopherCon 2018 под названием CL-EYE Catching UIs и был вдохновлен превратить одно из моих молниеносных выступлений на аналогичную тему в сообщение в блоге. Я настоятельно рекомендую вам взглянуть на презентацию Джеймса, где вы найдете множество отличных идей интерфейса командной строки, основанных на Go.

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

Теперь вы можете спросить: гм, Эмили ... вы когда-нибудь видели терминал?

И да, я понял - это простой интерфейс.

Итак, почему дизайн интерфейса командной строки имеет значение?

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

Давайте рассмотрим основные аспекты того, что делает интерфейс командной строки отличным.

Форматирование

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

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

Отличный способ реализовать это на практике - использовать пакеты, позволяющие создавать таблицы. Например, в Node вы можете использовать CLI Table, а в Go - Tablewriter.

Цвет

Использование цвета текста, пожалуй, и самое простое, и самое важное дополнение, которое вы могли бы внести в свой инструмент командной строки. Цвет может обеспечивать как контекст, так и контраст. Возьмем, к примеру, дорожные знаки:

Некоторые цвета, такие как желтый, оранжевый и красный, предназначены для привлечения внимания. Эти знаки очень важны - НЕ ВХОДИТЕ! ОСТОРОЖНОСТЬ! СТОП! Эти цвета привлекают ваше внимание. Они также предоставляют контекст. Красные знаки означают остановку, желтые предупреждают вас (возможно, предупреждают о ветреной дороге или крутом уклоне), но вам даже не нужно читать слова, чтобы понять их значение.

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

Вот некоторые основные цветовые контексты:

  • Красный = предупреждение, опасность
  • Зеленый = успех
  • Желтый = действовать с осторожностью
  • Синий = стабильность, спокойствие - обычно используется для мягкого предоставления информации

Для Go можно использовать пакет Color. Для Node вы можете использовать Chalk.

Визуальные эффекты

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

В Node есть такие пакеты, как Log-Symbols, которые позволяют добавлять к вашему тексту иконку, и она даже уже в цвете - оценка!

Также существуют пакеты индикаторов выполнения и счетчиков для Node, такие как NodeProgress и CLI Spinner.

Точно так же в Go есть пакеты индикатор выполнения и счетчик.

Копировать

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

  • Интуитивно понятные команды
  • Последовательное именование и структура команд (например, везде используйте команды [глагол] [существительное])
  • Всегда включайте команды справки и документацию
  • Всегда создавайте псевдонимы команд (например, -v для версии), чтобы пользователь мог быстрее получать нужную информацию.

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

Подробнее откуда это взялось

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

Следите за нашей публикацией, чтобы увидеть больше историй о продуктах и ​​дизайне, представленных командой Журнала.