3.6 Советы при проектировании
Last updated
Last updated
При разработке вашего приложения есть несколько вещей, которыми вы должны привыкнуть пользоваться. Эти горячие клавиши помогут вам сэкономить большое количество времени при работе с элементами.
Если на вашей странице находится много элементов, становится трудно найти какой-то конкретный элемент, перед его отредактированием. Вот несколько способов облегчить этот процесс.
Используйте панель "Выбор элементов"/"Element Picker" в верхней панели. Все элементы страницы перечислены в алфавитном порядке. Вы можете начать набирать название, чтобы увидеть подходящие элементы. Когда вы наведете курсор на запись в выпадающем меню, вы увидите эскиз, чтобы подтвердить, что это нужный элемент. Клик по нему покажет и выберет элемент. Также откроется "Редактор свойств"/"Property Editor" для редактирования этого элемента. Чтобы наилучшим образом пользоваться этой функцией, вы должны привыкнуть точно именовать свои элементы.
Если два элемента перекрываются, клики по ним с зажатой клавишей CMD/CTRL будут по очереди выбирать каждый элемент, даже если один полностью находится под другим. Пользуясь этой функцией, вы сможете выбрать элемент, находящийся под всеми другими элементами не изменяя макет страницы.
Кликнув по иконке глаза вы перейдете в режим Рентгена, который сделает элементы полупрозрачными, что удобно сочетается в операцией CMD+клик, которая описана выше.
Пользуйтесь Деревом элементов, чтобы ясно видеть структуру вашей страницы.
Панель поиска удобна для того, чтобы на текущей странице найти элементы по типу, по определенному тексту и т.д.
Если вы обнаружили, что двигаете элемент, который никогда не должен двигаться, вы можете добавить в этот элемент защиту, отметив в Редакторе поле "Заблокировать этот элемент (не перетаскивается в редакторе)"/"Lock this element (not draggable in editor)". Это работает только в режиме редактирования и полезно при работе со сложными страницами.
При создании сложной страницы элемент может использоваться в разных местах, таких как события, действия и даже другие элементы. Чтобы помочь вам увидеть общую картину того, как элемент задействован в интерфейсе, у Bubble есть "Инспектор элементов"/"Element Inspector", который покажет вам эти связи. В частности, он покажет:
"Пользовательские состояния"/"Custom States" (!!!ЛНК!!!), заданные для данного элемента, с возможностью изменять их, удалять и создавать новые.
Различные события, в которых используется текущий элемент
Различные действия с участием текущего элемента
Другие элементы страницы, которые ссылаются на текущий элемент
Выровненные элементы - ключ к хорошему, четкому дизайну. У Баббл есть несколько инструментов, чтобы вам с этим помочь.
"Привязка к краям при перетаскивании и изменении размеров элементов"/"Snap to edges when dragging and resizing element". По умолчанию, Bubble пытается привязать элемент к одной из строк на странице. Если вы хотите это изменить и привязать элемент к сетке, вы можете это сделать в меню "Сетка"/"Grid" на верхней панели.
Вы можете отобразить сетку, управлять её частотой (в пикселях) и цветом линий.
Меню "Упорядочить"/"Arrange" предлагает некоторые полезные функции распределения, например, если вы хотите, чтобы промежутки между тремя элементами были равными. Также вы можете центрировать элемент относительно родительского (также для этого есть горячие клавиши CTRL+E).
Клик правой кнопкой мыши по элементу откроет контекстное меню. В нем вы найдете несколько опций буфера обмена, которые сэкономят вам много времени, в частности можно скопировать стили или изменение стилей по условию. Использование этой функции скопирует все условия и изменяемые параметры по каждому условию.
Также вы можете заменить элемент другим типом. Например, если вы решили использовать переключатель из библиотеки Ionic вместо Checkbox, вы можете заменить элемент без необходимости удалять и создавать заново. Помните, что у этого действия могут быть последствия, так как у разных элементов может быть разный тип возвращаемого значения. Например, если заменить Checkbox полем ввода даты. Средство проверки проблем будет полезно тогда, когда вы не представляли о подобной проблеме.
Контекстное меню также предлагает функцию группировки, которая перемещает все выбранные элементы в новую группу. Наконец, вы можете решить преобразовать элемент или группу элементов в повторно используемый элемент. Это особенно полезно, если вы в ретроспективе понимаете, что группа элементов будет использоваться в более чем одном месте.
Для того, чтобы открыть Инспектор элемента, кликните по иконке информации, расположенной в Панели заголовка Редактора свойств.
Для согласованности дизайна важно всегда использовать одинаковый цвет (HEX значение) на всех ваших страницах. Для облегчения этого процесса вы можете задать предустановленные цвета во вкладке "Настройки"/"Settings" -> "Общие"/"General", и тогда вы сможете выбирать именно эти цвета на панели выбора цвета.
