В современном мире нам ежедневно приходится сталкиваться с интерфейсами, которые либо развиваются в направлении «красивостей» без функциональности, либо с функциональностью без удобств.
Содержание
- Введение;
- Часть 1. Механизмы вкладок у существующих IDE;
- Часть 2. Результаты исследования;
- Часть 3. Наш механизм вкладок;
Введение
В современном мире нам ежедневно приходится сталкиваться с интерфейсами, которые либо развиваются в направлении «красивостей» без функциональности, либо с функциональностью без удобств.
На начальном этапе разработки mr. Gefest’а я заложил в него несколько правил. В одном из них говорится: «Создавать только функциональные, удобные и эстетичные элементы интерфейса».
Следовать данному правилу непросто. Иногда приходится полностью изменить какой-то элемент интерфейса, на который потратили несколько недель, потому что на этапе тестирования (при создании сайтов в mr. Gefest’е) он не упрощал работу веб-разработчиков достаточно сильно.
Механизм вкладок является одним из часто используемых элементов UI в средах разработок. Несмотря на то, что все реализации данной технологии обладают множеством недостатков, их до сих пор никто кардинально не изменял. По этой причине мы решили переосмыслить его концепцию и создать самый эффективный механизм вкладок.
В данной статье мы рассмотрим существующие механизмы вкладок у Cloud9, PHPstorm, Sublime Text3 и Bracket, их недостатки и преимущества, а также расскажем о реализованном решении в mr. Gefest’е.
Часть 1. Механизмы вкладок у существующих IDE.
Cloud9
У Cloud9 вкладки находятся в двух местах: над текстовым редактором и над файловым менеджером. При открытии большого числа файлов невозможно прочитать их имена и нельзя узнать их полный путь. На панели над текстовым редактором присутствует кнопка для открытия списка файлов. У всех вкладок, кроме текущего (текст в правом нижнем углу), невозможно узнать используемый синтаксис.
Его механизм вкладок расположен в трех панелях, что говорит об излишнем загромождении интерфейса.
Преимущества:
- обладает привычной реализацией;
- есть два способа работы с вкладками;
- присутствует кнопка «Закрыть» у каждой вкладки;
- имеется кнопка «Создать файл» на панели над текстовым редактором;
Недостатки:
- не информативен;
- занимает много места;
- неудобно одновременно работать с вкладками и файловым менеджером;
- при открытии большого числа вкладок и при работе через панель над текстовым редактором невозможно прочитать их полные имена;
- механизм вкладок сокращает размер файлового менеджера;
- нет предпросмотра файла;
- кнопка «Создать файл» занимает дополнительное место на панели «Вкладки»;
- невозможно узнать сокращенный путь до файла у всех вкладок сразу;
- сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;
Bracket
В Bracket рассматриваемый механизм находится в левой панели в виде перечисления файлов и занимает конкретную высоту, поэтому более удобно одновременно работать с файловым менеджером и вкладками, чем в других IDE с вертикальной реализацией. Если присмотреться к способу отображения вкладок, то можно заметить, что их имена и расширения имеют разный цвет. У всех вкладок, кроме текущего, невозможно определить полный путь и используемый синтаксис.
Преимущества:
- имена вкладок отображаются полностью;
- присутствует простота передвижения по вертикальному списку;
- имя и расширение имеют разный цвет (у открытых файлов);
- появляется кнопка «Закрыть» при наведении на вкладку;
Недостатки:
- реализация данного механизма не информативна;
- недостаточно удобно одновременно работать с вкладками и файловым менеджером;
- иногда не вмещаются полные имена файлов;
- непривычность реализации;
- механизм вкладок сокращает размер файлового менеджера;
- нет предпросмотра файлов;
- не указан используемый синтаксис у всех вкладок;
- невозможно узнать сокращенный путь до файла у всех вкладок сразу;
- сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;
Phpstorm
У данной IDE механизм открытых файлов реализован в виде горизонтальной панели над текстовым редактором. И он имеет свою изюминку. Когда панель полностью заполнена вкладками и Вы открываете новый файл, то самая старая из них закрывается. С одной стороны — удобно, с другой — нет. А если надо открыть вкладку, которая удалилась из данной панели?
Для текущего файла в отдельном пространстве интерфейса отображается полный путь. Это означает, что механизм вкладок занимает две панели UI.
Все вкладки недостаточно информативны и имеют только сложные иконки, указывающие на их расширения.
Преимущества:
- • обладает привычной реализацией;
- • у каждой вкладки есть изображение, показывающее его расширение;
- • использует необычный способ работы с вкладками при их большом количестве;
- • все открытые файлы имеют кнопку «Закрыть»;
Недостатки:
- • недостаточно информативен;
- • занимает две панели;
- • старые вкладки приходится повторно открывать через файловый менеджер (потому что автоматически удаляются с панели вкладок);
- • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;
- • количество вкладок зависит от разрешения экрана;
- • нет предпросмотра файла;
- • невозможно узнать сокращенный путь до файла у всех вкладок сразу;
Sublime Text 3
Разработчики ST3 стараются улучшить свой механизм вкладок. Об этом говорит их нововведения в ST3, которых не было в ST2.
В интерфейсе он занимает две панели: левую, где приходится прыгать от вкладок к файловому менеджеру, и правую над текстовым редактором.
Вкладки на обеих панелях мало информативны. Синтаксис текущего файла отображается в виде текста без иконки на небольшой панели (под текстовым редактором), на которую редко обращаешь внимание. У остальных вкладок идентифицировать используемый синтаксис невозможно. При длительном удерживании указателя мыши над элементами рассматриваемого механизма иногда можно узнать полный путь до них.
На верхней панели расположены три кнопки: два переключателя, которые позволяют перемещаться по скрытым вкладкам, и кнопка для просмотра полного списка открытых файлов.
Преимущества:
Недостатки:
ссылка на оригинал статьи http://habrahabr.ru/post/263257/
Добавить комментарий