优化UI设计规范:海外项目与国内产品设计规范及组件库对比

2024-11-8    蓝蓝设计的小编 图标设计文章及欣赏

很高兴今天有机会能在这里与大家分享我们在海外项目中有关UED设计规范及组件库的经验。
海外项目与国内产品设计规范及组件库对比
 
 
此次分享的目标是:介绍海外产品的设计规范及其组件库的基本概念和特点。比较海外组件库与国内设计规范的异同。为设计和开发团队提供参考,提升设计规范的全球适应性。
海外项目与国内产品设计规范及组件库对比
 
 
在海外市场中,我们面临的一个主要挑战是如何设计出符合多元文化需求的产品。每个国家和地区都有其独特的文化背景、语言习惯和用户期望,这要求我们在设计过程中充分考虑本地化和国际化因素。
 
本次分享聚焦于海外UED设计规范与组件库,以及海外产品与国内产品组件库的差异对比。
海外项目与国内产品设计规范及组件库对比
 
 
第一部分:海外UED设计规范和组件库
海外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,以适应不同语言的书写习惯。
 
在UI设计中的应用:
文本方向,国内产品的设计规范在LTR模式下,文字从左向右排列,阿拉伯文书写和阅读则从右向左。文本右对齐,标点符号位于文字的最左侧。文本右对齐,标点符号位于文字的最左侧。
 
表单布局:在LTR模式下,表单标签(如“姓名”)位于输入框左侧,用户从左到右输入姓名。适配阿拉伯语言时,标签位于右侧,用户从右到左输入。
 
页面布局:
国内的UI设计遵循从左到右的视觉流向,确保内容展示符合用户的浏览习惯。
在适配阿拉伯语言时,页面布局会镜像,文本和导航项从右向左排列。
 
阅读和导航,在LTR模式下,导航菜单从左到右排列,如首页、产品、联系我们等。
适配阿拉伯语言时,导航菜单从右到左排列。
海外项目与国内产品设计规范及组件库对比
对比国内产品规范:
文本对齐:国内产品通常采用文本左对齐,确保排版整齐和视觉效果一致性。
操作习惯方面也存在着明显的差异,阿拉伯用户的操作习惯不同,页面之间涉及的左右手势需要镜像,如右滑退出页面变为左滑。
同理,表示退出的左向箭头会镜像成右向箭头;涉及到左右分布的操作例如按钮,tab,加减器开关都需要镜像。
海外项目与国内产品设计规范及组件库对比
 
为了契合当地文化习俗,阿拉伯用户有特定的节假日和习惯,部分国家对着装和饮食有严格要求。
 
我们为阿拉伯用户设计了特定的日历,通过下载我们的APP《myCommunity》来体验这些细节。
海外项目与国内产品设计规范及组件库对比
 
接下来对比用户表单设计:
在移动端设计中,表单布局是影响用户体验的关键因素。常见布局有左右结构和上下结构。
国内设计规范中,根据输入内容的多少选择左右或上下结构。
在海外项目中,优先考虑使用上下结构,因为外文字母较长,左右布局受限。
上下结构:标签和输入区域垂直排列,减少视觉干扰,提高可读性。
 
以上是我对海外UED设计规范及其组件库的相关分享。
海外项目与国内产品设计规范及组件库对比
 
感谢大家的阅读。希望此次的内容能够给大家带来启发和帮助。
 

作者:子非鱼安知鱼子酱
链接:https://www.zcool.com.cn/article/ZMTYyNjQ1Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

image.png

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档