• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 全球化设计系列!国际化产品设计有哪些需要注意的事项?

全球化设计系列!国际化产品设计有哪些需要注意的事项?

作者:顾巍 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计,全球化设计,经验分享等相关知识,顾巍希望在学习及工作中可以帮助到您

关于全球化设计的系列设计文章。主要分为以下三个部分:

  • 快速入门,聊聊几个最常见的全球化设计问题,感受一下基础概念。
  • 国际化设计,设计一个健壮的国际化产品需要的详细注意事项,避免踩坑。
  • 本地化设计,按照几大地区进行基础情况、市场情况、文化情况进行简介,当你需要为一个新的国家/地区进行设计时,有助于快速了解区域情况。

上期回顾:《全球化设计系列!从这四个方面快速入门全球化设计》

  • 本篇文章与快速入门的内容会有重叠,前篇着重普及入门,本篇着重系统化深入思考。
  • 本篇文章与快速入门不同,是动态更新的最佳实践。
  • 本篇文章着重于产品设计部分,开发和运营方面仅提及必要的部分。

国际化设计

Internationalization,简称「i18n」,是指产品不依赖于特定区域,能够在各区域下正常运行,不出现严重影响使用的错误。常见如软件乱码、界面错位、数据结构不支持等等。

优秀的国际化产品,能够让产品在移植到其他区域时能够快速而健壮的使用,例如 Google 搜索、Facebook 并不需要到一个新地区就重新开发一个版本。

如果你投身于全球化的产品设计,主要需要从 5 个大方面进行思考:

  • 语言文字
  • 用户界面
  • 文化差异
  • 地区标准
  • 开发技术

即便你正在设计一款不那么全球化的产品,思考这些问题仍能够使你的产品更健壮。

一. 语言文字

支持目标市场的语言文字是进入该市场的先决条件,虽然某些市场只需要丢一个英文版本就万事大吉,但这还远远不够。

主要问题有:

  • 如何理解语言、文字、区域的概念?
  • 如何设计选择语言的机制?
  • 在语言前面加上国旗图标是好的选择吗?
  • 如何设计 RTL 语言(如阿拉伯语、希伯来语)的用户界面?
  • 某些语言有不熟悉的文法体系,比如复数、阴阳性该如何处理?
  • 标点符号不是国际通用的?
  • 在某些文字体系中,难以对内容进行排序或首字母分组。

语言、文字、区域

语言、文字和区域是三种不同的概念,比如:

  • 汉语,采用简体汉字书写,用于中国大陆
  • 葡萄牙语,采用拉丁字母书写,用于巴西
  • 英语,采用拉丁字母书写,用于美国
  • 印地语,采用天城文书写,用于印度

了解这些有助于避免发生一些低级错误,以及理解语言方面的最佳实践——语言识别标签:

  • zh-Hans-CN
  • zh-Hant-HK
  • pt-BR
  • en-US
  • hi-IN

在介绍各个区域本地化时将描述标签选择方法。

在设计产品时需要考虑两个部分的本地化展示:

  • 界面文字,如「登录、评论、首页」等用于产品功能的文字,它们相对稳定。
  • 内容文字,如「塞尔达传说旷野之息出官中了!买爆!」等由用户或媒体发布内容的文字,它们一般不受控制。

△ 界面文字为中文,内容文字为英文

1. 界面文字

最主要的是界面文字,能够以该文字显示界面,一般就可以宣称支持对应的语言了。

毫无疑问的,支持国际化的第一步是支持英文。

最佳实践 1.1.1

请把英文作为产品无法匹配语言时的默认语言,也应当以英文版本为基本款进行设计。

这有助于你在第一时间覆盖最广泛的区域,并且规避一些全球化的问题。

在用户切换语言的机制方面有两种选择:

  • 跟随系统设置。
  • 能够在应用内部自主选择界面语言。

跟随系统设置是一个较为保险的方案,Facebook、Google等产品一般都选这个方案。

但一般产品难以覆盖足够广的语言,并且从用户的角度来看,一旦系统语言未匹配,还有自行更改为用户第二语言的可能,这样更为灵活。

最佳实践 1.1.2

应用内自主更换语言更能满足设计和用户的需求。

但是要避免一些迷之问题:

△ 怎么切成中文?Language 是什么意思?

最佳实践 1.1.3

不要采用旗帜图标指示语言。

△ 我是葡萄牙人,只能选择巴西国旗的葡萄牙语?

存在有几个问题:

  • 难以让旗帜和语言一对一映射;
  • 用户可能被迫需要选择一个他国前缀的选项;
  • 可能引起地缘政治的争议;
  • 旗帜可能随着时间的发展而被替换,有更换成本。

