有轨电车计划有什么问题

曾经有位女士打电话给我们的支持小组,不小心将家人分开,选择了马车上的位置。她想购买整个车厢,并坐了15、16、17和18个席位,将它们视为一组。甚至在此之前,我们怀疑每个人阅读电路都不方便,但那时我们特别清楚地了解了这一点。

旧方案:



经过研究的新方案:



选择汽车座位的方案是订购火车票过程的一部分。有些人不习惯阅读它,并且会犯错误。另外,近年来,在隔离之前,远离IT的偏远地区的人们开始积极出行,这对他们来说尤其困难。例如,在上面的第一个图中,很少有人可以正确而自信地确定上下架子,而无需其他线索。

我们对这些方案的使用进行了大规模研究。我们收集并测试了几种改进方法。基于UI工具包的最佳版本制作而成,该工具包现已免费提供

现在,我将告诉您有关在其他汽车中选择座椅时通常会出问题的信息。

旧方案的缺点


先行一步,第一项研究表明了所需要的:

  1. 更清楚地显示上下架子,这对每个人都不是显而易见的
  2. 通过将座位分成几组将车厢分开,这样一来,当人们在不同的车厢中购买机票时,不会出错
  3. 当人们将其与墙壁混淆时,突出显示窗口的开口,使其位置更加明显
  4. 更清晰地显示有关火车运动方向的信息,许多摇篮
  5. 在坐式马车中,更明显的是看到座椅相对于他人展开了-再次注意,以免分开
  6. 在旅行车图的细节中不力求现实,而是为了简化

有些人真的很想坐在窗户旁,但无法弄清楚它是如何工作的:
“百富勤猎鹰有细微差别,您可以在窗户之间穿梭,所以我仔细看,”窗户在哪里。在这里看不到:条形是窗户还是墙壁?”

有些人只能在火车运动的某个方向上睡觉。久坐不动的人有些摇摆不定:
“朝着方向和对立的地方-您必须查看它的方向,也许为后背着色。”

重新设计方案的第一种方法是“卷曲”


起初,我们依靠直觉。我们知道乘客有困难,但不知道这些是孤立的情况还是模式。我们试图使该方案更切合实际:借助伪体积的架子和阴影,我们展示了预留座位和厢式车中的分层。坐着的汽车中的扶手椅类似于电影院中的扶手椅。

那是:





它变得:





美丽?是。作品?没有。

向乘客展示了方案


然后,他们进行了一系列的采访,向人们展示了汽车的更新方案。并且我们发现了以下内容。



1.人们不了解上部和下部架子在哪里,

正如我们所希望的那样,并不是所有的空间思想都能很好地起作用。为了指示上下架子,需要更明确的提示。有经验的用户知道奇数方案,但这还不够。
“必须能够看到这个体积,以便了解在哪个架子下-在3D模式下,并且最好注意一下-并非所有人都可以。”



2.将相邻隔间的位置合并在一起,从

视觉上看,这些位置较近,因此邻近理论起作用。轿跑车之间的对比墙甚至没有帮助,我们检查了一下。
“我什至没有注意到它们是不同的隔间-哇!现在,我将分割家庭。”



3.混淆的窗户和墙壁

:必须突出显示窗户的开口,以使其位置更加明显。有些人真的很想坐在窗户旁边,但无法弄清楚它是如何工作的。



4.寻找运动方向

有些人只能在火车的某个运动方向上入睡。有些人在久坐不动的方向上摇摆不定。并非在所有火车上我们都可以显示行进方向,但是在坐式汽车中这通常是可能的。
“火车的运动需要更明亮,否则您可以跳过它,因为很多东西都塞满了并且看不见。”



5.沿座椅靠背定向

在坐着的货车中,人们相对于他人旋转座椅很重要。就像双门轿车一样-以免分开。现在寻找靠背需要额外的精力。



6.他们不想要现实,而是简单:

