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