很高兴今天有机会能在这里与大家分享我们在海外项目中有关UED设计规范及组件库的经验。
此次分享的目标是：介绍海外产品的设计规范及其组件库的基本概念和特点。比较海外组件库与国内设计规范的异同。为设计和开发团队提供参考，提升设计规范的全球适应性。
在海外市场中，我们面临的一个主要挑战是如何设计出符合多元文化需求的产品。每个国家和地区都有其独特的文化背景、语言习惯和用户期望，这要求我们在设计过程中充分考虑本地化和国际化因素。
本次分享聚焦于海外UED设计规范与组件库，以及海外产品与国内产品组件库的差异对比。
UED的核心理念为：用户中心设计: 强调以用户需求为中心，关注用户体验。一致性与标准化: 确保用户能有连贯的体验，解释一致性在设计中的重要性。可用性与可访问性: 设计应易于使用，并能被所有用户访问，包括有障碍的用户。
设计规范的价值是：一致性: 确保产品在不同平台和设备上的一致性，提升用户体验。可用性: 提供直观、易用的界面和交互，降低用户的学习成本。高效性: 提供标准化的设计模式和组件，提升设计和开发的效率。
Human Interface Guidelines: Apple的HIG强调简约、美观和高效的设计，适用于Apple生态系统。
Material Design: Google的Material Design强调视觉一致性、响应式布局和自然的交互体验。
Fluent Design: Microsoft的Fluent Design系统强调流动性、深度和光影效果，为用户提供沉浸式体验。
这些年，我们研究了不同平台（IOS，android和PC）的主要海外设计规范，对沙特当地的宗教文化进行调研，了解当地人对色彩，使用习惯和偏好的具体要求。
通过《myCommunity》 APP的不断迭代和优化，基于海外UI设计规范的主要理念（用户中心，一致性，可用性，可访问性，响应性），我们提炼并制定了适合自身的海外UI设计规范。
在此过程中，我们搭建了自己的组件库，旨在通过设计规范和标准化对组件库的应用与管理
。
组件库的价值是：（提高效率: 提供可重用的UI组件，减少开发时间和工作量。保持一致性: 确保不同项目和平台上的视觉和交互一致性。提升质量: 提供经过测试和优化的组件，减少错误和提高用户体验。）
这是APP的样式布局实例。我们的组件库是基于统一设计语言创建的，包含了各种UI组件，如按钮、表单、导航菜单等。这些组件经过精心设计和测试，确保在不同项目中都能高效、稳定地使用。
在海外市场中，我们常常需要根据本地需求对组件进行定制和扩展。
例如，在不同国家可能需要不同的日期格式、地址格式等。我们的组件库设计了灵活的扩展机制，允许团队快速适应各种需求变化。
在沙特地区，受当地文化的影响，客户对颜色有特定的偏好，使用习惯也略有不同。我们为客户提供了专属APP颜色，并增加了颜色自定义配置及浅色模式和暗黑模式切换的功能。
基于海外组件库的核心设计原则和特性：交互与反馈，视觉层次与信息密度，简洁与功能性。我们为《myCommunity》项目的制定专属规范，涵盖按钮，输入框，卡片样式，列表，图标及主题定制换肤等相关组件库。
文字是信息传递的主要载体，标准化的文字设计有助于提升可读性和一致性。
我们不仅制定了文字规范，还升级了字体规范，新增了客户指定的字体，并加入了沙特当地的阿拉伯语字体。
图标在视觉传达中扮演重要角色，能有效传达信息并提升用户体验。
按钮作为作为用户与系统交互的基本组件，具有触发操作，提供用户反馈等功能，如提交、取消、导航等。
按钮支持多种状态和样式，如默认、悬停、点击、禁用等，确保在不同场景下提供一致的用户体验。
主题定制方面，支持根据项目需求定制UI组件的颜色、字体和样式。特点包括主题切换和实时预览功能，确保设计的一致性和灵活性。
了解了海外项目的设计规范之后，接下来对比海外项目与国内产品组件库的差异。
在全球化背景下，理解和运用海外设计规范及组件库对设计师和开发者至关重要。这些规范和组件库不仅提供了高效的工具和标准，还能提升产品的用户体验，确保在不同市场中的一致性和可用性。
接下来，我选取了两个易于理解的项作对比：字体阅读顺序和用户表单设计。
国内UI设计规范中，书写采用从左到右（LTR）的方式，这种顺序在大部分国家及地区的语言中是常见的，如汉语、英语。
然而，由于历史和文化原因，还有部分国家的语言书写是从右到左（RTL）的，如阿拉伯语、波斯语、希伯来语等。因此，我们的海外UI设计规范不仅支持LTR，还支持TRL，以适应不同语言的书写习惯。
文本方向，国内产品的设计规范在LTR模式下，文字从左向右排列，阿拉伯文书写和阅读则从右向左。文本右对齐，标点符号位于文字的最左侧。文本右对齐，标点符号位于文字的最左侧。
表单布局：在LTR模式下，表单标签（如“姓名”）位于输入框左侧，用户从左到右输入姓名。适配阿拉伯语言时，标签位于右侧，用户从右到左输入。
国内的UI设计遵循从左到右的视觉流向，确保内容展示符合用户的浏览习惯。
在适配阿拉伯语言时，页面布局会镜像，文本和导航项从右向左排列。
阅读和导航，在LTR模式下，导航菜单从左到右排列，如首页、产品、联系我们等。
文本对齐：国内产品通常采用文本左对齐，确保排版整齐和视觉效果一致性。
操作习惯方面也存在着明显的差异，阿拉伯用户的操作习惯不同，页面之间涉及的左右手势需要镜像，如右滑退出页面变为左滑。
同理，表示退出的左向箭头会镜像成右向箭头；涉及到左右分布的操作例如按钮，tab，加减器开关都需要镜像。
为了契合当地文化习俗，阿拉伯用户有特定的节假日和习惯，部分国家对着装和饮食有严格要求。
我们为阿拉伯用户设计了特定的日历，通过下载我们的APP《myCommunity》来体验这些细节。
在移动端设计中，表单布局是影响用户体验的关键因素。常见布局有左右结构和上下结构。
国内设计规范中，根据输入内容的多少选择左右或上下结构。
在海外项目中，优先考虑使用上下结构，因为外文字母较长，左右布局受限。
上下结构：标签和输入区域垂直排列，减少视觉干扰，提高可读性。
以上是我对海外UED设计规范及其组件库的相关分享。
感谢大家的阅读。希望此次的内容能够给大家带来启发和帮助。
作者：子非鱼安知鱼子酱链接：https://www.zcool.com.cn/article/ZMTYyNjQ1Ng==.html来源：站酷著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
