Question

最近我对移动用户体验设计进行了更多挖掘，我找到了一个关于1手/拇指选择的有趣话题。

主要思想是你有两个可以用拇指点击的三角形区域。我试图通过CSS或jQuery找到一个解决方案来创建2个可点击/触摸的三角形区域，但是我失败了。

我试过了：
- 图标字体
- svgs（这不起作用，因为svgs仍然是矩形的）
- 带有边框形状为三角形的div - 画布（效果不佳）
- ASCII字体
- jQuery，在这方面没什么用处：/
- 旋转div（CSS变换）

你对我如何能够获得适合屏幕的2个响应三角形，在屏幕上不重叠，可以在DOM中点击和访问吗？

UI的主要观点是用户需要这样看到点击/可触摸区域（视觉上）以确定交互的可能性。获得点击区域（以三角形样式）很可能不是问题。但是，向用户显示他们需要在某个区域进行交互是关键。

我不想要缩放或不同版本的图片！我喜欢看CSS或JavaScript解决方案...

我猜最大的问题是三角形不成比例+响应性

这张照片应该说明这个想法： responsive triangle http://s7.directupload.net/images/140212/7q8q4nha.jpg

Answer 1

您最好的选择可能是使用简单的SVG

<svg viewBox="0 0 1 1" preserveAspectRatio="none">
    <polyline points="0,0  1,0  0,1" fill="#F00" id="top"/>
    <polyline points="1,0  1,1  0,1" fill="#0F0" id="bottom"/>
</svg>

您可以使用CSS来设置悬停时元素的样式：

#top:hover {
    fill: #880000;
}

jQuery用于检测是否已单击某个元素：

$('#top').click(function () { ...

以下是演示：http://codepen.io/Godwin/pen/mIqlA

Answer 2

稍微走出盒子 - 为什么不捕获所有点击事件，然后挖掘x，y坐标并做一些简单的数学运算来确定点击发生在哪个“三角形”？

如果您需要一个实际的三角形，那么您可以添加一个svg或其他图形，但不要将您的UI基于该实际图形 - 基于点击的位置？

如果您的布局/ UI需要三角形而不是检测问题。您可以使用媒体查询和复杂断点强制执行“三角形”布局。但是，您的问题并没有太多的细节来指导您的UI问题的答案。

全屏响应三角形图案

2 个答案: