77 lines
2.7 KiB
Markdown
77 lines
2.7 KiB
Markdown
# 用户界面和设计语言
|
||
|
||
## 用户体验
|
||
|
||
用户体验（User Experience，简称 UX）是用户在使用产品时的感受，是一个综合性的概念，包括用户对产品的感知、情感、态度、情绪等。用户体验设计（User Experience Design，简称 UXD）是一种以用户为中心的设计方法，目的是提高用户满意度，提高用户对产品的认知和使用。
|
||
|
||
颜色、字体、布局、交互等因素都会影响用户体验，因此在设计用户界面时需要考虑用户体验，提供简洁、直观、易用的界面，以提高用户满意度。
|
||
|
||
## 扁平化和拟物化
|
||
|
||
扁平化设计（Flat Design）是一种简洁、直观的设计风格，强调简单、明了的界面设计，去除了繁琐的装饰和冗余的元素，使用户更容易理解和操作。拟物化设计（Skeuomorphism）是一种仿真真实物体的设计风格，强调真实感和细节，使用户更容易理解和操作。
|
||
|
||
搜索 Flat vs Skeuomorphism 了解更多信息。
|
||
|
||
|
||
## 常见的设计语言
|
||
|
||
Google Material Design、Microsoft Fluent Design System、Alibaba Ant Design ...
|
||
|
||
## Material Design
|
||
|
||
### 设计语言
|
||
|
||
https://material.io/design
|
||
|
||
|
||
### 组件库
|
||
|
||
https://github.com/MudBlazor/MudBlazor
|
||
|
||
https://github.com/MudBlazor/
|
||
|
||
|
||
## Fluent Design System
|
||
|
||
### 设计语言
|
||
|
||
https://www.microsoft.com/design/fluent
|
||
|
||
### 组件库
|
||
|
||
https://github.com/microsoft/fast-blazor
|
||
|
||
## Ant Design
|
||
|
||
### 设计语言
|
||
|
||
https://ant.design
|
||
|
||
### 组件库
|
||
|
||
https://github.com/ant-design-blazor/ant-design-blazor
|
||
|
||
## 商业组件库
|
||
|
||
https://github.com/radzenhq/radzen-blazor
|
||
|
||
|
||
## 原型工具
|
||
|
||
MasterGo 和 Figma 是两个常用的原型工具，可以用来设计和制作用户界面原型，提供了丰富的组件库和交互效果，可以帮助设计师快速制作用户界面原型。
|
||
|
||
## 设计令牌
|
||
|
||
设计令牌（Design Tokens）是一种用来定义设计系统的方法，包括颜色、字体、间距、阴影等设计元素，可以帮助设计师和开发者快速创建一致的设计风格，提高设计效率。
|
||
|
||
## 选择组件
|
||
|
||
风格统一、易用性、可定制性、性能优化、文档完善、社区活跃、维护更新、商业授权等因素都会影响组件库的选择。
|
||
|
||
## 互补色
|
||
|
||
互补色是指在色彩环中相对位置相反的两种颜色，当两种互补色放在一起时，会产生强烈的对比效果，使得两种颜色更加突出。互补色的组合通常会产生视觉冲击，因此在设计中需要谨慎使用，浏览器开发者工具监测对比度，以确保用户体验。
|
||
|
||
## 应用案例
|
||
|
||
Aspire 的仪表盘设计是基于 Material Design 的，采用了扁平化设计风格，简洁、直观、易用，提高了用户体验。 |