Графический интерфейс

Ключевые понятия

Графический интерфейс пользователя (Graphical User Interface, GUI) — разновидность интерфейса, в котором человек взаимодействует с устройством посредством наглядных графических объектов (окон, кнопок, меню, списка, курсора).

Представление заметки (View) — способ отображения данных заметки на экране устройства пользователя.

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

Примеры представлений: список файлов в проводнике, граф заметок, гипертекст в разметке Markdown.

Структура графического интерфейса

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

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

    graph LR
subgraph Window ["Окно приложения Obsidian"]
	subgraph Menu ["Общее управление приложением"]
		A["Общее меню"]
		K["Команды"]
	end	
	subgraph Work ["Область управления заметками"]
		B["Навигация"]
		C["Редактор"]
		D["Контекст"]
	end
	A~~~B~~~C~~~D
end
%% Стили блоков
style Window fill:#D3D8EA,stroke:#474972,stroke-width:1px
style Menu fill:#F4F6FA,stroke:#474972,stroke-width:1px
style Work fill:#F4F6FA,stroke:#474972,stroke-width:1px

Общее управление приложением

Общее управление приложением содержит:

общее меню приложения;, в котором представлены все команды приложения;
панель команд (Ribbon), предназначенную для размещения кнопок плагинов.

Область управления заметками

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

Разделители и вкладки

Область управления заметками содержит разделители (Splits) и вкладки (Tabs), которые определяют способ отображения заметки пользователя.

Различают следующие типы разделителей:

левый разделитель (Left split);
корневой разделитель (Root split);
правый разделитель (Right split).

Существуют следующие правила структуризации:

Разделитель может содержать вкладки, но вкладка не может содержать разделитель.
Корневой разделитель может содержать разделители, но левый и правый разделители могут содержать только вкладки.

    graph TD
A["Область редактирования"]
B["Левый разделитель"]
C["Корневой разделитель"]
D["Правый разделитель"]
E["Навигация"]
F["Разделитель"]
G["Вкладка"]
H["Контекст"]
T["Заметка"]

A --> B --> E
A --> C --> F
C --> G --> T
A --> D --> H

Ассоциативная взаимосвязь между навигацией, заметкой и контекстом следующая:

навигация позволяет найти заметку;
редактирование заметки изменяет контекст.

    graph LR
E["Навигация"]
T["Заметка"]
H["Контекст"]

E --> T --> H

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

Режимы просмотра и редактирования

Пользователю необходимо переключать режимы области управления заметками. Существует два режима: просмотра заметки и редактирования заметки.

Режим просмотра заметки

Приложение Obsidian легко оперирует с заметками, содержащими миллионы строк. Дело в том, что редактор отображает только видимый фрагмент гипертекста. Редактор создаёт свого рода «окно», которое перемещает по заметке. Он обрабатывает лишь то, что попало в границы этого окна, и игнорирует то, что расположено за границами. Это «окно» называют областью просмотра.

Режим редактирования заметки

В режиме редактирования заметок пользователь управляет:

панелью навигации по заметкам хранилища:
- панелью плагинов навигации;
- отображением структуры заметок хранилища;
- панелью управления хранилищем;
панелью редактора:
- редактором заметок;
- гипертекстом заметки;
панелью контекста заметок:
- панелью плагинов;
- контентом контекста;
- панелью состояния заметки.

    block
%% Задаем общую сетку из 3-х долей
	columns 3
%% Левая колонка. 1 доля, 3 строки
    block:left_column
        columns 1
        A["Панель навигации"]
        B["Структура заметок"]
        C["Панель хранилища"]
    end
%% Центральная колонка. 1 доля, 2 строки.
    block:center_column
        columns 1
        D["Панель редактора"]
        E["Гипертекст заметки"]
    end
%% Правая колонка. 1 доли, 1 строки
    block:right_column
        columns 1
        F["Панель контекста"]
        G["Контент контекста"]
        H["Панель состояния"]
    end

Персонификация интерфейса

Пользователь в соответствии со своими предпочтениями может изменить некоторые компоненты графического интерфейса:

темы оформления внешнего вида;
элементы оформления (шрифт, отступы, цвет) в виде фрагментов CSS;
плагины, дополняющие компоненты интерфейса (календари, доски канбан).

Дополнительные сведения

Структура графического интерфейса

О рабочей области с точки зрения разработчиков Obsidian.

Терминал Меню