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

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

В этой статье мы углубимся в визуализацию этих понятий и взаимосвязей.

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

Не читали предыдущую статью? Узнайте о строительных блоках концептуальных диаграмм и ознакомьтесь с пошаговым примером схемы метода reduce().

Использование только прямоугольных блоков с соединительными линиями отлично работает при создании значимой диаграммы, но представьте, что произойдет, если мы добавим немного контекста в саму форму!

Прямоугольник против остальных

Во внешней среде большинство тем можно выразить с помощью:

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

См. пример дерева компонентов ниже, где я планирую создать динамическую настраиваемую форму с помощью Vue.js.

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

Также на диаграмме используются два цвета: зеленый и оранжевый. Зеленые прямоугольники обозначают известные компоненты, а оранжевые предполагают, что они динамически визуализируются с помощью <component :is="...">. Диаграмма пытается показать возможные значения реквизита :is="...", что это может быть Checkbox, TextArea, InputText или радиокомпонент.

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

Здесь мы воспользуемся помощью символов обозначения блок-схемы. Мы все видели блок-схемы и знаем, как выглядят формы блок-схем. Итак, мы собираемся позаимствовать некоторые из подходящих фигур и перенести их на концептуальную диаграмму.

Например, можно показать, когда мы хотим обратиться к одному файлу, а не к нескольким файлам. Я использовал форму нескольких документов, чтобы указать, что промежуточное ПО Global и Layout может влиять на более чем один маршрут, в то время как промежуточное ПО Page может быть применено к одной странице в время. Увидев форму, наши умы сразу же будут искать дополнительное значение того, что для начала существует три типа промежуточного программного обеспечения для маршрутов, и чем они отличаются друг от друга и их варианты использования. (Ссылка на концепцию: промежуточное ПО маршрута Nuxt-2)

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

Линии и стрелки

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

В этом примере выше у нас есть две папки: /global-components (розовая) и /layouts (оранжевая). Направление стрелки показывает, что диаграмма движется справа налево. Если мы проследим за стрелками с их соединительными словами, они образуют простые утверждения. Например. Макет использует базовый макет списка (компонент). Опубликовать импорт комментарий (компонент, предоставляемый @vuepress/plugin-blog plugin) и т. д.

В литературе по концептуальным картам эти простые утверждения известны какпредложения.

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

Аннотации

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

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

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

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

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

Иконки и легенда

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

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

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

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

Рассмотрим этот пример Nuxt-2 Context, который представляет собой идеальный вариант использования для добавления раздела легенды. Nuxt Context предоставляет все эти ключи, которые мы видим на диаграмме. Они представляют собой комбинацию функций, объектов, логических значений, некоторые из которых доступны только на клиенте или сервере, а иногда и на том, и на другом! А теперь представьте, если бы мы написали эти ключевые атрибуты словами! Это мгновенно загромождает диаграмму и делает ее очень трудной для чтения.

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

С легендой сбоку и кружками с цветовой маркировкой мы можем сэкономить место, сохраняя при этом ключевой фокус. Например. см. ключ env в розовом кружке. Мы можем легко сказать, что ключ env — это 1) объект, который 2) предоставляется Webpack во время сборки и 3) он доступен как на клиенте, так и на сервере.

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

Форматы

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

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

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

Заворачивать

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

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

Многое из того, что мы здесь узнали, будет зависеть от выбранного вами программного обеспечения для построения диаграмм, но понимание этих визуальных элементов поможет вам:

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

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

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

Ресурсы

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

Примеры диаграмм, упомянутых в этой статье:

Первоначально опубликовано на https://krutiepatel.com

Want to Connect?
Follow me at @krutiepatel to get notified of upcoming contents.