ux设计中的各种地图_在UX设计中使用阿拉伯语

ux设计中的各种地图

Last year I got to work on an app that was ultimately going to be deployed globally in every market and every language including RTL (Right-to-Left) languages — with a specific focus on Arabic.

去年,我开始致力于开发一个应用程序,该应用程序最终将在全球所有市场和每种语言(包括RTL(从右至左)语言)中进行部署-重点是阿拉伯语。

I have to admit this one was new for me, so I did some research, did some design, and learned some things. With a background in linguistics, this was fascinating for me.

我必须承认这对我来说是新手,所以我做了一些研究,做了一些设计,并且学到了一些东西。 具有语言学背景,这让我着迷。

Addition: I’m adding updates to this post as I’m having further conversations and learning even more new things!

另外: 我正在与这篇文章添加更新,因为我正在与更多的对话并学习更多新事物!

Arabic presents some unique design challenges for UX, UI and copy, which meant we had to design for Arabic from the beginning, even though we were initially user testing with English-speaking audiences and launching our first MVP in LTR language markets.

阿拉伯语对UX,UI和复制提出了一些独特的设计挑战,这意味着我们必须从一开始就为阿拉伯语进行设计,即使我们最初是针对说英语的受众进行用户测试并在LTR语言市场推出我们的第一个MVP。

使用阿拉伯语进行界面设计的主要挑战 (Key challenges for interface design using Arabic)

Image for post

定向流和镜像 (Directional flow & mirroring)

The “rule everyone knows” (never assume) is that you simply flip or mirror the interface — job done! Er no, it’s a bit harder than that. Sorry, hard things are hard.

“每个人都知道的规则”(从不假设)是您只需翻转或镜像界面即可 ! 不,这比这难一点。 对不起,困难的事情很难。

From my understanding, RTL script is not just a different visual pattern, it is also a mindset or perception change. Rather than simply knocking out UI components and flipping them round, we need to think differently and in a more holistic way.

根据我的理解,RTL脚本不仅是一种不同的视觉模式,而且还是一种思维方式或观念上的改变。 我们不仅要淘汰UI组件并将它们翻转,还需要以一种更全面的方式进行思考。

时间和进度 (Time and progression)

Take the example of time. The sense of task progression is reversed. The linear representation of time is reversed. Whereas LTR text readers perceive things like loading bars and sliders as left-to-right, those now need to work the other way.

以时间为例。 任务进度的感觉是相反的。 时间的线性表示是相反的。 LTR文本阅读器将加载条和滑块之类的内容从左到右视为感知,而现在,它们需要以其他方式工作。

Two sliders, one LTR and one RTL (arabic)

However — if you just flipped everything in your UI you’d get it wrong. There are exceptions:

但是,如果您只是翻转了UI中的所有内容,那肯定会出错。 也有例外:

  • Clocks still turn “clockwise”

    时钟仍然“顺时针”旋转
  • Icons such as coffee cups still have handles to the right. (note also, majority of users are still right-handed)

    咖啡杯之类的图标仍然在右侧具有手柄。 (另请注意,大多数用户仍是惯用右手的人)
Image for post

处理RTL文本 (Handling RTL text)

As I mentioned for UI components, with RTL languages, your text flows, well, right to left. Users’ visual scanning behaviour is also reversed, including the use of F-Patterns.

正如我在UI组件中提到的那样,使用RTL语言,您的文本从右到左流动。 用户的视觉扫描行为也被颠倒, 包括使用F模式 。

Icons and check boxes related to text therefore sit to the right of the copy, however the tick itself remains as a LTR graphic.

因此,与文本相关的图标和复选框位于副本的右侧,但是刻度线本身仍保留为LTR图形。

Image for post

号码 (Numbers)

Numbers appearing in RTL interfaces generally still run LTR. As an example the year 2018 is still written 2018. However, if the sense you are trying to communicate is a period of time (2018–2020) then that text runs in line with the RTL mindset — (2020–2018).

RTL接口中出现的数字通常仍在运行LTR 。 例如,2018年仍是2018年。但是,如果您要传达的含义是一段时间(2018-2020),则该文本与RTL思维定式(2020-2018)一致。

The exception for this is LTR text appearing in a RTL interface such as a phone number, which always appears LTR even in a RTL interface design.

例外情况是LTR文本出现在RTL界面(例如电话号码)中,即使在RTL界面设计中也始终显示LTR。

