Что мне нужно научиться создавать интерфейсы, похожие на LucidChart
Вот ссылка на их демо. По сути, это онлайн-инструмент, который реализует множество функций Visio.
Я создаю приложение, которое потребует аналогичного типа взаимодействия с пользователем, удаления, перемещения, редактирования, изменения размеров объектов, взаимодействия с сетками и направляющими и т. Д.
Поскольку проект предназначен для моих собственных учебных целей, мне было интересно, на каких вещах я должен сосредоточиться или научиться разрабатывать такие высококачественные интерфейсы
ура
3 ответа
Создать такой богатый пользовательский интерфейс - большая задача. Вот почему есть много фреймворков и библиотек, которые уже разработали такие богатые пользовательские интерфейсы, как:
- SproutCore
- Капучино
- ExtJS
- школа дзюдо
- JQuery UI
Sproutcore и Cappuccino предназначены для разработки приложений в стиле настольного компьютера для Интернета и включают очень хорошие компоненты пользовательского интерфейса. А также поддержание состояний приложений и моделей данных. ExtJS имеет много этих функций и очень приятный инструментарий пользовательского интерфейса, как и Dojo.
Lucidchart, который я заметил, также использует API рисования Canvas, так что это то, что вам нужно изучить для манипулирования фигурами и создания гибких соединений. В Mozilla Developer Center есть несколько полезных вещей по API Canvas.
Я бы начал с изучения библиотеки Рафаэля.
Это позволяет вам писать довольно простой код Javascript для рисования графических элементов в браузере, включая довольно простые анимации и перетаскиваемые / кликабельные интерфейсы.
Честно говоря, не так просто и быстро написать что-нибудь столь же сложное, как сайт, на который вы ссылаетесь, но Рафаэль - самый быстрый способ начать работу с основами.
И что лучше всего, Raphael даже совместим со старыми версиями IE, так что вам не нужно беспокоиться только о возможности поддержки новейших браузеров (хотя, конечно, вы можете захотеть заняться другими вещами, для которых нужны другие новые функции),
Надеюсь, это поможет.