对于体验设计师来说，搭建设计资产就像积木游戏，你不得不玩这些重要关卡。本文将会为您具体介绍，让我们一起看看。

一、设计资产

设计资产，名词，用于帮助产品设计师完成工作的各种资源、工具和素材。

换个方式说：设计资产就像游戏里的氪金装备，让设计师们在创意战场上如鱼得水。有了这些资产，产品设计师们就能够高效、精准地完成任务。

说到开源的组件库，大厂们可不吝啬啊！换做10年前哪有这等福利，阿里系的Ant Design、字节跳动的Arco Design、还有抖音的Semi Design等等，都可以借鉴学习，而且还是免费版！

对于体验设计师来说，搭建设计资产就像积木游戏，你不得不玩这些重要关卡：全局样式、图标库、基础组件、通用区块、还有典型页面。

所以在搭建设计资产时，以下是五个装备需要你留意下：

1. 全局样式

全局样式指产品设计中的规范和属性。主要用来定义产品外观和布局元素。

2. 产品设计人员

• 品牌设计一致性：全局样式有助于确保产品的整体外观与公司品牌一致。这使他们能够在设计过程中更容易维护品牌标识和风格。
• 提升效率：产品设计师可以更快速地创建新页面和组件，更好的协作、提高设计效率。
• 用户体验提升：一致的全局样式可帮助设计师创建更一致的用户界面，提高用户体验。

3. 开发人员

• 简化开发工作：开发人员在整个应用程序中重用相同的样式规则，从而减少了开发时间和减轻了维护负担。
• 减少样式冲突：通过确保全局样式的一致性，开发人员可以减少样式冲突的可能性。

4. 用户

• 一致的用户体验：用户将在整个网站或应用程序中获得一致的外观和感觉，这有助于提高他们的舒适感和信任感。
• 可识别的品牌：用户可以更容易地识别和记住品牌，因为品牌的标识和颜色会在整个产品中保持一致。

其中颜色、字体、间距、阴影、布局、响应式、需要一一去制定规则。

5. 图标库

创建一个有组织、易于维护并符合产品风格的图标库，将有助于提高产品的用户体验，确保设计的一致性，减少开发工作量，同时也有助于传达产品品牌的专业性和品质。

制定符合产品的图标库，可按系统图标、通用图标、第三方图标进行简单的分类。

图标的形式可根据实际产品风格而定。具体可参考Material Design、iOS标准规范图标。

二、基础组件

制定基础组件是设计系统中的关键任务（最辛苦、最累），因为这些组件在绝大部分产品中都会频繁使用。这些基础组件包括各种类型，如输入类、反馈类、展示类、导航类、表单和表格等等。通过制定这些组件，可以提高设计的一致性，减少重复工作，以及提高产品的用户体验。

关于是否选择开源，这是一个依赖于企业的产品生命周期和发展策略的决策。开源组件库有其明显的优势，如社区支持、共享的最佳实践和代码审查。

但同时，它们也可能需要额外的维护工作，以确保与满足企业需求的。

企业应该根据自身情况和需求来选择是否采用开源组件库。

在一些情况下，选择开源组件库可以显著加快开发进程，减少成本，但在其他情况下，可能需要自定义的解决方案以满足独特的要求。总之，这是一个需要仔细权衡和考虑的决策。

下面以输入类为例。

三、通用区块

是指在特定情况下，基础组件和典型页面无法满足特殊业务需求，或者需要新增功能时，设计人员可以创建的可重用组件。

举例：在设计导航时，需要新增一些按钮、搜索条件等元素，以提高业务操作的效率。这个时候就需要通用区块去制定一些扩展性的搭配，以适应各种情况和需求。

两个关键原则是：

符合整体设计语言：通用区块的设计应与整体设计语言一致，包括颜色、字体、间距等。这有助于确保在整个应用中保持一致的用户体验，同时提高品牌识别度。

拓展性：通用区块应具备足够的拓展性，以应对未来可能的需求变化。这意味着它们应该易于扩展和自定义，以满足不同的业务场景。

总的来说，组件库不是僵化你设计的锁链，而是帮助你的趁手工具。

四、典型页面

典型页面是设计系统和产品中的重要组成部分，它们展示了组件库和全局样式的实际应用。这些页面在保证视觉一致性方面起着关键作用。

目的是最终实现产品的视觉一致性和用户体验一致性特别是在规划仪表盘、详情页、表单页和表格页时，制定基础的规范和说明非常重要。

这不仅有助于团队里的新成员更快地熟悉设计规范，提高工作效率，还在验收和走查过程中充当了重要的依据，确保整体视觉风格和用户体验的一致性。

总之

设计资产和组件库是设计和开发中的强大工具，它们可以提高效率、保持一致性、传达品牌文化，减少错误和促进协作。

它们对于设计师、开发者和企业都非常有价值，可以帮助他们更好地满足用户需求、提高产品质量，并增强品牌影响力。

【知识扩展区】

1. 仪表盘（Dashboard）

仪表盘通常用于显示关键业务指标（KPIs）和数据可视化。在设计仪表盘时，考虑以下因素：

• 关键指标的展示：决定仪表盘上显示哪些关键指标，并确保它们易于理解。
• 图表和数据可视化：选择适当的图表类型来呈现数据，例如柱状图、折线图、饼图等。
• 信息层级：使用信息层级确保用户可以根据需要深入了解数据。

2. 详情页（Detail Page）

详情页通常用于显示特定项目、产品或对象的详细信息。在设计详情页时，考虑以下因素：

• 信息结构：确定详细信息的组织结构，例如分区块、标签页等。
• 多媒体内容：处理可能包含的多媒体内容，如图片、视频或文档。
• 互动元素：包括用户可以执行的操作，如编辑、删除、分享等。

3. 表单页（Form Page）

表单页用于收集用户输入的信息。设计表单时，考虑以下因素：

• 表单字段：确定需要收集的信息，并选择合适的输入字段类型。
• 验证与反馈：设计实时验证和错误反馈机制，帮助用户更轻松地填写表单。
• 布局和流程：考虑表单的布局以及用户填写表单的流程，使其直观易懂。

4. 表格页（Table Page）

表格页通常用于展示大量结构化数据。在设计表格页时，考虑以下因素：

• 数据呈现：选择合适的列和行来呈现数据，确保数据清晰可读。
• 排序和筛选：允许用户按照特定列进行排序和筛选，提高数据的可控性。
• 行动操作：提供适当的行动按钮，允许用户执行操作，如查看详细信息、编辑或删除。

5. 典型页面的重要性表现

• 样式一致性：通过在典型页面中使用一致的颜色、字体、间距和样式，确保整体产品的视觉统一性。
• 组件重用：将常见的UI组件纳入典型页面，以便在整个产品中重复使用，减少重复工作并减小维护成本。
• 用户体验一致性：通过在典型页面中定义用户界面元素的布局和互动，确保用户在不同部分之间的体验是一致的。
• 文档化和培训：制定规范和说明可用于文档化设计系统，使其可供新员工参考，从而提高他们的学习曲线。
• 验收和走查：在产品开发和设计迭代的不同阶段，典型页面可用于验证设计是否符合规范，以及在实际应用中是否能够提供一致的用户体验。

以上是读《B 端体验设计：企业级视角的系统化方法》心得,欢迎一起交流。