Image for post

符号和图标: (Symbols and icons:)

As mentioned above, icons that communicate directionality are reversed, however icons that do not, are not. This includes universal icons such as camera, or home.

如上所述,传达方向性的图标是相反的,但是没有传达的图标则没有。 这包括通用图标,例如相机或家。

Two icons for back — mirrored, two icons for airplane mode — not mirrored

Note: a backslash within an icon is not reversed. Similarly, neither are brand icons or recognised trademarks.

注意:图标中的反斜杠不会反向。 同样,品牌图标或公认商标也不是。

语言特点: (Characteristics of the language:)

复印长度 (Length of copy)

The first thing to know is that English to Arabic does not translate 1:1. If you’ve ever worked with German translation before this won’t surprise you, however it’s much more complex than German.

首先要知道的是,英语到阿拉伯语不会翻译为1:1。 如果您曾经使用过德语翻译,这不会令您感到惊讶,但是它比德语复杂得多。

Some words from English will be translated into longer phrases as they are descriptive of the sense or concept being described. You’re going to need flexibility in your UI to allow for this.

某些来自英语的单词将被翻译成更长的短语,因为它们描述了所描述的意义或概念。 您将需要UI的灵活性来实现这一点。

arabic translation, copy is truncated due to requirements for translating the concept of “5g”
Source: http://uxbert.com/designing-an-arabic-user-experience-usability-arabic-user-interfaces/
资料来源: http : //uxbert.com/designing-an-arabic-user-experience-usability-arabic-user-interfaces/

Also, where letters appear in a sentence change its meaning, so you cannot simply chop longer words or sentences at the line break and expect it to mean the same. This can easily happen if you get copy translated professionally but then just “run it in” to your design.

另外,句子中出现字母的地方会改变其含义,因此, 您不能简单地在换行符处切掉较长的单词或句子并期望其含义相同。 如果您对译文进行专业翻译,然后将其“运行”到您的设计中,则很容易发生这种情况。

The best approach here would be to have an initial professional native translation, then have a UX writer and UI designer working with the translator to implement the successful design.

最好的方法是进行最初的专业本机翻译,然后让UX编写器和UI设计器与翻译一起工作以实现成功的设计。

字型 (Fonts)

Arabic is more visually complex compared to some other languages, making use of dots and diacritics (small symbols representing vowels) and also takes up more horizontal space than roman text. Because of this, when translating from English to Arabic, we’re going to need a bigger font than you do when you translate to languages which are also in roman text, to ensure legibility.

与其他一些语言相比,阿拉伯语在视觉上更复杂,它使用点和变音符号(表示元音的小符号),并且比罗Maven本占用更多的水平空间。 因此,从英语翻译为阿拉伯语时,与要翻译成罗Maven本的语言相比,我们需要更大的字体以确保可读性。

Image for post

Humans eyes have the same problems with vision, ageing and accessibility — whatever language you speak. We need to design accordingly whatever language we are using.

无论您说什么语言,人眼在视觉,衰老和可及性方面都存在同样的问题。 我们需要相应地设计所使用的语言。

The recommended font to use for Arabic interfaces is Google’s Noto Font. It’s free to download, has 75+ font families available. So, no more tofu.

推荐用于阿拉伯语界面的字体是Google的Noto Font 。 它是免费下载的,提供75种以上的字体系列。 因此, 不再有豆腐了 。

The words “no more tofu” in a graphic from Google.
Source: https://twitter.com/neuscout/status/982713621640867840
资料来源: https : //twitter.com/neuscout/status/982713621640867840

阿拉伯语到英语内容之旅 (Arabic to English content journeys)

There is a lot of content on the internet, and for complex reasons, a lot of it is in English.

互联网上有很多内容,由于复杂的原因,很多内容都是英文的。

There is a disproportionate amount of content in English or non-Arabic content compared to the number of Arabic speakers online.

与在线讲阿拉伯语的人数相比,英语或非阿拉伯语内容的数量不成比例 。

Therefore, whatever you are designing in Arabic, if you are linking out to other content, the user could land on an English content website, so consideration of multi-lingual user journeys is important.

因此,无论您使用阿拉伯语进行的设计是什么,如果您链​​接到其他内容,则用户都可以登陆英语内容网站,因此考虑多种语言的用户旅程至关重要。

Equally, if content is not available for your experience in Arabic, it may be better to include English content rather than none, if it increases the chance of user comprehension. Either way, your interface needs to support both languages.

