出海产品面临着语言、文化和用户习惯的巨大差异，这对UI设计师提出了更高的要求。本文为出海产品的UI设计提供了全面的干货指南，从文字、图标、色彩、图案到交互手势等多个角度，详细拆解了设计师在面对小语种和不同文化背景时需要注意的关键点。

随着TikTok的海外关注度和影响力逐渐扩展、小红书在海外友人的媒体圈炙手可热，国内的互联网市场逐渐趋于饱和，互联网产品纷纷向东南亚、非洲、拉丁美洲、欧洲扩展商业版图，这也为UI设计师创造了新的机遇。

对于出海产品而言，UI设计师需要有基础的语言文化了解，在此基础上去进行设计才能真正满足海外用户的需求，本文主要从UI的文字、图标、色彩等几个角度来拆解设计师在设计海外项目时需要注意的关键点，避免因为文化习俗差异而影响产品的易用性。

目录：

1.小语种文字：超长文本的处理规则、镜像语言、小语种适配检视技巧

2.图标：需要镜像的典型图标、不需要镜像的典型图标、图标特例

3.颜色

4.图案：禁忌图标、禁忌手势、禁忌物品、禁忌动物

5.交互手势

一、小语种文字

① 超长文本的处理规则

当在某些语种下出现界面用语超长显示不完整的情况，应按照如下优先级进行处理：

（1）精简界面用语

在保证可理解的前提下，考虑对该语言的翻译进一步精简，采用其他较短的近义词或者精简表达，如“save number”在界面用语超长时应精简为“save”。

（2）动态布局

当控件周围没有其他控件冲突时，控件可根据界面用语长度动态扩展，如按钮。

（3）缩小文字

将文本逐级缩小，建议最小缩小到18sp/dp。

并列的层级关系，文本超长时所有文字需要同时缩小字号

（4）多行显示

在设计中文时，提前考虑预留小语种换行空间，按音节换行。

（5）跑马灯

避免同意界面使用过多的跑马灯，1-3个为宜。过多的跑马灯会分散用户注意力，界面显示混乱。跑马灯占用系统资源，影响性能，过多的跑马灯可能会导致卡顿。

（6）打点截断

显示不下到文字截断显示并在末尾增加“…”

截断的使用场景：

A.用户自定义内容，如文件名，相册名

B.某处显示空间有限，但可以在本层级/上一层级/下一层级查看到全量内容。

② 镜像语言

阿拉伯、波斯语、乌尔都语、希伯来语等语言的书写都是从右向左书写，和当今世界主流语言（如英语）从左向右书写的方向相反。

做到这三点挑战，产品经理只会不断升值

好的产品经理是很稀缺的，懂用户、懂商业、懂数据的产品经理走出互联网，依然是抢手货。相反，如果只做简单传话、低效执行、浅层思考的产品经理，恐怕走不过未来3-5年的洪流。

查看详情 >

受文字书写方向的影响，阿拉伯语言的用户对于左右逻辑的认知和英文等LTR （left to right)完全相反，比如习惯将右侧作为开始，左侧作为结束。

为了支持RTL语言和用户习惯特点，在UI设计中，需要在文本，界面布局，手势操作和动画，图标等交互元素中满足RTL的特殊要求。

③ 小语种适配检视技巧

（1）字串显示——检视语言：西班牙语（拉丁美洲）

（2）大字体显示——检视语言：西班牙语（拉丁美洲）

二、图标

① 需要镜像的典型图标

（1）后退，前进

（2）显示前进方向的图标，如：骑车 发送 进度条。

▲ 阿拉伯语-显示前进方向

（3）右侧具有滑块的音量图标应当镜像，滑块应从右向左显示，如：音量调节。

▲ 阿拉伯语-音量调节

（4）表达含有文本含义的图标，如：对话框、书写、备忘录。

▲ 阿拉伯语-文本含义图标

② 不需要镜像的典型图标

（1）虽然时间的线性表示在RTL中被镜像，但圆形时间方向不是。对于RTL需要，时钟仍然是顺时针转动，时钟图标或带有箭头指向顺时针图标的刷新图标不应该镜像。

▲ 阿拉伯语-带有时间含义的图标

（2）国际标准的图标不需要镜像，如蓝牙。

（3）拟物图标不需要镜像，如SIM卡。

 (4) 斜线不需要镜像 ，如静音图标。

▲ 阿拉伯语-特殊免镜像图标

③ 图标特例

(1)亮度图标需要镜像：英文习惯认为左边暗，右边亮；阿拉伯语习惯认为左亮，右边暗。

(2)阿拉伯语有自己的问号

(3)阿拉伯语am.pm的位置要移动到时间左侧

三、色彩

1.中东市场：绿色为主、火红与黄色慎用。绿色象征吉祥，但叙利亚视黄色为不祥之兆，伊朗不喜爱蓝色。

2.非洲市场：禁忌多样。黑色普遍被认为不祥，红色在乍得、尼日利亚等国也不受欢迎。

3.欧洲市场：白色神圣，黄色慎用。

四、图案

禁忌手势

禁忌物品

禁忌动物

五、交互式手势

RTL语言中，带左右滑动方向的图片或者是左右滑动展开功能选项，应遵循与英文界面相反的镜像规则。

▲

汉语-左滑删除

▲  阿拉伯语-右滑删除结语

以上就是从小语种文字、图标、颜色、图案、交互手势等方面总结的出海产品设计干货，希望能让你有所收获~