KPC UI Component Library

KingDesign is an open-source design system based on the KingCloud design language, specifically engineered for enterprise-level products. It is designed to help users rapidly build consistent digital products by providing a unified set of components, development resources, design assets, tools, solutions, and design guidelines. The system is built upon three core principles:

• Efficiency: Optimizes the design and frontend workflow through global standardization, focusing on components suitable for enterprise-level operational products.
• Unity: Ensures consistency across a product family by applying identical solutions to identical problems.
• Flexibility: Balances consistency with extensibility to support diverse business needs and various product types.

Theme colors include variants (gradients) to support interactive states for elements like buttons, links, and form fields. Each default theme color defines five primary interaction states:

• Hover (悬停): Uses the nearest lighter variant. For example, if the theme color is Blue 50, the hover state might be Blue 40.
• Click (点击): Uses the nearest darker variant. For example, if the theme color is Blue 50, the click state might be Blue 60.
• Selected (已选):
  • For colors between 10 and 60: The selected state is one shade darker.
  • For colors between 70 and 100: The selected state is one shade lighter (e.g., Blue 60 becomes Blue 70).
• Focus (焦点):
  • In Light Mode: Typically uses the 50 shade as a border color.
  • In Dark Mode: Typically uses a white border.
• Default: The base theme color itself.

The Kingsoft Cloud Metric Model for User Experience (K-MUX) is a standardized framework used to measure and evaluate the quality of product experiences across various business platforms. It is built upon the ISO 9241 usability standards, focusing on three core pillars:

1. Effectiveness: The accuracy and completeness with which users achieve specified goals.
2. Efficiency: The cost (time, effort, resources) incurred by users to achieve their goals.
3. Satisfaction: The user's subjective feeling (e.g., ease of use, enjoyment) while using the product.

K-MUX expands these into four measurable dimensions to provide a comprehensive evaluation: Standardability, Fluency, Stability, and Satisfiability.

Skeleton loading is used for initial page loading to show users that information is still being fetched. It typically appears for a few seconds and disappears once the data is ready.

Best Practices:

• Use skeletons to communicate that the page is not frozen, reducing user uncertainty.
• Constraint: Skeletons should only be used for cards or lists. Do not use skeletons for forms or modals.

When designing forms for enterprise products, follow these three core principles to improve user experience:

• Efficiency: Reduce user effort by providing default values and selecting the most appropriate input methods.
• Scannability: Minimize unnecessary form items to reduce the cognitive load on the user.
• Timeliness: Provide clear and immediate feedback for user actions to reduce errors.

Dialogs (弹窗) are used for "strong feedback" to show the results of user operations.

Composition:

• Message Icon: Displays icons corresponding to the message type (e.g., Success, Failure, Warning).
• Title: A short description of the message (optional).
• Description: Detailed information explaining what happened on the page. Keep the body text short.

Best Practices:

• Avoid excessive height; the content area should not require a scrollbar.
• Do not show multiple warning dialogs within the same workflow/process.

Loading indicators (typically SVG or GIF animations) indicate that a user's operation is being processed.

Key Rules:

• Use indicators when the process is relatively quick. If a process takes one or two minutes, use a progress bar instead.
• Indicators show that loading is happening but do not provide specific progress information.
• You can supplement the animation with text to clarify the action, such as "Loading..." or "Uploading...".

The KingDesign System uses the 3C Principle (inspired by Facebook Design System) to categorize page elements into three distinct levels, each with its own dedicated spacing scale. This ensures clear information hierarchy and design consistency.

1. Modules (模块): The highest level of page hierarchy.
2. Content (内容): Elements located within modules (e.g., headings, paragraphs, lists, tables).
3. Components (组件): Individual UI elements like buttons, input fields, and icons.

By assigning specific spacing rules to these three categories, the system maintains a predictable visual rhythm.

Feedback should be used to inform users about important state changes and updates. It should be relevant to the user's current context and minimize disruption. Feedback is typically triggered in response to specific user actions, such as:

• Submitting a form
• Errors occurring during data import

The KingDesign design system organizes enterprise-level product interfaces using three fundamental modules. Designers should use these modules to build consistent and readable page structures:

1. Navigation Module: Includes top navigation (header) and side navigation (sidebar).
2. Content Module: The primary area for displaying application data and features.
3. Floating Module: Temporary UI elements such as Drawers and Modals (popups).

By utilizing these modules, you ensure that the spatial structure of your application remains dynamic, ordered, and easily extensible.

The King Design color system is built on the HSB (Hue, Saturation, Brightness) color model to align with human visual perception.

Key concepts include:

• Hue (色相): The visual characteristic of a color (e.g., red, blue, green).
• Saturation (饱和度): The purity of a color; high saturation is vivid, low saturation approaches gray.
• Brightness (明度): The lightness or darkness of a color; highest is pure white, lowest is pure black.
• Variant Colors (变体色): Also known as color gradients or scales. King Design provides 9 variants for each color, numbered from 10 to 100. The theme color is typically located at index 50 or 60.
• Color Contrast (色彩对比度): The difference in luminance (L) between two adjacent or overlapping colors (e.g., foreground vs. background).