8.1 用户界面与设计风格

核心框架选择

在MiqroForge中，我们选择了 React 18 作为前端的核心框架，配合 TypeScript 5 提供着类型安全保障。

  • React 18：作为核心框架，提供了现代化的组件开发体验。

  • TypeScript 5：提供更精确的类型推断，帮助我们在编码阶段就发现潜在问题。

状态管理方案

我们采用了Redux Toolkit作为应用状态的中枢神经系统：

  • 配合redux-thunk和redux-observable处理着各种数据流场景；

  • 确保了跨组件数据流动的有序高效。

可视化能力建设

在MiqroForge中，我们采用了以下几种可视化方案：

  • AntV X6系列工具：图编辑引擎，可提供专业的图形编辑能力。

  • ECharts 5：数据可视化库，提供了丰富多样的图表类型和高度灵活的配置选项。

  • Molstar：专业的分子3D可视化工具库，可交互式展示分子结构。

UI设计体系

我们用心设计每一个界面细节：

  • Ant Design 5：UI组件库，为页面开发提供了一系列优雅实用的基础组件。

  • Tailwind CSS：原子化 CSS 框架，赋予了我们灵活定制样式的自由。

  • @ant-design/icons：图标资源，为界面增添了生动的细节。

工程化配置

我们建立了高效的开发流水线：

  • Vite 6：前端构建工具，带来闪电般的开发体验，热更新几乎瞬间完成。

  • ESLint：静态代码检测工具，提供了严格的代码规范检查，确保代码质量。

额外功能增强

从国际化支持到路由管理，我们关注每一个细节：

  • i18next：国际化功能，让全球用户得以无障碍使用。

  • react-router-dom 6：路由管理，提供了流畅的页面切换体验。

  • axios：稳定可靠的数据通道，以优雅的方式处理着每个网络请求。

品牌风格

品牌风格是品牌在视觉和感知层面的表现方式。同时品牌风格也是用户对品牌的第一印象，是品牌的视觉识别特征。正如苹果公司一样，通过产品外观的高度辨识度而脱颖而出，即使没有标志也可以辨认出来。 在MiqroForge平台中，我们也打造了属于我们自己的独特的产品风格，所采取的策略步骤如下：

  • 情绪板：作为头脑风暴的视觉参考，帮助我们来确定产品整体的视觉设计方向和主题风格。

  • 参考设计趋势：产品的视觉设计需要与时俱进。设计趋势随时间变化，从拟物化到扁平设计，再到轻拟物和毛玻璃风格，每个时代都有其特点。产品的视觉应该合理参考并利用这些趋势，以保持现代感。

  • 色彩选择：“人对于色彩语言的认知存在着绝对的差异性和相对的统一性”。色彩在整个产品的视觉设计中具有极大的影响力。不同的色彩传达不同的情感和信息。跟随当代的色彩趋势，同时也考虑到我们自己产品的独特性。MiqroForge采用经典的黑白灰色来做为整体背景氛围，同时加入不同鲜艳色彩渐来做为节点信息变来吸引用户眼球。

视觉设计体系

设计体系是一种设计方法和工具，旨在帮助组织和团队创建一致性、可复用性和可维护性的数字产品和服务。在B端设计体系中，更是站在全局视角来审视产品体验设计如何构建的方法。以下是设计体系的关键元素和概念：

  • 设计原则：设计原则是指导设计决策的基本规则和价值观。它们有助于确保设计在整个组织中保持一致性，例如可用性、可访问性等。

  • 组件库：设计体系包括一系列可重用的设计元素，如按钮、表单、导航栏、图标等。这些组件通常以代码或视觉资源的形式存在，以便设计师和开发人员能够轻松地在项目中使用它们。

  • 样式指南：样式指南规定了颜色、字体、排版、间距等视觉元素的标准。这有助于确保在整个产品或服务中使用一致的设计语言。

  • 设计模式：些是常见的用户界面交互和布局模式，如模态框、标签页、滑块等。设计模式有助于提高用户体验和减少用户的认知负担。

  • 文档资源：设计体系通常包括文档和培训资源，以帮助团队成员了解如何使用设计体系，包括如何应用设计原则和使用组件库。

  • 版本控制：为了确保设计体系的一致性，它通常受到版本控制的管理，以跟踪任何更改和更新，这有助于团队协作和维护。

视觉设计规范原则

说到视觉设计规范，这是与产品的设计是密不可分的，假如我们只是设计界面而没有视觉设计规范，会直接影响到项目的视觉统一性，以至于会让你的大脑会浮现四个字--“惨不忍睹”。设计规范是设计体系的一个重要的指标，这个与整体产品的设计风格、设计理念一脉相承。设计规范是整个设计的基石，是为了确保一致性的重要手段，会极大的改善用户体验。因此在设计视觉规范时，一般会遵循以下几个原则：

  • 统一性原则：设计规范应该包括品牌元素，如标识、色彩、字体，保持品牌的一致性。

  • 明确性原则：视觉规范应该具有明确的指导性，告诉用户如何正确的使用品牌的基础元素和哪些元素不应该改变。

  • 可复用性性原则：设计规范应该易于应用，并可在不同场景下进行适应。

设计复用

在设计中，复用是指在不同的项目或情境中重复使用相同或相似的设计元素，如按钮、输入框、图标等。这有助于提高设计效率，减少冗余工作，并确保一致性。在B端体验中，常见的设计组件可以通过定义并建立组件库的方式进行复用。这意味着设计师和开发人员可以轻松地在不同项目中使用这些组件，确保一致的外观和功能。这对于维护和更新设计非常有帮助。

设计借鉴

乔布斯说的“好的设计是复制，伟大的设计是借鉴”。借鉴是指从其他设计作品中汲取灵感、创意和设计理念，然后将其应用到自己的项目中。借鉴并不是简单的复制，而是理解并转化他人的创意，使之适应特定的情境和需求。借鉴可以帮助设计师突破创意瓶颈，获得新的视角，并发掘不同的设计方向。然而，重要的是在借鉴时保持尊重原创作品和知识产权，避免抄袭。

迭代视觉规范

考虑MiqroForge之后的迭代，一定会伴随着整个产品的视觉迭代，其中的原因在保持用户体验的同时，也是能让用户更好的理解和使用产品，其中视觉迭代会涉及到以下几个方面：

  1. 评估目前的规范是否满足当下需求
    视觉规范的每一次迭代优化都是在对最初设计的审视和检验。在进行视觉规范调整时，首先要对现有视觉规范或规则进行评估它们是否适合目前的项目需求。如果需要优化，则需要根据当前的设计需求来确定设计规范的调整方向。例如，如果设计师正设计一个全新的品牌形象，那么品牌颜色、字体和图形等方面的规范需要被重新审视和调整。

  2. 根据用户反馈来调整设计规范
    另一个设计规范调整的重要因素是用户反馈。收集并分析用户反馈，可以帮助设计师更好地理解用户的需求和期望，并相应地调整设计规范。例如，如果用户反映当前的设计不够直观或易用，那么设计师可以考虑调整风格或布局，以更好地满足用户需求。

  3. 关注市场趋势并及时调整
    追踪市场趋势和新技术的发展，也是设计规范调整的重要因素之一。设计师需要不断关注市场的变化和发展趋势，并根据需要相应地调整设计规范。例如，随着智能手机和平板电脑的普及，设计师需要将设计规范调整为更适合移动设备的格式和布局。