虽然旗帜图标在选择效率上会略有提高,但仍然不建议使用。

但也有例外:

  • 当本质上是选择区域时,例如 Apple 官网。

2. 内容文字

在国际化方面,产品的内容文字由用户自由决定,一般不受限制也没有必要限制。从运营角度,可以考虑按照地域进行内容划分隔离,以便更有效地传播内容。

当然也可以像 Facebook、Twitter 或是 Google Play 一样提供内容辅助翻译。

点击「翻译自英文」后,系统会将内容翻译为本地语言提供。

或者由用户自行选择内容来源。

△ Twitter 可自行更改内容源

3. 书写顺序

最佳实践 1.2.1

全球化的产品应当能正确处理 RTL 语言。

△ 阿拉伯语示例文本

RTL(Right to Left,从右到左)语言指的是从右侧向左侧书写的语言。

这些语言包括:

  • 阿拉伯语
  • 希伯来语
  • 波斯语
  • 乌尔都语
  • 意第绪语
  • 迪维西语

语言的普遍特征有:

  • 句子从右到左阅读
  • 事件发展顺序从右到左进行
  • 左箭头 ← 表示向前运动,右箭头 → 代表向后运动

使用这些语言的人口数量相当大,特别是在波斯湾地区由于石油经济发展特别迅速。对于面对中东地区出海的产品,是不能回避的问题。

针对 RTL 语言的通用设计原则有:

  • 在代码中声明 RTL
  • 将整体界面左右镜像
  • 左右箭头代表的前后含义相反
  • 涉及方向的图标需要镜像
  • 文本资源基本右对齐
  • 不进行镜像的有,不传达方向的图标,如 Email;LTR 数字、不需翻译的外文;图像、时钟、拟物、禁止符

至于某种特定的语言情况,会在对应的本地化部分提及。

4. 文法

复数与阴阳性

相信你已经了解了英语的复数情况,1 book 与 2 books 的单词形式不同。如果每一个涉及数量的单词都使用 if 来判断实在是过于繁琐,更何况还有更复杂的复数情况:

△ 俄语名词变格表

完美匹配世界上所有语言的文法几乎是一项不可能完成的任务,不信来看 Language Plural Rules ,这里记录了绝大部分常用语言的复数、序数以及数字范围规则。

好在系统平台已经提供了相当完善的接口,配合本地化团队可以满足文法需求。

最佳实践 1.3.1

优先调用系统级的本地化字符串处理函数进行处理。

请联系你的开发人员查看以下本地化字符串文档:

  • iOS:Localizing Your App – Handling Noun Plurals and Units of Measurement
  • Android:字符串资源 | Android Developers

概括来说,需要本地化团队将对应的复数变化情况全部列出来,程序会根据接口获取到数字所对应的语言复数情况。

<item quantity=”one”>%d song found.</item>

<item quantity=”other”>%d songs found.</item>

您可能想查找下面的文章:

  • 网站产品设计参考的几条原则
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 怎么做私单才能又快又赚钱?来看老司机的私藏流程!
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 为什么不要再问用户「你们到底想要什么」?
  • 这10个不好用的微信设计,有哪些深层次的产品逻辑?
  • 基础小科普!浅谈「列表视图」与「网格视图」的用法

相关文章

  • 2018-08-23说点心里话!「QQ飞车×Vans随我造」项目背后的设计故事
  • 2018-08-23水彩自学第二集:水彩纸常见问题及测评
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:诱饵效应
  • 2018-08-23实战经验!两个大招帮视觉设计师高效完成工作
  • 2017-08-06制作手机上浏览的网页心得
  • 2018-08-23回过头看,我很感恩自己做出了这样的选择:石墨文档产品总监罗颖
  • 2018-08-23从新人到大牛!可能是最全面的交互设计知识体系
  • 2018-08-23如何构建 Web 端设计规范之文本与选择器
  • 2017-08-06使IE6正常显示PNG-24格式图片的两种方法
  • 2018-08-23学会这3个方法,零基础也能做出好看的配色

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 提高网站可用性和转化率的25个工具
    • 搜索文本框焦点离开时文本位置跳动问题解决方法
    • 方法多多!教你搞定手绘专题页设计
    • 如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!
    • 如何适配iPhone X?来看QQ 音乐这个实战案例复盘总结
    • 引入CSS的方式有哪些?link和@import的有何区别应如何选择
    • 最常见的日期选择器,原来有这么多细节设计!
    • 实例演示!聊聊品牌视觉设计的4个关键要素
    • 最近很火的UXD是什么?听阿里巴巴设计师怎么说!
    • Google对话式交互规范指南(八):通过确认和应答给予用户信心

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有