同样,如果您无法用阿拉伯语获得内容,那么最好增加英文内容而不是不包含英文内容,否则会增加用户理解的机会。 无论哪种方式,您的界面都需要支持两种语言。

Addition: I’ve since had conversations with UI designers working in Arabic who are designing nav layouts in LTR with RTL text, mostly due to some users being more used to LTR layouts. Jakob’s Law in action.

另外: 从那以后,我与阿拉伯语的UI设计师进行了交谈,这些设计师正在使用RTL文本在LTR中设计导航布局,这主要是由于一些用户更习惯于LTR布局。 雅各布定律在起作用

不是“一刀切” (Not ‘one size fits all’)

Another complexity when considering translation is that Arabic is not a single language or a single country. There are linguistic and cultural differences and challenges.

考虑翻译时的另一个复杂性是阿拉伯语不是一种语言或单个国家。 在语言和文化上存在差异和挑战。

It would be easy to make an arbitrary rule, like “just use Modern Standard Arabic” (MSA) however, if you are targeting one specific arabic-speaking user group, then using a version of Arabic that can be adequately understood, but comes across as overly formal, might not resonate. It would be better to understand your audience (yes, research) and make a decision based on evidence rather than assumption.

容易制定一个任意规则,例如“ 仅使用现代标准阿拉伯语”(MSA),但是,如果您要针对一个特定的讲阿拉伯语的用户群,则使用可以充分理解但会遇到的阿拉伯语版本过于正式,可能不会引起共鸣。 了解您的听众(是,进行研究)并根据证据而不是假设做出决定会更好。

相信 (Trust)

According to Arabic UX agency IstiZada, “Arabs tend to be much more risk averse than many other cultures around the world”. If this is the case for your users, as with any other trust-sensitive market, then additional work needs to be done on defining what trust looks like — across the experience and through both design and copy.

根据阿拉伯用户体验机构IstiZada的说法, “与世界上许多其他文化相比阿拉伯人更倾向于规避风险” 如果您的用户是这种情况,那么就像在任何其他信任敏感的市场中一样,则需要在定义整个体验过程中以及通过设计和复制来完成定义信任外观的其他工作。

What can you do to the overall IA and task flow to ensure clarity, transparency and trust of your product or service?

您如何对整个IA和任务流进行处理,以确保产品或服务的清晰度,透明度和信任度?

As always, aim to understand your actual users’ needs, rather than apply broad brush rules. Do primary research.

与往常一样,旨在了解您实际用户的需求,而不是应用广泛的画笔规则。 做基础研究。

永远不要假设 (Never assume)

I think we can conclude that designing interfaces for Arabic language and audiences as a Westerner requires care and attention, however in reality this is only the care and attention we should be giving to understanding the needs of all of our users.

我认为我们可以得出结论,为西方人设计阿拉伯语和受众界面需要关注和关注,但是实际上,这只是我们应该了解所有用户需求的关注和关注。

  • Who are our users?

    我们的用户是谁?
  • What are their mental models of this product or service?

    他们对这种产品或服务的思维模式是什么?
  • How can we understand them better?

    我们如何才能更好地理解它们?
  • Does this design meet their needs?

    这种设计是否满足他们的需求?
  • How can it flex for a range of user needs?

    如何适应各种用户需求?
  • How can we make this culturally relevant and appropriate?

    我们如何才能使其在文化上相关并恰当?
  • How can we make this interface accessible?

    我们如何使该界面可访问?

Clearly, all of the above can be achieved by conducting appropriate primary research — generative and evaluative, by engaging expert stakeholders (local market, industry and translation consultants) and by following W3C standards.

显然,可以通过进行适当的基础研究(生成性和评估性),吸引专家利益相关者(本地市场,行业和翻译顾问)并遵循W3C标准,来实现上述所有目标。

Just like we should be doing for every experience we design.

就像我们应该为我们设计的每种体验所做的一样。

翻译自: https://blog.prototypr.io/working-with-arabic-in-ux-2c74383fc463

ux设计中的各种地图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274608.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何为前端项目一键自动添加eslint和prettier的支持

本文来自读者那个曾经的少年回来了 写的源码共读35期笔记文章,授权投稿,写的真好。本文参加了由公众号若川视野 发起的每周源码共读活动,点此加我微信 ruochuan12 了解详情一起参与。本文属于源码共读第35期 | 为 vite 项目自动添加 eslint 和…

