Layered Design System Framework for UI Customization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web platforms designed for multiple industries and customers face difficulties in customization due to the mixing of appearance, functionality, and presentation components, requiring extensive reworking of default user interface properties for each change.
Innovation Solution
A modular framework with multiple design system layers, each decoupled from the others, allowing for customization of user interface components without affecting other layers, using platform-agnostic and platform-specific APIs to provide flexible and customizable user interface functionalities.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of manufacture
If a modular layered framework is implemented, then customization ease is improved, but device complexity increases
Solution Approach 1:
The user interface framework is divided into multiple independent layers (base design system layer, platform-specific layer, product-specific layer, presentation layer), each responsible for specific functionality. This segmentation allows customization at specific layers without affecting others, improving ease of manufacture while managing complexity through structured organization.
Solution Approach 2:
The patent introduces a vertical dimension of organization through layered architecture, where each layer builds upon the layer below it. This dimensional structure enables independent customization at different levels (platform-level vs. product-level vs. presentation-level) without horizontal complexity蔓延, resolving the contradiction between customization ease and overall system complexity.
2Device complexity
If appearance, functionality, and presentation components are mixed, then device complexity is reduced, but customization difficulty increases
Solution Approach 1:
The framework separates appearance, functionality, and presentation components into distinct layers. The base design system layer provides functional components, while appearance and presentation are handled in separate platform-specific and presentation layers. This segmentation reduces customization difficulty by allowing targeted modifications without understanding the entire mixed architecture.
Solution Approach 2:
The layered architecture introduces intermediaries between different component types. Each layer acts as a mediator that translates requirements from upper layers into implementations in lower layers, making customization easier by providing clear interfaces and abstraction boundaries without increasing overall complexity.
3Adaptability or versatility
If wide-scale undoing/redoing/reworking is performed, then customization flexibility is improved, but loss of time increases
Solution Approach 1:
By segmenting the framework into independent layers with clear inheritance relationships, customization can be performed at the appropriate layer without requiring wide-scale undoing/redoing. Changes in the presentation layer do not affect the base design system layer, enabling flexible customization with minimal time loss.
Solution Approach 2:
The base design system layer provides pre-built, reusable components and APIs that are prepared in advance. This preliminary action eliminates the need for time-consuming rework by providing ready-to-use building blocks that can be customized without starting from scratch or undoing previous work.
4Adaptability or versatility
If platform-agnostic and platform-specific APIs are used, then adaptability is improved, but device complexity increases
Solution Approach 1:
The patent organizes APIs into a vertical dimensional structure where platform-agnostic APIs are defined at lower layers and platform-specific APIs are layered on top. This dimensional organization enables platform adaptability through inheritance while managing complexity by providing clear hierarchical relationships and interfaces between API layers.
Data Source
AI summary
A computer-implemented method for providing user interface functionalities is disclosed. The method includes providing a base design system layer including web browser components providing platform-agnostic user interface functionalities, an application programming interface (API) that extends the base design system layer into a second design system layer providing platform-specific user interface functionalities, inheriting and extending extensible APIs from the second design system layer, building a third design system layer using the extensible APIs, providing product-specific user interface functionalities using the third design system layer, inheriting and extending extensible APIs from the second design system layer, building a fourth design system layer using the extensible APIs, and providing presentation-specific user interface functionalities using the fourth design system layer. The method also includes integrating the base design system layer, the second design system layer, the third design system layer and the fourth design system layer into a user interface framework.