Задача маркера - комментирование скриншотов.
![Рис 1. Хайлайтер для скриншотов в DGRM.net. Рис 1. Хайлайтер для скриншотов в DGRM.net.](https://habrastorage.org/getpro/habr/upload_files/0ed/886/502/0ed886502c6176c6de18f0b009b1e199.png)
В интерфейсе должно быть как можно меньше кнопок
Чем меньше кнопок, полей для ввода и меню, тем лучше. Все должно работать “как надо” сразу, без настройки.
![Рис 2. Слева перегруженный интерфейс. Справа интерфейс DGRM без лишних кнопок. Рис 2. Слева перегруженный интерфейс. Справа интерфейс DGRM без лишних кнопок.](https://habrastorage.org/getpro/habr/upload_files/3e2/7d1/5f4/3e27d15f46cb0c723258475f7f01981f.png)
Маркер всегда над остальными элементами
В DGRM не нужно управлять слоями.
Элементы всегда выстраиваются в таком порядке:
Вверху маркер
Ниже фигуры и текст
Обводка
В самом низу картинки
![Рис 3. Распределение элементов по слоям в DGRM: вверху маркер, ниже фигуры и текст, потом обводка, в самом низу картинки. Рис 3. Распределение элементов по слоям в DGRM: вверху маркер, ниже фигуры и текст, потом обводка, в самом низу картинки.](https://habrastorage.org/getpro/habr/upload_files/996/103/19f/99610319f930f73dc2fe5694558ec3af.png)
Элементы на одном уровне можно менять местами. Для этого кликните на элементе.
![Рис 4. Кликните чтобы перенести фигуру наверх. В DGRM нет отдельных кнопок управления слоями. Рис 4. Кликните чтобы перенести фигуру наверх. В DGRM нет отдельных кнопок управления слоями.](https://habrastorage.org/getpro/habr/upload_files/a72/580/e60/a72580e602f9f65f2e43a3f55f0c46fb.gif)
Маркер фиолетовый. Фиолетовый лучше других цветов видно на разных фонах
Если нужно выбрать только один цвет для маркера - лучше взять фиолетовый. Фиолетовый видно почти на любом фоне. Еще фиолетовый нейтральный цвет, в отличие от красного и зеленого.
![Рис 5. Для маркера лучший цвет - фиолетовый. Фиолетовый видно почти на любом фоне. Фиолетовый, в отличие от красного и зеленого, нейтральный цвет. Рис 5. Для маркера лучший цвет - фиолетовый. Фиолетовый видно почти на любом фоне. Фиолетовый, в отличие от красного и зеленого, нейтральный цвет.](https://habrastorage.org/getpro/habr/upload_files/051/128/46e/05112846e03482a5cd0fcdd1a80727a7.png)
Маркер/хайлайтер должен подсвечивать текст и не мешать чтению. Поэтому лучше использовать не прозрачность, а смешивание цветов (mix-blend-mode).
![Рис 6. Слева для маркера используется смешение цветов. Справа - прозрачность. Прозрачность хуже, потому что текст хуже читается, сам маркер более бледный. Рис 6. Слева для маркера используется смешение цветов. Справа - прозрачность. Прозрачность хуже, потому что текст хуже читается, сам маркер более бледный.](https://habrastorage.org/getpro/habr/upload_files/285/c53/5fd/285c535fdefce7ee81890c725c155ee8.png)
У маркера отличный алгоритм сглаживания кривой
Если кривую не сглаживать - будет некрасиво. В DGRM используется отличный алгоритм сглаживания. Это технический момент, но я отмечу это в статье про дизайн. Алгоритм дает компактный результат. В 10 раз компактнее “обычного” алгоритма. Для описания кривой нужно меньше данных, значит приложение быстрее работает.
![Рис 7. Пример работы алгоритма сглаживания кривой. Рис 7. Пример работы алгоритма сглаживания кривой.](https://habrastorage.org/getpro/habr/upload_files/6fa/219/d64/6fa219d64861fb510c75177b916662ac.png)
M31 -7l-0.23 0q-0.23 0 -4.12 0 t-9.37 0 t-11.66 -0.23 t-10.51 -0.23 t-8.69 0 t-6.63 0 t-5.03 0.23 t-4.34 1.14 t-2.06 2.74 t2.06 4.34 t16 3.89 t20.34 1.14 t10.06 -0.23 t7.54 -0.46 t5.94 -0.69 t1.83 -1.37 t-1.83 -2.29 t-9.83 -1.83 t-16.23 -1.14 t-13.94 -0.46 t-7.54 0 t-2.97 0 l-0.91 0
Листинг 1. Машинное описание кривой на рис. 7 в DGRM. Для описания нужно мало данных - это хорошо, т.к. приложение работает быстрее. Это реальные данные без сокращения.
Линии маркера объединяются в фигуры
Например чтобы нарисовать стрелку нужно две линии. Вначале рисуете одну линию, потом вторую. DGRM объединит линии в одну фигуру. Отдельных кнопок “объединить/разделить” нет.
Работать с фигурой удобней чем с разрозненными линиями. Фигуру можно целиком перенести, удалить или копировать.
![Рис 8. В DGRM линии маркера объединяются в фигуры. Рис 8. В DGRM линии маркера объединяются в фигуры.](https://habrastorage.org/getpro/habr/upload_files/aa4/df8/b37/aa4df8b378cacf219ea4ea7a19aba0b0.gif)