Шаблон дизайна
  • 18 Jan 2024
  • 2 Минуты для чтения
  • Авторы

Шаблон дизайна


Article Summary

::: (информация) () Чтобы скачать приложение, посетите: Библиотека:::

Назначение

В этой статье рассказывается о том, что содержит шаблон дизайна и для чего он может быть использован.

Для каких целей служит шаблон дизайна?

Этот шаблон дизайна помогает разработчикам приложений создавать удобные, последовательные и оптимизированные приложения.

Он предоставляет менее опытным разработчикам приложений удобный шаблон для начала работы. В приложении приведен пример того, как выглядит приложение Tulip, и показано, какие общие макеты шагов они могут использовать в своих приложениях. Оно также показывает, какие элементы должны содержать базовый макет, верхний и нижний колонтитулы, чтобы было легко начать работу над приложением Tulip.

Это также помогает более опытным разработчикам ускорить разработку и поддерживать последовательный интерфейс. Шаблон значительно упрощает создание приложений, позволяя разработчику копировать и вставлять макеты шагов в свое приложение. Таким образом, приложение не только экономит время разработчика, но и обеспечивает единый внешний вид для всех приложений, созданных с помощью этого руководства. На первом шаге пользователь может увидеть цвета, кнопки, значки кнопок и типографику, которые используются в приложениях. Определив эти элементы, можно легко поддерживать единый интерфейс для любой компании или инстанции.

Соображения и примеры использования

Основные принципы создания этого шаблона:

Простота: Простой шаблон дизайна помогает разработчикам приложений понять и запомнить рекомендации по дизайну для своей компании. Он также обеспечивает чистый дизайн, который помогает пользователям приложения ориентироваться в нем.

Простота настройки: Шаблон разработан таким образом, что любой пользователь может создать свой шаблон пользовательского интерфейса всего за несколько шагов. Основными цветами шаблона являются различные оттенки серого, зеленый цвет "успеха" и красный цвет "разрушения". В дополнение к ним мы используем синий цвет для основных кнопок. Изменив этот синий цвет на фирменный цвет вашей компании, вы сможете создать индивидуальный шаблон дизайна, который можно использовать.

Соответствующие контрасты для применения в промышленных зонах: Важно, чтобы ваше приложение не только хорошо выглядело, но и хорошо функционировало. При разработке шаблона дизайна было важно, чтобы приложение подходило для использования в цехах. Это означает, что цветовой контраст и кнопки достаточно крупные, размер шрифта четкий и читаемый, а макеты шагов простые и легко реализуемые.

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

Функционально-ориентированный дизайн: Шаблоны шагов в приложении "Шаблон дизайна" основаны на распространенных случаях использования и лучших практиках, встречающихся в приложениях Tulip.

Обзор функций

Общий обзорНа первом шаге приложения пользователь может ознакомиться с общим обзором цели приложения и кратким содержанием.
Screenshot 2023-07-31 at 22.28.48.png

Руководство по дизайну и элементы приложения (цвета, кнопки, значки кнопок, типографика) После общего обзора следующие четыре шага служат руководством по дизайну для создания приложения. На шаге "Цвета" пользователь может увидеть все цвета, используемые при создании приложения, с их шестнадцатеричными кодами. На шаге Buttons и Button Icons определяются все часто используемые кнопки для приложений в светлом и темном режимах, а также связанные с ними иконки. Последний шаг этого раздела - шаг Типографика, в котором задаются размеры и стили шрифтов для заголовков и текстов абзацев.
Design_elements.png

Руководство по базовому макету (верхние и нижние колонтитулы, базовый макет для светлого и темного фона) Второй раздел помогает разработчикам приложений создать базовый макет, который лучше всего подходит для их приложения. В шагах перечислены различные заголовки и колонтитулы, которые можно скопировать и вставить в базовый макет. Создатель приложения также может выбрать светлую или темную тему.Base_layouts.png

Шаблоны пользовательского интерфейса шаговStep_templates.png


Была ли эта статья полезной?