极端原理_为极端而设计

极端原理*You can also read this article in German here.*您也可以 在此处 阅读 德语文章 。 In this article I’m going to draw on the Design thinking concept of designing for extreme users and I will argue that designing for extreme users can be considered a…

当CV工程师碰到了拷贝粘贴的需求——useClipboard的使用及源码解析

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…

ux和ui_从UI切换到UX设计

ux和uiI still remember those days, when I was a soon-to-be graphic design graduate who started to question what my future will be. At that time, I realized that I loved graphic design, but I wasn’t sure if I enjoyed doing it. Creating logos, posters, broc…

春季招聘后前端工程师的就业指南

尽管疫情反复,大厂裁员,招聘季仍是在困难中有条不紊地落下了尾声。回顾今年的春季招聘,北京青年报记者发现,互联网“大厂”依然对“研发岗”需求最为旺盛。但许多企业最近都在围绕“降本提效”来进行业务调整,这对技术…

探索式测试的思维模型

上一章介绍了探索式测试的定义。在实际项目的测试执行过程中,读者是否曾遇到如下的几个现象: 测试人员按照一个测试用例来执行测试,得到的程序输出与预期输出不一致。 测试人员判断程序的行为并不是缺陷,但根据新的输出想到了新的…

图解Git分支和命令

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…

vsco_VSCO重新设计:更直观,更简化的界面

vscoAmong the many photo-editing apps, VSCO has definitely become a popular favorite among both experienced photographers as well as “aesthetic” Instagram users. However, my interaction with the app starts and ends with using a few key filters and (maybe…

浅谈前端埋点监控

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外&…

css版式_第2部分:使版式具有响应能力,并为以后的版本奠定基础

css版式The feedback I’ve received over the past week has been amazing, and matches my own excitement about this project. I’ve spent a lot of time researching, writing, and teaching about creating better typography for reading on digital devices over the …

BBS项目--登录

BBS阶段性测试总要求 django登录报错 Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。 原因分析:出现这种情况在Windows中很常见,就是端口被占用 解决措施:这时我们只需改一下端口便可以了 登录前端页面(HTML…

【声明】

我的公众号和朋友圈有时会有一些课程推广广告,微博的收入来源。我接的广告一般来说都是比自己去买会优惠不少,我也会想方设法争取到更多福利(优惠)。买过的都知道确实优惠。如果有人看到觉得不合适,不想看到&#xff0…

怎么实现页面友好跳转_如何实现软,友好和一致的UI设计

怎么实现页面友好跳转重点 (Top highlight)Design trends are constantly changing, aren’t they? Each month there is a new visual effect or a trick that becomes “设计趋势在不断变化,不是吗? 每个月都有一个新的视觉效果或技巧,成为…

前端趋势 2022

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外&…

lightroom预设使用_在Lightroom中使用全景图增强照片游戏

lightroom预设使用Everyone here has taken a panorama with an iphone. We’ve spun around in a circle, trying to keep that arrow right on the line, and more than likely ended up with a strange, squiggly, horizontal photo. Every so often you might get lucky an…

第91次TC39会议举行,这还是我认识的JS吗?

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

android调节音量——AudioManager的应用

Android中可以通过程序获取系统手机的铃声和音量。同样,也可以设置铃声和音量。Android中给出了AudioManager类来实现音量获取、音量控制。本篇基于 Android API 中的 AudioManager 作讲述,最后给出实例。下面是本篇大纲:1、认识 AudioManage…

静态创意和动态创意_再次发挥创意需要什么?

静态创意和动态创意重点 (Top highlight)According to Oxford dictionary, creativity means “1. Inventiveness. 2. the use of imagination or original ideas to create something.”根据牛津词典,创造力意味着“ 1。 创造力。 2.利用想象力或独创性的思想来创造…

我写了 ahooks 源码分析系列,收到官方邀请我一起维护,这是一次提 PR 的记录...

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

Hdu 4415 Assassin's Creed 【贪心】.cpp

题意: 某A有一个剑 坚韧度为m 他可以用这个剑去攻打别的队伍 杀掉第 i 个队伍需要消耗的坚韧度为 Ai 并可以用得到的剑去打别的队(Bi个) 但是打完别的队这个剑就不能用了 问怎么用最少的坚韧度击败最多的队伍 给出T组样例 每个样例给出n m n表示有n个队 接下来n行给…