高细节和现实提出了许多问题-每个人都以自己的方式解释自己所看到的。相反,消除所有不必要的内容,我们减少了差异的数量。扶手是额外的装饰。在上面的图片中,扶手只会产生视觉噪音,并且很难理解座椅的外观。

处理错误


方案过去很难创建和扩展。没有足够的构造函数。我不得不爬上Illustrator,在汽车座椅下方的区域做标记,然后手动重命名每个位置。图表的背景是在Photoshop中单独绘制的,然后导入到光栅中的Illustrator中。

我们删除了所有多余的金属丝,并绘制了图中的UI套件,完全切换到矢量格式。现在,Tutu.ru中的所有旅行车图都是由以下组件组装而成的:


打开的UI套件中的图标和字体可能与公司许可的图标和字体不同,

该团队提供了组装这些图的详细指南。现在,不仅可以由设计师来组装汽车方案。设计者的任务是在电路组装后进行检查。

在货车图上,我们仅向人员显示会影响其购买决定的信息。如果这是一列坐着像燕子一样的货车的火车,那么重要的是要显示窗户,桌子和椅子靠背的位置。



在“燕子”马车中,我们展示:带动物座位的乘客座椅,最便宜的座椅,同行旅行者,行进方向和从马车某个角度拍摄的照片



每个人都知道默认情况下,厢式车中有窗户和桌子,因此显示座椅的分组更为重要,

网格

元素的大小和图上的缩进基于4像素网格。我们将图表中的最小足迹尺寸增加了一倍,以使人们在通过电话订购时错过的机会更少。



在某些情况下,您需要在视觉上使用笔触来增大或减小元素的大小。例如,轿跑车尺寸78 x 78不是4像素的倍数。在这种情况下,从座椅到车厢壁的明显凹痕为4。



轿厢中走廊和通道的尺寸通常等于一个或两个座椅模块。



图标

图标刻在一个24像素的容器中。有时将图标缩小到18像素很有用。例如,当您需要为有动物或残疾人的乘客指定地点时。或在繁忙的地方向其他旅行者显示。



我们尝试将相同的区域合并为一个图标,而不指示它们所占用的汽车区域。例如,如果马车上有一个双洗手间或两个相邻的行李架,我们会在其位置显示一个图标。购买者对他的身后以及去厕所多久有一个大致的了解就足够了。



汽车尺寸

在一个类中,我们努力制定尺寸相等的汽车方案。此外,在绘制方案的第一阶段的方案的宽度和高度不受限制,并且取决于方案中的部件的数量。开始绘制带有最多座位的车厢的特定火车的图表很有用。

以Swallows Premium为例,我们首先收集2号车的方案。



然后,对于第3号汽车,我们将厕所,冷却器,行李架下面的不必要的地方移开,保留了原来的网格和窗户的位置。



提高创建电路的速度电路

设计人员需要根据“ seat-21”形式的模板来命名每个座椅。有时,汽车上的此类位置可能超过一百个。该图具有用于批量重命名图层的良好工具。它记住层的重复顺序,并根据模板“ seat- $ N”对其重命名。



我们免费共享一组组件


您可以为旅行车图下载一组组件,并在Creative Commons BY许可下使用它。

图中的货车图UI套件→


要使用该文件,请复制该文件,该文件将出现在您的项目中;

如果您从未使用过Fig,请尝试一下-您可能会喜欢。这是世界各地的设计师使用的便捷Web工具。Sasha Okuneva的Figma指南帮助我们团队的成员更快地了解了该仪器

可以在我们的网站上查看新方案。例如,这是从莫斯科到圣彼得堡火车 -我们已经制定了针对Sapsans和Swallows的新计划。我们尚未到达预留的座位,双门轿跑车和SV,我们正在努力。

好吧,当然,方案可以在任何地方使用:如果承运人,俄罗斯铁路公司或其他人想要应用或修改它们以在其基础上构建自己的方案,我们全力以赴。

All Articles