用户界面与用户体验的一致性实现

博客
Image: Tram Mau Tri Tam
1. 引入单一来源的真实信息
主要问题是许多品牌往往将每个接触点（网站、终端、数字应用等）视为不同的项目。每个项目的视觉体验都需要单独的代码来处理，这成本很高，因为设计更改需要在所有项目中维护。这会导致数字渠道之间体验不一致的问题，通常是因为隔离心态或疏忽，从而进入一个迭代循环，最终导致某个公司内部意识到“制定新的企业在线身份”的必要性。

这个问题的核心并未解决。设计师和开发者希望有一个单一的来源真实信息，他们可以参考，无需自行维护！拥有单一来源的真实信息成本较低，因为代码量减少了一半。只需一次更改，并在所有团队中进行集中更新即可完成变更。

不过需要考虑以下几点：
- UI代码必须对技术中立且易于访问
- 必须有一个团队可以快速响应和更新相关请求
- UI元素需要清晰的文档化，特别是关于它们的使用场景、位置和变种

还需要一个监督团队来确定某些元素在什么情况下可以使用。

工具如《故事书：前端开发者用户界面组件探索器》有助于实现所有这些目标。故事书是一个开源工具，用于隔离 React、Vue 和 Angular 中开发用户界面组件。它帮助以组织化和高效的格式构建令人惊叹的用户界面。

2. 首先创建用户交互元素
一个数字治理团队应该在所有数字渠道中创建并管理所有使用的元素，从最简单的链接到更明确且定义好的主菜单。

你可以根据某些元素的不同情况创建变种（例如：链接是外部还是内部？），或者用于不同元素的用途（例如：标准文本中的链接与主菜单中的链接）。

从核心开始设计元素，然后扩展到模板和页面，而不是相反。这需要一种更抽象的设计方式，但它带来了许多好处：
- 预防不一致的设计和用户交互
- 更好地控制更改：单个原子的变化会影响所有分子
- 允许在所有水平（从原子到页面）进行“第一印象”的移动设计
- 使用户更容易访问：一旦你做得对，它就一直正确
- 预防相似用途的重复复制，变种可以在上下文中定义为上下文或继承
- 允许元素从项目外测试
- 对利益相关者透明：潜在冲突或错误复制请求可以现在在适当水平上处理
- 节省时间和资源：设计师可以用可重用的元素进行设计，无需从零开始

许多组织采用了这种工作方式。例如，英国政府网站的设计系统 Gov.uk 就是一个很好的例子。它还被用于澳大利亚和新西兰等其他国家的政府（以及其他一些国家）。在私营部门，还有许多公司公开了他们的设计系统：奥迪、明治、IBM 和花旗集团。

结论——营销中的一致性
作为市场人员或设计师，你希望确保品牌、产品、网站或移动应用与用户每次互动都能提供一致且有识别度的体验。要做到这一点，在真正开始设计和美化之前需要做很多工作。但一旦正确完成，你将获得无数好处，尤其是从一开始就做得正确时。请继续阅读以了解为了使你的投资实质性地有意义，你需要遵守的关键环节。

Baklib 这款强大的内容管理系统能够满足上述要求。它提供了一个集中平台来运行和管理各种网站，并处理网站需要交互的所有第三方集成。客户评价非常不错，他们对 Baklib 的功能和优势赞不绝口。