UI Platform Design System for Multi-Device Screen Development
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing digital transformation efforts face challenges in rapidly responding to market needs and integrating diverse technologies like AI, IoT, and cloud computing, requiring multi-experience development platforms that support multi-device and multi-OS environments while ensuring design consistency and reducing redundant development.
Innovation Solution
A user interface platform integrated development system that supports multi-browser, multi-device, and multi-OS environments, utilizing a design system with a WYSIWYG-style development environment, Snippet-based code reuse, and microservice architecture for efficient collaboration and resource sharing.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If developers manually write and maintain source code for each device and browser, then customization flexibility is improved, but development time and redundancy increase
Solution Approach 1:
The source code is segmented into reusable components that can be independently developed and maintained. The system divides the user interface into modular components that can be assembled differently for various devices and browsers, eliminating the need to manually write complete source code for each platform while maintaining customization flexibility.
Solution Approach 2:
The system performs preliminary action by pre-defining reusable source code components and templates that can be automatically applied to different devices and browsers. This advance preparation of modular components significantly reduces development time while preserving the ability to customize specific elements when needed.
2Adaptability or versatility
If developers create separate source code for each device and browser, then device-specific optimization is improved, but design consistency deteriorates
Solution Approach 1:
The system implements universality by creating a core set of reusable components that can be applied across multiple devices and browsers. These universal components ensure design consistency while the system allows for device-specific adaptations through configuration and styling parameters, achieving both consistency and optimization.
Solution Approach 2:
The system applies local quality by allowing specific components to have device-appropriate variations while maintaining overall design consistency. Each component can be customized locally for specific devices through styling and configuration, rather than creating entirely separate source code for each device, thus preserving design coherence across the platform.
3Adaptability or versatility
If developers use traditional development methods without integrated design systems, then individual creativity is improved, but collaboration efficiency deteriorates
Solution Approach 1:
The integrated design system segments the development process into distinct roles and responsibilities. Designers work with visual templates and component libraries, while developers focus on implementation and customization. This segmentation enables both individual creativity within their domains and efficient collaboration through clearly defined interfaces and reusable components.
Solution Approach 2:
The system introduces an intermediary layer of pre-defined templates and component libraries that bridge the gap between design and development. This intermediary allows designers to create visually appealing interfaces that are automatically translated into implementable code structures, improving collaboration efficiency while preserving individual creativity in both design and development phases.
4Adaptability or versatility
If developers write complete source code from scratch, then code uniqueness is improved, but development productivity deteriorates
Solution Approach 1:
The system performs preliminary action by pre-defining reusable source code components, templates, and patterns that can be automatically applied to different projects. This advance preparation significantly reduces development productivity requirements while the system allows for customization to maintain code uniqueness when needed, eliminating the need to write complete source code from scratch for each project.
Data Source
AI summary
An integrated user interface platform development system and method which include a user interface platform development system having a development tool which provides a what you see is what you get (WYSIWYG) screen file development environment and generates a screen file source in which a user interface platform is composed of structured components; a server which provides resources for screen file development using the development tool and on which developed screen file sources are registered; and a client which includes a client engine that loads the screen file source requested of and received from the server, and which provides the user interface platform executed in a browser window and corresponding to a linked device, wherein the development tool includes a design system module for maintaining design consistency.